@blocklet/pages-kit 0.4.31 → 0.4.33

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

@@ -22,26 +22,6 @@ var __importStar = (this && this.__importStar) || function (mod) {
     __setModuleDefault(result, mod);
     return result;
 };
-var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
@@ -78,9 +58,9 @@ function importCustomComponent(m, { componentId }) {
             // 只在组件首次加载时执行，避免重复加载
             (0, react_1.useEffect)(() => {
                 let isMounted = true;
-                const loadComponent = () => __awaiter(this, void 0, void 0, function* () {
+                const loadComponent = async () => {
                     try {
-                        const result = yield m;
+                        const result = await m;
                         if (!isMounted)
                             return;
                         if (!result) {
@@ -108,7 +88,7 @@ function importCustomComponent(m, { componentId }) {
                             setLoading(false);
                         }
                     }
-                });
+                };
                 loadComponent();
                 return () => {
                     isMounted = false;
@@ -124,7 +104,7 @@ function importCustomComponent(m, { componentId }) {
                 }
                 // 动态渲染组件，但允许props更新传递
                 if (ResolvedComponent) {
-                    return (0, jsx_runtime_1.jsx)(ResolvedComponent, Object.assign({}, props));
+                    return (0, jsx_runtime_1.jsx)(ResolvedComponent, { ...props });
                 }
                 return null;
             }, [loading, error, ResolvedComponent, props]);
@@ -163,7 +143,7 @@ function importCustomComponent(m, { componentId }) {
     // if a component is found and has CSS, wrap the component with styles
     if (Component && css) {
         const OriginalComponent = Component;
-        Component = (props) => ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_helmet_1.Helmet, { children: (0, jsx_runtime_1.jsx)("style", { children: css }) }), (0, jsx_runtime_1.jsx)(OriginalComponent, Object.assign({}, props, { className: (0, css_1.cx)(props.className, `CustomComponent_${componentId}`) }))] }));
+        Component = (props) => ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_helmet_1.Helmet, { children: (0, jsx_runtime_1.jsx)("style", { children: css }) }), (0, jsx_runtime_1.jsx)(OriginalComponent, { ...props, className: (0, css_1.cx)(props.className, `CustomComponent_${componentId}`) })] }));
     }
     // keep aigneOutputValueSchema
     if (Component && m.aigneOutputValueSchema) {
@@ -173,17 +153,15 @@ function importCustomComponent(m, { componentId }) {
 }
 function getPropertiesFromCode(m) {
     let propertiesFromCode = null;
-    if (typeof (m === null || m === void 0 ? void 0 : m.PROPERTIES_SCHEMA) === 'object' && (m === null || m === void 0 ? void 0 : m.PROPERTIES_SCHEMA.length)) {
+    if (typeof m?.PROPERTIES_SCHEMA === 'object' && m?.PROPERTIES_SCHEMA.length) {
         propertiesFromCode = {};
         m.PROPERTIES_SCHEMA.forEach((data, index) => {
-            var _a, _b, _c;
             // @ts-ignore
-            (_c = (_b = (_a = window === null || window === void 0 ? void 0 : window.blocklet) === null || _a === void 0 ? void 0 : _a.languages) === null || _b === void 0 ? void 0 : _b.forEach) === null || _c === void 0 ? void 0 : _c.call(_b, (item) => {
-                var _a, _b;
+            window?.blocklet?.languages?.forEach?.((item) => {
                 const { code: localKey } = item;
-                if (!((_a = data === null || data === void 0 ? void 0 : data.locales) === null || _a === void 0 ? void 0 : _a[localKey])) {
+                if (!data?.locales?.[localKey]) {
                     // fallback to en
-                    (0, set_1.default)(data, `locales.${localKey}`, (_b = data.locales) === null || _b === void 0 ? void 0 : _b.en);
+                    (0, set_1.default)(data, `locales.${localKey}`, data.locales?.en);
                 }
             });
             propertiesFromCode[data.id] = {
@@ -195,10 +173,10 @@ function getPropertiesFromCode(m) {
     return propertiesFromCode;
 }
 const customComponentStates = () => {
-    states !== null && states !== void 0 ? states : (states = (0, zustand_1.create)()((0, immer_1.immer)((set, get) => ({
+    states ??= (0, zustand_1.create)()((0, immer_1.immer)((set, get) => ({
         state: {
-            config: Object.assign({}, PRELOAD_COMPONENTS_STATE === null || PRELOAD_COMPONENTS_STATE === void 0 ? void 0 : PRELOAD_COMPONENTS_STATE.config),
-            components: Object.fromEntries(Object.entries(Object.assign({}, PRELOAD_COMPONENTS_STATE === null || PRELOAD_COMPONENTS_STATE === void 0 ? void 0 : PRELOAD_COMPONENTS_STATE.components))
+            config: { ...PRELOAD_COMPONENTS_STATE?.config },
+            components: Object.fromEntries(Object.entries({ ...PRELOAD_COMPONENTS_STATE?.components })
                 .map(([componentId, preload]) => {
                 let Component;
                 if (preload.componentModuleGlobalVariable) {
@@ -218,15 +196,14 @@ const customComponentStates = () => {
                         console.warn(`Component global variable ${preload.componentModuleGlobalVariable} is not a function`);
                     }
                 }
-                return [componentId, Object.assign(Object.assign({}, preload), { Component })];
+                return [componentId, { ...preload, Component }];
             })
                 .filter((i) => !!i)),
-            instances: Object.assign({}, PRELOAD_COMPONENTS_STATE === null || PRELOAD_COMPONENTS_STATE === void 0 ? void 0 : PRELOAD_COMPONENTS_STATE.instances),
+            instances: { ...PRELOAD_COMPONENTS_STATE?.instances },
         },
         getComponent({ instanceId, componentId, locale }) {
-            var _a, _b, _c, _d;
             const { config: { supportedLocales }, components, instances, } = get().state;
-            if (!(supportedLocales === null || supportedLocales === void 0 ? void 0 : supportedLocales.some((i) => i.locale === locale)))
+            if (!supportedLocales?.some((i) => i.locale === locale))
                 return null;
             const c = components[componentId];
             if (!c)
@@ -235,93 +212,88 @@ const customComponentStates = () => {
             if (!Component)
                 return null;
             if (!instanceId) {
-                return { component, Component, componentProperties: (_a = components[componentId]) === null || _a === void 0 ? void 0 : _a.component.properties };
+                return { component, Component, componentProperties: components[componentId]?.component.properties };
             }
             const instance = instances[instanceId];
             if (!instance)
                 return null;
-            const props = (_c = (_b = instance.locales) === null || _b === void 0 ? void 0 : _b[locale]) === null || _c === void 0 ? void 0 : _c.props;
+            const props = instance.locales?.[locale]?.props;
             if (!props)
                 return null;
-            return { component, Component, props, componentProperties: (_d = components[componentId]) === null || _d === void 0 ? void 0 : _d.component.properties };
+            return { component, Component, props, componentProperties: components[componentId]?.component.properties };
         },
-        loadComponents(input) {
-            return __awaiter(this, void 0, void 0, function* () {
-                const result = yield loadComponents(input);
-                if (result) {
-                    set((s) => {
-                        s.state.config = result.config;
-                        Object.assign(s.state.components, result.components);
-                        Object.entries(result.instances).forEach(([instanceId, instance]) => {
-                            var _a, _b;
-                            var _c, _d;
-                            (_a = (_c = s.state.instances)[instanceId]) !== null && _a !== void 0 ? _a : (_c[instanceId] = { componentId: instance.componentId });
-                            (_b = (_d = s.state.instances[instanceId]).locales) !== null && _b !== void 0 ? _b : (_d.locales = {});
-                            Object.assign(s.state.instances[instanceId].locales, instance.locales);
-                        });
+        async loadComponents(input) {
+            const result = await loadComponents(input);
+            if (result) {
+                set((s) => {
+                    s.state.config = result.config;
+                    Object.assign(s.state.components, result.components);
+                    Object.entries(result.instances).forEach(([instanceId, instance]) => {
+                        s.state.instances[instanceId] ??= { componentId: instance.componentId };
+                        s.state.instances[instanceId].locales ??= {};
+                        Object.assign(s.state.instances[instanceId].locales, instance.locales);
                     });
-                }
-            });
+                });
+            }
         },
-    }))));
+    })));
     return states;
 };
 exports.customComponentStates = customComponentStates;
-function loadComponents(input) {
-    return __awaiter(this, void 0, void 0, function* () {
-        const result = yield (0, api_1.preloadComponents)(Object.assign(Object.assign({}, input), { module: types_1.PreloadComponentScriptModule.ESM }));
-        if (!result)
-            return null;
-        const components = Object.fromEntries(yield Promise.all(Object.values(result.components).map((item) => __awaiter(this, void 0, void 0, function* () {
-            if (item.script.module !== types_1.PreloadComponentScriptModule.ESM) {
-                throw new Error('received non esm component script');
-            }
-            const url = URL.createObjectURL(new Blob([item.script.script], { type: 'application/javascript' }));
-            const m = yield Promise.resolve(`${url}`).then(s => __importStar(require(s)));
-            if (typeof (m === null || m === void 0 ? void 0 : m.default) !== 'function') {
-                throw new Error(`Invalid custom component module: ${typeof (m === null || m === void 0 ? void 0 : m.default)}`);
-            }
-            return [
-                item.component.id,
-                {
-                    component: item.component,
-                    Component: importCustomComponent(m, { componentId: item.component.id }),
-                },
-            ];
-        }))));
-        return Object.assign(Object.assign({}, result), { components, instances: Object.fromEntries(result.instances.map((_a) => {
-                var { id } = _a, instance = __rest(_a, ["id"]);
-                return [id, instance];
-            })) });
-    });
+async function loadComponents(input) {
+    const result = await (0, api_1.preloadComponents)({ ...input, module: types_1.PreloadComponentScriptModule.ESM });
+    if (!result)
+        return null;
+    const components = Object.fromEntries(await Promise.all(Object.values(result.components).map(async (item) => {
+        if (item.script.module !== types_1.PreloadComponentScriptModule.ESM) {
+            throw new Error('received non esm component script');
+        }
+        const url = URL.createObjectURL(new Blob([item.script.script], { type: 'application/javascript' }));
+        const m = await Promise.resolve(`${url}`).then(s => __importStar(require(s)));
+        if (typeof m?.default !== 'function') {
+            throw new Error(`Invalid custom component module: ${typeof m?.default}`);
+        }
+        return [
+            item.component.id,
+            {
+                component: item.component,
+                Component: importCustomComponent(m, { componentId: item.component.id }),
+            },
+        ];
+    })));
+    return {
+        ...result,
+        components,
+        instances: Object.fromEntries(result.instances.map(({ id, ...instance }) => [id, instance])),
+    };
 }
 function useComponent({ instanceId, componentId, properties, locale, dev }) {
-    var _a, _b, _c;
     const transpile = useTranspileComponent({ componentId, locale, properties, dev });
     const preload = usePreloadComponent({ instanceId, componentId, properties, locale, dev });
-    const componentProperties = (_a = transpile === null || transpile === void 0 ? void 0 : transpile.componentProperties) !== null && _a !== void 0 ? _a : preload === null || preload === void 0 ? void 0 : preload.componentProperties;
+    const componentProperties = transpile?.componentProperties ?? preload?.componentProperties;
     return {
-        Component: (_b = transpile === null || transpile === void 0 ? void 0 : transpile.Component) !== null && _b !== void 0 ? _b : preload === null || preload === void 0 ? void 0 : preload.Component,
-        EditComponent: transpile === null || transpile === void 0 ? void 0 : transpile.EditComponent,
-        props: Object.assign(Object.assign({}, ((_c = transpile === null || transpile === void 0 ? void 0 : transpile.props) !== null && _c !== void 0 ? _c : preload === null || preload === void 0 ? void 0 : preload.props)), Object.fromEntries(Object.entries(properties !== null && properties !== void 0 ? properties : {})
-            .map(([key, { value }]) => {
-            var _a;
-            const property = (_a = componentProperties === null || componentProperties === void 0 ? void 0 : componentProperties[key]) === null || _a === void 0 ? void 0 : _a.data;
-            if (!property)
-                return undefined;
-            const v = (0, property_1.parsePropertyValue)(property, value, { locale, defaultLocale: dev === null || dev === void 0 ? void 0 : dev.defaultLocale });
-            // if key is undefined, use id
-            return [property.key || property.id, v];
-        })
-            .filter((i) => !!i))),
-        error: transpile === null || transpile === void 0 ? void 0 : transpile.error,
+        Component: transpile?.Component ?? preload?.Component,
+        EditComponent: transpile?.EditComponent,
+        props: {
+            ...(transpile?.props ?? preload?.props),
+            ...Object.fromEntries(Object.entries(properties ?? {})
+                .map(([key, { value }]) => {
+                const property = componentProperties?.[key]?.data;
+                if (!property)
+                    return undefined;
+                const v = (0, property_1.parsePropertyValue)(property, value, { locale, defaultLocale: dev?.defaultLocale });
+                // if key is undefined, use id
+                return [property.key || property.id, v];
+            })
+                .filter((i) => !!i)),
+        },
+        error: transpile?.error,
     };
 }
 const COMPONENT_LOADER_MAP = {};
 function usePreloadComponent({ instanceId, componentId, properties, locale, dev }) {
-    var _a, _b;
     const previousRef = (0, react_1.useRef)();
-    const requestLocale = (0, exports.customComponentStates)()((s) => { var _a; return ((_a = s.state.config.supportedLocales) === null || _a === void 0 ? void 0 : _a.some((i) => i.locale === locale)) ? locale : undefined; });
+    const requestLocale = (0, exports.customComponentStates)()((s) => s.state.config.supportedLocales?.some((i) => i.locale === locale) ? locale : undefined);
     const defaultLocale = (0, exports.customComponentStates)()((s) => s.state.config.defaultLocale);
     const realLocale = requestLocale || defaultLocale;
     const result = (0, exports.customComponentStates)()((s) => realLocale ? s.getComponent({ instanceId, componentId, locale: realLocale }) : undefined);
@@ -331,37 +303,38 @@ function usePreloadComponent({ instanceId, componentId, properties, locale, dev
     }
     if (instanceId) {
         const key = [instanceId, realLocale].join('-');
-        (_a = COMPONENT_LOADER_MAP[key]) !== null && _a !== void 0 ? _a : (COMPONENT_LOADER_MAP[key] = (0, exports.customComponentStates)()
+        COMPONENT_LOADER_MAP[key] ??= (0, exports.customComponentStates)()
             .getState()
             .loadComponents({
-            mode: dev === null || dev === void 0 ? void 0 : dev.mode,
-            projectId: (_b = dev === null || dev === void 0 ? void 0 : dev.projectId) !== null && _b !== void 0 ? _b : window.__PROJECT_ID__,
+            mode: dev?.mode,
+            projectId: dev?.projectId ?? window.__PROJECT_ID__,
             locale: realLocale,
             instances: [{ id: instanceId, component: { id: componentId }, properties }],
-        }));
+        });
         if (previousRef.current)
             return previousRef.current;
     }
     return null;
 }
 function useTranspileComponent({ componentId, locale, properties, dev: { defaultLocale, components } = {}, }) {
-    var _a, _b;
     const [{ error, Component, EditComponent, propertiesFromCode }, setComponent] = (0, react_1.useState)({});
     const component = (0, property_1.mergeComponent)({
         componentId,
         getComponent: (componentId) => {
-            var _a, _b, _c, _d;
             // setting properties from code if it's not set from components props
-            if (propertiesFromCode && (0, lodash_1.isEmpty)((_b = (_a = components === null || components === void 0 ? void 0 : components[componentId]) === null || _a === void 0 ? void 0 : _a.data) === null || _b === void 0 ? void 0 : _b.properties)) {
-                return Object.assign(Object.assign({}, (_c = components === null || components === void 0 ? void 0 : components[componentId]) === null || _c === void 0 ? void 0 : _c.data), { properties: propertiesFromCode });
+            if (propertiesFromCode && (0, lodash_1.isEmpty)(components?.[componentId]?.data?.properties)) {
+                return {
+                    ...components?.[componentId]?.data,
+                    properties: propertiesFromCode,
+                };
             }
-            return (_d = components === null || components === void 0 ? void 0 : components[componentId]) === null || _d === void 0 ? void 0 : _d.data;
+            return components?.[componentId]?.data;
         },
         locale,
         defaultLocale,
         properties,
     });
-    const script = (0, react_1.useDeferredValue)(component === null || component === void 0 ? void 0 : component.script);
+    const script = (0, react_1.useDeferredValue)(component?.script);
     (0, react_1.useEffect)(() => {
         if (script) {
             transpileAndLoadScript(script)
@@ -379,48 +352,45 @@ function useTranspileComponent({ componentId, locale, properties, dev: { default
         error,
         Component,
         EditComponent,
-        props: component === null || component === void 0 ? void 0 : component.properties,
-        componentProperties: (_b = (_a = components === null || components === void 0 ? void 0 : components[componentId]) === null || _a === void 0 ? void 0 : _a.data) === null || _b === void 0 ? void 0 : _b.properties,
+        props: component?.properties,
+        componentProperties: components?.[componentId]?.data?.properties,
     };
 }
-function transpileAndLoadScript(script) {
-    return __awaiter(this, void 0, void 0, function* () {
-        var _a, _b;
-        // @ts-ignore
-        if (import.meta.env.DEV && ((_a = window.__BLOCK_STUDIO__) === null || _a === void 0 ? void 0 : _a.getCodeImportPath)) {
-            try {
-                // @ts-ignore
-                const filePath = (0, ufo_1.joinURL)((_b = window.__BLOCK_STUDIO__) === null || _b === void 0 ? void 0 : _b.getCodeImportPath(script));
-                if (filePath) {
-                    // eslint-disable-next-line no-console
-                    console.info('get code import path from block studio:', filePath);
-                    const m = yield Promise.resolve(`${filePath}`).then(s => __importStar(require(s))).catch(() => null);
-                    if (m) {
-                        return m;
-                    }
+async function transpileAndLoadScript(script) {
+    // @ts-ignore
+    if (import.meta.env.DEV && window.__BLOCK_STUDIO__?.getCodeImportPath) {
+        try {
+            // @ts-ignore
+            const filePath = (0, ufo_1.joinURL)(window.__BLOCK_STUDIO__?.getCodeImportPath(script));
+            if (filePath) {
+                // eslint-disable-next-line no-console
+                console.info('get code import path from block studio:', filePath);
+                const m = await Promise.resolve(`${filePath}`).then(s => __importStar(require(s))).catch(() => null);
+                if (m) {
+                    return m;
                 }
             }
-            catch (e) {
-                // ignore error
-            }
         }
-        const [ts, { createBuiltinModuleTransformer }] = yield Promise.all([
-            Promise.resolve().then(() => __importStar(require('typescript'))).then((m) => m.default || m),
-            Promise.resolve().then(() => __importStar(require('../../utils/typescript/builtin-module-transformer'))),
-        ]);
-        const compiled = ts.transpileModule(script, {
-            compilerOptions: { jsx: ts.JsxEmit.React, module: ts.ModuleKind.ESNext, target: ts.ScriptTarget.ES2016 },
-            transformers: {
-                before: [createBuiltinModuleTransformer(ts)],
-            },
-        }).outputText;
-        // fallback to the original handling
-        const url = URL.createObjectURL(new Blob([compiled], { type: 'application/javascript' }));
-        try {
-            return yield Promise.resolve(`${url}`).then(s => __importStar(require(s)));
+        catch (e) {
+            // ignore error
         }
-        finally {
-            URL.revokeObjectURL(url);
-        }
-    });
+    }
+    const [ts, { createBuiltinModuleTransformer }] = await Promise.all([
+        Promise.resolve().then(() => __importStar(require('typescript'))).then((m) => m.default || m),
+        Promise.resolve().then(() => __importStar(require('../../utils/typescript/builtin-module-transformer'))),
+    ]);
+    const compiled = ts.transpileModule(script, {
+        compilerOptions: { jsx: ts.JsxEmit.React, module: ts.ModuleKind.ESNext, target: ts.ScriptTarget.ES2016 },
+        transformers: {
+            before: [createBuiltinModuleTransformer(ts)],
+        },
+    }).outputText;
+    // fallback to the original handling
+    const url = URL.createObjectURL(new Blob([compiled], { type: 'application/javascript' }));
+    try {
+        return await Promise.resolve(`${url}`).then(s => __importStar(require(s)));
+    }
+    finally {
+        URL.revokeObjectURL(url);
+    }
 }

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

@@ -1,33 +1,20 @@
 "use strict";
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.default = ResponsiveImage;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const Theme_1 = require("@arcblock/ux/lib/Theme");
 const material_1 = require("@mui/material");
-function ResponsiveImage(_a) {
-    var { src, sizesAttr, quality = 90, sx, alt } = _a, props = __rest(_a, ["src", "sizesAttr", "quality", "sx", "alt"]);
+function ResponsiveImage({ src, sizesAttr, quality = 90, sx, alt, ...props }) {
     const theme = (0, Theme_1.useTheme)();
     const breakpoints = theme.breakpoints.values;
     // Generate srcset based on each breakpoint width
     const generateSrcSet = (baseUrl, breakpointWidths) => {
-        var _a;
         // Check if URL already has query parameters
         if (baseUrl.includes('?')) {
             return '';
         }
         // Check file extension
-        const fileExtension = (_a = baseUrl.split('.').pop()) === null || _a === void 0 ? void 0 : _a.toLowerCase();
+        const fileExtension = baseUrl.split('.').pop()?.toLowerCase();
         const supportedExtensions = ['png', 'jpg', 'jpeg', 'webp', 'gif'];
         if (!fileExtension || !supportedExtensions.includes(fileExtension)) {
             return '';
@@ -64,5 +51,5 @@ function ResponsiveImage(_a) {
             .filter((size) => size !== null)
             .join(', ');
     };
-    return ((0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ component: "img", src: src, srcSet: generateSrcSet(src, sizesAttr), sizes: generateSizes(sizesAttr), alt: alt !== null && alt !== void 0 ? alt : '', loading: "lazy", sx: sx }, props)));
+    return ((0, jsx_runtime_1.jsx)(material_1.Box, { component: "img", src: src, srcSet: generateSrcSet(src, sizesAttr), sizes: generateSizes(sizesAttr), alt: alt ?? '', loading: "lazy", sx: sx, ...props }));
 }