@blocklet/pages-kit 0.2.203 → 0.2.205

package/lib/cjs/api/call.js

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

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

@@ -12,15 +12,23 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getComponents = void 0;
+exports.preloadComponents = void 0;
 const axios_1 = __importDefault(require("axios"));
 const ufo_1 = require("ufo");
 const PAGES_KIT_DID = 'z8iZiDFg3vkkrPwsiba1TLXy3H9XHzFERsP8o';
-function getComponents({ mode, name } = {}) {
+function preloadComponents({ mode, name, id }) {
     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'), { params: { name, mode } }).then((res) => res.data);
+        return axios_1.default
+            .get((0, ufo_1.joinURL)(prefix, '/api/components'), {
+            params: {
+                mode,
+                id: Array.isArray(id) ? id.join(',') : id,
+                name: Array.isArray(name) ? name.join(',') : name,
+            },
+        })
+            .then((res) => res.data);
     });
 }
-exports.getComponents = getComponents;
+exports.preloadComponents = preloadComponents;

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

@@ -31,178 +31,107 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
         step((generator = generator.apply(thisArg, _arguments || [])).next());
     });
 };
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 const jsx_runtime_1 = require("react/jsx-runtime");
-const cache_1 = __importDefault(require("@emotion/cache"));
-const react_1 = require("@emotion/react");
-const react_2 = require("@iconify/react");
+const react_1 = require("@iconify/react");
 const material_1 = require("@mui/material");
-const react_3 = __importStar(require("react"));
-const client_1 = __importDefault(require("react-dom/client"));
+const react_2 = __importStar(require("react"));
 const react_error_boundary_1 = require("react-error-boundary");
-const react_frame_component_1 = require("react-frame-component");
 const ufo_1 = require("ufo");
-const zustand_1 = require("zustand");
-const immer_1 = require("zustand/middleware/immer");
+const preload_1 = require("../../types/preload");
+const property_1 = require("../../utils/property");
 // inject global variables for web-component renderer
 const win = window;
 win.joinURL = ufo_1.joinURL;
 win.withQuery = ufo_1.withQuery;
-win.React = react_3.default;
+win.React = react_2.default;
 win.Box = material_1.Box;
 win.Stack = material_1.Stack;
 win.Button = material_1.Button;
