@blocklet/pages-kit 0.4.113 → 0.4.115

package/lib/cjs/utils/property.js

@@ -41,7 +41,7 @@ function mergeComponent({ componentId, getComponent, locale, defaultLocale, prop
     if (!component)
         return null;
     let script;
-    const properties = Object.fromEntries(Object.entries(parameters ?? {}).map(([id, { value }]) => {
+    const props = Object.fromEntries(Object.entries(parameters ?? {}).map(([id, { value }]) => {
         const property = component?.properties?.[id]?.data;
         if (!property)
             return [];
@@ -49,7 +49,7 @@ function mergeComponent({ componentId, getComponent, locale, defaultLocale, prop
         return [property.key || property.id, parsePropertyValue(property, value, { locale, defaultLocale })];
     }));
     while (component) {
-        assignNullableFields(properties, Object.fromEntries(Object.values(component.properties ?? {}).map(({ data }) => [
+        assignNullableFields(props, Object.fromEntries(Object.values(component.properties ?? {}).map(({ data }) => [
             // if key is undefined, use id
             data.key || data.id,
             parsePropertyValue(data, data.locales?.[locale]?.defaultValue ?? data.locales?.[defaultLocale]?.defaultValue, { locale, defaultLocale }),
@@ -66,7 +66,7 @@ function mergeComponent({ componentId, getComponent, locale, defaultLocale, prop
             const { componentId } = component.renderer;
             const next = getComponent(componentId);
             const nextParameters = component.renderer.properties;
-            assignNullableFields(properties, Object.fromEntries(Object.entries(next?.properties ?? {}).map(([id, { data }]) => {
+            assignNullableFields(props, Object.fromEntries(Object.entries(next?.properties ?? {}).map(([id, { data }]) => {
                 const locales = nextParameters?.[id]?.locales;
                 return [
                     data.key,
@@ -84,7 +84,7 @@ function mergeComponent({ componentId, getComponent, locale, defaultLocale, prop
     }
     if (!script)
         return null;
-    return { script, properties };
+    return { script, props };
 }
 exports.RenderNestedComponent = '__RENDER_NESTED_COMPONENT__';
 function safeJSONParse(value) {

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

@@ -29,13 +29,14 @@ function ComponentRenderer({ renderCount = 0, blockletId, blockletTitle, compone
     const parsedProps = 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] = parsePropertyValue(property, result[key] ?? defaultValue, {
                 locale: props?.locale,

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

@@ -241,49 +241,53 @@ export 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 = 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 = 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 = 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 = useRef();
+const getRealLocale = (locale) => {
     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);
+    return requestLocale || defaultLocale;
+};
+const getComponentByComponentId = ({ componentId, locale, instanceId, }) => {
+    const realLocale = getRealLocale(locale);
+    const result = customComponentStates()((s) => realLocale ? s.getComponent({ componentId, locale: realLocale, instanceId }) : undefined);
+    return result;
+};
+function usePreloadComponent({ instanceId, componentId, properties, locale, dev }) {
+    const previousRef = useRef();
+    const realLocale = getRealLocale(locale);
+    const result = getComponentByComponentId({ componentId, locale: realLocale, instanceId });
     if (result) {
         previousRef.current = result;
         return result;
@@ -339,7 +343,7 @@ function useTranspileComponent({ componentId, locale, properties, dev: { default
         error,
         Component,
         EditComponent,
-        props: component?.properties,
+        props: component?.props,
         componentProperties: components?.[componentId]?.data?.properties,
     };
 }