@seed-design/figma 0.0.24 → 0.0.27

package/lib/codegen/index.cjs

@@ -40,13 +40,13 @@ function objectEntries(obj) {
     return Object.entries(obj);
 }
 
-function createElement(tag, props = {}, children, comment) {
+function createElement(tag, props = {}, children, meta) {
     return {
         __IS_JSX_ELEMENT_NODE: true,
         tag,
         props,
         children: ensureArray(children).filter(exists),
-        comment
+        meta: meta ?? {}
     };
 }
 function cloneElement(element, props = {}, children) {
@@ -69,14 +69,25 @@ function isElement(node) {
     return typeof node === "object" && node != null && "__IS_JSX_ELEMENT_NODE" in node && node.__IS_JSX_ELEMENT_NODE === true;
 }
 function stringifyElement(element, options = {}) {
+    const importMap = new Map();
     function recursive(node, depth) {
         if (typeof node === "string") {
             return node;
         }
-        const { tag, props, children, comment } = node;
+        const { tag, props, children, meta: { comment, source, importPath } } = node;
+        if (importPath) {
+            const existing = importMap.get(importPath);
+            if (existing) {
+                existing.add(tag);
+            } else {
+                importMap.set(importPath, new Set([
+                    tag
+                ]));
+            }
+        }
         const propEntries = Object.entries(options.printSource ? {
             ...props,
-            "data-figma-node-id": node.source
+            "data-figma-node-id": source
         } : props);
         const propFragments = propEntries.map(([key, value])=>{
             if (typeof value === "string") {
@@ -113,7 +124,12 @@ function stringifyElement(element, options = {}) {
         ].join("\n");
         return result;
     }
-    return recursive(element, 0);
+    const jsx = recursive(element, 0);
+    const imports = Array.from(importMap.entries()).sort((a, b)=>a[0].localeCompare(b[0])).map(([importPath, tags])=>`import { ${Array.from(tags).join(", ")} } from "${importPath}";`).join("\n");
+    return {
+        imports,
+        jsx
+    };
 }
 
 // --- Helper Functions ---
@@ -456,9 +472,12 @@ function createCodeGenerator({ frameTransformer, textTransformer, rectangleTrans
     }
     function generateCode(node, options) {
         const jsxTree = generateJsxTree(node);
-        return jsxTree ? stringifyElement(jsxTree, {
+        if (!jsxTree) {
+            return undefined;
+        }
+        return stringifyElement(jsxTree, {
             printSource: options.shouldPrintSource
-        }) : undefined;
+        });
     }
     return {
         generateJsxTree,
@@ -7879,7 +7898,9 @@ function createVectorTransformer({ propsConverters }) {
             ...propsConverters.radius(node),
             ...propsConverters.stroke(node),
             ...propsConverters.shapeFill(node)
-        }, [], "Vector Node Placeholder");
+        }, [], {
+            comment: "Vector Node Placeholder"
+        });
     });
 }
 function createBooleanOperationTransformer({ propsConverters }) {
@@ -7902,7 +7923,9 @@ function createTextTransformer({ propsConverters }) {
             ...typeStyleProps,
             ...fillProps
         });
-        return createElement("Text", props, node.characters, hasMultipleFills ? "Multiple fills in Text node encountered, only the first fill is used." : "");
+        return createElement("Text", props, node.characters, {
+            comment: hasMultipleFills ? "Multiple fills in Text node encountered, only the first fill is used." : undefined
+        });
     });
 }
 

package/lib/codegen/index.d.ts

@@ -77,10 +77,13 @@ interface ElementNode {
     tag: string;
     props: Record<string, string | number | boolean | ElementNode | object | undefined>;
     children: (ElementNode | string)[];
-    comment?: string;
-    source?: string;
+    meta: {
+        comment?: string;
+        source?: string;
+        importPath?: string;
+    };
 }
