From c726669384c69aa23eb6c6c036663352fa635d71 Mon Sep 17 00:00:00 2001 From: Andre Wiggins Date: Thu, 23 Nov 2023 00:53:31 -0800 Subject: [PATCH 1/2] Use function expression name if it has one --- packages/react-transform/src/index.ts | 6 +- packages/react-transform/test/node/helpers.ts | 115 ++++++++++++------ 2 files changed, 80 insertions(+), 41 deletions(-) diff --git a/packages/react-transform/src/index.ts b/packages/react-transform/src/index.ts index cd6530452..0d0accc96 100644 --- a/packages/react-transform/src/index.ts +++ b/packages/react-transform/src/index.ts @@ -84,7 +84,11 @@ function getObjectPropertyKey( * name), return that. Else return null. */ function getFunctionNodeName(path: NodePath): string | null { - if (path.node.type === "FunctionDeclaration" && path.node.id) { + if ( + (path.node.type === "FunctionDeclaration" || + path.node.type === "FunctionExpression") && + path.node.id + ) { return path.node.id.name; } else if (path.node.type === "ObjectMethod") { return getObjectPropertyKey(path.node); diff --git a/packages/react-transform/test/node/helpers.ts b/packages/react-transform/test/node/helpers.ts index d0edbaf63..44e043f8c 100644 --- a/packages/react-transform/test/node/helpers.ts +++ b/packages/react-transform/test/node/helpers.ts @@ -291,10 +291,15 @@ interface VariableCodeConfig extends CodeConfig { const codeTitle = (...parts: Array) => parts.filter(Boolean).join(" "); -function expressionComponents(config: CodeConfig): GeneratedCode[] { +function expressionComponents( + config: CodeConfig, + properInlineName?: boolean +): GeneratedCode[] { const { name: baseName, params } = config; + + let components: GeneratedCode[]; if (config.auto) { - return [ + components = [ { name: codeTitle(baseName, "as function without inline name"), ...generateCode({ @@ -303,15 +308,6 @@ function expressionComponents(config: CodeConfig): GeneratedCode[] { params, }), }, - { - name: codeTitle(baseName, "as function with proper inline name"), - ...generateCode({ - type: "FuncExpComp", - name: "App", - body: "return
{signal.value}
", - params, - }), - }, { name: codeTitle(baseName, "as arrow function with statement body"), ...generateCode({ @@ -332,16 +328,7 @@ function expressionComponents(config: CodeConfig): GeneratedCode[] { }, ]; } else { - return [ - { - name: codeTitle(baseName, "as function with bad inline name"), - ...generateCode({ - type: "FuncExpComp", - name: "app", - body: "return signal.value", - params, - }), - }, + components = [ { name: codeTitle(baseName, "as function with no JSX"), ...generateCode({ @@ -378,13 +365,46 @@ function expressionComponents(config: CodeConfig): GeneratedCode[] { }, ]; } + + if ( + (properInlineName != null && properInlineName === false) || + config.auto === false + ) { + components.push({ + name: codeTitle(baseName, "as function with bad inline name"), + ...generateCode({ + type: "FuncExpComp", + name: "app", + body: "return
{signal.value}
", + params, + }), + }); + } else { + components.push({ + name: codeTitle(baseName, "as function with proper inline name"), + ...generateCode({ + type: "FuncExpComp", + name: "App", + body: "return
{signal.value}
", + params, + }), + }); + } + + return components; } -function withCallExpWrappers(config: CodeConfig): GeneratedCode[] { +function withCallExpWrappers( + config: CodeConfig, + properInlineName?: boolean +): GeneratedCode[] { const codeCases: GeneratedCode[] = []; // Simulate a component wrapped memo - const memoedComponents = expressionComponents({ ...config, params: 1 }); + const memoedComponents = expressionComponents( + { ...config, params: 1 }, + properInlineName + ); for (let component of memoedComponents) { codeCases.push({ name: component.name + " wrapped in memo", @@ -397,7 +417,10 @@ function withCallExpWrappers(config: CodeConfig): GeneratedCode[] { } // Simulate a component wrapped in forwardRef - const forwardRefComponents = expressionComponents({ ...config, params: 2 }); + const forwardRefComponents = expressionComponents( + { ...config, params: 2 }, + properInlineName + ); for (let component of forwardRefComponents) { codeCases.push({ name: component.name + " wrapped in forwardRef", @@ -607,10 +630,13 @@ export function variableComp(config: VariableCodeConfig): GeneratedCode[] { // With HoC wrappers, we are testing the logic to find the component name. So // only generate tests where the function body is correct ("auto" is true) and // the name is either correct or bad. - const hocComponents = withCallExpWrappers({ - ...config, - auto: true, - }); + const hocComponents = withCallExpWrappers( + { + ...config, + auto: true, + }, + config.auto + ); const suffix = config.auto ? "" : "with bad variable name"; for (const c of hocComponents) { codeCases.push({ @@ -677,10 +703,13 @@ export function assignmentComp(config: CodeConfig): GeneratedCode[] { // With HoC wrappers, we are testing the logic to find the component name. So // only generate tests where the function body is correct ("auto" is true) and // the name is either correct or bad. - const hocComponents = withCallExpWrappers({ - ...config, - auto: true, - }); + const hocComponents = withCallExpWrappers( + { + ...config, + auto: true, + }, + config.auto + ); const suffix = config.auto ? "" : "with bad variable name"; for (const c of hocComponents) { codeCases.push({ @@ -794,10 +823,13 @@ export function objAssignComp(config: CodeConfig): GeneratedCode[] { // With HoC wrappers, we are testing the logic to find the component name. So // only generate tests where the function body is correct ("auto" is true) and // the name is either correct or bad. - const hocComponents = withCallExpWrappers({ - ...config, - auto: true, - }); + const hocComponents = withCallExpWrappers( + { + ...config, + auto: true, + }, + config.auto + ); const suffix = config.auto ? "" : "with bad variable name"; for (const c of hocComponents) { codeCases.push({ @@ -863,10 +895,13 @@ export function objectPropertyComp(config: CodeConfig): GeneratedCode[] { // With HoC wrappers, we are testing the logic to find the component name. So // only generate tests where the function body is correct ("auto" is true) and // the name is either correct or bad. - const hocComponents = withCallExpWrappers({ - ...config, - auto: true, - }); + const hocComponents = withCallExpWrappers( + { + ...config, + auto: true, + }, + config.auto + ); const suffix = config.auto ? "" : "with bad property name"; for (const c of hocComponents) { codeCases.push({ From ca716b35bfab1981e6d41033c5b19309d8164524 Mon Sep 17 00:00:00 2001 From: Andre Wiggins Date: Thu, 23 Nov 2023 00:57:30 -0800 Subject: [PATCH 2/2] Add changeset --- .changeset/stupid-badgers-float.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/stupid-badgers-float.md diff --git a/.changeset/stupid-badgers-float.md b/.changeset/stupid-badgers-float.md new file mode 100644 index 000000000..f0f5c6bef --- /dev/null +++ b/.changeset/stupid-badgers-float.md @@ -0,0 +1,5 @@ +--- +"@preact/signals-react-transform": minor +--- + +Use function expression name to determine if it is a Component and should be transformed.