@blocklet/pages-kit 0.4.16-beta.20250305-2 → 0.4.16-beta.20250306-1

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

@@ -0,0 +1,40 @@
+"use strict";
+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;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ComponentError = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const material_1 = require("@mui/material");
+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 ((0, jsx_runtime_1.jsxs)(material_1.Box, { sx: {
+            p: 3,
+            border: '1px dashed #d32f2f',
+            borderRadius: 1,
+            bgcolor: 'rgba(211, 47, 47, 0.04)',
+            display: 'flex',
+            flexDirection: 'column',
+            gap: 1,
+        }, children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "subtitle1", sx: { color: '#d32f2f', fontWeight: 500 }, children: title }), (0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "body2", sx: { color: 'text.secondary' }, children: displayMessage }), error && error.stack && process.env.NODE_ENV !== 'production' && ((0, jsx_runtime_1.jsx)(material_1.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 && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "body2", sx: { color: 'text.secondary' }, children: "Please try the following:" }), (0, jsx_runtime_1.jsxs)(material_1.Box, { component: "ul", sx: { m: 0, pl: 2 }, children: [componentId && ((0, jsx_runtime_1.jsxs)(material_1.Typography, { component: "li", variant: "body2", sx: { color: 'text.secondary' }, children: ["Select component", ' ', (0, jsx_runtime_1.jsx)(material_1.Box, { component: "span", sx: { fontWeight: 500 }, children: componentName !== null && componentName !== void 0 ? componentName : componentId }), ' ', "in settings or create this component."] })), (blockletId || blockletTitle) && ((0, jsx_runtime_1.jsxs)(material_1.Typography, { component: "li", variant: "body2", sx: { color: 'text.secondary' }, children: ["Contact administrator to install", ' ', (0, jsx_runtime_1.jsx)(material_1.Box, { component: "span", sx: { fontWeight: 500 }, children: blockletTitle !== null && blockletTitle !== void 0 ? blockletTitle : blockletId }), ' ', "Blocklet"] }))] })] })), resetErrorBoundary && ((0, jsx_runtime_1.jsx)(material_1.Box, { sx: { mt: 2 }, children: (0, jsx_runtime_1.jsx)(material_1.Button, { variant: "outlined", color: "error", size: "small", onClick: resetErrorBoundary, children: "Try Again" }) }))] }));
+};
+exports.ComponentError = ComponentError;

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

@@ -30,11 +30,11 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.default = CustomComponentRenderer;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const material_1 = require("@mui/material");
 const react_error_boundary_1 = require("react-error-boundary");
 const property_1 = require("../../utils/property");
 const BlockletReactComponentRenderer_1 = __importDefault(require("./BlockletReactComponentRenderer"));
 const DevProvider_1 = require("./DevProvider");
+const ErrorComponent_1 = require("./ErrorComponent");
 const context_1 = require("./context");
 const state_1 = require("./state");
 __exportStar(require("./state"), exports);