-win.IconifyIcon = react_2.Icon;
-const CUSTOM_COMPONENT_RENDERER = 'custom-component-renderer';
-const defineCustomElements = (win) => {
-    if (!win.customElements.get(CUSTOM_COMPONENT_RENDERER)) {
-        win.customElements.define(CUSTOM_COMPONENT_RENDERER, class CustomComponentRenderer extends win.HTMLElement {
-            constructor() {
-                super();
-                this.root = this.attachShadow({ mode: 'open' });
-                this.reactRoot = client_1.default.createRoot(this.root);
-            }
-            static get observedAttributes() {
-                return ['id', 'component-id', 'locale', 'default-locale'];
-            }
-            get componentId() {
-                return this.getAttribute('component-id');
-            }
-            get locale() {
-                return this.getAttribute('locale');
-            }
-            get defaultLocale() {
-                return this.getAttribute('default-locale');
-            }
-            connectedCallback() {
-                this.setup();
-            }
-            attributeChangedCallback() {
-                this.setup();
-            }
-            setup() {
-                const { subscribe } = customComponentState(this.componentId);
-                const { subscribe: subscribeProperties } = customComponentProperties(this.id);
-                subscribe(() => this.render());
-                subscribeProperties(() => this.render());
-                this.render();
-            }
-            get state() {
-                return Object.assign(Object.assign({}, customComponentState(this.componentId).getState()), { properties: customComponentProperties(this.id).getState().properties });
-            }
-            render() {
-                var _a, _b, _c, _d, _e;
-                return __awaiter(this, void 0, void 0, function* () {
-                    try {
-                        const { component, properties: parameters } = this.state;
-                        if (!component)
-                            throw new Error('missing required component config');
-                        let script;
-                        let current = component;
-                        const properties = Object.fromEntries(Object.entries(parameters !== null && parameters !== void 0 ? parameters : {}).map(([id, { value }]) => {
-                            var _a, _b;
-                            const property = (_b = (_a = 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.type, value)];
-                        }));
-                        while (current) {
-                            mergeProperties(properties, Object.fromEntries(Object.values((_a = current.properties) !== null && _a !== void 0 ? _a : {}).map(({ data }) => {
-                                var _a, _b, _c, _d, _e;
-                                return [
-                                    data.key,
-                                    parsePropertyValue(data.type, (_c = (_b = (_a = data.locales) === null || _a === void 0 ? void 0 : _a[this.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[this.defaultLocale]) === null || _e === void 0 ? void 0 : _e.defaultValue),
-                                ];
-                            })));
-                            if (((_b = current.renderer) === null || _b === void 0 ? void 0 : _b.type) === 'web-component') {
-                                script = (_c = current.renderer) === null || _c === void 0 ? void 0 : _c.script;
-                                break;
-                            }
-                            if (((_d = current.renderer) === null || _d === void 0 ? void 0 : _d.type) === 'custom-component' && current.renderer.componentId) {
-                                const c = customComponentState(current.renderer.componentId).getState()
-                                    .component;
-                                const rendererProperties = current.renderer.properties;
-                                mergeProperties(properties, Object.fromEntries(Object.entries((_e = c === null || c === void 0 ? void 0 : c.properties) !== null && _e !== void 0 ? _e : {}).map(([id, { data }]) => {
-                                    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
-                                    const locales = (_a = rendererProperties === null || rendererProperties === void 0 ? void 0 : rendererProperties[id]) === null || _a === void 0 ? void 0 : _a.locales;
-                                    return [
-                                        data.key,
-                                        parsePropertyValue(data.type, (_h = (_e = (_c = (_b = locales === null || locales === void 0 ? void 0 : locales[this.locale]) === null || _b === void 0 ? void 0 : _b.value) !== null && _c !== void 0 ? _c : (_d = locales === null || locales === void 0 ? void 0 : locales[this.defaultLocale]) === null || _d === void 0 ? void 0 : _d.value) !== null && _e !== void 0 ? _e : (_g = (_f = data.locales) === null || _f === void 0 ? void 0 : _f[this.locale]) === null || _g === void 0 ? void 0 : _g.defaultValue) !== null && _h !== void 0 ? _h : (_k = (_j = data.locales) === null || _j === void 0 ? void 0 : _j[this.defaultLocale]) === null || _k === void 0 ? void 0 : _k.defaultValue),
-                                    ];
-                                })));
-                                current = c;
-                            }
-                            else {
-                                current = undefined;
-                            }
-                        }
-                        if (!script)
-                            throw new Error('Missing required script');
-                        const cache = (0, cache_1.default)({
-                            key: 'css',
-                            prepend: true,
-                            container: this.root,
-                        });
-                        const url = URL.createObjectURL(new Blob([script], { type: 'application/javascript' }));
-                        const { default: C } = yield Promise.resolve(`${url}`).then(s => __importStar(require(s)));
-                        this.reactRoot.render((0, jsx_runtime_1.jsx)(react_1.CacheProvider, { value: cache, children: (0, jsx_runtime_1.jsx)(material_1.CssBaseline, { children: (0, jsx_runtime_1.jsx)(C, Object.assign({}, properties)) }) }));
-                    }
-                    catch (error) {
-                        console.error(error);
-                        this.reactRoot.render((0, jsx_runtime_1.jsx)("div", {}));
-                    }
-                });
-            }
-        });
-    }
-};
-const CUSTOM_COMPONENT_STATE_MAP = {};
-const customComponentState = (id, initial) => {
-    var _a;
-    (_a = CUSTOM_COMPONENT_STATE_MAP[id]) !== null && _a !== void 0 ? _a : (CUSTOM_COMPONENT_STATE_MAP[id] = (0, zustand_1.create)()((0, immer_1.immer)(() => (Object.assign({}, initial)))));
-    return CUSTOM_COMPONENT_STATE_MAP[id];
-};
-const CUSTOM_COMPONENT_PROPERTIES_MAP = {};
-const customComponentProperties = (id, initial) => {
-    var _a;
-    (_a = CUSTOM_COMPONENT_PROPERTIES_MAP[id]) !== null && _a !== void 0 ? _a : (CUSTOM_COMPONENT_PROPERTIES_MAP[id] = (0, zustand_1.create)()((0, immer_1.immer)(() => (Object.assign({}, initial)))));
-    return CUSTOM_COMPONENT_PROPERTIES_MAP[id];
-};
-function CustomComponentRenderer({ id, componentId, components, properties, locale, defaultLocale, }) {
-    const frame = (0, react_frame_component_1.useFrame)();
-    components === null || components === void 0 ? void 0 : components.forEach((component) => {
-        customComponentState(component.id, { component }).setState({ component });
-    });
-    customComponentProperties(id, { properties }).setState({ properties });
-    (0, react_3.useEffect)(() => {
-        defineCustomElements(frame.window || window);
-    }, [frame]);
-    return ((0, jsx_runtime_1.jsx)(react_error_boundary_1.ErrorBoundary, { fallbackRender: E, children: (0, jsx_runtime_1.jsx)("custom-component-renderer", { "component-id": componentId, id: id, locale: locale, "default-locale": defaultLocale }) }));
+win.IconifyIcon = react_1.Icon;
+function CustomComponentRenderer(_a) {
+    var props = __rest(_a, []);
+    return ((0, jsx_runtime_1.jsx)(react_error_boundary_1.ErrorBoundary, { fallbackRender: E, children: (0, jsx_runtime_1.jsx)(Renderer, Object.assign({}, props)) }));
 }
 exports.default = CustomComponentRenderer;
+function Renderer(props) {
+    const component = loadComponent(props);
+    if (!component)
+        return null;
+    const { Component, AsyncComponent, properties } = component;
+    if (Component) {
+        return (0, jsx_runtime_1.jsx)(Component, Object.assign({}, properties));
+    }
+    if (AsyncComponent) {
+        return (0, jsx_runtime_1.jsx)(AsyncComponentRenderer, { AsyncComponent: AsyncComponent, properties: properties });
+    }
+    return null;
+}
+function AsyncComponentRenderer({ AsyncComponent, properties, }) {
+    const [{ Component, error, key }, setState] = (0, react_2.useState)({});
+    (0, react_2.useEffect)(() => {
+        AsyncComponent.then((m) => setState({ Component: m.default, key: Date.now() })).catch((error) => setState({ error, key: Date.now() }));
+    }, [AsyncComponent]);
+    if (error) {
+        return (0, jsx_runtime_1.jsx)(material_1.Alert, { severity: "error", children: error.stack });
+    }
+    if (Component) {
+        return ((0, jsx_runtime_1.jsx)(react_error_boundary_1.ErrorBoundary, { fallbackRender: E, resetKeys: [key], children: (0, jsx_runtime_1.jsx)(Component, Object.assign({}, properties)) }));
+    }
+    return null;
+}
 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 }) }));
 }
