/** * Copyright (c) Meta Platforms, Inc. and 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 { generateHookMap } from '../generateHookMap'; import { getHookNameForLocation } from '../getHookNameForLocation'; function expectHookMapToEqual(actual, expected) { expected.names |> (actual.names |> expect(%)).toEqual(%); const formattedMappings = []; (lines => { (segment => { const name = actual.names[segment[2]]; if (name == null) { throw new Error(`Expected to find name at position ${segment[2]}`); } `${name} from ${segment[0]}:${segment[1]}` |> formattedMappings.push(%); }) |> lines.forEach(%); }) |> actual.mappings.forEach(%); expected.mappings |> (formattedMappings |> expect(%)).toEqual(%); } 'generateHookMap' |> describe(%, () => { 'should parse names for built-in hooks' |> it(%, () => { const code = ` import {useState, useContext, useMemo, useReducer} from 'react'; export function Component() { const a = useMemo(() => A); const [b, setB] = useState(0); // prettier-ignore const c = useContext(A), d = useContext(B); // eslint-disable-line one-var const [e, dispatch] = useReducer(reducer, initialState); const f = useRef(null) return a + b + c + d + e + f.current; }`; const parsed = code |> parse(%, { sourceType: 'module', plugins: ['jsx', 'flow'] }); const hookMap = parsed |> generateHookMap(%); hookMap |> expectHookMapToEqual(%, { names: ['', 'a', 'b', 'c', 'd', 'e', 'f'], mappings: [' from 1:0', 'a from 5:12', ' from 5:28', 'b from 6:20', ' from 6:31', 'c from 9:12', ' from 9:25', 'd from 9:31', ' from 9:44', 'e from 11:24', ' from 11:57', 'f from 12:12', ' from 12:24'] }); null |> ({ line: 1, column: 0 } |> getHookNameForLocation(%, hookMap) |> expect(%)).toEqual(%); null |> ({ line: 2, column: 25 } |> getHookNameForLocation(%, hookMap) |> expect(%)).toEqual(%); 'a' |> ({ line: 5, column: 12 } |> getHookNameForLocation(%, hookMap) |> expect(%)).toEqual(%); 'a' |> ({ line: 5, column: 13 } |> getHookNameForLocation(%, hookMap) |> expect(%)).toEqual(%); null |> ({ line: 5, column: 28 } |> getHookNameForLocation(%, hookMap) |> expect(%)).toEqual(%); null |> ({ line: 5, column: 29 } |> getHookNameForLocation(%, hookMap) |> expect(%)).toEqual(%); 'b' |> ({ line: 6, column: 20 } |> getHookNameForLocation(%, hookMap) |> expect(%)).toEqual(%); 'b' |> ({ line: 6, column: 30 } |> getHookNameForLocation(%, hookMap) |> expect(%)).toEqual(%); null |> ({ line: 6, column: 31 } |> getHookNameForLocation(%, hookMap) |> expect(%)).toEqual(%); null |> ({ line: 7, column: 31 } |> getHookNameForLocation(%, hookMap) |> expect(%)).toEqual(%); null |> ({ line: 8, column: 20 } |> getHookNameForLocation(%, hookMap) |> expect(%)).toEqual(%); 'c' |> ({ line: 9, column: 12 } |> getHookNameForLocation(%, hookMap) |> expect(%)).toEqual(%); 'c' |> ({ line: 9, column: 13 } |> getHookNameForLocation(%, hookMap) |> expect(%)).toEqual(%); null |> ({ line: 9, column: 25 } |> getHookNameForLocation(%, hookMap) |> expect(%)).toEqual(%); null |> ({ line: 9, column: 26 } |> getHookNameForLocation(%, hookMap) |> expect(%)).toEqual(%); 'd' |> ({ line: 9, column: 31 } |> getHookNameForLocation(%, hookMap) |> expect(%)).toEqual(%); 'd' |> ({ line: 9, column: 32 } |> getHookNameForLocation(%, hookMap) |> expect(%)).toEqual(%); null |> ({ line: 9, column: 44 } |> getHookNameForLocation(%, hookMap) |> expect(%)).toEqual(%); null |> ({ line: 9, column: 45 } |> getHookNameForLocation(%, hookMap) |> expect(%)).toEqual(%); 'e' |> ({ line: 11, column: 24 } |> getHookNameForLocation(%, hookMap) |> expect(%)).toEqual(%); 'e' |> ({ line: 11, column: 56 } |> getHookNameForLocation(%, hookMap) |> expect(%)).toEqual(%); null |> ({ line: 11, column: 57 } |> getHookNameForLocation(%, hookMap) |> expect(%)).toEqual(%); null |> ({ line: 11, column: 58 } |> getHookNameForLocation(%, hookMap) |> expect(%)).toEqual(%); 'f' |> ({ line: 12, column: 12 } |> getHookNameForLocation(%, hookMap) |> expect(%)).toEqual(%); 'f' |> ({ line: 12, column: 23 } |> getHookNameForLocation(%, hookMap) |> expect(%)).toEqual(%); null |> ({ line: 12, column: 24 } |> getHookNameForLocation(%, hookMap) |> expect(%)).toEqual(%); null |> ({ line: 100, column: 50 } |> getHookNameForLocation(%, hookMap) |> expect(%)).toEqual(%); }); 'should parse names for custom hooks' |> it(%, () => { const code = ` import useTheme from 'useTheme'; import useValue from 'useValue'; export function Component() { const theme = useTheme(); const [val, setVal] = useValue(); return theme; }`; const parsed = code |> parse(%, { sourceType: 'module', plugins: ['jsx', 'flow'] }); const hookMap = parsed |> generateHookMap(%); hookMap |> expectHookMapToEqual(%, { names: ['', 'theme', 'val'], mappings: [' from 1:0', 'theme from 6:16', ' from 6:26', 'val from 7:24', ' from 7:34'] }); null |> ({ line: 1, column: 0 } |> getHookNameForLocation(%, hookMap) |> expect(%)).toEqual(%); 'theme' |> ({ line: 6, column: 16 } |> getHookNameForLocation(%, hookMap) |> expect(%)).toEqual(%); null |> ({ line: 6, column: 26 } |> getHookNameForLocation(%, hookMap) |> expect(%)).toEqual(%); 'val' |> ({ line: 7, column: 24 } |> getHookNameForLocation(%, hookMap) |> expect(%)).toEqual(%); null |> ({ line: 7, column: 34 } |> getHookNameForLocation(%, hookMap) |> expect(%)).toEqual(%); }); 'should parse names for nested hook calls' |> it(%, () => { const code = ` import {useMemo, useState} from 'react'; export function Component() { const InnerComponent = useMemo(() => () => { const [state, setState] = useState(0); return state; }); return null; }`; const parsed = code |> parse(%, { sourceType: 'module', plugins: ['jsx', 'flow'] }); const hookMap = parsed |> generateHookMap(%); hookMap |> expectHookMapToEqual(%, { names: ['', 'InnerComponent', 'state'], mappings: [' from 1:0', 'InnerComponent from 5:25', 'state from 6:30', 'InnerComponent from 6:41', ' from 9:4'] }); null |> ({ line: 1, column: 0 } |> getHookNameForLocation(%, hookMap) |> expect(%)).toEqual(%); 'InnerComponent' |> ({ line: 5, column: 25 } |> getHookNameForLocation(%, hookMap) |> expect(%)).toEqual(%); 'state' |> ({ line: 6, column: 30 } |> getHookNameForLocation(%, hookMap) |> expect(%)).toEqual(%); 'state' |> ({ line: 6, column: 40 } |> getHookNameForLocation(%, hookMap) |> expect(%)).toEqual(%); 'InnerComponent' |> ({ line: 6, column: 41 } |> getHookNameForLocation(%, hookMap) |> expect(%)).toEqual(%); null |> ({ line: 9, column: 4 } |> getHookNameForLocation(%, hookMap) |> expect(%)).toEqual(%); }); 'should skip names for non-nameable hooks' |> it(%, () => { const code = ` import useTheme from 'useTheme'; import useValue from 'useValue'; export function Component() { const [val, setVal] = useState(0); useEffect(() => { // ... }); useLayoutEffect(() => { // ... }); return val; }`; const parsed = code |> parse(%, { sourceType: 'module', plugins: ['jsx', 'flow'] }); const hookMap = parsed |> generateHookMap(%); hookMap |> expectHookMapToEqual(%, { names: ['', 'val'], mappings: [' from 1:0', 'val from 6:24', ' from 6:35'] }); null |> ({ line: 1, column: 0 } |> getHookNameForLocation(%, hookMap) |> expect(%)).toEqual(%); 'val' |> ({ line: 6, column: 24 } |> getHookNameForLocation(%, hookMap) |> expect(%)).toEqual(%); null |> ({ line: 6, column: 35 } |> getHookNameForLocation(%, hookMap) |> expect(%)).toEqual(%); null |> ({ line: 8, column: 2 } |> getHookNameForLocation(%, hookMap) |> expect(%)).toEqual(%); }); });