Instances Overrides (#166)

* wip

* added support for overrides

* fixes

.changeset/neat-badgers-dream.md

@@ -0,0 +1,5 @@
+---
+"penpot-exporter": minor
+---
+
+Added support for instances overrides

plugin-src/OverridesLibrary.ts

@@ -0,0 +1,13 @@
+class OverridesLibrary {
+  private overrides: Map<string, NodeChangeProperty[]> = new Map();
+
+  public register(nodeId: string, overrides: NodeChangeProperty[]): void {
+    this.overrides.set(nodeId, overrides);
+  }
+
+  public get(nodeId: string): NodeChangeProperty[] | undefined {
+    return this.overrides.get(nodeId);
+  }
+}
+
+export const overridesLibrary = new OverridesLibrary();

plugin-src/transformers/partials/index.ts

@@ -7,6 +7,7 @@ export * from './transformEffects';
 export * from './transformFigmaIds';
 export * from './transformFills';
 export * from './transformLayout';
+export * from './transformOverrides';
 export * from './transformProportion';
 export * from './transformRotationAndPosition';
 export * from './transformSceneNode';

plugin-src/transformers/partials/transformOverrides.ts

@@ -0,0 +1,23 @@
+import { overridesLibrary } from '@plugin/OverridesLibrary';
+import { syncAttributes } from '@plugin/utils/syncAttributes';
+
+import { SyncGroups } from '@ui/lib/types/utils/syncGroups';
+
+export const transformOverrides = (node: SceneNode) => {
+  const overrides = overridesLibrary.get(node.id);
+  if (!overrides) {
+    return {};
+  }
+
+  const touched: SyncGroups[] = [];
+
+  overrides.forEach(override => {
+    if (syncAttributes[override]) {
+      touched.push(...syncAttributes[override]);
+    }
+  });
+
+  return {
+    touched
+  };
+};

plugin-src/transformers/transformBooleanNode.ts

@@ -6,6 +6,7 @@ import {
   transformFigmaIds,
   transformFills,
   transformLayoutAttributes,
+  transformOverrides,
   transformProportion,
   transformRotationAndPosition,
   transformSceneNode,
@@ -33,6 +34,7 @@ export const transformBooleanNode = async (
     ...transformSceneNode(node),
     ...transformBlend(node),
     ...transformProportion(node),
-    ...transformLayoutAttributes(node)
+    ...transformLayoutAttributes(node),
+    ...transformOverrides(node)
   };
 };

plugin-src/transformers/transformEllipseNode.ts

@@ -6,6 +6,7 @@ import {
   transformFigmaIds,
   transformFills,
   transformLayoutAttributes,
+  transformOverrides,
   transformProportion,
   transformRotationAndPosition,
   transformSceneNode,
@@ -28,6 +29,7 @@ export const transformEllipseNode = (node: EllipseNode, baseRotation: number): C
     ...transformBlend(node),
     ...transformProportion(node),
     ...transformLayoutAttributes(node),
-    ...transformConstraints(node)
+    ...transformConstraints(node),
+    ...transformOverrides(node)
   };
 };

plugin-src/transformers/transformFrameNode.ts

@@ -9,6 +9,7 @@ import {
   transformFigmaIds,
   transformFills,
   transformLayoutAttributes,
+  transformOverrides,
   transformProportion,
   transformRotationAndPosition,
   transformSceneNode,
@@ -63,6 +64,7 @@ export const transformFrameNode = async (
     ...frameSpecificAttributes,
     ...transformDimension(node),
     ...(await transformChildren(node, rotation)),
-    ...transformSceneNode(node)
+    ...transformSceneNode(node),
+    ...transformOverrides(node)
   };
 };

plugin-src/transformers/transformGroupNode.ts

@@ -3,6 +3,7 @@ import {
   transformDimension,
   transformEffects,
   transformFigmaIds,
+  transformOverrides,
   transformRotationAndPosition,
   transformSceneNode
 } from '@plugin/transformers/partials';
@@ -19,7 +20,8 @@ export const transformGroupNode = async (
     ...transformGroupNodeLike(node, baseRotation),
     ...transformEffects(node),
     ...transformBlend(node),
-    ...(await transformChildren(node, baseRotation))
+    ...(await transformChildren(node, baseRotation)),
+    ...transformOverrides(node)
   };
 };
 

plugin-src/transformers/transformInstanceNode.ts

