@rmc-toolkit/vite 0.1.0 → 0.2.3

package/README.md

@@ -0,0 +1,71 @@
+# @rmc-toolkit/vite
+
+Vite/Rollup adapter for [Runtime Module Composition](https://runtime-module-composition.dev): injects the generated import map into a host's HTML before any module script runs, externalizes import-map-owned specifiers so Vite doesn't bundle or rewrite them, and provides `defineSliceBuild()` for a slice's own build config.
+
+## Install
+
+```bash
+npm install @rmc-toolkit/vite @rmc-toolkit/core vite
+```
+
+## Quick example
+
+**Host** — wire the plugin into `vite.config.ts`:
+
+```ts
+import { defineConfig } from "vite";
+import { runtimeComposition } from "@rmc-toolkit/vite";
+import { manifest } from "./runtime-composition.manifest";
+
+export default defineConfig({
+  plugins: [
+    ...runtimeComposition({
+      manifest,
+      environment: "development",
+    }),
+  ],
+});
+```
+
+`runtimeComposition()` returns two plugins: one that injects the generated import map into `index.html`, and one that tells Vite not to bundle or rewrite specifiers the import map owns.
+
+**Slice** — build as an ESM library that externalizes anything the import map owns:
+
+```ts
+import { defineConfig } from "vite";
+import { defineSliceBuild, createRollupExternal } from "@rmc-toolkit/vite";
+import { manifest } from "./runtime-composition.manifest";
+
+export default defineConfig(({ mode }) => {
+  const sliceBuild = defineSliceBuild({ mode, devPort: 5174, sliceName: "search" });
+
+  return mode === "development"
+    ? sliceBuild
+    : {
+        ...sliceBuild,
+        build: {
+          ...sliceBuild.build,
+          rollupOptions: { external: createRollupExternal(manifest) },
+        },
+      };
+});
+```
+
+`sliceName` determines where the production build lands (`dist/{sliceName}/index.mjs`), matching the path convention `resolveRoute()`/`createImportMap()` already assume — a slice's build output requires no separate assembly step to match its production URL.
+
+## What's in here
+
+- `runtimeComposition` — the combined host-side plugin pair (import-map injection + externalization).
+- `includeRuntimeImportMap`, `externalizeRuntimeComposition` — the two plugins individually, if you need only one.
+- `createRollupExternal` — a Rollup `external` function, for a slice's production build.
+- `defineSliceBuild` — mode-aware Vite config for a slice (dev-server port, the library-build `process.env.NODE_ENV` fix, entry auto-detection).
+- `includeHostedImportMap`, `buildLocalImportMapScript` — for serving the import map as a standalone hosted script rather than inlined into HTML (e.g. a production static-asset host), with local-dev override support.
+
+Full signatures and behavior for every export: [API Reference](https://runtime-module-composition.dev/api-reference/#vite-adapter-rmc-toolkitvite).
+
+## Documentation
+
+- [Getting Started](https://runtime-module-composition.dev/getting-started/) — install and wire up a host + slice end to end
+- [API Reference](https://runtime-module-composition.dev/api-reference/#vite-adapter-rmc-toolkitvite)
+- [Technical Implementation](https://runtime-module-composition.dev/technical-implementation/) — the architecture and failure modes behind the pattern
+- [Multi-Framework Demo](https://runtime-module-composition.dev/demo/) — a full, runnable reference implementation

package/dist/index.d.ts

@@ -7,7 +7,7 @@ export type RuntimeCompositionViteOptions = {
     externalize?: boolean;
 };
 export declare const createRollupExternal: (manifest: RuntimeCompositionManifest) => ((source: string) => boolean);
-export declare const externalizeRuntimeComposition: ({ manifest, }: RuntimeCompositionViteOptions) => Plugin;
+export declare const externalizeRuntimeComposition: ({ manifest, environment, }: RuntimeCompositionViteOptions) => Plugin;
 export declare const includeRuntimeImportMap: ({ manifest, environment, }: RuntimeCompositionViteOptions) => Plugin;
 export declare const runtimeComposition: (options: RuntimeCompositionViteOptions) => Plugin[];
 export type LocalSliceOverride = {
@@ -20,6 +20,6 @@ export type IncludeHostedImportMapOptions = {
     path?: string;
     localSlice?: LocalSliceOverride;
 };
-export declare const includeHostedImportMap: ({ manifest, path, localSlice, }: IncludeHostedImportMapOptions) => Plugin;
+export declare const includeHostedImportMap: ({ manifest, path, localSlice, }: IncludeHostedImportMapOptions) => Plugin[];
 export { defineSliceBuild, type SliceBuildOptions } from "./slice-build.js";
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAIL,KAAK,0BAA0B,EAC/B,KAAK,kBAAkB,EACxB,MAAM,mBAAmB,CAAC;AAC3B,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,MAAM,CAAC;AAEnC,MAAM,MAAM,6BAA6B,GAAG;IAC1C,QAAQ,EAAE,0BAA0B,CAAC;IACrC,WAAW,CAAC,EAAE,kBAAkB,CAAC;IACjC,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB,CAAC;AAEF,eAAO,MAAM,oBAAoB,GAC/B,UAAU,0BAA0B,KACnC,CAAC,CAAC,MAAM,EAAE,MAAM,KAAK,OAAO,CAAoC,CAAC;AAEpE,eAAO,MAAM,6BAA6B,GAAI,eAE3C,6BAA6B,KAAG,MAwBlC,CAAC;AAEF,eAAO,MAAM,uBAAuB,GAAI,4BAGrC,6BAA6B,KAAG,MAgBjC,CAAC;AAEH,eAAO,MAAM,kBAAkB,GAC7B,SAAS,6BAA6B,KACrC,MAAM,EAYR,CAAC;AAEF,MAAM,MAAM,kBAAkB,GAAG;IAC/B,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,CAAC;CACd,CAAC;AAEF,eAAO,MAAM,yBAAyB,GACpC,UAAU,0BAA0B,EACpC,YAAY,kBAAkB,KAC7B,MAkBF,CAAC;AAEF,MAAM,MAAM,6BAA6B,GAAG;IAC1C,QAAQ,EAAE,0BAA0B,CAAC;IACrC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,UAAU,CAAC,EAAE,kBAAkB,CAAC;CACjC,CAAC;AAEF,eAAO,MAAM,sBAAsB,GAAI,iCAIpC,6BAA6B,KAAG,MAmCjC,CAAC;AAEH,OAAO,EAAE,gBAAgB,EAAE,KAAK,iBAAiB,EAAE,MAAM,kBAAkB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAML,KAAK,0BAA0B,EAC/B,KAAK,kBAAkB,EACxB,MAAM,mBAAmB,CAAC;AAC3B,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,MAAM,CAAC;AAGnC,MAAM,MAAM,6BAA6B,GAAG;IAC1C,QAAQ,EAAE,0BAA0B,CAAC;IACrC,WAAW,CAAC,EAAE,kBAAkB,CAAC;IACjC,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB,CAAC;AAEF,eAAO,MAAM,oBAAoB,GAC/B,UAAU,0BAA0B,KACnC,CAAC,CAAC,MAAM,EAAE,MAAM,KAAK,OAAO,CAAoC,CAAC;AAEpE,eAAO,MAAM,6BAA6B,GAAI,4BAG3C,6BAA6B,KAAG,MAoDlC,CAAC;AAEF,eAAO,MAAM,uBAAuB,GAAI,4BAGrC,6BAA6B,KAAG,MAgBjC,CAAC;AAEH,eAAO,MAAM,kBAAkB,GAC7B,SAAS,6BAA6B,KACrC,MAAM,EAYR,CAAC;AAEF,MAAM,MAAM,kBAAkB,GAAG;IAC/B,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,CAAC;CACd,CAAC;AAEF,eAAO,MAAM,yBAAyB,GACpC,UAAU,0BAA0B,EACpC,YAAY,kBAAkB,KAC7B,MAkBF,CAAC;AAEF,MAAM,MAAM,6BAA6B,GAAG;IAC1C,QAAQ,EAAE,0BAA0B,CAAC;IACrC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,UAAU,CAAC,EAAE,kBAAkB,CAAC;CACjC,CAAC;AA+BF,eAAO,MAAM,sBAAsB,GAAI,iCAIpC,6BAA6B,KAAG,MAAM,EAsCxC,CAAC;AAEF,OAAO,EAAE,gBAAgB,EAAE,KAAK,iBAAiB,EAAE,MAAM,kBAAkB,CAAC"}

package/dist/index.js

@@ -1,7 +1,9 @@
-import { createExternalMatcher, createImportMap, createImportMapBootstrapScript, } from "@rmc-toolkit/core";
+import { createExternalMatcher, createImportMap, createImportMapBootstrapScript, resolveImportMapSpecifier, } from "@rmc-toolkit/core";
+import { jsImportMapScriptPlugin } from "vite-plugin-js-importmap-script";
 export const createRollupExternal = (manifest) => createExternalMatcher(manifest);
-export const externalizeRuntimeComposition = ({ manifest, }) => {
+export const externalizeRuntimeComposition = ({ manifest, environment, }) => {
     const isExternal = createExternalMatcher(manifest);
+    let devImportMap = null;
     return {
         name: "runtime-module-composition-externalize",
         enforce: "pre",
@@ -12,12 +14,37 @@ export const externalizeRuntimeComposition = ({ manifest, }) => {
                 },
             };
         },
+        configResolved(config) {
+            // Vite's production build (Rollup) already handles a bare specifier
+            // marked `external: true` correctly — it preserves it untouched in
+            // the output bundle for the browser's import map to resolve. Vite's
+            // dev server does not: its import-analysis step rewrites any bare
+            // specifier merely marked external into an internal /@id/<specifier>
+            // placeholder request, and nothing serves that path. Only in dev do
+            // we need to resolve to the real URL ourselves instead.
+            if (config.command === "serve") {
+                devImportMap = createImportMap(manifest, {
+                    environment: environment ?? "development",
+                });
+            }
+        },
         resolveId(source) {
             if (!isExternal(source)) {
                 return null;
             }
+            // `resolved` can be undefined here only if devImportMap is null (build
+            // mode — see configResolved above) or if resolveImportMapSpecifier
+            // can't resolve `source` against it. The latter isn't expected to be
+            // reachable for a well-formed manifest: every specifier isExternal()
+            // matches (namespace prefix, external-deps prefix, exactImports keys,
+            // sliceOverrides specifiers) has a corresponding entry unconditionally
+            // added by createImportMap, so the same prefixes/keys this matcher
+            // checks are exactly what the import map also contains. The `?? source`
+            // fallback exists as a safety net for that theoretical case, not
+            // because it's expected to fire.
+            const resolved = devImportMap && resolveImportMapSpecifier(devImportMap, source);
             return {
-                id: source,
+                id: resolved ?? source,
                 external: true,
             };
         },
@@ -65,38 +92,70 @@ export const buildLocalImportMapScript = (manifest, localSlice) => {
         environment: "development",
     });
 };
-export const includeHostedImportMap = ({ manifest, path = "/js/importmap.js", localSlice, }) => ({
-    name: "runtime-module-composition-hosted-import-map",
-    configureServer(server) {
-        server.middlewares.use(path, (req, res, next) => {
-            // Connect (which Vite's dev server middlewares are built on) mounts
-            // handlers by path *prefix*: it matches any request whose pathname
-            // starts with `path` and is followed by end-of-string, "/", or ".",
-            // then strips the matched prefix from `req.url` before invoking the
-            // handler. That means req.url here is *relative to the mount point*,
-            // and a request for "/js/importmap.js.map" or
-            // "/js/importmap.js/anything" also reaches this handler (as
-            // req.url === "/.map" or "/anything"), not just the exact endpoint.
-            // Comparing req.url against the outer `path` would never match,
-            // since Connect has already removed that prefix — the only way to
-            // detect "this is genuinely the exact endpoint" is to check that the
-            // remaining, query-stripped req.url is empty or "/".
-            const method = req.method ?? "GET";
-            if (method !== "GET" && method !== "HEAD") {
-                next();
-                return;
-            }
-            const remainder = (req.url ?? "/").split("?")[0] ?? "/";
-            if (remainder !== "" && remainder !== "/") {
-                next();
-                return;
-            }
-            const script = localSlice
-                ? buildLocalImportMapScript(manifest, localSlice)
-                : createImportMapBootstrapScript(manifest, { environment: "development" });
-            res.setHeader("Content-Type", "text/javascript");
-            res.end(script);
-        });
+// Consuming HTML must declare the hosted import map as an ordinary external
+// script, in this exact attribute order, for the ordering-safety plugin
+// below to find and reposition it:
+//
+//   <script data-src-type="importmap" src="/js/importmap.js"></script>
+//
+// Per the HTML spec, a document's "import maps allowed" flag flips to false
+// (permanently, for that page load) the moment the first module script or
+// modulepreload is fetched — Vite's dev server always injects its own
+// `type="module"` scripts (the HMR client, and the React refresh preamble
+// when using @vitejs/plugin-react). If either of those gets prepared before
+// this script tag is parsed, the import map is rejected outright (not
+// merely reordered), and every bare-specifier import in the app fails. Once
+// rejected, a later import map can't be reinserted to recover from it either
+// — the flag never flips back to true for that page load.
+//
+// jsImportMapScriptPlugin() closes this by removing the tag from wherever
+// it naturally sits in the document and force-reinserting it immediately
+// after <head> on every dev request, rather than trusting that this
+// plugin's own transformIndexHtml hook happens to run after Vite's
+// internal ones (an ordering relationship Vite doesn't document or
+// guarantee across versions). It also appends `?dev`/`&dev` to the src so
+// the served script can detect dev mode the same way
+// createImportMapBootstrapScript()'s own `?dev` detection does.
+//
+// Restricted to `apply: "serve"`: the plugin unconditionally appends the
+// dev-flag query on every transformIndexHtml call it receives, with no
+// mode-awareness of its own — the calling app is responsible for only
+// wiring it in for dev, exactly as it must never run during `vite build`.
+export const includeHostedImportMap = ({ manifest, path = "/js/importmap.js", localSlice, }) => [
+    {
+        name: "runtime-module-composition-hosted-import-map",
+        configureServer(server) {
+            server.middlewares.use(path, (req, res, next) => {
+                // Connect (which Vite's dev server middlewares are built on) mounts
+                // handlers by path *prefix*: it matches any request whose pathname
+                // starts with `path` and is followed by end-of-string, "/", or ".",
+                // then strips the matched prefix from `req.url` before invoking the
+                // handler. That means req.url here is *relative to the mount point*,
+                // and a request for "/js/importmap.js.map" or
+                // "/js/importmap.js/anything" also reaches this handler (as
+                // req.url === "/.map" or "/anything"), not just the exact endpoint.
+                // Comparing req.url against the outer `path` would never match,
+                // since Connect has already removed that prefix — the only way to
+                // detect "this is genuinely the exact endpoint" is to check that the
+                // remaining, query-stripped req.url is empty or "/".
+                const method = req.method ?? "GET";
+                if (method !== "GET" && method !== "HEAD") {
+                    next();
+                    return;
+                }
+                const remainder = (req.url ?? "/").split("?")[0] ?? "/";
+                if (remainder !== "" && remainder !== "/") {
+                    next();
+                    return;
+                }
+                const script = localSlice
+                    ? buildLocalImportMapScript(manifest, localSlice)
+                    : createImportMapBootstrapScript(manifest, { environment: "development" });
+                res.setHeader("Content-Type", "text/javascript");
+                res.end(script);
+            });
+        },
     },
-});
+    { ...jsImportMapScriptPlugin(), apply: "serve" },
+];
 export { defineSliceBuild } from "./slice-build.js";

package/dist/index.test.js

@@ -1,6 +1,6 @@
 import { defineManifest } from "@rmc-toolkit/core";
 import { describe, expect, test } from "vitest";
-import { buildLocalImportMapScript, defineSliceBuild, includeHostedImportMap, includeRuntimeImportMap, runtimeComposition, } from "./index.js";
+import { buildLocalImportMapScript, defineSliceBuild, externalizeRuntimeComposition, includeHostedImportMap, includeRuntimeImportMap, runtimeComposition, } from "./index.js";
 const manifest = defineManifest({
     namespace: "@acme",
     assetsOrigin: "https://assets.example.com",
@@ -43,11 +43,94 @@ describe("vite adapter", () => {
         const config = defineSliceBuild({
             mode: "development",
             devPort: 5301,
+            sliceName: "react-app",
             entry: "src/index.ts",
         });
         expect(config).toEqual({ server: { port: 5301 } });
     });
 });
+describe("externalizeRuntimeComposition dev-server resolution", () => {
+    test("build mode returns the bare specifier unchanged (existing, verified-working behavior)", () => {
+        const plugin = externalizeRuntimeComposition({
+            manifest,
+            environment: "development",
+        });
+        if (typeof plugin.configResolved !== "function") {
+            throw new TypeError("Expected configResolved to be a function.");
+        }
+        plugin.configResolved({
+            command: "build",
+        });
+        if (typeof plugin.resolveId !== "function") {
+            throw new TypeError("Expected resolveId to be a function.");
+        }
+        const result = plugin.resolveId("@esm.sh/react");
+        expect(result).toEqual({ id: "@esm.sh/react", external: true });
+    });
+    test("dev server mode resolves to the real URL instead of the bare specifier", () => {
+        const plugin = externalizeRuntimeComposition({
+            manifest: {
+                ...manifest,
+                externalDeps: [{ name: "react", version: "19.2.4" }],
+            },
+            environment: "development",
+        });
+        if (typeof plugin.configResolved !== "function") {
+            throw new TypeError("Expected configResolved to be a function.");
+        }
+        plugin.configResolved({
+            command: "serve",
+        });
+        if (typeof plugin.resolveId !== "function") {
+            throw new TypeError("Expected resolveId to be a function.");
+        }
+        const result = plugin.resolveId("@esm.sh/react");
+        expect(result).toEqual({
+            id: "https://esm.sh/react@19.2.4",
+            external: true,
+        });
+    });
+    test("dev server mode resolves a subpath entry to its own real URL, not the catch-all prefix", () => {
+        const plugin = externalizeRuntimeComposition({
+            manifest: {
+                ...manifest,
+                externalDeps: [{ name: "react-dom/client", version: "19.2.4" }],
+            },
+            environment: "development",
+        });
+        if (typeof plugin.configResolved !== "function") {
+            throw new TypeError("Expected configResolved to be a function.");
+        }
+        plugin.configResolved({
+            command: "serve",
+        });
+        if (typeof plugin.resolveId !== "function") {
+            throw new TypeError("Expected resolveId to be a function.");
+        }
+        const result = plugin.resolveId("@esm.sh/react-dom/client");
+        expect(result).toEqual({
+            id: "https://esm.sh/react-dom@19.2.4/client",
+            external: true,
+        });
+    });
+    test("resolveId still returns null for a non-external specifier in dev server mode", () => {
+        const plugin = externalizeRuntimeComposition({
+            manifest,
+            environment: "development",
+        });
+        if (typeof plugin.configResolved !== "function") {
+            throw new TypeError("Expected configResolved to be a function.");
+        }
+        plugin.configResolved({
+            command: "serve",
+        });
+        if (typeof plugin.resolveId !== "function") {
+            throw new TypeError("Expected resolveId to be a function.");
+        }
+        const result = plugin.resolveId("lodash");
+        expect(result).toBeNull();
+    });
+});
 const createMockServer = () => {
     const middlewares = [];
     const use = (path, handler) => {
@@ -65,9 +148,9 @@ describe("includeHostedImportMap", () => {
         expect(script).toContain('"@acme/":"https://assets.example.com/"');
     });
     test("serves the generated script from the default middleware path", () => {
-        const plugin = includeHostedImportMap({ manifest });
+        const [plugin] = includeHostedImportMap({ manifest });
         const { server, middlewares } = createMockServer();
-        if (typeof plugin.configureServer !== "function") {
+        if (!plugin || typeof plugin.configureServer !== "function") {
             throw new TypeError("Expected configureServer to be a function.");
         }
         plugin.configureServer(server);
@@ -90,21 +173,21 @@ describe("includeHostedImportMap", () => {
         expect(body).toContain('"@acme/":"https://assets.example.com/"');
     });
     test("uses a custom middleware path when provided", () => {
-        const plugin = includeHostedImportMap({ manifest, path: "/custom.js" });
+        const [plugin] = includeHostedImportMap({ manifest, path: "/custom.js" });
         const { server, middlewares } = createMockServer();
-        if (typeof plugin.configureServer !== "function") {
+        if (!plugin || typeof plugin.configureServer !== "function") {
             throw new TypeError("Expected configureServer to be a function.");
         }
         plugin.configureServer(server);
         expect(middlewares[0]?.path).toBe("/custom.js");
     });
     test("applies the localSlice override when serving the script", () => {
-        const plugin = includeHostedImportMap({
+        const [plugin] = includeHostedImportMap({
             manifest,
             localSlice: { name: "search", port: 5173 },
         });
         const { server, middlewares } = createMockServer();
-        if (typeof plugin.configureServer !== "function") {
+        if (!plugin || typeof plugin.configureServer !== "function") {
             throw new TypeError("Expected configureServer to be a function.");
         }
         plugin.configureServer(server);
@@ -119,9 +202,9 @@ describe("includeHostedImportMap", () => {
         expect(body).toContain('"@acme/search/":"http://localhost:5173/"');
     });
     test("calls next() instead of end() for a method other than GET/HEAD", () => {
-        const plugin = includeHostedImportMap({ manifest });
+        const [plugin] = includeHostedImportMap({ manifest });
         const { server, middlewares } = createMockServer();
-        if (typeof plugin.configureServer !== "function") {
+        if (!plugin || typeof plugin.configureServer !== "function") {
             throw new TypeError("Expected configureServer to be a function.");
         }
         plugin.configureServer(server);
@@ -141,9 +224,9 @@ describe("includeHostedImportMap", () => {
         expect(endCalled).toBe(false);
     });
     test("calls next() instead of end() when the matched path is a prefix-extended variant", () => {
-        const plugin = includeHostedImportMap({ manifest });
+        const [plugin] = includeHostedImportMap({ manifest });
         const { server, middlewares } = createMockServer();
-        if (typeof plugin.configureServer !== "function") {
+        if (!plugin || typeof plugin.configureServer !== "function") {
             throw new TypeError("Expected configureServer to be a function.");
         }
         plugin.configureServer(server);
@@ -166,4 +249,21 @@ describe("includeHostedImportMap", () => {
         expect(nextCalled).toBe(true);
         expect(endCalled).toBe(false);
     });
+    test("includes the ordering-safety HTML transform plugin, restricted to dev", () => {
+        const [, htmlTransformPlugin] = includeHostedImportMap({ manifest });
+        expect(htmlTransformPlugin?.apply).toBe("serve");
+        expect(typeof htmlTransformPlugin?.transformIndexHtml).toBe("function");
+    });
+    test("the HTML transform plugin repositions the importmap script tag to the front of <head> and appends ?dev", () => {
+        const [, htmlTransformPlugin] = includeHostedImportMap({ manifest });
+        if (typeof htmlTransformPlugin?.transformIndexHtml !== "function") {
+            throw new TypeError("Expected transformIndexHtml to be a function.");
+        }
+        const transformIndexHtml = htmlTransformPlugin.transformIndexHtml;
+        const html = "<html><head><title>t</title>" +
+            '<script data-src-type="importmap" src="/js/importmap.js"></script>' +
+            "</head><body></body></html>";
+        const result = transformIndexHtml(html);
+        expect(result.indexOf('src="/js/importmap.js?dev"')).toBeLessThan(result.indexOf("<title>"));
+    });
 });

package/dist/slice-build.d.ts

@@ -3,6 +3,7 @@ export declare const resolveEntry: (cwd: string, entry?: string) => string;
 export type SliceBuildOptions = {
     mode: string;
     devPort: number;
+    sliceName: string;
     entry?: string;
 };
 export declare const defineSliceBuild: (options: SliceBuildOptions) => UserConfig;

package/dist/slice-build.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"slice-build.d.ts","sourceRoot":"","sources":["../src/slice-build.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,MAAM,CAAC;AAEvC,eAAO,MAAM,YAAY,GAAI,KAAK,MAAM,EAAE,QAAQ,MAAM,KAAG,MAgB1D,CAAC;AAEF,MAAM,MAAM,iBAAiB,GAAG;IAC9B,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF,eAAO,MAAM,gBAAgB,GAAI,SAAS,iBAAiB,KAAG,UA2B7D,CAAC"}
+{"version":3,"file":"slice-build.d.ts","sourceRoot":"","sources":["../src/slice-build.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,MAAM,CAAC;AAEvC,eAAO,MAAM,YAAY,GAAI,KAAK,MAAM,EAAE,QAAQ,MAAM,KAAG,MAgB1D,CAAC;AAEF,MAAM,MAAM,iBAAiB,GAAG;IAC9B,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,EAAE,MAAM,CAAC;IAChB,SAAS,EAAE,MAAM,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF,eAAO,MAAM,gBAAgB,GAAI,SAAS,iBAAiB,KAAG,UAgC7D,CAAC"}

package/dist/slice-build.js

@@ -30,6 +30,11 @@ export const defineSliceBuild = (options) => {
             "process.env.NODE_ENV": JSON.stringify("production"),
         },
         build: {
+            // Lands the slice's own build output at the same {sliceName} path
+            // segment resolveRoute()/createImportMap() already assume it will be
+            // deployed at ({assetsOrigin}/{sliceName}/index.mjs) — see
+            // docs/superpowers/specs/2026-07-07-slice-build-output-path-design.md.
+            outDir: `dist/${options.sliceName}`,
             lib: {
                 entry: resolvedEntry,
                 formats: ["es"],

package/dist/slice-build.test.js

@@ -43,6 +43,7 @@ describe("defineSliceBuild", () => {
         const config = defineSliceBuild({
             mode: "development",
             devPort: 5301,
+            sliceName: "react-app",
             entry: "src/index.tsx",
         });
         expect(config).toEqual({ server: { port: 5301 } });
@@ -51,6 +52,7 @@ describe("defineSliceBuild", () => {
         const config = defineSliceBuild({
             mode: "production",
             devPort: 5301,
+            sliceName: "react-app",
             entry: "src/index.tsx",
         });
         expect(config.preview).toEqual({ cors: true });
@@ -68,4 +70,22 @@ describe("defineSliceBuild", () => {
             expect(lib.fileName("es", "index")).toBe("index.mjs");
         }
     });
+    test("build mode writes to dist/{sliceName}, not a flat dist/", () => {
+        const config = defineSliceBuild({
+            mode: "production",
+            devPort: 5301,
+            sliceName: "react-app",
+            entry: "src/index.tsx",
+        });
+        expect(config.build?.outDir).toBe("dist/react-app");
+    });
+    test("dev mode is unaffected by sliceName", () => {
+        const config = defineSliceBuild({
+            mode: "development",
+            devPort: 5301,
+            sliceName: "react-app",
+            entry: "src/index.tsx",
+        });
+        expect(config).toEqual({ server: { port: 5301 } });
+    });
 });

package/package.json

@@ -1,7 +1,12 @@
 {
   "name": "@rmc-toolkit/vite",
-  "version": "0.1.0",
+  "version": "0.2.3",
   "type": "module",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/runtime-module-composition/rmc-toolkit",
+    "directory": "packages/vite"
+  },
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "exports": {
@@ -17,14 +22,14 @@
     "access": "public"
   },
   "peerDependencies": {
-    "@rmc-toolkit/core": "0.1.0",
+    "@rmc-toolkit/core": "0.2.3",
     "vite": ">=5"
   },
   "dependencies": {
-    "@rmc-toolkit/core": "0.1.0"
+    "@rmc-toolkit/core": "0.2.3",
+    "vite-plugin-js-importmap-script": "^1.0.0"
   },
   "scripts": {
     "build": "tsc -b"
   }
 }
-