@blocklet/pages-kit 0.2.222 → 0.2.224

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

@@ -1,12 +1,3 @@
-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)
@@ -21,169 +12,48 @@ var __rest = (this && this.__rest) || function (s, e) {
 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, useMemo, useRef, useState } from 'react';
 import { ErrorBoundary } from 'react-error-boundary';
-import { preloadComponents } from '../../api';
-import { PreloadComponentsStateGlobalVariableName } from '../../types/preload';
-import { RenderNestedComponent, mergeComponent } from '../../utils/property';
+import { RenderNestedComponent } from '../../utils/property';
+import { usePreloadComponent, useTranspileComponent } from './state';
+export * from './state';
 const MAXIMUM_RENDER_STACK_SIZE = 20;
 export default 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 (_jsx(ErrorBoundary, { fallbackRender: E, resetKeys: [Date.now()], children: _jsx(ComponentRenderer, Object.assign({}, props, { defaultLocale: defaultLocale, instanceId: (_b = props.instanceId) !== null && _b !== void 0 ? _b : props.componentId })) }));
+    var props = __rest(_a, []);
+    return (_jsx(ErrorBoundary, { fallbackRender: ErrorView, resetKeys: [Date.now()], children: _jsx(ComponentRenderer, Object.assign({}, props, { instanceId: (_b = props.instanceId) !== null && _b !== void 0 ? _b : props.componentId })) }));
+}
+function ErrorView({ error }) {
+    return (_jsx(Box, { children: _jsx(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 _jsx(Renderer, Object.assign({ renderCount: renderCount + 1 }, props));
+    if (!((_b = props.dev) === null || _b === void 0 ? void 0 : _b.components)) {
+        return _jsx(PreloadRenderer, Object.assign({ renderCount: renderCount + 1 }, props));
+    }
+    return _jsx(DebugRenderer, Object.assign({ renderCount: renderCount + 1 }, props));
 }
-function Renderer(props) {
-    const component = useComponent(props);
+function PreloadRenderer(props) {
+    const component = 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) === 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({ locale: props.locale }, componentProps));
-    }
-    if (AsyncComponent) {
-        return _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] = useState({});
-    useEffect(() => {
-        AsyncComponent.then((m) => setState({ Component: m.default, key: Date.now() })).catch((error) => setState({ error }));
-    }, [AsyncComponent]);
-    if (error) {
-        return _jsx(Alert, { severity: "error", children: error.stack });
-    }
-    if (Component) {
-        return _jsx(Component, Object.assign({}, props));
-    }
-    return null;
-}
-function E({ error }) {
-    return (_jsx(Box, { children: _jsx(Alert, { severity: "error", children: error.message }) }));
-}
-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];
+    return _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] = 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 = useRef({});
-    const preloadComponent = useMemo(() => getScriptComponent(componentId), [componentId, PRELOAD_COMPONENTS_STATE_KEY]);
-    const preloadState = 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 = 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 = useRef();
-    const [, update] = 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 = 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 = 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 _jsx(Renderer, Object.assign({}, props, { Component: component.Component, props: Object.assign(Object.assign({}, component.props), props.props) }));
 }
-export function transpileAndLoadScript(script) {
-    return __awaiter(this, void 0, void 0, function* () {
-        const [ts, { createBuiltinModuleTransformer }] = yield Promise.all([
-            import('typescript'),
-            import('../../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 import(/* @vite-ignore */ url);
-    });
+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) === RenderNestedComponent ? (_jsx(ComponentRenderer, { locale: locale, renderCount: renderCount, componentId: val.componentId, properties: val.properties, props: val.props, dev: dev })) : (val),
+        ];
+    }));
+    return _jsx(Component, Object.assign({ locale: locale }, componentProps));
 }

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

