@esmx/rspack 3.0.0-rc.11 → 3.0.0-rc.111

package/dist/rspack/pack.test.mjs

@@ -0,0 +1,180 @@
+import { describe, expect, it } from "vitest";
+import { contentHash, generateExports } from "./pack.mjs";
+describe("generateExports", () => {
+  it("should generate exports with both client and server files", () => {
+    const clientExports = {
+      "src/entry.client": {
+        file: "src/entry.client.95f6085b.final.mjs",
+        name: "src/entry.client",
+        pkg: true,
+        identifier: "ssr-vue2-remote/src/entry.client"
+      },
+      "src/components/index": {
+        file: "src/components/index.a73d6772.final.mjs",
+        name: "src/components/index",
+        pkg: true,
+        identifier: "ssr-vue2-remote/src/components/index"
+      }
+    };
+    const serverExports = {
+      "src/entry.server": {
+        file: "src/entry.server.b85ed2ff.final.mjs",
+        name: "src/entry.server",
+        pkg: true,
+        identifier: "ssr-vue2-remote/src/entry.server"
+      },
+      "src/components/index": {
+        file: "src/components/index.12b57db5.final.mjs",
+        name: "src/components/index",
+        pkg: true,
+        identifier: "ssr-vue2-remote/src/components/index"
+      }
+    };
+    const result = generateExports({
+      client: clientExports,
+      server: serverExports
+    });
+    expect(result).toEqual({
+      "./src/entry.client": "./client/src/entry.client.95f6085b.final.mjs",
+      "./src/entry.server": "./server/src/entry.server.b85ed2ff.final.mjs",
+      "./src/components/index": {
+        default: "./server/src/components/index.12b57db5.final.mjs",
+        browser: "./client/src/components/index.a73d6772.final.mjs"
+      }
+    });
+  });
+  it("should merge with existing exports", () => {
+    const clientExports = {
+      index: {
+        file: "index.js",
+        name: "index",
+        pkg: true,
+        identifier: "index"
+      }
+    };
+    const serverExports = {
+      index: {
+        file: "index.js",
+        name: "index",
+        pkg: true,
+        identifier: "index"
+      }
+    };
+    const existingExports = {
+      "./custom": "./custom.js"
+    };
+    const result = generateExports({
+      client: clientExports,
+      server: serverExports,
+      base: existingExports
+    });
+    expect(result).toEqual({
+      "./custom": "./custom.js",
+      ".": {
+        default: "./server/index.js",
+        browser: "./client/index.js"
+      }
+    });
+  });
+  it("should handle empty exports", () => {
+    const clientExports = {};
+    const serverExports = {};
+    const result = generateExports({
+      client: clientExports,
+      server: serverExports
+    });
+    expect(result).toEqual({});
+  });
+  it("should handle only client exports", () => {
+    const clientExports = {
+      utils: {
+        file: "utils.js",
+        name: "utils",
+        pkg: true,
+        identifier: "utils"
+      }
+    };
+    const serverExports = {};
+    const result = generateExports({
+      client: clientExports,
+      server: serverExports
+    });
+    expect(result).toEqual({
+      "./utils": "./client/utils.js"
+    });
+  });
+  it("should handle only server exports", () => {
+    const clientExports = {};
+    const serverExports = {
+      api: {
+        file: "api.js",
+        name: "api",
+        pkg: true,
+        identifier: "api"
+      }
+    };
+    const result = generateExports({
+      client: clientExports,
+      server: serverExports
+    });
+    expect(result).toEqual({
+      "./api": "./server/api.js"
+    });
+  });
+  it("should handle index export correctly", () => {
+    const clientExports = {
+      index: {
+        file: "index.js",
+        name: "index",
+        pkg: true,
+        identifier: "index"
+      }
+    };
+    const serverExports = {
+      index: {
+        file: "index.js",
+        name: "index",
+        pkg: true,
+        identifier: "index"
+      }
+    };
+    const result = generateExports({
+      client: clientExports,
+      server: serverExports
+    });
+    expect(result).toEqual({
+      ".": {
+        default: "./server/index.js",
+        browser: "./client/index.js"
+      }
+    });
+  });
+});
+describe("contentHash", () => {
+  it("should generate SHA256 hash for buffer", () => {
+    const buffer = Buffer.from("test content");
+    const result = contentHash(buffer);
+    expect(result).toMatch(/^sha256-[a-f0-9]{64}$/);
+    expect(result).toBe(
+      "sha256-6ae8a75555209fd6c44157c0aed8016e763ff435a19cf186f76863140143ff72"
+    );
+  });
+  it("should use custom algorithm when provided", () => {
+    const buffer = Buffer.from("test content");
+    const result = contentHash(buffer, "md5");
+    expect(result).toMatch(/^md5-[a-f0-9]{32}$/);
+    expect(result).toBe("md5-9473fdd0d880a43c21b7778d34872157");
+  });
+  it("should handle empty buffer", () => {
+    const buffer = Buffer.from("");
+    const result = contentHash(buffer);
+    expect(result).toBe(
+      "sha256-e3b0c44298fc1c149afbf4c8996fb92427ae41e4649b934ca495991b7852b855"
+    );
+  });
+  it("should handle binary data", () => {
+    const buffer = Buffer.from([0, 1, 2, 3, 255]);
+    const result = contentHash(buffer);
+    expect(result).toMatch(/^sha256-[a-f0-9]{64}$/);
+  });
+});

