@blocklet/pages-kit 0.6.104 → 0.6.105

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

@@ -42,6 +42,7 @@ const ufo_1 = require("ufo");
 const zustand_1 = require("zustand");
 const immer_1 = require("zustand/middleware/immer");
 const api_1 = require("../../api");
+const use_deep_compare_memo_1 = require("../../hooks/use-deep-compare-memo");
 const types_1 = require("../../types");
 const preload_1 = require("../../types/preload");
 const property_1 = require("../../utils/property");
@@ -285,7 +286,7 @@ function useComponent({ instanceId, componentId, properties, locale, dev }) {
     // mode: production 不会有 transpile.props, dev 模式下会有 transpile.props，优先级最低
     const componentProps = transpile?.props ?? preload?.props;
     // 对 properties 进行转译，优先级中等
-    const dynamicComponentProps = (0, react_1.useMemo)(() => {
+    const dynamicComponentProps = (0, use_deep_compare_memo_1.useDeepCompareMemo)(() => {
         return Object.fromEntries(Object.entries(properties ?? {})
             .map(([key, { value }]) => {
             const property = componentProperties?.[key]?.data;
@@ -302,7 +303,7 @@ function useComponent({ instanceId, componentId, properties, locale, dev }) {
             return [propKey, v];
         })
             .filter((i) => !!i));
-    }, [JSON.stringify(properties), JSON.stringify(componentProperties), locale, dev?.defaultLocale]);
+    }, [properties, componentProperties, locale, dev?.defaultLocale]);
     return {
         Component: transpile?.Component ?? preload?.Component,
         EditComponent: transpile?.EditComponent,

package/lib/cjs/hooks/use-deep-compare-callback.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useDeepCompareCallback = void 0;
+const use_deep_compare_memo_1 = require("./use-deep-compare-memo");
+const useDeepCompareCallback = (callback, deps) => {
+    return (0, use_deep_compare_memo_1.useDeepCompareMemo)(() => callback, deps);
+};
+exports.useDeepCompareCallback = useDeepCompareCallback;

package/lib/cjs/hooks/use-deep-compare-memo.js

@@ -0,0 +1,16 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useDeepCompareMemo = void 0;
+const react_1 = require("react");
+const react_fast_compare_1 = __importDefault(require("react-fast-compare"));
+const useDeepCompareMemo = (factory, deps) => {
+    const ref = (0, react_1.useRef)(null);
+    if (!ref.current || !(0, react_fast_compare_1.default)(ref.current.deps, deps)) {
+        ref.current = { deps, value: factory() };
+    }
+    return ref.current.value;
+};
+exports.useDeepCompareMemo = useDeepCompareMemo;