Integrate React Compiler (#13826)

Author: swissspidy

.distignore

@@ -40,6 +40,7 @@ web-stories-scraper
 .npmpackagejsonlintrc.json
 .npmrc
 .nvmrc
+.oxlintrc.json
 .phpstorm.config.js
 .phpstorm.meta.php
 .phpunit.result.cache

.eslintrc

@@ -20,6 +20,7 @@
     "jsx-a11y",
     "markdown",
     "react",
+    "react-compiler",
     "react-hooks",
     "styled-components-a11y"
   ],
@@ -214,6 +215,15 @@
     "react/no-unused-prop-types": "error",
     "react/react-in-jsx-scope": "off",
     "react/self-closing-comp": "error",
+    "react-compiler/react-compiler": [
+      "error",
+      {
+        "environment": {
+          "enableTreatRefLikeIdentifiersAsRefs": true,
+          "validateRefAccessDuringRender": false
+        }
+      }
+    ],
     "import/no-extraneous-dependencies": "error",
     "import/no-unresolved": "error",
     "import/order": [
@@ -422,6 +432,7 @@
       "rules": {
         "@eslint-community/eslint-comments/require-description": "off",
         "react/prop-types": "off",
+        "react-compiler/react-compiler": "off",
         "jest/no-hooks": "off",
         "jest/no-untyped-mock-factory": "off",
         "jest/max-expects": "off",

.oxlintrc.json

@@ -0,0 +1,13 @@
+{
+  "settings": {
+    "jsdoc": {
+      "tagNamePreference": {
+        "returns": "return",
+        "yields": "yield"
+      }
+    }
+  },
+  "rules": {
+    "no-unused-vars": "off"
+  }
+}

.storybook/stories/playground/dashboard/index.js

@@ -17,7 +17,7 @@
 /**
  * External dependencies
  */
-import { useRef } from 'react';
+import { useRef, useEffect } from 'react';
 import { toId } from '@storybook/csf';
 import { Dashboard, InterfaceSkeleton } from '@googleforcreators/dashboard';
 
@@ -102,10 +102,12 @@ const getAuthors = () => Promise.resolve([{ name: 'Author', id: 1 }]);
 const useClearHash = () => {
   const isHashCleaned = useRef(false);
 
-  if (!isHashCleaned.current) {
-    window.location.hash = '/';
-    isHashCleaned.current = true;
-  }
+  useEffect(() => {
+    if (!isHashCleaned.current) {
+      window.location.hash = '/';
+      isHashCleaned.current = true;
+    }
+  }, []);
 };
 
 export const _default = {

.storybook/stories/playground/story-editor/header/buttons/preview.js

@@ -68,7 +68,7 @@ function PreviewButton() {
           </script>`
         );
       }
-    } catch (e) {
+    } catch {
       // Not interested in the error.
     }
   };

babel.config.cjs

@@ -46,6 +46,7 @@ module.exports = function (api) {
       '@babel/preset-typescript',
     ],
     plugins: [
+      ['babel-plugin-react-compiler', { target: '17' }],
       '@wordpress/babel-plugin-import-jsx-pragma',
       [
         'babel-plugin-styled-components',

package-lock.json

@@ -100,6 +100,7 @@
     "ajv-formats": "^3.0.1",
     "babel-jest": "^29.6.1",
     "babel-loader": "^9.2.1",
+    "babel-plugin-react-compiler": "0.0.0-experimental-63cca73-20250106",
     "babel-plugin-styled-components": "^2.1.4",
     "babel-plugin-transform-react-remove-prop-types": "^0.4.24",
     "browserslist": "^4.24.4",
@@ -124,6 +125,7 @@
     "eslint-plugin-oxlint": "^0.15.5",
     "eslint-plugin-prettier": "^5.2.1",
     "eslint-plugin-react": "^7.37.3",
+    "eslint-plugin-react-compiler": "0.0.0-experimental-63cca73-20250106",
     "eslint-plugin-react-hooks": "^5.1.0",
     "eslint-plugin-security": "^3.0.1",
     "eslint-plugin-styled-components-a11y": "^2.2.0",
@@ -159,6 +161,7 @@
     "postcss-syntax": "^0.36.2",
     "prettier": "^3.4.2",
     "puppeteer": "^23.11.1",
+    "react-compiler-runtime": "0.0.0-experimental-63cca73-20250106",
     "react-refresh": "^0.16.0",
     "react-test-renderer": "^17.0.2",
     "rollup": "^2.79.2",
@@ -221,9 +224,9 @@
     "lint:css:js:fix": "stylelint \"**/*.js\" --fix",
     "lint:css:css": "stylelint \"**/*.css\"",
     "lint:css:css:fix": "stylelint \"**/*.css\" --fix",
-    "lint:js": "oxlint && eslint .",
-    "lint:js:fix": "oxlint --fix && eslint --fix .",
-    "lint:js:report": "oxlint && eslint --output-file build/lint-js-report.json --format json .",
+    "lint:js": "oxlint -c=.oxlintrc.json --tsconfig=tsconfig.json --ignore-pattern=@types --react-perf-plugin && eslint .",
+    "lint:js:fix": "oxlint --fix -c=.oxlintrc.json --tsconfig=tsconfig.json --ignore-pattern=@types --react-perf-plugin && eslint --fix .",
+    "lint:js:report": "oxlint -c=.oxlintrc.json --tsconfig=tsconfig.json --ignore-pattern=@types --react-perf-plugin && eslint --output-file build/lint-js-report.json --format json .",
     "lint:package-json": "npmPkgJsonLint .",
     "lint:php": "composer phpcs",
     "lint:php:fix": "composer phpcbf",

package.json

@@ -51,13 +51,13 @@ const useStoryApi = () => {
   const [state, dispatch] = useReducer(storyReducer, defaultStoriesState);
   const { apiCallbacks } = useConfig();
 
-  const isMounted = useRef(false);
+  const isMountedRef = useRef(false);
 
   useEffect(() => {
-    isMounted.current = true;
+    isMountedRef.current = true;
 
     return () => {
-      isMounted.current = false;
+      isMountedRef.current = false;
     };
   }, []);
 
@@ -78,7 +78,7 @@ const useStoryApi = () => {
         const { stories, fetchedStoryIds, totalPages, totalStoriesByStatus } =
           await apiCallbacks.fetchStories(queryParams);
 
-        if (!isMounted.current) {
+        if (!isMountedRef.current) {
           return;
         }
 

packages/dashboard/src/app/api/useStoryApi.js

@@ -48,7 +48,7 @@ function TemplateGridView({
   const { isRTL, apiCallbacks } = useConfig();
   const containerRef = useRef();
   const gridRef = useRef();
-  const itemRefs = useRef({});
+  const itemsRef = useRef({});
   const [activeGridItemId, setActiveGridItemId] = useState(null);
   const { handleDetailsToggle, createStoryFromTemplate } =
     templateActions || {};
@@ -58,7 +58,7 @@ function TemplateGridView({
   useGridViewKeys({
     containerRef,
     gridRef,
-    itemRefs,
+    itemRefs: itemsRef,
     isRTL,
     currentItemId: activeGridItemId,
     items: filteredTemplates,
@@ -69,7 +69,7 @@ function TemplateGridView({
   // for legibility, it's based on the FOCUS_TEMPLATE_CLASS
   useEffect(() => {
     if (activeGridItemId) {
-      itemRefs.current?.[activeGridItemId]
+      itemsRef.current?.[activeGridItemId]
         ?.querySelector(`.${FOCUS_TEMPLATE_CLASS}`)
         ?.focus();
     }
@@ -97,7 +97,7 @@ function TemplateGridView({
             key={slug}
             posterSrc={posterSrc}
             ref={(el) => {
-              itemRefs.current[id] = el;
+              itemsRef.current[id] = el;
             }}
             slug={slug}
             status={status}

packages/dashboard/src/app/views/exploreTemplates/content/templateGridView.js

@@ -113,7 +113,7 @@ function StoriesView({ loading, storyActions, stories, view }) {
   const handleOnDeleteStory = useCallback(() => {
     trackEvent('delete_story');
     storyActions.trashStory(activeStory);
-    setFocusedStory({ id: activeStory.id, isDeleted: true });
+    setFocusedStory({ id: activeStory?.id, isDeleted: true });
     setActiveDialog('');
   }, [storyActions, activeStory]);
 
@@ -162,6 +162,11 @@ function StoriesView({ loading, storyActions, stories, view }) {
     [showSnackbar]
   );
 
+  const handleCloseConfirmDialog = useCallback(() => {
+    setFocusedStory({ id: activeStory?.id });
+    setActiveDialog('');
+  }, [activeStory]);
+
   const menuItems = STORY_CONTEXT_MENU_ITEMS.map((item) => {
     switch (item?.value) {
       case STORY_CONTEXT_MENU_ACTIONS.COPY_STORY_LINK:
@@ -257,10 +262,7 @@ function StoriesView({ loading, storyActions, stories, view }) {
           isOpen
           contentLabel={__('Dialog to confirm deleting a story', 'web-stories')}
           title={__('Delete Story', 'web-stories')}
-          onClose={() => {
-            setFocusedStory({ id: activeStory.id });
-            setActiveDialog('');
-          }}
+          onClose={handleCloseConfirmDialog}
           secondaryText={__('Cancel', 'web-stories')}
           secondaryRest={{
             ['aria-label']: sprintf(