Yuyz0112 · TechQuery · Jul 28, 2024
diff --git a/preview-ui/.parcelrc b/preview-ui/.parcelrc
@@ -0,0 +1,12 @@
+{
+  "extends": "@parcel/config-default",
+  "resolvers": [
+    "@parcel/resolver-glob",
+    "..."
+  ],
+  "transformers": {
+    "url:*": [
+      "@parcel/transformer-raw"
+    ]
+  }
+}
diff --git a/preview-ui/index.html b/preview-ui/index.html
@@ -3,14 +3,14 @@
 
 <head>
   <meta charset="UTF-8" />
-  <link rel="icon" type="image/svg+xml" href="/logo.png" />
+  <link rel="icon" href="public/logo.png" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <title>Dewhale UI preview</title>
 </head>
 
 <body>
   <div id="root"></div>
-  <script type="module" src="/src/main.jsx"></script>
+  <script type="module" src="src/main.jsx"></script>
 </body>
 
 </html>
diff --git a/preview-ui/package.json b/preview-ui/package.json
@@ -4,10 +4,11 @@
   "version": "0.0.0",
   "type": "module",
   "scripts": {
-    "dev": "vite",
-    "build": "vite build",
+    "clean": "rm -rf .parcel-cache/ dist/",
+    "dev": "npm run clean  &&  parcel index.html",
+    "build": "npm run clean  &&  parcel build index.html --public-url .",
     "lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0",
-    "preview": "vite preview"
+    "preview": "serve dist/"
   },
   "dependencies": {
     "@nivo/bar": "^0.84.0",
@@ -53,22 +54,27 @@
     "react-day-picker": "^8.9.1",
     "react-dom": "^18.2.0",
     "react-resizable-panels": "^1.0.5",
+    "react-router-dom": "^6.25.1",
     "shiki": "^0.14.7",
     "tailwind-merge": "^2.1.0",
     "tailwindcss-animate": "^1.0.7",
     "vaul": "^0.8.0"
   },
   "devDependencies": {
+    "@parcel/config-default": "~2.12.0",
+    "@parcel/resolver-glob": "~2.12.0",
+    "@parcel/transformer-raw": "~2.12.0",
     "@types/react": "^18.2.43",
     "@types/react-dom": "^18.2.17",
-    "@vitejs/plugin-react": "^4.2.1",
     "autoprefixer": "^10.4.16",
     "eslint": "^8.55.0",
     "eslint-plugin-react": "^7.33.2",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react-refresh": "^0.4.5",
+    "parcel": "~2.12.0",
     "postcss": "^8.4.32",
-    "tailwindcss": "^3.4.0",
-    "vite": "^5.0.8"
+    "process": "^0.11.10",
+    "serve": "^14.2.3",
+    "tailwindcss": "^3.4.0"
   }
 }
diff --git a/preview-ui/pnpm-lock.yaml b/preview-ui/pnpm-lock.yaml
diff --git a/preview-ui/src/App.jsx b/preview-ui/src/App.jsx
@@ -1,31 +1,54 @@
 import { useEffect, useState } from "react";
 import { CopyToClipboard } from "react-copy-to-clipboard";
-import { Button } from "@/components/ui/button";
+import { Button } from "@/components/ui/button.jsx";
 import ErrorBoundary from "./ErrorBoundary.jsx";
-import Preview from "./Preview.jsx";
-import previewStr from "./Preview.jsx?raw";
+// @ts-ignore
+import previewURL from "url:./Preview.jsx";
 import { getHighlighter, setCDN } from "shiki";
