@blocklet/pages-kit 0.2.214 → 0.2.216

package/lib/cjs/api/call.js

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

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

@@ -16,7 +16,7 @@ exports.preloadComponents = void 0;
 const axios_1 = __importDefault(require("axios"));
 const ufo_1 = require("ufo");
 const PAGES_KIT_DID = 'z8iZiDFg3vkkrPwsiba1TLXy3H9XHzFERsP8o';
-function preloadComponents({ mode, name, id }) {
+function preloadComponents({ mode, name, id, locale, }) {
     var _a, _b;
     return __awaiter(this, void 0, void 0, function* () {
         const prefix = ((_b = (_a = window.blocklet) === null || _a === void 0 ? void 0 : _a.componentMountPoints.find((i) => i.did === PAGES_KIT_DID)) === null || _b === void 0 ? void 0 : _b.mountPoint) || '/';
@@ -26,6 +26,7 @@ function preloadComponents({ mode, name, id }) {
                 mode,
                 id: Array.isArray(id) ? id.join(',') : id,
                 name: Array.isArray(name) ? name.join(',') : name,
+                locale,
             },
         })
             .then((res) => res.data);

package/lib/cjs/builtin/iconify/react.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Icon = void 0;
+var react_1 = require("@iconify/react");
+Object.defineProperty(exports, "Icon", { enumerable: true, get: function () { return react_1.Icon; } });

package/lib/cjs/builtin/mui/lab.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.LoadingButton = void 0;
+var lab_1 = require("@mui/lab");
+Object.defineProperty(exports, "LoadingButton", { enumerable: true, get: function () { return lab_1.LoadingButton; } });

package/lib/cjs/builtin/mui/material.js

@@ -0,0 +1,29 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TextField = exports.Switch = exports.Stack = exports.Popper = exports.Paper = exports.DialogTitle = exports.DialogContent = exports.DialogActions = exports.Dialog = exports.ClickAwayListener = exports.Button = exports.Box = exports.Autocomplete = void 0;
+var material_1 = require("@mui/material");
+Object.defineProperty(exports, "Autocomplete", { enumerable: true, get: function () { return material_1.Autocomplete; } });
+var material_2 = require("@mui/material");
+Object.defineProperty(exports, "Box", { enumerable: true, get: function () { return material_2.Box; } });
+var material_3 = require("@mui/material");
+Object.defineProperty(exports, "Button", { enumerable: true, get: function () { return material_3.Button; } });
+var material_4 = require("@mui/material");
+Object.defineProperty(exports, "ClickAwayListener", { enumerable: true, get: function () { return material_4.ClickAwayListener; } });
+var material_5 = require("@mui/material");
+Object.defineProperty(exports, "Dialog", { enumerable: true, get: function () { return material_5.Dialog; } });
+var material_6 = require("@mui/material");
+Object.defineProperty(exports, "DialogActions", { enumerable: true, get: function () { return material_6.DialogActions; } });
+var material_7 = require("@mui/material");
+Object.defineProperty(exports, "DialogContent", { enumerable: true, get: function () { return material_7.DialogContent; } });
+var material_8 = require("@mui/material");
+Object.defineProperty(exports, "DialogTitle", { enumerable: true, get: function () { return material_8.DialogTitle; } });
+var material_9 = require("@mui/material");
+Object.defineProperty(exports, "Paper", { enumerable: true, get: function () { return material_9.Paper; } });
+var material_10 = require("@mui/material");
+Object.defineProperty(exports, "Popper", { enumerable: true, get: function () { return material_10.Popper; } });
+var material_11 = require("@mui/material");
+Object.defineProperty(exports, "Stack", { enumerable: true, get: function () { return material_11.Stack; } });
+var material_12 = require("@mui/material");
+Object.defineProperty(exports, "Switch", { enumerable: true, get: function () { return material_12.Switch; } });
+var material_13 = require("@mui/material");
+Object.defineProperty(exports, "TextField", { enumerable: true, get: function () { return material_13.TextField; } });

package/lib/cjs/builtin/react-hook-form.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-hook-form"), exports);

package/lib/cjs/builtin/react.js

@@ -0,0 +1,37 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.version = exports.useTransition = exports.useSyncExternalStore = exports.useState = exports.useRef = exports.useReducer = exports.useMemo = exports.useLayoutEffect = exports.useInsertionEffect = exports.useImperativeHandle = exports.useId = exports.useEffect = exports.useDeferredValue = exports.useDebugValue = exports.useContext = exports.useCallback = exports.startTransition = exports.memo = exports.lazy = exports.isValidElement = exports.forwardRef = exports.createRef = exports.createFactory = exports.createElement = exports.createContext = exports.cloneElement = exports.Suspense = exports.StrictMode = exports.PureComponent = exports.Profiler = exports.Fragment = exports.Component = exports.Children = void 0;
+var react_1 = require("react");
+Object.defineProperty(exports, "Children", { enumerable: true, get: function () { return react_1.Children; } });
+Object.defineProperty(exports, "Component", { enumerable: true, get: function () { return react_1.Component; } });
+Object.defineProperty(exports, "Fragment", { enumerable: true, get: function () { return react_1.Fragment; } });
+Object.defineProperty(exports, "Profiler", { enumerable: true, get: function () { return react_1.Profiler; } });
+Object.defineProperty(exports, "PureComponent", { enumerable: true, get: function () { return react_1.PureComponent; } });
+Object.defineProperty(exports, "StrictMode", { enumerable: true, get: function () { return react_1.StrictMode; } });
+Object.defineProperty(exports, "Suspense", { enumerable: true, get: function () { return react_1.Suspense; } });
+Object.defineProperty(exports, "cloneElement", { enumerable: true, get: function () { return react_1.cloneElement; } });
+Object.defineProperty(exports, "createContext", { enumerable: true, get: function () { return react_1.createContext; } });
+Object.defineProperty(exports, "createElement", { enumerable: true, get: function () { return react_1.createElement; } });
+Object.defineProperty(exports, "createFactory", { enumerable: true, get: function () { return react_1.createFactory; } });
+Object.defineProperty(exports, "createRef", { enumerable: true, get: function () { return react_1.createRef; } });
+Object.defineProperty(exports, "forwardRef", { enumerable: true, get: function () { return react_1.forwardRef; } });
+Object.defineProperty(exports, "isValidElement", { enumerable: true, get: function () { return react_1.isValidElement; } });
+Object.defineProperty(exports, "lazy", { enumerable: true, get: function () { return react_1.lazy; } });
+Object.defineProperty(exports, "memo", { enumerable: true, get: function () { return react_1.memo; } });
+Object.defineProperty(exports, "startTransition", { enumerable: true, get: function () { return react_1.startTransition; } });
+Object.defineProperty(exports, "useCallback", { enumerable: true, get: function () { return react_1.useCallback; } });
+Object.defineProperty(exports, "useContext", { enumerable: true, get: function () { return react_1.useContext; } });
+Object.defineProperty(exports, "useDebugValue", { enumerable: true, get: function () { return react_1.useDebugValue; } });
+Object.defineProperty(exports, "useDeferredValue", { enumerable: true, get: function () { return react_1.useDeferredValue; } });
+Object.defineProperty(exports, "useEffect", { enumerable: true, get: function () { return react_1.useEffect; } });
+Object.defineProperty(exports, "useId", { enumerable: true, get: function () { return react_1.useId; } });
+Object.defineProperty(exports, "useImperativeHandle", { enumerable: true, get: function () { return react_1.useImperativeHandle; } });
+Object.defineProperty(exports, "useInsertionEffect", { enumerable: true, get: function () { return react_1.useInsertionEffect; } });
+Object.defineProperty(exports, "useLayoutEffect", { enumerable: true, get: function () { return react_1.useLayoutEffect; } });
+Object.defineProperty(exports, "useMemo", { enumerable: true, get: function () { return react_1.useMemo; } });
+Object.defineProperty(exports, "useReducer", { enumerable: true, get: function () { return react_1.useReducer; } });
+Object.defineProperty(exports, "useRef", { enumerable: true, get: function () { return react_1.useRef; } });
+Object.defineProperty(exports, "useState", { enumerable: true, get: function () { return react_1.useState; } });
+Object.defineProperty(exports, "useSyncExternalStore", { enumerable: true, get: function () { return react_1.useSyncExternalStore; } });
+Object.defineProperty(exports, "useTransition", { enumerable: true, get: function () { return react_1.useTransition; } });
+Object.defineProperty(exports, "version", { enumerable: true, get: function () { return react_1.version; } });

package/lib/cjs/builtin/utils.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.withQuery = exports.joinURL = void 0;
+var ufo_1 = require("ufo");
+Object.defineProperty(exports, "joinURL", { enumerable: true, get: function () { return ufo_1.joinURL; } });
+Object.defineProperty(exports, "withQuery", { enumerable: true, get: function () { return ufo_1.withQuery; } });

package/lib/cjs/builtin/zustand/middleware/immer.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("zustand/middleware/immer"), exports);

package/lib/cjs/builtin/zustand.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("zustand"), exports);

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

