-
Notifications
You must be signed in to change notification settings - Fork 47.3k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
DevTools: Show hook names based on variable usage (#21641)
Co-authored-by: Brian Vaughn <[email protected]> Co-authored-by: Saphal Patro <[email protected]> Co-authored-by: VibhorCodecianGupta <[email protected]>
- Loading branch information
4 people
authored
Jul 1, 2021
1 parent
ab390c6
commit c5cfa71
Showing
84 changed files
with
2,966 additions
and
74 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,34 @@ | ||
| /** | ||
| * Copyright (c) Facebook, Inc. and its affiliates. | ||
| * | ||
| * This source code is licensed under the MIT license found in the | ||
| * LICENSE file in the root directory of this source tree. | ||
| * | ||
| * @flow | ||
| */ | ||
|
|
||
| import ErrorStackParser from 'error-stack-parser'; | ||
| import testErrorStack, { | ||
| SOURCE_STACK_FRAME_LINE_NUMBER, | ||
| } from './ErrorTesterCompiled'; | ||
|
|
||
| let sourceMapsAreAppliedToErrors: boolean | null = null; | ||
|
|
||
| // Source maps are automatically applied to Error stack frames. | ||
| export function areSourceMapsAppliedToErrors(): boolean { | ||
| if (sourceMapsAreAppliedToErrors === null) { | ||
| try { | ||
| testErrorStack(); | ||
| sourceMapsAreAppliedToErrors = false; | ||
| } catch (error) { | ||
| const parsed = ErrorStackParser.parse(error); | ||
| const topStackFrame = parsed[0]; | ||
| const lineNumber = topStackFrame.lineNumber; | ||
| if (lineNumber === SOURCE_STACK_FRAME_LINE_NUMBER) { | ||
| sourceMapsAreAppliedToErrors = true; | ||
| } | ||
| } | ||
| } | ||
|
|
||
| return sourceMapsAreAppliedToErrors === true; | ||
| } |
25 changes: 25 additions & 0 deletions
25
packages/react-devtools-extensions/src/ErrorTesterCompiled.js
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1 @@ | ||
| The JavaScript files and source maps in this directory are used to test DevTools hook name parsing code. The files here use source maps in different formats to mirror real world applications. The source for the files is located in the parnet `__tests__` folder. To regenerate these compiled files, run `yarn update-mock-source-maps` in the `react-devtools-extensions` directory. |
39 changes: 39 additions & 0 deletions
39
packages/react-devtools-extensions/src/__tests__/__source__/ComponentWithCustomHook.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,39 @@ | ||
| /** | ||
| * Copyright (c) Facebook, Inc. and its affiliates. | ||
| * | ||
| * This source code is licensed under the MIT license found in the | ||
| * LICENSE file in the root directory of this source tree. | ||
| * | ||
| * @flow | ||
| */ | ||
|
|
||
| import React, {useEffect, useState} from 'react'; | ||
|
|
||
| export function Component() { | ||
| const [count, setCount] = useState(0); | ||
| const isDarkMode = useIsDarkMode(); | ||
|
|
||
| useEffect(() => { | ||
| // ... | ||
| }, []); | ||
|
|
||
| const handleClick = () => setCount(count + 1); | ||
|
|
||
| return ( | ||
| <> | ||
| <div>Dark mode? {isDarkMode}</div> | ||
| <div>Count: {count}</div> | ||
| <button onClick={handleClick}>Update count</button> | ||
| </> | ||
| ); | ||
| } | ||
|
|
||
| function useIsDarkMode() { | ||
| const [isDarkMode] = useState(false); | ||
|
|
||
| useEffect(function useEffectCreate() { | ||
| // Here is where we may listen to a "theme" event... | ||
| }, []); | ||
|
|
||
| return isDarkMode; | ||
| } |
17 changes: 17 additions & 0 deletions
17
...es/react-devtools-extensions/src/__tests__/__source__/ComponentWithExternalCustomHooks.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,17 @@ | ||
| /** | ||
| * Copyright (c) Facebook, Inc. and its affiliates. | ||
| * | ||
| * This source code is licensed under the MIT license found in the | ||
| * LICENSE file in the root directory of this source tree. | ||
| * | ||
| * @flow | ||
| */ | ||
|
|
||
| import React from 'react'; | ||
| import useTheme from './useTheme'; | ||
|
|
||
| export function Component() { | ||
| const theme = useTheme(); | ||
|
|
||
| return <div>theme: {theme}</div>; | ||
| } |
21 changes: 21 additions & 0 deletions
21
packages/react-devtools-extensions/src/__tests__/__source__/Example.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,21 @@ | ||
| /** | ||
| * Copyright (c) Facebook, Inc. and its affiliates. | ||
| * | ||
| * This source code is licensed under the MIT license found in the | ||
| * LICENSE file in the root directory of this source tree. | ||
| * | ||
| * @flow | ||
| */ | ||
|
|
||
| import React, {useState} from 'react'; | ||
|
|
||
| export function Component() { | ||
| const [count, setCount] = useState(0); | ||
|
|
||
| return ( | ||
| <div> | ||
| <p>You clicked {count} times</p> | ||
| <button onClick={() => setCount(count + 1)}>Click me</button> | ||
| </div> | ||
| ); | ||
| } |
14 changes: 14 additions & 0 deletions
14
packages/react-devtools-extensions/src/__tests__/__source__/InlineRequire.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,14 @@ | ||
| /** | ||
| * Copyright (c) Facebook, Inc. and its affiliates. | ||
| * | ||
| * This source code is licensed under the MIT license found in the | ||
| * LICENSE file in the root directory of this source tree. | ||
| * | ||
| * @flow | ||
| */ | ||
|
|
||
| export function Component() { | ||
| const [count] = require('react').useState(0); | ||
|
|
||
| return count; | ||
| } |
Oops, something went wrong.