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

package/lib/cjs/utils/inject-global-components.js

@@ -61,20 +61,21 @@ function injectGlobalComponents() {
             '@blocklet/pages-kit/builtin/pages-kit': { CustomComponentRenderer: CustomComponentRenderer_1.default },
             '@blocklet/pages-kit/builtin/dayjs': dayjs,
             '@blocklet/pages-kit/builtin/utils': utils,
+            '@blocklet/pages-kit/builtin/stream': stream,
             '@blocklet/pages-kit/builtin/react': react,
             '@blocklet/pages-kit/builtin/emotion/css': emotionCss,
             '@blocklet/pages-kit/builtin/mui/material': muiMaterial,
             '@blocklet/pages-kit/builtin/mui/lab': muiLab,
             '@blocklet/pages-kit/builtin/react-hook-form': reactHookForm,
             '@blocklet/pages-kit/builtin/iconify/react': iconifyReact,
+            //
             '@blocklet/pages-kit/builtin/zustand': zustand,
             '@blocklet/pages-kit/builtin/zustand/middleware/immer': zustandMiddlewareImmer,
             '@blocklet/pages-kit/builtin/immer': immer,
             '@blocklet/pages-kit/builtin/react-wrap-balancer': reactWrapBalancer,
-            '@blocklet/pages-kit/builtin/stream': stream,
+            '@blocklet/pages-kit/builtin/react-router-dom': reactRouterDOM,
             '@blocklet/pages-kit/builtin/session': session,
             '@blocklet/pages-kit/builtin/locale': locale,
-            '@blocklet/pages-kit/builtin/react-router-dom': reactRouterDOM,
             '@blocklet/pages-kit/builtin/arcblock/ux': arcblockUx,
             '@blocklet/pages-kit/builtin/page/header': pageHeader,
             '@blocklet/pages-kit/builtin/components': components,
@@ -86,7 +87,21 @@ function injectGlobalComponents() {
             '@blocklet/pages-kit/builtin/async/ai-runtime': aiRuntime,
         },
         require(module) {
-            return win[builtin_1.BuiltinModulesGlobalVariableName].modules[module];
+            var _a;
+            if ((_a = win[builtin_1.BuiltinModulesGlobalVariableName]) === null || _a === void 0 ? void 0 : _a.modules[module]) {
+                return win[builtin_1.BuiltinModulesGlobalVariableName].modules[module];
+            }
+            // Try loading from CDN or dynamic import
+            try {
+                // TODO: 需要支持动态加载
+                // const module = await import(/* webpackIgnore: true */ `https://cdn.jsdelivr.net/npm/${moduleName}`);
+                // return module;
+                return null;
+            }
+            catch (err) {
+                console.warn(`Failed to load module ${module}`, err);
+                return null;
+            }
         },
     };
     win.React = react_1.default;

package/lib/cjs/utils/property.js

@@ -23,13 +23,15 @@ function mergeComponent({ componentId, getComponent, locale, defaultLocale, prop
         const property = (_b = (_a = component === null || component === void 0 ? void 0 : component.properties) === null || _a === void 0 ? void 0 : _a[id]) === null || _b === void 0 ? void 0 : _b.data;
         if (!property)
             return [];
-        return [property.key, parsePropertyValue(property, value, { locale, defaultLocale })];
+        // // if key is undefined, use id
+        return [property.key || property.id, parsePropertyValue(property, value, { locale, defaultLocale })];
     }));
     while (component) {
         assignNullableFields(properties, Object.fromEntries(Object.values((_a = component.properties) !== null && _a !== void 0 ? _a : {}).map(({ data }) => {
             var _a, _b, _c, _d, _e;
             return [
-                data.key,
+                // if key is undefined, use id
+                data.key || data.id,
                 parsePropertyValue(data, (_c = (_b = (_a = data.locales) === null || _a === void 0 ? void 0 : _a[locale]) === null || _b === void 0 ? void 0 : _b.defaultValue) !== null && _c !== void 0 ? _c : (_e = (_d = data.locales) === null || _d === void 0 ? void 0 : _d[defaultLocale]) === null || _e === void 0 ? void 0 : _e.defaultValue, { locale, defaultLocale }),
             ];
         })));

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

@@ -12,8 +12,10 @@ import { joinURL } from 'ufo';
 const PAGES_KIT_DID = 'z8iZiDFg3vkkrPwsiba1TLXy3H9XHzFERsP8o';
 export 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.post(joinURL(prefix, '/api/components/preload'), input).then((res) => res.data);
     });
 }

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

@@ -25,7 +25,7 @@ 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 }))) }) }));
+    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 }))) }) }));
 }
 const BuiltinComponents = {
     'blocklet-react-component': BlockletReactComponentRenderer,
@@ -35,20 +35,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 = useDev();
     if (renderCount > MAXIMUM_RENDER_STACK_SIZE) {
         throw new Error('Maximum render stack size exceeded');
     }
     const component = useComponent(Object.assign(Object.assign({}, props), { dev }));
+    const ctx = useCustomComponentRenderer();
     if (component === null || component === void 0 ? void 0 : component.error) {
-        // throw to outer error boundary
         throw component.error;
     }
-    const ctx = useCustomComponentRenderer();
-    if (component === null || component === void 0 ? void 0 : component.Component) {
-        const children = (_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) ? (_jsx(ctx.customRendererComponent, { Component: component.Component, children: children })) : (children);
+    const renderComponentChildren = (Component) => {
+        const children = (_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) ? (_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/esm/components/CustomComponentRenderer/state.js

@@ -24,6 +24,7 @@ import { isEmpty } from 'lodash';
 import set from 'lodash/set';
 import { useDeferredValue, useEffect, useRef, useState } from 'react';
 import { Helmet } from 'react-helmet';
+import { joinURL } from 'ufo';
 import { create } from 'zustand';
 import { immer } from 'zustand/middleware/immer';
 import { preloadComponents } from '../../api';
@@ -160,6 +161,7 @@ export 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;
@@ -167,7 +169,8 @@ export function useComponent({ instanceId, componentId, properties, locale, dev
             if (!property)
                 return undefined;
             const v = 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,
@@ -202,7 +205,7 @@ function usePreloadComponent({ instanceId, componentId, properties, locale, dev
 }
 function useTranspileComponent({ componentId, locale, properties, dev: { defaultLocale, components } = {}, }) {
     var _a, _b;
-    const [{ error, Component, propertiesFromCode }, setComponent] = useState({});
+    const [{ error, Component, EditComponent, propertiesFromCode }, setComponent] = useState({});
     const component = mergeComponent({
         componentId,
         getComponent: (componentId) => {
@@ -224,7 +227,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 });
@@ -234,12 +237,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,
     };
 }
 export 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 = 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 import(/* @vite-ignore */ filePath).catch(() => null);
+                    if (m) {
+                        return m;
+                    }
+                }
+            }
+            catch (e) {
+                // ignore error
+            }
+        }
         const [ts, { createBuiltinModuleTransformer }] = yield Promise.all([
             import('typescript').then((m) => m.default || m),
             import('../../utils/typescript/builtin-module-transformer'),
@@ -250,7 +273,13 @@ export function transpileAndLoadScript(script) {
                 before: [createBuiltinModuleTransformer(ts)],
             },
         }).outputText;
+        // 降级到原有的处理方式
         const url = URL.createObjectURL(new Blob([compiled], { type: 'application/javascript' }));
-        return import(/* @vite-ignore */ url);
+        try {
+            return yield import(/* @vite-ignore */ url);
+        }
+        finally {
+            URL.revokeObjectURL(url);
+        }
     });
 }