@esmx/rspack 3.0.0-rc.77 → 3.0.0-rc.79

package/src/module-link/config.ts

@@ -0,0 +1,157 @@
+import type { ExternalItem, ExternalItemFunctionData } from '@rspack/core';
+import type RspackChain from 'rspack-chain';
+import type { ParsedModuleLinkPluginOptions } from './types';
+
+export function applyEntryConfig(
+    chain: RspackChain,
+    opts: ParsedModuleLinkPluginOptions
+): void {
+    if (chain.entryPoints.has('main')) {
+        const mainEntry = chain.entry('main');
+        if (mainEntry.values().length === 0) {
+            chain.entryPoints.clear();
+        }
+    }
+
+    for (const value of Object.values(opts.exports)) {
+        if (value.file) {
+            const entry = chain.entry(value.name);
+            for (const preEntry of opts.preEntries) {
+                entry.add(preEntry);
+            }
+            entry.add(value.file);
+        }
+    }
+}
+
+export function applyModuleConfig(chain: RspackChain) {
+    chain.output
+        .set('module', true)
+        .set('chunkFormat', 'module')
+        .set('chunkLoading', 'import')
+        .set('workerChunkLoading', 'import');
+    chain.output.library({
+        type: 'module'
+    });
+}
+
+export function applyExternalsConfig(
+    chain: RspackChain,
+    opts: ParsedModuleLinkPluginOptions
+): void {
+    const existingExternals = chain.get('externals') || [];
+    const externals: ExternalItem[] = Array.isArray(existingExternals)
+        ? [...existingExternals]
+        : [existingExternals];
+
+    const compilerContext = chain.get('context') ?? process.cwd();
+    const externalFunc = createExternalsFunction(opts, compilerContext);
+    externals.push(externalFunc);
+
+    chain.externals(externals);
+}
+
+function createExternalsFunction(
+    opts: ParsedModuleLinkPluginOptions,
+    compilerContext: string
+) {
+    const importMap = new Map<string, string>();
+    let initPromise: Promise<void> | null = null;
+    type ResolvePath = (
+        request: string,
+        context?: string
+    ) => Promise<string | null>;
+    const init = (resolvePath: ResolvePath): Promise<void> => {
+        if (initPromise) return initPromise;
+
+        initPromise = (async () => {
+            await Promise.all(
+                Object.values(opts.exports).map(async (value) => {
+                    const identifier = value.pkg
+                        ? value.name
+                        : value.identifier;
+                    importMap.set(identifier, identifier);
+                    importMap.set(value.name, identifier);
+
+                    const resolvedPath = await resolvePath(value.file);
+                    if (resolvedPath) {
+                        importMap.set(resolvedPath, identifier);
+                    }
+                })
+            );
+
+            for (const key of Object.keys(opts.imports)) {
+                importMap.set(key, key);
+            }
+        })();
+
+        return initPromise;
+    };
+
+    const match = async (
+        request: string,
+        context: string,
+        resolvePath: ResolvePath
+    ): Promise<string | null> => {
+        if (!request) return null;
+
+        if (opts.deps.length > 0) {
+            const matchedDep = opts.deps.find(
+                (dep) => request === dep || request.startsWith(`${dep}/`)
+            );
+            if (matchedDep) {
+                return request;
+            }
+        }
+
+        let importName = importMap.get(request);
+        if (!importName) {
+            const resolvedPath = await resolvePath(request, context);
+            if (resolvedPath) {
+                importName = importMap.get(resolvedPath);
+            }
+        }
+
+        return importName || null;
+    };
+
+    const FILE_EXT_REGEX =
+        /\.worker\.(js|mjs|cjs|jsx|mjsx|cjsx|ts|mts|cts|tsx|mtsx|ctsx)$/i;
+
+    return async (data: ExternalItemFunctionData) => {
+        if (
+            !data.request ||
+            !data.context ||
+            !data.contextInfo?.issuer ||
+            FILE_EXT_REGEX.test(data.contextInfo.issuer)
+        )
+            return;
+
+        const defaultContext = compilerContext;
+        const resolvePath: ResolvePath = async (
+            request: string,
+            context = defaultContext
+        ): Promise<string | null> => {
+            if (!data.getResolve) {
+                return null;
+            }
+            const resolveFunc = data.getResolve();
+            return new Promise<string | null>((resolve) => {
+                resolveFunc(context, request, (err, res) => {
+                    resolve(typeof res === 'string' ? res : null);
+                });
+            });
+        };
+
+        await init(resolvePath);
+        const matchedIdentifier = await match(
+            data.request,
+            data.context,
+            resolvePath
+        );
+
+        if (matchedIdentifier) {
+            return `module-import ${matchedIdentifier}`;
+        }
+    };
+}

