feat(fullstack): expose ViteBuilder.writeAssetsManifest (#1288)

This allows a way to avoid rather inflexible `buildApp` hook and let users / downstream integration to invoke `writeAssetsManifest` at the appropriate timing. This will help nitrojs/nitro#3662

## todo

- [x] docs
- [x] tests

Author: hi-ogawa

README.md

@@ -168,10 +168,11 @@ export default defineConfig({
   },
   builder: {
     async buildApp(builder) {
-      // Currently, the plugin requires this specific build order
-      // to dynamically add client entries
+      // The plugin requires "ssr -> client" build order to support dynamically adding client entries
       await builder.build(builder.environments["ssr"]!);
       await builder.build(builder.environments["client"]!);
+      // `writeAssetsManifest` is exposed under `builder` to allow flexible build pipeline
+      await builder.writeAssetsManifest()
     }
   }
 })

examples/basic/vite.config.ts

@@ -36,6 +36,7 @@ export default defineConfig((_env) => ({
     async buildApp(builder) {
       await builder.build(builder.environments["ssr"]!);
       await builder.build(builder.environments["client"]!);
+      await builder.writeAssetsManifest();
     },
   },
 }));

src/plugin.ts

@@ -11,6 +11,7 @@ import {
   type Plugin,
   type ResolvedConfig,
   type Rollup,
+  type ViteBuilder,
   type ViteDevServer,
   isCSSRequest,
   isRunnableDevEnvironment,
@@ -155,6 +156,84 @@ export function assetsPlugin(pluginOpts?: FullstackPluginOptions): Plugin[] {
     }
   }
 
+  let writeAssetsManifestCalled = false;
+  async function writeAssetsManifest(builder: ViteBuilder) {
+    if (writeAssetsManifestCalled) return;
+    writeAssetsManifestCalled = true;
+
+    // build manifest of imported assets
+    const manifest: BuildAssetsManifest = {};
+    for (const [environmentName, metas] of Object.entries(
+      importAssetsMetaMap,
+    )) {
+      const bundle = bundleMap[environmentName]!;
+      const assetDepsMap = collectAssetDeps(bundle);
+      for (const [id, meta] of Object.entries(metas)) {
+        const found = assetDepsMap[id];
+        if (!found) {
+          builder.config.logger.error(
+            `[vite-plugin-fullstack] failed to find built chunk for ${meta.id} imported by ${meta.importerEnvironment} environment`,
+          );
+          return;
+        }
+        const result: ImportAssetsResultRaw = {
+          js: [],
+          css: [],
+        };
+        const { chunk, deps } = found;
+        // TODO: base
+        if (environmentName === "client") {
+          result.entry = `/${chunk.fileName}`;
+          result.js = deps.js.map((fileName) => ({
+            href: `/${fileName}`,
+          }));
+        }
+        result.css = deps.css.map((fileName) => ({
+          href: `/${fileName}`,
+        }));
+
+        // add single css when `cssCodeSplit: false`
+        // https://github.com/vitejs/vite/blob/3a92bc79b306a01b8aaf37f80b2239eaf6e488e7/packages/vite/src/node/plugins/css.ts#L999-L1011
+        if (!builder.environments[environmentName]!.config.build.cssCodeSplit) {
+          const singleCss = Object.values(bundle).find(
+            (v) =>
+              v.type === "asset" && v.originalFileNames.includes("style.css"),
+          );
+          if (singleCss) {
+            result.css.push({ href: `/${singleCss.fileName}` });
+          }
+        }
+
+        (manifest[environmentName] ??= {})[meta.key] = result;
+      }
+    }
+
+    // write manifest to importer environments
+    const importerEnvironments = new Set(
+      Object.values(importAssetsMetaMap)
+        .flatMap((metas) => Object.values(metas))
+        .flatMap((meta) => meta.importerEnvironment),
+    );
+    for (const environmentName of importerEnvironments) {
+      const outDir = builder.environments[environmentName]!.config.build.outDir;
+      fs.writeFileSync(
+        path.join(outDir, BUILD_ASSETS_MANIFEST_NAME),
+        `export default ${JSON.stringify(manifest, null, 2)};`,
+      );
+
+      // copy assets to client (mainly for server css)
+      const clientOutDir = builder.environments["client"]!.config.build.outDir;
+      for (const asset of Object.values(bundleMap[environmentName]!)) {
+        if (asset.type === "asset") {
+          const srcFile = path.join(outDir, asset.fileName);
+          const destFile = path.join(clientOutDir, asset.fileName);
+          fs.mkdirSync(path.dirname(destFile), { recursive: true });
+          fs.copyFileSync(srcFile, destFile);
+        }
+      }
+    }
+  }
+
   return [
     {
       name: "fullstack:assets",
@@ -348,85 +427,23 @@ export function assetsPlugin(pluginOpts?: FullstackPluginOptions): Plugin[] {
           }
         }
       },