-declare function createElement(tag: string, props?: Record<string, string | number | boolean | object | undefined>, children?: ElementNode | string | undefined | (ElementNode | string | undefined)[], comment?: string): ElementNode;
+declare function createElement(tag: string, props?: Record<string, string | number | boolean | object | undefined>, children?: ElementNode | string | undefined | (ElementNode | string | undefined)[], meta?: ElementNode["meta"]): ElementNode;
 declare function cloneElement(element: ElementNode, props?: Record<string, string | number | boolean | object | undefined>, children?: ElementNode | string | undefined | (ElementNode | string | undefined)[]): {
     props: {
         [x: string]: string | number | boolean | object | ElementNode | undefined;
@@ -88,8 +91,11 @@ declare function cloneElement(element: ElementNode, props?: Record<string, strin
     children: (string | ElementNode)[];
     __IS_JSX_ELEMENT_NODE: true;
     tag: string;
-    comment?: string;
-    source?: string;
+    meta: {
+        comment?: string;
+        source?: string;
+        importPath?: string;
+    };
 };
 
 type ElementTransformer<T extends NormalizedSceneNode> = (node: T, traverse: (node: NormalizedSceneNode) => ElementNode | undefined) => ElementNode | undefined;
@@ -108,7 +114,10 @@ declare function createCodeGenerator({ frameTransformer, textTransformer, rectan
     generateJsxTree: (node: NormalizedSceneNode) => ElementNode | undefined;
     generateCode: (node: NormalizedSceneNode, options: {
         shouldPrintSource: boolean;
-    }) => string | undefined;
+    }) => {
+        imports: string;
+        jsx: string;
+    } | undefined;
 };
 
 interface ComponentHandler<T extends NormalizedInstanceNode["componentProperties"] = NormalizedInstanceNode["componentProperties"]> {
@@ -1680,7 +1689,10 @@ declare function createPipeline(options?: CreatePipelineConfig): {
     generateJsxTree: (node: ________.NormalizedSceneNode) => ElementNode | undefined;
     generateCode: (node: ________.NormalizedSceneNode, options: {
         shouldPrintSource: boolean;
-    }) => string | undefined;
+    }) => {
+        imports: string;
+        jsx: string;
+    } | undefined;
 };
 
 type FigmaValueResolver = ValueResolver<string, number, number, number>;

package/lib/codegen/index.js

@@ -21,13 +21,13 @@ function objectEntries(obj) {
     return Object.entries(obj);
 }
 
-function createElement(tag, props = {}, children, comment) {
+function createElement(tag, props = {}, children, meta) {
     return {
         __IS_JSX_ELEMENT_NODE: true,
         tag,
         props,
         children: ensureArray(children).filter(exists),
-        comment
+        meta: meta ?? {}
     };
 }
 function cloneElement(element, props = {}, children) {
@@ -50,14 +50,25 @@ function isElement(node) {
     return typeof node === "object" && node != null && "__IS_JSX_ELEMENT_NODE" in node && node.__IS_JSX_ELEMENT_NODE === true;
 }
 function stringifyElement(element, options = {}) {
+    const importMap = new Map();
     function recursive(node, depth) {
         if (typeof node === "string") {
             return node;
         }
-        const { tag, props, children, comment } = node;
+        const { tag, props, children, meta: { comment, source, importPath } } = node;
+        if (importPath) {
+            const existing = importMap.get(importPath);
+            if (existing) {
+                existing.add(tag);
+            } else {
+                importMap.set(importPath, new Set([
+                    tag
+                ]));
+            }
+        }
         const propEntries = Object.entries(options.printSource ? {
             ...props,
-            "data-figma-node-id": node.source
+            "data-figma-node-id": source
         } : props);
         const propFragments = propEntries.map(([key, value])=>{
             if (typeof value === "string") {
@@ -94,7 +105,12 @@ function stringifyElement(element, options = {}) {
         ].join("\n");
         return result;
     }
-    return recursive(element, 0);
+    const jsx = recursive(element, 0);
+    const imports = Array.from(importMap.entries()).sort((a, b)=>a[0].localeCompare(b[0])).map(([importPath, tags])=>`import { ${Array.from(tags).join(", ")} } from "${importPath}";`).join("\n");
+    return {
+        imports,
+        jsx
+    };
 }
 
 // --- Helper Functions ---
@@ -437,9 +453,12 @@ function createCodeGenerator({ frameTransformer, textTransformer, rectangleTrans
     }
     function generateCode(node, options) {
         const jsxTree = generateJsxTree(node);
-        return jsxTree ? stringifyElement(jsxTree, {
+        if (!jsxTree) {
+            return undefined;
+        }
+        return stringifyElement(jsxTree, {
             printSource: options.shouldPrintSource
-        }) : undefined;
+        });
     }
     return {
         generateJsxTree,
@@ -7860,7 +7879,9 @@ function createVectorTransformer({ propsConverters }) {
             ...propsConverters.radius(node),
             ...propsConverters.stroke(node),
             ...propsConverters.shapeFill(node)
-        }, [], "Vector Node Placeholder");
+        }, [], {
+            comment: "Vector Node Placeholder"
+        });
     });
 }
 function createBooleanOperationTransformer({ propsConverters }) {
@@ -7883,7 +7904,9 @@ function createTextTransformer({ propsConverters }) {
             ...typeStyleProps,
             ...fillProps
         });
-        return createElement("Text", props, node.characters, hasMultipleFills ? "Multiple fills in Text node encountered, only the first fill is used." : "");
+        return createElement("Text", props, node.characters, {
+            comment: hasMultipleFills ? "Multiple fills in Text node encountered, only the first fill is used." : undefined
+        });
     });
 }