package/src/module-link/config1.ts

@@ -0,0 +1,24 @@
+import type RspackChain from 'rspack-chain';
+import {
+    applyEntryConfig,
+    applyExternalsConfig,
+    applyModuleConfig
+} from './config';
+import type { ParsedModuleLinkPluginOptions } from './types';
+
+export function applyChainConfig1(
+    chain: RspackChain,
+    opts: ParsedModuleLinkPluginOptions
+): void {
+    applyEntryConfig(chain, opts);
+    applyExternalsConfig(chain, opts);
+
+    // Set module compilation configuration
+    applyModuleConfig(chain);
+    if (chain.get('mode') === 'production') {
+        chain.output.library({
+            type: 'modern-module'
+        });
+        chain.optimization.set('avoidEntryIife', true);
+    }
+}

package/src/module-link/config2.ts

@@ -0,0 +1,28 @@
+import { rspack } from '@rspack/core';
+import type RspackChain from 'rspack-chain';
+import {
+    applyEntryConfig,
+    applyExternalsConfig,
+    applyModuleConfig
+} from './config';
+import type { ParsedModuleLinkPluginOptions } from './types';
+
+export function applyChainConfig2(
+    chain: RspackChain,
+    opts: ParsedModuleLinkPluginOptions
+): void {
+    applyEntryConfig(chain, opts);
+    applyExternalsConfig(chain, opts);
+
+    // Set module compilation configuration
+    if (chain.get('mode') === 'production') {
+        chain.output.set('module', true);
+
+        chain
+            .plugin('esm-library')
+            .use(new rspack.experiments.EsmLibraryPlugin());
+        chain.optimization.set('runtimeChunk', 'single');
+    } else {
+        applyModuleConfig(chain);
+    }
+}

package/src/module-link/index.ts

@@ -0,0 +1,19 @@
+import type RspackChain from 'rspack-chain';
+import { applyChainConfig1 } from './config1';
+// import { applyChainConfig2 } from './config2';
+import { ManifestPlugin } from './manifest-plugin';
+import { parseOptions } from './parse';
+import type { ModuleLinkPluginOptions } from './types';
+
+export function initModuleLink(
+    chain: RspackChain,
+    options: ModuleLinkPluginOptions
+): void {
+    const opts = parseOptions(options);
+    applyChainConfig1(chain, opts);
+    // applyChainConfig2(chain, opts);
+
+    chain.plugin('module-link-manifest').use(ManifestPlugin, [opts]);
+}
+
+export type { ModuleLinkPluginOptions } from './types';

package/src/module-link/manifest-plugin.ts