-function mergeProperties(properties, newProperties) {
-    for (const [key, val] of Object.entries(newProperties)) {
-        if (properties[key] === undefined || properties[key] === null) {
-            properties[key] = val;
-        }
+const PRELOAD_COMPONENTS_STATE = window[preload_1.PreloadComponentsStateGlobalVariableName];
+function loadComponent({ componentId, components, locale, defaultLocale, properties: parameters, }) {
+    var _a, _b, _c, _d, _e;
+    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.type, value)];
+        }));
+        return {
+            Component: window[preload.preloadComponentModuleName],
+            properties: (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),
+        };
     }
-    return properties;
+    const component = (0, property_1.mergeComponent)({
+        componentId,
+        getComponent: (componentId) => components === null || components === void 0 ? void 0 : components.find((i) => i.id === componentId),
+        locale,
+        defaultLocale,
+        properties: parameters,
+    });
+    if (!component)
+        return null;
+    return {
+        AsyncComponent: transpileAndLoadScript(component.script),
+        properties: component.properties,
+    };
 }
-function parsePropertyValue(type, value) {
-    if (type === 'json') {
-        try {
-            return JSON.parse(value);
-        }
-        catch (error) {
-            console.error('parse json value error', error);
-            return undefined;
-        }
-    }
-    return value;
+function transpileAndLoadScript(script) {
+    return __awaiter(this, void 0, void 0, function* () {
+        const ts = yield Promise.resolve().then(() => __importStar(require('typescript')));
+        const compiled = ts.transpileModule(script, {
+            compilerOptions: { jsx: ts.JsxEmit.React, module: ts.ModuleKind.ESNext },
+        }).outputText;
+        const url = URL.createObjectURL(new Blob([compiled], { type: 'application/javascript' }));
+        return Promise.resolve(`${url}`).then(s => __importStar(require(s)));
+    });
 }

package/lib/cjs/components/index.js

@@ -1,4 +1,18 @@
 "use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
@@ -6,3 +20,4 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.CustomComponentRenderer = void 0;
 var CustomComponentRenderer_1 = require("./CustomComponentRenderer");
 Object.defineProperty(exports, "CustomComponentRenderer", { enumerable: true, get: function () { return __importDefault(CustomComponentRenderer_1).default; } });
+__exportStar(require("./CustomComponentRenderer"), exports);

package/lib/cjs/types/api.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/lib/cjs/types/core.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/lib/cjs/types/index.js

@@ -1,2 +1,20 @@
 "use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
 Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./api"), exports);
+__exportStar(require("./core"), exports);
+__exportStar(require("./state"), exports);
+__exportStar(require("./preload"), exports);

package/lib/cjs/types/preload.js

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PreloadComponentsStateGlobalVariableName = void 0;
+exports.PreloadComponentsStateGlobalVariableName = '__PAGES_KIT_PRELOAD_CUSTOM_COMPONENTS_STATE__';

package/lib/cjs/types/state.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/lib/cjs/utils/preload.js

@@ -0,0 +1,34 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.injectPreloadComponents = void 0;
+const types_1 = require("../types");
+function injectPreloadComponents({ config, components }) {
+    const injectState = {
+        config,
+        components: Object.fromEntries(components.map(({ script, component, locales }) => [
+            component.id,
+            {
+                preloadComponentModuleName: script.umd.moduleName,
+                component,
+                locales,
+            },
+        ])),
+    };
+    if (!components.length)
+        return undefined;
+    return {
+        html: `\
+${components
+            .map((i) => `\
+<script>
+${i.script.umd.script}
+</script>
+`)
+            .join('\n')}
+<script>
+var ${types_1.PreloadComponentsStateGlobalVariableName} = ${JSON.stringify(injectState)}
+</script>
+`,
+    };
+}
+exports.injectPreloadComponents = injectPreloadComponents;

package/lib/cjs/utils/property.js

@@ -0,0 +1,83 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.assignNullableFields = exports.parsePropertyValue = exports.mergeComponent = exports.componentUMDName = void 0;
+function componentUMDName({ componentId }) {
+    return `PagesCustomComponent${componentId}`;
+}
+exports.componentUMDName = componentUMDName;
+function mergeComponent({ componentId, getComponent, locale, defaultLocale, properties: parameters, }) {
+    var _a, _b, _c, _d, _e, _f, _g;
+    let component = getComponent(componentId);
+    if (!component)
+        return null;
+    let script;
+    const properties = Object.fromEntries(Object.entries(parameters !== null && parameters !== void 0 ? parameters : {}).map(([id, { value }]) => {
+        var _a, _b;
+        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.type, value)];
+    }));
+    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,
+                parsePropertyValue(data.type, (_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),
+            ];
+        })));
+        if (((_b = component.renderer) === null || _b === void 0 ? void 0 : _b.type) === 'react-component') {
+            script = (_c = component.renderer) === null || _c === void 0 ? void 0 : _c.script;
+            break;
+        }
+        if (((_d = component.renderer) === null || _d === void 0 ? void 0 : _d.type) === 'web-component') {
+            script = (_e = component.renderer) === null || _e === void 0 ? void 0 : _e.script;
+            break;
+        }
+        if (((_f = component.renderer) === null || _f === void 0 ? void 0 : _f.type) === 'custom-component' && component.renderer.componentId) {
+            const { componentId } = component.renderer;
+            const next = getComponent(componentId);
+            const nextParameters = component.renderer.properties;
+            assignNullableFields(properties, Object.fromEntries(Object.entries((_g = next === null || next === void 0 ? void 0 : next.properties) !== null && _g !== void 0 ? _g : {}).map(([id, { data }]) => {
+                var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
+                const locales = (_a = nextParameters === null || nextParameters === void 0 ? void 0 : nextParameters[id]) === null || _a === void 0 ? void 0 : _a.locales;
+                return [
+                    data.key,
+                    parsePropertyValue(data.type, (_h = (_e = (_c = (_b = locales === null || locales === void 0 ? void 0 : locales[locale]) === null || _b === void 0 ? void 0 : _b.value) !== null && _c !== void 0 ? _c : (_d = locales === null || locales === void 0 ? void 0 : locales[defaultLocale]) === null || _d === void 0 ? void 0 : _d.value) !== null && _e !== void 0 ? _e : (_g = (_f = data.locales) === null || _f === void 0 ? void 0 : _f[locale]) === null || _g === void 0 ? void 0 : _g.defaultValue) !== null && _h !== void 0 ? _h : (_k = (_j = data.locales) === null || _j === void 0 ? void 0 : _j[defaultLocale]) === null || _k === void 0 ? void 0 : _k.defaultValue),
+                ];
+            })));
+            component = next;
+        }
+        else {
+            component = undefined;
+        }
+    }
+    if (!script)
+        return null;
+    return { script, properties };
+}
+exports.mergeComponent = mergeComponent;
+function parsePropertyValue(type, value) {
+    if (type === 'json') {
+        if (!value)
+            return undefined;
+        try {
+            return JSON.parse(value);
+        }
+        catch (error) {
+            console.error('parse json value error', error);
+            return undefined;
+        }
+    }
+    return value;
+}
+exports.parsePropertyValue = parsePropertyValue;
+function assignNullableFields(properties, newProperties) {
+    for (const [key, val] of Object.entries(newProperties)) {
+        if (properties[key] === undefined || properties[key] === null) {
+            properties[key] = val;
+        }
+    }
+    return properties;
+}
+exports.assignNullableFields = assignNullableFields;

