Build with React Compiler (#1173)

.changeset/rotten-buckets-explode.md

@@ -0,0 +1,6 @@
+---
+'@keystatic/core': patch
+'@keystar/ui': patch
+---
+
+Build with React Compiler

.eslintrc.js

@@ -120,7 +120,17 @@ module.exports = {
       },
     ],
     'react/no-unknown-property': OFF,
-    'react-compiler/react-compiler': ERROR,
+    'react-compiler/react-compiler': [
+      ERROR,
+      {
+        reportableLevels: new Set([
+          'InvalidJS',
+          'InvalidReact',
+          // uncomment if you want to see these cases
+          // 'CannotPreserveMemoization',
+        ]),
+      },
+    ],
   },
   overrides: [
     {

babel.config.json

@@ -21,5 +21,16 @@
     "@babel/plugin-transform-runtime",
     "@babel/plugin-proposal-explicit-resource-management",
     ["@babel/plugin-transform-private-property-in-object", { "loose": true }]
+  ],
+  "overrides": [
+    {
+      "test": ["packages/keystatic/src/**/*", "design-system/pkg/src/**/*"],
+      "plugins": [
+        [
+          "babel-plugin-react-compiler",
+          { "runtimeModule": "#react-compiler-runtime" }
+        ]
+      ]
+    }
   ]
 }

design-system/pkg/package.json