@@ -0,0 +1,179 @@
+import type { Compilation, Compiler, StatsCompilation } from '@rspack/core';
+import upath from 'upath';
+import type {
+    ManifestJson,
+    ManifestJsonChunks,
+    ManifestJsonExports,
+    ParsedModuleLinkPluginOptions
+} from './types';
+
+export const RSPACK_PLUGIN_NAME = 'rspack-module-link-plugin';
+
+export class ManifestPlugin {
+    constructor(private opts: ParsedModuleLinkPluginOptions) {}
+
+    apply(compiler: Compiler) {
+        const opts = this.opts;
+        const { Compilation } = compiler.rspack;
+        compiler.hooks.thisCompilation.tap(
+            RSPACK_PLUGIN_NAME,
+            (compilation) => {
+                let manifestJson: ManifestJson = {
+                    name: opts.name,
+                    exports: {},
+                    scopes: opts.scopes,
+                    files: [],
+                    chunks: {}
+                };
+
+                compilation.hooks.processAssets.tap(
+                    {
+                        name: RSPACK_PLUGIN_NAME,
+                        stage: Compilation.PROCESS_ASSETS_STAGE_ADDITIONAL
+                    },
+                    (assets) => {
+                        const stats = compilation.getStats().toJson({
+                            hash: true,
+                            entrypoints: true
+                        });
+
+                        const exports = getExports(opts, stats);
+                        const resources = Object.keys(assets)
+                            .map(transFileName)
+                            .filter((file) => !file.includes('hot-update'));
+                        manifestJson = {
+                            name: opts.name,
+                            exports: exports,
+                            scopes: opts.scopes,
+                            files: resources,
+                            chunks: getChunks(opts, compilation)
+                        };
+                        const { RawSource } = compiler.rspack.sources;
+
+                        compilation.emitAsset(
+                            'manifest.json',
+                            new RawSource(JSON.stringify(manifestJson, null, 4))
+                        );
+                    }
+                );
+
+                if (opts.injectChunkName) {
+                    compilation.hooks.processAssets.tap(
+                        {
+                            name: RSPACK_PLUGIN_NAME,
+                            stage: Compilation.PROCESS_ASSETS_STAGE_ADDITIONS
+                        },
+                        (assets) => {
+                            const { RawSource } = compiler.rspack.sources;
+                            for (const [key, value] of Object.entries(
+                                manifestJson.chunks
+                            )) {
+                                const asset = assets[value.js];
+                                if (!asset) {
+                                    return;
+                                }
+                                const source = new RawSource(
+                                    `import.meta.chunkName = import.meta.chunkName ?? ${JSON.stringify(key)};\n${asset.source()}`
+                                );
+
+                                compilation.updateAsset(value.js, source);
+                            }
+                        }
+                    );
+                }
+            }
+        );
+    }
+}
+
+function transFileName(fileName: string): string {
+    return fileName.replace(/^.\//, '');
+}
+
+export function getExports(
+    opts: ParsedModuleLinkPluginOptions,
+    stats: StatsCompilation
+): ManifestJsonExports {
+    const entrypoints = stats.entrypoints || {};
+    const exports: ManifestJsonExports = {};
+    for (const [key, value] of Object.entries(entrypoints)) {
+        const asset = value.assets?.find((item) => {
+            return (
+                item.name.endsWith(opts.ext) &&
+                item.name.startsWith(key) &&
+                !item.name.includes('hot-update')
+            );
+        });
+        if (!asset) continue;
+        if (key in opts.exports) {
+            exports[key] = {
+                ...opts.exports[key],
+                file: asset.name
+            };
+        }
+    }
+    return exports;
+}
+
+function getChunks(
+    opts: ParsedModuleLinkPluginOptions,
+    compilation: Compilation
+) {
+    const stats = compilation.getStats().toJson({
+        all: false,
+        chunks: true,
+        modules: true,
+        chunkModules: true,
+        ids: true
+    });
+    const buildChunks: ManifestJsonChunks = {};
+    if (!stats.chunks) return buildChunks;
+
+    for (const chunk of stats.chunks) {
+        const module = chunk.modules
+            ?.sort((a, b) => {
+                return (a.index ?? -1) - (b?.index ?? -1);
+            })
+            ?.find((module) => {
+                return module.moduleType?.includes('javascript/');
+            });
+        if (!module?.nameForCondition) continue;
+
+        const js = chunk.files?.find((file) => file.endsWith(opts.ext));
+        if (!js) continue;
+
+        const root = compilation.options.context ?? process.cwd();
+        const name = generateIdentifier({
+            root,
+            name: opts.name,
+            filePath: module.nameForCondition
+        });
+
+        const css = chunk.files?.filter((file) => file.endsWith('.css')) ?? [];
+        const resources = chunk.auxiliaryFiles ?? [];
+        buildChunks[name] = {
+            name,
+            js,
+            css,
+            resources
+        };
+    }
+    return buildChunks;
+}
+
+export function generateIdentifier({
+    root,
+    name,
+    filePath
+}: {
+    root: string;
+    name: string;
+    filePath: string;
+}) {
+    const unixFilePath = upath.toUnix(filePath);
+    if (!root) {
+        return `${name}@${unixFilePath}`;
+    }
+    const file = upath.relative(upath.toUnix(root), unixFilePath);
+    return `${name}@${file}`;
+}

package/src/module-link/parse.ts

@@ -0,0 +1,31 @@
+import type {
+    ModuleLinkPluginOptions,
+    ParsedModuleLinkPluginOptions
+} from './types';
+
+export function parseOptions(
+    options: ModuleLinkPluginOptions
+): ParsedModuleLinkPluginOptions {
+    const exports: ParsedModuleLinkPluginOptions['exports'] = {};
+    if (options.exports) {
+        for (const [name, item] of Object.entries(options.exports)) {
+            exports[name] = {
+                name,
+                pkg: !!item.pkg,
+                file: item.file,
+                identifier: `${options.name}/${name}`
+            };
+        }
+    }
+    const deps = (options.deps ?? []).filter((name) => name !== options.name);
+    return {
+        name: options.name,
+        ext: options.ext ? `.${options.ext}` : '.mjs',
+        exports,
+        imports: options.imports ?? {},
+        scopes: options.scopes ?? {},
+        injectChunkName: options.injectChunkName ?? false,
+        preEntries: options.preEntries ?? [],
+        deps
+    };
+}

package/src/module-link/types.ts

@@ -0,0 +1,31 @@
+import type { ManifestJsonExports } from '@esmx/core';
+
+export type {
+    ManifestJson,
+    ManifestJsonChunk,
+    ManifestJsonChunks,
+    ManifestJsonExport,
+    ManifestJsonExports
+} from '@esmx/core';
+
+export interface ModuleLinkPluginOptions {
+    name: string;
+    ext?: string;
+    imports?: Record<string, string>;
+    scopes?: Record<string, Record<string, string>>;
+    exports?: Record<string, { pkg?: boolean; file: string }>;
+    injectChunkName?: boolean;
+    preEntries?: string[];
+    deps?: string[];
+}
+
+export interface ParsedModuleLinkPluginOptions {
+    name: string;
+    ext: string;
+    exports: ManifestJsonExports;
+    imports: Record<string, string>;
+    scopes: Record<string, Record<string, string>>;
+    injectChunkName: boolean;
+    preEntries: string[];
+    deps: string[];
+}

package/src/rspack/app.ts

@@ -1,13 +1,13 @@
 import { pathToFileURL } from 'node:url';
 import {
     type App,
+    createApp,
     type Esmx,
     type Middleware,
+    mergeMiddlewares,
     RenderContext,
     type RenderContextOptions,
-    type ServerRenderHandle,
-    createApp,
-    mergeMiddlewares
+    type ServerRenderHandle
 } from '@esmx/core';
 import { createVmImport } from '@esmx/import';
 import type { RspackOptions } from '@rspack/core';
@@ -239,14 +239,14 @@ async function createMiddleware(
     ]);
     rsBuild.watch();
 
