From 915be0ef783fa1891f2627e58b2ae2a22d44b4c3 Mon Sep 17 00:00:00 2001 From: lauren Date: Fri, 18 Oct 2024 14:25:36 -0400 Subject: [PATCH 1/3] [playground] Upgrade various packages (#31293) Just some housekeeping --- .github/workflows/compiler_playground.yml | 5 ++ .../playground/__tests__/e2e/page.spec.ts | 4 +- compiler/apps/playground/package.json | 7 ++- compiler/apps/playground/yarn.lock | 50 +++++++------------ 4 files changed, 29 insertions(+), 37 deletions(-) diff --git a/.github/workflows/compiler_playground.yml b/.github/workflows/compiler_playground.yml index 338a95d208..a8a861923f 100644 --- a/.github/workflows/compiler_playground.yml +++ b/.github/workflows/compiler_playground.yml @@ -45,3 +45,8 @@ jobs: run: yarn install --frozen-lockfile - run: npx playwright install --with-deps chromium - run: yarn test + - name: Archive test results + uses: actions/upload-artifact@v4 + with: + name: test-results + path: test-results diff --git a/compiler/apps/playground/__tests__/e2e/page.spec.ts b/compiler/apps/playground/__tests__/e2e/page.spec.ts index bc93352a09..bc6083f52d 100644 --- a/compiler/apps/playground/__tests__/e2e/page.spec.ts +++ b/compiler/apps/playground/__tests__/e2e/page.spec.ts @@ -33,7 +33,7 @@ test('editor should compile successfully', async ({page}) => { path: 'test-results/01-show-js-before.png', }); const userInput = - (await page.locator('.monaco-editor').nth(2).allInnerTexts()) ?? []; + (await page.locator('.monaco-editor').nth(1).allInnerTexts()) ?? []; expect(concat(userInput)).toMatchSnapshot('user-input.txt'); // Reset button works @@ -44,6 +44,6 @@ test('editor should compile successfully', async ({page}) => { path: 'test-results/02-show-js-after.png', }); const defaultInput = - (await page.locator('.monaco-editor').nth(2).allInnerTexts()) ?? []; + (await page.locator('.monaco-editor').nth(1).allInnerTexts()) ?? []; expect(concat(defaultInput)).toMatchSnapshot('default-input.txt'); }); diff --git a/compiler/apps/playground/package.json b/compiler/apps/playground/package.json index 57f04d3e78..bfdd799d21 100644 --- a/compiler/apps/playground/package.json +++ b/compiler/apps/playground/package.json @@ -28,11 +28,11 @@ "@monaco-editor/react": "^4.4.6", "@playwright/test": "^1.42.1", "@use-gesture/react": "^10.2.22", - "hermes-eslint": "^0.14.0", - "hermes-parser": "^0.22.0", + "hermes-eslint": "^0.25.0", + "hermes-parser": "^0.25.0", "invariant": "^2.2.4", "lz-string": "^1.5.0", - "monaco-editor": "^0.34.1", + "monaco-editor": "^0.52.0", "next": "15.0.0-canary.197", "notistack": "^3.0.0-alpha.7", "prettier": "^3.3.3", @@ -50,7 +50,6 @@ "concurrently": "^7.4.0", "eslint": "^8.28.0", "eslint-config-next": "15.0.0-canary.197", - "hermes-parser": "^0.22.0", "monaco-editor-webpack-plugin": "^7.1.0", "postcss": "^8.4.31", "tailwindcss": "^3.2.4", diff --git a/compiler/apps/playground/yarn.lock b/compiler/apps/playground/yarn.lock index c85afb2986..2abe56e8a4 100644 --- a/compiler/apps/playground/yarn.lock +++ b/compiler/apps/playground/yarn.lock @@ -2135,38 +2135,26 @@ hasown@^2.0.0, hasown@^2.0.1, hasown@^2.0.2: dependencies: function-bind "^1.1.2" -hermes-eslint@^0.14.0: - version "0.14.0" - resolved "https://registry.yarnpkg.com/hermes-eslint/-/hermes-eslint-0.14.0.tgz#d56426b0931a7ced99d08b4b6a06f798064b13ba" - integrity sha512-ORk7znDabvALzTbI3QRIQefCkxF1ukDm3dVut3e+cVmwdtsTC71BJetSvdh1jtgK10czwck1QiPZOVOVolhiqQ== +hermes-eslint@^0.25.0: + version "0.25.0" + resolved "https://registry.yarnpkg.com/hermes-eslint/-/hermes-eslint-0.25.0.tgz#beec5f0d9e9e9bdef9e4a420a79038ca7fe84143" + integrity sha512-D9rdrqt7dudZHI5AJKS+1vXBbxxR6Wj9J1JI7eYowYCbXUIvHclsWFy8gSuRmug2V6HSYpsiyPwP3kQs/Q/Y8w== dependencies: esrecurse "^4.3.0" - hermes-estree "0.14.0" - hermes-parser "0.14.0" + hermes-estree "0.25.0" + hermes-parser "0.25.0" -hermes-estree@0.14.0: - version "0.14.0" - resolved "https://registry.yarnpkg.com/hermes-estree/-/hermes-estree-0.14.0.tgz#c663eea1400980802283338a09d0087c448729e7" - integrity sha512-L6M67+0/eSEbt6Ha2XOBFXL++7MR34EOJMgm+j7YCaI4L/jZqrVAg6zYQKzbs1ZCFDLvEQpOgLlapTX4gpFriA== +hermes-estree@0.25.0: + version "0.25.0" + resolved "https://registry.yarnpkg.com/hermes-estree/-/hermes-estree-0.25.0.tgz#fd926ebf3d0d3441a934f19ef3d3d3d4145b1d71" + integrity sha512-xjILoUIyOpLoOHqj8UJs/HNYQ279IfLKTTv9nmXKNT2+QKT/TQF9AyQFrRMo+3xwZoO7k4azocYpCzA1cSvBDg== -hermes-estree@0.22.0: - version "0.22.0" - resolved "https://registry.yarnpkg.com/hermes-estree/-/hermes-estree-0.22.0.tgz#38559502b119f728901d2cfe2ef422f277802a1d" - integrity sha512-FLBt5X9OfA8BERUdc6aZS36Xz3rRuB0Y/mfocSADWEJfomc1xfene33GdyAmtTkKTBXTN/EgAy+rjTKkkZJHlw== - -hermes-parser@0.14.0: - version "0.14.0" - resolved "https://registry.yarnpkg.com/hermes-parser/-/hermes-parser-0.14.0.tgz#edb2e7172fce996d2c8bbba250d140b70cc1aaaf" - integrity sha512-pt+8uRiJhVlErY3fiXB3gKhZ72RxM6E1xRMpvfZ5n6Z5TQKQQXKorgRCRzoe02mmvLKBJFP5nPDGv75MWAgCTw== +hermes-parser@0.25.0, hermes-parser@^0.25.0: + version "0.25.0" + resolved "https://registry.yarnpkg.com/hermes-parser/-/hermes-parser-0.25.0.tgz#634934533a956e392ae0988421e4b0315e30351e" + integrity sha512-CeAdhgMfbZcrYh+HHKVKsj7VNhOTr0jiLFlcVVoRORbZ/Nr4J90WjEq2CZoahgH15/DYY/VBhuLqpIzJqfdBEQ== dependencies: - hermes-estree "0.14.0" - -hermes-parser@^0.22.0: - version "0.22.0" - resolved "https://registry.yarnpkg.com/hermes-parser/-/hermes-parser-0.22.0.tgz#fc8e0e6c7bfa8db85b04c9f9544a102c4fcb4040" - integrity sha512-gn5RfZiEXCsIWsFGsKiykekktUoh0PdFWYocXsUdZIyWSckT6UIyPcyyUIPSR3kpnELWeK3n3ztAse7Mat6PSA== - dependencies: - hermes-estree "0.22.0" + hermes-estree "0.25.0" ignore@^5.2.0, ignore@^5.3.1: version "5.3.2" @@ -2665,10 +2653,10 @@ monaco-editor-webpack-plugin@^7.1.0: dependencies: loader-utils "^2.0.2" -monaco-editor@^0.34.1: - version "0.34.1" - resolved "https://registry.yarnpkg.com/monaco-editor/-/monaco-editor-0.34.1.tgz#1b75c4ad6bc4c1f9da656d740d98e0b850a22f87" - integrity sha512-FKc80TyiMaruhJKKPz5SpJPIjL+dflGvz4CpuThaPMc94AyN7SeC9HQ8hrvaxX7EyHdJcUY5i4D0gNyJj1vSZQ== +monaco-editor@^0.52.0: + version "0.52.0" + resolved "https://registry.yarnpkg.com/monaco-editor/-/monaco-editor-0.52.0.tgz#d47c02b191eae208d68878d679b3ee7456031be7" + integrity sha512-OeWhNpABLCeTqubfqLMXGsqf6OmPU6pHM85kF3dhy6kq5hnhuVS1p3VrEW/XhWHc71P2tHyS5JFySD8mgs1crw== ms@^2.1.1, ms@^2.1.3: version "2.1.3" From cdde15efe189e8bebe227b7555e7cc95ad74deab Mon Sep 17 00:00:00 2001 From: Joseph Savona <6425824+josephsavona@users.noreply.github.com> Date: Fri, 18 Oct 2024 11:27:48 -0700 Subject: [PATCH 2/3] [compiler] InlineJSXTransform transforms jsx inside function expressions (#31282) InlineJSXTransform wasn't traversing into function expressions or object methods, so any JSX inside such functions wouldn't have gotten inlined. This PR updates to traverse nested functions to transform all JSX within a hook or component. Note that this still doesn't transform JSX outside of components or hooks, ie in standalone render helpers. --- .../src/Optimization/InlineJsxTransform.ts | 11 +++ .../compiler/inline-jsx-transform.expect.md | 96 +++++++++++++------ .../fixtures/compiler/inline-jsx-transform.js | 10 +- 3 files changed, 83 insertions(+), 34 deletions(-) diff --git a/compiler/packages/babel-plugin-react-compiler/src/Optimization/InlineJsxTransform.ts b/compiler/packages/babel-plugin-react-compiler/src/Optimization/InlineJsxTransform.ts index 396e6ad1be..89efa78469 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/Optimization/InlineJsxTransform.ts +++ b/compiler/packages/babel-plugin-react-compiler/src/Optimization/InlineJsxTransform.ts @@ -405,6 +405,17 @@ export function inlineJsxTransform( nextInstructions.push(reactElementInstruction); break; } + case 'FunctionExpression': + case 'ObjectMethod': { + inlineJsxTransform( + instr.value.loweredFunc.func, + inlineJsxTransformConfig, + ); + if (nextInstructions !== null) { + nextInstructions.push(instr); + } + break; + } default: { if (nextInstructions !== null) { nextInstructions.push(instr); diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/inline-jsx-transform.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/inline-jsx-transform.expect.md index 6dd899d5c7..2078575e83 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/inline-jsx-transform.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/inline-jsx-transform.expect.md @@ -26,11 +26,15 @@ function ParentAndRefAndKey(props) { } function ParentAndChildren(props) { + const render = () => { + return
{props.foo}
; + }; return ( - + + {render()} ); @@ -40,8 +44,8 @@ const propsToSpread = {a: 'a', b: 'b', c: 'c'}; function PropsSpread() { return ( <> - - + + ); } @@ -151,37 +155,30 @@ function ParentAndRefAndKey(props) { } function ParentAndChildren(props) { - const $ = _c2(7); + const $ = _c2(14); let t0; - if ($[0] !== props) { - t0 = { + if ($[0] !== props.foo) { + t0 = () => ({ $$typeof: Symbol.for("react.transitional.element"), - type: Child, + type: "div", ref: null, - key: "a", - props: props, - }; - $[0] = props; + key: "d", + props: { children: props.foo }, + }); + $[0] = props.foo; $[1] = t0; } else { t0 = $[1]; } + const render = t0; let t1; if ($[2] !== props) { t1 = { $$typeof: Symbol.for("react.transitional.element"), type: Child, ref: null, - key: "b", - props: { - children: { - $$typeof: Symbol.for("react.transitional.element"), - type: GrandChild, - ref: null, - key: null, - props: { className: props.foo, ...props }, - }, - }, + key: "a", + props: props, }; $[2] = props; $[3] = t1; @@ -189,21 +186,58 @@ function ParentAndChildren(props) { t1 = $[3]; } let t2; - if ($[4] !== t0 || $[5] !== t1) { + if ($[4] !== props) { t2 = { + $$typeof: Symbol.for("react.transitional.element"), + type: GrandChild, + ref: null, + key: "c", + props: { className: props.foo, ...props }, + }; + $[4] = props; + $[5] = t2; + } else { + t2 = $[5]; + } + let t3; + if ($[6] !== render) { + t3 = render(); + $[6] = render; + $[7] = t3; + } else { + t3 = $[7]; + } + let t4; + if ($[8] !== t2 || $[9] !== t3) { + t4 = { + $$typeof: Symbol.for("react.transitional.element"), + type: Child, + ref: null, + key: "b", + props: { children: [t2, t3] }, + }; + $[8] = t2; + $[9] = t3; + $[10] = t4; + } else { + t4 = $[10]; + } + let t5; + if ($[11] !== t1 || $[12] !== t4) { + t5 = { $$typeof: Symbol.for("react.transitional.element"), type: Parent, ref: null, key: null, - props: { children: [t0, t1] }, + props: { children: [t1, t4] }, }; - $[4] = t0; - $[5] = t1; - $[6] = t2; + $[11] = t1; + $[12] = t4; + $[13] = t5; } else { - t2 = $[6]; + t5 = $[13]; } - return t2; + return t5; } const propsToSpread = { a: "a", b: "b", c: "c" }; @@ -222,14 +256,14 @@ function PropsSpread() { $$typeof: Symbol.for("react.transitional.element"), type: Test, ref: null, - key: null, + key: "a", props: propsToSpread, }, { $$typeof: Symbol.for("react.transitional.element"), type: Test, ref: null, - key: null, + key: "b", props: { ...propsToSpread, a: "z" }, }, ], @@ -250,4 +284,4 @@ export const FIXTURE_ENTRYPOINT = { ``` ### Eval output -(kind: ok)
Hello world
\ No newline at end of file +(kind: ok)
Hello world
abc
\ No newline at end of file diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/inline-jsx-transform.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/inline-jsx-transform.js index 4a9d53b6f4..6fe9553dcd 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/inline-jsx-transform.js +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/inline-jsx-transform.js @@ -22,11 +22,15 @@ function ParentAndRefAndKey(props) { } function ParentAndChildren(props) { + const render = () => { + return
{props.foo}
; + }; return ( - + + {render()} ); @@ -36,8 +40,8 @@ const propsToSpread = {a: 'a', b: 'b', c: 'c'}; function PropsSpread() { return ( <> - - + + ); } From a771c2d6e3ce3d79d379444152f13c414c8fe3f9 Mon Sep 17 00:00:00 2001 From: lauren Date: Fri, 18 Oct 2024 14:33:07 -0400 Subject: [PATCH 3/3] [ci] Publish compiler weekly prereleases Adds a new weekly job for the compiler --- .../workflows/compiler_prereleases_weekly.yml | 21 +++++++++++++++++++ 1 file changed, 21 insertions(+) create mode 100644 .github/workflows/compiler_prereleases_weekly.yml diff --git a/.github/workflows/compiler_prereleases_weekly.yml b/.github/workflows/compiler_prereleases_weekly.yml new file mode 100644 index 0000000000..2be58d6126 --- /dev/null +++ b/.github/workflows/compiler_prereleases_weekly.yml @@ -0,0 +1,21 @@ +name: (Compiler) Publish Prereleases Weekly + +on: + schedule: + # At 10 minutes past 9:00 on Mon + - cron: 10 16 * * 1 + +env: + TZ: /usr/share/zoneinfo/America/Los_Angeles + +jobs: + publish_prerelease_beta: + name: Publish to Beta channel + uses: facebook/react/.github/workflows/compiler_prereleases.yml@main + with: + commit_sha: ${{ github.sha }} + release_channel: beta + dist_tag: beta + version_name: '19.0.0' + secrets: + NPM_TOKEN: ${{ secrets.NPM_TOKEN }}