Update on "compiler: ValidateNoRefInRender detects writes of refs"

Improves ValidateNoRefAccessInRender, detecting modifications of refs during render.

Fixes #29161

[ghstack-poisoned]

.eslintrc.js

@@ -486,6 +486,7 @@ module.exports = {
     $ReadOnlyArray: 'readonly',
     $ArrayBufferView: 'readonly',
     $Shape: 'readonly',
+    ConsoleTask: 'readonly', // TOOD: Figure out what the official name of this will be.
     ReturnType: 'readonly',
     AnimationFrameID: 'readonly',
     // For Flow type annotation. Only `BigInt` is valid at runtime.

.git-blame-ignore-revs

@@ -0,0 +1 @@
+c998bb1ed4b3285398c9c7797135d3f060243c6a

.github/workflows/compiler-typescript.yml

@@ -24,6 +24,25 @@ jobs:
         run: echo "matrix=$(find packages -mindepth 1 -maxdepth 1 -type d | sed 's!packages/!!g' | tr '\n' ',' | sed s/.$// | jq -Rsc '. / "," - [""]')" >> $GITHUB_OUTPUT
 
   # Hardcoded to improve parallelism for babel-plugin-react-compiler
+  prettier:
+    name: Run prettier
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 18.x
+          cache: "yarn"
+          cache-dependency-path: compiler/yarn.lock
+      - name: Restore cached node_modules
+        uses: actions/cache@v4
+        with:
+          path: "**/node_modules"
+          key: ${{ runner.arch }}-${{ runner.os }}-modules-${{ hashFiles('compiler/**/yarn.lock') }}
+      - run: yarn install --frozen-lockfile
+      - run: yarn prettier:ci
+
+  # Hardcoded to improve parallelism
   lint:
     name: Lint babel-plugin-react-compiler
     runs-on: ubuntu-latest
@@ -40,10 +59,9 @@ jobs:
           path: "**/node_modules"
           key: ${{ runner.arch }}-${{ runner.os }}-modules-${{ hashFiles('compiler/**/yarn.lock') }}
       - run: yarn install --frozen-lockfile
-      - run: yarn workspace babel-plugin-react-compiler prettier:ci
       - run: yarn workspace babel-plugin-react-compiler lint
 
-  # Hardcoded to improve parallelism for babel-plugin-react-compiler
+  # Hardcoded to improve parallelism
   jest:
     name: Jest babel-plugin-react-compiler
     runs-on: ubuntu-latest

compiler/packages/babel-plugin-react-compiler/.eslintrc.js → compiler/.eslintrc.js

@@ -82,11 +82,12 @@ module.exports = {
     ],
     "@typescript-eslint/array-type": ["error", { default: "generic" }],
     "@typescript-eslint/triple-slash-reference": "off",
+    "@typescript-eslint/no-var-requires": "off"
   },
   parser: "@typescript-eslint/parser",
   plugins: ["@typescript-eslint"],
   root: true,
-  ignorePatterns: ["src/__tests__/**/*", "src/**/*.d.ts", "dist/**/*"],
+  ignorePatterns: ["**/__tests__/**/*", "**/*.d.ts", "**/dist/**/*"],
   env: {
     node: true,
   },

compiler/.prettierignore

@@ -1,12 +1,21 @@
-.fixtures/
-bench/
 **/dist
 **/__tests__/fixtures/**/*.expect.md
 **/__tests__/fixtures/**/*.flow.js
 **/.next
-test262/
-*.md
+
+crates
+apps/playground/public
+
+**/LICENSE
+.*
+*.md*
 *.json
 *.css
 *.webmanifest
-packages/js-fuzzer
+*.map
+*.sh
+*.txt
+*.ico
+*.svg
+*.lock
+*.toml

compiler/.prettierrc.js

@@ -0,0 +1,9 @@
+const config = {
+  requirePragma: false,
+  parser: "babel-ts",
+  semi: true,
+  singleQuote: false,
+  trailingComma: "es5"
+}
+
+module.exports = config;

compiler/apps/playground/__tests__/e2e/page.spec.ts

@@ -28,7 +28,6 @@ test("editor should compile successfully", async ({ page }) => {
   });
 
   // User input from hash compiles