package/dist/rspack/utils/rsbuild.d.ts

@@ -0,0 +1,6 @@
+import { type RspackOptions } from '@rspack/core';
+export declare function createRsBuild(options: RspackOptions[]): {
+    readonly compilers: import("@rspack/core").Compiler[];
+    build(): Promise<boolean>;
+    watch(): void;
+};

package/dist/{utils → rspack/utils}/rsbuild.mjs

@@ -1,5 +1,8 @@
 import { styleText } from "node:util";
 import { rspack } from "@rspack/core";
+function showError(message) {
+  console.error(styleText("red", message));
+}
 export function createRsBuild(options) {
   const multiCompiler = rspack(options);
   return {
@@ -10,17 +13,18 @@ export function createRsBuild(options) {
       return new Promise((resolve) => {
         multiCompiler.run((err, stats) => {
           if (err) {
+            showError(err.message);
             return resolve(false);
           }
           if (stats?.hasErrors()) {
             stats.toJson({ errors: true })?.errors?.forEach((err2) => {
-              console.log(styleText("red", err2.message));
+              showError(err2.message);
             });
             return resolve(false);
           }
           multiCompiler.close((err2) => {
             if (err2) {
-              console.log(styleText("red", err2.message));
+              showError(err2.message);
               return resolve(false);
             }
             process.nextTick(() => {
@@ -33,7 +37,7 @@ export function createRsBuild(options) {
     watch() {
       const watching = multiCompiler.watch({}, (err, stats) => {
         if (err) {
-          console.error(err);
+          console.log(styleText("red", err.message));
           return;
         }
         if (stats?.hasErrors()) {
@@ -61,37 +65,3 @@ export function createRsBuild(options) {
     }
   };
 }
-export class RsBuild {
-  compiler;
-  constructor(options) {
-    this.compiler = rspack(options);
-  }
-  async build() {
-    return new Promise((resolve) => {
-      this.compiler.run((err, stats) => {
-        if (err) {
-          return resolve(false);
-        }
-        if (stats?.hasErrors()) {
-          stats.toJson({ errors: true })?.errors?.forEach((err2) => {
-            console.error(err2);
-          });
-          return resolve(false);
-        }
-        this.compiler.close((err2) => {
-          if (err2) {
-            console.error(err2);
-            return resolve(false);
-          }
-          process.nextTick(() => {
-            resolve(true);
-          });
-        });
-      });
-    });
-  }
-  watch() {
-    const watching = this.compiler.watch({}, () => {
-    });
-  }
-}

package/dist/rspack-html/index.d.ts

@@ -0,0 +1,168 @@
+import type { Esmx } from '@esmx/core';
+import { type SwcLoaderOptions } from '@rspack/core';
+import { type BuildTarget, RSPACK_LOADER, type RspackAppOptions } from '../rspack';
+import type { TargetSetting } from './target-setting';
+export type { TargetSetting };
+export interface RspackHtmlAppOptions extends RspackAppOptions {
+    /**
+     * CSS output mode configuration
+     *
+     * @default Automatically selected based on environment:
+     * - Production: 'css', outputs CSS to separate files for better caching and parallel loading
+     * - Development: 'js', bundles CSS into JS to support hot module replacement (HMR) for instant style updates
+     *
+     * - 'css': Output CSS to separate CSS files
+     * - 'js': Bundle CSS into JS files and dynamically inject styles at runtime
+     * - false: Disable default CSS processing configuration, requires manual loader rule configuration
+     *
+     * @example
+     * ```ts
+     * // Use environment default configuration
+     * css: undefined
+     *
+     * // Force output to separate CSS files
+     * css: 'css'
+     *
+     * // Force bundle into JS
+     * css: 'js'
+     *
+     * // Custom CSS processing
+     * css: false
+     * ```
+     */
+    css?: 'css' | 'js' | false;
+    /**
+     * Custom loader configuration
+     *
+     * Allows replacing default loader implementations, useful for switching to framework-specific loaders
+     *
+     * @example
+     * ```ts
+     * // Use Vue's style-loader
+     * loaders: {
+     *   styleLoader: 'vue-style-loader'
+     * }
+     * ```
+     */
+    loaders?: Partial<Record<keyof typeof RSPACK_LOADER, string>>;
+    /**
+     * Configure style injection method. For complete options, see:
+     * https://github.com/webpack-contrib/style-loader
+     *
+     * @example
+     * ```ts
+     * styleLoader: {
+     *   injectType: 'singletonStyleTag',
+     *   attributes: { id: 'app-styles' }
+     * }
+     * ```
+     */
+    styleLoader?: Record<string, any>;
+    /**
+     * Configure CSS modules, URL resolution, etc. For complete options, see:
+     * https://github.com/webpack-contrib/css-loader
+     *
+     * @example
+     * ```ts
+     * cssLoader: {
+     *   modules: true,
+     *   url: false
+     * }
+     * ```
+     */
+    cssLoader?: Record<string, any>;
+    /**
+     * Configure Less compilation options. For complete options, see:
+     * https://github.com/webpack-contrib/less-loader
+     *
+     * @example
+     * ```ts
+     * lessLoader: {
+     *   lessOptions: {
+     *     javascriptEnabled: true,
+     *     modifyVars: { '@primary-color': '#1DA57A' }
+     *   }
+     * }
+     * ```
+     */
+    lessLoader?: Record<string, any>;
+    /**
+     * Automatically inject global style resources. For complete options, see:
+     * https://github.com/yenshih/style-resources-loader
+     *
+     * @example
+     * ```ts
+     * styleResourcesLoader: {
+     *   patterns: [
+     *     './src/styles/variables.less',
+     *     './src/styles/mixins.less'
+     *   ]
+     * }
+     * ```
+     */
+    styleResourcesLoader?: Record<string, any>;
+    /**
+     * Configure TypeScript/JavaScript compilation options. For complete options, see:
+     * https://rspack.dev/guide/features/builtin-swc-loader
+     *
+     * @example
+     * ```ts
+     * swcLoader: {
+     *   jsc: {
+     *     parser: {
+     *       syntax: 'typescript',
+     *       decorators: true
+     *     },
+     *     transform: {
+     *       legacyDecorator: true
+     *     }
+     *   }
+     * }
+     * ```
+     */
+    swcLoader?: SwcLoaderOptions;
+    /**
+     * Define compile-time global constants, supports setting different values for different build targets
+     * For complete documentation, see: https://rspack.dev/plugins/webpack/define-plugin
+     *
+     * @example
+     * ```ts
+     * // Unified value
+     * definePlugin: {
+     *   'process.env.APP_ENV': JSON.stringify('production')
+     * }
+     *
+     * // Values for different build targets
+     * definePlugin: {
+     *   'process.env.IS_SERVER': {
+     *     server: 'true',
+     *     client: 'false'
+     *   }
+     * }
+     * ```
+     */
+    definePlugin?: Record<string, string | Partial<Record<BuildTarget, string>>>;
+    /**
+     * Set the target runtime environment for the code, affecting code compilation downgrading and polyfill injection
+     *
+     * @example
+     * ```ts
+     * // Global compatible mode
+     * target: 'compatible'
+     *
+     * // Global modern mode
+     * target: 'modern'
+     *
+     * // Global custom targets
+     * target: ['chrome>=89', 'edge>=89', 'firefox>=108', 'safari>=16.4', 'node>=24']
+     *
+     * // Per-build-target configuration
+     * target: {
+     *   client: 'modern',
+     *   server: ['node>=24']
+     * }
+     * ```
+     */
+    target?: TargetSetting;
+}
+export declare function createRspackHtmlApp(esmx: Esmx, options?: RspackHtmlAppOptions): Promise<import("@esmx/core").App>;

package/dist/rspack-html/index.mjs

@@ -0,0 +1,160 @@
+import {
+  rspack
+} from "@rspack/core";
+import NodePolyfillPlugin from "node-polyfill-webpack-plugin";
+import {
+  createRspackApp,
+  RSPACK_LOADER
+} from "../rspack/index.mjs";
+import { getTargetSetting } from "./target-setting.mjs";
+export async function createRspackHtmlApp(esmx, options) {
+  options = {
+    ...options,
+    css: options?.css ? options.css : esmx.isProd ? "css" : "js"
+  };
+  return createRspackApp(esmx, {
+    ...options,
+    chain(context) {
+      const { chain, buildTarget, esmx: esmx2 } = context;
+      chain.stats("errors-warnings");
+      chain.devtool(false);
+      chain.cache(false);
+      configureAssetRules(chain, esmx2);
+      chain.module.rule("json").test(/\.json$/i).type("json");
+      configureWorkerRule(chain, esmx2, options);
+      configureTypeScriptRule(chain, buildTarget, options);
+      configureOptimization(chain, options);
+      chain.plugin("node-polyfill").use(NodePolyfillPlugin);
+      configureDefinePlugin(chain, buildTarget, options);
+      chain.resolve.extensions.clear().add("...").add(".ts");
+      configureCssRules(chain, esmx2, options);
+      options?.chain?.(context);
+    }
+  });
+}
+function configureAssetRules(chain, esmx) {
+  chain.module.rule("images").test(
+    /\.(png|jpg|jpeg|gif|svg|bmp|webp|ico|apng|avif|tif|tiff|jfif|pjpeg|pjp|cur)$/i
+  ).type("asset/resource").set("generator", {
+    filename: filename(esmx, "images")
+  });
+  chain.module.rule("media").test(/\.(mp4|webm|ogg|mov)$/i).type("asset/resource").set("generator", {
+    filename: filename(esmx, "media")
+  });
+  chain.module.rule("audio").test(/\.(mp3|wav|flac|aac|m4a|opus)$/i).type("asset/resource").set("generator", {
+    filename: filename(esmx, "audio")
+  });
+  chain.module.rule("fonts").test(/\.(woff|woff2|eot|ttf|otf|ttc)(\?.*)?$/i).type("asset/resource").set("generator", {
+    filename: filename(esmx, "fonts")
+  });
+}
+function configureWorkerRule(chain, esmx, options) {
+  chain.module.rule("worker").test(/\.worker\.(c|m)?(t|j)s$/i).use("worker-loader").loader(
+    options.loaders?.workerRspackLoader ?? RSPACK_LOADER.workerRspackLoader
+  ).options({
+    esModule: false,
+    filename: `${esmx.name}/workers/[name].[contenthash]${esmx.isProd ? ".final" : ""}.js`
+  });
+}
+function configureTypeScriptRule(chain, buildTarget, options) {
+  const targets = getTargetSetting(options?.target, buildTarget);
+  chain.module.rule("typescript").test(/\.(ts|mts)$/i).use("swc-loader").loader(
+    options.loaders?.builtinSwcLoader ?? RSPACK_LOADER.builtinSwcLoader
+  ).options({
+    env: {
+      targets,
+      ...options?.swcLoader?.env
+    },
+    jsc: {
+      parser: {
+        syntax: "typescript",
+        ...options?.swcLoader?.jsc?.parser
+      },
+      ...options?.swcLoader?.jsc
+    },
+    ...options?.swcLoader
+  }).end().type("javascript/auto");
+}
+function configureOptimization(chain, options) {
+  chain.optimization.minimizer("swc-js-minimizer").use(rspack.SwcJsMinimizerRspackPlugin, [
+    {
+      minimizerOptions: {
+        format: {
+          comments: false
+        }
+      }
+    }
+  ]);
+  chain.optimization.minimizer("lightningcss-minimizer").use(rspack.LightningCssMinimizerRspackPlugin, [
+    {
+      minimizerOptions: {
+        targets: getTargetSetting(options?.target, "client"),
+        errorRecovery: false
+      }
+    }
+  ]);
+}
+function configureDefinePlugin(chain, buildTarget, options) {
+  if (options.definePlugin) {
+    const defineOptions = {};
+    Object.entries(options.definePlugin).forEach(([name, value]) => {
+      const targetValue = typeof value === "string" ? value : value[buildTarget];
+      if (typeof targetValue === "string" && name !== targetValue) {
+        defineOptions[name] = targetValue;
+      }
+    });
+    if (Object.keys(defineOptions).length) {
+      chain.plugin("define").use(rspack.DefinePlugin, [defineOptions]);
+    }
+  }
+}
+function configureCssRules(chain, esmx, options) {
+  if (options.css === false) {
+    return;
+  }
+  if (options.css === "js") {
+    configureCssInJS(chain, esmx, options);
+    return;
+  }
+  configureCssExtract(chain, options);
+}
+function configureCssInJS(chain, esmx, options) {
+  chain.module.rule("css").test(/\.css$/).use("style-loader").loader(options.loaders?.styleLoader ?? RSPACK_LOADER.styleLoader).options(options.styleLoader ?? {}).end().use("css-loader").loader(options.loaders?.cssLoader ?? RSPACK_LOADER.cssLoader).options(options.cssLoader ?? {}).end().use("lightning-css-loader").loader(
+    options.loaders?.lightningcssLoader ?? RSPACK_LOADER.lightningcssLoader
+  ).options({
+    targets: getTargetSetting(options?.target, "client"),
+    minify: esmx.isProd
+  }).end().type("javascript/auto");
+  const lessRule = chain.module.rule("less").test(/\.less$/).use("style-loader").loader(options.loaders?.styleLoader ?? RSPACK_LOADER.styleLoader).options(options.styleLoader ?? {}).end().use("css-loader").loader(options.loaders?.cssLoader ?? RSPACK_LOADER.cssLoader).options(options.cssLoader ?? {}).end().use("lightning-css-loader").loader(
+    options.loaders?.lightningcssLoader ?? RSPACK_LOADER.lightningcssLoader
+  ).options({
+    targets: getTargetSetting(options?.target, "client"),
+    minify: esmx.isProd
+  }).end().use("less-loader").loader(options.loaders?.lessLoader ?? RSPACK_LOADER.lessLoader).options(options.lessLoader ?? {}).end();
+  if (options.styleResourcesLoader) {
+    lessRule.use("style-resources-loader").loader(
+      options.loaders?.styleResourcesLoader ?? RSPACK_LOADER.styleResourcesLoader
+    ).options(options.styleResourcesLoader);
+  }
+  lessRule.type("javascript/auto");
+}
+function configureCssExtract(chain, options) {
+  chain.set("experiments", {
+    ...chain.get("experiments") ?? {},
+    css: true
+  });
+  const experiments = chain.get("experiments");
+  if (!experiments || !experiments.css) {
+    return;
+  }
+  const lessRule = chain.module.rule("less").test(/\.less$/).use("less-loader").loader(options.loaders?.lessLoader ?? RSPACK_LOADER.lessLoader).options(options.lessLoader ?? {}).end();
+  if (options.styleResourcesLoader) {
+    lessRule.use("style-resources-loader").loader(
+      options.loaders?.styleResourcesLoader ?? RSPACK_LOADER.styleResourcesLoader
+    ).options(options.styleResourcesLoader);
+  }
+  lessRule.type("css");
+}
+function filename(esmx, name, ext = "[ext]") {
+  return esmx.isProd ? `${name}/[name].[contenthash:8].final${ext}` : `${name}/[path][name]${ext}`;
+}

package/dist/rspack-html/target-setting.d.ts

@@ -0,0 +1,17 @@
+import type { BuildTarget } from '../rspack/build-target';
+export type TargetPreset = 'compatible' | 'modern';
+export type TargetSpec = TargetPreset | string[];
+export type TargetSetting = TargetSpec | Partial<Record<BuildTarget, TargetSpec>>;
+export declare const PRESET_TARGETS: {
+    readonly compatible: {
+        readonly client: readonly ["chrome>=64", "edge>=79", "firefox>=67", "safari>=11.1"];
+        readonly server: readonly ["node>=24"];
+        readonly node: readonly ["node>=24"];
+    };
+    readonly modern: {
+        readonly client: readonly ["chrome>=89", "edge>=89", "firefox>=108", "safari>=16.4"];
+        readonly server: readonly ["node>=24"];
+        readonly node: readonly ["node>=24"];
+    };
+};
+export declare function getTargetSetting(setting: TargetSetting | undefined, buildTarget: BuildTarget): string[];

package/dist/rspack-html/target-setting.mjs

@@ -0,0 +1,31 @@
+export const PRESET_TARGETS = {
+  compatible: {
+    client: ["chrome>=64", "edge>=79", "firefox>=67", "safari>=11.1"],
+    server: ["node>=24"],
+    node: ["node>=24"]
+  },
+  modern: {
+    client: ["chrome>=89", "edge>=89", "firefox>=108", "safari>=16.4"],
+    server: ["node>=24"],
+    node: ["node>=24"]
+  }
+};
+function resolveTargetSpec(spec, buildTarget) {
+  if (typeof spec === "string") {
+    return [...PRESET_TARGETS[spec][buildTarget]];
+  }
+  return spec;
+}
+export function getTargetSetting(setting, buildTarget) {
+  if (!setting) {
+    return [...PRESET_TARGETS.compatible[buildTarget]];
+  }
+  if (typeof setting === "string" || Array.isArray(setting)) {
+    return resolveTargetSpec(setting, buildTarget);
+  }
+  const targetSpec = setting[buildTarget];
+  if (!targetSpec) {
+    return [...PRESET_TARGETS.compatible[buildTarget]];
+  }
+  return resolveTargetSpec(targetSpec, buildTarget);
+}

package/dist/rspack-html/target-setting.test.d.ts

@@ -0,0 +1 @@
+export {};