perf: don't remount slot when parent changes

Author: chrisvxd

packages/core/components/DropZone/index.tsx

@@ -46,7 +46,7 @@ import { renderContext } from "../Render";
 import { useSlots } from "../../lib/use-slots";
 import { ContextSlotRender, SlotRenderPure } from "../SlotRender";
 import { expandNode } from "../../lib/data/flatten-node";
-import { useFieldTransforms } from "../../lib/field-transforms/use-field-transforms";
+import { useFieldTransformsTracked } from "../../lib/field-transforms/use-field-transforms-tracked";
 import { getInlineTextTransform } from "../../lib/field-transforms/default-transforms/inline-text-transform";
 import { getSlotTransform } from "../../lib/field-transforms/default-transforms/slot-transform";
 import { getRichTextTransform } from "../../lib/field-transforms/default-transforms/rich-text-transform";
@@ -214,7 +214,7 @@ const DropZoneChild = ({
     [plugins, userFieldTransforms]
   );
 
-  const transformedProps = useFieldTransforms(
+  const transformedProps = useFieldTransformsTracked(
     config,
     defaultedNode,
     combinedFieldTransforms,

packages/core/lib/data/map-fields.ts

@@ -204,29 +204,34 @@ export function mapFields<T extends ComponentData | RootData>(
   item: T,
   mappers: Mappers<MapFn>,
   config: Config,
-  recurseSlots?: boolean
+  recurseSlots?: boolean,
+  shouldDefaultSlots?: boolean
 ): T;
 
 export function mapFields<T extends ComponentData | RootData>(
   item: T,
   mappers: Mappers<PromiseMapFn>,
   config: Config,
-  recurseSlots?: boolean
+  recurseSlots?: boolean,
+  shouldDefaultSlots?: boolean
 ): Promise<T>;
 
 export function mapFields(
   item: any,
   mappers: Mappers,
   config: Config,
-  recurseSlots: boolean = false
+  recurseSlots: boolean = false,
+  shouldDefaultSlots: boolean = true
 ): any {
   const itemType = "type" in item ? item.type : "root";
 
   const componentConfig =
     itemType === "root" ? config.root : config.components?.[itemType];
 
   const newProps = walkObject({
-    value: defaultSlots(item.props ?? {}, componentConfig?.fields ?? {}),
+    value: shouldDefaultSlots
+      ? defaultSlots(item.props ?? {}, componentConfig?.fields ?? {})
+      : item.props,
     fields: componentConfig?.fields ?? {},
     mappers,
     id: item.props ? item.props.id ?? "root" : "root",

packages/core/lib/field-transforms/build-mappers.ts

@@ -0,0 +1,58 @@
+import {
+  ComponentData,
+  Config,
+  ExtractField,
+  Field,
+  UserGenerics,
+} from "../../types";
+import { MapFnParams, Mappers } from "../data/map-fields";
+import {
+  FieldTransformFn,
+  FieldTransforms,
+} from "../../types/API/FieldTransforms";
+
+/**
+ * Converts transformers to mappers
+ *
+ * Transformers are the same as mappers, except they receive the additional `isReadOnly` param.
+ * This converts transformers to mappers by adding the `isReadOnly` param.
+ */
+export function buildMappers<
+  T extends ComponentData,
+  UserConfig extends Config,
+  G extends UserGenerics<UserConfig>
+>(
+  transforms: FieldTransforms,
+  readOnly?: T["readOnly"],
+  forceReadOnly?: boolean
+) {
+  return Object.keys(transforms).reduce<Mappers>((acc, _fieldType) => {
+    const fieldType = _fieldType as Field["type"]; // Not strictly true, as could include user fields, but this should be safe enough
+
+    return {
+      ...acc,
+      [fieldType]: ({
+        parentId,
+        ...params
+      }: MapFnParams<ExtractField<G["UserField"], Field["type"]>>) => {
+        const wildcardPath = params.propPath.replace(/\[\d+\]/g, "[*]");
+
+        const isReadOnly =
+          readOnly?.[params.propPath] ||
+          readOnly?.[wildcardPath] ||
+          forceReadOnly ||
+          false;
+
+        const fn = transforms[fieldType] as FieldTransformFn<
+          ExtractField<G["UserField"], Field["type"]>
+        >;
+
+        return fn?.({
+          ...params,
+          isReadOnly,
+          componentId: parentId,
+        });
+      },
+    };
+  }, {});
+}

packages/core/lib/field-transforms/use-field-transforms-tracked.tsx

@@ -0,0 +1,75 @@
+"use client";
+
+import { ComponentData, Config } from "../../types";
+import { useMemo, useRef } from "react";
+import { mapFields, Mappers } from "../data/map-fields";
+import { FieldTransforms } from "../../types/API/FieldTransforms";
+import { buildMappers } from "./build-mappers";
+
+export function useFieldTransformsTracked<
+  T extends ComponentData,
+  UserConfig extends Config
+>(
+  config: UserConfig,
+  item: T,
+  transforms: FieldTransforms,
+  readOnly?: T["readOnly"],
+  forceReadOnly?: boolean
+): T["props"] {
+  const prevProps = useRef<Record<string, any>>(null);
+  const prevResult = useRef<Record<string, any>>(item.props);
+
+  const mappers = useMemo<Mappers>(
+    () => buildMappers(transforms, readOnly, forceReadOnly),
+    [transforms, readOnly, forceReadOnly]
+  );
+
+  const transformedProps = useMemo(() => {
+    // Filter to changed fields only (shallow comparison)
+    const changedProps: Record<string, any> = {};
+
+    const componentConfig =
+      item.type === "root" ? config.root : config.components?.[item.type];
+
+    let changeIncludesSlot = false;
+
+    for (const fieldName in item.props) {
+      const fieldType = componentConfig?.fields?.[fieldName]?.type;
+
+      if (
+        !prevProps.current ||
+        item.props[fieldName] !== prevProps.current[fieldName]
+      ) {
+        changedProps[fieldName] = item.props[fieldName];
+
+        if (fieldType === "slot") {
+          changeIncludesSlot = true;
+        }
+      }
+    }
+
+    // Always include ID
+    changedProps.id = item.props.id;
+
+    prevProps.current = item.props;
+
+    const mapped = mapFields(
+      { ...item, props: changedProps },
+      mappers,
+      config,
+      false,
+      changeIncludesSlot
+    ).props;
+
+    prevResult.current = { ...prevResult.current, ...mapped };
+
+    return prevResult.current;
+  }, [config, item, mappers]);
+
+  const mergedProps = useMemo(
+    () => ({ ...item.props, ...transformedProps }),
+    [item.props, transformedProps]
+  );
+
+  return mergedProps;
+}

packages/core/lib/field-transforms/use-field-transforms.tsx

@@ -1,66 +1,26 @@
-import {
-  ComponentData,
-  Config,
-  ExtractField,
-  Field,
-  UserGenerics,
-} from "../../types";
+import { ComponentData, Config } from "../../types";
 import { useMemo } from "react";
-import { mapFields, MapFnParams, Mappers } from "../data/map-fields";
-import {
-  FieldTransformFn,
-  FieldTransforms,
-} from "../../types/API/FieldTransforms";
+import { mapFields, Mappers } from "../data/map-fields";
+import { FieldTransforms } from "../../types/API/FieldTransforms";
+import { buildMappers } from "./build-mappers";
 
 export function useFieldTransforms<
   T extends ComponentData,
-  UserConfig extends Config,
-  G extends UserGenerics<UserConfig>
+  UserConfig extends Config
 >(
   config: UserConfig,
   item: T,
   transforms: FieldTransforms,
   readOnly?: T["readOnly"],
   forceReadOnly?: boolean
 ): T["props"] {
-  // Transformers are the same as mappers, except they receive the additional `isReadOnly` param.
-  // This converts transformers to mappers by adding the `isReadOnly` param
-  const mappers = useMemo<Mappers>(() => {
-    return Object.keys(transforms).reduce<Mappers>((acc, _fieldType) => {
-      const fieldType = _fieldType as Field["type"]; // Not strictly true, as could include user fields, but this should be safe enough
-
-      return {
-        ...acc,
-        [fieldType]: ({
-          parentId,
-          ...params
-        }: MapFnParams<ExtractField<G["UserField"], Field["type"]>>) => {
-          const wildcardPath = params.propPath.replace(/\[\d+\]/g, "[*]");
-
-          const isReadOnly =
-            readOnly?.[params.propPath] ||
-            readOnly?.[wildcardPath] ||
-            forceReadOnly ||
-            false;
-
-          const fn = transforms[fieldType] as FieldTransformFn<
-            ExtractField<G["UserField"], Field["type"]>
-          >;
-
-          return fn?.({
-            ...params,
-            isReadOnly,
-            componentId: parentId,
-          });
-        },
-      };
-    }, {});
-  }, [transforms, readOnly, forceReadOnly]);
+  const mappers = useMemo<Mappers>(
+    () => buildMappers(transforms, readOnly, forceReadOnly),
+    [transforms, readOnly, forceReadOnly]
+  );
 
   const transformedProps = useMemo(() => {
-    const mapped = mapFields(item, mappers, config).props;
-
-    return mapped;
+    return mapFields(item, mappers, config).props;
   }, [config, item, mappers]);
 
   const mergedProps = useMemo(