feat(fullstack)!: universal route assets as default (#1196)

Author: hi-ogawa

packages/fullstack/README.md

@@ -20,7 +20,7 @@ function assets({
 
 The goal of the API is to cover following use cases in SSR application:
 
-- for server entry to access client entry
+- Server entry can access client entry
 
 ```js
 // [server.js] server entry injecting client entry during SSR
@@ -39,41 +39,37 @@ function renderHtml() {
 }
 ```
 
-- for universal route to access assets within its route
+- Universal route (CSR and SSR) can access assets for its route
   - see [`examples/react-router`](./examples/react-router) and [`examples/vue-router`](./examples/vue-router) for concrete integrations.
 
 ```js
 // [routes.js] hypothetical router library's routes declaration
 export const routes = [
+  {
+    path: "/"
+    route: () => import("./pages/index.js"),
+    routeAssets: import.meta.vite.assets({ import: "./pages/index.js" })
+  },,
   {
     path: "/about"
     route: () => import("./pages/about.js"),
-    routeAssets: mergeAssets(
-      import.meta.vite.assets({
-        import: "./pages/about.js",
-        environment: "client",
-      }),
-      import.meta.vite.assets({
-        import: "./pages/about.js",
-        environment: "ssr",
-      }),
-    )
+    routeAssets: import.meta.vite.assets({ import: "./pages/about.js" })
   },
   ...
 ]
 ```
 
-- server only app to access css
+- Server only page can access its css dependencies
 
 ```js
 // [server.js]
 import "./styles.css" // this will be included in `assets.css` below
 
 function renderHtml() {
   const assets = import.meta.vite.assets({
-    // both `import` and `environment` is optional and they are default to current module and environment
+    // `import` is optional and the default is current module, which is `./server.js` in this case:
     // import: "./server.js",
-    // environment: "ssr",
+    environment: "ssr",
   });
   const head = `
     <link type="stylesheet" href=${JSON.stringify(assets.css[0].href)}></script>

packages/fullstack/examples/basic/src/entry.server.tsx

@@ -16,7 +16,9 @@ function Root() {
     environment: "client",
     asEntry: true,
   });
-  const serverAssets = import.meta.vite.assets();
+  const serverAssets = import.meta.vite.assets({
+    environment: "ssr",
+  });
   const assets = mergeAssets(clientAssets, serverAssets);
 
   return (

packages/fullstack/examples/cloudflare/src/entry.server.tsx

@@ -16,7 +16,9 @@ function Root() {
     environment: "client",
     asEntry: true,
   });
-  const serverAssets = import.meta.vite.assets();
+  const serverAssets = import.meta.vite.assets({
+    environment: "ssr",
+  });
   const assets = mergeAssets(clientAssets, serverAssets);
 
   return (

packages/fullstack/examples/island/src/entry.server.tsx

@@ -13,8 +13,11 @@ function Root() {
   const clientAssets = import.meta.vite.assets({
     import: "./entry.client.tsx",
     environment: "client",
+    asEntry: true,
+  });
+  const serverAssets = import.meta.vite.assets({
+    environment: "ssr",
   });
-  const serverAssets = import.meta.vite.assets();
   const assets = mergeAssets(clientAssets, serverAssets);
 
   return (

packages/fullstack/examples/island/vite.config.ts

@@ -12,15 +12,13 @@ export default defineConfig((_env) => ({
     react(),
     reactHmrPreamblePlugin(),
   ],
+  optimizeDeps: {
+    entries: ["./src/entry.client.tsx"],
+  },
   environments: {
     client: {
       build: {
         outDir: "./dist/client",
-        rollupOptions: {
-          input: {
-            index: "./src/entry.client.tsx",
-          },
-        },
       },
     },
     ssr: {

packages/fullstack/examples/react-router/src/routes.ts

@@ -12,11 +12,6 @@ export const routes: RouteObject[] = [
       assets: [
         import.meta.vite.assets({
           import: "./root",
-          environment: "client",
-        }),
-        import.meta.vite.assets({
-          import: "./root",
-          environment: "ssr",
         }),
         // include client entry for ssr modulepreload
         import.meta.vite.assets({
@@ -32,14 +27,8 @@ export const routes: RouteObject[] = [
         lazy: () => import("./routes/index"),
         handle: {
           assets: [
-            // TODO: we don't need to repeated if we eagerly transform client on dev.
-            import.meta.vite.assets({
-              import: "./routes/index",
-              environment: "client",
-            }),
             import.meta.vite.assets({
               import: "./routes/index",
-              environment: "ssr",
             }),
           ],
         } satisfies CustomHandle,
@@ -52,11 +41,6 @@ export const routes: RouteObject[] = [
           assets: [
             import.meta.vite.assets({
               import: "./routes/about",
-              environment: "client",
-            }),
-            import.meta.vite.assets({
-              import: "./routes/about",
-              environment: "ssr",
             }),
           ],
         } satisfies CustomHandle,

packages/fullstack/examples/vue-router/src/routes.ts

@@ -17,11 +17,6 @@ export const routes: RouteRecordRaw[] = [
       useAssets(
         import.meta.vite.assets({
           import: "./routes/index.vue",
-          environment: "client",
-        }),
-        import.meta.vite.assets({
-          import: "./routes/index.vue",
-          environment: "ssr",
         }),
       );
       next();
@@ -35,11 +30,6 @@ export const routes: RouteRecordRaw[] = [
       useAssets(
         import.meta.vite.assets({
           import: "./routes/about.vue",
-          environment: "client",
-        }),
-        import.meta.vite.assets({
-          import: "./routes/about.vue",
-          environment: "ssr",
         }),
       );
       next();
@@ -53,11 +43,6 @@ export const routes: RouteRecordRaw[] = [
       useAssets(
         import.meta.vite.assets({
           import: "./routes/not-found.vue",
-          environment: "client",
-        }),
-        import.meta.vite.assets({
-          import: "./routes/not-found.vue",
-          environment: "ssr",
         }),
       );
       next();
@@ -68,11 +53,6 @@ export const routes: RouteRecordRaw[] = [
 const rootAssets = [
   import.meta.vite.assets({
     import: "./root.vue",
-    environment: "client",
-  }),
-  import.meta.vite.assets({
-    import: "./root.vue",
-    environment: "ssr",
   }),
   import.meta.vite.assets({
     import: "./framework/entry.client.tsx",

packages/fullstack/package.json

@@ -24,9 +24,9 @@
   },
   "dependencies": {
     "magic-string": "^0.30.17",
-    "srvx": "^0.8.7"
+    "srvx": "^0.8.7",
+    "strip-literal": "^3.1.0"
   },
-  "devDependencies": {},
   "peerDependencies": {
     "vite": "^6.0.0 || ^7.0.0"
   }

packages/fullstack/src/plugin.ts

@@ -4,6 +4,7 @@ import path from "node:path";
 import { fileURLToPath } from "node:url";
 import MagicString from "magic-string";
 import { toNodeHandler } from "srvx/node";
+import { stripLiteral } from "strip-literal";
 import {
   DevEnvironment,
   type Plugin,
@@ -131,8 +132,8 @@ export function assetsPlugin(pluginOpts?: FullstackPluginOptions): Plugin[] {
         async handler(code, id, _options) {
           if (!code.includes("import.meta.vite.assets")) return;
 
-          // TODO: strip comments
           const output = new MagicString(code);
+          const strippedCode = stripLiteral(code);
 
           const emptyResult: ImportAssetsResult = {
             js: [],
@@ -146,6 +147,15 @@ export function assetsPlugin(pluginOpts?: FullstackPluginOptions): Plugin[] {
           )) {
             const [start, end] = match.indices![0]!;
 
+            // skip if inside comment or string literal
+            if (
+              !strippedCode
+                .slice(start, end)
+                .includes("import.meta.vite.assets")
+            ) {
+              continue;
+            }
+
             // No-op on client since vite build handles preload/css for dynamic import on client.
             // https://vite.dev/guide/features.html#async-chunk-loading-optimization
             if (this.environment.name === "client") {
@@ -155,28 +165,44 @@ export function assetsPlugin(pluginOpts?: FullstackPluginOptions): Plugin[] {
             }
 
             const argCode = match[1]!.trim();
-            const options: Required<ImportAssetsOptions> = {
+            const options = {
               import: id,
-              environment: this.environment.name,
+              environment: undefined,
               asEntry: false,
-            };
+            } satisfies ImportAssetsOptions;
             if (argCode) {
               const argValue = evalValue<ImportAssetsOptions>(argCode);
               Object.assign(options, argValue);
             }
 
-            const importSource = toAssetsVirtual({
-              import: options.import,
-              importer: id,
-              environment: options.environment,
-              entry: options.asEntry ? "1" : "",
-            });
-            const hash = hashString(importSource);
-            const importedName = `__assets_${hash}`;
-            newImports.add(
-              `;import ${importedName} from ${JSON.stringify(importSource)};\n`,
-            );
-            output.update(start, end, `(${importedName})`);
+            // when `environment` is omitted, import both client and
+            // current environment (i.e. treat is as universal route)
+            const environments = options.environment
+              ? [options.environment]
+              : ["client", this.environment.name];
+            const importedNames: string[] = [];
+            for (const environment of environments) {
+              const importSource = toAssetsVirtual({
+                import: options.import,
+                importer: id,
+                environment,
+                entry: options.asEntry ? "1" : "",
+              });
+              const hash = hashString(importSource);
+              const importedName = `__assets_${hash}`;
+              newImports.add(
+                `;import ${importedName} from ${JSON.stringify(importSource)};\n`,
+              );
+              importedNames.push(importedName);
+            }
+            let replacement = importedNames[0]!;
+            if (importedNames.length > 1) {
+              newImports.add(
+                `;import * as __assets_runtime from "@hiogawa/vite-plugin-fullstack/runtime";\n`,
+              );
+              replacement = `__assets_runtime.mergeAssets(${importedNames.join(", ")})`;
+            }
+            output.update(start, end, `(${replacement})`);
           }
 
           if (output.hasChanged()) {