-  await page.getByRole("button", { name: /JS/ }).click();
   await page.screenshot({
     fullPage: true,
     path: "test-results/01-show-js-before.png",

compiler/apps/playground/babel.config.js

@@ -9,20 +9,13 @@ module.exports = function (api) {
   api.cache(true);
   return {
     presets: ["next/babel"],
-    overrides: [
-      {
-        test: /^((?!node_modules).)*$/g,
-        plugins: [
-          [
-            "babel-plugin-react-compiler",
-            {
-              compilationMode: "infer",
-              panicThreshold: "NONE",
-              runtimeModule: "react-compiler-runtime",
-            },
-          ],
-        ],
-      },
+    plugins: [
+      [
+        "babel-plugin-react-compiler",
+        {
+          runtimeModule: "react-compiler-runtime",
+        },
+      ],
     ],
   };
 };

compiler/apps/playground/colors.js

@@ -5,7 +5,6 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-
 /**
  * Sync from <https://github.com/reactjs/reactjs.org/blob/main/beta/colors.js>.
  */

compiler/apps/playground/components/Editor/EditorImpl.tsx

@@ -43,7 +43,7 @@ import {
 } from "./Output";
 
 function parseFunctions(
-  source: string,
+  source: string
 ): Array<
   NodePath<
     t.FunctionDeclaration | t.ArrowFunctionExpression | t.FunctionExpression
@@ -148,7 +148,7 @@ function isHookName(s: string): boolean {
 }
 
 function getReactFunctionType(
-  id: NodePath<t.Identifier | null | undefined>,
+  id: NodePath<t.Identifier | null | undefined>
 ): ReactFunctionType {
   if (id && id.node && id.isIdentifier()) {
     if (isHookName(id.node.name)) {
@@ -189,7 +189,7 @@ function compile(source: string): CompilerOutput {
             severity: ErrorSeverity.Todo,
             loc: fn.node.loc ?? null,
             suggestions: null,
-          }),
+          })
         );
         continue;
       }
@@ -205,7 +205,7 @@ function compile(source: string): CompilerOutput {
         "_c",
         null,
         null,
-        null,
+        null
       )) {
         const fnName = fn.node.id?.name ?? null;
         switch (result.kind) {
@@ -274,7 +274,7 @@ function compile(source: string): CompilerOutput {
           reason: `Unexpected failure when transforming input! ${err}`,
           loc: null,
           suggestions: null,
-        }),
+        })
       );
     }
   }