@@ -43,51 +43,60 @@ 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");
-const react_1 = require("@iconify/react");
+require("../../utils/inject-global-components");
 const material_1 = require("@mui/material");
-const react_2 = __importStar(require("react"));
+const lodash_1 = require("lodash");
+const react_1 = require("react");
 const react_error_boundary_1 = require("react-error-boundary");
-const ufo_1 = require("ufo");
 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_2.default;
-win.Box = material_1.Box;
-win.Stack = material_1.Stack;
-win.Button = material_1.Button;
-win.IconifyIcon = react_1.Icon;
+const builtin_module_transformer_1 = require("../../utils/typescript/builtin-module-transformer");
+const MAXIMUM_RENDER_STACK_SIZE = 50;
 function CustomComponentRenderer(_a) {
+    var _b;
     var props = __rest(_a, []);
-    return ((0, jsx_runtime_1.jsx)(react_error_boundary_1.ErrorBoundary, { fallbackRender: E, children: (0, jsx_runtime_1.jsx)(Renderer, Object.assign({}, props)) }));
+    return ((0, jsx_runtime_1.jsx)(react_error_boundary_1.ErrorBoundary, { fallbackRender: E, resetKeys: [Date.now()], children: (0, jsx_runtime_1.jsx)(ComponentRenderer, Object.assign({}, props, { instanceId: (_b = props.instanceId) !== null && _b !== void 0 ? _b : props.componentId })) }));
 }
 exports.default = CustomComponentRenderer;
