[compiler] General-purpose function outlining #30331

josephsavona · 2024-07-15T02:26:02Z

Stack from ghstack (oldest at bottom):

Implements general-purpose function outlining. Specifically, anonymous function expressions which have no dependencies/context variables are extracted into named top-level functions. The original function expression is replaced with a LoadGlobal of the generated name.

Note that the architecture is designed to allow very general purpose forms of outlining, though we currently are very conservative in what we outline. Specifically, the outlining allows annotating functions with an optional ReactiveFunctionType, which if set will cause the outlined function to get compiled as that type. So we could for example outline a helper hook or helper component, set the type, and then have the hook/component get memoized as well. For now though we just outline with no type set, and generate the function as-is without running it through compilation.

Implements general-purpose function outlining. Specifically, anonymous function expressions which have no dependencies/context variables are extracted into named top-level functions. The original function expression is replaced with a `LoadGlobal` of the generated name. Note that the architecture is designed to allow very general purpose forms of outlining, though we currently are very conservative in what we outline. Specifically, the outlining allows annotating functions with an optional ReactiveFunctionType, which if set will cause the outlined function to get compiled as that type. So we could for example outline a helper hook or helper component, set the type, and then have the hook/component get memoized as well. For now though we just outline with no type set, and generate the function as-is without running it through compilation. [ghstack-poisoned]

vercel · 2024-07-15T02:26:04Z

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
react-compiler-playground	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jul 15, 2024 3:34am

Implements general-purpose function outlining. Specifically, anonymous function expressions which have no dependencies/context variables are extracted into named top-level functions. The original function expression is replaced with a `LoadGlobal` of the generated name. Note that the architecture is designed to allow very general purpose forms of outlining, though we currently are very conservative in what we outline. Specifically, the outlining allows annotating functions with an optional ReactiveFunctionType, which if set will cause the outlined function to get compiled as that type. So we could for example outline a helper hook or helper component, set the type, and then have the hook/component get memoized as well. For now though we just outline with no type set, and generate the function as-is without running it through compilation. ghstack-source-id: ea1ef4108d97298a1cc59b41ed64f988e808f3c7 Pull Request resolved: #30331

Implements general-purpose function outlining. Specifically, anonymous function expressions which have no dependencies/context variables are extracted into named top-level functions. The original function expression is replaced with a `LoadGlobal` of the generated name. Note that the architecture is designed to allow very general purpose forms of outlining, though we currently are very conservative in what we outline. Specifically, the outlining allows annotating functions with an optional ReactiveFunctionType, which if set will cause the outlined function to get compiled as that type. So we could for example outline a helper hook or helper component, set the type, and then have the hook/component get memoized as well. For now though we just outline with no type set, and generate the function as-is without running it through compilation. [ghstack-poisoned]

Implements general-purpose function outlining. Specifically, anonymous function expressions which have no dependencies/context variables are extracted into named top-level functions. The original function expression is replaced with a `LoadGlobal` of the generated name. Note that the architecture is designed to allow very general purpose forms of outlining, though we currently are very conservative in what we outline. Specifically, the outlining allows annotating functions with an optional ReactiveFunctionType, which if set will cause the outlined function to get compiled as that type. So we could for example outline a helper hook or helper component, set the type, and then have the hook/component get memoized as well. For now though we just outline with no type set, and generate the function as-is without running it through compilation. ghstack-source-id: 16d0bc558166e10cb0fe39fdcbac5c06ca7ea283 Pull Request resolved: #30331

Implements general-purpose function outlining. Specifically, anonymous function expressions which have no dependencies/context variables are extracted into named top-level functions. The original function expression is replaced with a `LoadGlobal` of the generated name. Note that the architecture is designed to allow very general purpose forms of outlining, though we currently are very conservative in what we outline. Specifically, the outlining allows annotating functions with an optional ReactiveFunctionType, which if set will cause the outlined function to get compiled as that type. So we could for example outline a helper hook or helper component, set the type, and then have the hook/component get memoized as well. For now though we just outline with no type set, and generate the function as-is without running it through compilation. [ghstack-poisoned]

Implements general-purpose function outlining. Specifically, anonymous function expressions which have no dependencies/context variables are extracted into named top-level functions. The original function expression is replaced with a `LoadGlobal` of the generated name. Note that the architecture is designed to allow very general purpose forms of outlining, though we currently are very conservative in what we outline. Specifically, the outlining allows annotating functions with an optional ReactiveFunctionType, which if set will cause the outlined function to get compiled as that type. So we could for example outline a helper hook or helper component, set the type, and then have the hook/component get memoized as well. For now though we just outline with no type set, and generate the function as-is without running it through compilation. ghstack-source-id: 8d7acc1c5cfd8c26b6ce85b27fbe8bbe8865d579 Pull Request resolved: #30331

