[compiler] Handle OutlinedFunctionExpression in various passes

[gsathya]

Stack from ghstack (oldest at bottom):

• -> [compiler] Handle OutlinedFunctionExpression in various passes #30089
• [compiler] Introduce OutlinedFunctionExpression HIR #30088
• [compiled] Refactor codegen for ReactiveFunction #30087
• [compiler] Add flag for outlining jsx pass #30086
• [compiler][Babel] Refactor insertion of compiled fn #30085
• [compiler] Refactor traverseFunction in Entrypoint #30084

There's nothing interesting happening quite yet.

Note that OutlinedFunctionExpression will be created only after
InferReferenceEffects so some of the passes before will not need to
handle this HIR node.

The codegen currently doesn't handle this HIR node for now.

[vercel]

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	Jun 25, 2024 4:22pm

[react-sizebot]

Comparing: f5d2feb...28ec1c4

Critical size changes

Includes critical production bundles, as well as any change greater than 2%:

Name	+/-	Base	Current	+/- gzip	Base gzip	Current gzip
oss-stable/react-dom/cjs/react-dom.production.js	=	6.68 kB	6.68 kB	+0.05%	1.83 kB	1.83 kB
oss-stable/react-dom/cjs/react-dom-client.production.js	=	497.93 kB	497.93 kB	=	89.26 kB	89.26 kB
oss-experimental/react-dom/cjs/react-dom.production.js	=	6.69 kB	6.69 kB	=	1.83 kB	1.83 kB
oss-experimental/react-dom/cjs/react-dom-client.production.js	=	502.75 kB	502.75 kB	=	89.96 kB	89.96 kB
facebook-www/ReactDOM-prod.classic.js	=	597.10 kB	597.10 kB	=	105.31 kB	105.31 kB
facebook-www/ReactDOM-prod.modern.js	=	571.44 kB	571.44 kB	=	101.24 kB	101.24 kB
test_utils/ReactAllWarnings.js	Deleted	62.88 kB	0.00 kB	Deleted	15.69 kB	0.00 kB

Significant size changes

Includes any change greater than 0.2%:

Expand to show

Name	+/-	Base	Current	+/- gzip	Base gzip	Current gzip
test_utils/ReactAllWarnings.js	Deleted	62.88 kB	0.00 kB	Deleted	15.69 kB	0.00 kB

Generated by 🚫 dangerJS against 28ec1c4

[josephsavona]

This stack looks great! Looking forward to seeing more of the outlining implementation, what we discussed in design sync makes sense though.

One extra thought: what about JSX created during a loop? So far it seems the model is around outlining functions, when what we really want to outline is JSX.

[josephsavona]

Actually thinking about this more i think we might want a different representation to make this more general. Rather than an outlined function which represents a function in the source + its outlined component, it seems like we could:

• Create outlined components for complex JSX subexpressions (regardless of whether they're in a callback or in a loop)
• Replace existing JSX instructions with calls to those outlined components

So we might be able to completely avoid new instruction variants, since the outlined functions are just a separate function to plumb through the pipeline and the the JSX expressions just get swapped in-place.

[josephsavona]

I've implemented the alternative at #30331