@blocklet/pages-kit 0.4.15 → 0.4.16-beta.20250305

package/lib/esm/utils/inject-es-module-shims-options.js

@@ -0,0 +1,10 @@
+"use strict";
+function initShimsOptions() {
+    window.esmsInitOptions = {
+        // Enable Shim Mode
+        shimMode: true,
+        // Enable polyfill features.
+        polyfillEnable: ['css-modules', 'json-modules', 'wasm-modules', 'source-phase'],
+    };
+}
+initShimsOptions();

package/lib/esm/utils/inject-global-components.js

@@ -1,4 +1,15 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import 'es-module-shims';
 import React from 'react';
+import { joinURL } from 'ufo';
 import * as arcblockUx from '../builtin/arcblock/ux';
 import * as aiRuntime from '../builtin/async/ai-runtime';
 import * as imagePreview from '../builtin/async/image-preview';
@@ -25,57 +36,83 @@ import * as zustand from '../builtin/zustand';
 import * as zustandMiddlewareImmer from '../builtin/zustand/middleware/immer';
 import CustomComponentRenderer from '../components/CustomComponentRenderer';
 import { BuiltinModulesGlobalVariableName } from '../types/builtin';
-function injectGlobalComponents() {
-    const win = window;
-    // if (win[BuiltinModulesGlobalVariableName]) return;
+// Initialize ES Module Shims before any imports
+export function injectGlobalComponents() {
+    const win = window || {};
+    win.React = React;
+    // 创建模块映射
+    const modules = {
+        react,
+        '@blocklet/pages-kit/builtin/pages-kit': { CustomComponentRenderer },
+        '@blocklet/pages-kit/builtin/dayjs': dayjs,
+        '@blocklet/pages-kit/builtin/utils': utils,
+        '@blocklet/pages-kit/builtin/stream': stream,
+        '@blocklet/pages-kit/builtin/react': react,
+        '@blocklet/pages-kit/builtin/emotion/css': emotionCss,
+        '@blocklet/pages-kit/builtin/mui/material': muiMaterial,
+        '@blocklet/pages-kit/builtin/mui/lab': muiLab,
+        '@blocklet/pages-kit/builtin/react-hook-form': reactHookForm,
+        '@blocklet/pages-kit/builtin/iconify/react': iconifyReact,
+        '@blocklet/pages-kit/builtin/zustand': zustand,
+        '@blocklet/pages-kit/builtin/zustand/middleware/immer': zustandMiddlewareImmer,
+        '@blocklet/pages-kit/builtin/immer': immer,
+        '@blocklet/pages-kit/builtin/react-wrap-balancer': reactWrapBalancer,
+        '@blocklet/pages-kit/builtin/react-router-dom': reactRouterDOM,
+        '@blocklet/pages-kit/builtin/session': session,
+        '@blocklet/pages-kit/builtin/locale': locale,
+        '@blocklet/pages-kit/builtin/arcblock/ux': arcblockUx,
+        '@blocklet/pages-kit/builtin/page/header': pageHeader,
+        '@blocklet/pages-kit/builtin/components': components,
+        '@blocklet/pages-kit/builtin/async/react-scroll-to-bottom': reactScrollToBottom,
+        '@blocklet/pages-kit/builtin/async/react-markdown': reactMarkdown,
+        '@blocklet/pages-kit/builtin/async/react-syntax-highlighter': reactSyntaxHighlighter,
+        '@blocklet/pages-kit/builtin/async/image-preview': imagePreview,
+        '@blocklet/pages-kit/builtin/async/ai-runtime': aiRuntime,
+    };
+    // 设置全局变量
     win[BuiltinModulesGlobalVariableName] = {
-        modules: {
-            '@blocklet/pages-kit/builtin/pages-kit': { CustomComponentRenderer },
-            '@blocklet/pages-kit/builtin/dayjs': dayjs,
-            '@blocklet/pages-kit/builtin/utils': utils,
-            '@blocklet/pages-kit/builtin/stream': stream,
-            '@blocklet/pages-kit/builtin/react': react,
-            '@blocklet/pages-kit/builtin/emotion/css': emotionCss,
-            '@blocklet/pages-kit/builtin/mui/material': muiMaterial,
-            '@blocklet/pages-kit/builtin/mui/lab': muiLab,
-            '@blocklet/pages-kit/builtin/react-hook-form': reactHookForm,
-            '@blocklet/pages-kit/builtin/iconify/react': iconifyReact,
-            //
-            '@blocklet/pages-kit/builtin/zustand': zustand,
-            '@blocklet/pages-kit/builtin/zustand/middleware/immer': zustandMiddlewareImmer,
-            '@blocklet/pages-kit/builtin/immer': immer,
-            '@blocklet/pages-kit/builtin/react-wrap-balancer': reactWrapBalancer,
-            '@blocklet/pages-kit/builtin/react-router-dom': reactRouterDOM,
-            '@blocklet/pages-kit/builtin/session': session,
-            '@blocklet/pages-kit/builtin/locale': locale,
-            '@blocklet/pages-kit/builtin/arcblock/ux': arcblockUx,
-            '@blocklet/pages-kit/builtin/page/header': pageHeader,
-            '@blocklet/pages-kit/builtin/components': components,
-            // The following packages are lazy loading
-            '@blocklet/pages-kit/builtin/async/react-scroll-to-bottom': reactScrollToBottom,
-            '@blocklet/pages-kit/builtin/async/react-markdown': reactMarkdown,
-            '@blocklet/pages-kit/builtin/async/react-syntax-highlighter': reactSyntaxHighlighter,
-            '@blocklet/pages-kit/builtin/async/image-preview': imagePreview,
-            '@blocklet/pages-kit/builtin/async/ai-runtime': aiRuntime,
-        },
+        modules,
         require(module) {
-            var _a;
-            if ((_a = win[BuiltinModulesGlobalVariableName]) === null || _a === void 0 ? void 0 : _a.modules[module]) {
-                return win[BuiltinModulesGlobalVariableName].modules[module];
-            }
-            // Try loading from CDN or dynamic import
-            try {
-                // TODO: 需要支持动态加载
-                // const module = await import(/* webpackIgnore: true */ `https://cdn.jsdelivr.net/npm/${moduleName}`);
-                // return module;
+            return __awaiter(this, void 0, void 0, function* () {
+                var _a;
+                // 处理内置模块
+                const builtinModule = this.modules[module];
+                if (builtinModule) {
+                    return builtinModule;
+                }
+                // 处理相对路径导入
+                if (module.startsWith('./') || module.startsWith('../')) {
+                    const fileName = module.split('/').pop();
+                    const fullUrl = joinURL(window.location.origin, ((_a = window === null || window === void 0 ? void 0 : window.blocklet) === null || _a === void 0 ? void 0 : _a.prefix) || '/', 'chunks', fileName);
+                    return yield importShim(fullUrl);
+                }
                 return null;
-            }
-            catch (err) {
-                console.warn(`Failed to load module ${module}`, err);
-                return null;
-            }
+            });
         },
     };
-    win.React = React;
+    // 创建 importmap
+    const setupImportMap = () => {
+        // 设置 importmap 内容
+        const imports = Object.entries(modules).reduce((acc, [modulePath, moduleContent]) => {
+            const namedExports = Object.keys(moduleContent).filter((key) => key !== 'default');
+            const hasDefaultExport = 'default' in moduleContent;
+            // 创建模块代码
+            const moduleCode = `// GENERATED FILE. DO NOT EDIT.
+        const moduleSource = window['${BuiltinModulesGlobalVariableName}'].modules['${modulePath}'];
+        ${namedExports.map((name) => `export const ${name} = moduleSource['${name}'];`).join('\n')}
+        export default ${hasDefaultExport ? 'moduleSource.default' : 'moduleSource'};
+      `;
+            // 使用 base64 编码模块代码
+            const base64Code = btoa(moduleCode);
+            acc[modulePath] = `data:application/javascript;base64,${base64Code}`;
+            return acc;
+        }, {});
+        // 添加 resolve 配置
+        const importMap = {
+            imports,
+        };
+        importShim.addImportMap(importMap);
+    };
+    setupImportMap();
 }
 injectGlobalComponents();

package/lib/esm/utils/typescript/builtin-module-transformer.js

@@ -1,48 +1,67 @@
 import { BuiltinModulesGlobalVariableName } from '../../types/builtin';
 export const createBuiltinModuleTransformer = (ts) => (context) => (file) => {
     const { factory } = context;
-    const builtins = [];
+    // 统一的模块导入收集器
+    const imports = [];
+    // check if the module is a target module
+    const isTargetModule = (moduleSpecifier) => {
+        return (moduleSpecifier.startsWith('@blocklet/pages-kit/builtin/') ||
+            moduleSpecifier.startsWith('./') ||
+            moduleSpecifier.startsWith('../'));
+    };
+    // filter and collect the import statements that need to be processed
     const statements = file.statements.filter((s) => {
         var _a, _b, _c;
         if (ts.isImportDeclaration(s) &&
             ts.isStringLiteral(s.moduleSpecifier) &&
-            s.moduleSpecifier.text.startsWith('@blocklet/pages-kit/builtin/')) {
-            const builtin = {
+            isTargetModule(s.moduleSpecifier.text)) {
+            const importInfo = {
                 moduleName: s.moduleSpecifier.text,
                 name: (_b = (_a = s.importClause) === null || _a === void 0 ? void 0 : _a.name) === null || _b === void 0 ? void 0 : _b.text,
                 members: [],
+                namespace: '',
             };
-            builtins.push(builtin);
             const namedBindings = (_c = s.importClause) === null || _c === void 0 ? void 0 : _c.namedBindings;
             if (namedBindings) {
                 if (ts.isNamespaceImport(namedBindings)) {
-                    builtin.namespace = namedBindings.name.text;
+                    importInfo.namespace = namedBindings.name.text;
                 }
                 namedBindings.forEachChild((node) => {
                     var _a;
                     if (ts.isImportSpecifier(node)) {
-                        builtin.members.push({ name: node.name.text, propertyName: (_a = node.propertyName) === null || _a === void 0 ? void 0 : _a.text });
+                        importInfo.members.push({
+                            name: node.name.text,
+                            propertyName: (_a = node.propertyName) === null || _a === void 0 ? void 0 : _a.text,
+                        });
                     }
                 });
             }
+            imports.push(importInfo);
             return false;
         }
         return true;
     });
-    statements.unshift(...builtins.flatMap((builtin) => {
-        const mod = factory.createCallExpression(factory.createPropertyAccessExpression(factory.createIdentifier(BuiltinModulesGlobalVariableName), 'require'), undefined, [factory.createStringLiteral(builtin.moduleName)]);
+    statements.unshift(...imports.flatMap((importInfo) => {
+        // call inject-global-components require method
+        const requireCall = factory.createCallExpression(factory.createPropertyAccessExpression(factory.createPropertyAccessExpression(
+        // factory.createIdentifier('globalThis'),
+        factory.createIdentifier('window'), factory.createIdentifier(BuiltinModulesGlobalVariableName)), factory.createIdentifier('require')), undefined, [factory.createStringLiteral(importInfo.moduleName)]);
+        // create await expression to wait for the async result
+        const mod = factory.createAwaitExpression(requireCall);
         return [
-            builtin.name
+            importInfo.name
                 ? factory.createVariableStatement([], factory.createVariableDeclarationList([
-                    factory.createVariableDeclaration(factory.createIdentifier(builtin.name), undefined, undefined, factory.createPropertyAccessExpression(mod, 'default')),
+                    factory.createVariableDeclaration(factory.createIdentifier(importInfo.name), undefined, undefined, factory.createPropertyAccessExpression(mod, 'default')),
                 ], ts.NodeFlags.Const))
                 : undefined,
-            builtin.namespace
+            // handle namespace import
+            importInfo.namespace
                 ? factory.createVariableStatement([], factory.createVariableDeclarationList([
-                    factory.createVariableDeclaration(factory.createIdentifier(builtin.namespace), undefined, undefined, mod),
+                    factory.createVariableDeclaration(factory.createIdentifier(importInfo.namespace), undefined, undefined, mod),
                 ], ts.NodeFlags.Const))
                 : undefined,
-            ...builtin.members.map((member) => {
+            // handle named import
+            ...importInfo.members.map((member) => {
                 var _a;
                 return factory.createVariableStatement([], factory.createVariableDeclarationList([
                     factory.createVariableDeclaration(factory.createIdentifier(member.name), undefined, undefined, factory.createPropertyAccessExpression(mod, (_a = member.propertyName) !== null && _a !== void 0 ? _a : member.name)),

package/lib/types/components/index.d.ts

@@ -1,3 +1,4 @@
+import '../utils/inject-es-module-shims-options';
 import '../utils/inject-global-components';
 export { default as CustomComponentRenderer } from './CustomComponentRenderer';
 export * from './CustomComponentRenderer';