@seed-design/figma 1.3.7 → 1.3.9

package/lib/codegen/index.cjs

@@ -448,7 +448,7 @@ function applyInferredLayout(parentNode, result) {
     };
 }
 
-function createCodeGenerator({ frameTransformer, textTransformer, rectangleTransformer, instanceTransformer, vectorTransformer, booleanOperationTransformer, shouldInferAutoLayout, skipComponentKeys }) {
+function createCodeGenerator({ frameTransformer, slotTransformer, textTransformer, rectangleTransformer, instanceTransformer, vectorTransformer, booleanOperationTransformer, shouldInferAutoLayout, skipComponentKeys }) {
     function isSkippedInstance(node) {
         if (!skipComponentKeys || skipComponentKeys.size === 0) return false;
         if (node.type !== "INSTANCE") return false;
@@ -472,6 +472,8 @@ function createCodeGenerator({ frameTransformer, textTransformer, rectangleTrans
             type: "COMPONENT"
         }, (node)=>frameTransformer(node, traverse)) // NOTE: Treat component node as Frame for now
         .with({
+            type: "SLOT"
+        }, (node)=>slotTransformer(node, traverse)).with({
             type: "INSTANCE"
         }, (node)=>instanceTransformer(node, traverse)).with({
             type: "VECTOR"
@@ -549,8 +551,24 @@ function createPropsConverter({ handlers, shorthands, defaults }) {
     });
 }
 
+function traverseNode(node, callback) {
+    callback(node);
+    if (!("children" in node)) return;
+    for (const child of node.children){
+        traverseNode(child, callback);
+    }
+}
+function findOne(node, callback) {
+    let result;
+    traverseNode(node, (n)=>{
+        if (callback(n)) {
+            result = n;
+        }
+    });
+    return result;
+}
 function getFirstSolidFill(node) {
-    const fills = node.fills.filter((fill)=>fill.type === "SOLID" && (!("visible" in fill) || fill.visible === true));
+    const fills = node.fills.filter((fill)=>fill.type === "SOLID");
     if (fills.length === 0) {
         return undefined;
     }
@@ -561,7 +579,7 @@ function getFirstFillVariable(node) {
     return fill?.boundVariables?.color;
 }
 function getFirstStroke(node) {
-    const strokes = node.strokes?.filter((stroke)=>stroke.type === "SOLID" && (!("visible" in stroke) || stroke.visible === true)) ?? [];
+    const strokes = node.strokes?.filter((stroke)=>stroke.type === "SOLID") ?? [];
     if (strokes.length === 0) {
         return undefined;
     }
@@ -20595,6 +20613,7 @@ const componentAvatar = {
                 "36",
                 "42",
                 "48",
+                "56",
                 "64",
                 "80",
                 "96",
@@ -20648,6 +20667,7 @@ const componentAvatarStack = {
                 "36",
                 "42",
                 "48",
+                "56",
                 "64",
                 "80",
                 "96",
@@ -20740,6 +20760,9 @@ const componentBottomSheet = {
     "name": "componentBottomSheet",
     "key": "ffe99a21452831c28bd9375aac0aaf37d7ee6a0d",
     "componentPropertyDefinitions": {
+        "Contents Slot#6752:0": {
+            "type": "SLOT"
+        },
         "Title#19787:3": {
             "type": "TEXT"
         },
@@ -20755,9 +20778,6 @@ const componentBottomSheet = {
         "Show Description#25192:0": {
             "type": "BOOLEAN"
         },
-        "Contents#25320:0": {
-            "type": "INSTANCE_SWAP"
-        },
         "Show Safe Area#25488:8": {
             "type": "BOOLEAN"
         },
@@ -21084,6 +21104,9 @@ const componentChlid = {
     "name": "componentChlid",
     "key": "ef79a21a39ceb4ce24b2fb93c9b430c1980a3e71",
     "componentPropertyDefinitions": {
+        "Slot#6081:0": {
+            "type": "SLOT"
+        },
         "Type": {
             "type": "VARIANT",
             "variantOptions": [
@@ -22771,6 +22794,9 @@ const componentSelectBoxItemHorizontal = {
     "name": "componentSelectBoxItemHorizontal",
     "key": "8174af8ef3654dad996723883f5b84f44f791513",
     "componentPropertyDefinitions": {
+        "Content Slot#6752:6": {
+            "type": "SLOT"
+        },
         "Title#28452:21": {
             "type": "TEXT"
         },
@@ -22818,6 +22844,9 @@ const componentSelectBoxItemVertical = {
     "name": "componentSelectBoxItemVertical",
     "key": "ccc88f0aae500c64e7d43be63c4f1a70baf76bfe",
     "componentPropertyDefinitions": {
+        "Content Slot#6765:0": {
+            "type": "SLOT"
+        },
         "Title#58766:114": {
             "type": "TEXT"
         },
@@ -23201,13 +23230,14 @@ function createInstanceTransformer({ frameTransformer, componentRepository }) {
     const transform = defineElementTransformer((node, traverse)=>{
         const component = componentRepository?.getOne(node.componentSetKey ?? node.componentKey);
         if (component) {
+            const slotChildren = Object.entries(node.componentProperties).filter(([_, prop])=>prop.type === "SLOT").map(([key])=>findOne(node, (child)=>child.type === "SLOT" && child.componentPropertyReferences?.slotContentId === key)).filter((slot)=>slot != null).map((slot)=>traverse(slot)).filter((el)=>el != null);
             return createElement("Instance", {
                 componentName: component.name,
                 ...Object.fromEntries(Object.entries(node.componentProperties).filter(([_, props])=>props.type === "VARIANT" || props.type === "TEXT").map(([key, props])=>[
                         changeCase.camelCase(key.split("#")[0]),
                         changeCase.camelCase(props.value)
                     ]))
-            });
+            }, slotChildren);
         }
         return frameTransformer(node, traverse);
     });
@@ -23497,8 +23527,22 @@ function createPipeline(options = {}) {
     const booleanOperationTransformer = createBooleanOperationTransformer({
         propsConverters
     });
+    const slotTransformer = defineElementTransformer((node, traverse)=>{
+        const slotName = node.componentPropertyReferences?.slotContentId?.split("#")[0];
+        const frameResult = frameTransformer({
+            ...node,
+            type: "FRAME"
+        }, traverse);
+        if (!frameResult) return undefined;
+        return createElement("Slot", {
+            ...slotName && {
+                name: slotName
+            }
+        }, frameResult);
+    });
     const codegenTransformer = createCodeGenerator({
         frameTransformer,
+        slotTransformer,
         textTransformer,
         rectangleTransformer,
         instanceTransformer,

package/lib/codegen/index.d.ts

@@ -72,6 +72,12 @@ interface NormalizedInstanceNode extends NormalizedFrameTrait {
     overrides?: FigmaRestSpec.InstanceNode["overrides"];
     children: NormalizedSceneNode[];
 }
+interface NormalizedSlotNode extends NormalizedFrameTrait {
+    type: FigmaRestSpec.SlotNode["type"];
+    componentPropertyReferences?: FigmaRestSpec.IsLayerTrait["componentPropertyReferences"] & {
+        slotContentId?: string;
+    };
+}
 interface NormalizedVectorNode extends NormalizedDefaultShapeTrait, NormalizedCornerTrait {
     type: FigmaRestSpec.VectorNode["type"];
 }
@@ -83,7 +89,7 @@ interface NormalizedUnhandledNode {
     id: string;
     original: FigmaRestSpec.Node | SceneNode;
 }
-type NormalizedSceneNode = NormalizedFrameNode | NormalizedRectangleNode | NormalizedTextNode | NormalizedComponentNode | NormalizedInstanceNode | NormalizedVectorNode | NormalizedBooleanOperationNode | NormalizedUnhandledNode;
+type NormalizedSceneNode = NormalizedFrameNode | NormalizedRectangleNode | NormalizedTextNode | NormalizedComponentNode | NormalizedInstanceNode | NormalizedSlotNode | NormalizedVectorNode | NormalizedBooleanOperationNode | NormalizedUnhandledNode;
 
 interface ElementNode {
     __IS_JSX_ELEMENT_NODE: true;
@@ -116,6 +122,7 @@ declare function defineElementTransformer<T extends NormalizedSceneNode>(transfo
 
 interface CodeGeneratorDeps {
     frameTransformer: ElementTransformer<NormalizedFrameNode | NormalizedComponentNode | NormalizedInstanceNode>;
+    slotTransformer: ElementTransformer<NormalizedSlotNode>;
     textTransformer: ElementTransformer<NormalizedTextNode>;
     rectangleTransformer: ElementTransformer<NormalizedRectangleNode>;
     instanceTransformer: ElementTransformer<NormalizedInstanceNode>;
@@ -133,7 +140,7 @@ interface CodeGenerator {
         jsx: string;
     } | undefined;
 }
-declare function createCodeGenerator({ frameTransformer, textTransformer, rectangleTransformer, instanceTransformer, vectorTransformer, booleanOperationTransformer, shouldInferAutoLayout, skipComponentKeys, }: CodeGeneratorDeps): CodeGenerator;
+declare function createCodeGenerator({ frameTransformer, slotTransformer, textTransformer, rectangleTransformer, instanceTransformer, vectorTransformer, booleanOperationTransformer, shouldInferAutoLayout, skipComponentKeys, }: CodeGeneratorDeps): CodeGenerator;
 
 interface ComponentHandler<T extends NormalizedInstanceNode["componentProperties"] = NormalizedInstanceNode["componentProperties"]> {
     key: string;