+      buildApp: {
+        order: "pre",
+        async handler(builder) {
+          // expose writeAssetsManifest to builder
+          builder.writeAssetsManifest = async () => {
+            await writeAssetsManifest(builder);
+          };
+        },
+      },
+    },
+    {
+      name: "fullstack:write-assets-manifest-post",
       buildApp: {
         order: "post",
         async handler(builder) {
-          // build manifest of imported assets
-          const manifest: BuildAssetsManifest = {};
-          for (const [environmentName, metas] of Object.entries(
-            importAssetsMetaMap,
-          )) {
-            const bundle = bundleMap[environmentName]!;
-            const assetDepsMap = collectAssetDeps(bundle);
-            for (const [id, meta] of Object.entries(metas)) {
-              const found = assetDepsMap[id];
-              if (!found) {
-                return this.error(
-                  `[vite-plugin-fullstack] failed to find built chunk for ${meta.id} imported by ${meta.importerEnvironment} environment`,
-                );
-              }
-              const result: ImportAssetsResultRaw = {
-                js: [],
-                css: [],
-              };
-              const { chunk, deps } = found;
-              // TODO: base
-              if (environmentName === "client") {
-                result.entry = `/${chunk.fileName}`;
-                result.js = deps.js.map((fileName) => ({
-                  href: `/${fileName}`,
-                }));
-              }
-              result.css = deps.css.map((fileName) => ({
-                href: `/${fileName}`,
-              }));
-
-              // add single css when `cssCodeSplit: false`
-              // https://github.com/vitejs/vite/blob/3a92bc79b306a01b8aaf37f80b2239eaf6e488e7/packages/vite/src/node/plugins/css.ts#L999-L1011
-              if (
-                !builder.environments[environmentName]!.config.build
-                  .cssCodeSplit
-              ) {
-                const singleCss = Object.values(bundle).find(
-                  (v) =>
-                    v.type === "asset" &&
-                    v.originalFileNames.includes("style.css"),
-                );
-                if (singleCss) {
-                  result.css.push({ href: `/${singleCss.fileName}` });
-                }
-              }
-
-              (manifest[environmentName] ??= {})[meta.key] = result;
-            }
-          }
-
-          // write manifest to importer environments
-          const importerEnvironments = new Set(
-            Object.values(importAssetsMetaMap)
-              .flatMap((metas) => Object.values(metas))
-              .flatMap((meta) => meta.importerEnvironment),
-          );
-          for (const environmentName of importerEnvironments) {
-            const outDir =
-              builder.environments[environmentName]!.config.build.outDir;
-            fs.writeFileSync(
-              path.join(outDir, BUILD_ASSETS_MANIFEST_NAME),
-              `export default ${JSON.stringify(manifest, null, 2)};`,
-            );
-
-            // copy assets to client (mainly for server css)
-            const clientOutDir =
-              builder.environments["client"]!.config.build.outDir;
-            for (const asset of Object.values(bundleMap[environmentName]!)) {
-              if (asset.type === "asset") {
-                const srcFile = path.join(outDir, asset.fileName);
-                const destFile = path.join(clientOutDir, asset.fileName);
-                fs.mkdirSync(path.dirname(destFile), { recursive: true });
-                fs.copyFileSync(srcFile, destFile);
-              }
-            }
-          }
+          // ensure this is called at least once
+          await builder.writeAssetsManifest();
         },
       },
     },

types/index.d.ts

@@ -10,3 +10,14 @@ declare global {
     };
   }
 }
+
+declare module "vite" {
+  interface ViteBuilder {
+    /**
+     * The plugin injects this method to allow flexible build pipeline
+     * for downstream integrations. This will be automatically called during the plugin
+     * post `buildApp` hook when it was not called by users.
+     */
+    writeAssetsManifest(): Promise<void>;
+  }
+}