@blocklet/pages-kit 0.4.117 → 0.4.119

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

@@ -187,9 +187,20 @@ const customComponentStates = () => {
                     // handle the global variable
                     if (typeof m === 'function') {
                         try {
-                            // call m() to get the component module
                             const modulePromiseOrObject = m();
-                            Component = importCustomComponent(modulePromiseOrObject, { componentId });
+                            // if the module is a promise, we need to wait for it to resolve
+                            if (modulePromiseOrObject instanceof Promise) {
+                                modulePromiseOrObject
+                                    .then((m) => {
+                                    Component = importCustomComponent(m, { componentId });
+                                })
+                                    .catch((err) => {
+                                    console.error(`Failed to initialize component ${componentId}:`, err);
+                                });
+                            }
+                            else {
+                                Component = importCustomComponent(modulePromiseOrObject, { componentId });
+                            }
                         }
                         catch (err) {
                             console.error(`Failed to initialize component ${componentId}:`, err);
@@ -197,6 +208,7 @@ const customComponentStates = () => {
                     }
                     else {
                         console.warn(`Component global variable ${preload.componentModuleGlobalVariable} is not a function`);
+                        return null;
                     }
                 }
                 return [componentId, { ...preload, Component }];
@@ -359,19 +371,37 @@ function useTranspileComponent({ componentId, locale, properties, dev: { default
         properties,
     });
     const script = (0, react_1.useDeferredValue)(component?.script);
+    const editComponent = (0, react_1.useDeferredValue)(component?.editComponent);
     (0, react_1.useEffect)(() => {
         if (script) {
+            // transpile view component
             transpileAndLoadScript(script)
                 .then((m) => {
                 // get properties from code
                 const propertiesFromCode = getPropertiesFromCode(m);
-                setComponent({ Component: m.default, EditComponent: m.EditComponent || undefined, propertiesFromCode });
+                const extraComponentInfo = m.EditComponent && !editComponent ? { EditComponent: m.EditComponent } : {};
+                setComponent((prev) => ({
+                    ...prev,
+                    ...extraComponentInfo,
+                    Component: m.default,
+                    propertiesFromCode,
+                }));
             })
                 .catch((error) => {
                 setComponent({ error });
             });
         }
-    }, [script]);
+        // transpile edit component
+        if (editComponent) {
+            transpileAndLoadScript(editComponent)
+                .then((m) => {
+                setComponent((prev) => ({ ...prev, EditComponent: m.default || m.EditComponent || undefined }));
+            })
+                .catch(() => {
+                // ignore error when transpile edit component
+            });
+        }
+    }, [script, editComponent]);
     return {
         error,
         Component,