Build widget separately from the web app.

molefrog · molefrog · commit 8ae2ffde7653 · 2023-03-25T16:33:09.000+01:00
diff --git a/.gitignore b/.gitignore
@@ -22,4 +22,4 @@ node_modules
 *.sw?
 .vercel
 
-public/d/
+/dist
diff --git a/api/widget.js b/api/widget.js
@@ -1,13 +1,13 @@
 import { readFile } from "fs/promises";
 import { resolve, join } from "path";
 
-const staticDir = "./public";
+const staticDir = "./dist";
 
 export default async function handler(request, response) {
   const manifestPath = resolve(join(staticDir, "d", "manifest.json"));
   const manifest = JSON.parse(await readFile(manifestPath, "utf-8"));
 
-  const { file: widgetEntry } = manifest["widget/widget.js"];
+  const { file: widgetEntry } = manifest["widget.js"];
 
   response.setHeader("Content-Type", "application/javascript");
   response.setHeader("Cache-Control", "max-age=0, s-maxage=604800");
diff --git a/package.json b/package.json
@@ -7,7 +7,7 @@
   "private": true,
   "license": "MIT",
   "scripts": {
-    "build": "vite build"
+    "build": "vite build web && vite build widget"
   },
   "devDependencies": {
     "vite": "^4.2.0",
diff --git a/vercel.json b/vercel.json
@@ -1,8 +1,16 @@
 {
-  "outputDirectory": "public",
   "rewrites": [{ "source": "/widget.js", "destination": "/api/widget" }],
 
   "headers": [
+    {
+      "source": "/assets/(.*)",
+      "headers": [
+        {
+          "key": "Cache-Control",
+          "value": "public, max-age=604800, immutable"
+        }
+      ]
+    },
     {
       "source": "/d/(.*)",
       "headers": [
diff --git a/vite.config.js b/vite.config.js
diff --git a/web/index.html b/web/index.html
@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module">
+      import { createPoll } from "/widget.js";
+
+      const config = {
+        question: "What is the best album of 2016?",
+        url: "ficus.io",
+        answers: [
+          {
+            id: "a1",
+            color: "rgba(61, 118, 230, 1.00)",
+            label: "Chance The Rapper – Coloring Book",
+          },
+          { id: "a2", color: "rgba(241, 196, 15, 1.00)", label: "Beyoncé – Lemonade" },
+          {
+            id: "a3",
+            color: "rgba(230, 126, 34, 1.00)",
+            label: "Frank Ocean – Blonde",
+          },
+          { id: "a4", color: "rgba(231, 76, 60, 1.00)", label: "David Bowie – Star" },
+          {
+            id: "a5",
+            color: "rgba(142, 68, 173, 1.00)",
+            label: "Kanye West – The Life Of Pablo",
+          },
+        ],
+      };
+
+      const [update] = createPoll(document.getElementById("root"), { config, type: "bar" });
+
+      update({
+        votes: [
+          { id: "p1", answers: ["a1", "a2"] },
+          { id: "p2", answer: "a2" },
+          { id: "p3", answers: ["a2"] },
+        ],
+      });
+    </script>
+  </body>
+</html>
diff --git a/web/vite.config.js b/web/vite.config.js
@@ -0,0 +1,14 @@
+// vite.config.js
+import { resolve } from "path";
+
+export default {
+  publicDir: resolve(__dirname, "../dist"),
+  build: {
+    target: "modules",
+    emptyOutDir: true, // clean dist (must be called before building the widget)
+    outDir: resolve(__dirname, "../dist"),
+    rollupOptions: {
+      external: ["/widget.js"],
+    },
+  },
+};
diff --git a/widget/vite.config.js b/widget/vite.config.js
@@ -0,0 +1,33 @@
+// vite.config.js
+import { resolve } from "path";
+import cssInjectedByJSPlugin from "vite-plugin-css-injected-by-js";
+
+export default {
+  publicDir: false, // no static assets here, just a single js file
+
+  plugins: [cssInjectedByJSPlugin({ styleId: "ficus-io" })],
+
+  css: {
+    modules: {
+      localsConvention: "dashesOnly", // .my-component => styles.myComponent
+    },
+  },
+
+  esbuild: {
+    jsxFactory: "h", // preact
+    jsxFragment: "Fragment",
+  },
+
+  build: {
+    target: "modules",
+    manifest: true,
+    sourcemap: true,
+    emptyOutDir: true, // clean dist/d dir before build
+    outDir: resolve(__dirname, "../dist/d"), // "d" stands for "dist"
+    lib: {
+      entry: resolve(__dirname, "widget.js"),
+      formats: ["es"],
+      fileName: "widget-[hash:8]",
+    },
+  },
+};

-Original file line number
+Diff line change
 *.sw?
 .vercel
 -public/d/
 +/dist