package/lib/esm/api/call.js

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

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

@@ -10,10 +10,18 @@ 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 getComponents({ mode, name } = {}) {
+export function preloadComponents({ mode, name, id }) {
     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'), { params: { name, mode } }).then((res) => res.data);
+        return axios
+            .get(joinURL(prefix, '/api/components'), {
+            params: {
+                mode,
+                id: Array.isArray(id) ? id.join(',') : id,
+                name: Array.isArray(name) ? name.join(',') : name,
+            },
+        })
+            .then((res) => res.data);
     });
 }

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

@@ -7,18 +7,25 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
         step((generator = generator.apply(thisArg, _arguments || [])).next());
     });
 };
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
 import { jsx as _jsx } from "react/jsx-runtime";
-import createCache from '@emotion/cache';
-import { CacheProvider } from '@emotion/react';
 import { Icon as IconifyIcon } from '@iconify/react';
-import { Alert, Box, Button, CssBaseline, Stack } from '@mui/material';
-import React, { useEffect } from 'react';
-import ReactDOM from 'react-dom/client';
+import { Alert, Box, Button, Stack } from '@mui/material';
+import React, { useEffect, useState } from 'react';
 import { ErrorBoundary } from 'react-error-boundary';
-import { useFrame } from 'react-frame-component';
 import { joinURL, withQuery } from 'ufo';
-import { create } from 'zustand';
-import { immer } from 'zustand/middleware/immer';
+import { PreloadComponentsStateGlobalVariableName } from '../../types/preload';
+import { assignNullableFields, mergeComponent, parsePropertyValue } from '../../utils/property';
 // inject global variables for web-component renderer
 const win = window;
 win.joinURL = joinURL;
@@ -28,152 +35,77 @@ win.Box = Box;
 win.Stack = Stack;
 win.Button = Button;
 win.IconifyIcon = IconifyIcon;
