@blocklet/pages-kit 0.2.222 → 0.2.224

package/lib/cjs/api/call.js

@@ -11,18 +11,13 @@ 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, locale, }) {
+function preloadComponents(input) {
     return __awaiter(this, void 0, void 0, function* () {
         return (0, component_1.call)({
             name: 'pages-kit',
-            method: 'GET',
+            method: 'POST',
             path: '/api/components/preload',
-            params: {
-                mode,
-                id: Array.isArray(id) ? id.join(',') : id,
-                name: Array.isArray(name) ? name.join(',') : name,
-                locale,
-            },
+            data: input,
         }).then((res) => res.data);
     });
 }

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

@@ -16,20 +16,11 @@ 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, locale, }) {
+function preloadComponents(input) {
     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/preload'), {
-            params: {
-                mode,
-                id: Array.isArray(id) ? id.join(',') : id,
-                name: Array.isArray(name) ? name.join(',') : name,
-                locale,
-            },
-        })
-            .then((res) => res.data);
+        return axios_1.default.post((0, ufo_1.joinURL)(prefix, '/api/components/preload'), input).then((res) => res.data);
     });
 }
 exports.preloadComponents = preloadComponents;

package/lib/cjs/builtin/react-wrap-balancer.js

@@ -0,0 +1,17 @@
+"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("react-wrap-balancer"), exports);

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

@@ -10,26 +10,8 @@ var __createBinding = (this && this.__createBinding) || (Object.create ? (functi
     if (k2 === undefined) k2 = k;
     o[k2] = m[k];
 }));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
+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 __rest = (this && this.__rest) || function (s, e) {
     var t = {};
@@ -43,175 +25,52 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.transpileAndLoadScript = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 require("../../utils/inject-global-components");
 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 state_1 = require("./state");
+__exportStar(require("./state"), exports);
 const MAXIMUM_RENDER_STACK_SIZE = 20;
 function CustomComponentRenderer(_a) {
     var _b;
-    var { defaultLocale = PRELOAD_COMPONENTS_STATE === null || PRELOAD_COMPONENTS_STATE === void 0 ? void 0 : PRELOAD_COMPONENTS_STATE.config.defaultLocale } = _a, props = __rest(_a, ["defaultLocale"]);
-    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, { defaultLocale: defaultLocale, instanceId: (_b = props.instanceId) !== null && _b !== void 0 ? _b : props.componentId })) }));
+    var props = __rest(_a, []);
+    return ((0, jsx_runtime_1.jsx)(react_error_boundary_1.ErrorBoundary, { fallbackRender: ErrorView, 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 ErrorView({ 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 ComponentRenderer(_a) {
+    var _b;
     var { renderCount = 0 } = _a, props = __rest(_a, ["renderCount"]);
     if (renderCount > MAXIMUM_RENDER_STACK_SIZE) {
         throw new Error('Maximum render stack size exceeded');
     }
-    return (0, jsx_runtime_1.jsx)(Renderer, Object.assign({ renderCount: renderCount + 1 }, props));
+    if (!((_b = props.dev) === null || _b === void 0 ? void 0 : _b.components)) {
+        return (0, jsx_runtime_1.jsx)(PreloadRenderer, Object.assign({ renderCount: renderCount + 1 }, props));
+    }
+    return (0, jsx_runtime_1.jsx)(DebugRenderer, Object.assign({ renderCount: renderCount + 1 }, props));
 }
-function Renderer(props) {
-    const component = useComponent(props);
+function PreloadRenderer(props) {
+    const component = (0, state_1.usePreloadComponent)(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]) => {
-        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({ locale: props.locale }, componentProps));
-    }
-    if (AsyncComponent) {
-        return (0, jsx_runtime_1.jsx)(AsyncComponentRenderer, Object.assign({ AsyncComponent: AsyncComponent, locale: props.locale }, componentProps));
-    }
-    return null;
-}
-function AsyncComponentRenderer(_a) {
-    var { AsyncComponent } = _a, props = __rest(_a, ["AsyncComponent"]);
-    const [{ Component, error }, setState] = (0, react_1.useState)({});
-    (0, react_1.useEffect)(() => {
-        AsyncComponent.then((m) => setState({ Component: m.default, key: Date.now() })).catch((error) => setState({ error }));
-    }, [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)(Component, Object.assign({}, props));
-    }
-    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 }) }));
-}
-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];
+    return (0, jsx_runtime_1.jsx)(Renderer, Object.assign({}, props, { Component: component.Component, props: Object.assign(Object.assign({}, component.props), props.props) }));
 }
