@blocklet/pages-kit 0.2.220 → 0.2.222

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

@@ -1,6 +1,6 @@
 "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;
+exports.Typography = exports.Container = 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");
@@ -27,3 +27,7 @@ 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; } });
+var material_14 = require("@mui/material");
+Object.defineProperty(exports, "Container", { enumerable: true, get: function () { return material_14.Container; } });
+var material_15 = require("@mui/material");
+Object.defineProperty(exports, "Typography", { enumerable: true, get: function () { return material_15.Typography; } });

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

@@ -56,8 +56,8 @@ const property_1 = require("../../utils/property");
 const MAXIMUM_RENDER_STACK_SIZE = 20;
 function CustomComponentRenderer(_a) {
     var _b;
-    var props = __rest(_a, []);
-    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 })) }));
+    var { defaultLocale = PRELOAD_COMPONENTS_STATE === null || PRELOAD_COMPONENTS_STATE === void 0 ? void 0 : PRELOAD_COMPONENTS_STATE.config.defaultLocale } = _a, props = __rest(_a, ["defaultLocale"]);
+    return ((0, jsx_runtime_1.jsx)(react_error_boundary_1.ErrorBoundary, { fallbackRender: E, resetKeys: [Date.now()], children: (0, jsx_runtime_1.jsx)(ComponentRenderer, Object.assign({}, props, { defaultLocale: defaultLocale, instanceId: (_b = props.instanceId) !== null && _b !== void 0 ? _b : props.componentId })) }));
 }
 exports.default = CustomComponentRenderer;
 function ComponentRenderer(_a) {
@@ -151,7 +151,7 @@ function loadRemoteComponent({ mode, instanceId, componentId, locale, }) {
     }));
     return LOAD_REMOTE_COMPONENT_TASKS[key];
 }
