chore(www): React 19 support

package.json

@@ -53,5 +53,11 @@
     "prettier-plugin-tailwindcss": "^0.6.8",
     "turbo": "^2.0.12"
   },
-  "packageManager": "[email protected]"
+  "packageManager": "[email protected]",
+  "pnpm": {
+    "overrides": {
+      "@types/react": "npm:[email protected]",
+      "@types/react-dom": "npm:[email protected]"
+    }
+  }
 }

www/package.json

@@ -40,14 +40,14 @@
     "geist": "^1.2.2",
     "hast-util-to-string": "^3.0.1",
     "lucide-react": "^0.311.0",
-    "next": "14.2.14",
+    "next": "15.0.0-rc.1",
     "next-mdx-remote": "^4.4.1",
     "next-themes": "^0.2.1",
     "npm-to-yarn": "^3.0.0",
-    "react": "18.3.1",
+    "react": "19.0.0-rc-cd22717c-20241013",
     "react-aria": "^3.33.0",
     "react-aria-components": "^1.2.1",
-    "react-dom": "18.3.1",
+    "react-dom": "19.0.0-rc-cd22717c-20241013",
     "react-resizable-panels": "^2.0.19",
     "react-stately": "^3.31.0",
     "remark-gfm": "^4.0.0",
@@ -68,8 +68,8 @@
     "@types/estree": "^1.0.6",
     "@types/mdast": "^4.0.4",
     "@types/node": "^18.17.0",
-    "@types/react": "^18.2.37",
-    "@types/react-dom": "^18.2.15",
+    "@types/react": "npm:[email protected]",
+    "@types/react-dom": "npm:[email protected]",
     "autoprefixer": "^10.4.14",
     "postcss": "^8.4.31",
     "rimraf": "^6.0.1",
@@ -79,4 +79,4 @@
     "typescript": "^5",
     "vfile": "^6.0.3"
   }
-}
+}

www/scripts/build-demos.ts

@@ -1,68 +1,68 @@
-import { existsSync, promises as fs } from "node:fs";
-import path from "path";
-import { rimraf } from "rimraf";
-import { styles } from "@/registry/styles";
-import { demos } from "@/__demos__/registry";
-
-async function buildDemos() {
-  let index = `// This file is autogenerated by scripts/build-registry.ts
-  // Do not edit this file directly.
-  import * as React from "react"
-
-  export const Index: Record<string, any> = {
-  `;
-
-  // core demos
-  index += `  core: {`;
-  for (const style of styles) {
-    index += `  "${style.name}": {`;
-
-    for (const item of demos) {
-      const resolveFiles = item.files?.map(
-        (file) => `registry/ui/${style.name}/${file}`
-      );
-      if (!resolveFiles) {
-        continue;
-      }
-      const type = "core";
-      let componentPath = `@/registry/ui/${style.name}/${type}/${item.name}`;
-      if (item.files) {
-        const files = item.files.map((file) =>
-          typeof file === "string"
-            ? { type: "registry:page", path: file }
-            : file
-        );
-        if (files?.length) {
-          componentPath = `@/registry/ui/${style.name}/${files[0].path}`;
-        }
-      }
-      index += `
-    "${item.name}": {
-      name: "${item.name}",
-      files: [${resolveFiles.map((file) => `"${file}"`)}],
-      component: React.lazy(() => import("${componentPath.replace(
-        ".tsx",
-        ""
-      )}")),
-    },`;
-    }
-
-    index += `
-  },`;
-  }
-  index += `
-  },`;
-
-  index += `
-}
-`;
-
-  const targetPath = path.join(process.cwd(), "src", "__demos__");
-  if (!existsSync(targetPath)) {
-    await fs.mkdir(targetPath, { recursive: true });
-  }
-  rimraf.sync(path.join(targetPath, "index.tsx"));
-  await fs.writeFile(path.join(targetPath, "index.tsx"), index, "utf8");
-}
-
-buildDemos();
+import { existsSync, promises as fs } from "node:fs";
+import path from "path";
+import { rimraf } from "rimraf";
+import { styles } from "@/registry/styles";
+import { demos } from "@/__demos__/registry";
+
+async function buildDemos() {
+  let index = `// This file is autogenerated by scripts/build-registry.ts
+  // Do not edit this file directly.
+  import * as React from "react"
+  
+  export const Index: Record<string, any> = {
+  `;
+
+  // core demos
+  index += `  core: {`;
+  for (const style of styles) {
+    index += `  "${style.name}": {`;
+
+    for (const item of demos) {
+      const resolveFiles = item.files?.map(
+        (file) => `registry/ui/${style.name}/${file}`
+      );
+      if (!resolveFiles) {
+        continue;
+      }
+      const type = "core";
+      let componentPath = `@/registry/ui/${style.name}/${type}/${item.name}`;
+      if (item.files) {
+        const files = item.files.map((file) =>
+          typeof file === "string"
+            ? { type: "registry:page", path: file }
+            : file
+        );
+        if (files?.length) {
+          componentPath = `@/registry/ui/${style.name}/${files[0].path}`;
+        }
+      }
+      index += `
+    "${item.name}": {
+      name: "${item.name}",
+      files: [${resolveFiles.map((file) => `"${file}"`)}],
+      component: React.lazy(() => import("${componentPath.replace(
+        ".tsx",
+        ""
+      )}")),
+    },`;
+    }
+
+    index += `
+  },`;
+  }
+  index += `
+  },`;
+
+  index += `
+}
+`;
+
+  const targetPath = path.join(process.cwd(), "src", "__demos__");
+  if (!existsSync(targetPath)) {
+    await fs.mkdir(targetPath, { recursive: true });
+  }
+  rimraf.sync(path.join(targetPath, "index.tsx"));
+  await fs.writeFile(path.join(targetPath, "index.tsx"), index, "utf8");
+}
+
+buildDemos();

