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

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

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

@@ -22,15 +22,6 @@ var __importStar = (this && this.__importStar) || function (mod) {
     __setModuleDefault(result, mod);
     return result;
 };
-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());
-    });
-};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
@@ -40,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"));
@@ -65,14 +55,20 @@ const zustand = __importStar(require("../builtin/zustand"));
 const zustandMiddlewareImmer = __importStar(require("../builtin/zustand/middleware/immer"));
 const CustomComponentRenderer_1 = __importDefault(require("../components/CustomComponentRenderer"));
 const builtin_1 = require("../types/builtin");
+const builtin_module_transformer_1 = require("./typescript/builtin-module-transformer");
 // Initialize ES Module Shims before any imports
 function injectGlobalComponents() {
+    var _a;
     const win = window || {};
-    const importShim = win.importShim;
+    // 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,
@@ -97,55 +93,107 @@ 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: () => 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) {
-            return __awaiter(this, void 0, void 0, function* () {
-                var _a;
-                // 处理内置模块
-                const builtinModule = this.modules[module];
-                if (builtinModule) {
-                    return builtinModule;
+            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);
+                if (enableShim) {
+                    const mod = window.importShim(fullUrl);
+                    return mod;
                 }
-                // 处理相对路径导入
-                if (module.startsWith('./') || module.startsWith('../')) {
-                    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);
-                    if (importShim) {
-                        return yield importShim(fullUrl);
-                    }
-                    return yield Promise.resolve(`${fullUrl}`).then(s => __importStar(require(s)));
-                }
-                return null;
-            });
+                const mod = Promise.resolve(`${fullUrl}`).then(s => __importStar(require(s)));
+                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['${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);
         };