@@ -1585,7 +1585,8 @@
     }
   },
   "imports": {
-    "#test-utils": "./src/test-utils/index.ts"
+    "#test-utils": "./src/test-utils/index.ts",
+    "#react-compiler-runtime": "./src/react-compiler-runtime.ts"
   },
   "preconstruct": {
     "entrypoints": [

design-system/pkg/src/button/ButtonGroup.tsx

@@ -9,8 +9,10 @@ import {
   ForwardedRef,
   forwardRef,
   ForwardRefExoticComponent,
+  MutableRefObject,
+  ReactNode,
   Ref,
-  useCallback,
+  useMemo,
   useRef,
 } from 'react';
 
@@ -30,39 +32,14 @@ import {
 
 import { ButtonGroupProps } from './types';
 
-function consumeForReactTooling(..._vals: unknown[]) {}
-
-/**
- * Handles overflow for a grouping of buttons whose actions are related to each
- * other.
- */
-export const ButtonGroup: ForwardRefExoticComponent<
-  ButtonGroupProps & { ref?: Ref<HTMLDivElement> }
-> = forwardRef(function ButtonGroup(
-  props: ButtonGroupProps,
-  forwardedRef: ForwardedRef<HTMLDivElement>
+function getCheckForOverflow(
+  domRef: MutableRefObject<HTMLDivElement | null>,
+  orientation: string,
+  _scale: string,
+  setHasOverflow: (value: () => Generator<any, void, unknown>) => void,
+  _children: ReactNode
 ) {
-  let { scale } = useProvider();
-  props = useProviderProps(props);
-  props = useSlotProps(props, 'buttonGroup');
-
-  let {
-    align = 'start',
-    children,
-    isDisabled,
-    orientation = 'horizontal',
-    ...otherProps
-  } = props;
-
-  let styleProps = useStyleProps(otherProps);
-  let domRef = useObjectRef(forwardedRef);
-  let [hasOverflow, setHasOverflow] = useValueEffect(false);
-
-  // Avoid widows, horizontal orientations may switch to vertical when there
-  // isn't enough space for all buttons in a single row. There's no "wrap"
-  // event, so we have to measure.
-  let checkForOverflow = useCallback(() => {
-    consumeForReactTooling(children, scale);
+  return () => {
     let computeHasOverflow = () => {
       if (domRef.current && orientation === 'horizontal') {
         let buttonGroupChildren = Array.from(
@@ -92,6 +69,46 @@ export const ButtonGroup: ForwardRefExoticComponent<
         yield computeHasOverflow();
       });
     }
+  };
+}
+
+/**
+ * Handles overflow for a grouping of buttons whose actions are related to each
+ * other.
+ */
+export const ButtonGroup: ForwardRefExoticComponent<
+  ButtonGroupProps & { ref?: Ref<HTMLDivElement> }
+> = forwardRef(function ButtonGroup(
+  props: ButtonGroupProps,
+  forwardedRef: ForwardedRef<HTMLDivElement>
+) {
+  let { scale } = useProvider();
+  props = useProviderProps(props);
+  props = useSlotProps(props, 'buttonGroup');
+
+  let {
+    align = 'start',
+    children,
+    isDisabled,
+    orientation = 'horizontal',
+    ...otherProps
+  } = props;
+
+  let styleProps = useStyleProps(otherProps);
+  let domRef = useObjectRef(forwardedRef);
+  let [hasOverflow, setHasOverflow] = useValueEffect(false);
+
+  // Avoid widows, horizontal orientations may switch to vertical when there
+  // isn't enough space for all buttons in a single row. There's no "wrap"
+  // event, so we have to measure.
+  let checkForOverflow = useMemo(() => {
+    return getCheckForOverflow(
+      domRef,
+      orientation,
+      scale,
+      setHasOverflow,
+      children
+    );
   }, [domRef, orientation, scale, setHasOverflow, children]);
 
   // There are two main reasons we need to remeasure:

design-system/pkg/src/list-view/ListView.tsx

@@ -52,7 +52,20 @@ const ROW_HEIGHTS = {
   },
 } as const;
 
-function consumeValueForReactTooling(_val: unknown) {}
+function createLayout<T>(
+  collator: Intl.Collator,
+  scale: 'medium' | 'large',
+  density: keyof typeof ROW_HEIGHTS,
+  isEmpty: boolean,
+  _overflowMode: string | undefined
+) {
+  return new ListLayout<T>({
+    estimatedRowHeight: ROW_HEIGHTS[density][scale],
+    padding: 0,
+    collator,
+    loaderHeight: isEmpty ? undefined : ROW_HEIGHTS[density][scale],
+  });
+}
 
 function useListLayout<T>(
   state: ListState<T>,
@@ -63,13 +76,7 @@ function useListLayout<T>(
   let collator = useCollator({ usage: 'search', sensitivity: 'base' });
   let isEmpty = state.collection.size === 0;
   let layout = useMemo(() => {
-    consumeValueForReactTooling(overflowMode);
-    return new ListLayout<T>({
-      estimatedRowHeight: ROW_HEIGHTS[density][scale],
-      padding: 0,
-      collator,
-      loaderHeight: isEmpty ? undefined : ROW_HEIGHTS[density][scale],
-    });
+    return createLayout<T>(collator, scale, density, isEmpty, overflowMode);
   }, [collator, scale, density, isEmpty, overflowMode]);
 
   layout.collection = state.collection;

design-system/pkg/src/react-compiler-runtime.ts

@@ -0,0 +1,17 @@
+import { useState } from 'react';
+
+const $empty = Symbol.for('react.memo_cache_sentinel');
+
+export function c(size: number) {
+  // eslint-disable-next-line react-compiler/react-compiler
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  return useState(() => {
+    const $ = new Array(size);
+    for (let ii = 0; ii < size; ii++) {
+      $[ii] = $empty;
+    }
+    // @ts-ignore
+    $[$empty] = true;
+    return $;
+  })[0];
+}

design-system/pkg/src/typography/text/useTextStyles.ts

@@ -49,7 +49,9 @@ export function useTextStyles(
     overflow && overflowMap[overflow],
     trimStyles,
   ];
-
+  // the compiler ESLint plugin complains that "Hooks may not be referenced as normal values, they must be called."
+  // which this is definitely not doing, pretty sure it's a bug that's been fixed in react main
+  // eslint-disable-next-line react-compiler/react-compiler
   return useStyleProps({
     ...otherProps,
     UNSAFE_className: [

dev-projects/next-app/keystatic.config.tsx

@@ -281,6 +281,7 @@ export default config({
       path: 'single-file-posts/**',
       slugField: 'title',
       format: { contentField: 'content' },
+      entryLayout: 'content',
       schema: {
         title: fields.slug({ name: { label: 'Title' } }),
         content: fields.document({

dev-projects/next-app/package.json

@@ -4,7 +4,7 @@
   "license": "MIT",
   "private": true,
   "scripts": {
-    "build": "next build",
+    "build": "cd ../.. && pnpm preconstruct build && cd dev-projects/next-app && next build",
     "dev": "next dev",
     "start": "next start"
   },

package.json

@@ -59,14 +59,15 @@
     "@types/node": "16.11.13",
     "@typescript-eslint/eslint-plugin": "^5.29.0",
     "@typescript-eslint/parser": "^5.29.0",
+    "babel-plugin-react-compiler": "^0.0.0-experimental-938cd9a-20240601",
     "cross-env": "^7.0.3",
     "eslint": "^8.18.0",
     "eslint-config-next": "^12.1.6",
     "eslint-config-prettier": "^8.5.0",
     "eslint-plugin-import": "^2.26.0",
     "eslint-plugin-jest": "^26.5.3",
     "eslint-plugin-react": "^7.30.0",
-    "eslint-plugin-react-compiler": "^0.0.0-experimental-c8b3f72-20240517",
+    "eslint-plugin-react-compiler": "^0.0.0-experimental-51a85ea-20240601",
     "eslint-plugin-react-hooks": "^4.6.0",
     "jest": "^30.0.0-alpha.2",
     "jest-environment-jsdom": "^30.0.0-alpha.2",

packages/keystatic/package.json

@@ -281,6 +281,7 @@
       "default": "./src/component-blocks/cloud-image-preview.tsx"
     },
     "#markdoc": "./src/markdoc.js",
-    "#base64": "./src/base64.ts"
+    "#base64": "./src/base64.ts",
+    "#react-compiler-runtime": "./src/react-compiler-runtime.ts"
   }
 }