@blocklet/pages-kit 0.4.105 → 0.4.107

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

@@ -48,7 +48,7 @@ function ComponentRenderer({ renderCount = 0, blockletId, blockletTitle, compone
         throw component.error;
     }
     const renderComponentChildren = (Component) => {
-        const children = ((0, jsx_runtime_1.jsx)(Renderer, { renderCount: renderCount + 1, ...props, Component: Component, props: { ...component?.props, ...props.props } }));
+        const children = ((0, jsx_runtime_1.jsx)(Renderer, { renderCount: renderCount + 1, ...props, Component: Component, props: { ...component?.props } }));
         return ctx?.customRendererComponent ? ((0, jsx_runtime_1.jsx)(ctx.customRendererComponent, { Component: Component, children: children })) : (children);
     };
     if (component?.Component && renderType === 'view') {
@@ -65,10 +65,14 @@ function ComponentRenderer({ renderCount = 0, blockletId, blockletTitle, compone
 }
 function Renderer({ renderCount, Component, locale, props, }) {
     const componentProps = Object.fromEntries(Object.entries(props).map(([key, val]) => {
-        return [
-            key,
-            val?.type === property_1.RenderNestedComponent ? ((0, jsx_runtime_1.jsx)(ComponentRenderer, { locale: locale, renderCount: renderCount, componentId: val.componentId, properties: val.properties, props: val.props })) : (val),
-        ];
+        // if is NestedComponent, render it
+        if (val?.type === property_1.RenderNestedComponent) {
+            return [
+                key,
+                (0, jsx_runtime_1.jsx)(ComponentRenderer, { locale: locale, renderCount: renderCount, componentId: val.componentId, properties: val.properties, props: val.props }),
+            ];
+        }
+        return [key, val];
     }));
     return (0, jsx_runtime_1.jsx)(Component, { locale: locale, ...componentProps });
 }

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

@@ -108,7 +108,10 @@ function importCustomComponent(m, { componentId }) {
                 }
                 return null;
             }, [loading, error, ResolvedComponent, props]);
-            return ((0, jsx_runtime_1.jsx)(material_1.Fade, { in: !loading, timeout: 500, children: (0, jsx_runtime_1.jsx)(material_1.Box, { className: "CustomComponent-root", children: content }) }));
+            return ((0, jsx_runtime_1.jsx)(material_1.Fade, { in: !loading, timeout: 500, children: (0, jsx_runtime_1.jsx)(material_1.Box, { className: "CustomComponent-root", sx: {
+                        // 使用 display: contents 避免外层包裹的 div 样式影响组件内部样式
+                        display: 'contents',
+                    }, children: content }) }));
         };
     }
     // non-Promise case
@@ -267,7 +270,7 @@ async function loadComponents(input) {
         instances: Object.fromEntries(result.instances.map(({ id, ...instance }) => [id, instance])),
     };
 }
-function useComponent({ instanceId, componentId, properties, locale, dev }) {
+function useComponent({ instanceId, componentId, properties, locale, dev, props, }) {
     const transpile = useTranspileComponent({ componentId, locale, properties, dev });
     const preload = usePreloadComponent({ instanceId, componentId, properties, locale, dev });
     const componentProperties = transpile?.componentProperties ?? preload?.componentProperties;
@@ -281,8 +284,12 @@ function useComponent({ instanceId, componentId, properties, locale, dev }) {
                 const property = componentProperties?.[key]?.data;
                 if (!property)
                     return undefined;
+                // 如果提供了 key 优先使用 key
+                const propKey = property.key ?? property.id;
+                // 如果提供了 props 优先使用 props 中的值
+                const propValue = props?.[propKey] ?? value;
                 // keep preload props
-                let v = (0, property_1.parsePropertyValue)(property, value, {
+                let v = (0, property_1.parsePropertyValue)(property, propValue, {
                     locale,
                     defaultLocale: dev?.defaultLocale,
                 });
@@ -296,7 +303,7 @@ function useComponent({ instanceId, componentId, properties, locale, dev }) {
                     };
                 }
                 // if key is undefined, use id
-                return [property.key || property.id, v];
+                return [propKey, v];
             })
                 .filter((i) => !!i)),
         },