-const CUSTOM_COMPONENT_RENDERER = 'custom-component-renderer';
-const defineCustomElements = (win) => {
-    if (!win.customElements.get(CUSTOM_COMPONENT_RENDERER)) {
-        win.customElements.define(CUSTOM_COMPONENT_RENDERER, class CustomComponentRenderer extends win.HTMLElement {
-            constructor() {
-                super();
-                this.root = this.attachShadow({ mode: 'open' });
-                this.reactRoot = ReactDOM.createRoot(this.root);
-            }
-            static get observedAttributes() {
-                return ['id', 'component-id', 'locale', 'default-locale'];
-            }
-            get componentId() {
-                return this.getAttribute('component-id');
-            }
-            get locale() {
-                return this.getAttribute('locale');
-            }
-            get defaultLocale() {
-                return this.getAttribute('default-locale');
-            }
-            connectedCallback() {
-                this.setup();
-            }
-            attributeChangedCallback() {
-                this.setup();
-            }
-            setup() {
-                const { subscribe } = customComponentState(this.componentId);
-                const { subscribe: subscribeProperties } = customComponentProperties(this.id);
-                subscribe(() => this.render());
-                subscribeProperties(() => this.render());
-                this.render();
-            }
-            get state() {
-                return Object.assign(Object.assign({}, customComponentState(this.componentId).getState()), { properties: customComponentProperties(this.id).getState().properties });
-            }
-            render() {
-                var _a, _b, _c, _d, _e;
-                return __awaiter(this, void 0, void 0, function* () {
-                    try {
-                        const { component, properties: parameters } = this.state;
-                        if (!component)
-                            throw new Error('missing required component config');
-                        let script;
-                        let current = component;
-                        const properties = Object.fromEntries(Object.entries(parameters !== null && parameters !== void 0 ? parameters : {}).map(([id, { value }]) => {
-                            var _a, _b;
-                            const property = (_b = (_a = 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.type, value)];
-                        }));
-                        while (current) {
-                            mergeProperties(properties, Object.fromEntries(Object.values((_a = current.properties) !== null && _a !== void 0 ? _a : {}).map(({ data }) => {
-                                var _a, _b, _c, _d, _e;
-                                return [
-                                    data.key,
-                                    parsePropertyValue(data.type, (_c = (_b = (_a = data.locales) === null || _a === void 0 ? void 0 : _a[this.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[this.defaultLocale]) === null || _e === void 0 ? void 0 : _e.defaultValue),
-                                ];
-                            })));
-                            if (((_b = current.renderer) === null || _b === void 0 ? void 0 : _b.type) === 'web-component') {
-                                script = (_c = current.renderer) === null || _c === void 0 ? void 0 : _c.script;
-                                break;
-                            }
-                            if (((_d = current.renderer) === null || _d === void 0 ? void 0 : _d.type) === 'custom-component' && current.renderer.componentId) {
-                                const c = customComponentState(current.renderer.componentId).getState()
-                                    .component;
-                                const rendererProperties = current.renderer.properties;
-                                mergeProperties(properties, Object.fromEntries(Object.entries((_e = c === null || c === void 0 ? void 0 : c.properties) !== null && _e !== void 0 ? _e : {}).map(([id, { data }]) => {
-                                    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
-                                    const locales = (_a = rendererProperties === null || rendererProperties === void 0 ? void 0 : rendererProperties[id]) === null || _a === void 0 ? void 0 : _a.locales;
-                                    return [
-                                        data.key,
-                                        parsePropertyValue(data.type, (_h = (_e = (_c = (_b = locales === null || locales === void 0 ? void 0 : locales[this.locale]) === null || _b === void 0 ? void 0 : _b.value) !== null && _c !== void 0 ? _c : (_d = locales === null || locales === void 0 ? void 0 : locales[this.defaultLocale]) === null || _d === void 0 ? void 0 : _d.value) !== null && _e !== void 0 ? _e : (_g = (_f = data.locales) === null || _f === void 0 ? void 0 : _f[this.locale]) === null || _g === void 0 ? void 0 : _g.defaultValue) !== null && _h !== void 0 ? _h : (_k = (_j = data.locales) === null || _j === void 0 ? void 0 : _j[this.defaultLocale]) === null || _k === void 0 ? void 0 : _k.defaultValue),
-                                    ];
-                                })));
-                                current = c;
-                            }
-                            else {
-                                current = undefined;
-                            }
-                        }
-                        if (!script)
-                            throw new Error('Missing required script');
-                        const cache = createCache({
-                            key: 'css',
-                            prepend: true,
-                            container: this.root,
-                        });
-                        const url = URL.createObjectURL(new Blob([script], { type: 'application/javascript' }));
-                        const { default: C } = yield import(/* @vite-ignore */ url);
-                        this.reactRoot.render(_jsx(CacheProvider, { value: cache, children: _jsx(CssBaseline, { children: _jsx(C, Object.assign({}, properties)) }) }));
-                    }
-                    catch (error) {
-                        console.error(error);
-                        this.reactRoot.render(_jsx("div", {}));
-                    }
-                });
-            }
-        });
+export default function CustomComponentRenderer(_a) {
+    var props = __rest(_a, []);
+    return (_jsx(ErrorBoundary, { fallbackRender: E, children: _jsx(Renderer, Object.assign({}, props)) }));
+}
+function Renderer(props) {
+    const component = loadComponent(props);
+    if (!component)
+        return null;
+    const { Component, AsyncComponent, properties } = component;
+    if (Component) {
+        return _jsx(Component, Object.assign({}, properties));
     }
-};
-const CUSTOM_COMPONENT_STATE_MAP = {};
-const customComponentState = (id, initial) => {
-    var _a;
-    (_a = CUSTOM_COMPONENT_STATE_MAP[id]) !== null && _a !== void 0 ? _a : (CUSTOM_COMPONENT_STATE_MAP[id] = create()(immer(() => (Object.assign({}, initial)))));
-    return CUSTOM_COMPONENT_STATE_MAP[id];
-};
-const CUSTOM_COMPONENT_PROPERTIES_MAP = {};
-const customComponentProperties = (id, initial) => {
-    var _a;
-    (_a = CUSTOM_COMPONENT_PROPERTIES_MAP[id]) !== null && _a !== void 0 ? _a : (CUSTOM_COMPONENT_PROPERTIES_MAP[id] = create()(immer(() => (Object.assign({}, initial)))));
-    return CUSTOM_COMPONENT_PROPERTIES_MAP[id];
-};
-export default function CustomComponentRenderer({ id, componentId, components, properties, locale, defaultLocale, }) {
-    const frame = useFrame();
-    components === null || components === void 0 ? void 0 : components.forEach((component) => {
-        customComponentState(component.id, { component }).setState({ component });
-    });
-    customComponentProperties(id, { properties }).setState({ properties });
+    if (AsyncComponent) {
+        return _jsx(AsyncComponentRenderer, { AsyncComponent: AsyncComponent, properties: properties });
+    }
+    return null;
+}
+function AsyncComponentRenderer({ AsyncComponent, properties, }) {
+    const [{ Component, error, key }, setState] = useState({});
     useEffect(() => {
-        defineCustomElements(frame.window || window);
-    }, [frame]);
-    return (_jsx(ErrorBoundary, { fallbackRender: E, children: _jsx("custom-component-renderer", { "component-id": componentId, id: id, locale: locale, "default-locale": defaultLocale }) }));
+        AsyncComponent.then((m) => setState({ Component: m.default, key: Date.now() })).catch((error) => setState({ error, key: Date.now() }));
+    }, [AsyncComponent]);
+    if (error) {
+        return _jsx(Alert, { severity: "error", children: error.stack });
+    }
+    if (Component) {
+        return (_jsx(ErrorBoundary, { fallbackRender: E, resetKeys: [key], children: _jsx(Component, Object.assign({}, properties)) }));
+    }
+    return null;
 }
 function E({ error }) {
     return (_jsx(Box, { children: _jsx(Alert, { severity: "error", children: error.message }) }));
 }
-function mergeProperties(properties, newProperties) {
-    for (const [key, val] of Object.entries(newProperties)) {
-        if (properties[key] === undefined || properties[key] === null) {
-            properties[key] = val;
-        }
+const PRELOAD_COMPONENTS_STATE = window[PreloadComponentsStateGlobalVariableName];
+function loadComponent({ componentId, components, locale, defaultLocale, properties: parameters, }) {
+    var _a, _b, _c, _d, _e;
+    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.type, value)];
+        }));
+        return {
+            Component: window[preload.preloadComponentModuleName],
+            properties: 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),
+        };
     }