www/scripts/build-registry-demos.ts

@@ -1,64 +1,64 @@
-import { existsSync, readdirSync, promises as fs } from "node:fs";
-import path from "path";
-import { rimraf } from "rimraf";
-
-async function buildRegistryDemos() {
-  let index = `
-type RegistryDemoItem = {
-  name: string;
-  files: string[];
-};
-
-type RegistryDemos =  RegistryDemoItem[];
-
-const buildDemos = (component: string, demos: string[]): RegistryDemos => {
-  return demos.map((demo) => {
-    return {
-      name: \`\${component}-\${demo}\`,
-      files: [\`core/\${component}/demos/\${demo}.tsx\`],
-    };
-  });
-};
-
-export const demos: RegistryDemos = [
-`;
-
-  const components = readdirSync(
-    path.join(process.cwd(), "src/registry/ui/default/core")
-  );
-  for (const component of components) {
-    if (
-      !existsSync(
-        path.join(
-          process.cwd(),
-          "src/registry/ui/default/core",
-          component,
-          "demos"
-        )
-      )
-    ) {
-      continue;
-    }
-    const demos = readdirSync(
-      path.join(
-        process.cwd(),
-        "src/registry/ui/default/core",
-        component,
-        "demos"
-      )
-    );
-    index += `  ...buildDemos("${component}", [${demos.map(
-      (demo) => `"${demo.replace(".tsx", "")}"`
-    )}]),\n`;
-  }
-  index += `]
-`;
-  rimraf.sync(path.join(process.cwd(), "src/__demos__/registry.ts"));
-  await fs.writeFile(
-    path.join(process.cwd(), "src/__demos__/registry.ts"),
-    index
-  );
-  console.log("✅ Done!");
-}
-
-buildRegistryDemos();
+import { existsSync, readdirSync, promises as fs } from "node:fs";
+import path from "path";
+import { rimraf } from "rimraf";
+
+async function buildRegistryDemos() {
+  let index = `
+type RegistryDemoItem = {
+  name: string;
+  files: string[];
+};
+
+type RegistryDemos =  RegistryDemoItem[];
+
+const buildDemos = (component: string, demos: string[]): RegistryDemos => {
+  return demos.map((demo) => {
+    return {
+      name: \`\${component}-\${demo}\`,
+      files: [\`core/\${component}/demos/\${demo}.tsx\`],
+    };
+  });
+};
+
+export const demos: RegistryDemos = [
+`;
+
+  const components = readdirSync(
+    path.join(process.cwd(), "src/registry/ui/default/core")
+  );
+  for (const component of components) {
+    if (
+      !existsSync(
+        path.join(
+          process.cwd(),
+          "src/registry/ui/default/core",
+          component,
+          "demos"
+        )
+      )
+    ) {
+      continue;
+    }
+    const demos = readdirSync(
+      path.join(
+        process.cwd(),
+        "src/registry/ui/default/core",
+        component,
+        "demos"
+      )
+    );
+    index += `  ...buildDemos("${component}", [${demos.map(
+      (demo) => `"${demo.replace(".tsx", "")}"`
+    )}]),\n`;
+  }
+  index += `]
+`;
+  rimraf.sync(path.join(process.cwd(), "src/__demos__/registry.ts"));
+  await fs.writeFile(
+    path.join(process.cwd(), "src/__demos__/registry.ts"),
+    index
+  );
+  console.log("✅ Done!");
+}
+
+buildRegistryDemos();