@@ -0,0 +1,175 @@
+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;
+};
+import { useDeferredValue, useEffect, useRef, useState } from 'react';
+import { create } from 'zustand';
+import { immer } from 'zustand/middleware/immer';
+import { preloadComponents } from '../../api';
+import { PreloadComponentScriptModule } from '../../types';
+import { PreloadComponentsStateGlobalVariableName } from '../../types/preload';
+import { mergeComponent } from '../../utils/property';
+const PRELOAD_COMPONENTS_STATE = window[PreloadComponentsStateGlobalVariableName];
+export const customComponentStates = create()(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 preloadComponents(Object.assign(Object.assign({}, input), { module: 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 !== 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 import(/* @vite-ignore */ url);
+            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 = {};
+export function usePreloadComponent({ instanceId, componentId, properties: parameters, locale: requestLocale, dev: { mode } = {}, }) {
+    var _a;
+    const previousRef = useRef();
+    const locale = 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 = customComponentStates((s) => s.state.config.defaultLocale);
+    const realLocale = locale || defaultLocale;
+    const result = 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] = customComponentStates.getState().loadComponents({
+            mode,
+            locale: realLocale,
+            instances: [{ id: instanceId, component: { id: componentId }, properties: parameters }],
+        }));
+        if (previousRef.current)
+            return previousRef.current;
+    }
+    return null;
+}
+export function useTranspileComponent({ componentId, locale, properties, dev: { defaultLocale, components } = {}, }) {
+    const [Component, setComponent] = useState();
+    const component = 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 = useDeferredValue(component === null || component === void 0 ? void 0 : component.script);
+    useEffect(() => {
+        if (script) {
+            transpileAndLoadScript(script).then((m) => {
+                setComponent(() => m.default);
+            });
+        }
+    }, [script]);
+    if (!component || !Component)
+        return null;
+    return {
+        Component,
+        props: component.properties,
+    };
+}
+function transpileAndLoadScript(script) {
+    return __awaiter(this, void 0, void 0, function* () {
+        const [ts, { createBuiltinModuleTransformer }] = yield Promise.all([
+            import('typescript'),
+            import('../../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 import(/* @vite-ignore */ url);
+    });
+}

package/lib/esm/types/api.js

@@ -1 +1,5 @@
-export {};
+export var PreloadComponentScriptModule;
+(function (PreloadComponentScriptModule) {
+    PreloadComponentScriptModule["UMD_FN"] = "umd_fn";
+    PreloadComponentScriptModule["ESM"] = "esm";
+})(PreloadComponentScriptModule || (PreloadComponentScriptModule = {}));

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

@@ -3,6 +3,7 @@ import * as builtinMuiLab from '../builtin/mui/lab';
 import * as builtinMuiMaterial from '../builtin/mui/material';
 import * as builtinReact from '../builtin/react';
 import * as builtinReactHookForm from '../builtin/react-hook-form';
+import * as reactWrapBalancer from '../builtin/react-wrap-balancer';
 import * as builtinUtils from '../builtin/utils';
 import * as builtinZustand from '../builtin/zustand';
 import * as builtinZustandMiddlewareImmer from '../builtin/zustand/middleware/immer';
@@ -19,6 +20,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[BuiltinModulesGlobalVariableName].modules[module];

package/lib/esm/utils/preload.js

@@ -1,29 +1,34 @@
-import { PreloadComponentsStateGlobalVariableName } from '../types';
-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));
+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 { PreloadComponentScriptModule, PreloadComponentsStateGlobalVariableName, } from '../types';
+export 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 !== PreloadComponentScriptModule.UMD_FN)
+                throw new Error(`Only support inject script with module ${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/types/api/call.d.ts

@@ -1,2 +1,2 @@
-import { PreloadComponentQuery, PreloadComponentsResult } from '../types';
-export declare function preloadComponents({ mode, name, id, locale, }: PreloadComponentQuery): Promise<PreloadComponentsResult>;
+import { PreloadComponentsInput, PreloadComponentsResult } from '../types';
+export declare function preloadComponents(input: PreloadComponentsInput): 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, locale, }: PreloadComponentQuery): Promise<PreloadComponentsResult>;
+import { PreloadComponentsInput, PreloadComponentsResult } from '../types';
+export declare function preloadComponents(input: PreloadComponentsInput): Promise<PreloadComponentsResult | null>;

package/lib/types/builtin/react-wrap-balancer.d.ts

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

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

@@ -1,13 +1,20 @@
 import '../../utils/inject-global-components';
 import { StateMode } from '../../types';
 import { CustomComponent } from '../../types/core';
-export interface CustomComponentRendererProps {
+export * from './state';
+export interface CustomComponentRendererDevProps {
     mode?: StateMode;
+    defaultLocale?: string;
+    components?: {
+        [id: string]: {
+            data: CustomComponent;
+        };
+    };
+}
+export interface CustomComponentRendererProps {
     instanceId?: string;
     componentId: string;
     locale?: string;
-    defaultLocale?: string;
-    components?: CustomComponent[];
     properties?: {
         [key: string]: {
             value: any;
@@ -16,6 +23,6 @@ export interface CustomComponentRendererProps {
     props?: {
         [key: string]: any;
     };
+    dev?: CustomComponentRendererDevProps;
 }
-export default function CustomComponentRenderer({ defaultLocale, ...props }: CustomComponentRendererProps): import("react/jsx-runtime").JSX.Element;
-export declare function transpileAndLoadScript(script: string): Promise<any>;
+export default function CustomComponentRenderer({ ...props }: CustomComponentRendererProps): import("react/jsx-runtime").JSX.Element;