@blocklet/pages-kit 0.2.214 → 0.2.215

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,57 @@ 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 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)) }));
 }
 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]) => [
+        key,
+        (val === null || val === void 0 ? void 0 : val.type) === property_1.RenderNestedComponent ? ((0, jsx_runtime_1.jsx)(ComponentRenderer, Object.assign({ renderCount: props.renderCount, componentId: val.componentId }, (0, lodash_1.pick)(props, 'components', 'locale', 'defaultLocale'), { properties: val.properties }))) : (val),
+    ]));
     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,8 +101,12 @@ 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, }) {
+function useComponent({ componentId, components, locale, defaultLocale, properties: parameters, }) {
     var _a, _b, _c, _d, _e;
+    const preloadRef = (0, react_1.useRef)();
+    const scriptRef = (0, react_1.useRef)({});
+    if (preloadRef.current)
+        return preloadRef.current;
     const preload = PRELOAD_COMPONENTS_STATE === null || PRELOAD_COMPONENTS_STATE === void 0 ? void 0 : PRELOAD_COMPONENTS_STATE.components[componentId];
     if (preload) {
         const properties = Object.fromEntries(Object.entries(parameters !== null && parameters !== void 0 ? parameters : {}).map(([id, { value }]) => {
@@ -104,12 +114,16 @@ function loadComponent({ componentId, components, locale, defaultLocale, propert
             const property = (_b = (_a = preload.component.properties) === null || _a === void 0 ? void 0 : _a[id]) === null || _b === void 0 ? void 0 : _b.data;
             if (!property)
                 return [];
-            return [property.key, (0, property_1.parsePropertyValue)(property.type, value)];
+            return [property.key, (0, property_1.parsePropertyValue)(property, value, { locale, defaultLocale })];
         }));
-        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),
-        };
+        const mod = window[preload.preloadComponentModuleName];
+        if (typeof mod === 'function') {
+            preloadRef.current = {
+                Component: mod(),
+                properties: Object.assign(Object.assign({}, (0, property_1.assignNullableFields)(properties, (_c = (_b = (_a = preload.locales) === null || _a === void 0 ? void 0 : _a[locale]) === null || _b === void 0 ? void 0 : _b.properties) !== null && _c !== void 0 ? _c : (_e = (_d = preload.locales) === null || _d === void 0 ? void 0 : _d[PRELOAD_COMPONENTS_STATE.config.defaultLocale]) === null || _e === void 0 ? void 0 : _e.properties)), preload.serverSideProps),
+            };
+            return preloadRef.current;
+        }
     }
     const component = (0, property_1.mergeComponent)({
         componentId,
@@ -120,8 +134,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 +147,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

@@ -5,12 +5,13 @@ const types_1 = require("../types");
 function injectPreloadComponents({ config, components }) {
     const injectState = {
         config,
-        components: Object.fromEntries(components.map(({ script, component, locales }) => [
+        components: Object.fromEntries(components.map(({ script, component, locales, serverSideProps }) => [
             component.id,
             {
                 preloadComponentModuleName: script.umd.moduleName,
                 component,
                 locales,
+                serverSideProps,
             },
         ])),
     };

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;
+    if (property.type === 'json') {
         if (!value)
             return undefined;
         try {
@@ -69,6 +71,16 @@ function parsePropertyValue(type, value) {
             return undefined;
         }
     }
+    if (property.type === 'component') {
+        const { componentId, locales } = property;
+        if (!componentId)
+            return undefined;
+        return {
+            type: exports.RenderNestedComponent,
+            componentId,
+            properties: (_b = (_a = locales === null || locales === void 0 ? void 0 : locales[locale]) === null || _a === void 0 ? void 0 : _a.defaultValue) !== null && _b !== void 0 ? _b : (_c = locales === null || locales === void 0 ? void 0 : locales[defaultLocale]) === null || _c === void 0 ? void 0 : _c.defaultValue,
+        };
+    }
     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/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';

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

@@ -0,0 +1,13 @@
+export { Autocomplete } from '@mui/material';
+export { Box } from '@mui/material';
+export { Button } from '@mui/material';
+export { ClickAwayListener } from '@mui/material';
+export { Dialog } from '@mui/material';
+export { DialogActions } from '@mui/material';
+export { DialogContent } from '@mui/material';
+export { DialogTitle } from '@mui/material';
+export { Paper } from '@mui/material';
+export { Popper } from '@mui/material';
+export { Stack } from '@mui/material';
+export { Switch } from '@mui/material';
+export { TextField } from '@mui/material';

package/lib/esm/builtin/react-hook-form.js

@@ -0,0 +1 @@
+export * from 'react-hook-form';

package/lib/esm/builtin/react.js

@@ -0,0 +1 @@
+export { Children, Component, Fragment, Profiler, PureComponent, StrictMode, Suspense, cloneElement, createContext, createElement, createFactory, createRef, forwardRef, isValidElement, lazy, memo, startTransition, useCallback, useContext, useDebugValue, useDeferredValue, useEffect, useId, useImperativeHandle, useInsertionEffect, useLayoutEffect, useMemo, useReducer, useRef, useState, useSyncExternalStore, useTransition, version, } from 'react';

package/lib/esm/builtin/utils.js

@@ -0,0 +1 @@
+export { joinURL, withQuery } from 'ufo';

package/lib/esm/builtin/zustand/middleware/immer.js

@@ -0,0 +1 @@
+export * from 'zustand/middleware/immer';

package/lib/esm/builtin/zustand.js

@@ -0,0 +1 @@
+export * from 'zustand';

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

@@ -19,49 +19,54 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { jsx as _jsx } from "react/jsx-runtime";
-import { Icon as IconifyIcon } from '@iconify/react';
-import { Alert, Box, Button, Stack } from '@mui/material';
-import React, { useEffect, useState } from 'react';
+import '../../utils/inject-global-components';
+import { Alert, Box } from '@mui/material';
+import { pick } from 'lodash';
+import { useEffect, useRef, useState } from 'react';
 import { ErrorBoundary } from 'react-error-boundary';
-import { joinURL, withQuery } from 'ufo';
 import { PreloadComponentsStateGlobalVariableName } from '../../types/preload';
-import { assignNullableFields, mergeComponent, parsePropertyValue } from '../../utils/property';
-// inject global variables for web-component renderer
-const win = window;
-win.joinURL = joinURL;
-win.withQuery = withQuery;
-win.React = React;
-win.Box = Box;
-win.Stack = Stack;
-win.Button = Button;
-win.IconifyIcon = IconifyIcon;
+import { RenderNestedComponent, assignNullableFields, mergeComponent, parsePropertyValue } from '../../utils/property';
+import { createBuiltinModuleTransformer } from '../../utils/typescript/builtin-module-transformer';
+const MAXIMUM_RENDER_STACK_SIZE = 50;
 export default function CustomComponentRenderer(_a) {
     var props = __rest(_a, []);
-    return (_jsx(ErrorBoundary, { fallbackRender: E, children: _jsx(Renderer, Object.assign({}, props)) }));
+    return (_jsx(ErrorBoundary, { fallbackRender: E, resetKeys: [Date.now()], children: _jsx(ComponentRenderer, Object.assign({}, props)) }));
+}
+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 _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]) => [
+        key,
+        (val === null || val === void 0 ? void 0 : val.type) === RenderNestedComponent ? (_jsx(ComponentRenderer, Object.assign({ renderCount: props.renderCount, componentId: val.componentId }, pick(props, 'components', 'locale', 'defaultLocale'), { properties: val.properties }))) : (val),
+    ]));
     if (Component) {
-        return _jsx(Component, Object.assign({}, properties));
+        return _jsx(Component, Object.assign({}, componentProps));
     }
     if (AsyncComponent) {
-        return _jsx(AsyncComponentRenderer, { AsyncComponent: AsyncComponent, properties: properties });
+        return _jsx(AsyncComponentRenderer, Object.assign({ AsyncComponent: AsyncComponent }, componentProps));
     }
     return null;
 }
-function AsyncComponentRenderer({ AsyncComponent, properties, }) {
-    const [{ Component, error, key }, setState] = useState({});
+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, key: Date.now() }));
+        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(ErrorBoundary, { fallbackRender: E, resetKeys: [key], children: _jsx(Component, Object.assign({}, properties)) }));
+        return _jsx(Component, Object.assign({}, props));
     }
     return null;
 }