+function ComponentRenderer(_a) {
+    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));
+}
 function Renderer(props) {
-    const component = loadComponent(props);
+    const component = useComponent(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({}, properties));
+        return (0, jsx_runtime_1.jsx)(Component, Object.assign({}, componentProps));
     }
     if (AsyncComponent) {
-        return (0, jsx_runtime_1.jsx)(AsyncComponentRenderer, { AsyncComponent: AsyncComponent, properties: properties });
+        return (0, jsx_runtime_1.jsx)(AsyncComponentRenderer, Object.assign({ AsyncComponent: AsyncComponent }, componentProps));
     }
     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() }));
+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)(react_error_boundary_1.ErrorBoundary, { fallbackRender: E, resetKeys: [key], children: (0, jsx_runtime_1.jsx)(Component, Object.assign({}, properties)) }));
+        return (0, jsx_runtime_1.jsx)(Component, Object.assign({}, props));
     }
     return null;
 }
@@ -95,20 +104,26 @@ function E({ error }) {
     return ((0, jsx_runtime_1.jsx)(material_1.Box, { children: (0, jsx_runtime_1.jsx)(material_1.Alert, { severity: "error", children: error.message }) }));
 }
 const PRELOAD_COMPONENTS_STATE = window[preload_1.PreloadComponentsStateGlobalVariableName];
