@blocklet/pages-kit 0.4.113 → 0.4.115

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

@@ -49,13 +49,14 @@ function ComponentRenderer({ renderCount = 0, blockletId, blockletTitle, compone
     const parsedProps = (0, react_1.useMemo)(() => {
         const result = {
             ...component?.props,
+            // 外部传递进来的 props 优先级最高
             ...props?.props,
         };
+        const defaultLocale = dev?.defaultLocale ?? 'en';
+        const locale = props?.locale;
         Object.entries(component?.properties ?? {}).forEach(([id, value]) => {
             const { data: property } = value;
             const key = property.key ?? property.id ?? id;
-            const defaultLocale = dev?.defaultLocale ?? 'en';
-            const locale = props?.locale;
             const defaultValue = property.locales?.[locale]?.defaultValue ?? property.locales?.[defaultLocale]?.defaultValue;
             result[key] = (0, property_1.parsePropertyValue)(property, result[key] ?? defaultValue, {
                 locale: props?.locale,

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

@@ -274,49 +274,53 @@ function useComponent({ instanceId, componentId, properties, locale, dev }) {
     const transpile = useTranspileComponent({ componentId, locale, properties, dev });
     const preload = usePreloadComponent({ instanceId, componentId, properties, locale, dev });
     const componentProperties = transpile?.componentProperties ?? preload?.componentProperties;
+    // mode: production 不会有 transpile.props, dev 模式下会有 transpile.props，优先级最低
+    const componentProps = transpile?.props ?? preload?.props;
+    // 对 properties 进行转译，优先级中等
+    const dynamicComponentProps = (0, react_1.useMemo)(() => {
+        return Object.fromEntries(Object.entries(properties ?? {})
+            .map(([key, { value }]) => {
+            const property = componentProperties?.[key]?.data;
+            if (!property)
+                return undefined;
+            // if key is undefined, use id
+            const propKey = property.key ?? property.id;
+            const propValue = value;
+            // keep preload props
+            const v = (0, property_1.parsePropertyValue)(property, propValue, {
+                locale,
+                defaultLocale: dev?.defaultLocale,
+            });
+            return [propKey, v];
+        })
+            .filter((i) => !!i));
+    }, [JSON.stringify(properties), JSON.stringify(componentProperties), locale, dev?.defaultLocale]);
     return {
         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;
-                // 如果提供了 key 优先使用 key
-                const propKey = property.key ?? property.id;
-                const propValue = value;
-                // keep preload props
-                let v = (0, property_1.parsePropertyValue)(property, propValue, {
-                    locale,
-                    defaultLocale: dev?.defaultLocale,
-                });
-                if (dev?.mode === 'production' &&
-                    property.type === 'component' &&
-                    property.key &&
-                    preload?.props?.[property.key]) {
-                    v = {
-                        ...(preload?.props?.[property.key] ?? {}),
-                        ...v,
-                    };
-                }
-                // if key is undefined, use id
-                return [propKey, v];
-            })
-                .filter((i) => !!i)),
+            ...componentProps,
+            ...dynamicComponentProps,
         },
         error: transpile?.error,
         properties: componentProperties,
     };
 }
 const COMPONENT_LOADER_MAP = {};
-function usePreloadComponent({ instanceId, componentId, properties, locale, dev }) {
-    const previousRef = (0, react_1.useRef)();
+const getRealLocale = (locale) => {
     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);
+    return requestLocale || defaultLocale;
+};
+const getComponentByComponentId = ({ componentId, locale, instanceId, }) => {
+    const realLocale = getRealLocale(locale);
+    const result = (0, exports.customComponentStates)()((s) => realLocale ? s.getComponent({ componentId, locale: realLocale, instanceId }) : undefined);
+    return result;
+};
+function usePreloadComponent({ instanceId, componentId, properties, locale, dev }) {
+    const previousRef = (0, react_1.useRef)();
+    const realLocale = getRealLocale(locale);
+    const result = getComponentByComponentId({ componentId, locale: realLocale, instanceId });
     if (result) {
         previousRef.current = result;
         return result;
@@ -372,7 +376,7 @@ function useTranspileComponent({ componentId, locale, properties, dev: { default
         error,
         Component,
         EditComponent,
-        props: component?.properties,
+        props: component?.props,
         componentProperties: components?.[componentId]?.data?.properties,
     };
 }