@seed-design/figma 0.0.22 → 0.0.24

package/lib/codegen/index.js

@@ -1,6 +1,5 @@
 import { match } from 'ts-pattern';
 import 'change-case';
-import { AsyncLocalStorage } from 'async_hooks';
 import * as index_js from './targets/react/index.js';
 export { index_js as react };
 
@@ -98,15 +97,6 @@ function stringifyElement(element, options = {}) {
     return recursive(element, 0);
 }
 
-const codegenOptionsContext = new AsyncLocalStorage();
-function useCodegenOptions() {
-    const options = codegenOptionsContext.getStore();
-    if (!options) {
-        throw new Error("Trying to get codegen options outside of codegen context. Did you forget to call `codegenOptionsContext.run`?");
-    }
-    return options;
-}
-
 // --- Helper Functions ---
 function getCollectiveBoundingBox(nodes) {
     if (nodes.length === 0) {
@@ -414,12 +404,11 @@ function applyInferredLayout(parentNode, result) {
     };
 }
 
-function createCodeGenerator({ frameTransformer, textTransformer, rectangleTransformer, instanceTransformer, vectorTransformer, booleanOperationTransformer }) {
+function createCodeGenerator({ frameTransformer, textTransformer, rectangleTransformer, instanceTransformer, vectorTransformer, booleanOperationTransformer, shouldInferAutoLayout }) {
     function traverse(node) {
         if ("visible" in node && !node.visible) {
             return;
         }
-        const { shouldInferAutoLayout } = useCodegenOptions();
         const result = match(node).with({
             type: "FRAME"
         }, (node)=>shouldInferAutoLayout ? frameTransformer(applyInferredLayout(node, inferLayout(node)), traverse) : frameTransformer(node, traverse)).with({
@@ -443,11 +432,11 @@ function createCodeGenerator({ frameTransformer, textTransformer, rectangleTrans
         }
         return;
     }
-    function generateJsxTree(node, options) {
-        return codegenOptionsContext.run(options, ()=>traverse(node));
+    function generateJsxTree(node) {
+        return traverse(node);
     }
     function generateCode(node, options) {
-        const jsxTree = generateJsxTree(node, options);
+        const jsxTree = generateJsxTree(node);
         return jsxTree ? stringifyElement(jsxTree, {
             printSource: options.shouldPrintSource
         }) : undefined;
@@ -519,7 +508,7 @@ function getFirstStrokeVariable(node) {
     return node.boundVariables?.strokes?.[0];
 }
 
-function createValueResolver({ variableService, variableNameFormatter, styleService, styleNameFormatter, rawValueFormatters }) {
+function createValueResolver({ variableService, variableNameFormatter, styleService, styleNameFormatter, rawValueFormatters, shouldInferVariableName }) {
     function getVariableName(key) {
         const slug = variableService.getSlug(key);
         if (!slug) {
@@ -530,7 +519,6 @@ function createValueResolver({ variableService, variableNameFormatter, styleServ
         });
     }
     function inferVariableName(value, scope) {
-        const { shouldInferVariableName } = useCodegenOptions();
         if (!shouldInferVariableName) {
             return undefined;
         }
@@ -632,189 +620,6 @@ function createValueResolver({ variableService, variableNameFormatter, styleServ
     };
 }
 
-function createFrameTransformer({ propsConverters }) {
-    return defineElementTransformer((node, traverse)=>{
-        const children = node.children;
-        const props = {
-            ...propsConverters.radius(node),
-            ...propsConverters.containerLayout(node),
-            ...propsConverters.selfLayout(node),
-            ...propsConverters.frameFill(node),
-            ...propsConverters.stroke(node)
-        };
-        return createElement("Frame", props, children.map((child)=>traverse(child)));
-    });
-}
-
-function createInstanceTransformer({ frameTransformer }) {
-    const transform = defineElementTransformer((node, traverse)=>{
-        return frameTransformer(node, traverse);
-    });
-    return transform;
-}
-
-function createContainerLayoutPropsConverter(valueResolver) {
-    return createPropsConverter({
-        handlers: {
-            layoutMode: ({ layoutMode })=>layoutMode ?? "NONE",
-            primaryAxisAlignItems: ({ primaryAxisAlignItems })=>primaryAxisAlignItems,
-            counterAxisAlignItems: ({ counterAxisAlignItems })=>counterAxisAlignItems,
-            layoutWrap: ({ layoutWrap })=>layoutWrap,
-            itemSpacing: (node)=>valueResolver.getFormattedValue.itemSpacing(node),
-            paddingTop: (node)=>valueResolver.getFormattedValue.paddingTop(node),
-            paddingBottom: (node)=>valueResolver.getFormattedValue.paddingBottom(node),
-            paddingLeft: (node)=>valueResolver.getFormattedValue.paddingLeft(node),
-            paddingRight: (node)=>valueResolver.getFormattedValue.paddingRight(node)
-        },
-        shorthands: {
-            horizontalPadding: [
-                "paddingLeft",
-                "paddingRight"
-            ],
-            verticalPadding: [
-                "paddingTop",
-                "paddingBottom"
-            ]
-        },
-        defaults: {}
-    });
-}
-function createSelfLayoutPropsConverter(valueResolver) {
-    return createPropsConverter({
-        handlers: {
-            layoutGrow: ({ layoutGrow })=>layoutGrow,
-            layoutAlign: ({ layoutAlign })=>layoutAlign,
-            layoutSizingVertical: ({ layoutSizingVertical })=>layoutSizingVertical,
-            layoutSizingHorizontal: ({ layoutSizingHorizontal })=>layoutSizingHorizontal,
-            width: (node)=>valueResolver.getFormattedValue.width(node),
-            height: (node)=>valueResolver.getFormattedValue.height(node),
-            minWidth: (node)=>valueResolver.getFormattedValue.minWidth(node),
-            minHeight: (node)=>valueResolver.getFormattedValue.minHeight(node),
-            maxWidth: (node)=>valueResolver.getFormattedValue.maxWidth(node),
-            maxHeight: (node)=>valueResolver.getFormattedValue.maxHeight(node)
-        },
-        defaults: {}
-    });
-}
-function createRadiusPropsConverter(valueResolver) {
-    return createPropsConverter({
-        handlers: {
-            topLeftRadius: (node)=>valueResolver.getFormattedValue.topLeftRadius(node),
-            topRightRadius: (node)=>valueResolver.getFormattedValue.topRightRadius(node),
-            bottomLeftRadius: (node)=>valueResolver.getFormattedValue.bottomLeftRadius(node),
-            bottomRightRadius: (node)=>valueResolver.getFormattedValue.bottomRightRadius(node)
-        },
-        shorthands: {
-            cornerRadius: [
-                "topLeftRadius",
-                "topRightRadius",
-                "bottomLeftRadius",
-                "bottomRightRadius"
-            ]
-        },
-        defaults: {
-            cornerRadius: 0,
-            topLeftRadius: 0,
-            topRightRadius: 0,
-            bottomLeftRadius: 0,
-            bottomRightRadius: 0
-        }
-    });
-}
-function createFrameFillPropsConverter(valueResolver) {
-    return definePropsConverter((node)=>{
-        const fill = valueResolver.getFormattedValue.frameFill(node);
-        return {
-            fill
-        };
-    });
-}
-function createShapeFillPropsConverter(valueResolver) {
-    return definePropsConverter((node)=>{
-        const fill = valueResolver.getFormattedValue.shapeFill(node);
-        return {
-            fill
-        };
-    });
-}
-function createTextFillPropsConverter(valueResolver) {
-    return definePropsConverter((node)=>{
-        const fill = valueResolver.getFormattedValue.textFill(node);
-        return {
-            fill
-        };
-    });
-}
-function createStrokePropsConverter(valueResolver) {
-    return definePropsConverter((node)=>{
-        const stroke = valueResolver.getFormattedValue.stroke(node);
-        const strokeWeight = node.strokeWeight;
-        return {
-            stroke,
-            strokeWeight
-        };
-    });
-}
-function createTypeStylePropsConverter(valueResolver) {
-    return definePropsConverter((node)=>{
-        const styleName = valueResolver.getTextStyleValue(node);
-        const maxLines = node.style.textTruncation === "ENDING" ? node.style.maxLines ?? undefined : undefined;
-        if (styleName) {
-            return {
-                textStyle: styleName,
-                maxLines
-            };
-        }
-        return {
-            fontSize: valueResolver.getFormattedValue.fontSize(node),
-            fontWeight: valueResolver.getFormattedValue.fontWeight(node),
-            lineHeight: valueResolver.getFormattedValue.lineHeight(node),
-            maxLines
-        };
-    });
-}
-
-function createRectangleTransformer({ propsConverters }) {
-    return defineElementTransformer((node)=>{
-        return createElement("Rectangle", {
-            ...propsConverters.selfLayout(node)
-        });
-    });
-}
-function createVectorTransformer({ propsConverters }) {
-    return defineElementTransformer((node)=>{
-        return createElement("Vector", {
-            ...propsConverters.selfLayout(node),
-            ...propsConverters.radius(node),
-            ...propsConverters.stroke(node),
-            ...propsConverters.shapeFill(node)
-        }, [], "Vector Node Placeholder");
-    });
-}
-function createBooleanOperationTransformer({ propsConverters }) {
-    return defineElementTransformer((node, traverse)=>{
-        return createElement("BooleanOperation", {
-            ...propsConverters.selfLayout(node),
-            ...propsConverters.radius(node),
-            ...propsConverters.stroke(node),
-            ...propsConverters.shapeFill(node)
-        }, node.children.map(traverse));
-    });
-}
-
-function createTextTransformer({ propsConverters }) {
-    return defineElementTransformer((node)=>{
-        const hasMultipleFills = node.fills.length > 1;
-        const fillProps = propsConverters.textFill(node);
-        const typeStyleProps = propsConverters.typeStyle(node);
-        const props = compactObject({
-            ...typeStyleProps,
-            ...fillProps
-        });
-        return createElement("Text", props, node.characters, hasMultipleFills ? "Multiple fills in Text node encountered, only the first fill is used." : "");
-    });
-}
-
 const FIGMA_TEXT_STYLES = [
     {
         styleType: "TEXT",
@@ -7899,6 +7704,189 @@ const variableService = createVariableService({
     }
 });
 
+function createFrameTransformer({ propsConverters }) {
+    return defineElementTransformer((node, traverse)=>{
+        const children = node.children;
+        const props = {
+            ...propsConverters.radius(node),
+            ...propsConverters.containerLayout(node),
+            ...propsConverters.selfLayout(node),
+            ...propsConverters.frameFill(node),
+            ...propsConverters.stroke(node)
+        };
+        return createElement("Frame", props, children.map((child)=>traverse(child)));
+    });
+}
+
+function createInstanceTransformer({ frameTransformer }) {
+    const transform = defineElementTransformer((node, traverse)=>{
+        return frameTransformer(node, traverse);
+    });
+    return transform;
+}
+
+function createContainerLayoutPropsConverter(valueResolver) {
+    return createPropsConverter({
+        handlers: {
+            layoutMode: ({ layoutMode })=>layoutMode ?? "NONE",
+            primaryAxisAlignItems: ({ primaryAxisAlignItems })=>primaryAxisAlignItems,
+            counterAxisAlignItems: ({ counterAxisAlignItems })=>counterAxisAlignItems,
+            layoutWrap: ({ layoutWrap })=>layoutWrap,
+            itemSpacing: (node)=>valueResolver.getFormattedValue.itemSpacing(node),
+            paddingTop: (node)=>valueResolver.getFormattedValue.paddingTop(node),
+            paddingBottom: (node)=>valueResolver.getFormattedValue.paddingBottom(node),
+            paddingLeft: (node)=>valueResolver.getFormattedValue.paddingLeft(node),
+            paddingRight: (node)=>valueResolver.getFormattedValue.paddingRight(node)
+        },
+        shorthands: {
+            horizontalPadding: [
+                "paddingLeft",
+                "paddingRight"
+            ],
+            verticalPadding: [
+                "paddingTop",
+                "paddingBottom"
+            ]
+        },
+        defaults: {}
+    });
+}
+function createSelfLayoutPropsConverter(valueResolver) {
+    return createPropsConverter({
+        handlers: {
+            layoutGrow: ({ layoutGrow })=>layoutGrow,
+            layoutAlign: ({ layoutAlign })=>layoutAlign,
+            layoutSizingVertical: ({ layoutSizingVertical })=>layoutSizingVertical,
+            layoutSizingHorizontal: ({ layoutSizingHorizontal })=>layoutSizingHorizontal,
+            width: (node)=>valueResolver.getFormattedValue.width(node),
+            height: (node)=>valueResolver.getFormattedValue.height(node),
+            minWidth: (node)=>valueResolver.getFormattedValue.minWidth(node),
+            minHeight: (node)=>valueResolver.getFormattedValue.minHeight(node),
+            maxWidth: (node)=>valueResolver.getFormattedValue.maxWidth(node),
+            maxHeight: (node)=>valueResolver.getFormattedValue.maxHeight(node)
+        },
+        defaults: {}
+    });
+}
+function createRadiusPropsConverter(valueResolver) {
+    return createPropsConverter({
+        handlers: {
+            topLeftRadius: (node)=>valueResolver.getFormattedValue.topLeftRadius(node),
+            topRightRadius: (node)=>valueResolver.getFormattedValue.topRightRadius(node),
+            bottomLeftRadius: (node)=>valueResolver.getFormattedValue.bottomLeftRadius(node),
+            bottomRightRadius: (node)=>valueResolver.getFormattedValue.bottomRightRadius(node)
+        },
+        shorthands: {
+            cornerRadius: [
+                "topLeftRadius",
+                "topRightRadius",
+                "bottomLeftRadius",
+                "bottomRightRadius"
+            ]
+        },
+        defaults: {
+            cornerRadius: 0,
+            topLeftRadius: 0,
+            topRightRadius: 0,
+            bottomLeftRadius: 0,
+            bottomRightRadius: 0
+        }
+    });
+}
+function createFrameFillPropsConverter(valueResolver) {
+    return definePropsConverter((node)=>{
+        const fill = valueResolver.getFormattedValue.frameFill(node);
+        return {
+            fill
+        };
+    });
+}
+function createShapeFillPropsConverter(valueResolver) {
+    return definePropsConverter((node)=>{
+        const fill = valueResolver.getFormattedValue.shapeFill(node);
+        return {
+            fill
+        };
+    });
+}
+function createTextFillPropsConverter(valueResolver) {
+    return definePropsConverter((node)=>{
+        const fill = valueResolver.getFormattedValue.textFill(node);
+        return {
+            fill
+        };
+    });
+}
+function createStrokePropsConverter(valueResolver) {
+    return definePropsConverter((node)=>{
+        const stroke = valueResolver.getFormattedValue.stroke(node);
+        const strokeWeight = node.strokeWeight;
+        return {
+            stroke,
+            strokeWeight
+        };
+    });
+}
+function createTypeStylePropsConverter(valueResolver) {
+    return definePropsConverter((node)=>{
+        const styleName = valueResolver.getTextStyleValue(node);
+        const maxLines = node.style.textTruncation === "ENDING" ? node.style.maxLines ?? undefined : undefined;
+        if (styleName) {
+            return {
+                textStyle: styleName,
+                maxLines
+            };
+        }
+        return {
+            fontSize: valueResolver.getFormattedValue.fontSize(node),
+            fontWeight: valueResolver.getFormattedValue.fontWeight(node),
+            lineHeight: valueResolver.getFormattedValue.lineHeight(node),
+            maxLines
+        };
+    });
+}
+
+function createRectangleTransformer({ propsConverters }) {
+    return defineElementTransformer((node)=>{
+        return createElement("Rectangle", {
+            ...propsConverters.selfLayout(node)
+        });
+    });
+}
+function createVectorTransformer({ propsConverters }) {
+    return defineElementTransformer((node)=>{
+        return createElement("Vector", {
+            ...propsConverters.selfLayout(node),
+            ...propsConverters.radius(node),
+            ...propsConverters.stroke(node),
+            ...propsConverters.shapeFill(node)
+        }, [], "Vector Node Placeholder");
+    });
+}
+function createBooleanOperationTransformer({ propsConverters }) {
+    return defineElementTransformer((node, traverse)=>{
+        return createElement("BooleanOperation", {
+            ...propsConverters.selfLayout(node),
+            ...propsConverters.radius(node),
+            ...propsConverters.stroke(node),
+            ...propsConverters.shapeFill(node)
+        }, node.children.map(traverse));
+    });
+}
+
+function createTextTransformer({ propsConverters }) {
+    return defineElementTransformer((node)=>{
+        const hasMultipleFills = node.fills.length > 1;
+        const fillProps = propsConverters.textFill(node);
+        const typeStyleProps = propsConverters.typeStyle(node);
+        const props = compactObject({
+            ...typeStyleProps,
+            ...fillProps
+        });
+        return createElement("Text", props, node.characters, hasMultipleFills ? "Multiple fills in Text node encountered, only the first fill is used." : "");
+    });
+}
+
 function toCssRgba(color) {
     if (color.a === 1) {
         return `rgb(${Math.round(color.r * 255)}, ${Math.round(color.g * 255)}, ${Math.round(color.b * 255)})`;
@@ -7906,20 +7894,25 @@ function toCssRgba(color) {
     return `rgba(${Math.round(color.r * 255)}, ${Math.round(color.g * 255)}, ${Math.round(color.b * 255)}, ${color.a})`;
 }
 
-const valueResolver = createValueResolver({
-    variableService,
-    variableNameFormatter: ({ slug })=>slug.filter((s)=>s !== "dimension").map((s)=>s.replaceAll(",", "_")).join("/"),
-    styleService,
-    styleNameFormatter: ({ slug })=>slug[slug.length - 1],
-    rawValueFormatters: {
-        color: (value)=>toCssRgba(value),
-        dimension: (value)=>value,
-        fontDimension: (value)=>value,
-        fontWeight: (value)=>value
-    }
-});
+const defaultVariableNameFormatter = ({ slug })=>slug.filter((s)=>s !== "dimension").map((s)=>s.replaceAll(",", "_")).join("/");
+const defaultStyleNameFormatter = ({ slug })=>slug[slug.length - 1];
+const defaultRawValueFormatters = {
+    color: (value)=>toCssRgba(value),
+    dimension: (value)=>value,
+    fontDimension: (value)=>value,
+    fontWeight: (value)=>value
+};
 
-function createPipeline() {
+function createPipeline(options = {}) {
+    const { shouldInferAutoLayout = true, shouldInferVariableName = true } = options;
+    const valueResolver = createValueResolver({
+        variableService,
+        variableNameFormatter: defaultVariableNameFormatter,
+        styleService,
+        styleNameFormatter: defaultStyleNameFormatter,
+        rawValueFormatters: defaultRawValueFormatters,
+        shouldInferVariableName
+    });
     const containerLayoutPropsConverter = createContainerLayoutPropsConverter(valueResolver);
     const selfLayoutPropsConverter = createSelfLayoutPropsConverter(valueResolver);
     const frameFillPropsConverter = createFrameFillPropsConverter(valueResolver);
@@ -7962,7 +7955,8 @@ function createPipeline() {
         rectangleTransformer,
         instanceTransformer,
         vectorTransformer,
-        booleanOperationTransformer
+        booleanOperationTransformer,
+        shouldInferAutoLayout
     });
     return codegenTransformer;
 }
@@ -7986,4 +7980,4 @@ var index = {
   createVectorTransformer: createVectorTransformer
 };
 
-export { cloneElement, createCodeGenerator, createElement, createPropsConverter, createValueResolver, defineComponentHandler, defineElementTransformer, definePropsConverter, index as figma, inferLayout, useCodegenOptions };
+export { cloneElement, createCodeGenerator, createElement, createPropsConverter, createValueResolver, defineComponentHandler, defineElementTransformer, definePropsConverter, index as figma, inferLayout };

package/lib/codegen/targets/react/index.cjs

@@ -1,6 +1,5 @@
 var tsPattern = require('ts-pattern');
 var changeCase = require('change-case');
-var async_hooks = require('async_hooks');
 
 function ensureArray(maybeArray) {
     if (Array.isArray(maybeArray)) {
@@ -105,15 +104,6 @@ function stringifyElement(element, options = {}) {
     return recursive(element, 0);
 }
 
-const codegenOptionsContext = new async_hooks.AsyncLocalStorage();
-function useCodegenOptions() {
-    const options = codegenOptionsContext.getStore();
-    if (!options) {
-        throw new Error("Trying to get codegen options outside of codegen context. Did you forget to call `codegenOptionsContext.run`?");
-    }
-    return options;
-}
-
 // --- Helper Functions ---
 function getCollectiveBoundingBox(nodes) {
     if (nodes.length === 0) {
@@ -421,12 +411,11 @@ function applyInferredLayout(parentNode, result) {
     };
 }
 
-function createCodeGenerator({ frameTransformer, textTransformer, rectangleTransformer, instanceTransformer, vectorTransformer, booleanOperationTransformer }) {
+function createCodeGenerator({ frameTransformer, textTransformer, rectangleTransformer, instanceTransformer, vectorTransformer, booleanOperationTransformer, shouldInferAutoLayout }) {
     function traverse(node) {
         if ("visible" in node && !node.visible) {
             return;
         }
-        const { shouldInferAutoLayout } = useCodegenOptions();
         const result = tsPattern.match(node).with({
             type: "FRAME"
         }, (node)=>shouldInferAutoLayout ? frameTransformer(applyInferredLayout(node, inferLayout(node)), traverse) : frameTransformer(node, traverse)).with({
@@ -450,11 +439,11 @@ function createCodeGenerator({ frameTransformer, textTransformer, rectangleTrans
         }
         return;
     }
-    function generateJsxTree(node, options) {
-        return codegenOptionsContext.run(options, ()=>traverse(node));
+    function generateJsxTree(node) {
+        return traverse(node);
     }
     function generateCode(node, options) {
-        const jsxTree = generateJsxTree(node, options);
+        const jsxTree = generateJsxTree(node);
         return jsxTree ? stringifyElement(jsxTree, {
             printSource: options.shouldPrintSource
         }) : undefined;
@@ -554,7 +543,7 @@ function getFirstStrokeVariable(node) {
     return node.boundVariables?.strokes?.[0];
 }
 
-function createValueResolver({ variableService, variableNameFormatter, styleService, styleNameFormatter, rawValueFormatters }) {
+function createValueResolver({ variableService, variableNameFormatter, styleService, styleNameFormatter, rawValueFormatters, shouldInferVariableName }) {
     function getVariableName(key) {
         const slug = variableService.getSlug(key);
         if (!slug) {
@@ -565,7 +554,6 @@ function createValueResolver({ variableService, variableNameFormatter, styleServ
         });
     }
     function inferVariableName(value, scope) {
-        const { shouldInferVariableName } = useCodegenOptions();
         if (!shouldInferVariableName) {
             return undefined;
         }
@@ -12102,26 +12090,30 @@ function toCssRgba(color) {
     return `rgba(${Math.round(color.r * 255)}, ${Math.round(color.g * 255)}, ${Math.round(color.b * 255)}, ${color.a})`;
 }
 
-const valueResolver = createValueResolver({
-    variableService,
-    variableNameFormatter: ({ slug })=>slug.filter((s)=>!(s === "dimension" || s === "radius" || s === "font-size" || s === "font-weight" || s === "line-height")).map((s)=>s.replaceAll(",", "_")).map(camelCasePreserveUnderscoreBetweenNumbers).join("."),
-    styleService,
-    styleNameFormatter: ({ slug })=>changeCase.camelCase(slug[slug.length - 1], {
-            mergeAmbiguousCharacters: true
-        }),
-    rawValueFormatters: {
-        color: (value)=>toCssRgba(value),
-        dimension: (value)=>toCssPixel(value),
-        fontDimension: (value)=>toCssPixel(value),
-        fontWeight: (value)=>value
-    }
-});
+const defaultVariableNameFormatter = ({ slug })=>slug.filter((s)=>!(s === "dimension" || s === "radius" || s === "font-size" || s === "font-weight" || s === "line-height")).map((s)=>s.replaceAll(",", "_")).map(camelCasePreserveUnderscoreBetweenNumbers).join(".");
+const defaultStyleNameFormatter = ({ slug })=>changeCase.camelCase(slug[slug.length - 1], {
+        mergeAmbiguousCharacters: true
+    });
+const defaultRawValueFormatters = {
+    color: (value)=>toCssRgba(value),
+    dimension: (value)=>toCssPixel(value),
+    fontDimension: (value)=>toCssPixel(value),
+    fontWeight: (value)=>value
+};
 
 const iconHandler = createIconHandler({
     iconService
 });
 function createPipeline(options = {}) {
-    const { extend = {} } = options;
+    const { shouldInferAutoLayout = true, shouldInferVariableName = true, extend = {} } = options;
+    const valueResolver = createValueResolver({
+        variableService,
+        variableNameFormatter: defaultVariableNameFormatter,
+        styleService,
+        styleNameFormatter: defaultStyleNameFormatter,
+        rawValueFormatters: defaultRawValueFormatters,
+        shouldInferVariableName
+    });
     const containerLayoutPropsConverter = createContainerLayoutPropsConverter(valueResolver);
     const selfLayoutPropsConverter = createSelfLayoutPropsConverter(valueResolver);
     const iconSelfLayoutPropsConverter = createIconSelfLayoutPropsConverter(valueResolver);
@@ -12179,7 +12171,8 @@ function createPipeline(options = {}) {
         rectangleTransformer,
         instanceTransformer,
         vectorTransformer,
-        booleanOperationTransformer
+        booleanOperationTransformer,
+        shouldInferAutoLayout
     });
     return codeGenerator;
 }

package/lib/codegen/targets/react/index.d.ts

@@ -68,11 +68,6 @@ interface NormalizedUnhandledNode {
 }
 type NormalizedSceneNode = NormalizedFrameNode | NormalizedRectangleNode | NormalizedTextNode | NormalizedComponentNode | NormalizedInstanceNode | NormalizedVectorNode | NormalizedBooleanOperationNode | NormalizedUnhandledNode;
 
-interface CodegenOptions {
-    shouldInferAutoLayout: boolean;
-    shouldInferVariableName: boolean;
-}
-
 interface ElementNode {
     __IS_JSX_ELEMENT_NODE: true;
     tag: string;
@@ -255,13 +250,15 @@ declare function bindComponentHandler<T extends NormalizedInstanceNode["componen
 declare const unboundSeedComponentHandlers: Array<UnboundComponentHandler<any>>;
 
 interface CreatePipelineConfig {
+    shouldInferAutoLayout?: boolean;
+    shouldInferVariableName?: boolean;
     extend?: {
         componentHandlers?: Array<UnboundComponentHandler<any>>;
     };
 }
 declare function createPipeline(options?: CreatePipelineConfig): {
-    generateJsxTree: (node: NormalizedSceneNode, options: CodegenOptions) => any;
-    generateCode: (node: NormalizedSceneNode, options: CodegenOptions & {
+    generateJsxTree: (node: NormalizedSceneNode) => ElementNode | undefined;
+    generateCode: (node: NormalizedSceneNode, options: {
         shouldPrintSource: boolean;
     }) => string | undefined;
 };