@@ -291,7 +291,7 @@ export default function Editor() {
   const { enqueueSnackbar } = useSnackbar();
   const compilerOutput = useMemo(
     () => compile(deferredStore.source),
-    [deferredStore.source],
+    [deferredStore.source]
   );
 
   useMountEffect(() => {
@@ -305,7 +305,7 @@ export default function Editor() {
         ...createMessage(
           "Bad URL - fell back to the default Playground.",
           MessageLevel.Info,
-          MessageSource.Playground,
+          MessageSource.Playground
         ),
       });
       mountStore = defaultStore;
@@ -319,9 +319,7 @@ export default function Editor() {
   return (
     <>
       <div className="relative flex basis top-14">
-        <div
-          className={clsx("relative sm:basis-1/4")}
-        >
+        <div className={clsx("relative sm:basis-1/4")}>
           <Input
             errors={
               compilerOutput.kind === "err" ? compilerOutput.error.details : []

compiler/apps/playground/components/Editor/Input.tsx

@@ -76,7 +76,7 @@ export default function Input({ errors }: Props) {
       allowSyntheticDefaultImports: true,
     };
     monaco.languages.typescript.javascriptDefaults.setCompilerOptions(
-      tscOptions,
+      tscOptions
     );
     monaco.languages.typescript.typescriptDefaults.setCompilerOptions({
       ...tscOptions,

compiler/apps/playground/components/Editor/Output.tsx

@@ -106,7 +106,7 @@ async function tabify(source: string, compilerOutput: CompilerOutput) {
         output={text}
         diff={lastPassOutput ?? null}
         showInfoPanel={true}
-      ></TextTabContent>,
+      ></TextTabContent>
     );
     lastPassOutput = text;
   }
@@ -122,7 +122,7 @@ async function tabify(source: string, compilerOutput: CompilerOutput) {
         output={code}
         diff={null}
         showInfoPanel={false}
-      ></TextTabContent>,
+      ></TextTabContent>
     );
     if (sourceMapUrl) {
       reorderedTabs.set(
@@ -133,7 +133,7 @@ async function tabify(source: string, compilerOutput: CompilerOutput) {
             className="w-full h-monaco_small sm:h-monaco"
             title="Generated Code"
           />
-        </>,
+        </>
       );
     }
   }
@@ -145,16 +145,16 @@ async function tabify(source: string, compilerOutput: CompilerOutput) {
 
 async function codegen(
   ast: t.Program,
-  source: string,
+  source: string
 ): Promise<{ code: any; sourceMapUrl: string | null }> {
   const generated = generate(
     ast,
     { sourceMaps: true, sourceFileName: "input.js" },
-    source,
+    source
   );
   const sourceMapUrl = getSourceMapUrl(
     generated.code,
-    JSON.stringify(generated.map),
+    JSON.stringify(generated.map)
   );
   const codegenOutput = await prettier.format(generated.code, {
     semi: true,
@@ -172,28 +172,44 @@ function getSourceMapUrl(code: string, map: string): string | null {
   code = utf16ToUTF8(code);
   map = utf16ToUTF8(map);
   return `https://evanw.github.io/source-map-visualization/#${btoa(
-    `${code.length}\0${code}${map.length}\0${map}`,
+    `${code.length}\0${code}${map.length}\0${map}`
   )}`;
 }
 
 function Output({ store, compilerOutput }: Props) {
-  const [tabsOpen, setTabsOpen] = useState<Set<string>>(() => new Set());
+  const [tabsOpen, setTabsOpen] = useState<Set<string>>(() => new Set(["JS"]));
   const [tabs, setTabs] = useState<Map<string, React.ReactNode>>(
-    () => new Map(),
+    () => new Map()
   );
   useEffect(() => {
     tabify(store.source, compilerOutput).then((tabs) => {
       setTabs(tabs);
     });
   }, [store.source, compilerOutput]);
 
+  const changedPasses: Set<string> = new Set();
+  let lastResult: string = "";
+  for (const [passName, results] of compilerOutput.results) {
+    for (const result of results) {
+      let currResult = "";
+      if (result.kind === "hir" || result.kind === "reactive") {
+        currResult += `function ${result.fnName}\n\n${result.value}`;
+      }
+      if (currResult !== lastResult) {
+        changedPasses.add(passName);
+      }
+      lastResult = currResult;
+    }
+  }
+
   return (
     <>
       <TabbedWindow
         defaultTab="HIR"
         setTabsOpen={setTabsOpen}
         tabsOpen={tabsOpen}
         tabs={tabs}
+        changedPasses={changedPasses}
       />
       {compilerOutput.kind === "err" ? (
         <div

compiler/apps/playground/components/Editor/index.tsx

@@ -13,4 +13,4 @@ const Editor = dynamic(() => import("./EditorImpl"), {
   ssr: false,
 });
 
-export default Editor;
+export default Editor;

compiler/apps/playground/components/Editor/monacoOptions.ts

@@ -5,7 +5,6 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-
 import type { EditorProps } from "@monaco-editor/react";
 
 export const monacoOptions: Partial<EditorProps["options"]> = {

compiler/apps/playground/components/Header.tsx

@@ -50,7 +50,7 @@ export default function Header() {
         <Logo
           className={clsx(
             "w-8 h-8 text-link",
-            process.env.NODE_ENV === "development" && "text-yellow-600",
+            process.env.NODE_ENV === "development" && "text-yellow-600"
           )}
         />
         <p className="hidden select-none sm:block">React Compiler Playground</p>

compiler/apps/playground/components/Icons/IconGitHub.tsx

@@ -21,5 +21,5 @@ export const IconGitHub = memo<JSX.IntrinsicElements["svg"]>(
         <path d="M10 0a10 10 0 0 0-3.16 19.49c.5.1.68-.22.68-.48l-.01-1.7c-2.78.6-3.37-1.34-3.37-1.34-.46-1.16-1.11-1.47-1.11-1.47-.9-.62.07-.6.07-.6 1 .07 1.53 1.03 1.53 1.03.9 1.52 2.34 1.08 2.91.83.1-.65.35-1.09.63-1.34-2.22-.25-4.55-1.11-4.55-4.94 0-1.1.39-1.99 1.03-2.69a3.6 3.6 0 0 1 .1-2.64s.84-.27 2.75 1.02a9.58 9.58 0 0 1 5 0c1.91-1.3 2.75-1.02 2.75-1.02.55 1.37.2 2.4.1 2.64.64.7 1.03 1.6 1.03 2.69 0 3.84-2.34 4.68-4.57 4.93.36.31.68.92.68 1.85l-.01 2.75c0 .26.18.58.69.48A10 10 0 0 0 10 0"></path>
       </svg>
     );
-  },
+  }
 );

compiler/apps/playground/components/Logo.tsx

@@ -5,7 +5,6 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-
 // https://github.com/reactjs/reactjs.org/blob/main/beta/src/components/Logo.tsx
 
 export default function Logo(props: JSX.IntrinsicElements["svg"]) {

compiler/apps/playground/components/StoreContext.tsx

@@ -5,7 +5,6 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-
 import type { Dispatch, ReactNode } from "react";
 import { useReducer } from "react";
 import createContext from "../lib/createContext";