@blocklet/pages-kit 0.6.38 → 0.6.40

package/lib/cjs/utils/property.js

@@ -119,12 +119,7 @@ const initDynamicParsePropertyValueHandlers = () => {
         initDynamicPropertyHandlersPromise = (async () => {
             dynamicPropertyHandlers = {};
             if ((0, common_1.isBrowserEnv)()) {
-                // colorConvert 目前需要前端环境才能处理，依赖 mui theme
-                // @ts-ignore
-                const colorConvertFn = globalThis[common_1.COLOR_CONVERT_FUNCTION_NAME];
-                if (typeof colorConvertFn === 'function') {
-                    dynamicPropertyHandlers.color = (value) => colorConvertFn(value);
-                }
+                // do nothing
             }
             return dynamicPropertyHandlers;
         })();

package/lib/cjs/utils/style.js

@@ -147,12 +147,12 @@ function parseColor(color = '') {
  * @param _theme - 主题对象，默认为全局主题
  * @returns 转换后的颜色字符串
  */
-function colorConvert(color, _theme = blockletTheme) {
+function colorConvert(color, theme = blockletTheme) {
     if ((0, common_1.isMuiColorKey)(color)) {
         if (color === 'transparent') {
             return 'transparent';
         }
-        return (0, get_1.default)(_theme.palette, color, color);
+        return (0, get_1.default)(theme.palette, color, color);
     }
     // 处理渐变和普通颜色
     if (isGradient(color)) {
@@ -163,10 +163,6 @@ function colorConvert(color, _theme = blockletTheme) {
     }
     return color || '';
 }
-if ((0, common_1.isBrowserEnv)()) {
-    // @ts-ignore inject colorConvert to globalThis
-    globalThis[common_1.COLOR_CONVERT_FUNCTION_NAME] = colorConvert;
-}
 function getTransparentBackground() {
     return 'repeating-conic-gradient(#CCCCCC 0% 25%, #FFFFFF 0% 50%) 50% / 10px 10px';
 }

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

@@ -1,6 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useMemo } from 'react';
 import { ErrorBoundary } from 'react-error-boundary';
+import { useColorConvert } from '../../contexts/color';
 import { RenderNestedComponent, parsePropertyValue } from '../../utils/property';
 import BlockletReactComponentRenderer from './BlockletReactComponentRenderer';
 import { DevProvider, useDev } from './DevProvider';
@@ -25,6 +26,7 @@ function ComponentRenderer({ renderCount = 0, blockletId, blockletTitle, compone
     }
     const component = useComponent({ ...props, dev });
     const ctx = useCustomComponentRenderer();
+    const colorConvert = useColorConvert();
     // 传递过来的参数，需要确保经过前端 parsePropertyValue 处理，并且补全不存在的参数
     const parsedProps = useMemo(() => {
         const result = {
@@ -41,10 +43,13 @@ function ComponentRenderer({ renderCount = 0, blockletId, blockletTitle, compone
             result[key] = parsePropertyValue(property, result[key] ?? defaultValue, {
                 locale: props?.locale,
                 defaultLocale,
+                propertyHandlers: {
+                    color: (value) => colorConvert(value),
+                },
             });
         });
         return result;
-    }, [props?.props, component?.properties, component?.props]);
+    }, [props?.props, component?.properties, component?.props, colorConvert]);
     const renderComponentChildren = (Component) => {
         const children = _jsx(Renderer, { renderCount: renderCount + 1, ...props, Component: Component, props: parsedProps });
         return ctx?.customRendererComponent ? (_jsx(ctx.customRendererComponent, { Component: Component, children: children })) : (children);