refactor showcase to build source tree from sourcefiles, enable mdx

finos · Nov 17, 2024 · 06f5bda · 06f5bda
1 parent b32dc05
commit 06f5bda
Show file tree

Hide file tree

Showing 28 changed files with 269 additions and 291 deletions.
diff --git a/vuu-ui/package-lock.json b/vuu-ui/package-lock.json
diff --git a/vuu-ui/package.json b/vuu-ui/package.json
@@ -40,7 +40,7 @@
     "type-defs": "node ./scripts/build-all-type-defs.mjs",
     "showcase": "cd showcase && npm run showcase",
     "showcase:preview": "serve ./showcase/dist -p 4173",
-    "showcase:build": "npm run build:worker && cd showcase && node scripts/build.mjs",
+    "showcase:build": "npm run build:worker && cd showcase && tsx scripts/build.ts",
     "test:cypress": "npm run build:worker && cypress run --component --browser chrome --headless",
     "test:cypress:local": "cypress open --component --browser chrome",
     "test:vite": "npm run build:worker && vitest run",

diff --git a/vuu-ui/showcase/.gitignore b/vuu-ui/showcase/.gitignore
@@ -1,5 +1 @@
-<<<<<<< HEAD
-!templates/index.html
-=======
-!templates/index.html
->>>>>>> 7590e3f973ef0c9b6070abaac9c592190cd65e6f
+.showcase
diff --git a/vuu-ui/showcase/index.html b/vuu-ui/showcase/index.html
@@ -1,15 +1,24 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
-    <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
-    <link rel="manifest" href="/manifest.json" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <title>Vite Showcase</title>
+    <title>Vuu Showcase</title>
+    <script type="module">
+      import { hasUrlParameter } from "@finos/vuu-utils";
+      const { default: treeSource } = await import(
+        "/.showcase/treeSourceJson.js"
+      );
+      if (hasUrlParameter("standalone")) {
+        const { default: start } = await import("/src/index-standalone");
+        start(treeSource);
+      } else {
+        const { default: start } = await import("/src/index-main");
+        start(treeSource);
+      }
+    </script>
   </head>
   <body>
     <div id="root"></div>
-    <script type="module" src="/src/main.tsx"></script>
   </body>
 </html>
diff --git a/vuu-ui/showcase/package.json b/vuu-ui/showcase/package.json
@@ -8,8 +8,7 @@
     "build": "node ./scripts/build.mjs",
     "dev": "vite",
     "docs": "node ./scripts/build-docs.mjs",
-    "showcase": "node ./scripts/showcase.mjs",
-    "stories": "node ./scripts/parse-stories.mjs"
+    "showcase": "tsx ./scripts/showcase.ts"
   },
   "keywords": [],
   "author": "heswell",
@@ -33,9 +32,10 @@
     "react-router-dom": "^6.2.1"
   },
   "devDependencies": {
-    "@mdx-js/esbuild": "^3.0.1",
-    "@mdx-js/rollup": "3.0.0",
+    "@mdx-js/esbuild": "3.1.0",
+    "@mdx-js/rollup": "3.0.1",
     "@rollup/plugin-json": "^6.1.0",
-    "@rollup/plugin-node-resolve": "^15.2.3"
+    "@rollup/plugin-node-resolve": "^15.2.3",
+    "tsx": "^4.19.1"
   }
 }
diff --git a/vuu-ui/showcase/public/favicon-16x16.png b/vuu-ui/showcase/public/favicon-16x16.png
diff --git a/vuu-ui/showcase/public/favicon-32x32.png b/vuu-ui/showcase/public/favicon-32x32.png
diff --git a/vuu-ui/showcase/public/favicon.ico b/vuu-ui/showcase/public/favicon.ico
diff --git a/vuu-ui/showcase/public/manifest.json b/vuu-ui/showcase/public/manifest.json
diff --git a/vuu-ui/showcase/scripts/build-docs.mjs b/vuu-ui/showcase/scripts/build-docs.mjs
diff --git a/vuu-ui/showcase/scripts/build.mjs → vuu-ui/showcase/scripts/build.ts b/vuu-ui/showcase/scripts/build.mjs → vuu-ui/showcase/scripts/build.ts
@@ -5,24 +5,31 @@ import {
   formatDuration,
   padRight,
   readPackageJson,
+  writeFile,
   writeMetaFile,
 } from "../../scripts/utils.mjs";
 import { build } from "../../scripts/esbuild.mjs";
 import { buildFileList } from "./build-file-list.mjs";
 import fs from "fs";
 import path from "path";
