@blocklet/pages-kit 0.4.16-beta.20250306-1 → 0.4.16-beta.20250309-3

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

@@ -2,9 +2,16 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.injectESModulesShimsOptions = injectESModulesShimsOptions;
 function injectESModulesShimsOptions() {
+    // if already initialized, return
+    if (window.esmsInitOptions) {
+        return;
+    }
     window.esmsInitOptions = {
         shimMode: true,
         polyfillEnable: ['css-modules', 'json-modules', 'wasm-modules', 'source-phase'],
+        skip: ['crypto-browserify', 'crypto'],
+        mapOverrides: true,
     };
 }
+// enable es-module-shims
 injectESModulesShimsOptions();

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

@@ -31,7 +31,6 @@ require("es-module-shims");
 const react_1 = __importDefault(require("react"));
 const ufo_1 = require("ufo");
 const arcblockUx = __importStar(require("../builtin/arcblock/ux"));
-const aiRuntime = __importStar(require("../builtin/async/ai-runtime"));
 const imagePreview = __importStar(require("../builtin/async/image-preview"));
 const reactMarkdown = __importStar(require("../builtin/async/react-markdown"));
 const reactScrollToBottom = __importStar(require("../builtin/async/react-scroll-to-bottom"));
@@ -61,11 +60,15 @@ const builtin_module_transformer_1 = require("./typescript/builtin-module-transf
 function injectGlobalComponents() {
     var _a;
     const win = window || {};
+    // if already initialized, return
+    if (win[builtin_1.BuiltinModulesGlobalVariableName]) {
+        return;
+    }
     const enableShim = !!((_a = window === null || window === void 0 ? void 0 : window.esmsInitOptions) === null || _a === void 0 ? void 0 : _a.shimMode);
     win.React = react_1.default;
-    // 创建模块映射
+    // create module map
     const modules = {
-        react,
+        React: react,
         '@blocklet/pages-kit/builtin/pages-kit': { CustomComponentRenderer: CustomComponentRenderer_1.default },
         '@blocklet/pages-kit/builtin/dayjs': dayjs,
         '@blocklet/pages-kit/builtin/utils': utils,
@@ -90,27 +93,24 @@ function injectGlobalComponents() {
         '@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,
-        // crypto: {
-        //   // 手动暴露 crypto 的属性和方法
-        //   subtle: win.crypto.subtle,
-        //   getRandomValues: win.crypto.getRandomValues,
-        //   randomUUID: win.crypto.randomUUID,
-        //   // 如果需要作为默认导出
-        //   default: win.crypto,
-        // },
+        '@blocklet/pages-kit/builtin/async/ai-runtime': {
+            get: () => Promise.resolve().then(() => __importStar(require('../builtin/async/ai-runtime'))).catch((err) => {
+                console.error('Failed to load AI runtime', err);
+                return {};
+            }),
+        },
     };
-    // 设置全局变量
+    // set global variable
     win[builtin_1.BuiltinModulesGlobalVariableName] = {
         modules,
         require(module) {
             var _a;
-            // 处理内置模块
+            // handle builtin module
             const builtinModule = this.modules[module];
             if (builtinModule) {
                 return builtinModule;
             }
-            // 处理相对路径导入
+            // handle relative path import
             if ((0, builtin_module_transformer_1.isRelativeModule)(module)) {
                 const fileName = module.split('/').pop();
                 const fullUrl = (0, ufo_1.joinURL)(window.location.origin, ((_a = window === null || window === void 0 ? void 0 : window.blocklet) === null || _a === void 0 ? void 0 : _a.prefix) || '/', 'chunks', fileName);
@@ -124,27 +124,74 @@ function injectGlobalComponents() {
             return null;
         },
     };
-    // 创建 importmap
+    // create 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['${builtin_1.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,
+        // 计算模块的 hash 值作为缓存版本
+        const calculateModulesHash = () => {
+            // 只提取模块路径和导出的键名用于 hash 计算
+            const moduleStructure = Object.entries(modules).map(([path, mod]) => ({
+                path,
+                exports: Object.keys(mod).sort(),
+            }));
+            const str = JSON.stringify(moduleStructure);
+            // 简单的 hash 计算方法
+            let hash = 0;
+            for (let i = 0; i < str.length; i++) {
+                const char = str.charCodeAt(i);
+                hash = hash * 2 ** 5 - hash + char;
+            }
+            return hash.toString(16);
+        };
+        const cacheKey = 'pages-kit-import-map';
+        const moduleHash = calculateModulesHash();
+        // 获取 imports - 优先从缓存读取
+        const getImportsFromCache = () => {
+            try {
+                const cachedData = localStorage.getItem(cacheKey);
+                if (cachedData) {
+                    const { hash, imports } = JSON.parse(cachedData);
+                    if (hash === moduleHash) {
+                        // eslint-disable-next-line no-console
+                        console.log(`getImportsFromCache: ${hash}`, imports);
+                        return imports; // 返回缓存的 imports
+                    }
+                }
+            }
+            catch (e) {
+                console.warn('Failed to load import map from cache', e);
+            }
+            return null; // 缓存无效
         };
+        // 尝试从缓存获取或重新计算
+        const imports = getImportsFromCache() ||
+            Object.entries(modules).reduce((acc, [modulePath, moduleContent]) => {
+                const namedExports = Object.keys(moduleContent).filter((key) => key !== 'default');
+                const hasDefaultExport = 'default' in moduleContent;
+                // create module code
+                const moduleCode = `// GENERATED FILE. DO NOT EDIT.
+const moduleSource = window['${builtin_1.BuiltinModulesGlobalVariableName}'].modules['${modulePath}'];       
+${namedExports.map((name) => `export const ${name} = moduleSource['${name}'];`).join('\n')}
+export default ${hasDefaultExport ? 'moduleSource.default' : 'moduleSource'};
+`;
+                // create base64 code
+                const base64Code = btoa(moduleCode);
+                acc[modulePath] = `data:application/javascript;base64,${base64Code}`;
+                return acc;
+            }, {});
+        // 如果是新计算的 imports，保存到缓存
+        if (!getImportsFromCache()) {
+            try {
+                localStorage.setItem(cacheKey, JSON.stringify({
+                    hash: moduleHash,
+                    imports,
+                }));
+            }
+            catch (e) {
+                console.warn('Failed to cache import map', e);
+            }
+        }
+        // 添加 resolve 配置
+        const importMap = { imports };
         if (enableShim) {
             window.importShim.addImportMap(importMap);
         }

package/lib/esm/components/CustomComponentRenderer/state.js

@@ -18,7 +18,7 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { cx } from '@emotion/css';
 import { Skeleton, Fade, Box } from '@mui/material';
 import { isEmpty } from 'lodash';
@@ -85,7 +85,7 @@ function importCustomComponent(m, { componentId }) {
             // 使用useMemo缓存渲染内容，避免不必要的重计算
             const content = useMemo(() => {
                 if (loading) {
-                    return (_jsxs(Box, { sx: { width: '100%', p: 1 }, children: [_jsx(Skeleton, { variant: "rectangular", width: "100%", height: 60, animation: "wave" }), _jsxs(Box, { sx: { pt: 1 }, children: [_jsx(Skeleton, { width: "80%" }), _jsx(Skeleton, { width: "60%" }), _jsx(Skeleton, { width: "40%" })] })] }));
+                    return (_jsx(Box, { sx: { width: '100%', p: 1 }, children: _jsx(Skeleton, { variant: "rectangular", width: "100%", height: 40, animation: "wave" }) }));
                 }
                 if (error) {
                     return _jsx(ComponentError, { componentId: componentId, message: error.message });