@blocklet/pages-kit 0.2.216 → 0.2.218

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

@@ -21,7 +21,7 @@ function preloadComponents({ mode, name, id, locale, }) {
     return __awaiter(this, void 0, void 0, function* () {
         const prefix = ((_b = (_a = window.blocklet) === null || _a === void 0 ? void 0 : _a.componentMountPoints.find((i) => i.did === PAGES_KIT_DID)) === null || _b === void 0 ? void 0 : _b.mountPoint) || '/';
         return axios_1.default
-            .get((0, ufo_1.joinURL)(prefix, '/api/components'), {
+            .get((0, ufo_1.joinURL)(prefix, '/api/components/preload'), {
             params: {
                 mode,
                 id: Array.isArray(id) ? id.join(',') : id,

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

@@ -50,10 +50,11 @@ const material_1 = require("@mui/material");
 const lodash_1 = require("lodash");
 const react_1 = require("react");
 const react_error_boundary_1 = require("react-error-boundary");
+const api_1 = require("../../api");
 const preload_1 = require("../../types/preload");
 const property_1 = require("../../utils/property");
 const builtin_module_transformer_1 = require("../../utils/typescript/builtin-module-transformer");
-const MAXIMUM_RENDER_STACK_SIZE = 50;
+const MAXIMUM_RENDER_STACK_SIZE = 20;
 function CustomComponentRenderer(_a) {
     var _b;
     var props = __rest(_a, []);
@@ -103,28 +104,74 @@ function AsyncComponentRenderer(_a) {
 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 useComponent({ instanceId, componentId, components, locale, defaultLocale, properties: parameters, props, }) {
-    const scriptRef = (0, react_1.useRef)({});
-    const preloadComponent = (0, react_1.useMemo)(() => {
+let PRELOAD_COMPONENTS_STATE = window[preload_1.PreloadComponentsStateGlobalVariableName];
+let PRELOAD_COMPONENTS_STATE_KEY = 0;
+const COMPONENTS_MAP = {};
+function getScriptComponent(componentId) {
+    if (!COMPONENTS_MAP[componentId]) {
         const preload = PRELOAD_COMPONENTS_STATE === null || PRELOAD_COMPONENTS_STATE === void 0 ? void 0 : PRELOAD_COMPONENTS_STATE.components[componentId];
         if (preload) {
             const mod = window[preload.preloadComponentModuleName];
             if (typeof mod === 'function') {
-                return { component: preload.component, Component: mod() };
+                COMPONENTS_MAP[componentId] = { component: preload.component, Component: mod() };
             }
         }
-        return null;
-    }, [componentId]);
+    }
+    return COMPONENTS_MAP[componentId];
+}
+const LOAD_REMOTE_COMPONENT_TASKS = {};
+function loadRemoteComponent({ mode, instanceId, componentId, locale, }) {
+    var _a;
+    const key = [instanceId, locale].join('-');
+    (_a = LOAD_REMOTE_COMPONENT_TASKS[key]) !== null && _a !== void 0 ? _a : (LOAD_REMOTE_COMPONENT_TASKS[key] = (0, api_1.preloadComponents)({ mode, id: componentId, locale })
+        .then((result) => {
+        var _a;
+        var _b;
+        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 !== null && PRELOAD_COMPONENTS_STATE !== void 0 ? PRELOAD_COMPONENTS_STATE : (PRELOAD_COMPONENTS_STATE = { config: result.config, components: {}, props: {} });
+            PRELOAD_COMPONENTS_STATE.components[i.component.id] = {
+                preloadComponentModuleName: i.script.umd.moduleName,
+                component: i.component,
+            };
+            (_a = (_b = PRELOAD_COMPONENTS_STATE.props)[instanceId]) !== null && _a !== void 0 ? _a : (_b[instanceId] = {});
+            PRELOAD_COMPONENTS_STATE.props[instanceId][locale] = result.props[componentId][locale];
+            PRELOAD_COMPONENTS_STATE_KEY += 1;
+        }
+    })
+        .catch((error) => {
+        console.error('load remote component error', error);
+        LOAD_REMOTE_COMPONENT_TASKS[key] = undefined;
+    }));
+    return LOAD_REMOTE_COMPONENT_TASKS[key];
+}
+function useComponent({ mode, instanceId, componentId, components, locale, defaultLocale, properties: parameters, props, }) {
+    const scriptRef = (0, react_1.useRef)({});
+    const preloadComponent = (0, react_1.useMemo)(() => getScriptComponent(componentId), [componentId, PRELOAD_COMPONENTS_STATE_KEY]);
     const preloadState = (0, react_1.useMemo)(() => {
         var _a;
         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]);
+    }, [instanceId, locale, PRELOAD_COMPONENTS_STATE_KEY]);
+    const previousPreload = (0, react_1.useRef)();
+    const [, update] = (0, react_1.useState)(0);
     if ((props || preloadState) && preloadComponent) {
-        return {
+        previousPreload.current = {
             Component: preloadComponent.Component,
             properties: preloadState,
         };
+        return previousPreload.current;
+    }
+    if (!(components === null || components === void 0 ? void 0 : components.length) && preloadComponent) {
+        loadRemoteComponent({ mode, instanceId, componentId, locale }).then(() => {
+            update((v) => v + 1);
+        });
+        if (previousPreload.current) {
+            return previousPreload.current;
+        }
     }
     const component = (0, property_1.mergeComponent)({
         componentId,

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

@@ -15,7 +15,7 @@ export function preloadComponents({ mode, name, id, locale, }) {
     return __awaiter(this, void 0, void 0, function* () {
         const prefix = ((_b = (_a = window.blocklet) === null || _a === void 0 ? void 0 : _a.componentMountPoints.find((i) => i.did === PAGES_KIT_DID)) === null || _b === void 0 ? void 0 : _b.mountPoint) || '/';
         return axios
-            .get(joinURL(prefix, '/api/components'), {
+            .get(joinURL(prefix, '/api/components/preload'), {
             params: {
                 mode,
                 id: Array.isArray(id) ? id.join(',') : id,

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

@@ -24,10 +24,11 @@ import { Alert, Box } from '@mui/material';
 import { pick } from 'lodash';
 import { useEffect, useMemo, useRef, useState } from 'react';
 import { ErrorBoundary } from 'react-error-boundary';
+import { preloadComponents } from '../../api';
 import { PreloadComponentsStateGlobalVariableName } from '../../types/preload';
 import { RenderNestedComponent, mergeComponent } from '../../utils/property';
 import { createBuiltinModuleTransformer } from '../../utils/typescript/builtin-module-transformer';
-const MAXIMUM_RENDER_STACK_SIZE = 50;
+const MAXIMUM_RENDER_STACK_SIZE = 20;
 export default function CustomComponentRenderer(_a) {
     var _b;
     var props = __rest(_a, []);
@@ -76,28 +77,74 @@ function AsyncComponentRenderer(_a) {
 function E({ error }) {
     return (_jsx(Box, { children: _jsx(Alert, { severity: "error", children: error.message }) }));
 }
-const PRELOAD_COMPONENTS_STATE = window[PreloadComponentsStateGlobalVariableName];
-function useComponent({ instanceId, componentId, components, locale, defaultLocale, properties: parameters, props, }) {
-    const scriptRef = useRef({});
-    const preloadComponent = useMemo(() => {
+let PRELOAD_COMPONENTS_STATE = window[PreloadComponentsStateGlobalVariableName];
+let PRELOAD_COMPONENTS_STATE_KEY = 0;
+const COMPONENTS_MAP = {};
+function getScriptComponent(componentId) {
+    if (!COMPONENTS_MAP[componentId]) {
         const preload = PRELOAD_COMPONENTS_STATE === null || PRELOAD_COMPONENTS_STATE === void 0 ? void 0 : PRELOAD_COMPONENTS_STATE.components[componentId];
         if (preload) {
             const mod = window[preload.preloadComponentModuleName];
             if (typeof mod === 'function') {
-                return { component: preload.component, Component: mod() };
+                COMPONENTS_MAP[componentId] = { component: preload.component, Component: mod() };
             }
         }
-        return null;
-    }, [componentId]);
+    }
+    return COMPONENTS_MAP[componentId];
+}
+const LOAD_REMOTE_COMPONENT_TASKS = {};
+function loadRemoteComponent({ mode, instanceId, componentId, locale, }) {
+    var _a;
+    const key = [instanceId, locale].join('-');
+    (_a = LOAD_REMOTE_COMPONENT_TASKS[key]) !== null && _a !== void 0 ? _a : (LOAD_REMOTE_COMPONENT_TASKS[key] = preloadComponents({ mode, id: componentId, locale })
+        .then((result) => {
+        var _a;
+        var _b;
+        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 !== null && PRELOAD_COMPONENTS_STATE !== void 0 ? PRELOAD_COMPONENTS_STATE : (PRELOAD_COMPONENTS_STATE = { config: result.config, components: {}, props: {} });
+            PRELOAD_COMPONENTS_STATE.components[i.component.id] = {
+                preloadComponentModuleName: i.script.umd.moduleName,
+                component: i.component,
+            };
+            (_a = (_b = PRELOAD_COMPONENTS_STATE.props)[instanceId]) !== null && _a !== void 0 ? _a : (_b[instanceId] = {});
+            PRELOAD_COMPONENTS_STATE.props[instanceId][locale] = result.props[componentId][locale];
+            PRELOAD_COMPONENTS_STATE_KEY += 1;
+        }
+    })
+        .catch((error) => {
+        console.error('load remote component error', error);
+        LOAD_REMOTE_COMPONENT_TASKS[key] = undefined;
+    }));
+    return LOAD_REMOTE_COMPONENT_TASKS[key];
+}
+function useComponent({ mode, instanceId, componentId, components, locale, defaultLocale, properties: parameters, props, }) {
+    const scriptRef = useRef({});
+    const preloadComponent = useMemo(() => getScriptComponent(componentId), [componentId, PRELOAD_COMPONENTS_STATE_KEY]);
     const preloadState = 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]);
+    }, [instanceId, locale, PRELOAD_COMPONENTS_STATE_KEY]);
+    const previousPreload = useRef();
+    const [, update] = useState(0);
     if ((props || preloadState) && preloadComponent) {
-        return {
+        previousPreload.current = {
             Component: preloadComponent.Component,
             properties: preloadState,
         };
+        return previousPreload.current;
+    }
+    if (!(components === null || components === void 0 ? void 0 : components.length) && preloadComponent) {
+        loadRemoteComponent({ mode, instanceId, componentId, locale }).then(() => {
+            update((v) => v + 1);
+        });
+        if (previousPreload.current) {
+            return previousPreload.current;
+        }
     }
     const component = mergeComponent({
         componentId,

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

@@ -1,6 +1,8 @@
 import '../../utils/inject-global-components';
+import { StateMode } from '../../types';
 import { CustomComponent } from '../../types/core';
 export interface CustomComponentRendererProps {
+    mode?: StateMode;
     instanceId?: string;
     componentId: string;
     locale?: string;

package/package.json

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