@esmx/core 3.0.0-rc.60 → 3.0.0-rc.63

package/dist/render-context.mjs

@@ -3,35 +3,35 @@ import serialize from "serialize-javascript";
 export class RenderContext {
   esmx;
   /**
-   * 重定向地址
+   * Redirect address
    * @description
-   * - 默认为 null，表示不进行重定向
-   * - 设置后，服务端可以根据此值进行 HTTP 重定向
-   * - 常用于登录验证、权限控制等场景
+   * - Defaults to null, indicating no redirect
+   * - When set, the server can perform HTTP redirection based on this value
+   * - Commonly used for scenarios like login verification, permission control, etc.
    *
    * @example
    * ```ts
-   * // 1. 登录验证示例
+   * // 1. Login verification example
    * export default async (rc: RenderContext) => {
    *   if (!isLoggedIn()) {
    *     rc.redirect = '/login';
    *     rc.status = 302;
    *     return;
    *   }
-   *   // 继续渲染页面...
+   *   // Continue rendering page...
    * };
    *
-   * // 2. 权限控制示例
+   * // 2. Permission control example
    * export default async (rc: RenderContext) => {
    *   if (!hasPermission()) {
    *     rc.redirect = '/403';
    *     rc.status = 403;
    *     return;
    *   }
-   *   // 继续渲染页面...
+   *   // Continue rendering page...
    * };
    *
-   * // 3. 服务端处理示例
+   * // 3. Server-side processing example
    * app.use(async (req, res) => {
    *   const rc = await esmx.render({
    *     params: {
@@ -39,7 +39,7 @@ export class RenderContext {
    *     }
    *   });
    *
-   *   // 处理重定向
+   *   // Handle redirect
    *   if (rc.redirect) {
    *     res.statusCode = rc.status || 302;
    *     res.setHeader('Location', rc.redirect);
@@ -47,49 +47,49 @@ export class RenderContext {
    *     return;
    *   }
    *
-   *   // 设置状态码
+   *   // Set status code
    *   if (rc.status) {
    *     res.statusCode = rc.status;
    *   }
    *
-   *   // 响应 HTML 内容
+   *   // Respond with HTML content
    *   res.end(rc.html);
    * });
    * ```
    */
   redirect = null;
   /**
-   * HTTP 响应状态码
+   * HTTP response status code
    * @description
-   * - 默认为 null，表示使用 200 状态码
-   * - 可以设置任意有效的 HTTP 状态码
-   * - 常用于错误处理、重定向等场景
-   * - 通常与 redirect 属性配合使用
+   * - Defaults to null, indicating use of 200 status code
+   * - Can set any valid HTTP status code
+   * - Commonly used for scenarios like error handling, redirection, etc.
+   * - Usually used in conjunction with the redirect property
    *
    * @example
    * ```ts
-   * // 1. 404 错误处理示例
+   * // 1. 404 error handling example
    * export default async (rc: RenderContext) => {
    *   const page = await findPage(rc.params.url);
    *   if (!page) {
    *     rc.status = 404;
-   *     // 渲染 404 页面...
+   *     // Render 404 page...
    *     return;
    *   }
-   *   // 继续渲染页面...
+   *   // Continue rendering page...
    * };
    *
-   * // 2. 临时重定向示例
+   * // 2. Temporary redirect example
    * export default async (rc: RenderContext) => {
    *   if (needMaintenance()) {
    *     rc.redirect = '/maintenance';
-   *     rc.status = 307; // 临时重定向，保持请求方法不变
+   *     rc.status = 307; // Temporary redirect, keep request method unchanged
    *     return;
    *   }
-   *   // 继续渲染页面...
+   *   // Continue rendering page...
    * };
    *
-   * // 3. 服务端处理示例
+   * // 3. Server-side processing example
    * app.use(async (req, res) => {
    *   const rc = await esmx.render({
    *     params: {
@@ -97,7 +97,7 @@ export class RenderContext {
    *     }
    *   });
    *
-   *   // 处理重定向
+   *   // Handle redirect
    *   if (rc.redirect) {
    *     res.statusCode = rc.status || 302;
    *     res.setHeader('Location', rc.redirect);
@@ -105,12 +105,12 @@ export class RenderContext {
    *     return;
    *   }
    *
-   *   // 设置状态码
+   *   // Set status code
    *   if (rc.status) {
    *     res.statusCode = rc.status;
    *   }
    *
-   *   // 响应 HTML 内容
+   *   // Respond with HTML content
    *   res.end(rc.html);
    * });
    * ```
@@ -118,80 +118,80 @@ export class RenderContext {
   status = null;
   _html = "";
   /**
-   * 静态资源的基础路径
+   * Base path for static assets
    * @description
-   * base 属性用于控制静态资源的加载路径，是 Esmx 框架动态基础路径配置的核心：
+   * The base property is used to control the loading path of static assets and is the core of Esmx framework's dynamic base path configuration:
    *
-   * 1. **构建时处理**
-   *    - 静态资源路径使用特殊占位符标记：`[[[___GEZ_DYNAMIC_BASE___]]]/your-app-name/`
-   *    - 占位符会被注入到所有静态资源的引用路径中
-   *    - 支持 CSS、JavaScript、图片等各类静态资源
+   * 1. **Build-time Processing**
+   *    - Static asset paths are marked with special placeholders: `[[[___ESMX_DYNAMIC_BASE___]]]/your-app-name/`
+   *    - Placeholders are injected into all static asset reference paths
+   *    - Supports various static assets like CSS, JavaScript, images, etc.
    *
-   * 2. **运行时替换**
-   *    - 通过 `esmx.render()` 的 `base` 参数设置实际基础路径
-   *    - RenderContext 自动将 HTML 中的占位符替换为实际路径
+   * 2. **Runtime Replacement**
+   *    - Set the actual base path through the `base` parameter of `esmx.render()`
+   *    - RenderContext automatically replaces placeholders in HTML with actual paths
    *
-   * 3. **技术优势**
-   *    - 部署灵活：同一套构建产物可部署到任意路径
-   *    - 性能优化：保持静态资源的最佳缓存策略
-   *    - 开发友好：简化多环境配置管理
+   * 3. **Technical Advantages**
+   *    - Deployment flexibility: The same set of build artifacts can be deployed to any path
+   *    - Performance optimization: Maintain the best caching strategy for static assets
+   *    - Development-friendly: Simplify multi-environment configuration management
    *
    * @example
    * ```ts
-   * // 1. 基础用法
+   * // 1. Basic usage
    * const rc = await esmx.render({
-   *   base: '/esmx',  // 设置基础路径
+   *   base: '/esmx',  // Set base path
    *   params: { url: req.url }
    * });
    *
-   * // 2. 多语言站点示例
+   * // 2. Multi-language site example
    * const rc = await esmx.render({
-   *   base: '/cn',  // 中文站点
+   *   base: '/cn',  // Chinese site
    *   params: { lang: 'zh-CN' }
    * });
    *
-   * // 3. 微前端应用示例
+   * // 3. Micro-frontend application example
    * const rc = await esmx.render({
-   *   base: '/app1',  // 子应用1
+   *   base: '/app1',  // Sub-application 1
    *   params: { appId: 1 }
    * });
    * ```
    */
   base;
   /**
-   * 服务端渲染入口函数名称
+   * Server-side rendering entry function name
    * @description
-   * entryName 属性用于指定服务端渲染时使用的入口函数：
+   * The entryName property is used to specify the entry function used during server-side rendering:
    *
-   * 1. **基本用途**
-   *    - 默认值为 'default'
-   *    - 用于从 entry.server.ts 中选择要使用的渲染函数
-   *    - 支持一个模块导出多个渲染函数的场景
+   * 1. **Basic Usage**
+   *    - Default value is 'default'
+   *    - Used to select the rendering function to use from entry.server.ts
+   *    - Supports scenarios where a module exports multiple rendering functions
    *
-   * 2. **使用场景**
-   *    - 多模板渲染：不同页面使用不同的渲染模板
-   *    - A/B 测试：同一页面使用不同的渲染逻辑
-   *    - 特殊渲染：某些页面需要自定义的渲染流程
+   * 2. **Use Cases**
+   *    - Multi-template rendering: Different pages use different rendering templates
+   *    - A/B testing: The same page uses different rendering logic
+   *    - Special rendering: Some pages need custom rendering processes
    *
    * @example
    * ```ts
-   * // 1. 默认入口函数
+   * // 1. Default entry function
    * // entry.server.ts
    * export default async (rc: RenderContext) => {
-   *   // 默认渲染逻辑
+   *   // Default rendering logic
    * };
    *
-   * // 2. 多个入口函数
+   * // 2. Multiple entry functions
    * // entry.server.ts
    * export const mobile = async (rc: RenderContext) => {
-   *   // 移动端渲染逻辑
+   *   // Mobile rendering logic
    * };
    *
    * export const desktop = async (rc: RenderContext) => {
-   *   // 桌面端渲染逻辑
+   *   // Desktop rendering logic
    * };
    *
-   * // 3. 根据设备类型选择入口函数
+   * // 3. Select entry function based on device type
    * const rc = await esmx.render({
    *   entryName: isMobile ? 'mobile' : 'desktop',
    *   params: { url: req.url }
@@ -200,29 +200,29 @@ export class RenderContext {
    */
   entryName;
   /**
-   * 渲染参数
+   * Rendering parameters
    * @description
-   * params 属性用于在服务端渲染过程中传递和访问参数：
+   * The params property is used to pass and access parameters during the server-side rendering process:
    *
-   * 1. **参数类型**
-   *    - 支持任意类型的键值对
-   *    - 通过 Record<string, any> 类型定义
-   *    - 在整个渲染生命周期中保持不变
+   * 1. **Parameter Types**
+   *    - Supports key-value pairs of any type
+   *    - Defined through Record<string, any> type
+   *    - Remains unchanged throughout the entire rendering lifecycle
    *
-   * 2. **常见使用场景**
-   *    - 传递请求信息（URL、query 参数等）
-   *    - 设置页面配置（语言、主题等）
-   *    - 注入环境变量（API 地址、版本号等）
-   *    - 共享服务端状态（用户信息、权限等）
+   * 2. **Common Use Cases**
+   *    - Pass request information (URL, query parameters, etc.)
+   *    - Set page configuration (language, theme, etc.)
+   *    - Inject environment variables (API address, version number, etc.)
+   *    - Share server-side state (user information, permissions, etc.)
    *
-   * 3. **访问方式**
-   *    - 在服务端渲染函数中通过 rc.params 访问
-   *    - 可以解构获取特定参数
-   *    - 支持设置默认值
+   * 3. **Access Methods**
+   *    - Accessed through rc.params in server-side rendering functions
+   *    - Can destructure to get specific parameters
+   *    - Supports setting default values
    *
    * @example
    * ```ts
-   * // 1. 基础用法 - 传递 URL 和语言设置
+   * // 1. Basic usage - Pass URL and language settings
    * const rc = await esmx.render({
    *   params: {
    *     url: req.url,
@@ -230,7 +230,7 @@ export class RenderContext {
    *   }
    * });
    *
-   * // 2. 页面配置 - 设置主题和布局
+   * // 2. Page configuration - Set theme and layout
    * const rc = await esmx.render({
    *   params: {
    *     theme: 'dark',
@@ -238,7 +238,7 @@ export class RenderContext {
    *   }
    * });
    *
-   * // 3. 环境配置 - 注入 API 地址
+   * // 3. Environment configuration - Inject API address
    * const rc = await esmx.render({
    *   params: {
    *     apiBaseUrl: process.env.API_BASE_URL,
@@ -246,17 +246,17 @@ export class RenderContext {
    *   }
    * });
    *
-   * // 4. 在渲染函数中使用
+   * // 4. Use in rendering function
    * export default async (rc: RenderContext) => {
-   *   // 解构获取参数
+   *   // Destructure to get parameters
    *   const { url, lang = 'en' } = rc.params;
    *
-   *   // 根据参数执行不同逻辑
+   *   // Execute different logic based on parameters
    *   if (lang === 'zh-CN') {
-   *     // 中文版本处理...
+   *     // Chinese version processing...
    *   }
    *
-   *   // 传递参数到组件
+   *   // Pass parameters to component
    *   const html = await renderToString(createApp({
    *     props: {
    *       currentUrl: url,
@@ -264,7 +264,7 @@ export class RenderContext {
    *     }
    *   }));
    *
-   *   // 设置 HTML
+   *   // Set HTML
    *   rc.html = `
    *     <!DOCTYPE html>
    *     <html lang="${lang}">
@@ -276,50 +276,50 @@ export class RenderContext {
    */
   params;
   /**
-   * 模块依赖收集集合
+   * Module dependency collection set
    * @description
-   * importMetaSet 是 Esmx 框架智能依赖收集机制的核心，用于在服务端渲染过程中追踪和记录模块依赖：
+   * importMetaSet is the core of Esmx framework's intelligent dependency collection mechanism, used to track and record module dependencies during the server-side rendering process:
    *
-   * 1. **按需收集**
-   *    - 在组件实际渲染过程中自动追踪和记录模块依赖
-   *    - 只收集当前页面渲染时真正使用到的资源
-   *    - 精确记录每个组件的模块依赖关系
+   * 1. **On-demand Collection**
+   *    - Automatically tracks and records module dependencies during the actual component rendering process
+   *    - Only collects resources actually used during the current page rendering
+   *    - Precisely records the module dependency relationships of each component
    *
-   * 2. **性能优化**
-   *    - 避免加载未使用的模块，显著减少首屏加载时间
-   *    - 精确控制资源加载顺序，优化页面渲染性能
-   *    - 自动生成最优的导入映射（Import Map）
+   * 2. **Performance Optimization**
+   *    - Avoids loading unused modules, significantly reducing first-screen loading time
+   *    - Precisely controls resource loading order, optimizing page rendering performance
+   *    - Automatically generates optimal import maps
    *
-   * 3. **使用方式**
-   *    - 在渲染函数中传递给 renderToString
-   *    - 框架自动收集依赖，无需手动处理
-   *    - 支持异步组件和动态导入的依赖收集
+   * 3. **Usage**
+   *    - Passed to renderToString in the rendering function
+   *    - Framework automatically collects dependencies, no manual handling required
+   *    - Supports dependency collection for async components and dynamic imports
    *
    * @example
    * ```ts
-   * // 1. 基础用法
+   * // 1. Basic usage
    * const renderToString = (app: any, context: { importMetaSet: Set<ImportMeta> }) => {
-   *   // 在渲染过程中自动收集模块依赖
-   *   // 框架会在组件渲染时自动调用 context.importMetaSet.add(import.meta)
-   *   // 开发者无需手动处理依赖收集
+   *   // Automatically collect module dependencies during the rendering process
+   *   // Framework will automatically call context.importMetaSet.add(import.meta) during component rendering
+   *   // Developers do not need to manually handle dependency collection
    *   return '<div id="app">Hello World</div>';
    * };
    *
-   * // 使用示例
+   * // Usage example
    * const app = createApp();
    * const html = await renderToString(app, {
    *   importMetaSet: rc.importMetaSet
    * });
    *
-   * // 2. 提交依赖
+   * // 2. Commit dependencies
    * await rc.commit();
    *
-   * // 3. 生成 HTML
+   * // 3. Generate HTML
    * rc.html = `
    *   <!DOCTYPE html>
    *   <html>
    *   <head>
-   *     <!-- 基于收集的依赖自动注入资源 -->
+   *     <!-- Automatically inject resources based on collected dependencies -->
    *     ${rc.preload()}
    *     ${rc.css()}
    *   </head>
@@ -335,35 +335,35 @@ export class RenderContext {
    */
   importMetaSet = /* @__PURE__ */ new Set();
   /**
-   * 资源文件列表
+   * Resource file list
    * @description
-   * files 属性存储了在服务端渲染过程中收集到的所有静态资源文件路径：
+   * The files property stores all static resource file paths collected during the server-side rendering process:
    *
-   * 1. **资源类型**
-   *    - js: JavaScript 文件列表，包含所有脚本和模块
-   *    - css: 样式表文件列表
-   *    - modulepreload: 需要预加载的 ESM 模块列表
-   *    - importmap: 导入映射文件列表
-   *    - resources: 其他资源文件列表（图片、字体等）
+   * 1. **Resource Types**
+   *    - js: List of JavaScript files, containing all scripts and modules
+   *    - css: List of stylesheet files
+   *    - modulepreload: List of ESM modules that need to be preloaded
+   *    - importmap: List of import map files
+   *    - resources: List of other resource files (images, fonts, etc.)
    *
-   * 2. **使用场景**
-   *    - 在 commit() 方法中自动收集和分类资源
-   *    - 通过 preload()、css() 等方法注入资源到 HTML
-   *    - 支持基础路径配置，实现资源的动态加载
+   * 2. **Use Cases**
+   *    - Automatically collect and categorize resources in the commit() method
+   *    - Inject resources into HTML through methods like preload(), css(), etc.
+   *    - Supports base path configuration, implementing dynamic loading of resources
    *
    * @example
    * ```ts
-   * // 1. 资源收集
+   * // 1. Resource collection
    * await rc.commit();
    *
-   * // 2. 资源注入
+   * // 2. Resource injection
    * rc.html = `
    *   <!DOCTYPE html>
    *   <html>
    *   <head>
-   *     <!-- 预加载资源 -->
+   *     <!-- Preload resources -->
    *     ${rc.preload()}
-   *     <!-- 注入样式表 -->
+   *     <!-- Inject stylesheets -->
    *     ${rc.css()}
    *   </head>
    *   <body>
@@ -387,47 +387,47 @@ export class RenderContext {
     code: ""
   };
   /**
-   * 定义 importmap 的生成模式
+   * Define the generation mode for importmap
    *
    * @description
-   * ImportmapMode 用于控制 importmap 的生成方式，支持两种模式：
-   * - `inline`: 将 importmap 内容直接内联到 HTML 中（默认值），适用于以下场景：
-   *   - 需要减少 HTTP 请求数量
-   *   - importmap 内容较小
-   *   - 对首屏加载性能要求较高
-   * - `js`: 将 importmap 内容生成为独立的 JS 文件，适用于以下场景：
-   *   - importmap 内容较大
-   *   - 需要利用浏览器缓存机制
-   *   - 多个页面共享相同的 importmap
-   *
-   * 默认值选择 'inline' 的原因：
-   * 1. 简单直接
-   *    - 减少额外的 HTTP 请求
-   *    - 无需额外的资源管理
-   *    - 适合大多数应用场景
-   * 2. 首屏性能
-   *    - 避免额外的网络请求
-   *    - 确保导入映射立即可用
-   *    - 减少页面加载时间
-   * 3. 易于调试
-   *    - 导入映射直接可见
-   *    - 便于问题诊断
-   *    - 简化开发流程
+   * ImportmapMode is used to control the generation method of importmap, supporting two modes:
+   * - `inline`: Inline importmap content directly into HTML (default value), suitable for the following scenarios:
+   *   - Need to reduce the number of HTTP requests
+   *   - Importmap content is small
+   *   - High requirements for first-screen loading performance
+   * - `js`: Generate importmap content as an independent JS file, suitable for the following scenarios:
+   *   - Importmap content is large
+   *   - Need to utilize browser caching mechanisms
+   *   - Multiple pages share the same importmap
+   *
+   * Reasons for choosing 'inline' as the default value:
+   * 1. Simple and direct
+   *    - Reduce additional HTTP requests
+   *    - No additional resource management required
+   *    - Suitable for most application scenarios
+   * 2. First-screen performance
+   *    - Avoid additional network requests
+   *    - Ensure import maps are immediately available
+   *    - Reduce page loading time
+   * 3. Easy to debug
+   *    - Import maps are directly visible
+   *    - Facilitate problem diagnosis
+   *    - Simplify development process
    *
    * @example
    * ```ts
-   * // 使用内联模式（默认）
+   * // Use inline mode (default)
    * const rc = await esmx.render({
    *   params: { url: req.url }
    * });
    *
-   * // 显式指定内联模式
+   * // Explicitly specify inline mode
    * const rc = await esmx.render({
    *   importmapMode: 'inline',
    *   params: { url: req.url }
    * });
    *
-   * // 使用 JS 文件模式
+   * // Use JS file mode
    * const rc = await esmx.render({
    *   importmapMode: 'js',
    *   params: { url: req.url }
@@ -436,25 +436,25 @@ export class RenderContext {
    */
   importmapMode;
   /**
-   * HTML 内容
+   * HTML content
    * @description
-   * html 属性用于设置和获取最终生成的 HTML 内容：
+   * The html property is used to set and get the final generated HTML content:
    *
-   * 1. **基础路径替换**
-   *    - 在设置 HTML 时自动处理基础路径占位符
-   *    - 将 `[[[___GEZ_DYNAMIC_BASE___]]]/your-app-name/` 替换为实际的 base 路径
-   *    - 确保所有静态资源的引用路径正确
+   * 1. **Base Path Replacement**
+   *    - Automatically handles base path placeholders when setting HTML
+   *    - Replaces `[[[___ESMX_DYNAMIC_BASE___]]]/your-app-name/` with the actual base path
+   *    - Ensures all static asset reference paths are correct
    *
-   * 2. **使用场景**
-   *    - 设置服务端渲染生成的 HTML 内容
-   *    - 支持动态基础路径配置
-   *    - 自动处理静态资源的引用路径
+   * 2. **Use Cases**
+   *    - Set HTML content generated by server-side rendering
+   *    - Support dynamic base path configuration
+   *    - Automatically handle static asset reference paths
    *
    * @example
    * ```ts
-   * // 1. 基础用法
+   * // 1. Basic usage
    * export default async (rc: RenderContext) => {
-   *   // 设置 HTML 内容
+   *   // Set HTML content
    *   rc.html = `
    *     <!DOCTYPE html>
    *     <html>
@@ -472,15 +472,15 @@ export class RenderContext {
    *   `;
    * };
    *
-   * // 2. 动态基础路径
+   * // 2. Dynamic base path
    * const rc = await esmx.render({
-   *   base: '/app',  // 设置基础路径
+   *   base: '/app',  // Set base path
    *   params: { url: req.url }
    * });
    *
-   * // HTML 中的占位符会被自动替换：
-   * // [[[___GEZ_DYNAMIC_BASE___]]]/your-app-name/css/style.css
-   * // 替换为：
+   * // Placeholders in HTML will be automatically replaced:
+   * // [[[___ESMX_DYNAMIC_BASE___]]]/your-app-name/css/style.css
+   * // Replaced with:
    * // /app/your-app-name/css/style.css
    * ```
    */
@@ -499,23 +499,23 @@ export class RenderContext {
     this.importmapMode = options.importmapMode ?? "inline";
   }
   /**
-   * 将 JavaScript 对象序列化为字符串
+   * Serialize JavaScript object to string
    * @description
-   * serialize 方法用于在服务端渲染过程中将状态数据序列化，以便传递到客户端：
+   * The serialize method is used to serialize state data during the server-side rendering process for passing to the client:
    *
-   * 1. **主要用途**
-   *    - 序列化服务端状态数据
-   *    - 确保数据可以安全地嵌入到 HTML 中
-   *    - 支持复杂的数据结构（如 Date、RegExp 等）
+   * 1. **Main Uses**
+   *    - Serialize server-side state data
+   *    - Ensure data can be safely embedded in HTML
+   *    - Support complex data structures (such as Date, RegExp, etc.)
    *
-   * 2. **安全处理**
-   *    - 自动转义特殊字符
-   *    - 防止 XSS 攻击
-   *    - 保持数据类型的完整性
+   * 2. **Security Handling**
+   *    - Automatically escape special characters
+   *    - Prevent XSS attacks
+   *    - Maintain data type integrity
    *
    * @example
    * ```ts
-   * // 1. 基础用法 - 序列化状态数据
+   * // 1. Basic usage - Serialize state data
    * export default async (rc: RenderContext) => {
    *   const state = {
    *     user: { id: 1, name: 'Alice' },
@@ -528,7 +528,7 @@ export class RenderContext {
    *     <html>
    *     <head>
    *       <script>
-   *         // 将序列化后的状态注入到全局变量
+   *         // Inject serialized state into global variable
    *         window.__INITIAL_STATE__ = ${rc.serialize(state)};
    *       <\/script>
    *     </head>
@@ -537,43 +537,43 @@ export class RenderContext {
    *   `;
    * };
    *
-   * // 2. 自定义序列化选项
+   * // 2. Custom serialization options
    * const state = { sensitive: 'data' };
    * const serialized = rc.serialize(state, {
-   *   isJSON: true,  // 使用 JSON 兼容模式
-   *   unsafe: false  // 禁用不安全的序列化
+   *   isJSON: true,  // Use JSON compatible mode
+   *   unsafe: false  // Disable unsafe serialization
    * });
    * ```
    *
-   * @param {any} input - 要序列化的输入数据
-   * @param {serialize.SerializeJSOptions} [options] - 序列化选项
-   * @returns {string} 序列化后的字符串
+   * @param {any} input - Input data to be serialized
+   * @param {serialize.SerializeJSOptions} [options] - Serialization options
+   * @returns {string} Serialized string
    */
   serialize(input, options) {
     return serialize(input, options);
   }
   /**
-   * 将状态数据序列化并注入到 HTML 中
+   * Serialize state data and inject it into HTML
    * @description
-   * state 方法用于在服务端渲染时将状态数据序列化并注入到 HTML 中，以便客户端可以在激活时恢复这些状态：
+   * The state method is used to serialize state data and inject it into HTML during server-side rendering, so that the client can restore these states when activating:
    *
-   * 1. **序列化机制**
-   *    - 使用安全的序列化方法处理数据
-   *    - 支持复杂的数据结构（对象、数组等）
-   *    - 自动处理特殊字符和 XSS 防护
+   * 1. **Serialization Mechanism**
+   *    - Use safe serialization methods to process data
+   *    - Support complex data structures (objects, arrays, etc.)
+   *    - Automatically handle special characters and XSS protection
    *
-   * 2. **使用场景**
-   *    - 服务端状态同步到客户端
-   *    - 初始化客户端应用状态
-   *    - 实现无缝的服务端渲染到客户端激活
+   * 2. **Use Cases**
+   *    - Synchronize server-side state to client
+   *    - Initialize client application state
+   *    - Implement seamless server-side rendering to client activation
    *
-   * @param varName 全局变量名，用于在客户端访问注入的数据
-   * @param data 需要序列化的数据对象
-   * @returns 包含序列化数据的 script 标签字符串
+   * @param varName Global variable name, used to access injected data on the client
+   * @param data Data object that needs to be serialized
+   * @returns Script tag string containing serialized data
    *
    * @example
    * ```ts
-   * // 1. 基础用法 - 注入用户信息
+   * // 1. Basic usage - Inject user information
    * export default async (rc: RenderContext) => {
    *   const userInfo = {
    *     id: 1,
@@ -594,12 +594,12 @@ export class RenderContext {
    *   `;
    * };
    *
-   * // 2. 客户端使用
-   * // 在客户端可以直接访问注入的数据
+   * // 2. Client-side usage
+   * // Can directly access injected data on the client
    * const userInfo = window.__USER__;
-   * console.log(userInfo.name); // 输出: 'John'
+   * console.log(userInfo.name); // Output: 'John'
    *
-   * // 3. 复杂数据结构
+   * // 3. Complex data structures
    * export default async (rc: RenderContext) => {
    *   const appState = {
    *     user: {
@@ -633,42 +633,42 @@ export class RenderContext {
     return `<script>window[${serialize(varName)}] = ${serialize(data, { isJSON: true })};<\/script>`;
   }
   /**
-   * 提交依赖收集并更新资源列表
+   * Commit dependency collection and update resource list
    * @description
-   * commit 方法是 RenderContext 依赖收集机制的核心，负责处理所有收集到的模块依赖并更新文件资源列表：
-   *
-   * 1. **依赖处理流程**
-   *    - 从 importMetaSet 中收集所有使用到的模块
-   *    - 基于 manifest 文件解析每个模块的具体资源
-   *    - 处理 JS、CSS、资源文件等不同类型的依赖
-   *    - 自动处理模块预加载和导入映射
-   *
-   * 2. **资源分类**
-   *    - js: JavaScript 文件，包含所有脚本和模块
-   *    - css: 样式表文件
-   *    - modulepreload: 需要预加载的 ESM 模块
-   *    - importmap: 导入映射文件
-   *    - resources: 其他资源文件（图片、字体等）
-   *
-   * 3. **路径处理**
-   *    - 自动添加基础路径前缀
-   *    - 确保资源路径的正确性
-   *    - 支持多应用场景的资源隔离
+   * The commit method is the core of RenderContext's dependency collection mechanism, responsible for handling all collected module dependencies and updating the file resource list:
+   *
+   * 1. **Dependency Processing Flow**
+   *    - Collect all used modules from importMetaSet
+   *    - Parse specific resources for each module based on manifest files
+   *    - Handle different types of dependencies such as JS, CSS, resource files, etc.
+   *    - Automatically handle module preloading and import maps
+   *
+   * 2. **Resource Classification**
+   *    - js: JavaScript files, containing all scripts and modules
+   *    - css: Stylesheet files
+   *    - modulepreload: ESM modules that need to be preloaded
+   *    - importmap: Import map files
+   *    - resources: Other resource files (images, fonts, etc.)
+   *
+   * 3. **Path Processing**
+   *    - Automatically add base path prefix
+   *    - Ensure the correctness of resource paths
+   *    - Support resource isolation for multi-application scenarios
    *
    * @example
    * ```ts
-   * // 1. 基础用法
+   * // 1. Basic usage
    * export default async (rc: RenderContext) => {
-   *   // 渲染页面并收集依赖
+   *   // Render page and collect dependencies
    *   const app = createApp();
    *   const html = await renderToString(app, {
    *     importMetaSet: rc.importMetaSet
    *   });
    *
-   *   // 提交依赖收集
+   *   // Commit dependency collection
    *   await rc.commit();
    *
-   *   // 生成 HTML
+   *   // Generate HTML
    *   rc.html = `
    *     <!DOCTYPE html>
    *     <html>
@@ -686,18 +686,18 @@ export class RenderContext {
    *   `;
    * };
    *
-   * // 2. 多应用场景
+   * // 2. Multi-application scenario
    * const rc = await esmx.render({
-   *   base: '/app1',  // 设置基础路径
+   *   base: '/app1',  // Set base path
    *   params: { appId: 1 }
    * });
    *
-   * // 渲染并提交依赖
+   * // Render and commit dependencies
    * const html = await renderApp(rc);
    * await rc.commit();
    *
-   * // 资源路径会自动添加基础路径前缀
-   * // 例如：/app1/your-app-name/js/main.js
+   * // Resource paths will automatically add base path prefix
+   * // For example: /app1/your-app-name/js/main.js
    * ```
    */
   async commit() {
@@ -741,37 +741,37 @@ export class RenderContext {
     this._importMap = await esmx.getImportMapClientInfo(this.importmapMode);
   }
   /**
-   * 生成资源预加载标签
+   * Generate resource preload tags
    * @description
-   * preload() 方法用于生成资源预加载标签，通过提前加载关键资源来优化页面性能：
+   * The preload() method is used to generate resource preload tags, optimizing page performance by loading critical resources in advance:
    *
-   * 1. **资源类型**
-   *    - CSS 文件：使用 `as="style"` 预加载样式表
-   *    - JS 文件：使用 `as="script"` 预加载导入映射脚本
+   * 1. **Resource Types**
+   *    - CSS files: Use `as="style"` to preload stylesheets
+   *    - JS files: Use `as="script"` to preload import map scripts
    *
-   * 2. **性能优化**
-   *    - 提前发现并加载关键资源
-   *    - 与 HTML 解析并行加载
-   *    - 优化资源加载顺序
-   *    - 减少页面渲染阻塞
+   * 2. **Performance Optimization**
+   *    - Discover and load critical resources in advance
+   *    - Load in parallel with HTML parsing
+   *    - Optimize resource loading order
+   *    - Reduce page rendering blocking
    *
-   * 3. **最佳实践**
-   *    - 在 head 中尽早使用
-   *    - 只预加载当前页面必需的资源
-   *    - 与其他资源加载方法配合使用
+   * 3. **Best Practices**
+   *    - Use as early as possible in the head
+   *    - Only preload resources necessary for the current page
+   *    - Use in conjunction with other resource loading methods
    *
-   * @returns 返回包含所有预加载标签的 HTML 字符串
+   * @returns Returns HTML string containing all preload tags
    *
    * @example
    * ```ts
-   * // 在 HTML head 中使用
+   * // Use in HTML head
    * rc.html = `
    *   <!DOCTYPE html>
    *   <html>
    *   <head>
-   *     <!-- 预加载关键资源 -->
+   *     <!-- Preload critical resources -->
    *     ${rc.preload()}
-   *     <!-- 注入样式表 -->
+   *     <!-- Inject stylesheets -->
    *     ${rc.css()}
    *   </head>
    *   <body>
@@ -797,34 +797,34 @@ export class RenderContext {
     return list.join("");
   }
   /**
-   * 注入首屏样式表
+   * Inject first-screen stylesheets
    * @description
-   * css() 方法用于注入页面所需的样式表资源：
+   * The css() method is used to inject stylesheet resources required by the page:
    *
-   * 1. **注入位置**
-   *    - 必须在 head 标签中注入
-   *    - 避免页面闪烁（FOUC）和重排
-   *    - 确保样式在内容渲染时就位
+   * 1. **Injection Position**
+   *    - Must be injected in the head tag
+   *    - Avoid page flickering (FOUC) and reflow
+   *    - Ensure styles are in place when content is rendered
    *
-   * 2. **性能优化**
-   *    - 支持关键 CSS 提取
-   *    - 自动处理样式依赖关系
-   *    - 利用浏览器并行加载能力
+   * 2. **Performance Optimization**
+   *    - Support critical CSS extraction
+   *    - Automatically handle style dependency relationships
+   *    - Utilize browser parallel loading capabilities
    *
-   * 3. **使用场景**
-   *    - 注入首屏必需的样式
-   *    - 处理组件级别的样式
-   *    - 支持主题切换和动态样式
+   * 3. **Use Cases**
+   *    - Inject styles necessary for the first screen
+   *    - Handle component-level styles
+   *    - Support theme switching and dynamic styles
    *
    * @example
    * ```ts
-   * // 1. 基础用法
+   * // 1. Basic usage
    * rc.html = `
    *   <!DOCTYPE html>
    *   <html>
    *   <head>
-   *     ${rc.preload()}  <!-- 预加载资源 -->
-   *     ${rc.css()}      <!-- 注入样式表 -->
+   *     ${rc.preload()}  <!-- Preload resources -->
+   *     ${rc.css()}      <!-- Inject stylesheets -->
    *   </head>
    *   <body>
    *     <div id="app">Hello World</div>
@@ -832,13 +832,13 @@ export class RenderContext {
    *   </html>
    * `;
    *
-   * // 2. 与其他资源配合使用
+   * // 2. Use in conjunction with other resources
    * rc.html = `
    *   <!DOCTYPE html>
    *   <html>
    *   <head>
-   *     ${rc.preload()}  <!-- 预加载资源 -->
-   *     ${rc.css()}      <!-- 注入样式表 -->
+   *     ${rc.preload()}  <!-- Preload resources -->
+   *     ${rc.css()}      <!-- Inject stylesheets -->
    *   </head>
    *   <body>
    *     ${html}
@@ -854,35 +854,35 @@ export class RenderContext {
     return this.files.css.map((url) => `<link rel="stylesheet" href="${url}">`).join("");
   }
   /**
-   * 注入模块导入映射
+   * Inject module import map
    * @description
-   * importmap() 方法用于注入 ESM 模块的路径解析规则：
-   *
-   * 1. **注入位置**
-   *    - 必须在 body 中注入
-   *    - 必须在 moduleEntry 之前执行
-   *    - 避免阻塞页面首次渲染
-   *
-   * 2. **导入映射模式**
-   *    - 内联模式（inline）：
-   *      - 将映射内容直接内联到 HTML 中
-   *      - 适合映射内容较小的场景
-   *      - 减少 HTTP 请求数量
-   *    - JS 文件模式（js）：
-   *      - 生成独立的 JS 文件
-   *      - 适合映射内容较大的场景
-   *      - 可以利用浏览器缓存机制
-   *
-   * 3. **技术原因**
-   *    - 定义了 ESM 模块的路径解析规则
-   *    - 客户端入口模块和其依赖都需要使用这些映射
-   *    - 确保在执行模块代码前已正确设置映射
+   * The importmap() method is used to inject path resolution rules for ESM modules:
+   *
+   * 1. **Injection Position**
+   *    - Must be injected in the body
+   *    - Must be executed before moduleEntry
+   *    - Avoid blocking the first page render
+   *
+   * 2. **Import Map Modes**
+   *    - Inline mode (inline):
+   *      - Inline map content directly into HTML
+   *      - Suitable for scenarios with smaller map content
+   *      - Reduce the number of HTTP requests
+   *    - JS file mode (js):
+   *      - Generate independent JS files
+   *      - Suitable for scenarios with larger map content
+   *      - Can utilize browser caching mechanisms
+   *
+   * 3. **Technical Reasons**
+   *    - Define path resolution rules for ESM modules
+   *    - Client entry modules and their dependencies need to use these maps
+   *    - Ensure the map is correctly set before executing module code
    *
    * @example
    * ```ts
-   * // 1. 基础用法 - 内联模式
+   * // 1. Basic usage - Inline mode
    * const rc = await esmx.render({
-   *   importmapMode: 'inline'  // 默认模式
+   *   importmapMode: 'inline'  // Default mode
    * });
    *
    * rc.html = `
@@ -894,16 +894,16 @@ export class RenderContext {
    *   </head>
    *   <body>
    *     ${html}
-   *     ${rc.importmap()}    <!-- 注入导入映射 -->
-   *     ${rc.moduleEntry()}  <!-- 在导入映射之后执行 -->
+   *     ${rc.importmap()}    <!-- Inject import map -->
+   *     ${rc.moduleEntry()}  <!-- Execute after import map -->
    *     ${rc.modulePreload()}
    *   </body>
    *   </html>
    * `;
    *
-   * // 2. JS 文件模式 - 适合大型应用
+   * // 2. JS file mode - Suitable for large applications
    * const rc = await esmx.render({
-   *   importmapMode: 'js'  // 使用 JS 文件模式
+   *   importmapMode: 'js'  // Use JS file mode
    * });
    * ```
    */
@@ -911,27 +911,27 @@ export class RenderContext {
     return this._importMap.code;
   }
   /**
-   * 注入客户端入口模块
+   * Inject client entry module
    * @description
-   * moduleEntry() 方法用于注入客户端的入口模块：
-   * 1. **注入位置**
-   *    - 必须在 importmap 之后执行
-   *    - 确保在执行模块代码前已正确设置导入映射
-   *    - 控制客户端激活（Hydration）的开始时机
-   *
-   * 2. **技术原因**
-   *    - 作为客户端代码的入口点
-   *    - 需要等待基础设施（如导入映射）就绪
-   *    - 确保正确的模块路径解析
-   *
-   * 3. **使用场景**
-   *    - 启动客户端应用
-   *    - 执行客户端激活
-   *    - 初始化客户端状态
+   * The moduleEntry() method is used to inject the client's entry module:
+   * 1. **Injection Position**
+   *    - Must be executed after importmap
+   *    - Ensure the import map is correctly set before executing module code
+   *    - Control the start timing of client activation (Hydration)
+   *
+   * 2. **Technical Reasons**
+   *    - Serve as the entry point for client code
+   *    - Need to wait for infrastructure (such as import maps) to be ready
+   *    - Ensure correct module path resolution
+   *
+   * 3. **Use Cases**
+   *    - Start the client application
+   *    - Execute client activation
+   *    - Initialize client state
    *
    * @example
    * ```ts
-   * // 1. 基础用法
+   * // 1. Basic usage
    * rc.html = `
    *   <!DOCTYPE html>
    *   <html>
@@ -941,16 +941,16 @@ export class RenderContext {
    *   </head>
    *   <body>
    *     ${html}
-   *     ${rc.importmap()}    <!-- 先注入导入映射 -->
-   *     ${rc.moduleEntry()}  <!-- 再注入入口模块 -->
+   *     ${rc.importmap()}    <!-- Inject import map first -->
+   *     ${rc.moduleEntry()}  <!-- Then inject entry module -->
    *     ${rc.modulePreload()}
    *   </body>
    *   </html>
    * `;
    *
-   * // 2. 多入口配置
+   * // 2. Multiple entry configuration
    * const rc = await esmx.render({
-   *   entryName: 'mobile',  // 指定入口名称
+   *   entryName: 'mobile',  // Specify entry name
    *   params: { device: 'mobile' }
    * });
    * ```
@@ -959,28 +959,28 @@ export class RenderContext {
     return `<script type="module">import "${this.esmx.name}/src/entry.client";<\/script>`;
   }
   /**
-   * 预加载模块依赖
+   * Preload module dependencies
    * @description
-   * modulePreload() 方法用于预加载后续可能用到的模块：
+   * The modulePreload() method is used to preload modules that may be needed later:
    *
-   * 1. **注入位置**
-   *    - 必须在 importmap 和 moduleEntry 之后
-   *    - 确保使用正确的模块路径映射
-   *    - 避免与首屏渲染竞争资源
+   * 1. **Injection Position**
+   *    - Must be after importmap and moduleEntry
+   *    - Ensure the correct module path mapping is used
+   *    - Avoid competing with first-screen rendering for resources
    *
-   * 2. **性能优化**
-   *    - 预加载后续可能用到的模块
-   *    - 提升运行时性能
-   *    - 优化按需加载体验
+   * 2. **Performance Optimization**
+   *    - Preload modules that may be needed later
+   *    - Improve runtime performance
+   *    - Optimize on-demand loading experience
    *
-   * 3. **技术原因**
-   *    - 需要正确的路径解析规则
-   *    - 避免重复加载
-   *    - 控制加载优先级
+   * 3. **Technical Reasons**
+   *    - Need correct path resolution rules
+   *    - Avoid duplicate loading
+   *    - Control loading priority
    *
    * @example
    * ```ts
-   * // 1. 基础用法
+   * // 1. Basic usage
    * rc.html = `
    *   <!DOCTYPE html>
    *   <html>
@@ -992,16 +992,16 @@ export class RenderContext {
    *     ${html}
    *     ${rc.importmap()}
    *     ${rc.moduleEntry()}
-   *     ${rc.modulePreload()}  <!-- 预加载模块依赖 -->
+   *     ${rc.modulePreload()}  <!-- Preload module dependencies -->
    *   </body>
    *   </html>
    * `;
    *
-   * // 2. 与异步组件配合使用
+   * // 2. Use with async components
    * const AsyncComponent = defineAsyncComponent(() =>
    *   import('./components/AsyncComponent.vue')
    * );
-   * // modulePreload 会自动收集并预加载异步组件的依赖
+   * // modulePreload will automatically collect and preload dependencies of async components
    * ```
    */
   modulePreload() {