Merge pull request #41 from hngngn/code-splitting

pref: code splitting

.vscode/settings.json

@@ -3,5 +3,6 @@
     {
       "mode": "auto"
     }
-  ]
+  ],
+  "prettier.configPath": "./apps/www/prettier.config.js"
 }

apps/www/package.json

@@ -7,7 +7,8 @@
     "start": "vinxi start",
     "format": "prettier -w \"./src/**/*.{js,ts,tsx,mdx}\"",
     "lint": "eslint src --ext ts,tsx --report-unused-disable-directives",
-    "build:registry": "tsx build-registry.ts"
+    "build:registry": "tsx scripts/build-registry.ts",
+    "build:contents": "tsx scripts/build-contents.ts"
   },
   "dependencies": {
     "@ark-ui/solid": "^2.0.1",

apps/www/scripts/build-contents.ts

@@ -0,0 +1,55 @@
+import fs from "fs";
+import { join } from "path";
+import { rimraf } from "rimraf";
+
+const folderPath = "./src/contents/docs";
+
+const generateContentsArray = (folderPath: string): { component: string }[] => {
+  const contentsArray: { component: string }[] = [];
+
+  fs.readdirSync(folderPath).forEach(file => {
+    const filePath = join(folderPath, file);
+
+    if (fs.statSync(filePath).isDirectory()) {
+      const subdirectoryContents = generateContentsArray(filePath);
+      contentsArray.push(...subdirectoryContents);
+    } else {
+      if (file.endsWith(".mdx")) {
+        const componentPath = filePath.replace(/src/g, "@").replace(/\\/g, "/");
+        contentsArray.push({ component: componentPath });
+      }
+    }
+  });
+
+  return contentsArray;
+};
+
+const contentsArray = generateContentsArray(folderPath);
+
+const generateRouteKey = (filePath: string): string =>
+  `/${filePath
+    .replace(/\/index\.mdx$/, "")
+    .replace(/@\/contents\//, "")
+    .replace(/\.mdx$/, "")}`;
+
+const formattedContents = contentsArray
+  .map(
+    item =>
+      `  "${generateRouteKey(item.component)}": {\n    component: lazy(() => import("${
+        item.component
+      }"))\n  },`
+  )
+  .join("\n");
+
+const fileContent = `// @ts-nocheck
+// This file is autogenerated by scripts/build-contents.ts
+// Do not edit this file directly.
+import type { Component } from "solid-js";
+import { lazy } from "solid-js";
+
+export const Contents : Record<string, Record<"component", Component<unknown>>> = {\n${formattedContents}\n};`;
+
+rimraf.sync(join(process.cwd(), "src/contents/index.ts"));
+fs.writeFileSync(join(process.cwd(), "src/contents/index.ts"), fileContent);
+
+console.log("✅ Done!");

apps/www/src/contents/index.ts

@@ -0,0 +1,140 @@
+// @ts-nocheck
+// This file is autogenerated by scripts/build-contents.ts
+// Do not edit this file directly.
+import type { Component } from "solid-js";
+import { lazy } from "solid-js";
+
+export const Contents: Record<string, Record<"component", Component<unknown>>> = {
+  "/docs/changelog": {
+    component: lazy(() => import("@/contents/docs/changelog.mdx"))
+  },
+  "/docs/cli": {
+    component: lazy(() => import("@/contents/docs/cli.mdx"))
+  },
+  "/docs/components/accordion": {
+    component: lazy(() => import("@/contents/docs/components/accordion.mdx"))
+  },
+  "/docs/components/alert-dialog": {
+    component: lazy(() => import("@/contents/docs/components/alert-dialog.mdx"))
+  },
+  "/docs/components/alert": {
+    component: lazy(() => import("@/contents/docs/components/alert.mdx"))
+  },
+  "/docs/components/badge": {
+    component: lazy(() => import("@/contents/docs/components/badge.mdx"))
+  },
+  "/docs/components/button": {
+    component: lazy(() => import("@/contents/docs/components/button.mdx"))
+  },
+  "/docs/components/card": {
+    component: lazy(() => import("@/contents/docs/components/card.mdx"))
+  },
+  "/docs/components/carousel": {
+    component: lazy(() => import("@/contents/docs/components/carousel.mdx"))
+  },
+  "/docs/components/checkbox": {
+    component: lazy(() => import("@/contents/docs/components/checkbox.mdx"))
+  },
+  "/docs/components/collapsible": {
+    component: lazy(() => import("@/contents/docs/components/collapsible.mdx"))
+  },
+  "/docs/components/combobox": {
+    component: lazy(() => import("@/contents/docs/components/combobox.mdx"))
+  },
+  "/docs/components/command": {
+    component: lazy(() => import("@/contents/docs/components/command.mdx"))
+  },
+  "/docs/components/context-menu": {
+    component: lazy(() => import("@/contents/docs/components/context-menu.mdx"))
+  },
+  "/docs/components/date-picker": {
+    component: lazy(() => import("@/contents/docs/components/date-picker.mdx"))
+  },
+  "/docs/components/dialog": {
+    component: lazy(() => import("@/contents/docs/components/dialog.mdx"))
+  },
+  "/docs/components/dropdown-menu": {
+    component: lazy(() => import("@/contents/docs/components/dropdown-menu.mdx"))
+  },
+  "/docs/components/hover-card": {
+    component: lazy(() => import("@/contents/docs/components/hover-card.mdx"))
+  },
+  "/docs/components/image": {
+    component: lazy(() => import("@/contents/docs/components/image.mdx"))
+  },
+  "/docs/components/pagination": {
+    component: lazy(() => import("@/contents/docs/components/pagination.mdx"))
+  },
+  "/docs/components/popover": {
+    component: lazy(() => import("@/contents/docs/components/popover.mdx"))
+  },
+  "/docs/components/progress": {
+    component: lazy(() => import("@/contents/docs/components/progress.mdx"))
+  },
+  "/docs/components/radio-group": {
+    component: lazy(() => import("@/contents/docs/components/radio-group.mdx"))
+  },
+  "/docs/components/select": {
+    component: lazy(() => import("@/contents/docs/components/select.mdx"))
+  },
+  "/docs/components/separator": {
+    component: lazy(() => import("@/contents/docs/components/separator.mdx"))
+  },
+  "/docs/components/sheet": {
+    component: lazy(() => import("@/contents/docs/components/sheet.mdx"))
+  },
+  "/docs/components/skeleton": {
+    component: lazy(() => import("@/contents/docs/components/skeleton.mdx"))
+  },
+  "/docs/components/switch": {
+    component: lazy(() => import("@/contents/docs/components/switch.mdx"))
+  },
+  "/docs/components/table": {
+    component: lazy(() => import("@/contents/docs/components/table.mdx"))
+  },
+  "/docs/components/tabs": {
+    component: lazy(() => import("@/contents/docs/components/tabs.mdx"))
+  },
+  "/docs/components/textarea": {
+    component: lazy(() => import("@/contents/docs/components/textarea.mdx"))
+  },
+  "/docs/components/textfield": {
+    component: lazy(() => import("@/contents/docs/components/textfield.mdx"))
+  },
+  "/docs/components/toast": {
+    component: lazy(() => import("@/contents/docs/components/toast.mdx"))
+  },
+  "/docs/components/toggle": {
+    component: lazy(() => import("@/contents/docs/components/toggle.mdx"))
+  },
+  "/docs/components/tooltip": {
+    component: lazy(() => import("@/contents/docs/components/tooltip.mdx"))
+  },
+  "/docs/components-json": {
+    component: lazy(() => import("@/contents/docs/components-json.mdx"))
+  },
+  "/docs/dark-mode": {
+    component: lazy(() => import("@/contents/docs/dark-mode.mdx"))
+  },
+  "/docs/figma": {
+    component: lazy(() => import("@/contents/docs/figma.mdx"))
+  },
+  "/docs": {
+    component: lazy(() => import("@/contents/docs/index.mdx"))
+  },
+  "/docs/installation": {
+    component: lazy(() => import("@/contents/docs/installation/index.mdx"))
+  },
+  "/docs/installation/manual": {
+    component: lazy(() => import("@/contents/docs/installation/manual.mdx"))
+  },
+  "/docs/installation/solid-start": {
+    component: lazy(() => import("@/contents/docs/installation/solid-start.mdx"))
+  },
+  "/docs/theming": {
+    component: lazy(() => import("@/contents/docs/theming.mdx"))
+  },
+  "/docs/typography": {
+    component: lazy(() => import("@/contents/docs/typography.mdx"))
+  }
+};

apps/www/src/routes/docs.tsx

@@ -4,7 +4,7 @@ import { Pager } from "@/components/pager";
 import { Sidebar } from "@/components/sidebar";
 import { TableOfContents } from "@/components/toc";
 import { badgeVariants } from "@/registry/default/ui/badge";
-import { A, useLocation, type RouteSectionProps } from "@solidjs/router";
+import { A, type RouteSectionProps } from "@solidjs/router";
 import { Show, createMemo } from "solid-js";
 import { MDXProvider } from "solid-mdx";
 import { Balancer } from "solid-wrap-balancer";
@@ -29,28 +29,26 @@ const contents = /*#__PURE__*/ import.meta.glob<
     headings: Heading[];
     frontmatter: Frontmatter;
   }
