feat: upgrade vite and change build target (#45)

- Upgrade node - Upgrade vite - Change target to esnext (we will downgrade the code in the apps) - Removing snapshots feature (we dont use that anymore)
kivra · May 14, 2024 · e08eba1 · e08eba1
1 parent 7f4348b
commit e08eba1
Show file tree

Hide file tree

Showing 11 changed files with 1,728 additions and 961 deletions.
diff --git a/.github/workflows/build.yml b/.github/workflows/build.yml
@@ -15,7 +15,7 @@ jobs:
       - name: ⚙️ Use Node.js
         uses: actions/setup-node@v3
         with:
-          node-version: "16.13.1"
+          node-version: "20.13.1"
           registry-url: "https://npm.pkg.github.com"
 
       - name: ⬇️ Install Dependencies

diff --git a/.tool-versions b/.tool-versions
@@ -0,0 +1 @@
+nodejs 20.13.1
diff --git a/.toybox/SnappshotWrapper.tsx b/.toybox/SnappshotWrapper.tsx
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -27,26 +27,26 @@
     "@mantine/prism": "6.0.21",
     "@radix-ui/react-accordion": "1.1.2",
     "@types/express": "4.17.17",
-    "@vitejs/plugin-react": "4.0.4",
+    "@vitejs/plugin-react": "4.2.1",
     "express": "4.18.2",
     "markdown-to-jsx": "7.3.2",
     "mobx": "6.9.0",
     "mobx-react-lite": "3.4.3",
     "react-router-dom": "5.3.4",
     "tsm": "2.3.0",
-    "vite": "4.3.9"
+    "vite": "5.2.11"
   },
   "devDependencies": {
-    "@types/node": "16.18.27",
+    "@types/node": "20.12.12",
     "@types/react": "18.2.20",
     "@types/react-dom": "18.2.7",
     "@types/react-router-dom": "5.3.3",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "typescript": "4.9.5",
-    "vitest": "0.34.6"
+    "vitest": "1.6.0"
   },
   "volta": {
-    "node": "16.13.1"
+    "node": "20.13.1"
   }
 }
diff --git a/src/cli/get-config.ts b/src/cli/get-config.ts
@@ -26,7 +26,6 @@ export async function getConfig(customConfigFilePath: string): Promise<Config> {
     wrapperComponent: config.wrapperComponent,
     emojiIcon: config.emojiIcon || "👾",
     title: config.title || "Components",
-    snapshotWrapperFile: config.snapshotWrapperFile,
     outDir: config.outDir || "toybox_dist",
     __customToyboxEntrypoint: config.__customToyboxEntrypoint,
     githubProjectUrl: config.githubProjectUrl!,

diff --git a/src/cli/util.ts b/src/cli/util.ts
@@ -1,4 +1,4 @@
-import { join, relative } from "path";
+import { join } from "path";
 import type { Config } from "../types";
 
 export const htmlContent = (config: Config) => {
@@ -42,30 +42,3 @@ export const htmlContent = (config: Config) => {
 </html>
 `;
 };
-
-export const snapshotHtmlContent = (config: Config) => {
-  return `
-<!DOCTYPE html>
-
-<html lang="en">
-  <head>
-    <meta charset="utf-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <link
-      rel="icon"
-      href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>📸</text></svg>"
-    />
-    <title>Snapshot</title>
-  </head>
-
-  <body>
-    <div id="app"></div>
-    ${
-      config.snapshotWrapperFile
-        ? `<script type="module" src="/${config.snapshotWrapperFile}"></script>`
-        : ""
-    }
-  </body>
-</html>
-`;
-};
diff --git a/src/cli/vite-build.ts b/src/cli/vite-build.ts
@@ -17,6 +17,7 @@ export async function buildApp(config: Config): Promise<void> {
       clearScreen: false,
       envPrefix: "TOYBOX_",
       build: {
+        target: "esnext",
         outDir: config.outDir,
         rollupOptions: {
           input: indexFileName,

diff --git a/src/cli/vite-server.ts b/src/cli/vite-server.ts
@@ -3,7 +3,7 @@ import { createServer } from "vite";
 import express from "express";
 import { Config } from "../types";
 import { getPlugins } from "./vite-plugin";
-import { htmlContent, snapshotHtmlContent } from "./util";
+import { htmlContent } from "./util";
 
 const PRELOADED_DEPENDENCIES = [
   "react",
@@ -12,8 +12,6 @@ const PRELOADED_DEPENDENCIES = [
   "@emotion/styled",
   "@mantine/core",
   "@mantine/prism",
-  "@radix-ui/react-accordion",
-  "markdown-to-jsx",
   "mobx",
   "mobx-react-lite",
   "react-router-dom",
@@ -26,12 +24,15 @@ export async function createViteServer(config: Config) {
     root: process.cwd(),
     server: {
       port,
-      middlewareMode: "ssr",
+      middlewareMode: true,
     },
     plugins: getPlugins(config),
     clearScreen: false,
     envPrefix: "TOYBOX_",
     optimizeDeps: {
+      esbuildOptions: {
+        target: "esnext",
+      },
       entries: [join(process.cwd(), config.storyPath, "**/*.story.tsx")],
       include: PRELOADED_DEPENDENCIES,
     },
@@ -49,19 +50,23 @@ export async function createViteServer(config: Config) {
   });
 
   const app = express();
-  app.use(server.middlewares);
-  app.get("/snapshot", async (req, res): Promise<void> => {
-    const url = req.originalUrl;
-    const html = await server.transformIndexHtml(
-      url,
-      snapshotHtmlContent(config)
-    );
-    res.status(200).set({ "Content-Type": "text/html" }).end(html);
-  });
-  app.use("*", async (req, res): Promise<void> => {
-    const url = req.originalUrl;
-    const html = await server.transformIndexHtml(url, htmlContent(config));
-    res.status(200).set({ "Content-Type": "text/html" }).end(html);
+  app.use(async (req, res, next) => {
+    /**
+     * Vite requirer to have a index.html file on disk but in Toybox case do we want to generate it
+     * on the fly. This middleware will intercept the request and will let Vite handle all requests except
+     * for the index.html request, eg. `/`, `/some-path/to/story`, etc.
+     */
+    const isViteRequest =
+      req.url.includes("vite") ||
+      req.url.includes("react-refresh") ||
+      req.url.includes(".");
+    if (isViteRequest) {
+      server.middlewares(req, res, next);
+    } else {
+      const url = req.originalUrl;
+      const html = await server.transformIndexHtml(url, htmlContent(config));
+      res.status(200).set({ "Content-Type": "text/html" }).end(html);
+    }
   });
 
   app.listen(port);

diff --git a/src/types.ts b/src/types.ts
@@ -112,11 +112,6 @@ export interface UserConfig {
     componentName: string;
   };
 
-  /**
-   * Wrapper setup for snapshot tests
-   */
-  snapshotWrapperFile?: string;
-
   /**
    * Title for the html page
    */

diff --git a/toybox.config.ts b/toybox.config.ts
@@ -9,7 +9,6 @@ const config: Config = {
   },
   title: 'Toybox',
   emojiIcon: '🐒',
-  snapshotWrapperFile: '.toybox/SnappshotWrapper.tsx',
 }
 
 module.exports = config;