react 19にしてReactCompilerが動くように

.github/workflows/chromatic.yaml

@@ -38,7 +38,7 @@ jobs:
       - name: Install dependencies
         run: pnpm install --frozen-lockfile
 
-      - uses: chromaui/action@v11.2.0
+      - uses: chromaui/action@v11.10.2
         with:
           projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
           token: ${{ secrets.GITHUB_TOKEN }}

eslint.config.js

@@ -6,6 +6,7 @@ import tseslint from 'typescript-eslint';
 import unusedImports from 'eslint-plugin-unused-imports';
 import eslintPluginImportX from 'eslint-plugin-import-x';
 import eslintConfigPrettier from 'eslint-config-prettier';
+import eslintPluginReactCompiler from 'eslint-plugin-react-compiler';
 import vitest from '@vitest/eslint-plugin';
 
 export default tseslint.config(
@@ -27,9 +28,11 @@ export default tseslint.config(
       'react-hooks': reactHooks,
       'react-refresh': reactRefresh,
       'unused-imports': unusedImports,
+      'react-compiler': eslintPluginReactCompiler,
     },
     rules: {
       ...reactHooks.configs.recommended.rules,
+      'react-compiler/react-compiler': 'warn',
       'react-refresh/only-export-components': ['warn', { allowConstantExport: true }],
       '@typescript-eslint/no-explicit-any': 'warn',
       'unused-imports/no-unused-imports': 'error',

package.json

@@ -23,60 +23,62 @@
     "@heroicons/react": "2.1.5",
     "@internationalized/number": "3.5.3",
     "@maplibre/maplibre-gl-style-spec": "20.3.1",
-    "@tanstack/react-query": "5.55.4",
-    "@vitest/eslint-plugin": "1.1.0",
+    "@tanstack/react-query": "5.56.2",
     "maplibre-gl": "4.7.0",
-    "react": "18.3.1",
+    "react": "19.0.0-rc-206df66e-20240912",
     "react-aria": "3.34.3",
-    "react-dom": "18.3.1",
+    "react-dom": "19.0.0-rc-206df66e-20240912",
     "react-map-gl": "7.1.7",
     "react-stately": "3.32.2",
     "usehooks-ts": "3.1.0"
   },
   "devDependencies": {
-    "@chromatic-com/storybook": "1.9.0",
+    "@chromatic-com/storybook": "2.0.2",
     "@emotion/jest": "11.13.0",
     "@eslint/js": "9.10.0",
-    "@storybook/addon-essentials": "8.2.9",
-    "@storybook/addon-interactions": "8.2.9",
-    "@storybook/addon-links": "8.2.9",
-    "@storybook/addon-themes": "8.2.9",
-    "@storybook/blocks": "8.2.9",
-    "@storybook/react": "8.2.9",
-    "@storybook/react-vite": "8.2.9",
-    "@storybook/test": "8.2.9",
+    "@storybook/addon-essentials": "8.3.0",
+    "@storybook/addon-interactions": "8.3.0",
+    "@storybook/addon-links": "8.3.0",
+    "@storybook/addon-themes": "8.3.0",
+    "@storybook/blocks": "8.3.0",
+    "@storybook/react": "8.3.0",
+    "@storybook/react-vite": "8.3.0",
+    "@storybook/test": "8.3.0",
     "@tailwindcss/vite": "4.0.0-alpha.23",
     "@testing-library/react": "16.0.1",
     "@types/react": "18.3.5",
     "@types/react-dom": "18.3.0",
-    "@typescript-eslint/eslint-plugin": "8.4.0",
-    "@typescript-eslint/parser": "8.4.0",
-    "@vitejs/plugin-react-swc": "3.7.0",
-    "@vitest/browser": "2.0.5",
-    "@vitest/coverage-v8": "2.0.5",
-    "@vitest/ui": "2.0.5",
-    "chromatic": "11.7.1",
+    "@typescript-eslint/eslint-plugin": "8.5.0",
+    "@typescript-eslint/parser": "8.5.0",
+    "@vitejs/plugin-react": "4.3.1",
+    "@vitest/browser": "2.1.1",
+    "@vitest/coverage-v8": "2.1.1",
+    "@vitest/eslint-plugin": "1.1.4",
+    "@vitest/ui": "2.1.1",
+    "babel-plugin-react-compiler": "0.0.0-experimental-de2cfda-20240912",
+    "chromatic": "11.10.2",
     "clsx": "2.1.1",
     "eslint": "9.10.0",
     "eslint-config-prettier": "9.1.0",
     "eslint-import-resolver-typescript": "3.6.3",
     "eslint-plugin-import-x": "4.2.1",
+    "eslint-plugin-react-compiler": "0.0.0-experimental-75b9fd4-20240912",
     "eslint-plugin-react-hooks": "5.1.0-rc.0",
-    "eslint-plugin-react-refresh": "0.4.11",
-    "eslint-plugin-unused-imports": "4.1.3",
+    "eslint-plugin-react-refresh": "0.4.12",
+    "eslint-plugin-unused-imports": "4.1.4",
     "globals": "15.9.0",
-    "happy-dom": "15.7.3",
-    "playwright": "1.47.0",
+    "happy-dom": "15.7.4",
+    "playwright": "1.47.1",
     "plop": "4.0.1",
     "prettier": "3.3.3",
     "prettier-plugin-tailwindcss": "0.6.6",
-    "storybook": "8.2.9",
+    "storybook": "8.3.0",
     "tailwind-merge": "2.5.2",
     "tailwindcss": "4.0.0-alpha.23",
-    "typescript": "5.5.4",
-    "typescript-eslint": "8.4.0",
-    "vite": "5.4.3",
-    "vitest": "2.0.5"
+    "typescript": "5.6.2",
+    "typescript-eslint": "8.5.0",
+    "vite": "5.4.5",
+    "vitest": "2.1.1"
   },
   "packageManager": "[email protected]+sha256.0624e30eff866cdeb363b15061bdb7fd9425b17bc1bb42c22f5f4efdea21f6b3"
 }

plop-templates/component/Component.tsx.hbs

@@ -4,13 +4,13 @@ import { cn } from '~/utils/tailwindUtil';
 
 export type {{pascalCase name}}Props = {} & ComponentPropsWithoutRef<'div'>;
 
-export const {{pascalCase name}} = forwardRef<HTMLDivElement, {{pascalCase name}}Props>(
-  ({ className, children, ...props }, ref) => {
+export const {{pascalCase name}}:FC<{{pascalCase name}}Props> = ({ className, children, ...props }) => {
 
-    return (
-      <div {...props} ref={ref} className={cn('', className)}>
-        {children}
-      </div>
-    );
-  }
-);
+  return (
+    <div {...props} className={cn('', className)}>
+      {children}
+    </div>
+  );
+};
+
+{{pascalCase name}}.displayName = '{{pascalCase name}}';