-const LOAD_REMOTE_COMPONENT_TASKS = {};
-function loadRemoteComponent({ mode, instanceId, componentId, locale, }) {
-    var _a;
-    const key = [mode, 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, _b, _c, _d, _e, _f;
-        var _g, _h, _j, _k;
-        PRELOAD_COMPONENTS_STATE !== null && PRELOAD_COMPONENTS_STATE !== void 0 ? PRELOAD_COMPONENTS_STATE : (PRELOAD_COMPONENTS_STATE = { config: result.config, components: {}, props: {} });
-        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.components[i.component.id] = {
-                preloadComponentModuleName: i.script.umd.moduleName,
-                component: i.component,
-            };
-        }
-        (_a = (_g = PRELOAD_COMPONENTS_STATE.props)[instanceId]) !== null && _a !== void 0 ? _a : (_g[instanceId] = {});
-        (_b = (_h = PRELOAD_COMPONENTS_STATE.props[instanceId]).locales) !== null && _b !== void 0 ? _b : (_h.locales = {});
-        (_c = (_j = PRELOAD_COMPONENTS_STATE.props[instanceId].locales)[_k = locale]) !== null && _c !== void 0 ? _c : (_j[_k] = {});
-        PRELOAD_COMPONENTS_STATE.props[instanceId].locales[locale].props =
-            (_f = (_e = (_d = result.props[componentId]) === null || _d === void 0 ? void 0 : _d.locales) === null || _e === void 0 ? void 0 : _e[locale]) === null || _f === void 0 ? void 0 : _f.props;
-        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, }) {
-    var _a;
-    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, _b;
-        return (_b = (_a = PRELOAD_COMPONENTS_STATE === null || PRELOAD_COMPONENTS_STATE === void 0 ? void 0 : PRELOAD_COMPONENTS_STATE.props[instanceId]) === null || _a === void 0 ? void 0 : _a.locales) === null || _b === void 0 ? void 0 : _b[locale || defaultLocale];
-    }, [instanceId, locale, defaultLocale, PRELOAD_COMPONENTS_STATE_KEY]);
-    const preloadDefaultState = (0, react_1.useMemo)(() => {
-        var _a, _b;
-        return (_b = (_a = PRELOAD_COMPONENTS_STATE === null || PRELOAD_COMPONENTS_STATE === void 0 ? void 0 : PRELOAD_COMPONENTS_STATE.props[instanceId]) === null || _a === void 0 ? void 0 : _a.locales) === null || _b === void 0 ? void 0 : _b[defaultLocale];
-    }, [instanceId, defaultLocale, PRELOAD_COMPONENTS_STATE_KEY]);
-    const previousPreload = (0, react_1.useRef)();
-    const [, update] = (0, react_1.useState)(0);
-    if (!(components === null || components === void 0 ? void 0 : components.length) && !preloadState && preloadComponent) {
-        loadRemoteComponent({ mode, instanceId, componentId, locale: locale || defaultLocale }).then(() => {
-            update(PRELOAD_COMPONENTS_STATE_KEY);
-        });
-        if (previousPreload.current) {
-            return previousPreload.current;
-        }
-    }
-    if ((preloadState || preloadDefaultState) && preloadComponent) {
-        previousPreload.current = {
-            Component: preloadComponent.Component,
-            properties: (_a = preloadState === null || preloadState === void 0 ? void 0 : preloadState.props) !== null && _a !== void 0 ? _a : preloadDefaultState === null || preloadDefaultState === void 0 ? void 0 : preloadDefaultState.props,
-        };
-        return previousPreload.current;
-    }
-    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,
-    });
+function DebugRenderer(props) {
+    const component = (0, state_1.useTranspileComponent)(props);
     if (!component)
         return null;
-    if (scriptRef.current.script !== component.script) {
-        scriptRef.current.script = component.script;
-        scriptRef.current.module = transpileAndLoadScript(component.script);
-    }
-    return {
-        AsyncComponent: scriptRef.current.module,
-        properties: component.properties,
-    };
+    return (0, jsx_runtime_1.jsx)(Renderer, Object.assign({}, props, { Component: component.Component, props: Object.assign(Object.assign({}, component.props), props.props) }));
 }
