Add newRootNode diff

noya-app · Dec 17, 2023 · ffb58ff · ffb58ff
1 parent 0bd5d80
commit ffb58ff
Show file tree

Hide file tree

Showing 4 changed files with 47 additions and 9 deletions.
diff --git a/packages/noya-component/src/traversal.ts b/packages/noya-component/src/traversal.ts
@@ -52,6 +52,14 @@ export function unresolve(
   resolvedNode: NoyaResolvedNode,
   diffParam: NoyaDiff = { items: [] },
 ): NoyaNode {
+  for (const item of diffParam.items) {
+    if (isDeepEqual(item.path, resolvedNode.path)) {
+      if (item.newRootNode) {
+        return item.newRootNode;
+      }
+    }
+  }
+
   switch (resolvedNode.type) {
     case 'noyaString': {
       const { id, value, type, name } = resolvedNode;
@@ -126,7 +134,8 @@ function isEmptyDiff(diff: NoyaDiffItem) {
     !diff.props &&
     !diff.classNames &&
     !diff.variantNames &&
-    !diff.children
+    !diff.children &&
+    !diff.newRootNode
   );
 }
 
@@ -237,6 +246,19 @@ export function applyResolvedDiff(
     (node, transformedChildren) => {
       const nodeKey = node.path.join('/');
 
+      for (const item of diff.items) {
+        const itemKey = [...path, ...item.path].join('/');
+        if (itemKey === nodeKey) {
+          if (item.newRootNode) {
+            return createResolvedNode(
+              findComponent,
+              item.newRootNode,
+              item.path,
+            );
+          }
+        }
+      }
+
       switch (node.type) {
         case 'noyaCompositeElement': {
           const newNode: NoyaResolvedCompositeElement = {

diff --git a/packages/noya-component/src/types.ts b/packages/noya-component/src/types.ts
@@ -102,6 +102,7 @@ export type NoyaDiffItem = {
   textValue?: string;
   name?: string;
   componentID?: string;
+  newRootNode?: NoyaNode;
 };
 
 export type NoyaDiff = {

diff --git a/packages/site/src/dseditor/DSComponentInspector.tsx b/packages/site/src/dseditor/DSComponentInspector.tsx
@@ -162,8 +162,21 @@ export function DSComponentInspector({
         componentID: selection.componentID,
         variantID: selection.variantID,
       });
-      const diff = diffResolvedTrees(instance, newResolvedNode);
-      setSelection({ ...selection, diff });
+
+      if (instance.id !== newResolvedNode.id) {
+        setSelection({
+          ...selection,
+          diff: Model.diff([
+            Model.diffItem({
+              path: [instance.id],
+              newRootNode: newResolvedNode,
+            }),
+          ]),
+        });
+      } else {
+        const diff = diffResolvedTrees(instance, newResolvedNode);
+        setSelection({ ...selection, diff });
+      }
     },
     [findComponent, selection, setSelection],
   );
@@ -581,8 +594,6 @@ export function DSComponentInspector({
                         return;
                       }
 
-                      // debugger;
-
                       const [primitivesDiff, compositesDiff] = partitionDiff(
                         resolvedNode,
                         selection.diff.items || [],
@@ -659,12 +670,12 @@ export function DSComponentInspector({
                             <Chip
                               key={id}
                               colorScheme={
-                                metadataMap[id].type === 'noyaCompositeElement'
+                                metadataMap[id]?.type === 'noyaCompositeElement'
                                   ? 'primary'
                                   : undefined
                               }
                             >
-                              {metadataMap[id].name}
+                              {metadataMap[id]?.name ?? '?'}
                             </Chip>
                           )),
                           <CaretRightIcon />,
@@ -705,7 +716,7 @@ export function DSComponentInspector({
                           {item.variantNames.map((arrayDiffItem, j) => {
                             const elementId = item.path[item.path.length - 1];
                             const targetComponent = findComponent(
-                              metadataMap[elementId].componentID ?? '',
+                              metadataMap[elementId]?.componentID ?? '',
                             );
                             const variants = targetComponent?.variants ?? [];
                             const findVariantName = (id: string): string => {

diff --git a/packages/site/src/dseditor/utils/partitionDiff.tsx b/packages/site/src/dseditor/utils/partitionDiff.tsx
@@ -18,10 +18,14 @@ export function partitionDiff(
     const indexPath = ResolvedHierarchy.findIndexPath(resolvedNode, (n) =>
       isDeepEqual(n.path, item.path),
     );
+
     if (!indexPath) return false;
+
     let nodePath = ResolvedHierarchy.accessPath(resolvedNode, indexPath);
+
     // Remove the root node which is the component itself
-    nodePath = nodePath.slice(1);
+    // nodePath = nodePath.slice(1);
+
     const indexOfFirstComposite = nodePath.findIndex(
       (node) => node.type === 'noyaCompositeElement',
     );