fix(fullstack): fix asEntry option (#1174)

Author: hi-ogawa

packages/fullstack/README.md

@@ -7,7 +7,11 @@ This is a proposal to introduce a new API to allow non-client environment to acc
 Currently, it is prototyped in my package `@hiogawa/vite-plugin-fullstack` and it provides `import.meta.vite.assets` function with a following signature:
 
 ```ts
-function assets({ import?: string, environment?: string }): {
+function assets({
+  import?: string,
+  environment?: string,
+  asEntry?: boolean,
+}): {
   entry?: string;               // script for <script type="module" src=...>
   js: { href: string, ... }[];  // dependency chunks for <link rel="modulepreload" href=... />
   css: { href: string, ... }[]; // dependency css for <link rel="stylesheet" href=... />
@@ -24,6 +28,7 @@ function renderHtml() {
   const assets = import.meta.vite.assets({
     entry: "./client.js",
     environment: "client",
+    asEntry: true,
   });
   const head = `
     <script type="module" src=${JSON.stringify(assets.entry)}></script>
@@ -99,11 +104,6 @@ export default defineConfig({
     client: {
       build: {
         outDir: "./dist/client",
-        rollupOptions: {
-          input: {
-            index: "./src/entry.client.tsx",
-          },
-        },
       },
     },
     ssr: {

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

@@ -11,21 +11,11 @@ async function handler(_request: Request): Promise<Response> {
 }
 
 function Root() {
-  // Impot client entry assets on server.
-  // It doesn't support dynamically adding build entry,
-  // so `build.rollupOption.input` still needs to be manually written.
-  // This will include client js entry and its dependencies.
-  // > { entry: string, js: { href: string, ... }[], css: { href: string, ... }[] }
   const clientAssets = import.meta.vite.assets({
     import: "./entry.client.tsx",
     environment: "client",
+    asEntry: true,
   });
-
-  // By default, `import` and `environment` are inferred as
-  // current module and current environment, which in this case is,
-  // > { import: "./entry.server.tsx", environment: "ssr" }
-  // This will include only server css assets.
-  // > { css: { href: string, ... }[] }
   const serverAssets = import.meta.vite.assets();
   const assets = mergeAssets(clientAssets, serverAssets);
 

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

@@ -18,11 +18,11 @@ export default defineConfig((_env) => ({
     client: {
       build: {
         outDir: "./dist/client",
-        rollupOptions: {
-          input: {
-            index: "./src/entry.client.tsx",
-          },
-        },
+      },
+      // excplit rollupOptions.input is not necessary,
+      // but `optimizeDeps.entries` is desired to set.
+      optimizeDeps: {
+        entries: ["./src/entry.client.tsx"],
       },
     },
     ssr: {
@@ -39,8 +39,8 @@ export default defineConfig((_env) => ({
   },
   builder: {
     async buildApp(builder) {
-      // NOTE:
-      // dynamically adding entry is supported only when building ssr -> client.
+      // NOTE
+      // dynamically adding entry is supported only when building ssr -> client
       await builder.build(builder.environments["ssr"]!);
       await builder.build(builder.environments["client"]!);
     },

packages/fullstack/src/plugin.ts

@@ -21,6 +21,7 @@ import {
   toAssetsVirtual,
 } from "./plugins/shared";
 import {
+  createVirtualPlugin,
   getEntrySource,
   hashString,
   normalizeRelativePath,
@@ -31,7 +32,14 @@ import {
 } from "./plugins/vite-utils";
 
 type FullstackPluginOptions = {
+  /**
+   * @default true
+   */
   serverHandler?: boolean;
+  // /**
+  //  * @default ["ssr"]
+  //  */
+  // serverEnvironments?: string[];
 };
 
 type ImportAssetsMeta = {
@@ -53,13 +61,13 @@ export function serverHandlerPlugin(
   return [
     {
       name: "fullstack:server-handler",
+      apply: () => pluginOpts?.serverHandler !== false,
       config(userConfig, _env) {
         return {
           appType: userConfig.appType ?? "custom",
         };
       },
       configureServer(server) {
-        if (pluginOpts?.serverHandler === false) return;
         assert(isRunnableDevEnvironment(server.environments.ssr));
         const environment = server.environments.ssr;
         const runner = environment.runner;
@@ -138,7 +146,7 @@ export function assetsPlugin(_pluginOpts?: FullstackPluginOptions): Plugin[] {
             const options: Required<ImportAssetsOptions> = {
               import: id,
               environment: this.environment.name,
-              clientEntry: false,
+              asEntry: false,
               universal: false,
             };
             if (argCode) {
@@ -150,7 +158,7 @@ export function assetsPlugin(_pluginOpts?: FullstackPluginOptions): Plugin[] {
               import: options.import,
               importer: id,
               environment: options.environment,
-              entry: options.clientEntry ? "1" : "",
+              entry: options.asEntry ? "1" : "",
             });
             const hash = hashString(importSource);
             const importedName = `__assets_${hash}`;
@@ -262,9 +270,6 @@ export function assetsPlugin(_pluginOpts?: FullstackPluginOptions): Plugin[] {
       },
       buildStart() {
         // dynamically add client entry during build
-        // TODO: this still requires having at least one `rollupOptions.input`
-        // since Vite expects `index.html` by default
-        // (just add empty virtual by default)
         if (
           this.environment.mode == "build" &&
           this.environment.name === "client"
@@ -347,6 +352,29 @@ export function assetsPlugin(_pluginOpts?: FullstackPluginOptions): Plugin[] {
         },
       },
     },
+    // ensure at least one client build input to prevent Vite
+    // from looking for index.html and breaking build
+    {
+      ...createVirtualPlugin("fullstack/client-fallback", () => "export {}"),
+      configEnvironment: {
+        order: "post",
+        handler(name, config, _env) {
+          if (name === "client") {
+            if (!config.build?.rollupOptions?.input) {
+              return {
+                build: {
+                  rollupOptions: {
+                    input: {
+                      __fallback: "virtual:fullstack/client-fallback",
+                    },
+                  },
+                },
+              };
+            }
+          }
+        },
+      },
+    },
     patchViteClientPlugin(),
     patchVueScopeCssHmr(),
   ];

packages/fullstack/src/plugins/utils.ts

@@ -44,13 +44,17 @@ export function createVirtualPlugin(
   name = "virtual:" + name;
   return {
     name: `rsc:virtual-${name}`,
-    resolveId(source, _importer, _options) {
-      return source === name ? "\0" + name : undefined;
+    resolveId: {
+      handler(source, _importer, _options) {
+        return source === name ? "\0" + name : undefined;
+      },
     },
-    load(id, options) {
-      if (id === "\0" + name) {
-        return (load as Function).apply(this, [id, options]);
-      }
+    load: {
+      handler(id, options) {
+        if (id === "\0" + name) {
+          return (load as Function).apply(this, [id, options]);
+        }
+      },
     },
   };
 }

packages/fullstack/types/shared.ts

@@ -14,7 +14,7 @@ export type ImportAssetsOptions = {
   import?: string;
   environment?: string; // TODO: can remove?
   universal?: boolean;
-  clientEntry?: boolean; // TODO: dynamically add entry during build
+  asEntry?: boolean;
 };
 
 export type ImportAssetsResult = {