Merge pull request #43 from crow-fox/use-react-compiler

Use react compiler
crow-fox · May 17, 2024 · 24221fa · 24221fa
2 parents 3b451e9 + 00f90f9
commit 24221fa
Show file tree

Hide file tree

Showing 7 changed files with 89 additions and 86 deletions.
diff --git a/app/_features/color/useTailwindColorQuery.ts b/app/_features/color/useTailwindColorQuery.ts
@@ -6,7 +6,6 @@ import {
 } from "@/app/_features/color/tailwind.client";
 import { TailwindColors } from "@/app/_features/color/tailwind.server";
 import { useURLQueryParams } from "@/app/_utils/useURLQueryParams";
-import { useCallback, useMemo } from "react";
 
 export function useTailwindColorQuery(tailwindColors: TailwindColors) {
   const { getQueryValue, deleteQueries, updateQueries } = useURLQueryParams<
@@ -16,44 +15,36 @@ export function useTailwindColorQuery(tailwindColors: TailwindColors) {
   const colorName = getQueryValue("colorname") ?? "";
   const colorGrade = getQueryValue("colorgrade") ?? "";
 
-  const currentColor = useMemo(() => {
-    return findTailwindColor(
-      {
-        name: colorName,
-        grade: colorGrade,
-      },
-      tailwindColors,
-    );
-  }, [colorName, colorGrade, tailwindColors]);
-
-  const resetCurrentColor = useCallback(
-    (options: { scroll: boolean } = { scroll: true }) => {
-      deleteQueries(["colorname", "colorgrade"], options);
+  const currentColor = findTailwindColor(
+    {
+      name: colorName,
+      grade: colorGrade,
     },
-    [deleteQueries],
+    tailwindColors,
   );
 
-  const selectColor = useCallback(
-    (
-      color:
-        | {
-            name: TailwindGradedColorName;
-            grade: TailwindColorGrade;
-          }
-        | { name: TailwindSingleColorName },
-    ) => {
-      return updateQueries(
-        {
-          colorname: color.name,
-          colorgrade: "grade" in color ? color.grade : undefined,
-        },
-        {
-          scroll: false,
-        },
-      );
-    },
-    [updateQueries],
-  );
+  function resetCurrentColor(options: { scroll: boolean } = { scroll: true }) {
+    deleteQueries(["colorname", "colorgrade"], options);
+  }
+
+  function selectColor(
+    color:
+      | {
+          name: TailwindGradedColorName;
+          grade: TailwindColorGrade;
+        }
+      | { name: TailwindSingleColorName },
+  ) {
+    updateQueries(
+      {
+        colorname: color.name,
+        colorgrade: "grade" in color ? color.grade : undefined,
+      },
+      {
+        scroll: false,
+      },
+    );
+  }
 
   return {
     selectColor,

diff --git a/app/_utils/useClipboardCopy.ts b/app/_utils/useClipboardCopy.ts
@@ -1,18 +1,15 @@
-import { useCallback, useState } from "react";
+import { useState } from "react";
 
 export function useClipboardCopy() {
   const [isCopied, setIsCopied] = useState(false);
 
-  const clipboardCopy = useCallback(
-    async (text: string, delay: number = 1000) => {
-      await navigator.clipboard.writeText(text);
-      setIsCopied(true);
-      setTimeout(() => {
-        setIsCopied(false);
-      }, delay);
-    },
-    [],
-  );
+  async function clipboardCopy(text: string, delay: number = 1000) {
+    await navigator.clipboard.writeText(text);
+    setIsCopied(true);
+    setTimeout(() => {
+      setIsCopied(false);
+    }, delay);
+  }
 
   return { isCopied, clipboardCopy } as const;
 }
diff --git a/app/_utils/useURLQueryParams.ts b/app/_utils/useURLQueryParams.ts
@@ -1,6 +1,5 @@
 import { getObjectKeys } from "@/app/_utils/object";
 import { usePathname, useRouter, useSearchParams } from "next/navigation";
-import { useCallback } from "react";
 
 type Queries<T extends string> = Record<T, string | undefined>;
 
@@ -27,36 +26,33 @@ export function useURLQueryParams<T extends string>() {
   const router = useRouter();
   const pathname = usePathname();
 
-  const getQueryValue = useCallback(
-    (querykey: T) => {
-      return searchParams.get(querykey);
-    },
-    [searchParams],
-  );
+  function getQueryValue(querykey: T) {
+    return searchParams.get(querykey);
+  }
 
-  const updateQueries = useCallback(
-    (queries: Queries<T>, options: { scroll: boolean } = { scroll: true }) => {
-      const queryString = createQueryString(searchParams, queries);
-      router.push(`${pathname}?${queryString}`, {
-        scroll: options.scroll,
-      });
-    },
-    [pathname, router, searchParams],
-  );
+  function updateQueries(
+    queries: Queries<T>,
+    options: { scroll: boolean } = { scroll: true },
+  ) {
+    const queryString = createQueryString(searchParams, queries);
+    router.push(`${pathname}?${queryString}`, {
+      scroll: options.scroll,
+    });
+  }
 
-  const deleteQueries = useCallback(
-    (queryKeys: T[], options: { scroll: boolean } = { scroll: true }) => {
-      // 対象のクエリパラメーターのみ削除
-      const params = new URLSearchParams(searchParams);
-      for (const key of queryKeys) {
-        params.delete(key);
-      }
-      router.push(`${pathname}?${params.toString()}`, {
-        scroll: options.scroll,
-      });
-    },
-    [pathname, router, searchParams],
-  );
+  function deleteQueries(
+    queryKeys: T[],
+    options: { scroll: boolean } = { scroll: true },
+  ) {
+    // 対象のクエリパラメーターのみ削除
+    const params = new URLSearchParams(searchParams);
+    for (const key of queryKeys) {
+      params.delete(key);
+    }
+    router.push(`${pathname}?${params.toString()}`, {
+      scroll: options.scroll,
+    });
+  }
 
   return {
     getQueryValue,

diff --git a/bun.lockb b/bun.lockb
diff --git a/next.config.mjs b/next.config.mjs
@@ -1,6 +1,9 @@
 /** @type {import('next').NextConfig} */
 const nextConfig = {
   output: "export",
+  experimental: {
+    reactCompiler: true,
+  },
 };
 
 export default nextConfig;
diff --git a/package.json b/package.json
@@ -8,15 +8,17 @@
     "start": "serve out/",
     "lint:es": "next lint",
     "lint:markup": "markuplint 'app/**/*.tsx'",
-    "lint": "bun run lint:es && bun run lint:markup",
-    "format": "prettier --write ."
+    "lint": "bun run lint:es && bun run lint:markup && bun run lint:react",
+    "format": "prettier --write .",
+    "lint:react": "bunx react-compiler-healthcheck"
   },
   "dependencies": {
+    "babel-plugin-react-compiler": "^0.0.0-experimental-c23de8d-20240515",
     "colorjs.io": "^0.5.0",
-    "next": "14.2.2",
+    "next": "^14.3.0-canary.68",
     "next-themes": "^0.3.0",
-    "react": "^18",
-    "react-dom": "^18",
+    "react": "^19.0.0-rc-915b914b3a-20240515",
+    "react-dom": "^19.0.0-rc-915b914b3a-20240515",
     "serve": "^14.2.2",
     "server-only": "^0.0.1",
     "valibot": "^0.30.0"

diff --git a/tsconfig.json b/tsconfig.json
@@ -1,6 +1,10 @@
 {
   "compilerOptions": {
-    "lib": ["dom", "dom.iterable", "esnext"],
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ],
     "allowJs": true,
     "skipLibCheck": true,
     "strict": true,
@@ -18,9 +22,19 @@
       }
     ],
     "paths": {
-      "@/*": ["./*"]
-    }
+      "@/*": [
+        "./*"
+      ]
+    },
+    "target": "ESNext"
   },
-  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
-  "exclude": ["node_modules"]
+  "include": [
+    "next-env.d.ts",
+    "**/*.ts",
+    "**/*.tsx",
+    ".next/types/**/*.ts"
+  ],
+  "exclude": [
+    "node_modules"
+  ]
 }