-        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['${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);
         }
         else {
             // fallback to create script tag

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

@@ -1,16 +1,18 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.createBuiltinModuleTransformer = void 0;
+exports.createBuiltinModuleTransformer = exports.isRelativeModule = void 0;
 const builtin_1 = require("../../types/builtin");
+const isRelativeModule = (moduleSpecifier) => {
+    return moduleSpecifier.startsWith('./') || moduleSpecifier.startsWith('../');
+};
+exports.isRelativeModule = isRelativeModule;
 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/') || (0, exports.isRelativeModule)(moduleSpecifier);
     };
     // filter and collect the import statements that need to be processed
     const statements = file.statements.filter((s) => {
@@ -46,11 +48,9 @@ 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(builtin_1.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(builtin_1.BuiltinModulesGlobalVariableName), 'require'), undefined, [factory.createStringLiteral(importInfo.moduleName)]);
+        // create await expression if the module is ../ or ./
+        const mod = (0, exports.isRelativeModule)(importInfo.moduleName) ? factory.createAwaitExpression(requireCall) : requireCall;
         return [
             importInfo.name
                 ? factory.createVariableStatement([], factory.createVariableDeclarationList([

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

@@ -0,0 +1,36 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Box, Typography, Button } from '@mui/material';
+export const ComponentError = (_a) => {
+    var { title = 'Component Failed to Load', message, componentId, componentName, blockletId, blockletTitle, showHints = false, error, resetErrorBoundary } = _a, rest = __rest(_a, ["title", "message", "componentId", "componentName", "blockletId", "blockletTitle", "showHints", "error", "resetErrorBoundary"]);
+    // 如果提供了error但没有message，使用error.message
+    const displayMessage = message || (error ? error.message : 'Unknown error');
+    console.warn(rest);
+    return (_jsxs(Box, { sx: {
+            p: 3,
+            border: '1px dashed #d32f2f',
+            borderRadius: 1,
+            bgcolor: 'rgba(211, 47, 47, 0.04)',
+            display: 'flex',
+            flexDirection: 'column',
+            gap: 1,
+        }, children: [_jsx(Typography, { variant: "subtitle1", sx: { color: '#d32f2f', fontWeight: 500 }, children: title }), _jsx(Typography, { variant: "body2", sx: { color: 'text.secondary' }, children: displayMessage }), error && error.stack && process.env.NODE_ENV !== 'production' && (_jsx(Box, { component: "pre", sx: {
+                    mt: 2,
+                    p: 1,
+                    bgcolor: 'rgba(0,0,0,0.04)',
+                    borderRadius: 1,
+                    fontSize: '0.75rem',
+                    overflow: 'auto',
+                    maxHeight: '200px',
+                }, children: error.stack })), showHints && (_jsxs(_Fragment, { children: [_jsx(Typography, { variant: "body2", sx: { color: 'text.secondary' }, children: "Please try the following:" }), _jsxs(Box, { component: "ul", sx: { m: 0, pl: 2 }, children: [componentId && (_jsxs(Typography, { component: "li", variant: "body2", sx: { color: 'text.secondary' }, children: ["Select component", ' ', _jsx(Box, { component: "span", sx: { fontWeight: 500 }, children: componentName !== null && componentName !== void 0 ? componentName : componentId }), ' ', "in settings or create this component."] })), (blockletId || blockletTitle) && (_jsxs(Typography, { component: "li", variant: "body2", sx: { color: 'text.secondary' }, children: ["Contact administrator to install", ' ', _jsx(Box, { component: "span", sx: { fontWeight: 500 }, children: blockletTitle !== null && blockletTitle !== void 0 ? blockletTitle : blockletId }), ' ', "Blocklet"] }))] })] })), resetErrorBoundary && (_jsx(Box, { sx: { mt: 2 }, children: _jsx(Button, { variant: "outlined", color: "error", size: "small", onClick: resetErrorBoundary, children: "Try Again" }) }))] }));
+};

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

@@ -9,12 +9,12 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Alert, Box, Typography } from '@mui/material';
+import { jsx as _jsx } from "react/jsx-runtime";
 import { ErrorBoundary } from 'react-error-boundary';
 import { RenderNestedComponent } from '../../utils/property';
 import BlockletReactComponentRenderer from './BlockletReactComponentRenderer';
 import { DevProvider, useDev } from './DevProvider';
+import { ComponentError } from './ErrorComponent';
 import { useCustomComponentRenderer } from './context';
 import { useComponent } from './state';
 export * from './state';
@@ -25,14 +25,11 @@ export default function CustomComponentRenderer(_a) {
     var { dev } = _a, props = __rest(_a, ["dev"]);
     const inheritedDev = useDev();
     const BuiltinComponent = BuiltinComponents[props.componentId];
-    return (_jsx(ErrorBoundary, { FallbackComponent: (props === null || props === void 0 ? void 0 : props.fallbackRender) || ErrorView, resetKeys: [Date.now()], children: _jsx(DevProvider, { dev: dev !== null && dev !== void 0 ? dev : inheritedDev, children: BuiltinComponent ? (_jsx(BuiltinComponent, Object.assign({}, props))) : (_jsx(ComponentRenderer, Object.assign({}, props, { instanceId: (_b = props.instanceId) !== null && _b !== void 0 ? _b : props.componentId, renderType: props.renderType }))) }) }));
+    return (_jsx(ErrorBoundary, { FallbackComponent: (props === null || props === void 0 ? void 0 : props.fallbackRender) || ComponentError, resetKeys: [Date.now()], children: _jsx(DevProvider, { dev: dev !== null && dev !== void 0 ? dev : inheritedDev, children: BuiltinComponent ? (_jsx(BuiltinComponent, Object.assign({}, props))) : (_jsx(ComponentRenderer, Object.assign({}, props, { instanceId: (_b = props.instanceId) !== null && _b !== void 0 ? _b : props.componentId, renderType: props.renderType }))) }) }));
 }
 const BuiltinComponents = {
     'blocklet-react-component': BlockletReactComponentRenderer,
 };
-function ErrorView({ error }) {
-    return (_jsx(Box, { children: _jsx(Alert, { severity: "error", children: error.message }) }));
-}
 function ComponentRenderer(_a) {
     var _b;
     var { renderCount = 0, blockletId, blockletTitle, componentName, renderType = 'view' } = _a, props = __rest(_a, ["renderCount", "blockletId", "blockletTitle", "componentName", "renderType"]);
@@ -57,15 +54,7 @@ function ComponentRenderer(_a) {
     }
     // if the component is not in the dev.components, it means the component is not loaded
     if ((dev === null || dev === void 0 ? void 0 : dev.mode) === 'draft' && dev && ((_b = dev.components) === null || _b === void 0 ? void 0 : _b[props.componentId]) === undefined) {
-        return (_jsxs(Box, { sx: {
-                p: 3,
-                border: '1px dashed #d32f2f',
-                borderRadius: 1,
-                bgcolor: 'rgba(211, 47, 47, 0.04)',
-                display: 'flex',
-                flexDirection: 'column',
-                gap: 1,
-            }, children: [_jsx(Typography, { variant: "subtitle1", sx: { color: '#d32f2f', fontWeight: 500 }, children: "Component Failed to Load" }), _jsx(Typography, { variant: "body2", sx: { color: 'text.secondary' }, children: "Please try the following:" }), _jsxs(Box, { component: "ul", sx: { m: 0, pl: 2 }, children: [_jsxs(Typography, { component: "li", variant: "body2", sx: { color: 'text.secondary' }, children: ["Select component", ' ', _jsx(Box, { component: "span", sx: { fontWeight: 500 }, children: componentName !== null && componentName !== void 0 ? componentName : props.componentId }), ' ', "in settings or create this component."] }), (blockletId || blockletTitle) && (_jsxs(Typography, { component: "li", variant: "body2", sx: { color: 'text.secondary' }, children: ["Contact administrator to install", ' ', _jsx(Box, { component: "span", sx: { fontWeight: 500 }, children: blockletTitle !== null && blockletTitle !== void 0 ? blockletTitle : blockletId }), ' ', "Blocklet"] }))] })] }));
+        return (_jsx(ComponentError, { componentId: props.componentId, componentName: componentName, blockletId: blockletId, blockletTitle: blockletTitle, message: "Component not found in available components", showHints: true }));
     }
     return null;
 }

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

@@ -20,9 +20,10 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 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';
 import set from 'lodash/set';
-import { useDeferredValue, useEffect, useRef, useState } from 'react';
+import { useDeferredValue, useEffect, useRef, useState, useMemo } from 'react';
 import { Helmet } from 'react-helmet';
 import { joinURL } from 'ufo';
 import { create } from 'zustand';
@@ -31,17 +32,109 @@ import { preloadComponents } from '../../api';
 import { PreloadComponentScriptModule } from '../../types';
 import { PreloadComponentsStateGlobalVariableName } from '../../types/preload';
 import { mergeComponent, parsePropertyValue } from '../../utils/property';
+import { ComponentError } from './ErrorComponent';
 const PRELOAD_COMPONENTS_STATE = window[PreloadComponentsStateGlobalVariableName];
 let states;
 function importCustomComponent(m, { componentId }) {
+    // check if m is a Promise
+    if (m && typeof m.then === 'function') {
+        // handle Promise case
+        return (props) => {
+            const [loading, setLoading] = useState(true);
+            const [error, setError] = useState(null);
+            const [ResolvedComponent, setResolvedComponent] = useState(null);
+            // 只在组件首次加载时执行，避免重复加载
+            useEffect(() => {
+                let isMounted = true;
+                const loadComponent = () => __awaiter(this, void 0, void 0, function* () {
+                    try {
+                        const result = yield m;
+                        if (!isMounted)
+                            return;
+                        if (!result) {
+                            setError(new Error(`Component ${componentId} resolved to empty value`));
+                        }
+                        else {
+                            const Component = importCustomComponent(result, { componentId });
+                            if (Component) {
+                                // 存储组件引用而不是渲染结果
+                                setResolvedComponent(() => Component);
+                            }
+                            else {
+                                setError(new Error(`Failed to resolve component ${componentId}`));
+                            }
+                        }
+                    }
+                    catch (err) {
+                        if (!isMounted)
+                            return;
+                        console.error(`Component loading error (${componentId}):`, err);
+                        setError(err instanceof Error ? err : new Error(String(err)));
+                    }
+                    finally {
+                        if (isMounted) {
+                            setLoading(false);
+                        }
+                    }
+                });
+                loadComponent();
+                return () => {
+                    isMounted = false;
+                };
+            }, []); // 仅在组件挂载时执行一次
+            // 使用useMemo缓存渲染内容，避免不必要的重计算
+            const content = useMemo(() => {
+                if (loading) {
+                    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 });
+                }
+                // 动态渲染组件，但允许props更新传递
+                if (ResolvedComponent) {
+                    return _jsx(ResolvedComponent, Object.assign({}, props));
+                }
+                return null;
+            }, [loading, error, ResolvedComponent, props]);
+            return (_jsx(Fade, { in: !loading, timeout: 500, children: _jsx(Box, { children: content }) }));
+        };
+    }
+    // non-Promise case
+    // empty value check
+    if (!m) {
+        console.warn(`Component ${componentId} resolved to empty value`);
+        return null;
+    }
     let Component;
     const css = m.__PagesKit_CSS__;
-    if (typeof m === 'function')
+    // smart handle component
+    if (typeof m === 'function') {
+        // the function itself may be a component
         Component = m;
-    else if (!css)
-        Component = m.default;
-    else {
-        Component = (props) => (_jsxs(_Fragment, { children: [_jsx(Helmet, { children: _jsx("style", { children: css }) }), _jsx(m.default, Object.assign({}, props, { className: cx(props.className, `CustomComponent_${componentId}`) }))] }));
+    }
+    else if (m.default) {
+        // has default export
+        if (typeof m.default === 'function') {
+            // default is a function may be a component
+            Component = m.default;
+        }
+        else {
+            // default is not a function, maybe a JSX element
+            Component = () => m.default;
+        }
+    }
+    else if (css) {
+        // has CSS but no valid component found
+        console.warn(`Component ${componentId} has CSS but no valid component found`);
+        return null;
+    }
+    // if a component is found and has CSS, wrap the component with styles
+    if (Component && css) {
+        const OriginalComponent = Component;
+        Component = (props) => (_jsxs(_Fragment, { children: [_jsx(Helmet, { children: _jsx("style", { children: css }) }), _jsx(OriginalComponent, Object.assign({}, props, { className: cx(props.className, `CustomComponent_${componentId}`) }))] }));
+    }
+    // keep aigneOutputValueSchema
+    if (Component && m.aigneOutputValueSchema) {
         Component.aigneOutputValueSchema = m.aigneOutputValueSchema;
     }
     return Component;
@@ -73,14 +166,29 @@ export const customComponentStates = () => {
     states !== null && states !== void 0 ? states : (states = create()(immer((set, get) => ({
         state: {
             config: Object.assign({}, PRELOAD_COMPONENTS_STATE === null || PRELOAD_COMPONENTS_STATE === void 0 ? void 0 : PRELOAD_COMPONENTS_STATE.config),
-            components: Object.fromEntries(Object.entries(Object.assign({}, PRELOAD_COMPONENTS_STATE === null || PRELOAD_COMPONENTS_STATE === void 0 ? void 0 : PRELOAD_COMPONENTS_STATE.components)).map(([componentId, preload]) => {
+            components: Object.fromEntries(Object.entries(Object.assign({}, PRELOAD_COMPONENTS_STATE === null || PRELOAD_COMPONENTS_STATE === void 0 ? void 0 : PRELOAD_COMPONENTS_STATE.components))
+                .map(([componentId, preload]) => {
                 let Component;
                 if (preload.componentModuleGlobalVariable) {
                     const m = window[preload.componentModuleGlobalVariable];
-                    Component = typeof m === 'function' ? importCustomComponent(m(), { componentId }) : undefined;
+                    // handle the global variable
+                    if (typeof m === 'function') {
+                        try {
+                            // call m() to get the component module
+                            const modulePromiseOrObject = m();
+                            Component = importCustomComponent(modulePromiseOrObject, { componentId });
+                        }
+                        catch (err) {
+                            console.error(`Failed to initialize component ${componentId}:`, err);
+                        }
+                    }
+                    else {
+                        console.warn(`Component global variable ${preload.componentModuleGlobalVariable} is not a function`);
+                    }
                 }
                 return [componentId, Object.assign(Object.assign({}, preload), { Component })];
-            })),
+            })
+                .filter((i) => !!i)),
             instances: Object.assign({}, PRELOAD_COMPONENTS_STATE === null || PRELOAD_COMPONENTS_STATE === void 0 ? void 0 : PRELOAD_COMPONENTS_STATE.instances),
         },
         getComponent({ instanceId, componentId, locale }) {
@@ -273,7 +381,7 @@ export function transpileAndLoadScript(script) {
                 before: [createBuiltinModuleTransformer(ts)],
             },
         }).outputText;
-        // 降级到原有的处理方式
+        // fallback to the original handling
         const url = URL.createObjectURL(new Blob([compiled], { type: 'application/javascript' }));
         try {
             return yield import(/* @vite-ignore */ url);