-function useComponent({ mode, instanceId, componentId, components, locale, defaultLocale, properties: parameters, props, }) {
+function useComponent({ mode, instanceId, componentId, components, locale, defaultLocale, properties: parameters, }) {
     var _a;
     const scriptRef = (0, react_1.useRef)({});
     const preloadComponent = (0, react_1.useMemo)(() => getScriptComponent(componentId), [componentId, PRELOAD_COMPONENTS_STATE_KEY]);
@@ -162,17 +162,10 @@ function useComponent({ mode, instanceId, componentId, components, locale, defau
     const preloadDefaultState = (0, react_1.useMemo)(() => {
         var _a, _b;
         return (_b = (_a = PRELOAD_COMPONENTS_STATE === null || PRELOAD_COMPONENTS_STATE === void 0 ? void 0 : PRELOAD_COMPONENTS_STATE.props[instanceId]) === null || _a === void 0 ? void 0 : _a.locales) === null || _b === void 0 ? void 0 : _b[defaultLocale];
-    }, [instanceId, locale, PRELOAD_COMPONENTS_STATE_KEY]);
+    }, [instanceId, defaultLocale, PRELOAD_COMPONENTS_STATE_KEY]);
     const previousPreload = (0, react_1.useRef)();
     const [, update] = (0, react_1.useState)(0);
-    if ((props || preloadState) && preloadComponent) {
-        previousPreload.current = {
-            Component: preloadComponent.Component,
-            properties: (_a = preloadState === null || preloadState === void 0 ? void 0 : preloadState.props) !== null && _a !== void 0 ? _a : preloadDefaultState === null || preloadDefaultState === void 0 ? void 0 : preloadDefaultState.props,
-        };
-        return previousPreload.current;
-    }
-    if (!(components === null || components === void 0 ? void 0 : components.length) && preloadComponent) {
+    if (!(components === null || components === void 0 ? void 0 : components.length) && !preloadState && preloadComponent) {
         loadRemoteComponent({ mode, instanceId, componentId, locale: locale || defaultLocale }).then(() => {
             update(PRELOAD_COMPONENTS_STATE_KEY);
         });
@@ -180,6 +173,13 @@ function useComponent({ mode, instanceId, componentId, components, locale, defau
             return previousPreload.current;
         }
     }
+    if ((preloadState || preloadDefaultState) && preloadComponent) {
+        previousPreload.current = {
+            Component: preloadComponent.Component,
+            properties: (_a = preloadState === null || preloadState === void 0 ? void 0 : preloadState.props) !== null && _a !== void 0 ? _a : preloadDefaultState === null || preloadDefaultState === void 0 ? void 0 : preloadDefaultState.props,
+        };
+        return previousPreload.current;
+    }
     const component = (0, property_1.mergeComponent)({
         componentId,
         getComponent: (componentId) => components === null || components === void 0 ? void 0 : components.find((i) => i.id === componentId),

package/lib/cjs/utils/preload-client.js

@@ -0,0 +1,51 @@
+"use strict";
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var _a;
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.loadAndInjectComponents = exports.PRELOAD_COMPONENTS_STATE = void 0;
+const api_1 = require("../api");
+const preload_1 = require("../types/preload");
+(_a = window[preload_1.PreloadComponentsStateGlobalVariableName]) !== null && _a !== void 0 ? _a : (window[preload_1.PreloadComponentsStateGlobalVariableName] = {
+    config: {},
+    components: {},
+    props: {},
+});
+exports.PRELOAD_COMPONENTS_STATE = window[preload_1.PreloadComponentsStateGlobalVariableName];
+function loadAndInjectComponents({ mode, name, locale, }) {
+    var _a, _b, _c, _d, _e, _f;
+    var _g, _h, _j;
+    return __awaiter(this, void 0, void 0, function* () {
+        const { components, props } = exports.PRELOAD_COMPONENTS_STATE;
+        const c = Object.values(components).find((i) => !!i.component.name && i.component.name.toLowerCase() === name.toLowerCase());
+        if (c && props[c.component.id]) {
+            return;
+        }
+        const result = yield (0, api_1.preloadComponents)({ mode, name, locale });
+        const componentId = Object.keys(result.props)[0];
+        for (const i of Object.values(result.components)) {
+            if (!window[i.script.umd.moduleName]) {
+                const script = document.createElement('script');
+                script.textContent = i.script.umd.script;
+                document.body.appendChild(script);
+            }
+            exports.PRELOAD_COMPONENTS_STATE.components[i.component.id] = {
+                preloadComponentModuleName: i.script.umd.moduleName,
+                component: i.component,
+            };
+        }
+        (_a = (_g = exports.PRELOAD_COMPONENTS_STATE.props)[componentId]) !== null && _a !== void 0 ? _a : (_g[componentId] = {});
+        (_b = (_h = exports.PRELOAD_COMPONENTS_STATE.props[componentId]).locales) !== null && _b !== void 0 ? _b : (_h.locales = {});
+        (_c = (_j = exports.PRELOAD_COMPONENTS_STATE.props[componentId].locales)[locale]) !== null && _c !== void 0 ? _c : (_j[locale] = {});
+        exports.PRELOAD_COMPONENTS_STATE.props[componentId].locales[locale].props =
+            (_f = (_e = (_d = result.props[componentId]) === null || _d === void 0 ? void 0 : _d.locales) === null || _e === void 0 ? void 0 : _e[locale]) === null || _f === void 0 ? void 0 : _f.props;
+    });
+}
+exports.loadAndInjectComponents = loadAndInjectComponents;

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

@@ -11,3 +11,5 @@ export { Popper } from '@mui/material';
 export { Stack } from '@mui/material';
 export { Switch } from '@mui/material';
 export { TextField } from '@mui/material';
+export { Container } from '@mui/material';
+export { Typography } from '@mui/material';

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

@@ -30,8 +30,8 @@ import { RenderNestedComponent, mergeComponent } from '../../utils/property';
 const MAXIMUM_RENDER_STACK_SIZE = 20;
 export default function CustomComponentRenderer(_a) {
     var _b;
-    var props = __rest(_a, []);
-    return (_jsx(ErrorBoundary, { fallbackRender: E, resetKeys: [Date.now()], children: _jsx(ComponentRenderer, Object.assign({}, props, { instanceId: (_b = props.instanceId) !== null && _b !== void 0 ? _b : props.componentId })) }));
+    var { defaultLocale = PRELOAD_COMPONENTS_STATE === null || PRELOAD_COMPONENTS_STATE === void 0 ? void 0 : PRELOAD_COMPONENTS_STATE.config.defaultLocale } = _a, props = __rest(_a, ["defaultLocale"]);
+    return (_jsx(ErrorBoundary, { fallbackRender: E, resetKeys: [Date.now()], children: _jsx(ComponentRenderer, Object.assign({}, props, { defaultLocale: defaultLocale, instanceId: (_b = props.instanceId) !== null && _b !== void 0 ? _b : props.componentId })) }));
 }
 function ComponentRenderer(_a) {
     var { renderCount = 0 } = _a, props = __rest(_a, ["renderCount"]);
@@ -124,7 +124,7 @@ function loadRemoteComponent({ mode, instanceId, componentId, locale, }) {
     }));
     return LOAD_REMOTE_COMPONENT_TASKS[key];
 }
-function useComponent({ mode, instanceId, componentId, components, locale, defaultLocale, properties: parameters, props, }) {
+function useComponent({ mode, instanceId, componentId, components, locale, defaultLocale, properties: parameters, }) {
     var _a;
     const scriptRef = useRef({});
     const preloadComponent = useMemo(() => getScriptComponent(componentId), [componentId, PRELOAD_COMPONENTS_STATE_KEY]);
@@ -135,17 +135,10 @@ function useComponent({ mode, instanceId, componentId, components, locale, defau
     const preloadDefaultState = useMemo(() => {
         var _a, _b;
         return (_b = (_a = PRELOAD_COMPONENTS_STATE === null || PRELOAD_COMPONENTS_STATE === void 0 ? void 0 : PRELOAD_COMPONENTS_STATE.props[instanceId]) === null || _a === void 0 ? void 0 : _a.locales) === null || _b === void 0 ? void 0 : _b[defaultLocale];
-    }, [instanceId, locale, PRELOAD_COMPONENTS_STATE_KEY]);
+    }, [instanceId, defaultLocale, PRELOAD_COMPONENTS_STATE_KEY]);
     const previousPreload = useRef();
     const [, update] = useState(0);
-    if ((props || preloadState) && preloadComponent) {
-        previousPreload.current = {
-            Component: preloadComponent.Component,
-            properties: (_a = preloadState === null || preloadState === void 0 ? void 0 : preloadState.props) !== null && _a !== void 0 ? _a : preloadDefaultState === null || preloadDefaultState === void 0 ? void 0 : preloadDefaultState.props,
-        };
-        return previousPreload.current;
-    }
-    if (!(components === null || components === void 0 ? void 0 : components.length) && preloadComponent) {
+    if (!(components === null || components === void 0 ? void 0 : components.length) && !preloadState && preloadComponent) {
         loadRemoteComponent({ mode, instanceId, componentId, locale: locale || defaultLocale }).then(() => {
             update(PRELOAD_COMPONENTS_STATE_KEY);
         });
@@ -153,6 +146,13 @@ function useComponent({ mode, instanceId, componentId, components, locale, defau
             return previousPreload.current;
         }
     }
+    if ((preloadState || preloadDefaultState) && preloadComponent) {
+        previousPreload.current = {
+            Component: preloadComponent.Component,
+            properties: (_a = preloadState === null || preloadState === void 0 ? void 0 : preloadState.props) !== null && _a !== void 0 ? _a : preloadDefaultState === null || preloadDefaultState === void 0 ? void 0 : preloadDefaultState.props,
+        };
+        return previousPreload.current;
+    }
     const component = mergeComponent({
         componentId,
         getComponent: (componentId) => components === null || components === void 0 ? void 0 : components.find((i) => i.id === componentId),

package/lib/esm/utils/preload-client.js

@@ -0,0 +1,47 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var _a;
+import { preloadComponents } from '../api';
+import { PreloadComponentsStateGlobalVariableName } from '../types/preload';
+(_a = window[PreloadComponentsStateGlobalVariableName]) !== null && _a !== void 0 ? _a : (window[PreloadComponentsStateGlobalVariableName] = {
+    config: {},
+    components: {},
+    props: {},
+});
+export const PRELOAD_COMPONENTS_STATE = window[PreloadComponentsStateGlobalVariableName];
+export function loadAndInjectComponents({ mode, name, locale, }) {
+    var _a, _b, _c, _d, _e, _f;
+    var _g, _h, _j;
+    return __awaiter(this, void 0, void 0, function* () {
+        const { components, props } = PRELOAD_COMPONENTS_STATE;
+        const c = Object.values(components).find((i) => !!i.component.name && i.component.name.toLowerCase() === name.toLowerCase());
+        if (c && props[c.component.id]) {
+            return;
+        }
+        const result = yield preloadComponents({ mode, name, locale });
+        const componentId = Object.keys(result.props)[0];
+        for (const i of Object.values(result.components)) {
+            if (!window[i.script.umd.moduleName]) {
+                const script = document.createElement('script');
+                script.textContent = i.script.umd.script;
+                document.body.appendChild(script);
+            }
+            PRELOAD_COMPONENTS_STATE.components[i.component.id] = {
+                preloadComponentModuleName: i.script.umd.moduleName,
+                component: i.component,
+            };
+        }
+        (_a = (_g = PRELOAD_COMPONENTS_STATE.props)[componentId]) !== null && _a !== void 0 ? _a : (_g[componentId] = {});
+        (_b = (_h = PRELOAD_COMPONENTS_STATE.props[componentId]).locales) !== null && _b !== void 0 ? _b : (_h.locales = {});
+        (_c = (_j = PRELOAD_COMPONENTS_STATE.props[componentId].locales)[locale]) !== null && _c !== void 0 ? _c : (_j[locale] = {});
+        PRELOAD_COMPONENTS_STATE.props[componentId].locales[locale].props =
+            (_f = (_e = (_d = result.props[componentId]) === null || _d === void 0 ? void 0 : _d.locales) === null || _e === void 0 ? void 0 : _e[locale]) === null || _f === void 0 ? void 0 : _f.props;
+    });
+}

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

@@ -11,3 +11,5 @@ export { Popper } from '@mui/material';
 export { Stack } from '@mui/material';
 export { Switch } from '@mui/material';
 export { TextField } from '@mui/material';
+export { Container } from '@mui/material';
+export { Typography } from '@mui/material';

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

@@ -17,5 +17,5 @@ export interface CustomComponentRendererProps {
         [key: string]: any;
     };
 }
-export default function CustomComponentRenderer({ ...props }: CustomComponentRendererProps): import("react/jsx-runtime").JSX.Element;
+export default function CustomComponentRenderer({ defaultLocale, ...props }: CustomComponentRendererProps): import("react/jsx-runtime").JSX.Element;
 export declare function transpileAndLoadScript(script: string): Promise<any>;

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

@@ -0,0 +1,8 @@
+import { StateMode } from '../types';
+import { PreloadComponentsState } from '../types/preload';
+export declare const PRELOAD_COMPONENTS_STATE: PreloadComponentsState;
+export declare function loadAndInjectComponents({ mode, name, locale, }: {
+    mode?: StateMode;
+    name: string;
+    locale: string;
+}): Promise<void>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blocklet/pages-kit",
-  "version": "0.2.220",
+  "version": "0.2.222",
   "description": "Pages Kit components and utils",
   "publishConfig": {
     "access": "public"