refactor: exclude SSG exports from bundles (#17)

lucacasonato · Oct 3, 2020 · 40374dc · 40374dc
1 parent 7ce9fbd
commit 40374dc
Show file tree

Hide file tree

Showing 5 changed files with 26 additions and 9 deletions.
diff --git a/README.md b/README.md
@@ -4,7 +4,7 @@ The Preact Framework for Deno. Dext.ts is heavily inspired by Next.js.
 
 - Zero config
 - Pre-render pages at build time (SSG)
-- Tiny (example is only 6.2KB of JS)
+- Tiny (example is only 5.9KB of JS)
 - Client hydration
 - Built-in routing
 - Zero config TypeScript support

diff --git a/cli.ts b/cli.ts
@@ -80,6 +80,7 @@ async function build(_options: unknown, root?: string) {
     JSON.stringify(pages.pages.map((page) => ({
       name: page.name,
       route: page.route,
+      hasGetStaticPaths: page.hasGetStaticPaths,
     }))),
   );
 

diff --git a/src/bundle.ts b/src/bundle.ts
@@ -134,9 +134,11 @@ export async function bundle(
     ) as OutputChunk[];
 
     for (const out of chunks) {
-      const page = pages.pages.find((p) => p.path === out.facadeModuleId!);
       const filename = `/${out.fileName}`;
-      if (page) {
+      if (out.facadeModuleId && out.facadeModuleId.startsWith("dext-page://")) {
+        const page = pages.pages.find((p) =>
+          p.path === out.facadeModuleId!.substring("dext-page://".length)
+        )!;
         const imports = [
           flattenImports(chunks, out.fileName),
           ...out.implicitlyLoadedBefore,

diff --git a/src/plugins/dext.ts b/src/plugins/dext.ts
@@ -28,8 +28,8 @@ export function dextPlugin(
       for (const component in pageMap) {
         implicitlyLoadedAfterOneOf.push(component);
         this.emitFile({
-          id: component,
           name: pageMap[component].name.replace("/", "-"),
+          id: "dext-page://" + component,
           type: "chunk",
         });
       }
@@ -41,9 +41,17 @@ export function dextPlugin(
     },
     resolveId(source, referrer) {
       if (referrer === "dext:///main.js") return source;
+      if (referrer?.startsWith("dext-page://")) {
+        return this.resolve(source, referrer.substring("dext-page://".length));
+      }
       return null;
     },
     load(id) {
+      if (id.startsWith("dext-page://")) {
+        return `export { default } from "${
+          id.substring("dext-page://".length)
+        }";`;
+      }
       if (id == "dext:///main.js") {
         const bundle =
           `import { h, hydrate, Router, Route, AsyncRoute, Error404, loadComponent } from "${runtimeURL}";
@@ -57,7 +65,7 @@ function Dext() {
         <Router>
           ${
             Object.entries(pageMap).map(([id, page]) => {
-              return `<AsyncRoute path="${page.route}" getComponent={(path) => loadComponent(import("${id}"), ${
+              return `<AsyncRoute path="${page.route}" getComponent={(path) => loadComponent(import("dext-page://${id}"), ${
                 page.hasGetStaticData ? "true" : "false"
               }, path)} />`;
             }).join("\n        ")
@@ -77,7 +85,9 @@ hydrate(<Dext />, document.getElementById("__dext")!);`;
       for (const name in bundle) {
         const file = bundle[name];
         if (file.type === "chunk" && file.isEntry) {
-          const component = file.facadeModuleId!;
+          const component = file.facadeModuleId!.substring(
+            "dext-page://".length,
+          );
           const page = pageMap[component];
 
           const imports = [

diff --git a/tests/integration_test.ts b/tests/integration_test.ts
@@ -18,7 +18,7 @@ integrationTest({
       JSON.parse(
         await Deno.readTextFile(join(ctx.dir, ".dext", "pagemap.json")),
       ),
-      [{ name: "index", route: "/" }],
+      [{ name: "index", route: "/", hasGetStaticPaths: false }],
     );
 
     const staticdir = join(ctx.dir, ".dext", "static");
@@ -46,8 +46,12 @@ integrationTest({
         await Deno.readTextFile(join(ctx.dir, ".dext", "pagemap.json")),
       ),
       [
-        { name: "index", route: "/" },
-        { name: "uppercase/[str]", route: "/uppercase/:str" },
+        { name: "index", route: "/", hasGetStaticPaths: false },
+        {
+          name: "uppercase/[str]",
+          route: "/uppercase/:str",
+          hasGetStaticPaths: true,
+        },
       ],
     );