+import { treeSourceFromFileSystem } from "./treeSourceFromFileSystem";
+import mdx from "@mdx-js/esbuild";
 
 const indexFiles = buildFileList("./src/examples", /index.ts$/);
 const examples = buildFileList("./src/examples", /examples.tsx$/);
+const mdxFiles = buildFileList("./src/examples", /.mdx$/);
 const features = buildFileList("./src/features", /feature.tsx$/);
 
+console.log({ mdxFiles });
+
 // TODO use a separate build call for each theme, without bundling
 const themes = ["./src/themes/salt-theme.ts", "./src/themes/vuu-theme.ts"];
 
-const entryPoints = ["src/main.tsx"]
+const entryPoints = ["src/index-main.tsx", "src/index-standalone.tsx"]
   .concat(indexFiles)
   .concat(features)
   .concat(examples)
+  .concat(mdxFiles)
   .concat(themes);
 
 const cssInlinePlugin = {
@@ -37,7 +44,7 @@ const cssInlinePlugin = {
         const css = await fs.promises.readFile(args.path, "utf8");
         // css = await esbuild.transform(css, { loader: "css", minify: true });
         return { loader: "text", contents: css };
-      }
+      },
     );
   },
 };
@@ -48,16 +55,25 @@ const HTML_TEMPLATE = `
   <head>
     <base href="/" />
     <meta charset="UTF-8" />
-    <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
-    <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
-    <link rel="manifest" href="/manifest.json">    
     <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <link rel="stylesheet" href="/main.css"/>
+    <link rel="stylesheet" href="/index-main.css"/>
     <title>Vite Showcase</title>
+    <script type="module">
+      const hasUrlParameter = (paramName) => new URL(document.location.href).searchParams.has(paramName);
+      const { default: treeSource } = await import(
+        "/treeSourceJson.js"
+      );
+      if (hasUrlParameter("standalone")) {
+        const { default: start } = await import("/index-standalone.js");
+        start(treeSource);
+      } else {
+        const { default: start } = await import("/index-main.js");
+        start(treeSource);
+      }
+    </script>
   </head>
   <body>
     <div id="root"></div>
-    <script type="module" src="/main.js"></script>
   </body>
 </html>
 `;
@@ -75,7 +91,7 @@ const esbuildConfig = {
     "./themes/tar-theme.ts",
   ],
   name: "showcase",
-  plugins: [cssInlinePlugin],
+  plugins: [cssInlinePlugin, mdx()],
   outdir,
   splitting: true,
   target: "esnext",
@@ -87,7 +103,7 @@ function writeHtmlFile() {
       if (err) {
         reject(err);
       } else {
-        resolve();
+        resolve(undefined);
       }
     });
   });
@@ -111,6 +127,12 @@ async function main() {
 
   await writeMetaFile(metafile, outdir);
 
+  const treeSourceJson = treeSourceFromFileSystem("./src/examples", "");
+  await writeFile(
+    `export default ${JSON.stringify(treeSourceJson)};`,
+    path.resolve(outdir, "treeSourceJson.js"),
+  );
+
   console.log("[DEPLOY public assets]");
   const publicContent = fs.readdirSync(`./public`);
   publicContent.forEach((file) => {
@@ -121,7 +143,7 @@ async function main() {
         { recursive: true },
         (err) => {
           if (err) throw err;
-        }
+        },
       );
     }
   });
@@ -146,11 +168,11 @@ async function main() {
 
   console.log("\ncore");
   outputs.core.sort(byFileName).forEach(({ fileName, bytes }) => {
-    console.log(`${padRight(fileName, 30)} ${formatBytes(bytes)}`);
+    console.log(`${padRight(fileName, 90)} ${formatBytes(bytes)}`);
   });
   console.log("\ncommon");
   outputs.common.forEach(({ fileName, bytes }) => {
-    console.log(`${padRight(fileName, 30)} ${formatBytes(bytes)}`);
+    console.log(`${padRight(fileName, 90)} ${formatBytes(bytes)}`);
   });
 
   console.log(`\nbuild took ${formatDuration(duration)}`);

diff --git a/vuu-ui/showcase/scripts/parse-stories.mjs b/vuu-ui/showcase/scripts/parse-stories.mjs