@esmx/core 3.0.0-rc.116 → 3.0.0-rc.118

package/src/pack-config.ts

@@ -20,15 +20,8 @@ import type { Esmx } from './core';
  * import type { EsmxOptions } from '@esmx/core';
  *
  * export default {
- *   modules: {
- *     // Configure modules to export
- *     exports: [
- *       'root:src/components/button.vue',
- *       'root:src/utils/format.ts',
- *       'pkg:vue',
- *       'pkg:vue-router'
- *     ]
- *   },
+ *   // Module exports/provides are declared in package.json "esmx"
+ *   // (RFC 0001), not here. entry.node.ts keeps behavior + packaging.
  *   // Packaging configuration
  *   pack: {
  *     // Enable packaging functionality

package/src/render-context.ts

@@ -1,6 +1,20 @@
 import path from 'node:path';
 import serialize from 'serialize-javascript';
 import type { Esmx } from './core';
+import {
+    DEFAULT_MODULE_ENTRY,
+    getEntryChunkId,
+    type ParsedModuleConfigEntryTarget
+} from './module-config';
+
+/**
+ * Resolves the client entry target threaded through the module config
+ * (RFC 0001 Phase 2), falling back to the legacy default for modules
+ * without a resolved client entry (e.g. `lib: true`).
+ */
+function getClientEntry(esmx: Esmx): ParsedModuleConfigEntryTarget {
+    return esmx.moduleConfig.entry.client ?? DEFAULT_MODULE_ENTRY.client;
+}
 
 /**
  * Configuration options interface for RenderContext
@@ -676,9 +690,14 @@ export class RenderContext {
         modulepreload: [],
         resources: []
     };
-    private _importMap: { src: string | null; code: string } = {
+    private _importMap: {
+        src: string | null;
+        code: string;
+        integrity: Record<string, string> | null;
+    } = {
         src: '',
-        code: ''
+        code: '',
+        integrity: null
     };
     /**
      * Define the generation mode for importmap
@@ -1001,7 +1020,8 @@ export class RenderContext {
      */
     public async commit() {
         const { esmx } = this;
-        const chunkSet = new Set([`${esmx.name}@src/entry.client.ts`]);
+        const clientEntry = getClientEntry(esmx);
+        const chunkSet = new Set([getEntryChunkId(esmx.name, clientEntry)]);
         for (const item of this.importMetaSet) {
             if ('chunkName' in item && typeof item.chunkName === 'string') {
                 chunkSet.add(item.chunkName);
@@ -1039,7 +1059,7 @@ export class RenderContext {
 
         const paths = await esmx.getStaticImportPaths(
             'client',
-            `${esmx.name}/src/entry.client`
+            `${esmx.name}/${clientEntry.name}`
         );
         paths?.forEach((filepath) =>
             files.modulepreload.add(getUrlPath(filepath))
@@ -1269,7 +1289,8 @@ export class RenderContext {
      * ```
      */
     public moduleEntry() {
-        return `<script type="module">import "${this.esmx.name}/src/entry.client";</script>`;
+        const clientEntry = getClientEntry(this.esmx);
+        return `<script type="module">import "${this.esmx.name}/${clientEntry.name}";</script>`;
     }
 
     /**
@@ -1319,8 +1340,15 @@ export class RenderContext {
      * ```
      */
     public modulePreload() {
+        const { integrity } = this._importMap;
         return this.files.modulepreload
-            .map((url) => `<link rel="modulepreload" href="${url}">`)
+            .map((url) => {
+                const hash = integrity?.[url];
+                if (hash) {
+                    return `<link rel="modulepreload" href="${url}" integrity="${hash}">`;
+                }
+                return `<link rel="modulepreload" href="${url}">`;
+            })
             .join('');
     }
 }

package/src/utils/import-map.test.ts

@@ -2,6 +2,7 @@ import { assert, describe, test } from 'vitest';
 import type { GetImportMapOptions, ImportMapManifest } from './import-map';
 import {
     compressImportMap,
+    createClientImportMap,
     createImportMap,
     createImportsMap,
     createScopesMap,
@@ -1778,3 +1779,263 @@ describe('compressImportMap', () => {
         });
     });
 });
+
+describe('createClientImportMap integrity', () => {
+    const getFile = (name: string, file: string) => `/${name}/${file}`;
+    const getScope = (name: string, scope: string) => scope;
+
+    test('omits integrity when no manifest provides it', () => {
+        const manifests: ImportMapManifest[] = [
+            {
+                name: 'module-a',
+                exports: {
+                    index: {
+                        name: 'index',
+                        pkg: false,
+                        file: 'src/index.mjs',
+                        identifier: 'module-a'
+                    }
+                },
+                scopes: {}
+            }
+        ];
+
+        const result = createClientImportMap({ manifests, getFile, getScope });
+
+        assert.isUndefined(result.integrity);
+    });
+
+    test('converts relative integrity paths to absolute URL paths', () => {
+        const manifests: ImportMapManifest[] = [
+            {
+                name: 'ssr-micro-vue2',
+                exports: {
+                    routes: {
+                        name: 'routes',
+                        pkg: false,
+                        file: 'src/routes.xxx.mjs',
+                        identifier: 'ssr-micro-vue2/routes'
+                    }
+                },
+                scopes: {},
+                integrity: {
+                    'src/routes.xxx.mjs': 'sha384-abc'
+                }
+            }
+        ];
+
+        const result = createClientImportMap({ manifests, getFile, getScope });
+
+        assert.deepEqual(result.integrity, {
+            '/ssr-micro-vue2/src/routes.xxx.mjs': 'sha384-abc'
+        });
+    });
+
+    test('merges integrity across multiple manifests', () => {
+        const manifests: ImportMapManifest[] = [
+            {
+                name: 'module-a',
+                exports: {},
+                scopes: {},
+                integrity: { 'src/a.mjs': 'sha384-a' }
+            },
+            {
+                name: 'module-b',
+                exports: {},
+                scopes: {},
+                integrity: { 'src/b.mjs': 'sha384-b' }
+            }
+        ];
+
+        const result = createClientImportMap({ manifests, getFile, getScope });
+
+        assert.deepEqual(result.integrity, {
+            '/module-a/src/a.mjs': 'sha384-a',
+            '/module-b/src/b.mjs': 'sha384-b'
+        });
+    });
+});
+
+describe('createClientImportMap code-split chunk scopes', () => {
+    const getFile = (name: string, file: string) => `/${name}/${file}`;
+    const getScope = (name: string, scope: string) => `/${name}${scope}`;
+
+    const makeVueModule = (name: string, hash: string): ImportMapManifest => ({
+        name,
+        exports: {
+            entry: {
+                name: 'entry',
+                pkg: false,
+                file: `src/entry.client.${hash}.mjs`,
+                identifier: `${name}/src/entry.client`
+            },
+            vue: {
+                name: 'vue',
+                pkg: true,
+                file: `vue.${hash}.mjs`,
+                identifier: `${name}/vue`
+            }
+        },
+        scopes: { '': { vue: `${name}/vue` } },
+        // A Vite-style code-split chunk that is NOT an export.
+        chunks: { routesChunk: { js: `chunks/routes.${hash}.mjs` } }
+    });
+
+    test('scopes a module code-split chunk to its own externals', () => {
+        // Two modules each bundling a different "vue" file → vue must stay
+        // scoped (never promoted to a single global import).
+        const manifests = [
+            makeVueModule('app-a', 'aaa'),
+            makeVueModule('app-b', 'bbb')
+        ];
+
+        const result = createClientImportMap({ manifests, getFile, getScope });
+
+        assert.isUndefined(result.imports?.vue);
+        assert.equal(
+            result.scopes?.['/app-a/chunks/routes.aaa.mjs']?.vue,
+            '/app-a/vue.aaa.mjs'
+        );
+        assert.equal(
+            result.scopes?.['/app-b/chunks/routes.bbb.mjs']?.vue,
+            '/app-b/vue.bbb.mjs'
+        );
+    });
+
+    test('skips a chunk scope when a global import already resolves it', () => {
+        // A single module → its sole "vue" target gets promoted to a global
+        // import, so the chunk needs no redundant scope of its own.
+        const result = createClientImportMap({
+            manifests: [makeVueModule('solo', 'aaa')],
+            getFile,
+            getScope
+        });
+
+        assert.equal(result.imports?.vue, '/solo/vue.aaa.mjs');
+        assert.isUndefined(result.scopes?.['/solo/chunks/routes.aaa.mjs']);
+    });
+
+    test('is a no-op for all-in-one manifests without code-split chunks', () => {
+        const allInOne: ImportMapManifest = {
+            name: 'rspack-app',
+            exports: {
+                entry: {
+                    name: 'entry',
+                    pkg: false,
+                    file: 'src/entry.client.zzz.mjs',
+                    identifier: 'rspack-app/src/entry.client'
+                },
+                vue: {
+                    name: 'vue',
+                    pkg: true,
+                    file: 'vue.zzz.mjs',
+                    identifier: 'rspack-app/vue'
+                }
+            },
+            scopes: { '': { vue: 'rspack-app/vue' } }
+            // no `chunks` — rspack all-in-one output
+        };
+        // Pair with a different-vue module so vue stays scoped, not promoted.
+        const result = createClientImportMap({
+            manifests: [allInOne, makeVueModule('app-b', 'bbb')],
+            getFile,
+            getScope
+        });
+
+        const invented = Object.keys(result.scopes ?? {}).filter((k) =>
+            k.startsWith('/rspack-app/chunks/')
+        );
+        assert.deepEqual(invented, []);
+    });
+
+    test('applies all of a module externals to its chunk', () => {
+        const make = (name: string, hash: string): ImportMapManifest => ({
+            name,
+            exports: {
+                vue: {
+                    name: 'vue',
+                    pkg: true,
+                    file: `vue.${hash}.mjs`,
+                    identifier: `${name}/vue`
+                },
+                pinia: {
+                    name: 'pinia',
+                    pkg: true,
+                    file: `pinia.${hash}.mjs`,
+                    identifier: `${name}/pinia`
+                }
+            },
+            scopes: { '': { vue: `${name}/vue`, pinia: `${name}/pinia` } },
+            chunks: { storeChunk: { js: `chunks/store.${hash}.mjs` } }
+        });
+        // Two modules with different targets → both externals stay scoped.
+        const result = createClientImportMap({
+            manifests: [make('app-a', 'aaa'), make('app-b', 'bbb')],
+            getFile,
+            getScope
+        });
+
+        const scope = result.scopes?.['/app-a/chunks/store.aaa.mjs'];
+        assert.equal(scope?.vue, '/app-a/vue.aaa.mjs');
+        assert.equal(scope?.pinia, '/app-a/pinia.aaa.mjs');
+    });
+});
+
+describe('multi-version coexistence (scope isolation)', () => {
+    // Two providers each declare their own copy of `vue` (single-owner per
+    // (package,major) still allows legitimate cross-major coexistence). Each
+    // copy must stay isolated in its own module scope, never collapsed.
+    const layeredManifests: ImportMapManifest[] = [
+        {
+            name: 'base',
+            exports: {
+                vue: {
+                    name: 'vue',
+                    pkg: true,
+                    file: 'vue.base.mjs',
+                    identifier: 'base/vue'
+                }
+            },
+            scopes: { '': { vue: 'base/vue' } },
+            chunks: { 'base@src/app.ts': { js: 'app.base.mjs' } },
+            integrity: {
+                'vue.base.mjs': 'sha384-base',
+                'app.base.mjs': 'sha384-base-app'
+            }
+        },
+        {
+            name: 'vue-base',
+            exports: {
+                vue: {
+                    name: 'vue',
+                    pkg: true,
+                    file: 'vue.winner.mjs',
+                    identifier: 'vue-base/vue'
+                }
+            },
+            scopes: { '': { vue: 'vue-base/vue' } },
+            integrity: { 'vue.winner.mjs': 'sha384-winner' }
+        }
+    ];
+    const getFile = (name: string, file: string) => `/${name}/${file}`;
+    const getScope = (name: string, scope: string) => `/${name}${scope}`;
+
+    test('each copy stays isolated in its own scope', () => {
+        const result = createImportMap({
+            manifests: layeredManifests,
+            getFile,
+            getScope
+        });
+
+        assert.equal(result.imports['base/vue'], '/base/vue.base.mjs');
+        assert.equal(
+            result.imports['vue-base/vue'],
+            '/vue-base/vue.winner.mjs'
+        );
+        assert.equal(result.scopes['/base/']?.vue, '/base/vue.base.mjs');
+        assert.equal(
+            result.scopes['/vue-base/']?.vue,
+            '/vue-base/vue.winner.mjs'
+        );
+    });
+});

package/src/utils/import-map.ts

@@ -1,6 +1,12 @@
 import type { ImportMap, ScopesMap, SpecifierMap } from '@esmx/import';
 import { pathWithoutIndex } from './path-without-index';
 
+/**
+ * Import map with `imports` and `scopes` fully resolved. The optional
+ * `integrity` field is layered on later by {@link createClientImportMap}.
+ */
+type ResolvedImportMap = Required<Pick<ImportMap, 'imports' | 'scopes'>>;
+
 export interface ImportMapManifest {
     name: string;
     exports: Record<
@@ -13,6 +19,18 @@ export interface ImportMapManifest {
         }
     >;
     scopes: Record<string, Record<string, string>>;
+    /**
+     * Emitted chunk files (keyed arbitrarily). Each chunk's `js` is a relative
+     * path (e.g. "chunks/routes.xxx.mjs"). Used so a module's scope also covers
+     * its code-split chunks, not just its export files.
+     */
+    chunks?: Record<string, { js: string }>;
+    /**
+     * Subresource Integrity hashes for this module's build output files.
+     * Keys are relative file paths (e.g. "src/routes.xxx.mjs"), values are
+     * integrity strings (e.g. "sha384-..."). Only present in production builds.
+     */
+    integrity?: Record<string, string>;
 }
 
 export interface GetImportMapOptions {
@@ -102,8 +120,8 @@ export function createScopesMap(
  * @see https://issues.chromium.org/issues/453147451
  */
 export function fixImportMapNestedScopes(
-    importMap: Required<ImportMap>
-): Required<ImportMap> {
+    importMap: ResolvedImportMap
+): ResolvedImportMap {
     Object.entries(importMap.scopes)
         .sort(([pathA], [pathB]) => {
             const depthA = pathA.split('/').length;
@@ -125,8 +143,48 @@ export function fixImportMapNestedScopes(
     return importMap;
 }
 
-export function compressImportMap(importMap: Required<ImportMap>): ImportMap {
-    const compressed: Required<ImportMap> = {
+/**
+ * A module's code-split chunk files (e.g. Vite/Rollup facade+impl splits) are
+ * not exports, so they are absent from `imports` and miss the per-file scopes
+ * produced by {@link fixImportMapNestedScopes}. Those chunks still import the
+ * module's bare externals (e.g. "vue"), so without a scope the browser throws
+ * "Failed to resolve module specifier". This adds, for each chunk file, the
+ * module's bare-specifier mappings — but only the ones NOT already satisfied by
+ * a matching global `imports` entry. Runs AFTER compression so it never skews
+ * the global-promotion heuristic (which would wrongly hoist a multi-version
+ * dep like "vue"). rspack's all-in-one output has no such chunks, so this is a
+ * no-op there.
+ */
+function addCodeSplitChunkScopes(
+    importMap: ImportMap,
+    base: ResolvedImportMap,
+    options: GetImportMapOptions
+): void {
+    for (const manifest of options.manifests) {
+        const moduleScope = manifest.scopes?.[''];
+        const chunks = manifest.chunks;
+        if (!moduleScope || !chunks) continue;
+
+        const resolved: SpecifierMap = {};
+        for (const [specifier, identifier] of Object.entries(moduleScope)) {
+            const target = base.imports[identifier] ?? identifier;
+            // Skip specifiers a global import already resolves to the same file.
+            if (importMap.imports?.[specifier] === target) continue;
+            resolved[specifier] = target;
+        }
+        if (Object.keys(resolved).length === 0) continue;
+
+        for (const chunk of Object.values(chunks)) {
+            if (!chunk.js) continue;
+            const url = options.getFile(manifest.name, chunk.js);
+            importMap.scopes ??= {};
+            importMap.scopes[url] = { ...importMap.scopes[url], ...resolved };
+        }
+    }
+}
+
+export function compressImportMap(importMap: ResolvedImportMap): ImportMap {
+    const compressed: ResolvedImportMap = {
         imports: { ...importMap.imports },
         scopes: {}
     };
@@ -184,7 +242,7 @@ export function createImportMap({
     manifests,
     getFile,
     getScope
-}: GetImportMapOptions): Required<ImportMap> {
+}: GetImportMapOptions): ResolvedImportMap {
     const imports = createImportsMap(manifests, getFile);
 
     const scopes = createScopesMap(imports, manifests, getScope);
@@ -197,5 +255,33 @@ export function createImportMap({
 export function createClientImportMap(options: GetImportMapOptions): ImportMap {
     const base = createImportMap(options);
     const fixed = fixImportMapNestedScopes(base);
-    return compressImportMap(fixed);
+    const compressed = compressImportMap(fixed);
+    // Code-split chunk files are not exports, so they miss the per-file scopes
+    // above. Add them post-compression so it never skews global promotion.
+    addCodeSplitChunkScopes(compressed, base, options);
+
+    // Collect integrity from all manifests
+    // Manifest integrity keys are relative filenames (e.g., "src/routes.xxx.mjs")
+    // Import map values are absolute URLs (e.g., "/ssr-micro-vue2/src/routes.xxx.mjs")
+    // Must convert relative paths to absolute URLs to match browser expectations
+    const integrity: Record<string, string> = {};
+    for (const manifest of options.manifests) {
+        if (manifest.integrity) {
+            for (const [filePath, hash] of Object.entries(manifest.integrity)) {
+                // Convert relative file path to absolute URL path
+                // e.g., "src/routes.xxx.mjs" -> "/ssr-micro-vue2/src/routes.xxx.mjs"
+                const urlPath = `/${manifest.name}/${filePath}`;
+                integrity[urlPath] = hash;
+            }
+        }
+    }
+
+    if (Object.keys(integrity).length > 0) {
+        return {
+            ...compressed,
+            integrity
+        };
+    }
+
+    return compressed;
 }