->("./docs/**/*.mdx", {
+>("../contents/docs/**/*.mdx", {
   eager: true
 });
 
-const Documents = (props: RouteSectionProps) => {
-  const location = useLocation();
-
+const DocumentLayout = (props: RouteSectionProps) => {
   const markdownData = createMemo(() => ({
     frontmatter:
       contents[
-        `.${
-          location.pathname === "/docs" || location.pathname === "/docs/installation"
-            ? location.pathname + "/index"
-            : location.pathname
+        `../contents${
+          props.location.pathname === "/docs" || props.location.pathname === "/docs/installation"
+            ? props.location.pathname + "/index"
+            : props.location.pathname
         }.mdx`
       ].frontmatter,
     headings:
       contents[
-        `.${
-          location.pathname === "/docs" || location.pathname === "/docs/installation"
-            ? location.pathname + "/index"
-            : location.pathname
+        `../contents${
+          props.location.pathname === "/docs" || props.location.pathname === "/docs/installation"
+            ? props.location.pathname + "/index"
+            : props.location.pathname
         }.mdx`
       ].headings
   }));
@@ -154,7 +152,7 @@ const Documents = (props: RouteSectionProps) => {
               <div class="max-w-full pb-12 pt-8">
                 <MDXProvider components={MDXComponent}>{props.children}</MDXProvider>
               </div>
-              <Pager slug={location.pathname} />
+              <Pager slug={props.location.pathname} />
             </div>
             <Show when={markdownData().frontmatter.toc === undefined}>
               <div class="hidden text-sm xl:block">
@@ -170,4 +168,4 @@ const Documents = (props: RouteSectionProps) => {
   );
 };
 
-export default Documents;
+export default DocumentLayout;

apps/www/src/routes/docs/[...slug].tsx

@@ -0,0 +1,16 @@
+import { Contents } from "@/contents";
+import { useLocation } from "@solidjs/router";
+import { createMemo } from "solid-js";
+
+const DocumentContent = () => {
+  const location = useLocation();
+
+  const Component = createMemo(() => {
+    const Temp = Contents[location.pathname].component;
+    return <Temp />;
+  });
+
+  return <>{Component()}</>;
+};
+
+export default DocumentContent;

apps/www/vite.config.ts

@@ -102,22 +102,5 @@ export default defineConfig({
   },
   ssr: {
     noExternal: ["@kobalte/core"]
-  },
-  build: {
-    rollupOptions: {
-      output: {
-        manualChunks(id: string) {
-          if (id.indexOf("node_modules") !== -1) {
-            const basic = id.toString().split("node_modules/")[1];
-            const sub1 = basic.split("/")[0];
-            if (sub1 !== ".pnpm") {
-              return sub1.toString();
-            }
-            const name2 = basic.split("/")[1];
-            return name2.split("@")[name2[0] === "@" ? 1 : 0].toString();
-          }
-        }
-      }
-    }
   }
 });