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
\n \"logo\"\n

\n Edit src/App.js and save to reload.\n

\n \n Learn React\n \n
\n
\n );\n}\n\nexport default App;\n","\nvar content = require(\"!!../node_modules/css-loader/dist/cjs.js??ref--6-oneOf-3-1!../node_modules/postcss-loader/src/index.js??postcss!./index.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!./index.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!./index.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 from 'react';\nimport ReactDOM from 'react-dom';\nimport './index.css';\nimport App from './App';\nimport * as serviceWorker from './serviceWorker';\n\nReactDOM.render(\n \n \n ,\n document.getElementById('root')\n);\n\n// If you want your app to work offline and load faster, you can change\n// unregister() to register() below. Note this comes with some pitfalls.\n// Learn more about service workers: https://bit.ly/CRA-PWA\nserviceWorker.unregister();\n","module.exports = __webpack_public_path__ + \"static/media/logo.5d5d9eef.svg\";","// This optional code is used to register a service worker.\n// register() is not called by default.\n\n// This lets the app load faster on subsequent visits in production, and gives\n// it offline capabilities. However, it also means that developers (and users)\n// will only see deployed updates on subsequent visits to a page, after all the\n// existing tabs open on the page have been closed, since previously cached\n// resources are updated in the background.\n\n// To learn more about the benefits of this model and instructions on how to\n// opt-in, read https://bit.ly/CRA-PWA\n\nconst isLocalhost = Boolean(\n window.location.hostname === 'localhost' ||\n // [::1] is the IPv6 localhost address.\n window.location.hostname === '[::1]' ||\n // 127.0.0.0/8 are considered localhost for IPv4.\n window.location.hostname.match(\n /^127(?:\\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/\n )\n);\n\nexport function register(config) {\n if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {\n // The URL constructor is available in all browsers that support SW.\n const publicUrl = new URL(process.env.PUBLIC_URL, window.location.href);\n if (publicUrl.origin !== window.location.origin) {\n // Our service worker won't work if PUBLIC_URL is on a different origin\n // from what our page is served on. This might happen if a CDN is used to\n // serve assets; see https://github.com/facebook/create-react-app/issues/2374\n return;\n }\n\n window.addEventListener('load', () => {\n const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;\n\n if (isLocalhost) {\n // This is running on localhost. Let's check if a service worker still exists or not.\n checkValidServiceWorker(swUrl, config);\n\n // Add some additional logging to localhost, pointing developers to the\n // service worker/PWA documentation.\n navigator.serviceWorker.ready.then(() => {\n console.log(\n 'This web app is being served cache-first by a service ' +\n 'worker. To learn more, visit https://bit.ly/CRA-PWA'\n );\n });\n } else {\n // Is not localhost. Just register service worker\n registerValidSW(swUrl, config);\n }\n });\n }\n}\n\nfunction registerValidSW(swUrl, config) {\n navigator.serviceWorker\n .register(swUrl)\n .then(registration => {\n registration.onupdatefound = () => {\n const installingWorker = registration.installing;\n if (installingWorker == null) {\n return;\n }\n installingWorker.onstatechange = () => {\n if (installingWorker.state === 'installed') {\n if (navigator.serviceWorker.controller) {\n // At this point, the updated precached content has been fetched,\n // but the previous service worker will still serve the older\n // content until all client tabs are closed.\n console.log(\n 'New content is available and will be used when all ' +\n 'tabs for this page are closed. See https://bit.ly/CRA-PWA.'\n );\n\n // Execute callback\n if (config && config.onUpdate) {\n config.onUpdate(registration);\n }\n } else {\n // At this point, everything has been precached.\n // It's the perfect time to display a\n // \"Content is cached for offline use.\" message.\n console.log('Content is cached for offline use.');\n\n // Execute callback\n if (config && config.onSuccess) {\n config.onSuccess(registration);\n }\n }\n }\n };\n };\n })\n .catch(error => {\n console.error('Error during service worker registration:', error);\n });\n}\n\nfunction checkValidServiceWorker(swUrl, config) {\n // Check if the service worker can be found. If it can't reload the page.\n fetch(swUrl, {\n headers: { 'Service-Worker': 'script' },\n })\n .then(response => {\n // Ensure service worker exists, and that we really are getting a JS file.\n const contentType = response.headers.get('content-type');\n if (\n response.status === 404 ||\n (contentType != null && contentType.indexOf('javascript') === -1)\n ) {\n // No service worker found. Probably a different app. Reload the page.\n navigator.serviceWorker.ready.then(registration => {\n registration.unregister().then(() => {\n window.location.reload();\n });\n });\n } else {\n // Service worker found. Proceed as normal.\n registerValidSW(swUrl, config);\n }\n })\n .catch(() => {\n console.log(\n 'No internet connection found. App is running in offline mode.'\n );\n });\n}\n\nexport function unregister() {\n if ('serviceWorker' in navigator) {\n navigator.serviceWorker.ready\n .then(registration => {\n registration.unregister();\n })\n .catch(error => {\n console.error(error.message);\n });\n }\n}\n"],"mappings":";;;;;;;;;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;;;;;;;;;;;;ACNA;AACA;AACA;AACA;AACA;AACA;AACA;;;;;;;;;;;;ACNA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;;;;;;;;;;;;;;;;;;AC5CA;;AAEA;AACA;AACA;AACA;AACA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;AACA;AACA;AACA;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AACA;AACA;AACA;AAEA;AACA;AACA;AACA;AAEA;AAEA;AACA;AACA;AAEA;AAGA;AACA;AACA;AACA;AACA;AACA;AAAA;AAEA;AAEA;AAEA;AACA;AAEA;AAEA;AAGA;AAEA;AAEA;AAEA;AAGA;AAAA;AAEA;AACA;AACA;AAEA;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAEA;AACA;AACA;AACA;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA;AACA;AACA;AACA;AAJA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAQA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAIA;AACA;AACA;;;;;;;;;;;AC3GA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;;;;;;;;;;;;;;;;;;;;AC5CA;AACA;AACA;AACA;AACA;AAEA;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAMA;AACA;AACA;AAAA;;;;;;;;;;;AChBA;;;;;;;;;;;;ACAA;AAAA;AAAA;AAAA;AACA;AAEA;AACA;AACA;AACA;AACA;AAEA;AACA;AAEA;AAGA;AAEA;AAKA;AACA,eA8BA;AACA;AACA;AACA;AACA;AAGA;AACA;AACA;AAAA;AACA;AACA;AACA;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAKA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAAA;AADA;AAIA;AACA;AACA;AAAA;AAIA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AAGA;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;AAEA;AACA;AACA;AACA;;;;;;;;;;;;;;;;;;A","sourceRoot":""}