-    // @ts-ignore
+    // @ts-expect-error
     const hot = hotMiddleware(rsBuild.compilers[0], {
         path: `${esmx.basePath}hot-middleware`
     });
     return [
         (req, res, next) => {
             if (req.url?.startsWith(`${esmx.basePath}hot-middleware`)) {
-                // @ts-ignore
+                // @ts-expect-error
                 return hot(req, res, next);
             }
             return next();
@@ -271,14 +271,7 @@ function rewriteRender(esmx: Esmx) {
         const module = await vmImport(
             `${esmx.name}/src/entry.server`,
             import.meta.url,
-            {
-                console,
-                setTimeout,
-                clearTimeout,
-                process,
-                URL,
-                global
-            }
+            global
         );
         const serverRender: ServerRenderHandle = module[rc.entryName];
         if (typeof serverRender === 'function') {
@@ -314,6 +307,8 @@ async function start() {
 start();
 `.trim()
         );
+        console.log('\n');
+        console.log(esmx.generateSizeReport().text);
         return pack(esmx);
     };
 }

package/src/rspack/chain-config.ts

@@ -1,12 +1,10 @@
 import type { Esmx } from '@esmx/core';
-import {
-    type ModuleLinkPluginOptions,
-    moduleLinkPlugin
-} from '@esmx/rspack-module-link-plugin';
-import { rspack } from '@rspack/core';
 import type { RspackOptions } from '@rspack/core';
+import { rspack } from '@rspack/core';
 import RspackChain from 'rspack-chain';
 import nodeExternals from 'webpack-node-externals';
+import type { ModuleLinkPluginOptions } from '../module-link';
+import { initModuleLink } from '../module-link';
 import type { RspackAppOptions } from './app';
 import type { BuildTarget } from './build-target';
 
@@ -20,14 +18,14 @@ export function createChainConfig(
     const isServer = buildTarget === 'server';
     const isNode = buildTarget === 'node';
 
-    const config = new RspackChain();
+    const chain = new RspackChain();
 
-    config.context(esmx.root);
-    config.mode(esmx.isProd ? 'production' : 'development');
-    config.target(isClient ? 'web' : 'node24');
-    config.cache(!esmx.isProd);
+    chain.context(esmx.root);
+    chain.mode(esmx.isProd ? 'production' : 'development');
+    chain.target(isClient ? 'web' : 'node24');
+    chain.cache(!esmx.isProd);
 
-    config.output
+    chain.output
         .clean(esmx.isProd)
         .filename(
             !isNode && esmx.isProd
@@ -43,70 +41,78 @@ export function createChainConfig(
             isClient ? 'auto' : `${esmx.basePathPlaceholder}${esmx.basePath}`
         );
 
-    config.output.set(
+    chain.output.set(
         'cssFilename',
         esmx.isProd ? '[name].[contenthash:8].final.css' : '[name].css'
     );
-    config.output.set(
+    chain.output.set(
         'cssChunkFilename',
         esmx.isProd
             ? 'chunks/[name].[contenthash:8].final.css'
             : 'chunks/[name].css'
     );
-    config.output.path(esmx.resolvePath('dist', buildTarget));
+    chain.output.path(esmx.resolvePath('dist', buildTarget));
 
-    config.plugin('progress').use(rspack.ProgressPlugin, [
+    chain.plugin('progress').use(rspack.ProgressPlugin, [
         {
             prefix: buildTarget
         }
     ]);
 
-    config
-        .plugin('module-link')
-        .use(moduleLinkPlugin, [createModuleLinkConfig(esmx, buildTarget)]);
-
     if (isHot) {
-        config.plugin('hmr').use(rspack.HotModuleReplacementPlugin);
+        chain.plugin('hmr').use(rspack.HotModuleReplacementPlugin);
     }
 
-    config.module.parser.set('javascript', {
-        url: isClient ? true : 'relative'
+    chain.module.parser.set('javascript', {
+        url: isClient ? true : 'relative',
+        importMeta: false,
+        strictExportPresence: true
     });
 
-    config.module.generator.set('asset', {
+    chain.module.generator.set('asset', {
         emit: isClient
     });
 
-    config.module.generator.set('asset/resource', {
+    chain.module.generator.set('asset/resource', {
         emit: isClient
     });
 
-    config.resolve.alias.set(esmx.name, esmx.root);
+    chain.resolve.alias.set(esmx.name, esmx.root);
 
-    config.optimization
+    chain.optimization
         .minimize(options.minimize ?? esmx.isProd)
         .emitOnErrors(true);
 
-    config.externalsPresets({
+    chain.externalsPresets({
         web: isClient,
         node: isServer || isNode
     });
-    config.externalsType('module-import');
+
+    chain.experiments({
+        ...chain.get('experiments'),
+        outputModule: true
+    });
+    chain.externalsType('module-import');
 
     if (isNode) {
-        config.externals([
-            // @ts-ignore
+        chain.externals([
+            // @ts-expect-error
             nodeExternals({
-                // @ts-ignore
+                // @ts-expect-error
                 importType: 'module-import'
             })
         ]);
     }
-    config.experiments({
-        nativeWatcher: true
+    chain.experiments({
+        nativeWatcher: true,
+        rspackFuture: {
+            bundlerInfo: { force: false }
+        }
     });
 
-    return config;
+    initModuleLink(chain, createModuleLinkConfig(esmx, buildTarget));
+
+    return chain;
 }
 
 function createModuleLinkConfig(

package/src/rspack/index.ts

@@ -1,8 +1,8 @@
 export {
-    type RspackAppConfigContext,
+    createRspackApp,
     type RspackAppChainContext,
-    type RspackAppOptions,
-    createRspackApp
+    type RspackAppConfigContext,
+    type RspackAppOptions
 } from './app';
 export type { BuildTarget } from './build-target';
 export { RSPACK_LOADER } from './loader';