+import { createHashRouter, RouterProvider } from "react-router-dom";
+
+import { generateRoutes } from "./lib/utils.js";
+// @ts-ignore
+import * as pages from "./pages/**/*.jsx";
+
+const router = createHashRouter(
+  [...generateRoutes(pages)].map(({ path, component: Tag }) => ({
+    path,
+    element: <Tag />,
+  }))
+);
 
 export default function Home() {
   const [showCanvas, setShowCanvas] = useState(true);
   const [copied, setCopied] = useState(false);
+  const [sourceCode, setSourceCode] = useState('')
   const [code, setCode] = useState("");
 
-  function setCodeHighlighter() {
+  async function setCodeHighlighter() {
     setCDN("https://cdn.jsdelivr.net/npm/shiki");
-    getHighlighter({ theme: "one-dark-pro", langs: ["jsx"] })
-      .then((h) => {
-        const html = h.codeToHtml(previewStr, { lang: "jsx" });
-        setCode(html);
-      })
-      .catch((error) => {
-        setCode(error);
+
+    try {
+      const { codeToHtml } = await getHighlighter({
+        theme: "one-dark-pro",
+        langs: ["jsx"],
       });
+      const response = await fetch(previewURL);
+      const previewStr = await response.text();
+
+      setSourceCode(previewStr)
+
+      const html = codeToHtml(previewStr, { lang: "jsx" });
+
+      setCode(html);
+    } catch (error) {
+      setCode(error);
+    }
   }
 
   useEffect(() => {
     setCodeHighlighter();
   }, []);
+
   return (
     <main className="vx-dev-wrapper relative">
       <div className="flex justify-end p-1">
@@ -36,13 +59,13 @@ export default function Home() {
       {showCanvas ? (
         <div className="rounded-lg border border-black/5 bg-white shadow-[0px_1px_2px_0px_rgba(0,_0,_0,_0.04)] mx-1 p-1">
           <ErrorBoundary>
-            <Preview />
+            <RouterProvider router={router} />
           </ErrorBoundary>
         </div>
       ) : (
         <pre className="bg-gray-100 mx-1 p-1 rounded overflow-auto relative text-xs">
           <CopyToClipboard
-            text={previewStr}
+            text={sourceCode}
             onCopy={() => {
               setCopied(true);
               setTimeout(() => setCopied(false), 2000);
@@ -52,7 +75,7 @@ export default function Home() {
               {copied ? "Copied!" : "Copy Code"}
             </Button>
           </CopyToClipboard>
-          <div dangerouslySetInnerHTML={{ __html: code }}></div>
+          <div dangerouslySetInnerHTML={{ __html: code }} />
         </pre>
       )}
     </main>

diff --git a/preview-ui/src/lib/utils.js b/preview-ui/src/lib/utils.js
@@ -1,6 +1,20 @@
-import { clsx } from "clsx"
-import { twMerge } from "tailwind-merge"
+import { clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
 
 export function cn(...inputs) {
-  return twMerge(clsx(inputs))
+  return twMerge(clsx(inputs));
+}
+
+export function* generateRoutes(globModules, path = "") {
+  for (const key in globModules) {
+    const value = globModules[key];
+
+    if (key === "default" && typeof value === "function")
+      yield {
+        path: path.replace(/\/index$/i, "/"),
+        component: value,
+      };
+    else if (value != null && typeof value === "object")
+      yield* generateRoutes(value, `${path}/${key}`);
+  }
 }
diff --git a/preview-ui/src/pages/index.jsx b/preview-ui/src/pages/index.jsx
@@ -0,0 +1,5 @@
+export default () => (
+  <div>
+    <h1>Index page</h1>
+  </div>
+);
diff --git a/preview-ui/src/pages/user/index.jsx b/preview-ui/src/pages/user/index.jsx
@@ -0,0 +1,5 @@
+export default () => (
+  <div>
+    <h1>User page</h1>
+  </div>
+);
diff --git a/preview-ui/tsconfig.json b/preview-ui/tsconfig.json
@@ -1,6 +1,9 @@
 {
   "compilerOptions": {
-    "baseUrl": ".",
+    "checkJs": true,
+    "module": "Node16",
+    "moduleResolution": "Node16",
+    "jsx": "react-jsx",
     "paths": {
       "@/*": ["./src/*"]
     }

diff --git a/preview-ui/vite.config.js b/preview-ui/vite.config.js