From f516a8c27f05b6aca9193d1553f9231554c53330 Mon Sep 17 00:00:00 2001 From: Lauren Tan Date: Thu, 25 Jul 2024 15:11:20 -0400 Subject: [PATCH] Update [ghstack-poisoned] --- .../src/Entrypoint/Program.ts | 18 +++---- ...rror.bug-outlining-in-react-memo.expect.md | 42 ---------------- .../compiler/outlining-in-func-expr.expect.md | 6 +-- .../outlining-in-react-memo.expect.md | 49 +++++++++++++++++++ ...act-memo.js => outlining-in-react-memo.js} | 0 5 files changed, 59 insertions(+), 56 deletions(-) delete mode 100644 compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.bug-outlining-in-react-memo.expect.md create mode 100644 compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/outlining-in-react-memo.expect.md rename compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/{error.bug-outlining-in-react-memo.js => outlining-in-react-memo.js} (100%) diff --git a/compiler/packages/babel-plugin-react-compiler/src/Entrypoint/Program.ts b/compiler/packages/babel-plugin-react-compiler/src/Entrypoint/Program.ts index 1aabb1acca723..049fe58e1b419 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/Entrypoint/Program.ts +++ b/compiler/packages/babel-plugin-react-compiler/src/Entrypoint/Program.ts @@ -196,6 +196,7 @@ export function createNewFunctionNode( } function insertNewOutlinedFunctionNode( + program: NodePath, originalFn: BabelFn, compiledFn: CodegenFunction, ): NodePath { @@ -216,14 +217,6 @@ function insertNewOutlinedFunctionNode( */ case 'ArrowFunctionExpression': case 'FunctionExpression': { - CompilerError.invariant( - originalFn.parentPath.isVariableDeclarator() && - originalFn.parentPath.parentPath.isVariableDeclaration(), - { - reason: 'Expected a variable declarator parent', - loc: originalFn.node.loc ?? null, - }, - ); const fn: t.FunctionDeclaration = { type: 'FunctionDeclaration', id: compiledFn.id, @@ -233,8 +226,7 @@ function insertNewOutlinedFunctionNode( params: compiledFn.params, body: compiledFn.body, }; - const varDecl = originalFn.parentPath.parentPath; - const insertedFuncDecl = varDecl.insertAfter(fn)[0]!; + const insertedFuncDecl = program.pushContainer('body', [fn])[0]!; CompilerError.invariant(insertedFuncDecl.isFunctionDeclaration(), { reason: 'Expected inserted function declaration', description: `Got: ${insertedFuncDecl}`, @@ -468,7 +460,11 @@ export function compileProgram( reason: 'Unexpected nested outlined functions', loc: outlined.fn.loc, }); - const fn = insertNewOutlinedFunctionNode(current.fn, outlined.fn); + const fn = insertNewOutlinedFunctionNode( + program, + current.fn, + outlined.fn, + ); fn.skip(); ALREADY_COMPILED.add(fn.node); if (outlined.type !== null) { diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.bug-outlining-in-react-memo.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.bug-outlining-in-react-memo.expect.md deleted file mode 100644 index 5ad9fca0f3047..0000000000000 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.bug-outlining-in-react-memo.expect.md +++ /dev/null @@ -1,42 +0,0 @@ - -## Input - -```javascript -const View = React.memo(({items}) => { - return ( -
    - {items.map(item => ( -
  • {item.name}
    • - ))} -
- ); -}); - -``` - - -## Error - -``` -> 1 | const View = React.memo(({items}) => { - | ^^^^^^^^^^^^^^ -> 2 | return ( - | ^^^^^^^^^^ -> 3 |
    - | ^^^^^^^^^^ -> 4 | {items.map(item => ( - | ^^^^^^^^^^ -> 5 |
  • {item.name}
    • - | ^^^^^^^^^^ -> 6 | ))} - | ^^^^^^^^^^ -> 7 |
- | ^^^^^^^^^^ -> 8 | ); - | ^^^^^^^^^^ -> 9 | }); - | ^^ Invariant: Expected a variable declarator parent (1:9) - 10 | -``` - - \ No newline at end of file diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/outlining-in-func-expr.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/outlining-in-func-expr.expect.md index b403368e8a6b7..d97c06481c2e1 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/outlining-in-func-expr.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/outlining-in-func-expr.expect.md @@ -50,9 +50,6 @@ const Component2 = (props) => { } return t1; }; -function _temp(item) { - return
  • {item.name}
    • ; -} export const FIXTURE_ENTRYPOINT = { fn: Component2, @@ -65,6 +62,9 @@ export const FIXTURE_ENTRYPOINT = { }, ], }; +function _temp(item) { + return
  • {item.name}
    • ; +} ``` diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/outlining-in-react-memo.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/outlining-in-react-memo.expect.md new file mode 100644 index 0000000000000..16efc7a5c0663 --- /dev/null +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/outlining-in-react-memo.expect.md @@ -0,0 +1,49 @@ + +## Input + +```javascript +const View = React.memo(({items}) => { + return ( +
      + {items.map(item => ( +
    • {item.name}
      • + ))} +
    + ); +}); + +``` + +## Code + +```javascript +import { c as _c } from "react/compiler-runtime"; +const View = React.memo((t0) => { + const $ = _c(4); + const { items } = t0; + let t1; + if ($[0] !== items) { + t1 = items.map(_temp); + $[0] = items; + $[1] = t1; + } else { + t1 = $[1]; + } + let t2; + if ($[2] !== t1) { + t2 =
      {t1}
    ; + $[2] = t1; + $[3] = t2; + } else { + t2 = $[3]; + } + return t2; +}); +function _temp(item) { + return
  • {item.name}
    • ; +} + +``` + +### Eval output +(kind: exception) Fixture not implemented \ No newline at end of file diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.bug-outlining-in-react-memo.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/outlining-in-react-memo.js similarity index 100% rename from compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.bug-outlining-in-react-memo.js rename to compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/outlining-in-react-memo.js