diff --git a/packages/react-devtools-shared/src/__tests__/injectHookVariableNames-test.js b/packages/react-devtools-shared/src/__tests__/injectHookVariableNames-test.js deleted file mode 100644 index 0c71a939e14d5..0000000000000 --- a/packages/react-devtools-shared/src/__tests__/injectHookVariableNames-test.js +++ /dev/null @@ -1,1195 +0,0 @@ -/** - * 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 {parse} from '@babel/parser'; -import { - getHookVariableName, - getPotentialHookDeclarationsFromAST, - checkNodeLocation, - isConfirmedHookDeclaration, - getFilteredHookASTNodes, - filterMemberWithHookVariableName, - getHookNodeWithInjectedVariableName, - isNonDeclarativePrimitiveHook, - loadHookNamesFunction, -} from 'react-devtools-shared/src/utils'; - -describe('loadHookNamesFunction', () => { - it('should test loadHookNamesFunction', async done => { - const hookLog = [ - { - id: 0, - isStateEditable: true, - name: 'State', - value: false, - subHooks: [], - hookSource: { - lineNumber: 151, - functionName: 'Button', - fileName: '/resources/bundle.js', - columnNumber: 89, - }, - }, - { - id: 1, - isStateEditable: true, - name: 'State', - value: 0, - subHooks: [], - hookSource: { - lineNumber: 152, - functionName: 'Button', - fileName: '/resources/bundle.js', - columnNumber: 62, - }, - }, - { - id: 2, - isStateEditable: true, - name: 'State', - value: 2, - subHooks: [], - hookSource: { - lineNumber: 160, - functionName: 'Button', - fileName: '/resources/bundle.js', - columnNumber: 63, - }, - }, - { - id: null, - isStateEditable: false, - name: 'CustomHook', - subHooks: [ - { - id: 3, - isStateEditable: false, - name: 'Ref', - value: null, - subHooks: [], - hookSource: { - lineNumber: 115, - functionName: 'useCustomHook', - fileName: '/resources/bundle.js', - columnNumber: 65, - }, - }, - { - id: 4, - isStateEditable: false, - name: 'Ref', - subHooks: [], - hookSource: { - lineNumber: 116, - functionName: 'useCustomHook', - fileName: '/resources/bundle.js', - columnNumber: 65, - }, - }, - ], - hookSource: { - lineNumber: 163, - columnNumber: 23, - functionName: 'Button', - fileName: '/resources/bundle.js', - }, - }, - { - id: null, - isStateEditable: false, - name: 'CustomHook', - subHooks: [ - { - id: 5, - isStateEditable: false, - name: 'Ref', - value: null, - subHooks: [], - hookSource: { - lineNumber: 115, - functionName: 'useCustomHook', - fileName: '/resources/bundle.js', - columnNumber: 65, - }, - }, - { - id: 6, - isStateEditable: false, - name: 'Ref', - subHooks: [], - hookSource: { - lineNumber: 116, - functionName: 'useCustomHook', - fileName: '/resources/bundle.js', - columnNumber: 65, - }, - }, - ], - hookSource: { - lineNumber: 164, - columnNumber: 35, - functionName: 'Button', - fileName: '/resources/bundle.js', - }, - }, - { - id: null, - isStateEditable: false, - name: 'CustomHook', - subHooks: [ - { - id: 7, - isStateEditable: false, - name: 'Ref', - value: null, - subHooks: [], - hookSource: { - lineNumber: 115, - functionName: 'useCustomHook', - fileName: '/resources/bundle.js', - columnNumber: 65, - }, - }, - { - id: 8, - isStateEditable: false, - name: 'Ref', - subHooks: [], - hookSource: { - lineNumber: 116, - functionName: 'useCustomHook', - fileName: '/resources/bundle.js', - columnNumber: 65, - }, - }, - ], - hookSource: { - lineNumber: 168, - columnNumber: 3, - functionName: 'Button', - fileName: '/resources/bundle.js', - }, - }, - { - id: 9, - isStateEditable: false, - name: 'Ref', - subHooks: [], - hookSource: { - lineNumber: 169, - functionName: 'Button', - fileName: '/resources/bundle.js', - columnNumber: 64, - }, - }, - { - id: 10, - isStateEditable: true, - name: 'State', - value: 0, - subHooks: [], - hookSource: { - lineNumber: 170, - functionName: 'Button', - fileName: '/resources/bundle.js', - columnNumber: 72, - }, - }, - { - id: 11, - isStateEditable: true, - name: 'State', - value: 1, - subHooks: [], - hookSource: { - lineNumber: 171, - functionName: 'Button', - fileName: '/resources/bundle.js', - columnNumber: 89, - }, - }, - { - id: 12, - isStateEditable: true, - name: 'State', - value: 1, - subHooks: [], - hookSource: { - lineNumber: 172, - functionName: 'Button', - fileName: '/resources/bundle.js', - columnNumber: 82, - }, - }, - { - id: 13, - isStateEditable: true, - name: 'State', - value: true, - subHooks: [], - hookSource: { - lineNumber: 173, - functionName: 'Button', - fileName: '/resources/bundle.js', - columnNumber: 66, - }, - }, - { - id: 14, - isStateEditable: true, - name: 'State', - value: 0, - subHooks: [], - hookSource: { - lineNumber: 174, - functionName: 'Button', - fileName: '/resources/bundle.js', - columnNumber: 85, - }, - }, - { - id: 15, - isStateEditable: false, - name: 'Effect', - value: {}, - subHooks: [], - hookSource: { - lineNumber: 175, - functionName: 'Button', - fileName: '/resources/bundle.js', - columnNumber: 58, - }, - }, - ]; - const newHookLog = await loadHookNamesFunction(hookLog); - expect(newHookLog).toHaveLength(hookLog.length); - done(); - }); - - it('should identify variable names in destructed syntax', async done => { - const componentSnippet = ` - const Example = () => { - const [count, setCount] = React.useState(1); - return count; - }; - `; - - const ast = parse(componentSnippet, { - sourceType: 'unambiguous', - plugins: ['jsx', 'typescript'], - }); - const hookAstNodes = getPotentialHookDeclarationsFromAST(ast); - - // Only one hook node is present in the source code - expect(hookAstNodes).toHaveLength(1); - - const hookName = getHookVariableName(hookAstNodes[0]); - expect(hookName).toBe('count'); - done(); - }); - - it('should identify variable names in direct assignment', async done => { - const componentSnippet = ` - const Example = () => { - const count = React.useState(1); - return count; - }; - `; - - const ast = parse(componentSnippet, { - sourceType: 'unambiguous', - plugins: ['jsx', 'typescript'], - }); - const hookAstNodes = getPotentialHookDeclarationsFromAST(ast); - - // Only one hook node is present in the source code - expect(hookAstNodes).toHaveLength(1); - - const hookName = getHookVariableName(hookAstNodes[0]); - expect(hookName).toBe('count'); - done(); - }); - - it('should identify variable names in case of destructured assignment', async done => { - const componentSnippet = ` - const Example = () => { - const countState = React.useState(1); - const [count, setCount] = countState; - return countState; - }; - `; - - const ast = parse(componentSnippet, { - sourceType: 'unambiguous', - plugins: ['jsx', 'typescript'], - }); - // hookAstNodes captures lines of interest: 3 & 4 - const hookAstNodes = getPotentialHookDeclarationsFromAST(ast); - expect(hookAstNodes).toHaveLength(2); - // This line number corresponds to where the hook is present - const lineNumber = 3; - - // Isolate the Hook AST Node - const potentialReactHookASTNode = hookAstNodes.find( - node => - checkNodeLocation(node, lineNumber) && isConfirmedHookDeclaration(node), - ); - // Find the nodes that are associated with the React Hook found - in this case we obtain the [count, setCount] line - const nodesAssociatedWithReactHookASTNode = getFilteredHookASTNodes( - potentialReactHookASTNode, - hookAstNodes, - 'example-app', - new Map(), - ); - - // Only one node should be found here - expect(nodesAssociatedWithReactHookASTNode).toHaveLength(1); - const relatedNode = nodesAssociatedWithReactHookASTNode[0]; - - // The [count, setCount] destructuring is on line 4 - expect(relatedNode.node.loc.start.line).toBe(4); - - const hookName = getHookVariableName(relatedNode); - expect(hookName).toBe('count'); - done(); - }); - - it('should identify variable names in case of assignment from object members', async done => { - const componentSnippet = ` - const Example = () => { - const countState = useState(1); - const count = countState[0]; - const setCount = countState[1]; - return countState; - }; - `; - - const ast = parse(componentSnippet, { - sourceType: 'unambiguous', - plugins: ['jsx', 'typescript'], - }); - // hookAstNodes captures lines of interest: 3, 4 & 5 - const hookAstNodes = getPotentialHookDeclarationsFromAST(ast); - expect(hookAstNodes).toHaveLength(3); - // This line number corresponds to where the hook is present - const lineNumber = 3; - - // Isolate the Hook AST Node - const potentialReactHookASTNode = hookAstNodes.find( - node => - checkNodeLocation(node, lineNumber) && isConfirmedHookDeclaration(node), - ); - // Find the nodes that are associated with the React Hook found - in this case we obtain the lines - // -> const count = countState[0]; - // -> const setCount = countState[1]; - const nodesAssociatedWithReactHookASTNode = getFilteredHookASTNodes( - potentialReactHookASTNode, - hookAstNodes, - 'example-app', - new Map(), - ); - - // Two nodes should be found here - expect(nodesAssociatedWithReactHookASTNode).toHaveLength(2); - const nodeAssociatedWithReactHookASTNode = nodesAssociatedWithReactHookASTNode.filter( - hookPath => filterMemberWithHookVariableName(hookPath), - ); - - // Node containing the variable name should be isolated here - expect(nodeAssociatedWithReactHookASTNode).toHaveLength(1); - const relatedNode = nodeAssociatedWithReactHookASTNode[0]; - - // The const count = countState[0] assignment is on line 4 - expect(relatedNode.node.loc.start.line).toBe(4); - - const hookName = getHookVariableName(relatedNode); - expect(hookName).toBe('count'); - done(); - }); - - it('should identify variable names in case of inline assignment from object members', async done => { - const componentSnippet = ` - const Example = () => { - const countState = useState(1); - const count = countState[0], setCount = countState[1]; - return countState; - }; - `; - - const ast = parse(componentSnippet, { - sourceType: 'unambiguous', - plugins: ['jsx', 'typescript'], - }); - // hookAstNodes captures lines of interest: 3 & 4 - const hookAstNodes = getPotentialHookDeclarationsFromAST(ast); - expect(hookAstNodes).toHaveLength(3); - // This line number corresponds to where the hook is present - const lineNumber = 3; - - // Isolate the Hook AST Node - const potentialReactHookASTNode = hookAstNodes.find( - node => - checkNodeLocation(node, lineNumber) && isConfirmedHookDeclaration(node), - ); - // Find the nodes that are associated with the React Hook found - in this case we obtain the line - // -> const count = countState[0], setCount = countState[1]; - const nodesAssociatedWithReactHookASTNode = getFilteredHookASTNodes( - potentialReactHookASTNode, - hookAstNodes, - 'example-app', - new Map(), - ); - - // Two nodes should be found here - expect(nodesAssociatedWithReactHookASTNode).toHaveLength(2); - const nodeAssociatedWithReactHookASTNode = nodesAssociatedWithReactHookASTNode.filter( - hookPath => filterMemberWithHookVariableName(hookPath), - ); - - // Node containing the variable name should be isolated here - expect(nodeAssociatedWithReactHookASTNode).toHaveLength(1); - const relatedNode = nodeAssociatedWithReactHookASTNode[0]; - - // The const count = countState[0] assignment is on line 4 - expect(relatedNode.node.loc.start.line).toBe(4); - - const hookName = getHookVariableName(relatedNode); - expect(hookName).toBe('count'); - done(); - }); - - it('should default to original variable name in case of repeated references', async done => { - const componentSnippet = ` - const Example = () => { - const countState = useState(1); - const count = countState[0]; - const setCount = countState[1]; - const [anotherCount, setAnotherCount] = countState; - return countState; - }; - `; - - const ast = parse(componentSnippet, { - sourceType: 'unambiguous', - plugins: ['jsx', 'typescript'], - }); - // hookAstNodes captures lines of interest: 3, 4, 5 & 6 - const hookAstNodes = getPotentialHookDeclarationsFromAST(ast); - expect(hookAstNodes).toHaveLength(4); - // This line number corresponds to where the hook is present - const lineNumber = 3; - - // Isolate the Hook AST Node - const potentialReactHookASTNode = hookAstNodes.find( - node => - checkNodeLocation(node, lineNumber) && isConfirmedHookDeclaration(node), - ); - // Find the nodes that are associated with the React Hook found - in this case we obtain the lines - // -> const count = countState[0]; - // -> const setCount = countState[1]; - // -> const [anotherCount, setAnotherCount] = countState; - let nodesAssociatedWithReactHookASTNode = []; - nodesAssociatedWithReactHookASTNode = getFilteredHookASTNodes( - potentialReactHookASTNode, - hookAstNodes, - 'example-app', - new Map(), - ); - - // Three nodes should be found here - expect(nodesAssociatedWithReactHookASTNode).toHaveLength(3); - - // More than 2 nodes indicate there are multiple references of a hook assignment - // In such cases we default to the statement const countState = useState(1); - const hookName = getHookVariableName(potentialReactHookASTNode); - expect(hookName).toBe('countState'); - done(); - }); - - it('should default to original variable name in case of no found references', async done => { - const componentSnippet = ` - const Example = () => { - const countState = useState(1); - return countState; - }; - `; - - const ast = parse(componentSnippet, { - sourceType: 'unambiguous', - plugins: ['jsx', 'typescript'], - }); - // hookAstNodes captures lines of interest: 3 - const hookAstNodes = getPotentialHookDeclarationsFromAST(ast); - expect(hookAstNodes).toHaveLength(1); - - // Only one node of interest found - const hookName = getHookVariableName(hookAstNodes[0]); - expect(hookName).toBe('countState'); - done(); - }); - - it('should ignore non declarative primitive hooks', async done => { - const componentSnippet = ` - const Example = (props, ref) => { - const [flag, toggleFlag] = useState(false); - const inputRef = useRef(); - useDebugValue(flag ? 'Set' : 'Reset'); - useImperativeHandle(ref, () => ({ - focus: () => { - inputRef.current.focus(); - } - })); - useEffect(() => { - toggleFlag(true); - }, []); - useLayoutEffect(() => { - console.log(flag) - }, []); - return ; - }; - `; - - const ast = parse(componentSnippet, { - sourceType: 'unambiguous', - plugins: ['jsx', 'typescript'], - }); - - // hookAstNodes captures lines of interest: 3 & 4 - // Should not capture any of the non declarative primitive hooks - const hookAstNodes = getPotentialHookDeclarationsFromAST(ast); - expect(hookAstNodes).toHaveLength(2); - done(); - }); - - it('should identify variable names for multiple hooks in one app', async done => { - const componentSnippet = ` - const Example = () => { - const countState = React.useState(() => 1); - const [count, setCount] = countState; - const [toggle, setToggle] = useState(false); - return [count, toggle]; - }; - `; - - const ast = parse(componentSnippet, { - sourceType: 'unambiguous', - plugins: ['jsx', 'typescript'], - }); - - // hookAstNodes captures lines of interest: 3, 4 & 5 - // Two valid node paths found - const hookAstNodes = getPotentialHookDeclarationsFromAST(ast); - expect(hookAstNodes).toHaveLength(3); - // This line number corresponds to where the hooks are present - const lineNumber1 = 3; - const lineNumber2 = 5; - - // Both node paths are valid hook declarations - const isValidNode1 = - checkNodeLocation(hookAstNodes[0], lineNumber1) && - isConfirmedHookDeclaration(hookAstNodes[0]); - const isValidNode2 = - checkNodeLocation(hookAstNodes[2], lineNumber2) && - isConfirmedHookDeclaration(hookAstNodes[2]); - expect(isValidNode1).toBe(true); - expect(isValidNode2).toBe(true); - - // Find the nodes that are associated with the React Hook found - in this case we obtain - // -> const ref = React.useRef(null); - // -> const [ticker, setTicker] = useState(() => 0); - const node1AssociatedWithReactHookASTNode = getFilteredHookASTNodes( - hookAstNodes[0], - hookAstNodes, - 'example-app', - new Map(), - ); - const node2AssociatedWithReactHookASTNode = getFilteredHookASTNodes( - hookAstNodes[1], - hookAstNodes, - 'example-app', - new Map(), - ); - - // Node associated with "countState" useState hook - expect(node1AssociatedWithReactHookASTNode).toHaveLength(1); - const hookNameOfNode1 = getHookVariableName( - node1AssociatedWithReactHookASTNode[0], - ); - expect(hookNameOfNode1).toBe('count'); - - // Node associated with "toggle" useState hook - expect(node2AssociatedWithReactHookASTNode).toHaveLength(1); - const hookNameOfNode2 = getHookVariableName( - node2AssociatedWithReactHookASTNode[0], - ); - expect(hookNameOfNode2).toBe('toggle'); - - done(); - }); - - it('should identify variable names for multiple hooks declared inline in one app', async done => { - const componentSnippet = ` - const Example = () => { - const ref = React.useRef(null), [ticker, setTicker] = useState(() => 0); - return [ref, ticker]; - }; - `; - - const ast = parse(componentSnippet, { - sourceType: 'unambiguous', - plugins: ['jsx', 'typescript'], - }); - - // hookAstNodes captures lines of interest: 3 - // Two valid node paths found - const hookAstNodes = getPotentialHookDeclarationsFromAST(ast); - expect(hookAstNodes).toHaveLength(2); - // This line number corresponds to where the hooks are present - const lineNumber = 3; - - // Both node paths are identified as valid hook declarations - const isValidNode1 = - checkNodeLocation(hookAstNodes[0], lineNumber) && - isConfirmedHookDeclaration(hookAstNodes[0]); - const isValidNode2 = - checkNodeLocation(hookAstNodes[1], lineNumber) && - isConfirmedHookDeclaration(hookAstNodes[1]); - expect(isValidNode1).toBe(true); - expect(isValidNode2).toBe(true); - - // Find the nodes that are associated with the React Hook found - in this case we obtain - // -> const ref = React.useRef(null); - // -> const [ticker, setTicker] = useState(() => 0); - // both the nodes in the same line - const node1AssociatedWithReactHookASTNode = getFilteredHookASTNodes( - hookAstNodes[0], - hookAstNodes, - 'example-app', - new Map(), - ); - const node2AssociatedWithReactHookASTNode = getFilteredHookASTNodes( - hookAstNodes[0], - hookAstNodes, - 'example-app', - new Map(), - ); - - // Node associated with useRef hook - expect(node1AssociatedWithReactHookASTNode).toHaveLength(1); - const hookNameOfNode1 = getHookVariableName( - node1AssociatedWithReactHookASTNode[0], - ); - expect(hookNameOfNode1).toBe('ref'); - - // Node associated with useState hook - expect(node2AssociatedWithReactHookASTNode).toHaveLength(1); - const hookNameOfNode2 = getHookVariableName( - node2AssociatedWithReactHookASTNode[0], - ); - expect(hookNameOfNode2).toBe('ticker'); - - done(); - }); - - it('should identify variable names for custom hooks', async done => { - const componentSnippet = ` - function useCustomHook() { - const [flag, setFlag] = React.useState(0); - return flag; - } - const Example = () => { - const customFlag = useCustomHook(); - return customFlag ? 'custom' : 'primitive'; - }; - `; - - const ast = parse(componentSnippet, { - sourceType: 'unambiguous', - plugins: ['jsx', 'typescript'], - }); - - // hookAstNodes captures lines of interest: 3 & 7 - // Two valid node paths found - const hookAstNodes = getPotentialHookDeclarationsFromAST(ast); - expect(hookAstNodes).toHaveLength(2); - - // Isolate the Custom Hook AST Node on line 7 - const lineNumber = 7; - const potentialReactHookASTNode = hookAstNodes.find( - node => - checkNodeLocation(node, lineNumber) && isConfirmedHookDeclaration(node), - ); - - // Find the nodes that are associated with the Custom hook - here we find the only obvious one - // -> const customFlag = useCustomHook(); - const nodesAssociatedWithReactHookASTNode = getFilteredHookASTNodes( - potentialReactHookASTNode, - hookAstNodes, - 'example-app', - new Map(), - ); - // One node should be found here - expect(nodesAssociatedWithReactHookASTNode).toHaveLength(1); - const hookName = getHookVariableName( - nodesAssociatedWithReactHookASTNode[0], - ); - expect(hookName).toBe('customFlag'); - - done(); - }); - - it('should bypass custom hooks not assigned to variables', async done => { - const componentSnippet = ` - function useCustomHook() { - useEffect(() => { - console.log('This is a custom hook'); - }, []); - } - const Example = () => { - useCustomHook(); - const exampleRef = useRef(); - return exampleRef; - }; - `; - - const ast = parse(componentSnippet, { - sourceType: 'unambiguous', - plugins: ['jsx', 'typescript'], - }); - - // hookAstNodes captures lines having hooks with variable declarations - useRef in this case - // One valid node path found - const hookAstNodes = getPotentialHookDeclarationsFromAST(ast); - expect(hookAstNodes).toHaveLength(1); - - // Isolate the Custom Hook AST Node on line 8 - const lineNumber = 8; - const potentialReactHookASTNode = hookAstNodes.find( - node => - checkNodeLocation(node, lineNumber) && isConfirmedHookDeclaration(node), - ); - - // Isolating potential hook nodes unsuccessful - // Custom hooks not assigned to any variables are ignored - expect(potentialReactHookASTNode).toBeUndefined(); - done(); - }); - - it('should ignore custom hooks assigned to multiple variables', async done => { - const componentSnippet = ` - function useCustomHook() { - const [flag, setFlag] = useState(0); - const someRef = React.useRef(); - return [flag, someRef]; - } - const Example = () => { - const [customFlag, customRef] = useCustomHook(); - return customFlag ? 'custom' : 'primitive'; - }; - `; - - const ast = parse(componentSnippet, { - sourceType: 'unambiguous', - plugins: ['jsx', 'typescript'], - }); - - // hookAstNodes captures lines of interest: 3, 4 & 8 - // Three valid node paths found - const hookAstNodes = getPotentialHookDeclarationsFromAST(ast); - expect(hookAstNodes).toHaveLength(3); - - // Isolate the Custom Hook AST Node on line 8 - const lineNumber = 8; - const potentialReactHookASTNode = hookAstNodes.find( - node => - checkNodeLocation(node, lineNumber) && isConfirmedHookDeclaration(node), - ); - - // Find the nodes that are associated with the Custom hook - here we find the only obvious one - // -> const customFlag = useCustomHook(); - const nodesAssociatedWithReactHookASTNode = getFilteredHookASTNodes( - potentialReactHookASTNode, - hookAstNodes, - 'example-app', - new Map(), - ); - // One node should be found here - expect(nodesAssociatedWithReactHookASTNode).toHaveLength(1); - - // Empty string for hook variable name of such custom hooks - const isCustomHook = true; - const hookName = getHookVariableName( - nodesAssociatedWithReactHookASTNode[0], - isCustomHook, - ); - expect(hookName).toBeFalsy(); - - done(); - }); - - it('should create hookLog injected with variable names for destructured assignment', async done => { - const componentSnippet = ` - const Example = () => { - const [count, setCount] = React.useState(1); - const [flag, setFlag] = useState(() => false); - const ref = useRef(); - return [count, ref]; - }; - `; - const snippetHookLog = [ - { - id: 0, - isStateEditable: true, - name: 'State', - value: 0, - subHooks: [], - hookSource: { - lineNumber: 3, - functionName: 'Example', - fileName: 'example-app.js', - columnNumber: 49, - }, - }, - { - id: 1, - isStateEditable: true, - name: 'State', - value: false, - subHooks: [], - hookSource: { - lineNumber: 4, - functionName: 'Example', - fileName: 'example-app.js', - columnNumber: 41, - }, - }, - { - id: 2, - isStateEditable: false, - name: 'Ref', - value: undefined, - subHooks: [], - hookSource: { - lineNumber: 5, - functionName: 'Example', - fileName: 'example-app.js', - columnNumber: 29, - }, - }, - ]; - - const ast = parse(componentSnippet, { - sourceType: 'unambiguous', - plugins: ['jsx', 'typescript'], - }); - - const hookAstNodes = getPotentialHookDeclarationsFromAST(ast); - let lineNumber = 3; - - const modifiedSnippetHookLog = snippetHookLog.map(hook => { - const potentialReactHookASTNode = hookAstNodes.find( - node => - checkNodeLocation(node, lineNumber) && - isConfirmedHookDeclaration(node), - ); - lineNumber++; - const nodesAssociatedWithReactHookASTNode = getFilteredHookASTNodes( - potentialReactHookASTNode, - hookAstNodes, - 'example-app', - new Map(), - ); - const newHook = getHookNodeWithInjectedVariableName( - hook, - nodesAssociatedWithReactHookASTNode, - potentialReactHookASTNode, - ); - return newHook; - }); - expect(modifiedSnippetHookLog).toMatchSnapshot('modified hook log'); - done(); - }); - - it('should create hookLog injected with variable names for inline/multi-line member expressions', async done => { - const componentSnippet = ` - const Example = () => { - const countState = React.useState(1); - const [count, setCount] = countState; - const flagState = useState(() => false); - const flag = flagState[0]; - const setFlag = flagState[1]; - const tickState = React.useState(0); - const tick = tickState[0], setTick = tickState[1]; - return [count, flag, tick]; - }; - `; - const snippetHookLog = [ - { - id: 0, - isStateEditable: true, - name: 'State', - value: 1, - subHooks: [], - hookSource: { - lineNumber: 3, - functionName: 'Example', - fileName: 'example-app.js', - columnNumber: 42, - }, - }, - { - id: 1, - isStateEditable: true, - name: 'State', - value: false, - subHooks: [], - hookSource: { - lineNumber: 5, - functionName: 'Example', - fileName: 'example-app.js', - columnNumber: 35, - }, - }, - { - id: 2, - isStateEditable: true, - name: 'State', - value: 0, - subHooks: [], - hookSource: { - lineNumber: 8, - functionName: 'Example', - fileName: 'example-app.js', - columnNumber: 41, - }, - }, - ]; - - const ast = parse(componentSnippet, { - sourceType: 'unambiguous', - plugins: ['jsx', 'typescript'], - }); - - const hookAstNodes = getPotentialHookDeclarationsFromAST(ast); - const lineNumbers = [3, 5, 8]; - const potentialHooksMap = new Map(); - let line = 0; - - potentialHooksMap.set('example-app', hookAstNodes); - const modifiedSnippetHookLog = snippetHookLog.map(hook => { - const potentialReactHookASTNode = hookAstNodes.find( - node => - checkNodeLocation(node, lineNumbers[line]) && - isConfirmedHookDeclaration(node), - ); - line++; - if (!potentialReactHookASTNode) return hook; - const nodesAssociatedWithReactHookASTNode = getFilteredHookASTNodes( - potentialReactHookASTNode, - hookAstNodes, - 'example-app', - potentialHooksMap, - ); - const newHook = getHookNodeWithInjectedVariableName( - hook, - nodesAssociatedWithReactHookASTNode, - potentialReactHookASTNode, - ); - return newHook; - }); - expect(modifiedSnippetHookLog).toMatchSnapshot('modified hook log'); - done(); - }); - - it('should create hookLog injected with default variable names for no/multiple references', async done => { - const componentSnippet = ` - const Example = () => { - const countState = React.useState(1); - const [count, setCount] = countState; - const flagState = useState(() => false); - const tick = countState[0]; - const setTick = countState[1]; - return [count, flag, tick]; - }; - `; - const snippetHookLog = [ - { - id: 0, - isStateEditable: true, - name: 'State', - value: 1, - subHooks: [], - hookSource: { - lineNumber: 3, - functionName: 'Example', - fileName: 'example-app.js', - columnNumber: 42, - }, - }, - { - id: 1, - isStateEditable: true, - name: 'State', - value: false, - subHooks: [], - hookSource: { - lineNumber: 5, - functionName: 'Example', - fileName: 'example-app.js', - columnNumber: 35, - }, - }, - ]; - - const ast = parse(componentSnippet, { - sourceType: 'unambiguous', - plugins: ['jsx', 'typescript'], - }); - - const hookAstNodes = getPotentialHookDeclarationsFromAST(ast); - const lineNumbers = [3, 5]; - const potentialHooksMap = new Map(); - let line = 0; - - potentialHooksMap.set('example-app', hookAstNodes); - const modifiedSnippetHookLog = snippetHookLog.map(hook => { - const potentialReactHookASTNode = hookAstNodes.find( - node => - checkNodeLocation(node, lineNumbers[line]) && - isConfirmedHookDeclaration(node), - ); - line++; - if (!potentialReactHookASTNode) return hook; - const nodesAssociatedWithReactHookASTNode = getFilteredHookASTNodes( - potentialReactHookASTNode, - hookAstNodes, - 'example-app', - potentialHooksMap, - ); - const newHook = getHookNodeWithInjectedVariableName( - hook, - nodesAssociatedWithReactHookASTNode, - potentialReactHookASTNode, - ); - return newHook; - }); - expect(modifiedSnippetHookLog).toMatchSnapshot('modified hook log'); - done(); - }); - - it('should not inject hookLog with variable names for non declarative primitive hooks', async done => { - const componentSnippet = ` - const Example = (props, ref) => { - const [flag, toggleFlag] = useState(false); - const inputRef = React.useRef(); - useDebugValue(flag ? 'Set' : 'Reset'); - useEffect(() => { - toggleFlag(true); - }, []); - useLayoutEffect(() => { - console.log(flag) - }, []); - return ; - }; - `; - - function effect() {} - const snippetHookLog = [ - { - id: 0, - isStateEditable: true, - name: 'State', - value: false, - subHooks: [], - hookSource: { - lineNumber: 3, - functionName: 'Example', - fileName: 'example-app.js', - columnNumber: 44, - }, - }, - { - id: 1, - isStateEditable: false, - name: 'Ref', - value: undefined, - subHooks: [], - hookSource: { - lineNumber: 4, - functionName: 'Example', - fileName: 'example-app.js', - columnNumber: 40, - }, - }, - { - id: 2, - isStateEditable: false, - name: 'Effect', - value: effect, - subHooks: [], - hookSource: { - lineNumber: 6, - functionName: 'Example', - fileName: 'example-app.js', - columnNumber: 17, - }, - }, - { - id: 3, - isStateEditable: false, - name: 'LayoutEffect', - value: effect, - subHooks: [], - hookSource: { - lineNumber: 9, - functionName: 'Example', - fileName: 'example-app.js', - columnNumber: 17, - }, - }, - ]; - - const ast = parse(componentSnippet, { - sourceType: 'unambiguous', - plugins: ['jsx', 'typescript'], - }); - const hookAstNodes = getPotentialHookDeclarationsFromAST(ast); - const lineNumbers = [3, 4, 6, 9]; - const potentialHooksMap = new Map(); - let line = 0; - - potentialHooksMap.set('example-app', hookAstNodes); - const modifiedSnippetHookLog = snippetHookLog.map(hook => { - const potentialReactHookASTNode = hookAstNodes.find( - node => - checkNodeLocation(node, lineNumbers[line]) && - isConfirmedHookDeclaration(node), - ); - line++; - if (!potentialReactHookASTNode) { - expect(isNonDeclarativePrimitiveHook(hook)).toBe(true); - return hook; - } - const nodesAssociatedWithReactHookASTNode = getFilteredHookASTNodes( - potentialReactHookASTNode, - hookAstNodes, - 'example-app', - potentialHooksMap, - ); - const newHook = getHookNodeWithInjectedVariableName( - hook, - nodesAssociatedWithReactHookASTNode, - potentialReactHookASTNode, - ); - return newHook; - }); - expect(modifiedSnippetHookLog).toMatchSnapshot('modified hook log'); - done(); - }); -}); diff --git a/packages/react-devtools-shared/src/__tests__/resources/bundle.js b/packages/react-devtools-shared/src/__tests__/resources/bundle.js deleted file mode 100644 index 3b4edf8b39178..0000000000000 --- a/packages/react-devtools-shared/src/__tests__/resources/bundle.js +++ /dev/null @@ -1,493 +0,0 @@ -// prettier-ignore -(this["webpackJsonpsample"] = this["webpackJsonpsample"] || []).push([["main"],{ - - /***/ "./node_modules/css-loader/dist/cjs.js?!./node_modules/postcss-loader/src/index.js?!./src/App.css": - /*!************************************************************************************************************************!*\ - !*** ./node_modules/css-loader/dist/cjs.js??ref--6-oneOf-3-1!./node_modules/postcss-loader/src??postcss!./src/App.css ***! - \************************************************************************************************************************/ - /*! no static exports found */ - /***/ (function(module, exports, __webpack_require__) { - - // Imports - var ___CSS_LOADER_API_IMPORT___ = __webpack_require__(/*! ../node_modules/css-loader/dist/runtime/api.js */ "./node_modules/css-loader/dist/runtime/api.js"); - exports = ___CSS_LOADER_API_IMPORT___(false); - // Module - exports.push([module.i, ".App {\n text-align: center;\n}\n\n.App-logo {\n height: 40vmin;\n pointer-events: none;\n}\n\n@media (prefers-reduced-motion: no-preference) {\n .App-logo {\n animation: App-logo-spin infinite 20s linear;\n }\n}\n\n.App-header {\n background-color: #282c34;\n min-height: 100vh;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n font-size: calc(10px + 2vmin);\n color: white;\n}\n\n.App-link {\n color: #61dafb;\n}\n\n@keyframes App-logo-spin {\n from {\n transform: rotate(0deg);\n }\n to {\n transform: rotate(360deg);\n }\n}\n", ""]); - // Exports - module.exports = exports; - - - /***/ }), - - /***/ "./node_modules/css-loader/dist/cjs.js?!./node_modules/postcss-loader/src/index.js?!./src/index.css": - /*!**************************************************************************************************************************!*\ - !*** ./node_modules/css-loader/dist/cjs.js??ref--6-oneOf-3-1!./node_modules/postcss-loader/src??postcss!./src/index.css ***! - \**************************************************************************************************************************/ - /*! no static exports found */ - /***/ (function(module, exports, __webpack_require__) { - - // Imports - var ___CSS_LOADER_API_IMPORT___ = __webpack_require__(/*! ../node_modules/css-loader/dist/runtime/api.js */ "./node_modules/css-loader/dist/runtime/api.js"); - exports = ___CSS_LOADER_API_IMPORT___(false); - // Module - exports.push([module.i, "body {\n margin: 0;\n font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',\n 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',\n sans-serif;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n}\n\ncode {\n font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',\n monospace;\n}\n", ""]); - // Exports - module.exports = exports; - - - /***/ }), - - /***/ "./src/App.css": - /*!*********************!*\ - !*** ./src/App.css ***! - \*********************/ - /*! no static exports found */ - /***/ (function(module, exports, __webpack_require__) { - - - var content = __webpack_require__(/*! !../node_modules/css-loader/dist/cjs.js??ref--6-oneOf-3-1!../node_modules/postcss-loader/src??postcss!./App.css */ "./node_modules/css-loader/dist/cjs.js?!./node_modules/postcss-loader/src/index.js?!./src/App.css"); - - if(typeof content === 'string') content = [[module.i, content, '']]; - - var transform; - var insertInto; - - - - var options = {"hmr":true} - - options.transform = transform - options.insertInto = undefined; - - var update = __webpack_require__(/*! ../node_modules/style-loader/lib/addStyles.js */ "./node_modules/style-loader/lib/addStyles.js")(content, options); - - if(content.locals) module.exports = content.locals; - - if(true) { - module.hot.accept(/*! !../node_modules/css-loader/dist/cjs.js??ref--6-oneOf-3-1!../node_modules/postcss-loader/src??postcss!./App.css */ "./node_modules/css-loader/dist/cjs.js?!./node_modules/postcss-loader/src/index.js?!./src/App.css", function() { - var newContent = __webpack_require__(/*! !../node_modules/css-loader/dist/cjs.js??ref--6-oneOf-3-1!../node_modules/postcss-loader/src??postcss!./App.css */ "./node_modules/css-loader/dist/cjs.js?!./node_modules/postcss-loader/src/index.js?!./src/App.css"); - - if(typeof newContent === 'string') newContent = [[module.i, newContent, '']]; - - var locals = (function(a, b) { - var key, idx = 0; - - for(key in a) { - if(!b || a[key] !== b[key]) return false; - idx++; - } - - for(key in b) idx--; - - return idx === 0; - }(content.locals, newContent.locals)); - - if(!locals) throw new Error('Aborting CSS HMR due to changed css-modules locals.'); - - update(newContent); - }); - - module.hot.dispose(function() { update(); }); - } - - /***/ }), - - /***/ "./src/App.js": - /*!********************!*\ - !*** ./src/App.js ***! - \********************/ - /*! exports provided: default */ - /***/ (function(module, __webpack_exports__, __webpack_require__) { - - "use strict"; - __webpack_require__.r(__webpack_exports__); - /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ "./node_modules/react/index.js"); - /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__); - /* harmony import */ var _logo_svg__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./logo.svg */ "./src/logo.svg"); - /* harmony import */ var _logo_svg__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_logo_svg__WEBPACK_IMPORTED_MODULE_1__); - /* harmony import */ var _App_css__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./App.css */ "./src/App.css"); - /* harmony import */ var _App_css__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(_App_css__WEBPACK_IMPORTED_MODULE_2__); - var _jsxFileName = "/Users/zomato/Desktop/work/sample/src/App.js"; - - - - - function useCustomHook() { - const x = Object(react__WEBPACK_IMPORTED_MODULE_0__["useRef"])(null); - const y = Object(react__WEBPACK_IMPORTED_MODULE_0__["useRef"])(); - return [x, y]; - } - - const Example = (props, ref) => { - const [flag, toggleFlag] = Object(react__WEBPACK_IMPORTED_MODULE_0__["useState"])(false); - const inputRef = Object(react__WEBPACK_IMPORTED_MODULE_0__["useRef"])(); - Object(react__WEBPACK_IMPORTED_MODULE_0__["useDebugValue"])(flag ? 'Set' : 'Reset'); // useImperativeHandle(ref, () => ({ - // focus: () => { - // inputRef.current.focus(); - // } - // })); - - Object(react__WEBPACK_IMPORTED_MODULE_0__["useEffect"])(() => { - toggleFlag(true); - }, []); - Object(react__WEBPACK_IMPORTED_MODULE_0__["useLayoutEffect"])(() => { - console.log(flag); - }); - return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("input", { - ref: inputRef, - __self: undefined, - __source: { - fileName: _jsxFileName, - lineNumber: 27, - columnNumber: 10 - } - }); - }; - - function Button() { - // const initHook = () => { // eslint-disable-line react-hooks/rules-of-hooks - // const r = useRef(null); // eslint-disable-line react-hooks/rules-of-hooks - // } // eslint-disable-line react-hooks/rules-of-hooks - // initHook(); - const [toggleIf, setToggleIf] = Object(react__WEBPACK_IMPORTED_MODULE_0__["useState"])(false); - const state = react__WEBPACK_IMPORTED_MODULE_0___default.a.useState(() => 0); - const number = state[0]; - const setNumber = state[1]; - const [number2, setNumber2] = state; // if (true) { // eslint-disable-line react-hooks/rules-of-hooks - // const state4 = React.useState(() => 0) // eslint-disable-line react-hooks/rules-of-hooks - // const [number1, setNumber1] = state4 // eslint-disable-line react-hooks/rules-of-hooks - // } - - const state3 = react__WEBPACK_IMPORTED_MODULE_0___default.a.useState(() => 2); - const state3val = state3[0], - state3Set = state3[1]; - const customState = useCustomHook(); - const [customState1, setFunc] = useCustomHook(); - const a = customState[0]; - const b = customState[1]; - const [c, d] = customState; - useCustomHook(); - const someRef = react__WEBPACK_IMPORTED_MODULE_0___default.a.useRef(); - const state2 = Object(react__WEBPACK_IMPORTED_MODULE_0__["useState"])(0); - const [newState, setNewState] = Object(react__WEBPACK_IMPORTED_MODULE_0__["useState"])(() => 1); - const [newState1, setNewState2] = react__WEBPACK_IMPORTED_MODULE_0___default.a.useState(() => 1); - const flagState = react__WEBPACK_IMPORTED_MODULE_0___default.a.useState(true), - [ticker, setTicker] = Object(react__WEBPACK_IMPORTED_MODULE_0__["useState"])(0); - Object(react__WEBPACK_IMPORTED_MODULE_0__["useEffect"])(() => { - console.log('useEffect breaks everything ffs'); - }, []); - return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("button", { - onClick: () => setNumber(number + 1), - value: number, - __self: this, - __source: { - fileName: _jsxFileName, - lineNumber: 81, - columnNumber: 3 - } - }, number); - } - - function App() { - return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("div", { - className: "App", - __self: this, - __source: { - fileName: _jsxFileName, - lineNumber: 87, - columnNumber: 5 - } - }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("header", { - className: "App-header", - __self: this, - __source: { - fileName: _jsxFileName, - lineNumber: 88, - columnNumber: 7 - } - }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("img", { - src: _logo_svg__WEBPACK_IMPORTED_MODULE_1___default.a, - className: "App-logo", - alt: "logo", - __self: this, - __source: { - fileName: _jsxFileName, - lineNumber: 89, - columnNumber: 9 - } - }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("p", { - __self: this, - __source: { - fileName: _jsxFileName, - lineNumber: 90, - columnNumber: 9 - } - }, "Edit ", /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("code", { - __self: this, - __source: { - fileName: _jsxFileName, - lineNumber: 91, - columnNumber: 16 - } - }, "src/App.js"), " and save to reload."), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("a", { - className: "App-link", - href: "https://reactjs.org", - target: "_blank", - rel: "noopener noreferrer", - __self: this, - __source: { - fileName: _jsxFileName, - lineNumber: 93, - columnNumber: 9 - } - }, "Learn React"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(Button, { - __self: this, - __source: { - fileName: _jsxFileName, - lineNumber: 101, - columnNumber: 9 - } - }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(Example, { - __self: this, - __source: { - fileName: _jsxFileName, - lineNumber: 102, - columnNumber: 9 - } - }))); - } - - /* harmony default export */ __webpack_exports__["default"] = (App); - - /***/ }), - - /***/ "./src/index.css": - /*!***********************!*\ - !*** ./src/index.css ***! - \***********************/ - /*! no static exports found */ - /***/ (function(module, exports, __webpack_require__) { - - - var content = __webpack_require__(/*! !../node_modules/css-loader/dist/cjs.js??ref--6-oneOf-3-1!../node_modules/postcss-loader/src??postcss!./index.css */ "./node_modules/css-loader/dist/cjs.js?!./node_modules/postcss-loader/src/index.js?!./src/index.css"); - - if(typeof content === 'string') content = [[module.i, content, '']]; - - var transform; - var insertInto; - - - - var options = {"hmr":true} - - options.transform = transform - options.insertInto = undefined; - - var update = __webpack_require__(/*! ../node_modules/style-loader/lib/addStyles.js */ "./node_modules/style-loader/lib/addStyles.js")(content, options); - - if(content.locals) module.exports = content.locals; - - if(true) { - module.hot.accept(/*! !../node_modules/css-loader/dist/cjs.js??ref--6-oneOf-3-1!../node_modules/postcss-loader/src??postcss!./index.css */ "./node_modules/css-loader/dist/cjs.js?!./node_modules/postcss-loader/src/index.js?!./src/index.css", function() { - var newContent = __webpack_require__(/*! !../node_modules/css-loader/dist/cjs.js??ref--6-oneOf-3-1!../node_modules/postcss-loader/src??postcss!./index.css */ "./node_modules/css-loader/dist/cjs.js?!./node_modules/postcss-loader/src/index.js?!./src/index.css"); - - if(typeof newContent === 'string') newContent = [[module.i, newContent, '']]; - - var locals = (function(a, b) { - var key, idx = 0; - - for(key in a) { - if(!b || a[key] !== b[key]) return false; - idx++; - } - - for(key in b) idx--; - - return idx === 0; - }(content.locals, newContent.locals)); - - if(!locals) throw new Error('Aborting CSS HMR due to changed css-modules locals.'); - - update(newContent); - }); - - module.hot.dispose(function() { update(); }); - } - - /***/ }), - - /***/ "./src/index.js": - /*!**********************!*\ - !*** ./src/index.js ***! - \**********************/ - /*! no exports provided */ - /***/ (function(module, __webpack_exports__, __webpack_require__) { - - "use strict"; - __webpack_require__.r(__webpack_exports__); - /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ "./node_modules/react/index.js"); - /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__); - /* harmony import */ var react_dom__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! react-dom */ "./node_modules/react-dom/index.js"); - /* harmony import */ var react_dom__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(react_dom__WEBPACK_IMPORTED_MODULE_1__); - /* harmony import */ var _index_css__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./index.css */ "./src/index.css"); - /* harmony import */ var _index_css__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(_index_css__WEBPACK_IMPORTED_MODULE_2__); - /* harmony import */ var _App__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./App */ "./src/App.js"); - /* harmony import */ var _serviceWorker__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./serviceWorker */ "./src/serviceWorker.js"); - var _jsxFileName = "/Users/zomato/Desktop/work/sample/src/index.js"; - - - - - - react_dom__WEBPACK_IMPORTED_MODULE_1___default.a.render( /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(react__WEBPACK_IMPORTED_MODULE_0___default.a.StrictMode, { - __self: undefined, - __source: { - fileName: _jsxFileName, - lineNumber: 8, - columnNumber: 3 - } - }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_App__WEBPACK_IMPORTED_MODULE_3__["default"], { - __self: undefined, - __source: { - fileName: _jsxFileName, - lineNumber: 9, - columnNumber: 5 - } - })), document.getElementById('root')); // If you want your app to work offline and load faster, you can change - // unregister() to register() below. Note this comes with some pitfalls. - // Learn more about service workers: https://bit.ly/CRA-PWA - - _serviceWorker__WEBPACK_IMPORTED_MODULE_4__["unregister"](); - - /***/ }), - - /***/ "./src/logo.svg": - /*!**********************!*\ - !*** ./src/logo.svg ***! - \**********************/ - /*! no static exports found */ - /***/ (function(module, exports, __webpack_require__) { - - module.exports = __webpack_require__.p + "static/media/logo.5d5d9eef.svg"; - - /***/ }), - - /***/ "./src/serviceWorker.js": - /*!******************************!*\ - !*** ./src/serviceWorker.js ***! - \******************************/ - /*! exports provided: register, unregister */ - /***/ (function(module, __webpack_exports__, __webpack_require__) { - - "use strict"; - __webpack_require__.r(__webpack_exports__); - /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "register", function() { return register; }); - /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "unregister", function() { return unregister; }); - // This optional code is used to register a service worker. - // register() is not called by default. - // This lets the app load faster on subsequent visits in production, and gives - // it offline capabilities. However, it also means that developers (and users) - // will only see deployed updates on subsequent visits to a page, after all the - // existing tabs open on the page have been closed, since previously cached - // resources are updated in the background. - // To learn more about the benefits of this model and instructions on how to - // opt-in, read https://bit.ly/CRA-PWA - const isLocalhost = Boolean(window.location.hostname === 'localhost' || // [::1] is the IPv6 localhost address. - window.location.hostname === '[::1]' || // 127.0.0.0/8 are considered localhost for IPv4. - window.location.hostname.match(/^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/)); - function register(config) { - if (false) {} - } - - function registerValidSW(swUrl, config) { - navigator.serviceWorker.register(swUrl).then(registration => { - registration.onupdatefound = () => { - const installingWorker = registration.installing; - - if (installingWorker == null) { - return; - } - - installingWorker.onstatechange = () => { - if (installingWorker.state === 'installed') { - if (navigator.serviceWorker.controller) { - // At this point, the updated precached content has been fetched, - // but the previous service worker will still serve the older - // content until all client tabs are closed. - console.log('New content is available and will be used when all ' + 'tabs for this page are closed. See https://bit.ly/CRA-PWA.'); // Execute callback - - if (config && config.onUpdate) { - config.onUpdate(registration); - } - } else { - // At this point, everything has been precached. - // It's the perfect time to display a - // "Content is cached for offline use." message. - console.log('Content is cached for offline use.'); // Execute callback - - if (config && config.onSuccess) { - config.onSuccess(registration); - } - } - } - }; - }; - }).catch(error => { - console.error('Error during service worker registration:', error); - }); - } - - function checkValidServiceWorker(swUrl, config) { - // Check if the service worker can be found. If it can't reload the page. - fetch(swUrl, { - headers: { - 'Service-Worker': 'script' - } - }).then(response => { - // Ensure service worker exists, and that we really are getting a JS file. - const contentType = response.headers.get('content-type'); - - if (response.status === 404 || contentType != null && contentType.indexOf('javascript') === -1) { - // No service worker found. Probably a different app. Reload the page. - navigator.serviceWorker.ready.then(registration => { - registration.unregister().then(() => { - window.location.reload(); - }); - }); - } else { - // Service worker found. Proceed as normal. - registerValidSW(swUrl, config); - } - }).catch(() => { - console.log('No internet connection found. App is running in offline mode.'); - }); - } - - function unregister() { - if ('serviceWorker' in navigator) { - navigator.serviceWorker.ready.then(registration => { - registration.unregister(); - }).catch(error => { - console.error(error.message); - }); - } - } - - /***/ }), - - /***/ 1: - /*!**************************************************************************************************************!*\ - !*** multi (webpack)/hot/dev-server.js ./node_modules/react-dev-utils/webpackHotDevClient.js ./src/index.js ***! - \**************************************************************************************************************/ - /*! no static exports found */ - /***/ (function(module, exports, __webpack_require__) { - - __webpack_require__(/*! /Users/zomato/Desktop/work/sample/node_modules/webpack/hot/dev-server.js */"./node_modules/webpack/hot/dev-server.js"); - __webpack_require__(/*! /Users/zomato/Desktop/work/sample/node_modules/react-dev-utils/webpackHotDevClient.js */"./node_modules/react-dev-utils/webpackHotDevClient.js"); - module.exports = __webpack_require__(/*! /Users/zomato/Desktop/work/sample/src/index.js */"./src/index.js"); - - - /***/ }) - - },[[1,"runtime-main",0]]]); -//# sourceMappingURL=bundle.js.map diff --git a/packages/react-devtools-shared/src/__tests__/resources/bundle.js.map b/packages/react-devtools-shared/src/__tests__/resources/bundle.js.map deleted file mode 100644 index 440a331892fdc..0000000000000 --- a/packages/react-devtools-shared/src/__tests__/resources/bundle.js.map +++ /dev/null @@ -1 +0,0 @@ -{"version":3,"file":"static/js/main.chunk.js","sources":["/Users/zomato/Desktop/work/sample/src/App.css","/Users/zomato/Desktop/work/sample/src/index.css","webpack:///./src/App.css?4433","/Users/zomato/Desktop/work/sample/src/App.js","webpack:///./src/index.css?f3f6","/Users/zomato/Desktop/work/sample/src/index.js","/Users/zomato/Desktop/work/sample/src/logo.svg","/Users/zomato/Desktop/work/sample/src/serviceWorker.js"],"sourcesContent":["// Imports\nvar ___CSS_LOADER_API_IMPORT___ = require(\"../node_modules/css-loader/dist/runtime/api.js\");\nexports = ___CSS_LOADER_API_IMPORT___(false);\n// Module\nexports.push([module.id, \".App {\\n text-align: center;\\n}\\n\\n.App-logo {\\n height: 40vmin;\\n pointer-events: none;\\n}\\n\\n@media (prefers-reduced-motion: no-preference) {\\n .App-logo {\\n animation: App-logo-spin infinite 20s linear;\\n }\\n}\\n\\n.App-header {\\n background-color: #282c34;\\n min-height: 100vh;\\n display: flex;\\n flex-direction: column;\\n align-items: center;\\n justify-content: center;\\n font-size: calc(10px + 2vmin);\\n color: white;\\n}\\n\\n.App-link {\\n color: #61dafb;\\n}\\n\\n@keyframes App-logo-spin {\\n from {\\n transform: rotate(0deg);\\n }\\n to {\\n transform: rotate(360deg);\\n }\\n}\\n\", \"\"]);\n// Exports\nmodule.exports = exports;\n","// Imports\nvar ___CSS_LOADER_API_IMPORT___ = require(\"../node_modules/css-loader/dist/runtime/api.js\");\nexports = ___CSS_LOADER_API_IMPORT___(false);\n// Module\nexports.push([module.id, \"body {\\n margin: 0;\\n font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',\\n 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',\\n sans-serif;\\n -webkit-font-smoothing: antialiased;\\n -moz-osx-font-smoothing: grayscale;\\n}\\n\\ncode {\\n font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',\\n monospace;\\n}\\n\", \"\"]);\n// Exports\nmodule.exports = exports;\n","\nvar content = require(\"!!../node_modules/css-loader/dist/cjs.js??ref--6-oneOf-3-1!../node_modules/postcss-loader/src/index.js??postcss!./App.css\");\n\nif(typeof content === 'string') content = [[module.id, content, '']];\n\nvar transform;\nvar insertInto;\n\n\n\nvar options = {\"hmr\":true}\n\noptions.transform = transform\noptions.insertInto = undefined;\n\nvar update = require(\"!../node_modules/style-loader/lib/addStyles.js\")(content, options);\n\nif(content.locals) module.exports = content.locals;\n\nif(module.hot) {\n\tmodule.hot.accept(\"!!../node_modules/css-loader/dist/cjs.js??ref--6-oneOf-3-1!../node_modules/postcss-loader/src/index.js??postcss!./App.css\", function() {\n\t\tvar newContent = require(\"!!../node_modules/css-loader/dist/cjs.js??ref--6-oneOf-3-1!../node_modules/postcss-loader/src/index.js??postcss!./App.css\");\n\n\t\tif(typeof newContent === 'string') newContent = [[module.id, newContent, '']];\n\n\t\tvar locals = (function(a, b) {\n\t\t\tvar key, idx = 0;\n\n\t\t\tfor(key in a) {\n\t\t\t\tif(!b || a[key] !== b[key]) return false;\n\t\t\t\tidx++;\n\t\t\t}\n\n\t\t\tfor(key in b) idx--;\n\n\t\t\treturn idx === 0;\n\t\t}(content.locals, newContent.locals));\n\n\t\tif(!locals) throw new Error('Aborting CSS HMR due to changed css-modules locals.');\n\n\t\tupdate(newContent);\n\t});\n\n\tmodule.hot.dispose(function() { update(); });\n}","import React, {useState, useEffect, useRef, useDebugValue, useImperativeHandle, useLayoutEffect} from 'react';\nimport logo from './logo.svg';\nimport './App.css';\n\nfunction useCustomHook() {\n const x = useRef(null)\n const y = useRef()\n\n return [x,y];\n}\n\nconst Example = (props, ref) => {\n const [flag, toggleFlag] = useState(false);\n const inputRef = useRef();\n useDebugValue(flag ? 'Set' : 'Reset');\n // useImperativeHandle(ref, () => ({\n // focus: () => {\n // inputRef.current.focus();\n // }\n // }));\n useEffect(() => {\n toggleFlag(true);\n }, []);\n useLayoutEffect(() => {\n console.log(flag)\n });\n return ;\n};\n\nfunction Button() {\n\n // const initHook = () => { // eslint-disable-line react-hooks/rules-of-hooks\n // const r = useRef(null); // eslint-disable-line react-hooks/rules-of-hooks\n // } // eslint-disable-line react-hooks/rules-of-hooks\n // initHook();\n\n const [toggleIf, setToggleIf] = useState(false);\n\n const state = React.useState(() => 0)\n const number = state[0]\n const setNumber = state[1]\n\n const [number2, setNumber2] = state\n\n // if (true) { // eslint-disable-line react-hooks/rules-of-hooks\n // const state4 = React.useState(() => 0) // eslint-disable-line react-hooks/rules-of-hooks\n // const [number1, setNumber1] = state4 // eslint-disable-line react-hooks/rules-of-hooks\n // }\n\n const state3 = React.useState(() => 2)\n const state3val = state3[0], state3Set = state3[1]\n \n const customState = useCustomHook();\n \n const [customState1, setFunc] = useCustomHook();\n \n const a = customState[0];\n const b = customState[1];\n\n const [c,d] = customState;\n\n useCustomHook();\n \n \n const someRef = React.useRef()\n \n const state2 = useState(0)\n \n const [newState, setNewState] = useState(() => 1)\n \n const [newState1, \n setNewState2] = React.useState(() => 1)\n\n const flagState = React.useState(true), [ticker, setTicker] = useState(0);\n\n useEffect(() => {\n console.log('useEffect breaks everything ffs')\n },[]);\n\n return (\n \n )\n}\n\nfunction App() {\n return (\n
\n Edit src/App.js
and save to reload.\n