@blocklet/pages-kit 0.4.16-beta.20250305-2 → 0.4.16-beta.20250309-3

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

@@ -1,7 +1,14 @@
-"use strict";
-window.esmsInitOptions = {
-    // Enable Shim Mode
-    shimMode: true,
-    // Enable polyfill features.
-    polyfillEnable: ['css-modules', 'json-modules', 'wasm-modules', 'source-phase'],
-};
+export 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/esm/utils/inject-global-components.js

@@ -1,17 +1,7 @@
-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';
 import * as reactMarkdown from '../builtin/async/react-markdown';
 import * as reactScrollToBottom from '../builtin/async/react-scroll-to-bottom';
@@ -36,14 +26,20 @@ import * as zustand from '../builtin/zustand';
 import * as zustandMiddlewareImmer from '../builtin/zustand/middleware/immer';
 import CustomComponentRenderer from '../components/CustomComponentRenderer';
 import { BuiltinModulesGlobalVariableName } from '../types/builtin';
+import { isRelativeModule } from './typescript/builtin-module-transformer';
 // Initialize ES Module Shims before any imports
 export function injectGlobalComponents() {
+    var _a;
     const win = window || {};
-    const importShim = win.importShim;
+    // if already initialized, return
+    if (win[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;
-    // 创建模块映射
+    // create module map
     const modules = {
-        react,
+        React: react,
         '@blocklet/pages-kit/builtin/pages-kit': { CustomComponentRenderer },
         '@blocklet/pages-kit/builtin/dayjs': dayjs,
         '@blocklet/pages-kit/builtin/utils': utils,
@@ -68,55 +64,107 @@ export 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,
+        '@blocklet/pages-kit/builtin/async/ai-runtime': {
+            get: () => import('../builtin/async/ai-runtime').catch((err) => {
+                console.error('Failed to load AI runtime', err);
+                return {};
+            }),
+        },
     };
-    // 设置全局变量
+    // set global variable
     win[BuiltinModulesGlobalVariableName] = {
         modules,
         require(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);
-                    if (importShim) {
-                        return yield importShim(fullUrl);
-                    }
-                    return yield import(/* @vite-ignore */ fullUrl);
+            var _a;
+            // handle builtin module
+            const builtinModule = this.modules[module];
+            if (builtinModule) {
+                return builtinModule;
+            }
+            // handle relative path import
+            if (isRelativeModule(module)) {
+                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);
+                if (enableShim) {
+                    const mod = window.importShim(fullUrl);
+                    return mod;
                 }
-                return null;
-            });
+                const mod = import(/* @vite-ignore */ fullUrl);
+                return mod;
+            }
+            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['${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);
         };
-        if (importShim === null || importShim === void 0 ? void 0 : importShim.addImportMap) {
-            importShim.addImportMap(importMap);
+        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['${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);
         }
         else {
             // fallback to create script tag

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

@@ -1,13 +1,14 @@
 import { BuiltinModulesGlobalVariableName } from '../../types/builtin';
+export const isRelativeModule = (moduleSpecifier) => {
+    return moduleSpecifier.startsWith('./') || moduleSpecifier.startsWith('../');
+};
 export const createBuiltinModuleTransformer = (ts) => (context) => (file) => {
     const { factory } = context;
     // 统一的模块导入收集器
     const imports = [];
     // check if the module is a target module
     const isTargetModule = (moduleSpecifier) => {
-        return (moduleSpecifier.startsWith('@blocklet/pages-kit/builtin/') ||
-            moduleSpecifier.startsWith('./') ||
-            moduleSpecifier.startsWith('../'));
+        return moduleSpecifier.startsWith('@blocklet/pages-kit/builtin/') || isRelativeModule(moduleSpecifier);
     };
     // filter and collect the import statements that need to be processed
     const statements = file.statements.filter((s) => {
@@ -43,11 +44,9 @@ export const createBuiltinModuleTransformer = (ts) => (context) => (file) => {
     });
     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);
+        const requireCall = factory.createCallExpression(factory.createPropertyAccessExpression(factory.createIdentifier(BuiltinModulesGlobalVariableName), 'require'), undefined, [factory.createStringLiteral(importInfo.moduleName)]);
+        // create await expression if the module is ../ or ./
+        const mod = isRelativeModule(importInfo.moduleName) ? factory.createAwaitExpression(requireCall) : requireCall;
         return [
             importInfo.name
                 ? factory.createVariableStatement([], factory.createVariableDeclarationList([

package/lib/types/components/CustomComponentRenderer/ErrorComponent.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+interface ComponentErrorProps {
+    title?: string;
+    message: string;
+    componentId?: string;
+    componentName?: string;
+    blockletId?: string;
+    blockletTitle?: string;
+    showHints?: boolean;
+    error?: Error;
+    resetErrorBoundary?: () => void;
+}
+export declare const ComponentError: React.FC<ComponentErrorProps>;
+export {};