-    return properties;
+    const component = mergeComponent({
+        componentId,
+        getComponent: (componentId) => components === null || components === void 0 ? void 0 : components.find((i) => i.id === componentId),
+        locale,
+        defaultLocale,
+        properties: parameters,
+    });
+    if (!component)
+        return null;
+    return {
+        AsyncComponent: transpileAndLoadScript(component.script),
+        properties: component.properties,
+    };
 }
-function parsePropertyValue(type, value) {
-    if (type === 'json') {
-        try {
-            return JSON.parse(value);
-        }
-        catch (error) {
-            console.error('parse json value error', error);
-            return undefined;
-        }
-    }
-    return value;
+function transpileAndLoadScript(script) {
+    return __awaiter(this, void 0, void 0, function* () {
+        const ts = yield import('typescript');
+        const compiled = ts.transpileModule(script, {
+            compilerOptions: { jsx: ts.JsxEmit.React, module: ts.ModuleKind.ESNext },
+        }).outputText;
+        const url = URL.createObjectURL(new Blob([compiled], { type: 'application/javascript' }));
+        return import(/* @vite-ignore */ url);
+    });
 }

package/lib/esm/components/index.js

@@ -1 +1,2 @@
 export { default as CustomComponentRenderer } from './CustomComponentRenderer';
+export * from './CustomComponentRenderer';

package/lib/esm/types/api.js

@@ -0,0 +1 @@
+export {};

package/lib/esm/types/core.js

@@ -0,0 +1 @@
+export {};

package/lib/esm/types/index.js

@@ -1 +1,4 @@
-export {};
+export * from './api';
+export * from './core';
+export * from './state';
+export * from './preload';

package/lib/esm/types/preload.js

@@ -0,0 +1 @@
+export const PreloadComponentsStateGlobalVariableName = '__PAGES_KIT_PRELOAD_CUSTOM_COMPONENTS_STATE__';

package/lib/esm/types/state.js

@@ -0,0 +1 @@
+export {};

package/lib/esm/utils/preload.js

@@ -0,0 +1,30 @@
+import { PreloadComponentsStateGlobalVariableName } from '../types';
+export function injectPreloadComponents({ config, components }) {
+    const injectState = {
+        config,
+        components: Object.fromEntries(components.map(({ script, component, locales }) => [
+            component.id,
+            {
+                preloadComponentModuleName: script.umd.moduleName,
+                component,
+                locales,
+            },
+        ])),
+    };
+    if (!components.length)
+        return undefined;
+    return {
+        html: `\
+${components
+            .map((i) => `\
+<script>
+${i.script.umd.script}
+</script>
+`)
+            .join('\n')}
+<script>
+var ${PreloadComponentsStateGlobalVariableName} = ${JSON.stringify(injectState)}
+</script>
+`,
+    };
+}

package/lib/esm/utils/property.js

@@ -0,0 +1,76 @@
+export function componentUMDName({ componentId }) {
+    return `PagesCustomComponent${componentId}`;
+}
+export function mergeComponent({ componentId, getComponent, locale, defaultLocale, properties: parameters, }) {
+    var _a, _b, _c, _d, _e, _f, _g;
+    let component = getComponent(componentId);
+    if (!component)
+        return null;
+    let script;
+    const properties = Object.fromEntries(Object.entries(parameters !== null && parameters !== void 0 ? parameters : {}).map(([id, { value }]) => {
+        var _a, _b;
+        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.type, value)];
+    }));
+    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,
+                parsePropertyValue(data.type, (_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),
+            ];
+        })));
+        if (((_b = component.renderer) === null || _b === void 0 ? void 0 : _b.type) === 'react-component') {
+            script = (_c = component.renderer) === null || _c === void 0 ? void 0 : _c.script;
+            break;
+        }
+        if (((_d = component.renderer) === null || _d === void 0 ? void 0 : _d.type) === 'web-component') {
+            script = (_e = component.renderer) === null || _e === void 0 ? void 0 : _e.script;
+            break;
+        }
+        if (((_f = component.renderer) === null || _f === void 0 ? void 0 : _f.type) === 'custom-component' && component.renderer.componentId) {
+            const { componentId } = component.renderer;
+            const next = getComponent(componentId);
+            const nextParameters = component.renderer.properties;
+            assignNullableFields(properties, Object.fromEntries(Object.entries((_g = next === null || next === void 0 ? void 0 : next.properties) !== null && _g !== void 0 ? _g : {}).map(([id, { data }]) => {
+                var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
+                const locales = (_a = nextParameters === null || nextParameters === void 0 ? void 0 : nextParameters[id]) === null || _a === void 0 ? void 0 : _a.locales;
+                return [
+                    data.key,
+                    parsePropertyValue(data.type, (_h = (_e = (_c = (_b = locales === null || locales === void 0 ? void 0 : locales[locale]) === null || _b === void 0 ? void 0 : _b.value) !== null && _c !== void 0 ? _c : (_d = locales === null || locales === void 0 ? void 0 : locales[defaultLocale]) === null || _d === void 0 ? void 0 : _d.value) !== null && _e !== void 0 ? _e : (_g = (_f = data.locales) === null || _f === void 0 ? void 0 : _f[locale]) === null || _g === void 0 ? void 0 : _g.defaultValue) !== null && _h !== void 0 ? _h : (_k = (_j = data.locales) === null || _j === void 0 ? void 0 : _j[defaultLocale]) === null || _k === void 0 ? void 0 : _k.defaultValue),
+                ];
+            })));
+            component = next;
+        }
+        else {
+            component = undefined;
+        }
+    }
+    if (!script)
+        return null;
+    return { script, properties };
+}
+export function parsePropertyValue(type, value) {
+    if (type === 'json') {
+        if (!value)
+            return undefined;
+        try {
+            return JSON.parse(value);
+        }
+        catch (error) {
+            console.error('parse json value error', error);
+            return undefined;
+        }
+    }
+    return value;
+}
+export function assignNullableFields(properties, newProperties) {
+    for (const [key, val] of Object.entries(newProperties)) {
+        if (properties[key] === undefined || properties[key] === null) {
+            properties[key] = val;
+        }
+    }
+    return properties;
+}

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