Implements general-purpose function outlining. Specifically, anonymous function expressions which have no dependencies/context variables are extracted into named top-level functions. The original function expression is replaced with a `LoadGlobal` of the generated name. Note that the architecture is designed to allow very general purpose forms of outlining, though we currently are very conservative in what we outline. Specifically, the outlining allows annotating functions with an optional ReactiveFunctionType, which if set will cause the outlined function to get compiled as that type. So we could for example outline a helper hook or helper component, set the type, and then have the hook/component get memoized as well. For now though we just outline with no type set, and generate the function as-is without running it through compilation. [ghstack-poisoned]

mvitousek

Very cool. One thing I notice is that outlined functions aren't represented in the playground -- e.g. see the diff on the Outlined Functions tab here. I don't think this diff should be blocked on this but I could imagine it making life harder if we're ever debugging an issue in one of the passes that applies to outlined functions.

mvitousek · 2024-07-16T00:21:43Z

compiler/packages/babel-plugin-react-compiler/src/ReactiveScopes/CodegenReactiveFunction.ts

+  const outlined: CodegenFunction["outlined"] = [];
+  for (const { fn: outlinedFunction, type } of cx.env.getOutlinedFunctions()) {
+    const reactiveFunction = buildReactiveFunction(outlinedFunction);
+    pruneUnusedLabels(reactiveFunction);


It feels a little weird to me to be running these passes on outlined functions in the codegen phase. I wonder if it's possible to store the outlined functions in the reactiveFunction language from the get-go and then run the pruning passes on outlined functions at the same time we run it over reactive functions generally?

Yeah, that's a reasonable alternative. I did it this way because we run these cleanup passes for other function expressions inside codegen, so it keeps things more consistent. Eventually the entire pipeline will be HIR-based, and each of these passes can recurse into function expressions and we won't need this anymore.

So using HIR for the outlined functions aligns more w the long-term direction, i think.

mvitousek · 2024-07-16T00:27:46Z

compiler/packages/babel-plugin-react-compiler/src/Optimization/OutlineFunctions.ts

+        value.kind === "ObjectMethod"
+      ) {
+        // Recurse in case there are inner functions which can be outlined
+        outlineFunctions(value.loweredFunc.func);


If we choose to outline the parent function, is there any benefit in outlining its nested functions?

Probably minimal, but I have to imagine it can still be slightly faster to avoid creating a closure unnecessarily.

josephsavona · 2024-07-16T01:43:14Z

Good point about playground, i can follow-up to address that!

mofeiZ · 2024-07-16T20:29:38Z

...ackages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-hoisting.expect.md

  let t0;
  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
-    t0 = () => {};
+    t0 = () => wat();


(Not feedback, just noticed and wanted to jot down a note)

This is slightly suboptimal as we could keep a sidemap of outlined functions (and also outline functions that only refer to already-outlined functions), but this might make more sense in terms of dx (e.g. if I were using a debugger, I would expect that a variable called wat exists)

ohhh yeah, good idea. that would be a nice extension and it's probably still reasonably debuggable. for example, if we were to outline this function we could potentially outline it as:

function _temp2() { const wat = _temp; return wat(); }

to preserve the names for debugging.

mofeiZ · 2024-07-16T21:23:51Z

...react-compiler/src/__tests__/fixtures/compiler/allow-global-reassignment-in-effect.expect.md

  }
-  useEffect(t0, t1);
+  useEffect(_temp, t0);


mofeiZ

Went through all the fixtures, this is awesome!! Thanks for syncing and testing internally as well

Implements general-purpose function outlining. Specifically, anonymous function expressions which have no dependencies/context variables are extracted into named top-level functions. The original function expression is replaced with a `LoadGlobal` of the generated name. Note that the architecture is designed to allow very general purpose forms of outlining, though we currently are very conservative in what we outline. Specifically, the outlining allows annotating functions with an optional ReactiveFunctionType, which if set will cause the outlined function to get compiled as that type. So we could for example outline a helper hook or helper component, set the type, and then have the hook/component get memoized as well. For now though we just outline with no type set, and generate the function as-is without running it through compilation. ghstack-source-id: 2a7da6c8e85c3f8becb22d3869d9b6200f7db126 Pull Request resolved: #30331

