@blocklet/pages-kit 0.2.215 → 0.2.217

package/lib/cjs/api/call.js

@@ -11,13 +11,18 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.preloadComponents = void 0;
 const component_1 = require("@blocklet/sdk/lib/component");
-function preloadComponents({ mode, name, id }) {
+function preloadComponents({ mode, name, id, locale, }) {
     return __awaiter(this, void 0, void 0, function* () {
         return (0, component_1.call)({
             name: 'pages-kit',
             method: 'GET',
             path: '/api/components/preload',
-            params: { mode, id: Array.isArray(id) ? id.join(',') : id, name: Array.isArray(name) ? name.join(',') : name },
+            params: {
+                mode,
+                id: Array.isArray(id) ? id.join(',') : id,
+                name: Array.isArray(name) ? name.join(',') : name,
+                locale,
+            },
         }).then((res) => res.data);
     });
 }

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

@@ -16,16 +16,17 @@ exports.preloadComponents = void 0;
 const axios_1 = __importDefault(require("axios"));
 const ufo_1 = require("ufo");
 const PAGES_KIT_DID = 'z8iZiDFg3vkkrPwsiba1TLXy3H9XHzFERsP8o';
-function preloadComponents({ mode, name, id }) {
+function preloadComponents({ mode, name, id, locale, }) {
     var _a, _b;
     return __awaiter(this, void 0, void 0, function* () {
         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) || '/';
         return axios_1.default
-            .get((0, ufo_1.joinURL)(prefix, '/api/components'), {
+            .get((0, ufo_1.joinURL)(prefix, '/api/components/preload'), {
             params: {
                 mode,
                 id: Array.isArray(id) ? id.join(',') : id,
                 name: Array.isArray(name) ? name.join(',') : name,
+                locale,
             },
         })
             .then((res) => res.data);

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

@@ -50,13 +50,15 @@ const material_1 = require("@mui/material");
 const lodash_1 = require("lodash");
 const react_1 = require("react");
 const react_error_boundary_1 = require("react-error-boundary");
+const api_1 = require("../../api");
 const preload_1 = require("../../types/preload");
 const property_1 = require("../../utils/property");
 const builtin_module_transformer_1 = require("../../utils/typescript/builtin-module-transformer");
 const MAXIMUM_RENDER_STACK_SIZE = 50;
 function CustomComponentRenderer(_a) {
+    var _b;
     var props = __rest(_a, []);
-    return ((0, jsx_runtime_1.jsx)(react_error_boundary_1.ErrorBoundary, { fallbackRender: E, resetKeys: [Date.now()], children: (0, jsx_runtime_1.jsx)(ComponentRenderer, Object.assign({}, props)) }));
+    return ((0, jsx_runtime_1.jsx)(react_error_boundary_1.ErrorBoundary, { fallbackRender: E, resetKeys: [Date.now()], children: (0, jsx_runtime_1.jsx)(ComponentRenderer, Object.assign({}, props, { instanceId: (_b = props.instanceId) !== null && _b !== void 0 ? _b : props.componentId })) }));
 }
 exports.default = CustomComponentRenderer;
 function ComponentRenderer(_a) {
@@ -71,10 +73,12 @@ function Renderer(props) {
     if (!component)
         return null;
     const { Component, AsyncComponent, properties } = component;
-    const componentProps = Object.fromEntries(Object.entries(Object.assign(Object.assign({}, properties), props.props)).map(([key, val]) => [
-        key,
-        (val === null || val === void 0 ? void 0 : val.type) === property_1.RenderNestedComponent ? ((0, jsx_runtime_1.jsx)(ComponentRenderer, Object.assign({ renderCount: props.renderCount, componentId: val.componentId }, (0, lodash_1.pick)(props, 'components', 'locale', 'defaultLocale'), { properties: val.properties }))) : (val),
-    ]));
+    const componentProps = Object.fromEntries(Object.entries(Object.assign(Object.assign({}, properties), props.props)).map(([key, val]) => {
+        return [
+            key,
+            (val === null || val === void 0 ? void 0 : val.type) === property_1.RenderNestedComponent ? ((0, jsx_runtime_1.jsx)(ComponentRenderer, Object.assign({}, (0, lodash_1.pick)(props, 'components', 'locale', 'defaultLocale'), { instanceId: key, renderCount: props.renderCount, componentId: val.componentId, properties: val.properties, props: val.props }))) : (val),
+        ];
+    }));
     if (Component) {
         return (0, jsx_runtime_1.jsx)(Component, Object.assign({}, componentProps));
     }
@@ -100,29 +104,73 @@ function AsyncComponentRenderer(_a) {
 function E({ error }) {
     return ((0, jsx_runtime_1.jsx)(material_1.Box, { children: (0, jsx_runtime_1.jsx)(material_1.Alert, { severity: "error", children: error.message }) }));
 }
-const PRELOAD_COMPONENTS_STATE = window[preload_1.PreloadComponentsStateGlobalVariableName];
-function useComponent({ componentId, components, locale, defaultLocale, properties: parameters, }) {
-    var _a, _b, _c, _d, _e;
-    const preloadRef = (0, react_1.useRef)();
-    const scriptRef = (0, react_1.useRef)({});
-    if (preloadRef.current)
-        return preloadRef.current;
-    const preload = PRELOAD_COMPONENTS_STATE === null || PRELOAD_COMPONENTS_STATE === void 0 ? void 0 : PRELOAD_COMPONENTS_STATE.components[componentId];
-    if (preload) {
-        const properties = Object.fromEntries(Object.entries(parameters !== null && parameters !== void 0 ? parameters : {}).map(([id, { value }]) => {
-            var _a, _b;
-            const property = (_b = (_a = preload.component.properties) === null || _a === void 0 ? void 0 : _a[id]) === null || _b === void 0 ? void 0 : _b.data;
-            if (!property)
-                return [];
-            return [property.key, (0, property_1.parsePropertyValue)(property, value, { locale, defaultLocale })];
-        }));
-        const mod = window[preload.preloadComponentModuleName];
-        if (typeof mod === 'function') {
-            preloadRef.current = {
-                Component: mod(),
-                properties: Object.assign(Object.assign({}, (0, property_1.assignNullableFields)(properties, (_c = (_b = (_a = preload.locales) === null || _a === void 0 ? void 0 : _a[locale]) === null || _b === void 0 ? void 0 : _b.properties) !== null && _c !== void 0 ? _c : (_e = (_d = preload.locales) === null || _d === void 0 ? void 0 : _d[PRELOAD_COMPONENTS_STATE.config.defaultLocale]) === null || _e === void 0 ? void 0 : _e.properties)), preload.serverSideProps),
+let PRELOAD_COMPONENTS_STATE = window[preload_1.PreloadComponentsStateGlobalVariableName];
+let PRELOAD_COMPONENTS_STATE_KEY = 0;
+const COMPONENTS_MAP = {};
+function getScriptComponent(componentId) {
+    if (!COMPONENTS_MAP[componentId]) {
+        const preload = PRELOAD_COMPONENTS_STATE === null || PRELOAD_COMPONENTS_STATE === void 0 ? void 0 : PRELOAD_COMPONENTS_STATE.components[componentId];
+        if (preload) {
+            const mod = window[preload.preloadComponentModuleName];
+            if (typeof mod === 'function') {
+                COMPONENTS_MAP[componentId] = { component: preload.component, Component: mod() };
+            }
+        }
+    }
+    return COMPONENTS_MAP[componentId];
+}
+const LOAD_REMOTE_COMPONENT_TASKS = {};
+function loadRemoteComponent({ mode, instanceId, componentId, locale, }) {
+    var _a;
+    const key = [instanceId, locale].join('-');
+    (_a = LOAD_REMOTE_COMPONENT_TASKS[key]) !== null && _a !== void 0 ? _a : (LOAD_REMOTE_COMPONENT_TASKS[key] = (0, api_1.preloadComponents)({ mode, id: componentId, locale })
+        .then((result) => {
+        var _a;
+        var _b;
+        for (const i of Object.values(result.components)) {
+            if (!window[i.script.umd.moduleName]) {
+                const script = document.createElement('script');
+                script.textContent = i.script.umd.script;
+                document.body.appendChild(script);
+            }
+            PRELOAD_COMPONENTS_STATE !== null && PRELOAD_COMPONENTS_STATE !== void 0 ? PRELOAD_COMPONENTS_STATE : (PRELOAD_COMPONENTS_STATE = { config: result.config, components: {}, props: {} });
+            PRELOAD_COMPONENTS_STATE.components[i.component.id] = {
+                preloadComponentModuleName: i.script.umd.moduleName,
+                component: i.component,
             };
-            return preloadRef.current;
+            (_a = (_b = PRELOAD_COMPONENTS_STATE.props)[instanceId]) !== null && _a !== void 0 ? _a : (_b[instanceId] = {});
+            PRELOAD_COMPONENTS_STATE.props[instanceId][locale] = result.props[componentId][locale];
+            PRELOAD_COMPONENTS_STATE_KEY += 1;
+        }
+    })
+        .catch((error) => {
+        console.error('load remote component error', error);
+        LOAD_REMOTE_COMPONENT_TASKS[key] = undefined;
+    }));
+    return LOAD_REMOTE_COMPONENT_TASKS[key];
+}
+function useComponent({ mode, instanceId, componentId, components, locale, defaultLocale, properties: parameters, props, }) {
+    const scriptRef = (0, react_1.useRef)({});
+    const preloadComponent = (0, react_1.useMemo)(() => getScriptComponent(componentId), [componentId, PRELOAD_COMPONENTS_STATE_KEY]);
+    const preloadState = (0, react_1.useMemo)(() => {
+        var _a;
+        return (_a = PRELOAD_COMPONENTS_STATE === null || PRELOAD_COMPONENTS_STATE === void 0 ? void 0 : PRELOAD_COMPONENTS_STATE.props[instanceId]) === null || _a === void 0 ? void 0 : _a[locale];
+    }, [instanceId, locale, PRELOAD_COMPONENTS_STATE_KEY]);
+    const previousPreload = (0, react_1.useRef)();
+    const [, update] = (0, react_1.useState)(0);
+    if ((props || preloadState) && preloadComponent) {
+        previousPreload.current = {
+            Component: preloadComponent.Component,
+            properties: preloadState,
+        };
+        return previousPreload.current;
+    }
+    if (!(components === null || components === void 0 ? void 0 : components.length) && preloadComponent) {
+        loadRemoteComponent({ mode, instanceId, componentId, locale }).then(() => {
+            update((v) => v + 1);
+        });
+        if (previousPreload.current) {
+            return previousPreload.current;
         }
     }
     const component = (0, property_1.mergeComponent)({

package/lib/cjs/utils/preload.js

@@ -2,27 +2,31 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.injectPreloadComponents = void 0;
 const types_1 = require("../types");
-function injectPreloadComponents({ config, components }) {
+function injectPreloadComponents(...input) {
+    const list = input.flat();
+    const first = list[0];
+    if (!first)
+        return null;
+    const data = list.reduce((res, i) => {
+        Object.assign(res.config, i.config);
+        Object.assign(res.components, i.components);
+        Object.assign(res.props, i.props);
+        return res;
+    }, Object.assign({}, first));
     const injectState = {
-        config,
-        components: Object.fromEntries(components.map(({ script, component, locales, serverSideProps }) => [
-            component.id,
-            {
-                preloadComponentModuleName: script.umd.moduleName,
-                component,
-                locales,
-                serverSideProps,
-            },
+        config: data.config,
+        components: Object.fromEntries(Object.entries(data.components).map(([componentId, { script, component }]) => [
+            componentId,
+            { preloadComponentModuleName: script.umd.moduleName, component },
         ])),
+        props: data.props,
     };
-    if (!components.length)
-        return undefined;
     return {
         html: `\
-${components
-            .map((i) => `\
+${Object.values(data.components)
+            .map(({ script }) => `\
 <script>
-${i.script.umd.script}
+${script.umd.script}
 </script>
 `)
             .join('\n')}

package/lib/cjs/utils/property.js

@@ -59,7 +59,7 @@ function mergeComponent({ componentId, getComponent, locale, defaultLocale, prop
 exports.mergeComponent = mergeComponent;
 exports.RenderNestedComponent = '__RENDER_NESTED_COMPONENT__';
 function parsePropertyValue(property, value, { locale, defaultLocale }) {
-    var _a, _b, _c;
+    var _a, _b, _c, _d, _e;
     if (property.type === 'json') {
         if (!value)
             return undefined;
@@ -72,13 +72,14 @@ function parsePropertyValue(property, value, { locale, defaultLocale }) {
         }
     }
     if (property.type === 'component') {
-        const { componentId, locales } = property;
-        if (!componentId)
+        const componentId = (value === null || value === void 0 ? void 0 : value.componentId) || property.componentId;
+        if (typeof componentId !== 'string')
             return undefined;
+        const { locales } = property;
         return {
             type: exports.RenderNestedComponent,
             componentId,
-            properties: (_b = (_a = locales === null || locales === void 0 ? void 0 : locales[locale]) === null || _a === void 0 ? void 0 : _a.defaultValue) !== null && _b !== void 0 ? _b : (_c = locales === null || locales === void 0 ? void 0 : locales[defaultLocale]) === null || _c === void 0 ? void 0 : _c.defaultValue,
+            properties: Object.assign(Object.assign({}, ((_c = (_b = (_a = locales === null || locales === void 0 ? void 0 : locales[locale]) === null || _a === void 0 ? void 0 : _a.defaultValue) === null || _b === void 0 ? void 0 : _b.properties) !== null && _c !== void 0 ? _c : (_e = (_d = locales === null || locales === void 0 ? void 0 : locales[defaultLocale]) === null || _d === void 0 ? void 0 : _d.defaultValue) === null || _e === void 0 ? void 0 : _e.properties)), value === null || value === void 0 ? void 0 : value.properties),
         };
     }
     return value;

package/lib/esm/api/call.js

@@ -8,13 +8,18 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
     });
 };
 import { call } from '@blocklet/sdk/lib/component';
-export function preloadComponents({ mode, name, id }) {
+export function preloadComponents({ mode, name, id, locale, }) {
     return __awaiter(this, void 0, void 0, function* () {
         return call({
             name: 'pages-kit',
             method: 'GET',
             path: '/api/components/preload',
-            params: { mode, id: Array.isArray(id) ? id.join(',') : id, name: Array.isArray(name) ? name.join(',') : name },
+            params: {
+                mode,
+                id: Array.isArray(id) ? id.join(',') : id,
+                name: Array.isArray(name) ? name.join(',') : name,
+                locale,
+            },
         }).then((res) => res.data);
     });
 }

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

@@ -10,16 +10,17 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
 import axios from 'axios';
 import { joinURL } from 'ufo';
 const PAGES_KIT_DID = 'z8iZiDFg3vkkrPwsiba1TLXy3H9XHzFERsP8o';
-export function preloadComponents({ mode, name, id }) {
+export function preloadComponents({ mode, name, id, locale, }) {
     var _a, _b;
     return __awaiter(this, void 0, void 0, function* () {
         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) || '/';
         return axios
-            .get(joinURL(prefix, '/api/components'), {
+            .get(joinURL(prefix, '/api/components/preload'), {
             params: {
                 mode,
                 id: Array.isArray(id) ? id.join(',') : id,
                 name: Array.isArray(name) ? name.join(',') : name,
+                locale,
             },
         })
             .then((res) => res.data);

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

@@ -22,15 +22,17 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import '../../utils/inject-global-components';
 import { Alert, Box } from '@mui/material';
 import { pick } from 'lodash';
-import { useEffect, useRef, useState } from 'react';
+import { useEffect, useMemo, useRef, useState } from 'react';
 import { ErrorBoundary } from 'react-error-boundary';
+import { preloadComponents } from '../../api';
 import { PreloadComponentsStateGlobalVariableName } from '../../types/preload';
-import { RenderNestedComponent, assignNullableFields, mergeComponent, parsePropertyValue } from '../../utils/property';
+import { RenderNestedComponent, mergeComponent } from '../../utils/property';
 import { createBuiltinModuleTransformer } from '../../utils/typescript/builtin-module-transformer';
 const MAXIMUM_RENDER_STACK_SIZE = 50;
 export default function CustomComponentRenderer(_a) {
+    var _b;
     var props = __rest(_a, []);
-    return (_jsx(ErrorBoundary, { fallbackRender: E, resetKeys: [Date.now()], children: _jsx(ComponentRenderer, Object.assign({}, props)) }));
+    return (_jsx(ErrorBoundary, { fallbackRender: E, resetKeys: [Date.now()], children: _jsx(ComponentRenderer, Object.assign({}, props, { instanceId: (_b = props.instanceId) !== null && _b !== void 0 ? _b : props.componentId })) }));
 }
 function ComponentRenderer(_a) {
     var { renderCount = 0 } = _a, props = __rest(_a, ["renderCount"]);
@@ -44,10 +46,12 @@ function Renderer(props) {
     if (!component)
         return null;
     const { Component, AsyncComponent, properties } = component;
-    const componentProps = Object.fromEntries(Object.entries(Object.assign(Object.assign({}, properties), props.props)).map(([key, val]) => [
-        key,
-        (val === null || val === void 0 ? void 0 : val.type) === RenderNestedComponent ? (_jsx(ComponentRenderer, Object.assign({ renderCount: props.renderCount, componentId: val.componentId }, pick(props, 'components', 'locale', 'defaultLocale'), { properties: val.properties }))) : (val),
-    ]));
+    const componentProps = Object.fromEntries(Object.entries(Object.assign(Object.assign({}, properties), props.props)).map(([key, val]) => {
+        return [
+            key,
+            (val === null || val === void 0 ? void 0 : val.type) === RenderNestedComponent ? (_jsx(ComponentRenderer, Object.assign({}, pick(props, 'components', 'locale', 'defaultLocale'), { instanceId: key, renderCount: props.renderCount, componentId: val.componentId, properties: val.properties, props: val.props }))) : (val),
+        ];
+    }));
     if (Component) {
         return _jsx(Component, Object.assign({}, componentProps));
     }
@@ -73,29 +77,73 @@ function AsyncComponentRenderer(_a) {
 function E({ error }) {
     return (_jsx(Box, { children: _jsx(Alert, { severity: "error", children: error.message }) }));
 }
-const PRELOAD_COMPONENTS_STATE = window[PreloadComponentsStateGlobalVariableName];
-function useComponent({ componentId, components, locale, defaultLocale, properties: parameters, }) {
-    var _a, _b, _c, _d, _e;
-    const preloadRef = useRef();
-    const scriptRef = useRef({});
-    if (preloadRef.current)
-        return preloadRef.current;
-    const preload = PRELOAD_COMPONENTS_STATE === null || PRELOAD_COMPONENTS_STATE === void 0 ? void 0 : PRELOAD_COMPONENTS_STATE.components[componentId];
-    if (preload) {
-        const properties = Object.fromEntries(Object.entries(parameters !== null && parameters !== void 0 ? parameters : {}).map(([id, { value }]) => {
-            var _a, _b;
-            const property = (_b = (_a = preload.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 })];
-        }));
-        const mod = window[preload.preloadComponentModuleName];
-        if (typeof mod === 'function') {
-            preloadRef.current = {
-                Component: mod(),
-                properties: Object.assign(Object.assign({}, assignNullableFields(properties, (_c = (_b = (_a = preload.locales) === null || _a === void 0 ? void 0 : _a[locale]) === null || _b === void 0 ? void 0 : _b.properties) !== null && _c !== void 0 ? _c : (_e = (_d = preload.locales) === null || _d === void 0 ? void 0 : _d[PRELOAD_COMPONENTS_STATE.config.defaultLocale]) === null || _e === void 0 ? void 0 : _e.properties)), preload.serverSideProps),
+let PRELOAD_COMPONENTS_STATE = window[PreloadComponentsStateGlobalVariableName];
+let PRELOAD_COMPONENTS_STATE_KEY = 0;
+const COMPONENTS_MAP = {};
+function getScriptComponent(componentId) {
+    if (!COMPONENTS_MAP[componentId]) {
+        const preload = PRELOAD_COMPONENTS_STATE === null || PRELOAD_COMPONENTS_STATE === void 0 ? void 0 : PRELOAD_COMPONENTS_STATE.components[componentId];
+        if (preload) {
+            const mod = window[preload.preloadComponentModuleName];
+            if (typeof mod === 'function') {
+                COMPONENTS_MAP[componentId] = { component: preload.component, Component: mod() };
+            }
+        }
+    }
+    return COMPONENTS_MAP[componentId];
+}
+const LOAD_REMOTE_COMPONENT_TASKS = {};
+function loadRemoteComponent({ mode, instanceId, componentId, locale, }) {
+    var _a;
+    const key = [instanceId, locale].join('-');
+    (_a = LOAD_REMOTE_COMPONENT_TASKS[key]) !== null && _a !== void 0 ? _a : (LOAD_REMOTE_COMPONENT_TASKS[key] = preloadComponents({ mode, id: componentId, locale })
+        .then((result) => {
+        var _a;
+        var _b;
+        for (const i of Object.values(result.components)) {
+            if (!window[i.script.umd.moduleName]) {
+                const script = document.createElement('script');
+                script.textContent = i.script.umd.script;
+                document.body.appendChild(script);
+            }
+            PRELOAD_COMPONENTS_STATE !== null && PRELOAD_COMPONENTS_STATE !== void 0 ? PRELOAD_COMPONENTS_STATE : (PRELOAD_COMPONENTS_STATE = { config: result.config, components: {}, props: {} });
+            PRELOAD_COMPONENTS_STATE.components[i.component.id] = {
+                preloadComponentModuleName: i.script.umd.moduleName,
+                component: i.component,
             };
-            return preloadRef.current;
+            (_a = (_b = PRELOAD_COMPONENTS_STATE.props)[instanceId]) !== null && _a !== void 0 ? _a : (_b[instanceId] = {});
+            PRELOAD_COMPONENTS_STATE.props[instanceId][locale] = result.props[componentId][locale];
+            PRELOAD_COMPONENTS_STATE_KEY += 1;
+        }
+    })
+        .catch((error) => {
+        console.error('load remote component error', error);
+        LOAD_REMOTE_COMPONENT_TASKS[key] = undefined;
+    }));
+    return LOAD_REMOTE_COMPONENT_TASKS[key];
+}
+function useComponent({ mode, instanceId, componentId, components, locale, defaultLocale, properties: parameters, props, }) {
+    const scriptRef = useRef({});
+    const preloadComponent = useMemo(() => getScriptComponent(componentId), [componentId, PRELOAD_COMPONENTS_STATE_KEY]);
+    const preloadState = useMemo(() => {
+        var _a;
+        return (_a = PRELOAD_COMPONENTS_STATE === null || PRELOAD_COMPONENTS_STATE === void 0 ? void 0 : PRELOAD_COMPONENTS_STATE.props[instanceId]) === null || _a === void 0 ? void 0 : _a[locale];
+    }, [instanceId, locale, PRELOAD_COMPONENTS_STATE_KEY]);
+    const previousPreload = useRef();
+    const [, update] = useState(0);
+    if ((props || preloadState) && preloadComponent) {
+        previousPreload.current = {
+            Component: preloadComponent.Component,
+            properties: preloadState,
+        };
+        return previousPreload.current;
+    }
+    if (!(components === null || components === void 0 ? void 0 : components.length) && preloadComponent) {
+        loadRemoteComponent({ mode, instanceId, componentId, locale }).then(() => {
+            update((v) => v + 1);
+        });
+        if (previousPreload.current) {
+            return previousPreload.current;
         }
     }
     const component = mergeComponent({

package/lib/esm/utils/preload.js

@@ -1,25 +1,29 @@
 import { PreloadComponentsStateGlobalVariableName } from '../types';
-export function injectPreloadComponents({ config, components }) {
+export function injectPreloadComponents(...input) {
+    const list = input.flat();
+    const first = list[0];
+    if (!first)
+        return null;
+    const data = list.reduce((res, i) => {
+        Object.assign(res.config, i.config);
+        Object.assign(res.components, i.components);
+        Object.assign(res.props, i.props);
+        return res;
+    }, Object.assign({}, first));
     const injectState = {
-        config,
-        components: Object.fromEntries(components.map(({ script, component, locales, serverSideProps }) => [
-            component.id,
-            {
-                preloadComponentModuleName: script.umd.moduleName,
-                component,
-                locales,
-                serverSideProps,
-            },
+        config: data.config,
+        components: Object.fromEntries(Object.entries(data.components).map(([componentId, { script, component }]) => [
+            componentId,
+            { preloadComponentModuleName: script.umd.moduleName, component },
         ])),
+        props: data.props,
     };
-    if (!components.length)
-        return undefined;
     return {
         html: `\
-${components
-            .map((i) => `\
+${Object.values(data.components)
+            .map(({ script }) => `\
 <script>
-${i.script.umd.script}
+${script.umd.script}
 </script>
 `)
             .join('\n')}

package/lib/esm/utils/property.js

@@ -54,7 +54,7 @@ export function mergeComponent({ componentId, getComponent, locale, defaultLocal
 }
 export const RenderNestedComponent = '__RENDER_NESTED_COMPONENT__';
 export function parsePropertyValue(property, value, { locale, defaultLocale }) {
-    var _a, _b, _c;
+    var _a, _b, _c, _d, _e;
     if (property.type === 'json') {
         if (!value)
             return undefined;
@@ -67,13 +67,14 @@ export function parsePropertyValue(property, value, { locale, defaultLocale }) {
         }
     }
     if (property.type === 'component') {
-        const { componentId, locales } = property;
-        if (!componentId)
+        const componentId = (value === null || value === void 0 ? void 0 : value.componentId) || property.componentId;
+        if (typeof componentId !== 'string')
             return undefined;
+        const { locales } = property;
         return {
             type: RenderNestedComponent,
             componentId,
-            properties: (_b = (_a = locales === null || locales === void 0 ? void 0 : locales[locale]) === null || _a === void 0 ? void 0 : _a.defaultValue) !== null && _b !== void 0 ? _b : (_c = locales === null || locales === void 0 ? void 0 : locales[defaultLocale]) === null || _c === void 0 ? void 0 : _c.defaultValue,
+            properties: Object.assign(Object.assign({}, ((_c = (_b = (_a = locales === null || locales === void 0 ? void 0 : locales[locale]) === null || _a === void 0 ? void 0 : _a.defaultValue) === null || _b === void 0 ? void 0 : _b.properties) !== null && _c !== void 0 ? _c : (_e = (_d = locales === null || locales === void 0 ? void 0 : locales[defaultLocale]) === null || _d === void 0 ? void 0 : _d.defaultValue) === null || _e === void 0 ? void 0 : _e.properties)), value === null || value === void 0 ? void 0 : value.properties),
         };
     }
     return value;

package/lib/types/api/call.d.ts

@@ -1,2 +1,2 @@
 import { PreloadComponentQuery, PreloadComponentsResult } from '../types';
-export declare function preloadComponents({ mode, name, id }: PreloadComponentQuery): Promise<PreloadComponentsResult>;
+export declare function preloadComponents({ mode, name, id, locale, }: PreloadComponentQuery): Promise<PreloadComponentsResult>;

package/lib/types/api/pages-kit.d.ts

@@ -1,2 +1,2 @@
 import { PreloadComponentQuery, PreloadComponentsResult } from '../types';
-export declare function preloadComponents({ mode, name, id }: PreloadComponentQuery): Promise<PreloadComponentsResult>;
+export declare function preloadComponents({ mode, name, id, locale, }: PreloadComponentQuery): Promise<PreloadComponentsResult>;

package/lib/types/components/CustomComponentRenderer/index.d.ts

@@ -1,6 +1,9 @@
 import '../../utils/inject-global-components';
+import { StateMode } from '../../types';
 import { CustomComponent } from '../../types/core';
 export interface CustomComponentRendererProps {
+    mode?: StateMode;
+    instanceId?: string;
     componentId: string;
     locale?: string;
     defaultLocale?: string;

package/lib/types/types/api.d.ts

@@ -1,31 +1,31 @@
 import { CustomComponent } from './core';
 import { StateMode } from './state';
 export interface PreloadComponentQuery {
+    locale?: string;
     mode?: StateMode;
     name?: string[] | string;
     id?: string[] | string;
 }
 export interface PreloadComponentsResult {
     config: {
-        defaultLocale?: string;
+        defaultLocale: string;
     };
     components: {
-        component: CustomComponent;
-        script: {
-            umd: {
-                script: string;
-                moduleName: string;
+        [componentId: string]: {
+            component: CustomComponent;
+            script: {
+                umd: {
+                    script: string;
+                    moduleName: string;
+                };
             };
         };
-        locales: {
+    };
+    props: {
+        [instanceId: string]: {
             [locale: string]: {
-                properties: {
-                    [key: string]: any;
-                };
+                [key: string]: any;
             };
         };
-        serverSideProps?: {
-            [key: string]: any;
-        };
-    }[];
+    };
 }

package/lib/types/types/core.d.ts

@@ -53,4 +53,17 @@ export interface CustomComponentStringProperty extends CustomComponentPropertyBa
 export interface CustomComponentComponentProperty extends CustomComponentPropertyBase {
     type: 'component';
     componentId?: string;
+    locales?: {
+        [locale: string]: {
+            name?: undefined;
+            defaultValue?: {
+                componentId?: string;
+                properties: {
+                    [id: string]: {
+                        value: any;
+                    };
+                };
+            };
+        };
+    };
 }

package/lib/types/types/preload.d.ts

@@ -3,22 +3,19 @@ export declare const PreloadComponentsStateGlobalVariableName = "__PAGES_KIT_PRE
 export interface PreloadComponent {
     preloadComponentModuleName: string;
     component: CustomComponent;
-    locales?: {
-        [locale: string]: {
-            properties?: {
-                [key: string]: any;
-            };
-        };
-    };
-    serverSideProps?: {
-        [key: string]: any;
-    };
 }
 export interface PreloadComponentsState {
     config: {
         defaultLocale?: string;
     };
     components: {
-        [id: string]: PreloadComponent;
+        [componentId: string]: PreloadComponent;
+    };
+    props: {
+        [instanceId: string]: {
+            [locale: string]: {
+                [key: string]: any;
+            };
+        };
     };
 }

package/lib/types/utils/preload.d.ts

@@ -1,4 +1,4 @@
 import { PreloadComponentsResult } from '../types';
-export declare function injectPreloadComponents({ config, components }: PreloadComponentsResult): {
+export declare function injectPreloadComponents(...input: PreloadComponentsResult[] | PreloadComponentsResult[][]): {
     html: string;
-} | undefined;
+} | null;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blocklet/pages-kit",
-  "version": "0.2.215",
+  "version": "0.2.217",
   "description": "Pages Kit components and utils",
   "publishConfig": {
     "access": "public"
@@ -120,7 +120,7 @@
     "react-router-dom": "^6.16.0"
   },
   "devDependencies": {
-    "@arcblock/ux": "^2.9.19",
+    "@arcblock/ux": "^2.9.20",
     "@emotion/cache": "^11.11.0",
     "@emotion/css": "^11.11.2",
     "@emotion/react": "^11.11.3",