-function 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)];
-        }));
+function useComponent({ instanceId, componentId, components, locale, defaultLocale, properties: parameters, props, }) {
+    const scriptRef = (0, react_1.useRef)({});
+    const preloadComponent = (0, react_1.useMemo)(() => {
+        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') {
+                return { component: preload.component, Component: mod() };
+            }
+        }
+        return null;
+    }, [componentId]);
+    const preloadState = (0, react_1.useMemo)(() => {
+        var _a;
+        return (_a = PRELOAD_COMPONENTS_STATE === null || PRELOAD_COMPONENTS_STATE === void 0 ? void 0 : PRELOAD_COMPONENTS_STATE.props[instanceId]) === null || _a === void 0 ? void 0 : _a[locale];
+    }, [instanceId, locale]);
+    if ((props || preloadState) && preloadComponent) {
         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),
+            Component: preloadComponent.Component,
+            properties: preloadState,
         };
     }
     const component = (0, property_1.mergeComponent)({
@@ -120,8 +135,12 @@ function loadComponent({ componentId, components, locale, defaultLocale, propert
     });
     if (!component)
         return null;
+    if (scriptRef.current.script !== component.script) {
+        scriptRef.current.script = component.script;
+        scriptRef.current.module = transpileAndLoadScript(component.script);
+    }
     return {
-        AsyncComponent: transpileAndLoadScript(component.script),
+        AsyncComponent: scriptRef.current.module,
         properties: component.properties,
     };
 }
@@ -129,9 +148,13 @@ 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 },
+            compilerOptions: { jsx: ts.JsxEmit.React, module: ts.ModuleKind.ESNext, target: ts.ScriptTarget.ES2016 },
+            transformers: {
+                before: [(0, builtin_module_transformer_1.createBuiltinModuleTransformer)(ts)],
+            },
         }).outputText;
         const url = URL.createObjectURL(new Blob([compiled], { type: 'application/javascript' }));
         return Promise.resolve(`${url}`).then(s => __importStar(require(s)));
     });
 }
+exports.transpileAndLoadScript = transpileAndLoadScript;

package/lib/cjs/types/builtin.js

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

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

@@ -0,0 +1,53 @@
+"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;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const builtinIconifyReact = __importStar(require("../builtin/iconify/react"));
+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 builtinUtils = __importStar(require("../builtin/utils"));
+const builtinZustand = __importStar(require("../builtin/zustand"));
+const builtinZustandMiddlewareImmer = __importStar(require("../builtin/zustand/middleware/immer"));
+const builtin_1 = require("../types/builtin");
+function injectGlobalComponents() {
+    const win = window;
+    win[builtin_1.BuiltinModulesGlobalVariableName] = {
+        modules: {
+            '@blocklet/pages-kit/builtin/utils': builtinUtils,
+            '@blocklet/pages-kit/builtin/react': builtinReact,
+            '@blocklet/pages-kit/builtin/mui/material': builtinMuiMaterial,
+            '@blocklet/pages-kit/builtin/mui/lab': builtinMuiLab,
+            '@blocklet/pages-kit/builtin/react-hook-form': builtinReactHookForm,
+            '@blocklet/pages-kit/builtin/iconify/react': builtinIconifyReact,
+            '@blocklet/pages-kit/builtin/zustand': builtinZustand,
+            '@blocklet/pages-kit/builtin/zustand/middleware/immer': builtinZustandMiddlewareImmer,
+        },
+        require(module) {
+            return win[builtin_1.BuiltinModulesGlobalVariableName].modules[module];
+        },
+    };
+}
+injectGlobalComponents();

package/lib/cjs/utils/preload.js

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

package/lib/cjs/utils/property.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.assignNullableFields = exports.parsePropertyValue = exports.mergeComponent = exports.componentUMDName = void 0;
+exports.assignNullableFields = exports.parsePropertyValue = exports.RenderNestedComponent = exports.mergeComponent = exports.componentUMDName = void 0;
 function componentUMDName({ componentId }) {
     return `PagesCustomComponent${componentId}`;
 }