@@ -45,14 +45,11 @@ function CustomComponentRenderer(_a) {
     var { dev } = _a, props = __rest(_a, ["dev"]);
     const inheritedDev = (0, DevProvider_1.useDev)();
     const BuiltinComponent = BuiltinComponents[props.componentId];
-    return ((0, jsx_runtime_1.jsx)(react_error_boundary_1.ErrorBoundary, { FallbackComponent: (props === null || props === void 0 ? void 0 : props.fallbackRender) || ErrorView, resetKeys: [Date.now()], children: (0, jsx_runtime_1.jsx)(DevProvider_1.DevProvider, { dev: dev !== null && dev !== void 0 ? dev : inheritedDev, children: BuiltinComponent ? ((0, jsx_runtime_1.jsx)(BuiltinComponent, Object.assign({}, props))) : ((0, jsx_runtime_1.jsx)(ComponentRenderer, Object.assign({}, props, { instanceId: (_b = props.instanceId) !== null && _b !== void 0 ? _b : props.componentId, renderType: props.renderType }))) }) }));
+    return ((0, jsx_runtime_1.jsx)(react_error_boundary_1.ErrorBoundary, { FallbackComponent: (props === null || props === void 0 ? void 0 : props.fallbackRender) || ErrorComponent_1.ComponentError, resetKeys: [Date.now()], children: (0, jsx_runtime_1.jsx)(DevProvider_1.DevProvider, { dev: dev !== null && dev !== void 0 ? dev : inheritedDev, children: BuiltinComponent ? ((0, jsx_runtime_1.jsx)(BuiltinComponent, Object.assign({}, props))) : ((0, jsx_runtime_1.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_1.default,
 };
-function ErrorView({ error }) {
-    return ((0, jsx_runtime_1.jsx)(material_1.Box, { children: (0, jsx_runtime_1.jsx)(material_1.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"]);
@@ -77,15 +74,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 ((0, jsx_runtime_1.jsxs)(material_1.Box, { sx: {
-                p: 3,
-                border: '1px dashed #d32f2f',
-                borderRadius: 1,
-                bgcolor: 'rgba(211, 47, 47, 0.04)',
-                display: 'flex',
-                flexDirection: 'column',
-                gap: 1,
-            }, children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "subtitle1", sx: { color: '#d32f2f', fontWeight: 500 }, children: "Component Failed to Load" }), (0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "body2", sx: { color: 'text.secondary' }, children: "Please try the following:" }), (0, jsx_runtime_1.jsxs)(material_1.Box, { component: "ul", sx: { m: 0, pl: 2 }, children: [(0, jsx_runtime_1.jsxs)(material_1.Typography, { component: "li", variant: "body2", sx: { color: 'text.secondary' }, children: ["Select component", ' ', (0, jsx_runtime_1.jsx)(material_1.Box, { component: "span", sx: { fontWeight: 500 }, children: componentName !== null && componentName !== void 0 ? componentName : props.componentId }), ' ', "in settings or create this component."] }), (blockletId || blockletTitle) && ((0, jsx_runtime_1.jsxs)(material_1.Typography, { component: "li", variant: "body2", sx: { color: 'text.secondary' }, children: ["Contact administrator to install", ' ', (0, jsx_runtime_1.jsx)(material_1.Box, { component: "span", sx: { fontWeight: 500 }, children: blockletTitle !== null && blockletTitle !== void 0 ? blockletTitle : blockletId }), ' ', "Blocklet"] }))] })] }));
+        return ((0, jsx_runtime_1.jsx)(ErrorComponent_1.ComponentError, { componentId: props.componentId, componentName: componentName, blockletId: blockletId, blockletTitle: blockletTitle, message: "Component not found in available components", showHints: true }));
     }
     return null;
 }

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

@@ -52,6 +52,7 @@ exports.useComponent = useComponent;
 exports.transpileAndLoadScript = transpileAndLoadScript;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const css_1 = require("@emotion/css");
+const material_1 = require("@mui/material");
 const lodash_1 = require("lodash");
 const set_1 = __importDefault(require("lodash/set"));
 const react_1 = require("react");
@@ -63,17 +64,109 @@ const api_1 = require("../../api");
 const types_1 = require("../../types");
 const preload_1 = require("../../types/preload");
 const property_1 = require("../../utils/property");
+const ErrorComponent_1 = require("./ErrorComponent");
 const PRELOAD_COMPONENTS_STATE = window[preload_1.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] = (0, react_1.useState)(true);
+            const [error, setError] = (0, react_1.useState)(null);
+            const [ResolvedComponent, setResolvedComponent] = (0, react_1.useState)(null);
+            // 只在组件首次加载时执行，避免重复加载
+            (0, react_1.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 = (0, react_1.useMemo)(() => {
+                if (loading) {
+                    return ((0, jsx_runtime_1.jsxs)(material_1.Box, { sx: { width: '100%', p: 1 }, children: [(0, jsx_runtime_1.jsx)(material_1.Skeleton, { variant: "rectangular", width: "100%", height: 60, animation: "wave" }), (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: { pt: 1 }, children: [(0, jsx_runtime_1.jsx)(material_1.Skeleton, { width: "80%" }), (0, jsx_runtime_1.jsx)(material_1.Skeleton, { width: "60%" }), (0, jsx_runtime_1.jsx)(material_1.Skeleton, { width: "40%" })] })] }));
+                }
+                if (error) {
+                    return (0, jsx_runtime_1.jsx)(ErrorComponent_1.ComponentError, { componentId: componentId, message: error.message });
+                }
+                // 动态渲染组件，但允许props更新传递
+                if (ResolvedComponent) {
+                    return (0, jsx_runtime_1.jsx)(ResolvedComponent, Object.assign({}, props));
+                }
+                return null;
+            }, [loading, error, ResolvedComponent, props]);
+            return ((0, jsx_runtime_1.jsx)(material_1.Fade, { in: !loading, timeout: 500, children: (0, jsx_runtime_1.jsx)(material_1.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) => ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_helmet_1.Helmet, { children: (0, jsx_runtime_1.jsx)("style", { children: css }) }), (0, jsx_runtime_1.jsx)(m.default, Object.assign({}, props, { className: (0, css_1.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) => ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_helmet_1.Helmet, { children: (0, jsx_runtime_1.jsx)("style", { children: css }) }), (0, jsx_runtime_1.jsx)(OriginalComponent, Object.assign({}, props, { className: (0, css_1.cx)(props.className, `CustomComponent_${componentId}`) }))] }));
+    }
+    // keep aigneOutputValueSchema
+    if (Component && m.aigneOutputValueSchema) {
         Component.aigneOutputValueSchema = m.aigneOutputValueSchema;
     }
     return Component;
@@ -105,14 +198,29 @@ const customComponentStates = () => {
     states !== null && states !== void 0 ? states : (states = (0, zustand_1.create)()((0, immer_1.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 }) {
@@ -306,7 +414,7 @@ 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 Promise.resolve(`${url}`).then(s => __importStar(require(s)));