@esmx/rspack 3.0.0-rc.10 → 3.0.0-rc.103

package/dist/rspack/app.d.ts

@@ -0,0 +1,183 @@
+import { type App, type Esmx } from '@esmx/core';
+import type { RspackOptions } from '@rspack/core';
+import type { BuildTarget } from './build-target';
+/**
+ * Rspack application configuration context interface.
+ *
+ * This interface provides context information accessible in configuration hook functions, allowing you to:
+ * - Access the Esmx framework instance
+ * - Get the current build target (client/server/node)
+ * - Modify Rspack configuration
+ * - Access application options
+ *
+ * @example
+ * ```ts
+ * // entry.node.ts
+ * export default {
+ *   async devApp(esmx) {
+ *     return import('@esmx/rspack').then((m) =>
+ *       m.createRspackApp(esmx, {
+ *         // Configuration hook function
+ *         config(context) {
+ *           // Access build target
+ *         }
+ *       })
+ *     );
+ *   }
+ * };
+ * ```
+ */
+export interface RspackAppConfigContext {
+    /**
+     * Esmx framework instance.
+     * Can be used to access framework APIs and utility functions.
+     */
+    esmx: Esmx;
+    /**
+     * Current build target.
+     * - 'client': Client build, generates browser-executable code
+     * - 'server': Server build, generates SSR rendering code
+     * - 'node': Node.js build, generates server entry code
+     */
+    buildTarget: BuildTarget;
+    /**
+     * Rspack compilation configuration object.
+     * You can modify this object in configuration hooks to customize build behavior.
+     */
+    config: RspackOptions;
+    /**
+     * Options object passed when creating the application.
+     */
+    options: RspackAppOptions;
+}
+/**
+ * Rspack chain configuration context interface.
+ *
+ * This interface provides context information accessible in chain hook functions, allowing you to:
+ * - Access the Esmx framework instance
+ * - Get the current build target (client/server/node)
+ * - Modify configuration using rspack-chain
+ * - Access application options
+ */
+export interface RspackAppChainContext {
+    /**
+     * Esmx framework instance.
+     * Can be used to access framework APIs and utility functions.
+     */
+    esmx: Esmx;
+    /**
+     * Current build target.
+     * - 'client': Client build, generates browser-executable code
+     * - 'server': Server build, generates SSR rendering code
+     * - 'node': Node.js build, generates server entry code
+     */
+    buildTarget: BuildTarget;
+    /**
+     * rspack-chain configuration object.
+     * You can use the chain API in chain hooks to modify the configuration.
+     */
+    chain: import('rspack-chain').default;
+    /**
+     * Options object passed when creating the application.
+     */
+    options: RspackAppOptions;
+}
+/**
+ * Rspack application configuration options interface.
+ *
+ * This interface provides configuration options available when creating a Rspack application, including:
+ * - Code compression options
+ * - Rspack configuration hook functions
+ *
+ * @example
+ * ```ts
+ * // entry.node.ts
+ * export default {
+ *   async devApp(esmx) {
+ *     return import('@esmx/rspack').then((m) =>
+ *       m.createRspackApp(esmx, {
+ *         // Disable code compression
+ *         minimize: false,
+ *         // Custom Rspack configuration
+ *         config(context) {
+ *         }
+ *       })
+ *     );
+ *   }
+ * };
+ * ```
+ */
+export interface RspackAppOptions {
+    /**
+     * Whether to enable code compression.
+     *
+     * - true: Enable code compression
+     * - false: Disable code compression
+     * - undefined: Automatically determine based on environment (enabled in production, disabled in development)
+     *
+     * @default undefined
+     */
+    minimize?: boolean;
+    /**
+     * Called before the build starts, this function allows you to modify the Rspack compilation configuration.
+     * Supports differentiated configuration for different build targets (client/server/node).
+     *
+     * @param context - Configuration context, containing framework instance, build target, and configuration object
+     */
+    config?: (context: RspackAppConfigContext) => void;
+    /**
+     * Uses rspack-chain to provide chained configuration method, allowing more flexible modification of Rspack configuration.
+     * Called after the config hook, if chain hook exists, chained configuration is preferred.
+     *
+     * @param context - Configuration context, containing framework instance, build target, and chain configuration object
+     */
+    chain?: (context: RspackAppChainContext) => void;
+}
+/**
+ * Create Rspack application instance.
+ *
+ * This function creates different application instances based on the runtime environment (development/production):
+ * - Development environment: Configures hot update middleware and real-time rendering
+ * - Production environment: Configures build tasks
+ *
+ * @param esmx - Esmx framework instance
+ * @param options - Rspack application configuration options
+ * @returns Returns application instance
+ *
+ * @example
+ * ```ts
+ * // entry.node.ts
+ * export default {
+ *   async devApp(esmx) {
+ *     return import('@esmx/rspack').then((m) =>
+ *       m.createRspackApp(esmx, {
+ *         config(context) {
+ *           // Configure loader to handle different file types
+ *           context.config.module = {
+ *             rules: [
+ *               {
+ *                 test: /\.ts$/,
+ *                 exclude: [/node_modules/],
+ *                 loader: 'builtin:swc-loader',
+ *                 options: {
+ *                   jsc: {
+ *                     parser: {
+ *                       syntax: 'typescript'
+ *                     }
+ *                   }
+ *                 }
+ *               },
+ *               {
+ *                 test: /\.css$/,
+ *                 use: ['style-loader', 'css-loader']
+ *               }
+ *             ]
+ *           };
+ *         }
+ *       })
+ *     );
+ *   }
+ * };
+ * ```
+ */
+export declare function createRspackApp(esmx: Esmx, options?: RspackAppOptions): Promise<App>;