@@ -16,14 +16,14 @@ function mergeComponent({ componentId, getComponent, locale, defaultLocale, prop
         const property = (_b = (_a = component === null || component === void 0 ? void 0 : component.properties) === null || _a === void 0 ? void 0 : _a[id]) === null || _b === void 0 ? void 0 : _b.data;
         if (!property)
             return [];
-        return [property.key, parsePropertyValue(property.type, value)];
+        return [property.key, parsePropertyValue(property, value, { locale, defaultLocale })];
     }));
     while (component) {
         assignNullableFields(properties, Object.fromEntries(Object.values((_a = component.properties) !== null && _a !== void 0 ? _a : {}).map(({ data }) => {
             var _a, _b, _c, _d, _e;
             return [
                 data.key,
-                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),
+                parsePropertyValue(data, (_c = (_b = (_a = data.locales) === null || _a === void 0 ? void 0 : _a[locale]) === null || _b === void 0 ? void 0 : _b.defaultValue) !== null && _c !== void 0 ? _c : (_e = (_d = data.locales) === null || _d === void 0 ? void 0 : _d[defaultLocale]) === null || _e === void 0 ? void 0 : _e.defaultValue, { locale, defaultLocale }),
             ];
         })));
         if (((_b = component.renderer) === null || _b === void 0 ? void 0 : _b.type) === 'react-component') {
@@ -34,7 +34,7 @@ function mergeComponent({ componentId, getComponent, locale, defaultLocale, prop
             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) {
+        if (((_f = component.renderer) === null || _f === void 0 ? void 0 : _f.type) === 'component' && component.renderer.componentId) {
             const { componentId } = component.renderer;
             const next = getComponent(componentId);
             const nextParameters = component.renderer.properties;
@@ -43,7 +43,7 @@ function mergeComponent({ componentId, getComponent, locale, defaultLocale, prop
                 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),
+                    parsePropertyValue(data, (_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, { locale, defaultLocale }),
                 ];
             })));
             component = next;
@@ -57,8 +57,10 @@ function mergeComponent({ componentId, getComponent, locale, defaultLocale, prop
     return { script, properties };
 }
 exports.mergeComponent = mergeComponent;
-function parsePropertyValue(type, value) {
-    if (type === 'json') {
+exports.RenderNestedComponent = '__RENDER_NESTED_COMPONENT__';
+function parsePropertyValue(property, value, { locale, defaultLocale }) {
+    var _a, _b, _c, _d, _e;
+    if (property.type === 'json') {
         if (!value)
             return undefined;
         try {
@@ -69,6 +71,17 @@ function parsePropertyValue(type, value) {
             return undefined;
         }
     }
+    if (property.type === 'component') {
+        const componentId = (value === null || value === void 0 ? void 0 : value.componentId) || property.componentId;
+        if (typeof componentId !== 'string')
+            return undefined;
+        const { locales } = property;
+        return {
+            type: exports.RenderNestedComponent,
+            componentId,
+            properties: Object.assign(Object.assign({}, ((_c = (_b = (_a = locales === null || locales === void 0 ? void 0 : locales[locale]) === null || _a === void 0 ? void 0 : _a.defaultValue) === null || _b === void 0 ? void 0 : _b.properties) !== null && _c !== void 0 ? _c : (_e = (_d = locales === null || locales === void 0 ? void 0 : locales[defaultLocale]) === null || _d === void 0 ? void 0 : _d.defaultValue) === null || _e === void 0 ? void 0 : _e.properties)), value === null || value === void 0 ? void 0 : value.properties),
+        };
+    }
     return value;
 }
 exports.parsePropertyValue = parsePropertyValue;

package/lib/cjs/utils/typescript/builtin-module-transformer.js

@@ -0,0 +1,55 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.createBuiltinModuleTransformer = void 0;
+const builtin_1 = require("../../types/builtin");
+const createBuiltinModuleTransformer = (ts) => (context) => (file) => {
+    const { factory } = context;
+    const builtins = [];
+    const statements = file.statements.filter((s) => {
+        var _a, _b, _c;
+        if (ts.isImportDeclaration(s) &&
+            ts.isStringLiteral(s.moduleSpecifier) &&
+            s.moduleSpecifier.text.startsWith('@blocklet/pages-kit/builtin/')) {
+            const builtin = {
+                moduleName: s.moduleSpecifier.text,
+                name: (_b = (_a = s.importClause) === null || _a === void 0 ? void 0 : _a.name) === null || _b === void 0 ? void 0 : _b.text,
+                members: [],
+            };
+            const namedBindings = (_c = s.importClause) === null || _c === void 0 ? void 0 : _c.namedBindings;
+            if (namedBindings) {
+                if (ts.isNamespaceImport(namedBindings)) {
+                    builtin.name = namedBindings.name.text;
+                }
+                namedBindings.forEachChild((node) => {
+                    var _a;
+                    if (ts.isImportSpecifier(node)) {
+                        builtin.members.push({ name: node.name.text, propertyName: (_a = node.propertyName) === null || _a === void 0 ? void 0 : _a.text });
+                    }
+                });
+            }
+            if (builtin.name || builtin.members.length) {
+                builtins.push(builtin);
+            }
+            return false;
+        }
+        return true;
+    });
+    statements.unshift(...builtins.flatMap((builtin) => {
+        const mod = factory.createCallExpression(factory.createPropertyAccessExpression(factory.createIdentifier(builtin_1.BuiltinModulesGlobalVariableName), 'require'), undefined, [factory.createStringLiteral(builtin.moduleName)]);
+        return [
+            builtin.name
+                ? factory.createVariableStatement([], factory.createVariableDeclarationList([
+                    factory.createVariableDeclaration(factory.createIdentifier(builtin.name), undefined, undefined, mod),
+                ], ts.NodeFlags.Const))
+                : undefined,
+            ...builtin.members.map((member) => {
+                var _a;
+                return factory.createVariableStatement([], factory.createVariableDeclarationList([
+                    factory.createVariableDeclaration(factory.createIdentifier(member.name), undefined, undefined, factory.createPropertyAccessExpression(mod, (_a = member.propertyName) !== null && _a !== void 0 ? _a : member.name)),
+                ], ts.NodeFlags.Const));
+            }),
+        ].filter((i) => !!i);
+    }));
+    return factory.updateSourceFile(file, statements);
+};
+exports.createBuiltinModuleTransformer = createBuiltinModuleTransformer;

package/lib/esm/api/call.js

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

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

@@ -10,7 +10,7 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
 import axios from 'axios';
 import { joinURL } from 'ufo';
 const PAGES_KIT_DID = 'z8iZiDFg3vkkrPwsiba1TLXy3H9XHzFERsP8o';
-export function preloadComponents({ mode, name, id }) {
+export function preloadComponents({ mode, name, id, locale, }) {
     var _a, _b;
     return __awaiter(this, void 0, void 0, function* () {
         const prefix = ((_b = (_a = window.blocklet) === null || _a === void 0 ? void 0 : _a.componentMountPoints.find((i) => i.did === PAGES_KIT_DID)) === null || _b === void 0 ? void 0 : _b.mountPoint) || '/';
@@ -20,6 +20,7 @@ export function preloadComponents({ mode, name, id }) {
                 mode,
                 id: Array.isArray(id) ? id.join(',') : id,
                 name: Array.isArray(name) ? name.join(',') : name,
+                locale,
             },
         })
             .then((res) => res.data);

package/lib/esm/builtin/iconify/react.js

@@ -0,0 +1 @@
+export { Icon } from '@iconify/react';

package/lib/esm/builtin/mui/lab.js

@@ -0,0 +1 @@
+export { LoadingButton } from '@mui/lab';