@@ -1,10 +1,2 @@
-import { CustomComponent, StateMode } from '../types';
-export declare function getComponents({ mode, name }?: {
-    mode?: StateMode;
-    name?: string;
-}): Promise<{
-    config: {
-        defaultLocale?: string;
-    };
-    components: CustomComponent[];
-}>;
+import { PreloadComponentQuery, PreloadComponentsResult } from '../types';
+export declare function preloadComponents({ mode, name, id }: PreloadComponentQuery): Promise<PreloadComponentsResult>;

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

@@ -1,10 +1,2 @@
-import { CustomComponent, StateMode } from '../types';
-export declare function getComponents({ mode, name }?: {
-    mode?: StateMode;
-    name?: string;
-}): Promise<{
-    config: {
-        defaultLocale?: string;
-    };
-    components: CustomComponent[];
-}>;
+import { PreloadComponentQuery, PreloadComponentsResult } from '../types';
+export declare function preloadComponents({ mode, name, id }: PreloadComponentQuery): Promise<PreloadComponentsResult>;

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

@@ -1,13 +1,11 @@
-import { CustomComponent } from '../../types';
-export default function CustomComponentRenderer({ id, componentId, components, properties, locale, defaultLocale, }: {
-    id: string;
+import { CustomComponent } from '../../types/core';
+export interface CustomComponentRendererProps {
     componentId: string;
+    locale?: string;
+    defaultLocale?: string;
     components?: CustomComponent[];
     properties?: {
-        [key: string]: {
-            value: any;
-        };
+        [key: string]: any;
     };
-    locale?: string;
-    defaultLocale?: string;
-}): import("react/jsx-runtime").JSX.Element;
+}
+export default function CustomComponentRenderer({ ...props }: CustomComponentRendererProps): import("react/jsx-runtime").JSX.Element;

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

@@ -1 +1,2 @@
 export { default as CustomComponentRenderer } from './CustomComponentRenderer';
+export * from './CustomComponentRenderer';

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

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

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

