@blocklet/pages-kit 0.4.11 → 0.4.13-beta.20250227

package/lib/cjs/api/pages-kit.js

@@ -18,8 +18,10 @@ const ufo_1 = require("ufo");
 const PAGES_KIT_DID = 'z8iZiDFg3vkkrPwsiba1TLXy3H9XHzFERsP8o';
 function preloadComponents(input) {
     return __awaiter(this, void 0, void 0, function* () {
-        var _a, _b;
-        const prefix = ((_b = (_a = window.blocklet) === null || _a === void 0 ? void 0 : _a.componentMountPoints.find((i) => i.did === PAGES_KIT_DID)) === null || _b === void 0 ? void 0 : _b.mountPoint) || '/';
+        var _a, _b, _c;
+        const prefix = ((_b = (_a = window.blocklet) === null || _a === void 0 ? void 0 : _a.componentMountPoints.find((i) => i.did === PAGES_KIT_DID && i.status === 'running')) === null || _b === void 0 ? void 0 : _b.mountPoint) ||
+            ((_c = window === null || window === void 0 ? void 0 : window.blocklet) === null || _c === void 0 ? void 0 : _c.prefix) ||
+            '/';
         return axios_1.default.post((0, ufo_1.joinURL)(prefix, '/api/components/preload'), input).then((res) => res.data);
     });
 }

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