-function transpileAndLoadScript(script) {
-    return __awaiter(this, void 0, void 0, function* () {
-        const [ts, { createBuiltinModuleTransformer }] = yield Promise.all([
-            Promise.resolve().then(() => __importStar(require('typescript'))),
-            Promise.resolve().then(() => __importStar(require('../../utils/typescript/builtin-module-transformer'))),
-        ]);
-        const compiled = ts.transpileModule(script, {
-            compilerOptions: { jsx: ts.JsxEmit.React, module: ts.ModuleKind.ESNext, target: ts.ScriptTarget.ES2016 },
-            transformers: {
-                before: [createBuiltinModuleTransformer(ts)],
-            },
-        }).outputText;
-        const url = URL.createObjectURL(new Blob([compiled], { type: 'application/javascript' }));
-        return Promise.resolve(`${url}`).then(s => __importStar(require(s)));
-    });
+function Renderer({ renderCount, Component, locale, props, dev, }) {
+    const componentProps = Object.fromEntries(Object.entries(props).map(([key, val]) => {
+        return [
+            key,
+            (val === null || val === void 0 ? void 0 : val.type) === property_1.RenderNestedComponent ? ((0, jsx_runtime_1.jsx)(ComponentRenderer, { locale: locale, renderCount: renderCount, componentId: val.componentId, properties: val.properties, props: val.props, dev: dev })) : (val),
+        ];
+    }));
+    return (0, jsx_runtime_1.jsx)(Component, Object.assign({ locale: locale }, componentProps));
 }
-exports.transpileAndLoadScript = transpileAndLoadScript;

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

@@ -0,0 +1,203 @@
+"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 __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        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;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useTranspileComponent = exports.usePreloadComponent = exports.customComponentStates = void 0;
+const react_1 = require("react");
+const zustand_1 = require("zustand");
+const immer_1 = require("zustand/middleware/immer");
+const api_1 = require("../../api");
+const types_1 = require("../../types");
+const preload_1 = require("../../types/preload");
+const property_1 = require("../../utils/property");
+const PRELOAD_COMPONENTS_STATE = window[preload_1.PreloadComponentsStateGlobalVariableName];
+exports.customComponentStates = (0, zustand_1.create)()((0, immer_1.immer)((set, get) => ({
+    state: {
+        config: Object.assign({}, PRELOAD_COMPONENTS_STATE === null || PRELOAD_COMPONENTS_STATE === void 0 ? void 0 : PRELOAD_COMPONENTS_STATE.config),
+        components: Object.fromEntries(Object.entries(Object.assign({}, PRELOAD_COMPONENTS_STATE === null || PRELOAD_COMPONENTS_STATE === void 0 ? void 0 : PRELOAD_COMPONENTS_STATE.components)).map(([componentId, preload]) => {
+            let Component;
+            if (preload.componentModuleGlobalVariable) {
+                const m = window[preload.componentModuleGlobalVariable];
+                if (typeof m === 'function')
+                    Component = m();
+            }
+            return [componentId, Object.assign(Object.assign({}, preload), { Component })];
+        })),
+        instances: Object.assign({}, PRELOAD_COMPONENTS_STATE === null || PRELOAD_COMPONENTS_STATE === void 0 ? void 0 : PRELOAD_COMPONENTS_STATE.instances),
+    },
+    getComponent({ instanceId, componentId, locale }) {
+        var _a, _b;
+        const { config: { supportedLocales }, components, instances, } = get().state;
+        if (!(supportedLocales === null || supportedLocales === void 0 ? void 0 : supportedLocales.some((i) => i.locale === locale)))
+            return null;
+        const c = components[componentId];
+        if (!c)
+            return null;
+        const { component, Component } = c;
+        if (!Component)
+            return null;
+        if (!instanceId) {
+            return { component, Component };
+        }
+        const instance = instances[instanceId];
+        if (!instance)
+            return null;
+        const props = (_b = (_a = instance.locales) === null || _a === void 0 ? void 0 : _a[locale]) === null || _b === void 0 ? void 0 : _b.props;
+        if (!props)
+            return null;
+        return { component, Component, props };
+    },
+    loadComponents(input) {
+        return __awaiter(this, void 0, void 0, function* () {
+            const result = yield loadComponents(input);
+            if (result) {
+                set((s) => {
+                    s.state.config = result.config;
+                    Object.assign(s.state.components, result.components);
+                    Object.entries(result.instances).forEach(([instanceId, instance]) => {
+                        var _a, _b;
+                        var _c, _d;
+                        (_a = (_c = s.state.instances)[instanceId]) !== null && _a !== void 0 ? _a : (_c[instanceId] = { componentId: instance.componentId });
+                        (_b = (_d = s.state.instances[instanceId]).locales) !== null && _b !== void 0 ? _b : (_d.locales = {});
+                        Object.assign(s.state.instances[instanceId].locales, instance.locales);
+                    });
+                });
+            }
+        });
+    },
+})));
+function loadComponents(input) {
+    return __awaiter(this, void 0, void 0, function* () {
+        const result = yield (0, api_1.preloadComponents)(Object.assign(Object.assign({}, input), { module: types_1.PreloadComponentScriptModule.ESM }));
+        if (!result)
+            return null;
+        const components = Object.fromEntries(yield Promise.all(Object.values(result.components).map((item) => __awaiter(this, void 0, void 0, function* () {
+            if (item.script.module !== types_1.PreloadComponentScriptModule.ESM) {
+                throw new Error('received non esm component script');
+            }
+            const url = URL.createObjectURL(new Blob([item.script.script], { type: 'application/javascript' }));
+            const m = yield Promise.resolve(`${url}`).then(s => __importStar(require(s)));
+            if (typeof (m === null || m === void 0 ? void 0 : m.default) !== 'function') {
+                throw new Error(`Invalid custom component module: ${typeof (m === null || m === void 0 ? void 0 : m.default)}`);
+            }
+            return [
+                item.component.id,
+                {
+                    component: item.component,
+                    Component: m.default,
+                },
+            ];
+        }))));
+        return Object.assign(Object.assign({}, result), { components, instances: Object.fromEntries(result.instances.map((_a) => {
+                var { id } = _a, instance = __rest(_a, ["id"]);
+                return [id, instance];
+            })) });
+    });
+}
+const COMPONENT_LOADER_MAP = {};
+function usePreloadComponent({ instanceId, componentId, properties: parameters, locale: requestLocale, dev: { mode } = {}, }) {
+    var _a;
+    const previousRef = (0, react_1.useRef)();
+    const locale = (0, exports.customComponentStates)((s) => { var _a; return ((_a = s.state.config.supportedLocales) === null || _a === void 0 ? void 0 : _a.some((i) => i.locale === requestLocale)) ? requestLocale : undefined; });
+    const defaultLocale = (0, exports.customComponentStates)((s) => s.state.config.defaultLocale);
+    const realLocale = locale || defaultLocale;
+    const result = (0, exports.customComponentStates)((s) => realLocale ? s.getComponent({ instanceId, componentId, locale: realLocale }) : undefined);
+    if (result) {
+        previousRef.current = result;
+        return result;
+    }
+    if (realLocale && instanceId) {
+        const key = [instanceId, realLocale].join('-');
+        (_a = COMPONENT_LOADER_MAP[key]) !== null && _a !== void 0 ? _a : (COMPONENT_LOADER_MAP[key] = exports.customComponentStates.getState().loadComponents({
+            mode,
+            locale: realLocale,
+            instances: [{ id: instanceId, component: { id: componentId }, properties: parameters }],
+        }));
+        if (previousRef.current)
+            return previousRef.current;
+    }
+    return null;
+}
+exports.usePreloadComponent = usePreloadComponent;
+function useTranspileComponent({ componentId, locale, properties, dev: { defaultLocale, components } = {}, }) {
+    const [Component, setComponent] = (0, react_1.useState)();
+    const component = (0, property_1.mergeComponent)({
+        componentId,
+        getComponent: (componentId) => { var _a; return (_a = components === null || components === void 0 ? void 0 : components[componentId]) === null || _a === void 0 ? void 0 : _a.data; },
+        locale,
+        defaultLocale,
+        properties,
+    });
+    const script = (0, react_1.useDeferredValue)(component === null || component === void 0 ? void 0 : component.script);
+    (0, react_1.useEffect)(() => {
+        if (script) {
+            transpileAndLoadScript(script).then((m) => {
+                setComponent(() => m.default);
+            });
+        }
+    }, [script]);
+    if (!component || !Component)
+        return null;
+    return {
+        Component,
+        props: component.properties,
+    };
+}
+exports.useTranspileComponent = useTranspileComponent;
+function transpileAndLoadScript(script) {
+    return __awaiter(this, void 0, void 0, function* () {
+        const [ts, { createBuiltinModuleTransformer }] = yield Promise.all([
+            Promise.resolve().then(() => __importStar(require('typescript'))),
+            Promise.resolve().then(() => __importStar(require('../../utils/typescript/builtin-module-transformer'))),
+        ]);
+        const compiled = ts.transpileModule(script, {
+            compilerOptions: { jsx: ts.JsxEmit.React, module: ts.ModuleKind.ESNext, target: ts.ScriptTarget.ES2016 },
+            transformers: {
+                before: [createBuiltinModuleTransformer(ts)],
+            },
+        }).outputText;
+        const url = URL.createObjectURL(new Blob([compiled], { type: 'application/javascript' }));
+        return Promise.resolve(`${url}`).then(s => __importStar(require(s)));
+    });
+}

package/lib/cjs/types/api.js

@@ -1,2 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.PreloadComponentScriptModule = void 0;
+var PreloadComponentScriptModule;
+(function (PreloadComponentScriptModule) {
+    PreloadComponentScriptModule["UMD_FN"] = "umd_fn";
+    PreloadComponentScriptModule["ESM"] = "esm";
+})(PreloadComponentScriptModule || (exports.PreloadComponentScriptModule = PreloadComponentScriptModule = {}));

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

@@ -28,6 +28,7 @@ const builtinMuiLab = __importStar(require("../builtin/mui/lab"));
 const builtinMuiMaterial = __importStar(require("../builtin/mui/material"));
 const builtinReact = __importStar(require("../builtin/react"));
 const builtinReactHookForm = __importStar(require("../builtin/react-hook-form"));
+const reactWrapBalancer = __importStar(require("../builtin/react-wrap-balancer"));
 const builtinUtils = __importStar(require("../builtin/utils"));
 const builtinZustand = __importStar(require("../builtin/zustand"));
 const builtinZustandMiddlewareImmer = __importStar(require("../builtin/zustand/middleware/immer"));
@@ -44,6 +45,7 @@ function injectGlobalComponents() {
             '@blocklet/pages-kit/builtin/iconify/react': builtinIconifyReact,
             '@blocklet/pages-kit/builtin/zustand': builtinZustand,
             '@blocklet/pages-kit/builtin/zustand/middleware/immer': builtinZustandMiddlewareImmer,
+            '@blocklet/pages-kit/builtin/react-wrap-balancer': reactWrapBalancer,
         },
         require(module) {
             return win[builtin_1.BuiltinModulesGlobalVariableName].modules[module];

package/lib/cjs/utils/preload.js

@@ -1,32 +1,37 @@
 "use strict";
+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 });
 exports.injectPreloadComponents = void 0;
 const types_1 = require("../types");
