Fix withHydrate wrapped named exports (#149)

natemoo-re · web-flow · commit 0a408eb34991 · 2021-04-11T07:15:01.000-05:00
* chore: update scripts

* fix: named exports when using withHydrate

* chore: changeset

* chore: add named-export example

* fix: default export case

* fix: issue with useGlobalState

* fix: dynamic routes example

* refactor: rename hydrate map plugin
diff --git a/.changeset/cool-geckos-thank.md b/.changeset/cool-geckos-thank.md
@@ -0,0 +1,5 @@
+---
+"microsite": patch
+---
+
+Fix an issue where named exports would not be properly hydrated
diff --git a/.changeset/smooth-eyes-count.md b/.changeset/smooth-eyes-count.md
@@ -0,0 +1,5 @@
+---
+"microsite": patch
+---
+
+Fix bug where useGlobalState would cause builds to fail
diff --git a/examples/dynamic-routes/src/pages/index.tsx b/examples/dynamic-routes/src/pages/index.tsx
@@ -15,7 +15,7 @@ const Index: FunctionalComponent<any> = ({ renderedAt }) => {
         <ul>
           {Array.from({ length: 5 }, (_, i) => (
             <li>
-              <a href={`/posts/${i + 1}`}>Page {i + 1}</a>
+              <a href={`./posts/${i + 1}`}>Page {i + 1}</a>
             </li>
           ))}
         </ul>
diff --git a/examples/dynamic-routes/src/pages/posts/[id].tsx b/examples/dynamic-routes/src/pages/posts/[id].tsx
@@ -17,7 +17,7 @@ const Index: FunctionalComponent<any> = ({ num }) => {
 
         <p>
           Head to{" "}
-          <a href={`/posts/${nextPage}`}>
+          <a href={`./posts/${nextPage}`}>
             <code>/posts/{nextPage}</code>
           </a>
         </p>
diff --git a/examples/named-exports/package.json b/examples/named-exports/package.json
@@ -0,0 +1,15 @@
+{
+  "name": "@example/named-exports",
+  "homepage": "/named-exports",
+  "version": "0.0.0",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "start": "microsite",
+    "build": "microsite build -- --debug-hydration",
+    "serve": "microsite build -- --debug-hydration --serve"
+  },
+  "devDependencies": {
+    "microsite": "1.2.1"
+  }
+}
diff --git a/examples/named-exports/snowpack.config.js b/examples/named-exports/snowpack.config.js
@@ -0,0 +1,8 @@
+import { resolve, join, dirname } from 'path';
+import { fileURLToPath } from 'url';
+
+const workspaceRoot = resolve(join(dirname(fileURLToPath(import.meta.url)), '..', '..'));
+
+export default {
+    workspaceRoot
+}
diff --git a/examples/named-exports/src/components/default-and-named.tsx b/examples/named-exports/src/components/default-and-named.tsx
@@ -0,0 +1,18 @@
+import { withHydrate } from "microsite/hydrate";
+
+const DefaultComponent = () => (
+  <h1>
+    Hello <code>default</code>
+  </h1>
+);
+const NamedComponentInternal = () => (
+  <h1>
+    Hello <code>named</code>
+  </h1>
+);
+
+export const NamedComponent = withHydrate(NamedComponentInternal, {
+  method: "idle",
+});
+
+export default withHydrate(DefaultComponent, { method: "idle" });
diff --git a/examples/named-exports/src/components/default.tsx b/examples/named-exports/src/components/default.tsx
@@ -0,0 +1,9 @@
+import { withHydrate } from "microsite/hydrate";
+
+const DefaultComponent = () => (
+  <h1>
+    Hello <code>default</code>
+  </h1>
+);
+
+export default withHydrate(DefaultComponent, { method: "idle" });
diff --git a/examples/named-exports/src/components/named.tsx b/examples/named-exports/src/components/named.tsx
@@ -0,0 +1,11 @@
+import { withHydrate } from "microsite/hydrate";
+
+const NamedComponentInternal = () => (
+  <h1>
+    Hello <code>named</code>
+  </h1>
+);
+
+export const NamedComponent = withHydrate(NamedComponentInternal, {
+  method: "idle",
+});
diff --git a/examples/named-exports/src/pages/index.tsx b/examples/named-exports/src/pages/index.tsx
@@ -0,0 +1,29 @@
+import { FunctionalComponent } from "preact";
+import { definePage } from "microsite/page";
+import { Head, seo } from "microsite/head";
+
+import DefaultComponentA from "../components/default";
+import { NamedComponent as NamedComponentA } from "../components/named";
+import DefaultComponentB, {
+  NamedComponent as NamedComponentB,
+} from "../components/default-and-named";
+
+const Index: FunctionalComponent = () => {
+  return (
+    <>
+      <Head>
+        <seo.title>Named Exports</seo.title>
+      </Head>
+
+      <main>
+        <DefaultComponentA />
+        <DefaultComponentB />
+
+        <NamedComponentA />
+        <NamedComponentB />
+      </main>
+    </>
+  );
+};
+
+export default definePage(Index);
diff --git a/examples/named-exports/tsconfig.json b/examples/named-exports/tsconfig.json
@@ -0,0 +1,9 @@
+{
+  "extends": "microsite/base",
+  "compilerOptions": {
+    "baseUrl": "./src",
+    "paths": {
+      "@/*": ["./*"]
+    }
+  }
+}
diff --git a/packages/microsite/package.json b/packages/microsite/package.json
@@ -20,6 +20,7 @@
   "exports": {
     "./base": "./base.json",
     "./base.json": "./base.json",
+    "./runtime": "./dist/runtime/index.js",
     "./client/csr": "./dist/client/csr.js",
     "./client/hooks": "./dist/client/hooks.js",
     "./client/hydrate": "./dist/client/hydrate.js",
@@ -33,7 +34,6 @@
     "./assets/snowpack-plugin.cjs": "./assets/snowpack-plugin.cjs",
     "./assets/snowpack.config.cjs": "./assets/snowpack.config.cjs",
     "./assets/types/*": "./assets/types/*.d.ts",
-    "./assets/microsite-runtime.js": "./assets/microsite-runtime.js",
     "./package.json": "./package.json"
   },
   "files": [
@@ -56,6 +56,7 @@
     "polka": "^0.5.2",
     "preact": "^10.5.13",
     "preact-render-to-string": "^5.1.16",
+    "recast": "^0.20.4",
     "rollup": "^2.32.1",
     "rollup-plugin-styles": "^3.11.0",
     "sirv": "^1.0.10",
diff --git a/packages/microsite/src/cli/microsite-build.ts b/packages/microsite/src/cli/microsite-build.ts
@@ -2,7 +2,8 @@ import { build as buildProject } from "snowpack";
 import { dirname, resolve } from "path";
 import glob from "globby";
 import arg from "arg";
-import { GetModuleInfo, rollup } from "rollup";
+import { GetModuleInfo, rollup, RenderedChunk, Plugin } from "rollup";
+import { visit } from "recast";
 import { performance } from "perf_hooks";
 import { green, dim } from "kleur/colors";
 import styles from "rollup-plugin-styles";
@@ -175,7 +176,7 @@ async function copyHydrateAssets(
 
     tasks.push(
       copyFile(
-        require.resolve("microsite/assets/microsite-runtime.js"),
+        require.resolve("microsite/runtime"),
         resolve(OUT_DIR, "_static/vendor/microsite.js"),
         { transform: transformInit }
       )
@@ -246,13 +247,16 @@ async function bundlePagesForSSR(paths: string[]) {
     external: (source: string) => {
       return (
         builtins.includes(source) ||
-        source.startsWith("microsite") ||
+        (source.startsWith("microsite") &&
+          !source.startsWith("microsite/runtime")) ||
         source.startsWith("preact")
       );
     },
     plugins: [
+      rewriteSnowpackPreact(),
       rewriteCssProxies(),
       rewritePreact(),
+      collecHydrateMap(),
       styles({
         config: true,
         mode: "extract",
@@ -317,12 +321,12 @@ async function bundlePagesForSSR(paths: string[]) {
       let moduleInfoById: Record<string, ModuleInfo> = {};
 
       for (const moduleId of idsToHandle) {
-          const moduleInfo = getModuleInfo(moduleId);
+        const moduleInfo = getModuleInfo(moduleId);
 
-          moduleInfoById[moduleId] = moduleInfo;
+        moduleInfoById[moduleId] = moduleInfo;
 
-          for (const importerId of moduleInfo.importers)
-              idsToHandle.add(importerId);
+        for (const importerId of moduleInfo.importers)
+          idsToHandle.add(importerId);
       }
 
       for (const moduleId of idsToHandle) {
@@ -386,7 +390,7 @@ async function bundlePagesForSSR(paths: string[]) {
 
   const hydrationExports = output.reduce((acc, chunkOrAsset) => {
     if (
-      chunkOrAsset.type !== 'asset' &&
+      chunkOrAsset.type !== "asset" &&
       chunkOrAsset.name.startsWith("_hydrate/")
     ) {
       return {
@@ -398,6 +402,7 @@ async function bundlePagesForSSR(paths: string[]) {
   }, {});
 
   const manifest: ManifestEntry[] = [];
+  let hydrateMap: Record<string, Record<string, string>> = {};
 
   /**
    * Here we're manually emitting the files so we have a chance
@@ -409,6 +414,9 @@ async function bundlePagesForSSR(paths: string[]) {
   await Promise.all(
     output.map((chunkOrAsset) => {
       if (chunkOrAsset.type === "asset") {
+        if (chunkOrAsset.name === "hydrateMap.json") {
+          hydrateMap = JSON.parse(chunkOrAsset.source.toString());
+        }
         if (chunkOrAsset.name.startsWith("_hydrate")) {
           const finalAssetName = chunkOrAsset.name.replace(
             /\bchunks\b/,
@@ -501,7 +509,9 @@ async function bundlePagesForSSR(paths: string[]) {
           )) {
             if (file.startsWith("_hydrate/")) {
               hydrateBindings = Object.assign(hydrateBindings, {
-                [file]: exports,
+                [file]: exports.reduce((acc, name) => {
+                  return Object.assign(acc, { [name]: name });
+                }, {}),
               });
             }
           }
@@ -514,7 +524,9 @@ async function bundlePagesForSSR(paths: string[]) {
               const file = `${hydration}.js`;
 
               hydrateBindings = Object.assign(hydrateBindings, {
-                [file]: exports,
+                [file]: exports.reduce((acc, name) => {
+                  return Object.assign(acc, { [name]: name });
+                }, {}),
               });
             }
           }
@@ -557,10 +569,79 @@ async function bundlePagesForSSR(paths: string[]) {
         entry.hydrateBindings = null;
       if (entry.hydrateStyleBindings.length === 0)
         entry.hydrateStyleBindings = null;
+      if (entry.hydrateBindings) {
+        for (const [file, exports] of Object.entries(entry.hydrateBindings)) {
+          const hydrated = hydrateMap[file.replace(/\.js$/, "")];
+          entry.hydrateBindings[file] = Object.keys(exports).reduce(
+            (acc, key) => {
+              return Object.assign(acc, { [hydrated[key] || key]: key });
+            },
+            {}
+          );
+        }
+      }
       return entry;
     });
 }
 
+const collecHydrateMap = (): Plugin => {
+  let withHydrateMap: Record<string, Record<string, string>> = {};
+  return {
+    name: "@microsite/rollup-collec-hydrate-map",
+    renderChunk(code: string, chunk: RenderedChunk) {
+      if (chunk.name.startsWith("_hydrate/")) {
+        const ast = this.parse(code);
+        visit(ast, {
+          visitCallExpression(path) {
+            if (path.get("callee").getValueProperty("name") === "withHydrate") {
+              const exportName = path.parent.get("id").getValueProperty("name");
+              const innerName = path.parent
+                .get("init", "arguments", 0)
+                .getValueProperty("name");
+              if (withHydrateMap[chunk.name]) {
+                withHydrateMap[chunk.name] = Object.assign(
+                  withHydrateMap[chunk.name],
+                  { [exportName]: innerName }
+                );
+              } else {
+                withHydrateMap[chunk.name] = { [exportName]: innerName };
+              }
+
+              return false;
+            }
+            this.traverse(path);
+          },
+        });
+        return null;
+      }
+      return null;
+    },
+    generateBundle() {
+      this.emitFile({
+        type: "asset",
+        fileName: "hydrateMap.json",
+        name: "hydrateMap.json",
+        source: JSON.stringify(withHydrateMap),
+      });
+    },
+  };
+};
+
+/**
+ * Snowpack rewrites CSS to a `.css.proxy.js` file.
+ * Great for dev, but we need to revert to the actual CSS file
+ */
+const rewriteSnowpackPreact = () => {
+  return {
+    name: "@microsite/rollup-rewrite-snowpack-preact",
+    resolveId(source: string) {
+      if (source.indexOf("pkg/preact") > -1)
+        return source.slice(source.indexOf("preact"), -3);
+      return null;
+    },
+  };
+};
+
 /**
  * Snowpack rewrites CSS to a `.css.proxy.js` file.
  * Great for dev, but we need to revert to the actual CSS file
diff --git a/packages/microsite/src/hydrate.tsx b/packages/microsite/src/hydrate.tsx
diff --git a/packages/microsite/src/runtime/index.tsx b/packages/microsite/src/runtime/index.tsx
diff --git a/packages/microsite/src/utils/build.tsx b/packages/microsite/src/utils/build.tsx
diff --git a/packages/microsite/src/utils/hydration.ts b/packages/microsite/src/utils/hydration.ts
diff --git a/yarn.lock b/yarn.lock

-Original file line number
+Diff line change
@@ @@ -0,0 +1,5 @@ @@
 +---
 +"microsite": patch
 +---
++
 +Fix an issue where named exports would not be properly hydrated