@@ -45,7 +45,7 @@ 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 }))) }) }));
+    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 }))) }) }));
 }
 const BuiltinComponents = {
     'blocklet-react-component': BlockletReactComponentRenderer_1.default,
@@ -55,20 +55,25 @@ function ErrorView({ error }) {
 }
 function ComponentRenderer(_a) {
     var _b;
-    var { renderCount = 0, blockletId, blockletTitle, componentName } = _a, props = __rest(_a, ["renderCount", "blockletId", "blockletTitle", "componentName"]);
+    var { renderCount = 0, blockletId, blockletTitle, componentName, renderType = 'view' } = _a, props = __rest(_a, ["renderCount", "blockletId", "blockletTitle", "componentName", "renderType"]);
     const dev = (0, DevProvider_1.useDev)();
     if (renderCount > MAXIMUM_RENDER_STACK_SIZE) {
         throw new Error('Maximum render stack size exceeded');
     }
     const component = (0, state_1.useComponent)(Object.assign(Object.assign({}, props), { dev }));
+    const ctx = (0, context_1.useCustomComponentRenderer)();
     if (component === null || component === void 0 ? void 0 : component.error) {
-        // throw to outer error boundary
         throw component.error;
     }
-    const ctx = (0, context_1.useCustomComponentRenderer)();
-    if (component === null || component === void 0 ? void 0 : component.Component) {
-        const children = ((0, jsx_runtime_1.jsx)(Renderer, Object.assign({ renderCount: renderCount + 1 }, props, { Component: component.Component, props: Object.assign(Object.assign({}, component.props), props.props) })));
-        return (ctx === null || ctx === void 0 ? void 0 : ctx.customRendererComponent) ? ((0, jsx_runtime_1.jsx)(ctx.customRendererComponent, { Component: component.Component, children: children })) : (children);
+    const renderComponentChildren = (Component) => {
+        const children = ((0, jsx_runtime_1.jsx)(Renderer, Object.assign({ renderCount: renderCount + 1 }, props, { Component: Component, props: Object.assign(Object.assign({}, component === null || component === void 0 ? void 0 : component.props), props.props) })));
+        return (ctx === null || ctx === void 0 ? void 0 : ctx.customRendererComponent) ? ((0, jsx_runtime_1.jsx)(ctx.customRendererComponent, { Component: Component, children: children })) : (children);
+    };
+    if ((component === null || component === void 0 ? void 0 : component.Component) && renderType === 'view') {
+        return renderComponentChildren(component.Component);
+    }
+    if ((component === null || component === void 0 ? void 0 : component.EditComponent) && renderType === 'setting') {
+        return renderComponentChildren(component.EditComponent);
     }
     // 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) {

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

@@ -56,6 +56,7 @@ const lodash_1 = require("lodash");
 const set_1 = __importDefault(require("lodash/set"));
 const react_1 = require("react");
 const react_helmet_1 = require("react-helmet");
+const ufo_1 = require("ufo");
 const zustand_1 = require("zustand");
 const immer_1 = require("zustand/middleware/immer");
 const api_1 = require("../../api");
@@ -193,6 +194,7 @@ function useComponent({ instanceId, componentId, properties, locale, dev }) {
     const componentProperties = (_a = transpile === null || transpile === void 0 ? void 0 : transpile.componentProperties) !== null && _a !== void 0 ? _a : preload === null || preload === void 0 ? void 0 : preload.componentProperties;
     return {
         Component: (_b = transpile === null || transpile === void 0 ? void 0 : transpile.Component) !== null && _b !== void 0 ? _b : preload === null || preload === void 0 ? void 0 : preload.Component,
+        EditComponent: transpile === null || transpile === void 0 ? void 0 : transpile.EditComponent,
         props: Object.assign(Object.assign({}, ((_c = transpile === null || transpile === void 0 ? void 0 : transpile.props) !== null && _c !== void 0 ? _c : preload === null || preload === void 0 ? void 0 : preload.props)), Object.fromEntries(Object.entries(properties !== null && properties !== void 0 ? properties : {})
             .map(([key, { value }]) => {
             var _a;
@@ -200,7 +202,8 @@ function useComponent({ instanceId, componentId, properties, locale, dev }) {
             if (!property)
                 return undefined;
             const v = (0, property_1.parsePropertyValue)(property, value, { locale, defaultLocale: dev === null || dev === void 0 ? void 0 : dev.defaultLocale });
-            return [property.key, v];
+            // if key is undefined, use id
+            return [property.key || property.id, v];
         })
             .filter((i) => !!i))),
         error: transpile === null || transpile === void 0 ? void 0 : transpile.error,
@@ -235,7 +238,7 @@ function usePreloadComponent({ instanceId, componentId, properties, locale, dev
 }
 function useTranspileComponent({ componentId, locale, properties, dev: { defaultLocale, components } = {}, }) {
     var _a, _b;
-    const [{ error, Component, propertiesFromCode }, setComponent] = (0, react_1.useState)({});
+    const [{ error, Component, EditComponent, propertiesFromCode }, setComponent] = (0, react_1.useState)({});
     const component = (0, property_1.mergeComponent)({
         componentId,
         getComponent: (componentId) => {
@@ -257,7 +260,7 @@ function useTranspileComponent({ componentId, locale, properties, dev: { default
                 .then((m) => {
                 // get properties from code
                 const propertiesFromCode = getPropertiesFromCode(m);
-                setComponent({ Component: m.default, propertiesFromCode });
+                setComponent({ Component: m.default, EditComponent: m.EditComponent || undefined, propertiesFromCode });
             })
                 .catch((error) => {
                 setComponent({ error });
@@ -267,12 +270,32 @@ function useTranspileComponent({ componentId, locale, properties, dev: { default
     return {
         error,
         Component,
+        EditComponent,
         props: component === null || component === void 0 ? void 0 : component.properties,
         componentProperties: (_b = (_a = components === null || components === void 0 ? void 0 : components[componentId]) === null || _a === void 0 ? void 0 : _a.data) === null || _b === void 0 ? void 0 : _b.properties,
     };
 }
 function transpileAndLoadScript(script) {
     return __awaiter(this, void 0, void 0, function* () {
+        var _a, _b;
+        // @ts-ignore
+        if (import.meta.env.DEV && ((_a = window.__BLOCK_STUDIO__) === null || _a === void 0 ? void 0 : _a.getCodeImportPath)) {
+            try {
+                // @ts-ignore
+                const filePath = (0, ufo_1.joinURL)((_b = window.__BLOCK_STUDIO__) === null || _b === void 0 ? void 0 : _b.getCodeImportPath(script));
+                if (filePath) {
+                    // eslint-disable-next-line no-console
+                    console.info('get code import path from block studio:', filePath);
+                    const m = yield Promise.resolve(`${filePath}`).then(s => __importStar(require(s))).catch(() => null);
+                    if (m) {
+                        return m;
+                    }
+                }
+            }
+            catch (e) {
+                // ignore error
+            }
+        }
         const [ts, { createBuiltinModuleTransformer }] = yield Promise.all([
             Promise.resolve().then(() => __importStar(require('typescript'))).then((m) => m.default || m),
             Promise.resolve().then(() => __importStar(require('../../utils/typescript/builtin-module-transformer'))),
@@ -283,7 +306,13 @@ function transpileAndLoadScript(script) {
                 before: [createBuiltinModuleTransformer(ts)],
             },
         }).outputText;
+        // 降级到原有的处理方式
         const url = URL.createObjectURL(new Blob([compiled], { type: 'application/javascript' }));
-        return Promise.resolve(`${url}`).then(s => __importStar(require(s)));
+        try {
+            return yield Promise.resolve(`${url}`).then(s => __importStar(require(s)));
+        }
+        finally {
+            URL.revokeObjectURL(url);
+        }
     });
 }