-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));
+function injectPreloadComponents(data) {
     const injectState = {
         config: data.config,
-        components: Object.fromEntries(Object.entries(data.components).map(([componentId, { script, component }]) => [
-            componentId,
-            { preloadComponentModuleName: script.umd.moduleName, component },
-        ])),
-        props: data.props,
+        components: Object.fromEntries(Object.entries(data.components).map(([componentId, { script, component }]) => {
+            if (script.module !== types_1.PreloadComponentScriptModule.UMD_FN)
+                throw new Error(`Only support inject script with module ${types_1.PreloadComponentScriptModule.UMD_FN}`);
+            return [componentId, { componentModuleGlobalVariable: script.moduleName, component }];
+        })),
+        instances: Object.fromEntries(data.instances.map((_a) => {
+            var { id } = _a, instance = __rest(_a, ["id"]);
+            return [id, instance];
+        })),
     };
     return {
         html: `\
 ${Object.values(data.components)
-            .map(({ script }) => `\
+            .map(({ script: { script } }) => `\
 <script>
-${script.umd.script}
+${script}
 </script>
 `)
             .join('\n')}

package/lib/esm/api/call.js

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

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

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

package/lib/esm/builtin/react-wrap-balancer.js

@@ -0,0 +1 @@
+export * from 'react-wrap-balancer';