@blocklet/pages-kit 0.4.118 → 0.4.119

package/lib/cjs/utils/property.js

@@ -41,6 +41,7 @@ function mergeComponent({ componentId, getComponent, locale, defaultLocale, prop
     if (!component)
         return null;
     let script;
+    let editComponent;
     const props = Object.fromEntries(Object.entries(parameters ?? {}).map(([id, { value }]) => {
         const property = component?.properties?.[id]?.data;
         if (!property)
@@ -56,6 +57,7 @@ function mergeComponent({ componentId, getComponent, locale, defaultLocale, prop
         ])));
         if (component.renderer?.type === 'react-component') {
             script = component.renderer?.script;
+            editComponent = component.renderer?.editComponent;
             break;
         }
         if (component.renderer?.type === 'web-component') {
@@ -84,7 +86,7 @@ function mergeComponent({ componentId, getComponent, locale, defaultLocale, prop
     }
     if (!script)
         return null;
-    return { script, props };
+    return { script, props, editComponent };
 }
 exports.RenderNestedComponent = '__RENDER_NESTED_COMPONENT__';
 function safeJSONParse(value) {

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

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.createBuiltinModuleTransformer = exports.isAsyncModule = exports.isRelativeModule = void 0;
+exports.createWellKnownChunksTransformer = exports.createBuiltinModuleTransformer = exports.isBuiltinModule = exports.isAsyncModule = exports.isRelativeModule = void 0;
+const path_1 = require("path");
 const builtin_1 = require("../../types/builtin");
 const isRelativeModule = (moduleSpecifier) => {
     if (!moduleSpecifier) {
@@ -16,22 +17,23 @@ const isAsyncModule = (moduleSpecifier) => {
     return ['@blocklet/pages-kit/builtin/async/ai-runtime'].includes(moduleSpecifier);
 };
 exports.isAsyncModule = isAsyncModule;
+// check if the module is a target module
+const isBuiltinModule = (moduleSpecifier) => {
+    if (!moduleSpecifier) {
+        return false;
+    }
+    return moduleSpecifier.startsWith('@blocklet/pages-kit/builtin/');
+};
+exports.isBuiltinModule = isBuiltinModule;
 const createBuiltinModuleTransformer = (ts) => (context) => (file) => {
     const { factory } = context;
     // 统一的模块导入收集器
     const imports = [];
-    // check if the module is a target module
-    const isTargetModule = (moduleSpecifier) => {
-        if (!moduleSpecifier) {
-            return false;
-        }
-        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) => {
         if (ts.isImportDeclaration(s) &&
             ts.isStringLiteral(s.moduleSpecifier) &&
-            isTargetModule(s.moduleSpecifier.text)) {
+            ((0, exports.isBuiltinModule)(s.moduleSpecifier.text) || (0, exports.isRelativeModule)(s.moduleSpecifier.text))) {
             const importInfo = {
                 moduleName: s.moduleSpecifier.text,
                 name: s.importClause?.name?.text,
@@ -60,11 +62,11 @@ const createBuiltinModuleTransformer = (ts) => (context) => (file) => {
     statements.unshift(...imports.flatMap((importInfo) => {
         // call inject-global-components require method
         const requireCall = factory.createCallExpression(factory.createPropertyAccessExpression(factory.createIdentifier(builtin_1.BuiltinModulesGlobalVariableName), 'require'), undefined, [factory.createStringLiteral(importInfo.moduleName)]);
+        const isAsync = (0, exports.isRelativeModule)(importInfo.moduleName) || (0, exports.isAsyncModule)(importInfo.moduleName);
         // create await expression if the module is ../ or ./
-        const mod = (0, exports.isRelativeModule)(importInfo.moduleName) || (0, exports.isAsyncModule)(importInfo.moduleName)
-            ? factory.createAwaitExpression(requireCall)
-            : requireCall;
+        const mod = isAsync ? factory.createAwaitExpression(requireCall) : requireCall;
         return [
+            // handle default import
             importInfo.name
                 ? factory.createVariableStatement([], factory.createVariableDeclarationList([
                     factory.createVariableDeclaration(factory.createIdentifier(importInfo.name), undefined, undefined, factory.createPropertyAccessExpression(mod, 'default')),
@@ -77,13 +79,33 @@ const createBuiltinModuleTransformer = (ts) => (context) => (file) => {
                 ], ts.NodeFlags.Const))
                 : undefined,
             // handle named import
-            ...importInfo.members.map((member) => {
-                return factory.createVariableStatement([], factory.createVariableDeclarationList([
-                    factory.createVariableDeclaration(factory.createIdentifier(member.name), undefined, undefined, factory.createPropertyAccessExpression(mod, member.propertyName ?? member.name)),
-                ], ts.NodeFlags.Const));
-            }),
+            importInfo.members.length > 0
+                ? factory.createVariableStatement([], factory.createVariableDeclarationList([
+                    factory.createVariableDeclaration(factory.createObjectBindingPattern(importInfo.members.map((member) => {
+                        return factory.createBindingElement(undefined, member.propertyName ? factory.createIdentifier(member.propertyName) : undefined, factory.createIdentifier(member.name), undefined);
+                    })), undefined, undefined, mod),
+                ], ts.NodeFlags.Const))
+                : undefined,
         ].filter((i) => !!i);
     }));
     return factory.updateSourceFile(file, statements);
 };
 exports.createBuiltinModuleTransformer = createBuiltinModuleTransformer;
+const createWellKnownChunksTransformer = (ts) => (context) => (file) => {
+    const { factory } = context;
+    // 转换所有导入声明
+    const transformedStatements = file.statements.map((node) => {
+        if (ts.isImportDeclaration(node) &&
+            ts.isStringLiteral(node.moduleSpecifier) &&
+            (0, exports.isRelativeModule)(node.moduleSpecifier.text)) {
+            const moduleSpecifier = node.moduleSpecifier.text;
+            const fileName = (0, path_1.basename)(moduleSpecifier);
+            const newPath = `/.well-known/chunks/${fileName}`;
+            // 创建新的导入声明
+            return factory.createImportDeclaration(node.modifiers, node.importClause, factory.createStringLiteral(newPath));
+        }
+        return node;
+    });
+    return factory.updateSourceFile(file, transformedStatements);
+};
+exports.createWellKnownChunksTransformer = createWellKnownChunksTransformer;

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

@@ -155,9 +155,20 @@ export 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);
@@ -165,6 +176,7 @@ export const customComponentStates = () => {
                     }
                     else {
                         console.warn(`Component global variable ${preload.componentModuleGlobalVariable} is not a function`);
+                        return null;
                     }
                 }
                 return [componentId, { ...preload, Component }];
@@ -326,19 +338,37 @@ function useTranspileComponent({ componentId, locale, properties, dev: { default
         properties,
     });
     const script = useDeferredValue(component?.script);
+    const editComponent = useDeferredValue(component?.editComponent);
     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,