@@ -69,8 +74,12 @@ function E({ error }) {
     return (_jsx(Box, { children: _jsx(Alert, { severity: "error", children: error.message }) }));
 }
 const PRELOAD_COMPONENTS_STATE = window[PreloadComponentsStateGlobalVariableName];
-function loadComponent({ componentId, components, locale, defaultLocale, properties: parameters, }) {
+function useComponent({ componentId, components, locale, defaultLocale, properties: parameters, }) {
     var _a, _b, _c, _d, _e;
+    const preloadRef = useRef();
+    const scriptRef = useRef({});
+    if (preloadRef.current)
+        return preloadRef.current;
     const preload = PRELOAD_COMPONENTS_STATE === null || PRELOAD_COMPONENTS_STATE === void 0 ? void 0 : PRELOAD_COMPONENTS_STATE.components[componentId];
     if (preload) {
         const properties = Object.fromEntries(Object.entries(parameters !== null && parameters !== void 0 ? parameters : {}).map(([id, { value }]) => {
@@ -78,12 +87,16 @@ function loadComponent({ componentId, components, locale, defaultLocale, propert
             const property = (_b = (_a = preload.component.properties) === null || _a === void 0 ? void 0 : _a[id]) === null || _b === void 0 ? void 0 : _b.data;
             if (!property)
                 return [];
-            return [property.key, parsePropertyValue(property.type, value)];
+            return [property.key, parsePropertyValue(property, value, { locale, defaultLocale })];
         }));
-        return {
-            Component: window[preload.preloadComponentModuleName],
-            properties: assignNullableFields(properties, (_c = (_b = (_a = preload.locales) === null || _a === void 0 ? void 0 : _a[locale]) === null || _b === void 0 ? void 0 : _b.properties) !== null && _c !== void 0 ? _c : (_e = (_d = preload.locales) === null || _d === void 0 ? void 0 : _d[PRELOAD_COMPONENTS_STATE.config.defaultLocale]) === null || _e === void 0 ? void 0 : _e.properties),
-        };
+        const mod = window[preload.preloadComponentModuleName];
+        if (typeof mod === 'function') {
+            preloadRef.current = {
+                Component: mod(),
+                properties: Object.assign(Object.assign({}, assignNullableFields(properties, (_c = (_b = (_a = preload.locales) === null || _a === void 0 ? void 0 : _a[locale]) === null || _b === void 0 ? void 0 : _b.properties) !== null && _c !== void 0 ? _c : (_e = (_d = preload.locales) === null || _d === void 0 ? void 0 : _d[PRELOAD_COMPONENTS_STATE.config.defaultLocale]) === null || _e === void 0 ? void 0 : _e.properties)), preload.serverSideProps),
+            };
+            return preloadRef.current;
+        }
     }
     const component = mergeComponent({
         componentId,
@@ -94,16 +107,23 @@ 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,
     };
 }
-function transpileAndLoadScript(script) {
+export function transpileAndLoadScript(script) {
     return __awaiter(this, void 0, void 0, function* () {
         const ts = yield import('typescript');
         const compiled = ts.transpileModule(script, {
-            compilerOptions: { jsx: ts.JsxEmit.React, module: ts.ModuleKind.ESNext },
+            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/builtin.js

@@ -0,0 +1 @@
+export const BuiltinModulesGlobalVariableName = '__PAGES_KIT_BUILTIN_MODULES__';

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

@@ -0,0 +1,28 @@
+import * as builtinIconifyReact from '../builtin/iconify/react';
+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 builtinUtils from '../builtin/utils';
+import * as builtinZustand from '../builtin/zustand';
+import * as builtinZustandMiddlewareImmer from '../builtin/zustand/middleware/immer';
+import { BuiltinModulesGlobalVariableName } from '../types/builtin';
+function injectGlobalComponents() {
+    const win = window;
+    win[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[BuiltinModulesGlobalVariableName].modules[module];
+        },
+    };
+}
+injectGlobalComponents();

package/lib/esm/utils/preload.js

@@ -2,12 +2,13 @@ import { PreloadComponentsStateGlobalVariableName } from '../types';
 export function injectPreloadComponents({ config, components }) {
     const injectState = {
         config,
-        components: Object.fromEntries(components.map(({ script, component, locales }) => [
+        components: Object.fromEntries(components.map(({ script, component, locales, serverSideProps }) => [
             component.id,
             {
                 preloadComponentModuleName: script.umd.moduleName,
                 component,
                 locales,
+                serverSideProps,
             },
         ])),
     };

package/lib/esm/utils/property.js

@@ -12,14 +12,14 @@ export function mergeComponent({ componentId, getComponent, locale, defaultLocal
         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') {
@@ -30,7 +30,7 @@ export function mergeComponent({ componentId, getComponent, locale, defaultLocal
             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;
@@ -39,7 +39,7 @@ export function mergeComponent({ componentId, getComponent, locale, defaultLocal
                 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;
@@ -52,8 +52,10 @@ export function mergeComponent({ componentId, getComponent, locale, defaultLocal
         return null;
     return { script, properties };
 }
-export function parsePropertyValue(type, value) {
-    if (type === 'json') {
+export const RenderNestedComponent = '__RENDER_NESTED_COMPONENT__';
+export function parsePropertyValue(property, value, { locale, defaultLocale }) {
+    var _a, _b, _c;
+    if (property.type === 'json') {
         if (!value)
             return undefined;
         try {
@@ -64,6 +66,16 @@ export function parsePropertyValue(type, value) {
             return undefined;
         }
     }
+    if (property.type === 'component') {
+        const { componentId, locales } = property;
+        if (!componentId)
+            return undefined;
+        return {
+            type: RenderNestedComponent,
+            componentId,
+            properties: (_b = (_a = locales === null || locales === void 0 ? void 0 : locales[locale]) === null || _a === void 0 ? void 0 : _a.defaultValue) !== null && _b !== void 0 ? _b : (_c = locales === null || locales === void 0 ? void 0 : locales[defaultLocale]) === null || _c === void 0 ? void 0 : _c.defaultValue,
+        };
+    }
     return value;
 }
 export function assignNullableFields(properties, newProperties) {

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

@@ -0,0 +1,51 @@
+import { BuiltinModulesGlobalVariableName } from '../../types/builtin';
+export 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(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);
+};

package/lib/types/builtin/iconify/react.d.ts

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

package/lib/types/builtin/mui/lab.d.ts

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

package/lib/types/builtin/mui/material.d.ts

@@ -0,0 +1,13 @@
+export { Autocomplete } from '@mui/material';
+export { Box } from '@mui/material';
+export { Button } from '@mui/material';
+export { ClickAwayListener } from '@mui/material';
+export { Dialog } from '@mui/material';
+export { DialogActions } from '@mui/material';
+export { DialogContent } from '@mui/material';
+export { DialogTitle } from '@mui/material';
+export { Paper } from '@mui/material';
+export { Popper } from '@mui/material';
+export { Stack } from '@mui/material';
+export { Switch } from '@mui/material';
+export { TextField } from '@mui/material';

package/lib/types/builtin/react-hook-form.d.ts

@@ -0,0 +1 @@
+export * from 'react-hook-form';

package/lib/types/builtin/react.d.ts

@@ -0,0 +1 @@
+export { Children, Component, Fragment, Profiler, PureComponent, StrictMode, Suspense, cloneElement, createContext, createElement, createFactory, createRef, forwardRef, isValidElement, lazy, memo, startTransition, useCallback, useContext, useDebugValue, useDeferredValue, useEffect, useId, useImperativeHandle, useInsertionEffect, useLayoutEffect, useMemo, useReducer, useRef, useState, useSyncExternalStore, useTransition, version, } from 'react';

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

@@ -0,0 +1 @@
+export { joinURL, withQuery } from 'ufo';

package/lib/types/builtin/zustand/middleware/immer.d.ts

@@ -0,0 +1 @@
+export * from 'zustand/middleware/immer';

package/lib/types/builtin/zustand.d.ts

@@ -0,0 +1 @@
+export * from 'zustand';

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

@@ -1,3 +1,4 @@
+import '../../utils/inject-global-components';
 import { CustomComponent } from '../../types/core';
 export interface CustomComponentRendererProps {
     componentId: string;
@@ -5,7 +6,13 @@ export interface CustomComponentRendererProps {
     defaultLocale?: string;
     components?: CustomComponent[];
     properties?: {
+        [key: string]: {
+            value: any;
+        };
+    };
+    props?: {
         [key: string]: any;
     };
 }
 export default function CustomComponentRenderer({ ...props }: CustomComponentRendererProps): import("react/jsx-runtime").JSX.Element;
+export declare function transpileAndLoadScript(script: string): Promise<any>;

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

@@ -24,5 +24,8 @@ export interface PreloadComponentsResult {
                 };
             };
         };
+        serverSideProps?: {
+            [key: string]: any;
+        };
     }[];
 }

package/lib/types/types/builtin.d.ts

@@ -0,0 +1 @@
+export declare const BuiltinModulesGlobalVariableName = "__PAGES_KIT_BUILTIN_MODULES__";

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

@@ -10,7 +10,7 @@ export type CustomComponent = {
         type: 'react-component';
         script?: string;
     } | {
-        type: 'custom-component';
+        type: 'component';
         componentId?: string;
         properties?: {
             [id: string]: {
@@ -25,18 +25,32 @@ export type CustomComponent = {
     properties?: {
         [id: string]: {
             index: number;
-            data: {
-                id: string;
-                key?: string;
-                type?: 'string' | 'number' | 'boolean' | 'json' | 'custom-component' | 'url';
-                multiline?: boolean;
-                locales?: {
-                    [locale: string]: {
-                        name?: string;
-                        defaultValue?: any;
-                    };
-                };
-            };
+            data: CustomComponentCommonProperty | CustomComponentCustomProperty | CustomComponentStringProperty | CustomComponentComponentProperty;
         };
     };
 };
+export interface CustomComponentPropertyBase {
+    id: string;
+    key?: string;
+    locales?: {
+        [locale: string]: {
+            name?: string;
+            defaultValue?: any;
+        };
+    };
+}
+export interface CustomComponentCommonProperty extends CustomComponentPropertyBase {
+    type: 'number' | 'boolean' | 'json' | 'url';
+}
+export interface CustomComponentCustomProperty extends CustomComponentPropertyBase {
+    type: 'custom';
+    componentId?: string;
+}
+export interface CustomComponentStringProperty extends CustomComponentPropertyBase {
+    type?: 'string';
+    multiline?: boolean;
+}
+export interface CustomComponentComponentProperty extends CustomComponentPropertyBase {
+    type: 'component';
+    componentId?: string;
+}

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

@@ -10,6 +10,9 @@ export interface PreloadComponent {
             };
         };
     };
+    serverSideProps?: {
+        [key: string]: any;
+    };
 }
 export interface PreloadComponentsState {
     config: {

package/lib/types/utils/inject-global-components.d.ts

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

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

@@ -18,5 +18,9 @@ export declare function mergeComponent({ componentId, getComponent, locale, defa
         [key: string]: any;
     };
 } | null;
-export declare function parsePropertyValue(type: NonNullable<CustomComponent['properties']>[string]['data']['type'], value: any): any;
+export declare const RenderNestedComponent = "__RENDER_NESTED_COMPONENT__";
+export declare function parsePropertyValue(property: NonNullable<CustomComponent['properties']>[string]['data'], value: any, { locale, defaultLocale }: {
+    locale?: string;
+    defaultLocale?: string;
+}): any;
 export declare function assignNullableFields(properties: any, newProperties: any): any;

package/lib/types/utils/typescript/builtin-module-transformer.d.ts

@@ -0,0 +1,2 @@
+import { SourceFile, TransformerFactory } from 'typescript';
+export declare const createBuiltinModuleTransformer: (ts: typeof import('typescript')) => TransformerFactory<SourceFile>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blocklet/pages-kit",
-  "version": "0.2.214",
+  "version": "0.2.215",
   "description": "Pages Kit components and utils",
   "publishConfig": {
     "access": "public"
@@ -24,6 +24,10 @@
       "import": "./lib/esm/api/*.js",
       "require": "./lib/cjs/api/*.js"
     },
+    "./builtin/*": {
+      "import": "./lib/esm/builtin/*.js",
+      "require": "./lib/cjs/builtin/*.js"
+    },
     "./components": {
       "import": "./lib/esm/components/index.js",
       "require": "./lib/cjs/components/index.js"
@@ -49,6 +53,10 @@
         "./lib/types/api/*.d.ts",
         "./lib/types/api/*/index.d.ts"
       ],
+      "builtin/*": [
+        "./lib/types/builtin/*.d.ts",
+        "./lib/types/builtin/*/index.d.ts"
+      ],
       "components": [
         "./lib/types/components/index.d.ts"
       ],
@@ -74,6 +82,7 @@
   },
   "scripts": {
     "lint": "eslint src --ext .mjs,.js,.jsx,.ts,.tsx",
+    "lint:fix": "npm run lint -- --fix",
     "build": "run-p build:*",
     "build:cjs": "tsc --module commonjs --outDir lib/cjs",
     "build:esm": "tsc --module es2022 --outDir lib/esm",
@@ -86,11 +95,13 @@
   "dependencies": {
     "@blocklet/sdk": "^1.16.22",
     "@iconify/react": "^4.1.1",
-    "axios": "^1.6.6",
+    "axios": "^1.6.7",
+    "immer": "^10.0.3",
     "lodash": "^4.17.21",
     "nanoid": "^3.3.7",
     "react-error-boundary": "^4.0.12",
     "react-frame-component": "^5.2.6",
+    "react-hook-form": "^7.49.3",
     "typescript": "^5.3.3",
     "ufo": "^1.3.2",
     "zustand": "^4.5.0"
@@ -109,7 +120,7 @@
     "react-router-dom": "^6.16.0"
   },
   "devDependencies": {
-    "@arcblock/ux": "^2.9.17",
+    "@arcblock/ux": "^2.9.19",
     "@emotion/cache": "^11.11.0",
     "@emotion/css": "^11.11.2",
     "@emotion/react": "^11.11.3",
@@ -120,7 +131,7 @@
     "@types/mustache": "^4.2.5",
     "@types/node-fetch": "^2.6.11",
     "@types/react": "^18.2.48",
-    "axios": "^1.6.6",
+    "axios": "^1.6.7",
     "npm-run-all": "^4.1.5",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",