Skip to content

[compiler] Allow ReactElement symbol to be configured when inlining jsx #30996

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
Sep 19, 2024
Merged

[compiler] Allow ReactElement symbol to be configured when inlining jsx #30996

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
260f273
Add element symbol to config
Sep 16, 2024
f4d3cee
Use object for transform config
Sep 19, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions compiler/packages/babel-plugin-react-compiler/src/Entrypoint/Pipeline.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -352,8 +352,8 @@ function* runWithEnvironment(
});
}

if (env.config.enableInlineJsxTransform) {
inlineJsxTransform(hir);
if (env.config.inlineJsxTransform) {
inlineJsxTransform(hir, env.config.inlineJsxTransform);
yield log({
kind: 'hir',
name: 'inlineJsxTransform',
Expand Down
11 changes: 10 additions & 1 deletion compiler/packages/babel-plugin-react-compiler/src/HIR/Environment.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -50,6 +50,13 @@ import {
import {Scope as BabelScope} from '@babel/traverse';
import {TypeSchema} from './TypeSchema';

export const ReactElementSymbolSchema = z.object({
elementSymbol: z.union([
z.literal('react.element'),
z.literal('react.transitional.element'),
]),
});

export const ExternalFunctionSchema = z.object({
// Source for the imported module that exports the `importSpecifierName` functions
source: z.string(),
Expand Down Expand Up @@ -237,8 +244,10 @@ const EnvironmentConfigSchema = z.object({
* Enables inlining ReactElement object literals in place of JSX
* An alternative to the standard JSX transform which replaces JSX with React's jsxProd() runtime
* Currently a prod-only optimization, requiring Fast JSX dependencies
*
* The symbol configuration is set for backwards compatability with pre-React 19 transforms
*/
enableInlineJsxTransform: z.boolean().default(false),
inlineJsxTransform: ReactElementSymbolSchema.nullish(),
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

this format of a nullable string makes it harder or uglier to add more options in the future w/o breaking changes. You could consider a nullable object with a elementSymbol key.

If it's only for internal experimentation, it doesn't really matter that much.


/*
* Enable validation of hooks to partially check that the component honors the rules of hooks.
Expand Down
21 changes: 9 additions & 12 deletions compiler/packages/babel-plugin-react-compiler/src/Optimization/InlineJsxTransform.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@ import {
markPredecessors,
reversePostorderBlocks,
} from '../HIR/HIRBuilder';
import {CompilerError} from '..';
import {CompilerError, EnvironmentConfig} from '..';

function createSymbolProperty(
fn: HIRFunction,
Expand Down Expand Up @@ -316,7 +316,12 @@ function createPropsProperties(
}

// TODO: Make PROD only with conditional statements
export function inlineJsxTransform(fn: HIRFunction): void {
export function inlineJsxTransform(
fn: HIRFunction,
inlineJsxTransformConfig: NonNullable<
EnvironmentConfig['inlineJsxTransform']
>,
): void {
for (const [, block] of fn.body.blocks) {
let nextInstructions: Array<Instruction> | null = null;
for (let i = 0; i < block.instructions.length; i++) {
Expand Down Expand Up @@ -344,11 +349,7 @@ export function inlineJsxTransform(fn: HIRFunction): void {
instr,
nextInstructions,
'$$typeof',
/**
* TODO: Add this to config so we can switch between
* react.element / react.transitional.element
*/
'react.transitional.element',
inlineJsxTransformConfig.elementSymbol,
),
createTagProperty(fn, instr, nextInstructions, instr.value.tag),
refProperty,
Expand Down Expand Up @@ -384,11 +385,7 @@ export function inlineJsxTransform(fn: HIRFunction): void {
instr,
nextInstructions,
'$$typeof',
/**
* TODO: Add this to config so we can switch between
* react.element / react.transitional.element
*/
'react.transitional.element',
inlineJsxTransformConfig.elementSymbol,
),
createSymbolProperty(
fn,
Expand Down
7 changes: 7 additions & 0 deletions compiler/packages/snap/src/compiler.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,7 @@ import type {
} from 'babel-plugin-react-compiler/src/Entrypoint';
import type {Effect, ValueKind} from 'babel-plugin-react-compiler/src/HIR';
import type {
EnvironmentConfig,
Macro,
MacroMethod,
parseConfigPragma as ParseConfigPragma,
Expand Down Expand Up @@ -201,6 +202,11 @@ function makePluginOptions(
};
}

let inlineJsxTransform: EnvironmentConfig['inlineJsxTransform'] = null;
if (firstLine.includes('@enableInlineJsxTransform')) {
inlineJsxTransform = {elementSymbol: 'react.transitional.element'};
}

let logs: Array<{filename: string | null; event: LoggerEvent}> = [];
let logger: Logger | null = null;
if (firstLine.includes('@logger')) {
Expand Down Expand Up @@ -230,6 +236,7 @@ function makePluginOptions(
enableChangeDetectionForDebugging,
lowerContextAccess,
validateBlocklistedImports,
inlineJsxTransform,
},
compilationMode,
logger,
Expand Down