@blocklet/pages-kit 0.4.32 → 0.4.33

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

@@ -1,14 +1,3 @@
-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;
-};
 import { jsx as _jsx } from "react/jsx-runtime";
 import { ErrorBoundary } from 'react-error-boundary';
 import { RenderNestedComponent } from '../../utils/property';
@@ -20,40 +9,36 @@ import { useComponent } from './state';
 export * from './state';
 export * from './context';
 const MAXIMUM_RENDER_STACK_SIZE = 20;
-export default function CustomComponentRenderer(_a) {
-    var _b;
-    var { dev } = _a, props = __rest(_a, ["dev"]);
+export default function CustomComponentRenderer({ dev, ...props }) {
     const inheritedDev = useDev();
     const BuiltinComponent = BuiltinComponents[props.componentId];
-    return (_jsx(ErrorBoundary, { FallbackComponent: (props === null || props === void 0 ? void 0 : props.fallbackRender) || ComponentError, resetKeys: [Date.now()], children: _jsx(DevProvider, { dev: dev !== null && dev !== void 0 ? dev : inheritedDev, children: BuiltinComponent ? (_jsx(BuiltinComponent, Object.assign({}, props))) : (_jsx(ComponentRenderer, Object.assign({}, props, { instanceId: (_b = props.instanceId) !== null && _b !== void 0 ? _b : props.componentId, renderType: props.renderType }))) }) }));
+    return (_jsx(ErrorBoundary, { FallbackComponent: props?.fallbackRender || ComponentError, resetKeys: [Date.now()], children: _jsx(DevProvider, { dev: dev ?? inheritedDev, children: BuiltinComponent ? (_jsx(BuiltinComponent, { ...props })) : (_jsx(ComponentRenderer, { ...props, instanceId: props.instanceId ?? props.componentId, renderType: props.renderType })) }) }));
 }
 const BuiltinComponents = {
     'blocklet-react-component': BlockletReactComponentRenderer,
 };
-function ComponentRenderer(_a) {
-    var _b;
-    var { renderCount = 0, blockletId, blockletTitle, componentName, renderType = 'view' } = _a, props = __rest(_a, ["renderCount", "blockletId", "blockletTitle", "componentName", "renderType"]);
+function ComponentRenderer({ renderCount = 0, blockletId, blockletTitle, componentName, renderType = 'view', ...props }) {
     const dev = useDev();
     if (renderCount > MAXIMUM_RENDER_STACK_SIZE) {
         throw new Error('Maximum render stack size exceeded');
     }
-    const component = useComponent(Object.assign(Object.assign({}, props), { dev }));
+    const component = useComponent({ ...props, dev });
     const ctx = useCustomComponentRenderer();
-    if (component === null || component === void 0 ? void 0 : component.error) {
+    if (component?.error) {
         throw component.error;
     }
     const renderComponentChildren = (Component) => {
-        const children = (_jsx(Renderer, Object.assign({ renderCount: renderCount + 1 }, props, { Component: Component, props: Object.assign(Object.assign({}, component === null || component === void 0 ? void 0 : component.props), props.props) })));
-        return (ctx === null || ctx === void 0 ? void 0 : ctx.customRendererComponent) ? (_jsx(ctx.customRendererComponent, { Component: Component, children: children })) : (children);
+        const children = (_jsx(Renderer, { renderCount: renderCount + 1, ...props, Component: Component, props: { ...component?.props, ...props.props } }));
+        return ctx?.customRendererComponent ? (_jsx(ctx.customRendererComponent, { Component: Component, children: children })) : (children);
     };
-    if ((component === null || component === void 0 ? void 0 : component.Component) && renderType === 'view') {
+    if (component?.Component && renderType === 'view') {
         return renderComponentChildren(component.Component);
     }
-    if ((component === null || component === void 0 ? void 0 : component.EditComponent) && renderType === 'setting') {
+    if (component?.EditComponent && renderType === 'setting') {
         return renderComponentChildren(component.EditComponent);
     }
     // if the component is not in the dev.components, it means the component is not loaded
-    if ((dev === null || dev === void 0 ? void 0 : dev.mode) === 'draft' && dev && ((_b = dev.components) === null || _b === void 0 ? void 0 : _b[props.componentId]) === undefined) {
+    if (dev?.mode === 'draft' && dev && dev.components?.[props.componentId] === undefined) {
         return (_jsx(ComponentError, { componentId: props.componentId, componentName: componentName, blockletId: blockletId, blockletTitle: blockletTitle, message: "Component not found in available components", showHints: true }));
     }
     return null;
@@ -62,8 +47,8 @@ function Renderer({ renderCount, Component, locale, props, }) {
     const componentProps = Object.fromEntries(Object.entries(props).map(([key, val]) => {
         return [
             key,
-            (val === null || val === void 0 ? void 0 : val.type) === RenderNestedComponent ? (_jsx(ComponentRenderer, { locale: locale, renderCount: renderCount, componentId: val.componentId, properties: val.properties, props: val.props })) : (val),
+            val?.type === RenderNestedComponent ? (_jsx(ComponentRenderer, { locale: locale, renderCount: renderCount, componentId: val.componentId, properties: val.properties, props: val.props })) : (val),
         ];
     }));
-    return _jsx(Component, Object.assign({ locale: locale }, componentProps));
+    return _jsx(Component, { locale: locale, ...componentProps });
 }

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

@@ -1,23 +1,3 @@
-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;
-};
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { cx } from '@emotion/css';
 import { Skeleton, Fade, Box } from '@mui/material';
@@ -46,9 +26,9 @@ function importCustomComponent(m, { componentId }) {
             // 只在组件首次加载时执行，避免重复加载
             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) {
@@ -76,7 +56,7 @@ function importCustomComponent(m, { componentId }) {
                             setLoading(false);
                         }
                     }
-                });
+                };
                 loadComponent();
                 return () => {
                     isMounted = false;
@@ -92,7 +72,7 @@ function importCustomComponent(m, { componentId }) {
                 }
                 // 动态渲染组件，但允许props更新传递
                 if (ResolvedComponent) {
-                    return _jsx(ResolvedComponent, Object.assign({}, props));
+                    return _jsx(ResolvedComponent, { ...props });
                 }
                 return null;
             }, [loading, error, ResolvedComponent, props]);
@@ -131,7 +111,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) => (_jsxs(_Fragment, { children: [_jsx(Helmet, { children: _jsx("style", { children: css }) }), _jsx(OriginalComponent, Object.assign({}, props, { className: cx(props.className, `CustomComponent_${componentId}`) }))] }));
+        Component = (props) => (_jsxs(_Fragment, { children: [_jsx(Helmet, { children: _jsx("style", { children: css }) }), _jsx(OriginalComponent, { ...props, className: cx(props.className, `CustomComponent_${componentId}`) })] }));
     }
     // keep aigneOutputValueSchema
     if (Component && m.aigneOutputValueSchema) {
@@ -141,17 +121,15 @@ function importCustomComponent(m, { componentId }) {
 }
 export 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
-                    set(data, `locales.${localKey}`, (_b = data.locales) === null || _b === void 0 ? void 0 : _b.en);
+                    set(data, `locales.${localKey}`, data.locales?.en);
                 }
             });
             propertiesFromCode[data.id] = {
@@ -163,10 +141,10 @@ export function getPropertiesFromCode(m) {
     return propertiesFromCode;
 }
 export const customComponentStates = () => {
-    states !== null && states !== void 0 ? states : (states = create()(immer((set, get) => ({
+    states ??= create()(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) {
@@ -186,15 +164,14 @@ export 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)
@@ -203,92 +180,87 @@ export 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;
 };
-function loadComponents(input) {
-    return __awaiter(this, void 0, void 0, function* () {
-        const result = yield preloadComponents(Object.assign(Object.assign({}, input), { module: 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 !== 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 import(/* @vite-ignore */ url);
-            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 preloadComponents({ ...input, module: PreloadComponentScriptModule.ESM });
+    if (!result)
+        return null;
+    const components = Object.fromEntries(await Promise.all(Object.values(result.components).map(async (item) => {
+        if (item.script.module !== 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 import(/* @vite-ignore */ url);
+        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])),
+    };
 }
 export 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 = 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 = 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 = useRef();
-    const requestLocale = 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 = customComponentStates()((s) => s.state.config.supportedLocales?.some((i) => i.locale === locale) ? locale : undefined);
     const defaultLocale = customComponentStates()((s) => s.state.config.defaultLocale);
     const realLocale = requestLocale || defaultLocale;
     const result = customComponentStates()((s) => realLocale ? s.getComponent({ instanceId, componentId, locale: realLocale }) : undefined);
@@ -298,37 +270,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] = customComponentStates()
+        COMPONENT_LOADER_MAP[key] ??= 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] = useState({});
     const component = mergeComponent({
         componentId,
         getComponent: (componentId) => {
-            var _a, _b, _c, _d;
             // setting properties from code if it's not set from components props
-            if (propertiesFromCode && 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 && 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 = useDeferredValue(component === null || component === void 0 ? void 0 : component.script);
+    const script = useDeferredValue(component?.script);
     useEffect(() => {
         if (script) {
             transpileAndLoadScript(script)
@@ -346,48 +319,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,
     };
 }
-export 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 = 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 import(/* @vite-ignore */ filePath).catch(() => null);
-                    if (m) {
-                        return m;
-                    }
+export async function transpileAndLoadScript(script) {
+    // @ts-ignore
+    if (import.meta.env.DEV && window.__BLOCK_STUDIO__?.getCodeImportPath) {
+        try {
+            // @ts-ignore
+            const filePath = 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 import(/* @vite-ignore */ filePath).catch(() => null);
+                if (m) {
+                    return m;
                 }
             }
-            catch (e) {
-                // ignore error
-            }
         }
-        const [ts, { createBuiltinModuleTransformer }] = yield Promise.all([
-            import('typescript').then((m) => m.default || m),
-            import('../../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 import(/* @vite-ignore */ url);
+        catch (e) {
+            // ignore error
         }
-        finally {
-            URL.revokeObjectURL(url);
-        }
-    });
+    }
+    const [ts, { createBuiltinModuleTransformer }] = await Promise.all([
+        import('typescript').then((m) => m.default || m),
+        import('../../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 import(/* @vite-ignore */ url);
+    }
+    finally {
+        URL.revokeObjectURL(url);
+    }
 }

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

@@ -1,30 +1,17 @@
-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;
-};
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useTheme } from '@arcblock/ux/lib/Theme';
 import { Box } from '@mui/material';
-export default function ResponsiveImage(_a) {
-    var { src, sizesAttr, quality = 90, sx, alt } = _a, props = __rest(_a, ["src", "sizesAttr", "quality", "sx", "alt"]);
+export default function ResponsiveImage({ src, sizesAttr, quality = 90, sx, alt, ...props }) {
     const theme = 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 '';
@@ -61,5 +48,5 @@ export default function ResponsiveImage(_a) {
             .filter((size) => size !== null)
             .join(', ');
     };
-    return (_jsx(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 (_jsx(Box, { component: "img", src: src, srcSet: generateSrcSet(src, sizesAttr), sizes: generateSizes(sizesAttr), alt: alt ?? '', loading: "lazy", sx: sx, ...props }));
 }