Implements general-purpose function outlining. Specifically, anonymous function expressions which have no dependencies/context variables are extracted into named top-level functions. The original function expression is replaced with a `LoadGlobal` of the generated name. Note that the architecture is designed to allow very general purpose forms of outlining, though we currently are very conservative in what we outline. Specifically, the outlining allows annotating functions with an optional ReactiveFunctionType, which if set will cause the outlined function to get compiled as that type. So we could for example outline a helper hook or helper component, set the type, and then have the hook/component get memoized as well. For now though we just outline with no type set, and generate the function as-is without running it through compilation. ghstack-source-id: 2a7da6c8e85c3f8becb22d3869d9b6200f7db126 Pull Request resolved: facebook#30331

josephsavona mentioned this pull request Jul 15, 2024

[compiler] Store babel scope on Environment #30328

Merged

This was referenced Jul 15, 2024

[compiler] Fixture for function outlining #30329

Merged

[compiler] Refactor Program to use queue of functions to compile #30330

Merged

facebook-github-bot added CLA Signed React Core Team Opened by a member of the React Core Team labels Jul 15, 2024

vercel bot deployed to Preview July 15, 2024 02:31 View deployment

vercel bot deployed to Preview July 15, 2024 02:42 View deployment

vercel bot deployed to Preview July 15, 2024 02:51 View deployment

josephsavona mentioned this pull request Jul 15, 2024

[compiler][be] Promote destructured params to temporaries #30332

Merged

vercel bot deployed to Preview July 15, 2024 03:04 View deployment

vercel bot deployed to Preview July 15, 2024 03:22 View deployment

josephsavona mentioned this pull request Jul 15, 2024

[compiler] Handle OutlinedFunctionExpression in various passes #30089

Closed

vercel bot deployed to Preview July 15, 2024 03:34 View deployment

mvitousek approved these changes Jul 16, 2024

View reviewed changes

josephsavona mentioned this pull request Jul 16, 2024

[compiler] Show outlined functions in logging, playground #30344

Merged

poteto approved these changes Jul 16, 2024

View reviewed changes

mofeiZ reviewed Jul 16, 2024

View reviewed changes

mofeiZ approved these changes Jul 16, 2024

View reviewed changes

josephsavona merged commit 28278fc into gh/josephsavona/36/base Jul 17, 2024
36 checks passed

josephsavona deleted the gh/josephsavona/36/head branch July 17, 2024 01:22

eps1lon mentioned this pull request Jul 23, 2024

Update React from 01172397-20240716 to f6cce072-20240723 vercel/next.js#68075

Closed

mofeiZ mentioned this pull request Jul 24, 2024

[compiler] Correctly insert (Arrow)FunctionExpressions #30446

Merged

This was referenced Jul 25, 2024

Update React from 6230622a1a-20240610 to 76002254-20240724 vercel/next.js#68149

Merged

Update React from 6230622a1a-20240610 to 3208e73e-20240730 vercel/next.js#68330

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[compiler] General-purpose function outlining #30331

[compiler] General-purpose function outlining #30331

josephsavona commented Jul 15, 2024 •

edited

Loading

vercel bot commented Jul 15, 2024 •

edited

Loading

mvitousek left a comment

mvitousek Jul 16, 2024

josephsavona Jul 16, 2024

mvitousek Jul 16, 2024

josephsavona Jul 16, 2024

josephsavona commented Jul 16, 2024

mofeiZ Jul 16, 2024

josephsavona Jul 17, 2024

mofeiZ Jul 16, 2024

mofeiZ left a comment

[compiler] General-purpose function outlining #30331

[compiler] General-purpose function outlining #30331

Conversation

josephsavona commented Jul 15, 2024 • edited Loading

vercel bot commented Jul 15, 2024 • edited Loading

mvitousek left a comment

Choose a reason for hiding this comment

mvitousek Jul 16, 2024

Choose a reason for hiding this comment

josephsavona Jul 16, 2024

Choose a reason for hiding this comment

mvitousek Jul 16, 2024

Choose a reason for hiding this comment

josephsavona Jul 16, 2024

Choose a reason for hiding this comment

josephsavona commented Jul 16, 2024

mofeiZ Jul 16, 2024

Choose a reason for hiding this comment

josephsavona Jul 17, 2024

Choose a reason for hiding this comment

mofeiZ Jul 16, 2024

Choose a reason for hiding this comment

mofeiZ left a comment

Choose a reason for hiding this comment

josephsavona commented Jul 15, 2024 •

edited

Loading

vercel bot commented Jul 15, 2024 •

edited

Loading