package/dist/{app.mjs → rspack/app.mjs}

@@ -1,15 +1,12 @@
-import fs from "node:fs";
 import { pathToFileURL } from "node:url";
-import { styleText } from "node:util";
 import {
-  PathType,
-  RenderContext,
   createApp,
-  mergeMiddlewares
+  mergeMiddlewares,
+  RenderContext
 } from "@esmx/core";
 import { createVmImport } from "@esmx/import";
 import hotMiddleware from "webpack-hot-middleware";
-import { createRspackConfig } from "./config.mjs";
+import { createRspackConfig } from "./chain-config.mjs";
 import { pack } from "./pack.mjs";
 import { createRsBuild } from "./utils/index.mjs";
 export async function createRspackApp(esmx, options) {
@@ -50,9 +47,7 @@ async function createMiddleware(esmx, options = {}) {
   ];
 }
 function generateBuildConfig(esmx, options, buildTarget) {
-  const config = createRspackConfig(esmx, buildTarget, options);
-  options.config?.({ esmx, options, buildTarget, config });
-  return config;
+  return createRspackConfig(esmx, buildTarget, options);
 }
 function rewriteRender(esmx) {
   return async (options) => {
@@ -63,14 +58,7 @@ function rewriteRender(esmx) {
     const module = await vmImport(
       `${esmx.name}/src/entry.server`,
       import.meta.url,
-      {
-        console,
-        setTimeout,
-        clearTimeout,
-        process,
-        URL,
-        global
-      }
+      global
     );
     const serverRender = module[rc.entryName];
     if (typeof serverRender === "function") {
@@ -80,40 +68,22 @@ function rewriteRender(esmx) {
   };
 }
 function rewriteBuild(esmx, options = {}) {
+  const targets = ["client", "server"];
+  if (!esmx.moduleConfig.lib) {
+    targets.push("node");
+  }
   return async () => {
-    for (const item of esmx.moduleConfig.exports) {
-      if (item.type === PathType.root) {
-        const text = fs.readFileSync(
-          esmx.resolvePath("./", item.exportPath),
-          "utf-8"
-        );
-        if (/\bexport\s+\*\s+from\b/.test(text)) {
-          console.log(
-            styleText(
-              "red",
-              `The export * syntax is used in the file '${item.exportPath}', which will cause the packaging to fail.`
-            )
-          );
-          console.log(
-            styleText(
-              "red",
-              `Please use specific export syntax, such as export { a, b } from './a';`
-            )
-          );
-          return false;
-        }
-      }
+    const ok = await createRsBuild(
+      targets.map((target) => generateBuildConfig(esmx, options, target))
+    ).build();
+    if (!ok) {
+      return false;
     }
-    await createRsBuild([
-      generateBuildConfig(esmx, options, "client"),
-      generateBuildConfig(esmx, options, "server"),
-      generateBuildConfig(esmx, options, "node")
-    ]).build();
     esmx.writeSync(
-      esmx.resolvePath("dist/index.js"),
+      esmx.resolvePath("dist/index.mjs"),
       `
 async function start() {
-    const options = await import('./node/src/entry.node.js').then(
+    const options = await import('./node/src/entry.node.mjs').then(
         (mod) => mod.default
     );
     const { Esmx } = await import('@esmx/core');
@@ -125,6 +95,8 @@ async function start() {
 start();
 `.trim()
     );
+    console.log("\n");
+    console.log(esmx.generateSizeReport().text);
     return pack(esmx);
   };
 }

package/dist/rspack/build-target.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Build target environment type
+ * - node: Node.js environment build
+ * - client: Browser environment build
+ * - server: Server-side rendering build
+ */
+export type BuildTarget = 'node' | 'client' | 'server';

package/dist/{config.d.ts → rspack/chain-config.d.ts}

@@ -1,8 +1,7 @@
 import type { Esmx } from '@esmx/core';
-import { type RspackOptions } from '@rspack/core';
+import type { RspackOptions } from '@rspack/core';
+import RspackChain from 'rspack-chain';
 import type { RspackAppOptions } from './app';
 import type { BuildTarget } from './build-target';
-/**
- * 构建 Client、Server、Node 的基础配置
- */
+export declare function createChainConfig(esmx: Esmx, buildTarget: BuildTarget, options: RspackAppOptions): RspackChain;
 export declare function createRspackConfig(esmx: Esmx, buildTarget: BuildTarget, options: RspackAppOptions): RspackOptions;

package/dist/rspack/chain-config.mjs

@@ -0,0 +1,113 @@
+import { rspack } from "@rspack/core";
+import RspackChain from "rspack-chain";
+import nodeExternals from "webpack-node-externals";
+import { initModuleLink } from "../module-link/index.mjs";
+export function createChainConfig(esmx, buildTarget, options) {
+  const isHot = buildTarget === "client" && !esmx.isProd;
+  const isClient = buildTarget === "client";
+  const isServer = buildTarget === "server";
+  const isNode = buildTarget === "node";
+  const chain = new RspackChain();
+  chain.context(esmx.root);
+  chain.mode(esmx.isProd ? "production" : "development");
+  chain.target(isClient ? "web" : "node24");
+  chain.cache(!esmx.isProd);
+  chain.output.clean(esmx.isProd).filename(
+    !isNode && esmx.isProd ? "[name].[contenthash:8].final.mjs" : "[name].mjs"
+  ).chunkFilename(
+    esmx.isProd ? "chunks/[name].[contenthash:8].final.mjs" : "chunks/[name].mjs"
+  ).publicPath(
+    isClient ? "auto" : `${esmx.basePathPlaceholder}${esmx.basePath}`
+  );
+  chain.output.set(
+    "cssFilename",
+    esmx.isProd ? "[name].[contenthash:8].final.css" : "[name].css"
+  );
+  chain.output.set(
+    "cssChunkFilename",
+    esmx.isProd ? "chunks/[name].[contenthash:8].final.css" : "chunks/[name].css"
+  );
+  chain.output.path(esmx.resolvePath("dist", buildTarget));
+  chain.plugin("progress").use(rspack.ProgressPlugin, [
+    {
+      prefix: buildTarget
+    }
+  ]);
+  if (isHot) {
+    chain.plugin("hmr").use(rspack.HotModuleReplacementPlugin);
+  }
+  chain.module.parser.set("javascript", {
+    url: isClient ? true : "relative",
+    importMeta: false,
+    strictExportPresence: true
+  });
+  chain.module.generator.set("asset", {
+    emit: isClient
+  });
+  chain.module.generator.set("asset/resource", {
+    emit: isClient
+  });
+  chain.resolve.alias.set(esmx.name, esmx.root);
+  chain.optimization.minimize(options.minimize ?? esmx.isProd).emitOnErrors(true);
+  chain.externalsPresets({
+    web: isClient,
+    node: isServer || isNode
+  });
+  chain.externalsType("module-import");
+  if (isNode) {
+    chain.externals([
+      // @ts-expect-error
+      nodeExternals({
+        // @ts-expect-error
+        importType: "module-import"
+      })
+    ]);
+  }
+  chain.experiments({
+    ...chain.get("experiments") || {},
+    outputModule: true,
+    nativeWatcher: true,
+    rspackFuture: {
+      bundlerInfo: { force: false }
+    }
+  });
+  chain.set("lazyCompilation", false);
+  initModuleLink(chain, createModuleLinkConfig(esmx, buildTarget));
+  return chain;
+}
+function createModuleLinkConfig(esmx, buildTarget) {
+  const isClient = buildTarget === "client";
+  const isServer = buildTarget === "server";
+  const isNode = buildTarget === "node";
+  if (isNode) {
+    return {
+      name: esmx.name,
+      exports: {
+        "src/entry.node": {
+          pkg: false,
+          file: "./src/entry.node"
+        }
+      }
+    };
+  }
+  const preEntries = [];
+  if (isClient && !esmx.isProd) {
+    preEntries.push(
+      `${import.meta.resolve("webpack-hot-middleware/client.js")}?path=/${esmx.name}/hot-middleware`
+    );
+  }
+  return {
+    ...esmx.moduleConfig.environments[buildTarget],
+    name: esmx.name,
+    injectChunkName: isServer,
+    deps: Object.keys(esmx.moduleConfig.links),
+    preEntries
+  };
+}
+export function createRspackConfig(esmx, buildTarget, options) {
+  const chain = createChainConfig(esmx, buildTarget, options);
+  options.chain?.({ esmx, options, buildTarget, chain });
+  const config = chain.toConfig();
+  options.config?.({ esmx, options, buildTarget, config });
+  return config;
+}

package/dist/rspack/index.d.ts

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

package/dist/rspack/index.mjs

@@ -0,0 +1,4 @@
+export {
+  createRspackApp
+} from "./app.mjs";
+export { RSPACK_LOADER } from "./loader.mjs";

package/dist/rspack/loader.d.ts

@@ -0,0 +1,9 @@
+export declare const RSPACK_LOADER: {
+    builtinSwcLoader: string;
+    lightningcssLoader: string;
+    cssLoader: string;
+    styleLoader: string;
+    lessLoader: string;
+    styleResourcesLoader: string;
+    workerRspackLoader: string;
+};

package/dist/{loader.mjs → rspack/loader.mjs}

@@ -1,33 +1,13 @@
+import { fileURLToPath } from "node:url";
 function resolve(name) {
-  return new URL(import.meta.resolve(name)).pathname;
+  return fileURLToPath(import.meta.resolve(name));
 }
 export const RSPACK_LOADER = {
-  /**
-   * Rspack 内置的 builtin:swc-loader
-   */
   builtinSwcLoader: "builtin:swc-loader",
-  /**
-   * Rspack 内置的 lightningcss-loader
-   */
   lightningcssLoader: "builtin:lightningcss-loader",
-  /**
-   * css-loader
-   */
   cssLoader: resolve("css-loader"),
-  /**
-   * style-loader
-   */
   styleLoader: resolve("style-loader"),
-  /**
-   * less-loader
-   */
   lessLoader: resolve("less-loader"),
-  /**
-   * style-resources-loader
-   */
   styleResourcesLoader: resolve("style-resources-loader"),
-  /**
-   * worker-rspack-loader
-   */
   workerRspackLoader: resolve("worker-rspack-loader")
 };

package/dist/rspack/pack.d.ts

@@ -0,0 +1,9 @@
+import type { Esmx, ManifestJson } from '@esmx/core';
+export declare function pack(esmx: Esmx): Promise<boolean>;
+export interface GenerateExportsOptions {
+    client: ManifestJson['exports'];
+    server: ManifestJson['exports'];
+    base?: Record<string, unknown>;
+}
+export declare function generateExports(options: GenerateExportsOptions): Record<string, unknown>;
+export declare function contentHash(buffer: Buffer, algorithm?: string): string;

package/dist/{pack.mjs → rspack/pack.mjs}

@@ -28,42 +28,50 @@ export async function pack(esmx) {
   await packConfig.onAfter(esmx, pkgJson, data);
   return true;
 }
-async function buildPackageJson(esmx) {
-  const [clientJson, serverJson, curJson] = await Promise.all([
-    esmx.readJson(esmx.resolvePath("dist/client/manifest.json")),
-    esmx.readJson(esmx.resolvePath("dist/server/manifest.json")),
-    esmx.readJson(esmx.resolvePath("package.json"))
-  ]);
-  const exports = {
-    ...curJson?.exports
-  };
-  const set = /* @__PURE__ */ new Set([
-    ...Object.keys(clientJson.exports),
-    ...Object.keys(serverJson.exports)
-  ]);
+export function generateExports(options) {
+  const { client, server, base = {} } = options;
+  const exports = { ...base };
+  const set = /* @__PURE__ */ new Set([...Object.keys(client), ...Object.keys(server)]);
   set.forEach((name) => {
-    const client = clientJson.exports[name];
-    const server = serverJson.exports[name];
-    const exportName = `./${name}`;
-    if (client && server) {
+    const clientExport = client[name];
+    const serverExport = server[name];
+    const exportName = name === "index" ? "." : `./${name}`;
+    if (clientExport && serverExport) {
       exports[exportName] = {
-        default: `./server/${server}`,
-        browser: `./client/${client}`
+        default: `./server/${serverExport.file}`,
+        browser: `./client/${clientExport.file}`
       };
-    } else if (client) {
-      exports[exportName] = `./client/${client}`;
-    } else if (server) {
-      exports[exportName] = `./server/${server}`;
+    } else if (clientExport) {
+      exports[exportName] = `./client/${clientExport.file}`;
+    } else if (serverExport) {
+      exports[exportName] = `./server/${serverExport.file}`;
     }
   });
+  return exports;
+}
+async function buildPackageJson(esmx) {
+  const [clientJson, serverJson, curJson] = await Promise.all([
+    esmx.readJson(
+      esmx.resolvePath("dist/client/manifest.json")
+    ),
+    esmx.readJson(
+      esmx.resolvePath("dist/server/manifest.json")
+    ),
+    esmx.readJson(esmx.resolvePath("package.json"))
+  ]);
+  const exports = generateExports({
+    client: clientJson.exports,
+    server: serverJson.exports,
+    base: curJson?.exports
+  });
   const buildJson = {
     ...curJson,
     exports
   };
   return buildJson;
 }
-function contentHash(buffer, algorithm = "sha256") {
-  const hash = crypto.createHash("sha256");
+export function contentHash(buffer, algorithm = "sha256") {
+  const hash = crypto.createHash(algorithm);
   hash.update(buffer);
   return `${algorithm}-${hash.digest("hex")}`;
 }

package/dist/rspack/pack.test.d.ts

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