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

package/src/utils/import-map.ts

@@ -80,12 +80,64 @@ export function buildScopesMap(
 
     return scopes;
 }
+/**
+ * Fixes Chrome's nested scope resolution bug in import maps.
+ *
+ * Chrome has a bug where nested scopes in import maps are not resolved correctly.
+ * For example, when you have both "/shared-modules/" and "/shared-modules/vue2/" scopes,
+ * Chrome fails to properly apply the more specific nested scope.
+ *
+ * This function works around the bug by:
+ * 1. Sorting scopes by path depth (shallow paths first, deeper paths last)
+ * 2. Manually applying scopes to matching imports in the correct order
+ *
+ * @example
+ * Problematic import map that fails in Chrome:
+ * ```json
+ * {
+ *   "scopes": {
+ *     "/shared-modules/": {
+ *       "vue": "/shared-modules/vue.d8c7a640.final.mjs"
+ *     },
+ *     "/shared-modules/vue2/": {
+ *       "vue": "/shared-modules/vue2.9b4efaf3.final.mjs"
+ *     }
+ *   }
+ * }
+ * ```
+ *
+ * @see https://github.com/guybedford/es-module-shims/issues/529
+ * @see https://issues.chromium.org/issues/453147451
+ */
+export function fixNestedScopesResolution(
+    importMap: Required<ImportMap>
+): Required<ImportMap> {
+    Object.entries(importMap.scopes)
+        .sort(([pathA], [pathB]) => {
+            const depthA = pathA.split('/').length;
+            const depthB = pathB.split('/').length;
+            return depthA - depthB;
+        })
+        .forEach(([scopePath, scopeMappings]) => {
+            Object.values(importMap.imports).forEach((importPath) => {
+                if (importPath.startsWith(scopePath)) {
+                    importMap.scopes[importPath] = {
+                        ...importMap.scopes[importPath],
+                        ...scopeMappings
+                    };
+                }
+            });
+            Reflect.deleteProperty(importMap.scopes, scopePath);
+        });
+
+    return importMap;
+}
 
 export function getImportMap({
     manifests,
     getFile,
     getScope
-}: GetImportMapOptions): ImportMap {
+}: GetImportMapOptions): Required<ImportMap> {
     const imports = buildImportsMap(manifests, getFile);
 
     const scopes = buildScopesMap(imports, manifests, getScope);

package/src/utils/middleware.ts

@@ -4,18 +4,18 @@ import send from 'send';
 import type { Esmx } from '../core';
 
 /**
- * 中间件函数类型定义
+ * Middleware function type definition
  *
  * @description
- * 中间件是一个函数，用于处理 HTTP 请求。它接收请求对象、响应对象和下一个中间件函数作为参数。
- * 中间件可以执行以下操作：
- * - 修改请求和响应对象
- * - 结束请求-响应循环
- * - 调用下一个中间件
+ * Middleware is a function used to handle HTTP requests. It receives the request object, response object, and the next middleware function as parameters.
+ * Middleware can perform the following operations:
+ * - Modify request and response objects
+ * - End the request-response cycle
+ * - Call the next middleware
  *
  * @example
  * ```ts
- * // 创建一个简单的日志中间件
+ * // Create a simple logging middleware
  * const loggerMiddleware: Middleware = (req, res, next) => {
  *   console.log(`${req.method} ${req.url}`);
  *   next();
@@ -30,24 +30,24 @@ export type Middleware = (
 
 const reFinal = /\.final\.[a-zA-Z0-9]+$/;
 /**
- * 判断文件路径是否是一个符合 esmx 规范的不可变文件
- * @param path 文件路径
+ * Determine if a file path is an immutable file that complies with esmx specifications
+ * @param path File path
  */
 export function isImmutableFile(filename: string) {
     return reFinal.test(filename);
 }
 
 /**
- * 创建 Esmx 应用的中间件
+ * Create middleware for Esmx application
  *
- * @param esmx - Esmx 实例
- * @returns 返回一个处理静态资源的中间件
+ * @param esmx - Esmx instance
+ * @returns Returns a middleware that handles static resources
  *
  * @description
- * 该函数创建一个中间件，用于处理模块的静态资源请求。它会：
- * - 根据模块配置创建对应的静态资源中间件
- * - 处理资源的缓存控制
- * - 支持不可变文件的长期缓存
+ * This function creates a middleware to handle static resource requests for modules. It will:
+ * - Create corresponding static resource middleware based on module configuration
+ * - Handle cache control for resources
+ * - Support long-term caching for immutable files
  *
  * @example
  * ```ts
@@ -56,7 +56,7 @@ export function isImmutableFile(filename: string) {
  * const esmx = new Esmx();
  * const middleware = createMiddleware(esmx);
  *
- * // 在 HTTP 服务器中使用
+ * // Use in HTTP server
  * server.use(middleware);
  * ```
  */
@@ -96,8 +96,8 @@ export function createMiddleware(esmx: Esmx): Middleware {
 }
 
 /**
- * 将多个中间件，合并成一个中间件执行
- * @param middlewares 中间件列表
+ * Merge multiple middlewares into one middleware execution
+ * @param middlewares List of middlewares
  * @returns
  */
 export function mergeMiddlewares(middlewares: Middleware[]): Middleware {

package/src/utils/static-import-lexer.ts

@@ -7,23 +7,23 @@ import type { ParsedModuleConfig } from '../module-config';
 import * as esmLexer from 'es-module-lexer';
 
 /**
- * 从 JS 代码中获取静态 import 的模块名列表。也许不能并发多个调用，没实验过。
- * @param code js 代码
- * @returns `Promise<string[]>` 静态 import 的模块名列表
+ * Get the list of statically imported module names from JS code. Maybe cannot handle multiple concurrent calls, not tested.
+ * @param code JS code
+ * @returns `Promise<string[]>` List of statically imported module names
  */
 export async function getImportsFromJsCode(code: string): Promise<string[]> {
     await esmLexer.init;
     const [imports] = esmLexer.parse(code);
-    // 静态导入 && 拥有模块名
+    // Static import && has module name
     return imports
         .filter((item) => item.t === 1 && item.n)
         .map((item) => item.n as string);
 }
 
 /**
- * 从 JS 文件中获取静态 import 的模块名列表。
- * @param filepath js 文件路径
- * @returns `Promise<string[]>` 静态 import 的模块名列表
+ * Get the list of statically imported module names from a JS file.
+ * @param filepath JS file path
+ * @returns `Promise<string[]>` List of statically imported module names
  */
 export async function getImportsFromJsFile(
     filepath: fs.PathLike | fs.promises.FileHandle
@@ -34,13 +34,13 @@ export async function getImportsFromJsFile(
 
 export type ImportPreloadInfo = SpecifierMap;
 /**
- * 获取导入的预加载信息。
- * @param specifier 模块名
- * @param importMap 导入映射对象
- * @param moduleConfig 模块配置
+ * Get import preload information.
+ * @param specifier Module name
+ * @param importMap Import map object
+ * @param moduleConfig Module configuration
  * @returns
- *   - `Promise<{ [specifier: string]: ImportPreloadPathString }>` 模块名和文件路径的映射对象
- *   - `null` specifier 不存在
+ *   - `Promise<{ [specifier: string]: ImportPreloadPathString }>` Mapping object of module names to file paths
+ *   - `null` specifier does not exist
  */
 export async function getImportPreloadInfo(
     specifier: string,
@@ -53,18 +53,18 @@ export async function getImportPreloadInfo(
     }
 
     const ans: ImportPreloadInfo = {
-        // 入口文件也放入预加载列表
+        // Entry file is also added to the preload list
         [specifier]: importInfo[specifier]
     };
 
-    // 词法分析是耗时操作，因此处理的文件越少越快，换句话说就是深度越浅越快，因此这里使用广度优先搜索
+    // Lexical analysis is a time-consuming operation, so the fewer files processed, the faster, in other words, the shallower the depth, the faster, so breadth-first search is used here
     const needHandles: string[] = [specifier];
     while (needHandles.length) {
         const specifier = needHandles.shift()!;
         let filepath = importInfo[specifier];
         const splitRes = filepath.split('/');
         if (splitRes[0] === '') splitRes.shift();
-        // 这里默认路径的第一个目录是软包名称
+        // Here it is assumed that the first directory in the path is the soft package name
         const name = splitRes.shift() + '';
         const link = moduleConfig.links[name];
         if (!link) {
@@ -73,13 +73,13 @@ export async function getImportPreloadInfo(
         filepath = path.join(link.client, ...splitRes);
         const imports = await getImportsFromJsFile(filepath);
         for (const specifier of imports) {
-            // 如果模块名在 importMap 中不存在，或已经处理过
+            // If the module name does not exist in importMap or has been processed
             if (!(specifier in importInfo) || specifier in ans) continue;
             ans[specifier] = importInfo[specifier];
             needHandles.push(specifier);
         }
     }
 
-    // 倒序，理论上倒序后浏览器解析可能会更快
+    // Reverse order, theoretically browser parsing may be faster after reversing
     return Object.fromEntries(Object.entries(ans).reverse());
 }