@@ -0,0 +1,42 @@
+export type CustomComponent = {
+    id: string;
+    createdAt: string;
+    updatedAt: string;
+    name?: string;
+    renderer?: {
+        type: 'web-component';
+        script?: string;
+    } | {
+        type: 'react-component';
+        script?: string;
+    } | {
+        type: 'custom-component';
+        componentId?: string;
+        properties?: {
+            [id: string]: {
+                locales?: {
+                    [locale: string]: {
+                        value?: any;
+                    };
+                };
+            };
+        };
+    };
+    properties?: {
+        [id: string]: {
+            index: number;
+            data: {
+                id: string;
+                key?: string;
+                type?: 'string' | 'number' | 'boolean' | 'json' | 'custom-component' | 'url';
+                multiline?: boolean;
+                locales?: {
+                    [locale: string]: {
+                        name?: string;
+                        defaultValue?: any;
+                    };
+                };
+            };
+        };
+    };
+};

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

@@ -1,43 +1,4 @@
-export type StateMode = 'draft' | 'staging' | 'production';
-export type CustomComponent = {
-    id: string;
-    createdAt: string;
-    updatedAt: string;
-    name?: string;
-    renderer?: {
-        type: 'web-component';
-        script?: string;
-        source?: {
-            script?: string;
-        };
-    } | {
-        type: 'custom-component';
-        componentId?: string;
-        properties?: {
-            [id: string]: {
-                locales?: {
-                    [locale: string]: {
-                        value?: any;
-                    };
-                };
-            };
-        };
-    };
-    properties?: {
-        [id: string]: {
-            index: number;
-            data: {
-                id: string;
-                key?: string;
-                type?: 'string' | 'number' | 'boolean' | 'json' | 'custom-component' | 'url';
-                multiline?: boolean;
-                locales?: {
-                    [locale: string]: {
-                        name?: string;
-                        defaultValue?: any;
-                    };
-                };
-            };
-        };
-    };
-};
+export * from './api';
+export * from './core';
+export * from './state';
+export * from './preload';

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

@@ -0,0 +1,21 @@
+import { CustomComponent } from './core';
+export declare const PreloadComponentsStateGlobalVariableName = "__PAGES_KIT_PRELOAD_CUSTOM_COMPONENTS_STATE__";
+export interface PreloadComponent {
+    preloadComponentModuleName: string;
+    component: CustomComponent;
+    locales?: {
+        [locale: string]: {
+            properties?: {
+                [key: string]: any;
+            };
+        };
+    };
+}
+export interface PreloadComponentsState {
+    config: {
+        defaultLocale?: string;
+    };
+    components: {
+        [id: string]: PreloadComponent;
+    };
+}

package/lib/types/types/state.d.ts

@@ -0,0 +1 @@
+export type StateMode = 'draft' | 'staging' | 'production';

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

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

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

@@ -0,0 +1,22 @@
+import { CustomComponent } from '../types/core';
+export declare function componentUMDName({ componentId }: {
+    componentId: string;
+}): string;
+export declare function mergeComponent({ componentId, getComponent, locale, defaultLocale, properties: parameters, }: {
+    componentId: string;
+    getComponent: (componentId: string) => CustomComponent | null | undefined;
+    locale?: string;
+    defaultLocale?: string;
+    properties?: {
+        [id: string]: {
+            value: any;
+        };
+    };
+}): {
+    script: string;
+    properties: {
+        [key: string]: any;
+    };
+} | null;
+export declare function parsePropertyValue(type: NonNullable<CustomComponent['properties']>[string]['data']['type'], value: any): any;
+export declare function assignNullableFields(properties: any, newProperties: any): any;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blocklet/pages-kit",
-  "version": "0.2.203",
+  "version": "0.2.205",
   "description": "Pages Kit components and utils",
   "publishConfig": {
     "access": "public"
@@ -31,6 +31,10 @@
     "./types": {
       "import": "./lib/esm/types/index.js",
       "require": "./lib/cjs/types/index.js"
+    },
+    "./utils/*": {
+      "import": "./lib/esm/utils/*.js",
+      "require": "./lib/cjs/utils/*.js"
     }
   },
   "typesVersions": {
@@ -50,6 +54,10 @@
       ],
       "types": [
         "./lib/types/types/index.d.ts"
+      ],
+      "utils/*": [
+        "./lib/types/utils/*.d.ts",
+        "./lib/types/utils/*/index.d.ts"
       ]
     }
   },
@@ -81,7 +89,11 @@
     "axios": "^1.6.5",
     "lodash": "^4.17.21",
     "nanoid": "^3.3.7",
-    "ufo": "^1.3.2"
+    "react-error-boundary": "^4.0.12",
+    "react-frame-component": "^5.2.6",
+    "typescript": "^5.3.3",
+    "ufo": "^1.3.2",
+    "zustand": "^4.4.7"
   },
   "peerDependencies": {
     "@arcblock/ux": "^2.8.17",
@@ -94,10 +106,7 @@
     "axios": "^1.6.5",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-error-boundary": "^4.0.12",
-    "react-frame-component": "^5.2.6",
-    "react-router-dom": "^6.16.0",
-    "zustand": "^4.4.7"
+    "react-router-dom": "^6.16.0"
   },
   "devDependencies": {
     "@arcblock/ux": "^2.9.13",
@@ -115,11 +124,7 @@
     "npm-run-all": "^4.1.5",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-error-boundary": "^4.0.12",
-    "react-frame-component": "^5.2.6",
     "react-router-dom": "^6.21.2",
-    "rimraf": "^5.0.5",
-    "typescript": "^5.3.3",
-    "zustand": "^4.4.7"
+    "rimraf": "^5.0.5"
   }
 }