@@ -1,3 +1,4 @@
+import { overridesLibrary } from '@plugin/OverridesLibrary';
 import { remoteComponentLibrary } from '@plugin/RemoteComponentLibrary';
 import {
   transformAutoLayout,
@@ -10,6 +11,7 @@ import {
   transformFigmaIds,
   transformFills,
   transformLayoutAttributes,
+  transformOverrides,
   transformProportion,
   transformRotationAndPosition,
   transformSceneNode,
@@ -32,6 +34,12 @@ export const transformInstanceNode = async (
     registerExternalComponents(mainComponent);
   }
 
+  if (node.overrides.length > 0) {
+    node.overrides.forEach(override =>
+      overridesLibrary.register(override.id, override.overriddenFields)
+    );
+  }
+
   return {
     type: 'instance',
     name: node.name,
@@ -51,7 +59,8 @@ export const transformInstanceNode = async (
     ...transformRotationAndPosition(node, baseRotation),
     ...transformConstraints(node),
     ...transformAutoLayout(node),
-    ...(await transformChildren(node, node.rotation + baseRotation))
+    ...(await transformChildren(node, node.rotation + baseRotation)),
+    ...transformOverrides(node)
   };
 };
 

plugin-src/transformers/transformLineNode.ts

@@ -4,6 +4,7 @@ import {
   transformEffects,
   transformFigmaIds,
   transformLayoutAttributes,
+  transformOverrides,
   transformProportion,
   transformSceneNode,
   transformStrokes
@@ -30,6 +31,7 @@ export const transformLineNode = (node: LineNode, baseRotation: number): PathSha
     ...transformBlend(node),
     ...transformProportion(node),
     ...transformLayoutAttributes(node),
-    ...transformConstraints(node)
+    ...transformConstraints(node),
+    ...transformOverrides(node)
   };
 };

plugin-src/transformers/transformPathNode.ts

@@ -5,6 +5,7 @@ import {
   transformFigmaIds,
   transformFills,
   transformLayoutAttributes,
+  transformOverrides,
   transformProportion,
   transformSceneNode,
   transformStrokes
@@ -29,6 +30,7 @@ export const transformPathNode = (
     ...transformBlend(node),
     ...transformProportion(node),
     ...transformLayoutAttributes(node),
-    ...transformConstraints(node)
+    ...transformConstraints(node),
+    ...transformOverrides(node)
   };
 };

plugin-src/transformers/transformRectangleNode.ts

@@ -7,6 +7,7 @@ import {
   transformFigmaIds,
   transformFills,
   transformLayoutAttributes,
+  transformOverrides,
   transformProportion,
   transformRotationAndPosition,
   transformSceneNode,
@@ -30,6 +31,7 @@ export const transformRectangleNode = (node: RectangleNode, baseRotation: number
     ...transformProportion(node),
     ...transformLayoutAttributes(node),
     ...transformCornerRadius(node),
-    ...transformConstraints(node)
+    ...transformConstraints(node),
+    ...transformOverrides(node)
   };
 };

plugin-src/transformers/transformTextNode.ts

@@ -5,6 +5,7 @@ import {
   transformEffects,
   transformFigmaIds,
   transformLayoutAttributes,
+  transformOverrides,
   transformProportion,
   transformRotationAndPosition,
   transformSceneNode,
@@ -28,6 +29,7 @@ export const transformTextNode = (node: TextNode, baseRotation: number): TextSha
     ...transformProportion(node),
     ...transformLayoutAttributes(node),
     ...transformStrokes(node),
-    ...transformConstraints(node)
+    ...transformConstraints(node),
+    ...transformOverrides(node)
   };
 };

plugin-src/transformers/transformVectorNode.ts

@@ -1,6 +1,7 @@
 import {
   transformConstraints,
   transformFigmaIds,
+  transformOverrides,
   transformVectorPaths
 } from '@plugin/transformers/partials';
 
@@ -26,14 +27,16 @@ export const transformVectorNode = (
       ...children[0],
       name: node.name,
       ...transformFigmaIds(node),
-      ...transformConstraints(node)
+      ...transformConstraints(node),
+      ...transformOverrides(node)
     };
   }
 
   return {
     ...transformGroupNodeLike(node, baseRotation),
     ...transformFigmaIds(node),
     ...transformConstraints(node),
+    ...transformOverrides(node),
     children
   };
 };