@seed-design/figma 0.0.22 → 0.0.23

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

@@ -1,6 +1,5 @@
 import { match } from 'ts-pattern';
 import { camelCase, pascalCase } from 'change-case';
-import { AsyncLocalStorage } from 'async_hooks';
 
 function ensureArray(maybeArray) {
     if (Array.isArray(maybeArray)) {
@@ -105,15 +104,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) {
@@ -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 = 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 })=>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 })=>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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@seed-design/figma",
-  "version": "0.0.22",
+  "version": "0.0.23",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/daangn/seed-design.git",
@@ -38,7 +38,7 @@
     "lint:publish": "bun publint"
   },
   "dependencies": {
-    "@seed-design/css": "0.0.21",
+    "@seed-design/css": "0.0.23",
     "change-case": "^5.4.4",
     "ts-pattern": "^5.7.0"
   },

package/src/codegen/core/codegen.ts

@@ -10,7 +10,6 @@ import type {
 } from "@/normalizer";
 import { match } from "ts-pattern";
 import { appendSource, createElement, stringifyElement, type ElementNode } from "../core/jsx";
-import { codegenOptionsContext, useCodegenOptions, type CodegenOptions } from "./context";
 import type { ElementTransformer } from "./element-transformer";
 import { applyInferredLayout, inferLayout } from "./infer-layout";
 
@@ -23,6 +22,7 @@ export interface CodeGeneratorDeps {
   instanceTransformer: ElementTransformer<NormalizedInstanceNode>;
   vectorTransformer: ElementTransformer<NormalizedVectorNode>;
   booleanOperationTransformer: ElementTransformer<NormalizedBooleanOperationNode>;
+  shouldInferAutoLayout: boolean;
 }
 
 export function createCodeGenerator({
@@ -32,14 +32,13 @@ export function createCodeGenerator({
   instanceTransformer,
   vectorTransformer,
   booleanOperationTransformer,
+  shouldInferAutoLayout,
 }: CodeGeneratorDeps) {
   function traverse(node: NormalizedSceneNode): ElementNode | undefined {
     if ("visible" in node && !node.visible) {
       return;
     }
 
-    const { shouldInferAutoLayout } = useCodegenOptions();
-
     const result = match(node)
       .with({ type: "FRAME" }, (node) =>
         shouldInferAutoLayout
@@ -62,15 +61,12 @@ export function createCodeGenerator({
     return;
   }
 
-  function generateJsxTree(node: NormalizedSceneNode, options: CodegenOptions) {
-    return codegenOptionsContext.run(options, () => traverse(node));
+  function generateJsxTree(node: NormalizedSceneNode) {
+    return traverse(node);
   }
 
-  function generateCode(
-    node: NormalizedSceneNode,
-    options: CodegenOptions & { shouldPrintSource: boolean },
-  ) {
-    const jsxTree = generateJsxTree(node, options);
+  function generateCode(node: NormalizedSceneNode, options: { shouldPrintSource: boolean }) {
+    const jsxTree = generateJsxTree(node);
     return jsxTree
       ? stringifyElement(jsxTree, { printSource: options.shouldPrintSource })
       : undefined;

package/src/codegen/core/index.ts

@@ -5,7 +5,6 @@ export type {
   InferComponentDefinition,
   InferComponentPropertyType,
 } from "./component-type-helper";
-export type { CodegenOptions } from "./context";
 export type { ElementTransformer } from "./element-transformer";
 export type { ElementNode } from "./jsx";
 export type { PropsConverter } from "./props-converter";
@@ -13,7 +12,6 @@ export type { ValueResolver } from "./value-resolver";
 
 export { createCodeGenerator } from "./codegen";
 export { defineComponentHandler } from "./component-handler";
-export { useCodegenOptions } from "./context";
 export { defineElementTransformer } from "./element-transformer";
 export { inferLayout } from "./infer-layout";
 export { cloneElement, createElement } from "./jsx";

package/src/codegen/core/value-resolver.ts

@@ -15,7 +15,6 @@ import {
 } from "@/utils/figma-node";
 import type { RGBA } from "@figma/rest-api-spec";
 import type { VariableService } from "../../entities/variable.service";
-import { useCodegenOptions } from "./context";
 
 export interface ValueResolver<TColor, TDimension, TFontDimension, TFontWeight> {
   getFormattedValue: {
@@ -102,6 +101,7 @@ export interface ValueResolverDeps<TColor, TDimension, TFontDimension, TFontWeig
     fontDimension: (value: number) => string | TFontDimension;
     fontWeight: (value: number) => string | TFontWeight;
   };
+  shouldInferVariableName: boolean;
 }
 
 export function createValueResolver<TColor, TDimension, TFontDimension, TFontWeight>({
@@ -110,6 +110,7 @@ export function createValueResolver<TColor, TDimension, TFontDimension, TFontWei
   styleService,
   styleNameFormatter,
   rawValueFormatters,
+  shouldInferVariableName,
 }: ValueResolverDeps<TColor, TDimension, TFontDimension, TFontWeight>): ValueResolver<
   TColor,
   TDimension,
@@ -127,8 +128,6 @@ export function createValueResolver<TColor, TDimension, TFontDimension, TFontWei
   }
 
   function inferVariableName(value: VariableValueResolved, scope: VariableScope) {
-    const { shouldInferVariableName } = useCodegenOptions();
-
     if (!shouldInferVariableName) {
       return undefined;
     }

package/src/codegen/targets/figma/pipeline.ts

@@ -1,4 +1,5 @@
-import { createCodeGenerator } from "@/codegen/core";
+import { createCodeGenerator, createValueResolver } from "@/codegen/core";
+import { styleService, variableService } from "@/codegen/default-services";
 import { createFrameTransformer } from "./frame";
 import { createInstanceTransformer } from "./instance";
 import {
@@ -17,9 +18,29 @@ import {
   createVectorTransformer,
 } from "./shape";
 import { createTextTransformer } from "./text";
-import { valueResolver } from "./value-resolver";
+import {
+  defaultRawValueFormatters,
+  defaultStyleNameFormatter,
+  defaultVariableNameFormatter,
+} from "./value-resolver";
+
+export interface CreatePipelineConfig {
+  shouldInferAutoLayout?: boolean;
+  shouldInferVariableName?: boolean;
+}
+
+export function createPipeline(options: CreatePipelineConfig = {}) {
+  const { shouldInferAutoLayout = true, shouldInferVariableName = true } = options;
+
+  const valueResolver = createValueResolver({
+    variableService,
+    variableNameFormatter: defaultVariableNameFormatter,
+    styleService,
+    styleNameFormatter: defaultStyleNameFormatter,
+    rawValueFormatters: defaultRawValueFormatters,
+    shouldInferVariableName,
+  });
 
-export function createPipeline() {
   const containerLayoutPropsConverter = createContainerLayoutPropsConverter(valueResolver);
   const selfLayoutPropsConverter = createSelfLayoutPropsConverter(valueResolver);
   const frameFillPropsConverter = createFrameFillPropsConverter(valueResolver);
@@ -28,6 +49,7 @@ export function createPipeline() {
   const radiusPropsConverter = createRadiusPropsConverter(valueResolver);
   const strokePropsConverter = createStrokePropsConverter(valueResolver);
   const typeStylePropsConverter = createTypeStylePropsConverter(valueResolver);
+
   const propsConverters = {
     containerLayout: containerLayoutPropsConverter,
     selfLayout: selfLayoutPropsConverter,
@@ -65,6 +87,7 @@ export function createPipeline() {
     instanceTransformer,
     vectorTransformer,
     booleanOperationTransformer,
+    shouldInferAutoLayout,
   });
 
   return codegenTransformer;

package/src/codegen/targets/figma/value-resolver.ts

@@ -1,22 +1,19 @@
-import { createValueResolver, type ValueResolver } from "@/codegen/core";
-import { styleService, variableService } from "@/codegen/default-services";
+import type { ValueResolver } from "@/codegen/core";
 import { toCssRgba } from "@/utils/css";
 
 export type FigmaValueResolver = ValueResolver<string, number, number, number>;
 
-export 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: RGBA) => toCssRgba(value),
-    dimension: (value: number) => value,
-    fontDimension: (value: number) => value,
-    fontWeight: (value: number) => value,
-  },
-});
+export const defaultVariableNameFormatter = ({ slug }: { slug: string[] }) =>
+  slug
+    .filter((s) => s !== "dimension")
+    .map((s) => s.replaceAll(",", "_"))
+    .join("/");
+
+export const defaultStyleNameFormatter = ({ slug }: { slug: string[] }) => slug[slug.length - 1]!;
+
+export const defaultRawValueFormatters = {
+  color: (value: RGBA) => toCssRgba(value),
+  dimension: (value: number) => value,
+  fontDimension: (value: number) => value,
+  fontWeight: (value: number) => value,
+};

package/src/codegen/targets/react/pipeline.ts

@@ -1,5 +1,5 @@
-import { createCodeGenerator } from "@/codegen/core";
-import { iconService } from "@/codegen/default-services";
+import { createCodeGenerator, createValueResolver } from "@/codegen/core";
+import { iconService, styleService, variableService } from "@/codegen/default-services";
 import {
   type UnboundComponentHandler,
   bindComponentHandler,
@@ -26,9 +26,15 @@ import {
   createVectorTransformer,
 } from "./shape";
 import { createTextTransformer } from "./text";
-import { valueResolver } from "./value-resolver";
+import {
+  defaultRawValueFormatters,
+  defaultStyleNameFormatter,
+  defaultVariableNameFormatter,
+} from "./value-resolver";
 
 export interface CreatePipelineConfig {
+  shouldInferAutoLayout?: boolean;
+  shouldInferVariableName?: boolean;
   extend?: {
     componentHandlers?: Array<UnboundComponentHandler<any>>;
   };
@@ -39,7 +45,16 @@ const iconHandler = createIconHandler({
 });
 
 export function createPipeline(options: CreatePipelineConfig = {}) {
-  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);
@@ -102,6 +117,7 @@ export function createPipeline(options: CreatePipelineConfig = {}) {
     instanceTransformer,
     vectorTransformer,
     booleanOperationTransformer,
+    shouldInferAutoLayout,
   });
 
   return codeGenerator;

package/src/codegen/targets/react/value-resolver.ts

@@ -1,35 +1,32 @@
-import { createValueResolver, type ValueResolver } from "@/codegen/core";
-import { styleService, variableService } from "@/codegen/default-services";
+import type { ValueResolver } from "@/codegen/core";
 import { camelCasePreserveUnderscoreBetweenNumbers } from "@/utils/common";
 import { toCssPixel, toCssRgba } from "@/utils/css";
 import { camelCase } from "change-case";
 
 export type ReactValueResolver = ValueResolver<string, string, string, number>;
 
-export 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 }) =>
-    camelCase(slug[slug.length - 1]!, { mergeAmbiguousCharacters: true }),
-  rawValueFormatters: {
-    color: (value: RGBA) => toCssRgba(value),
-    dimension: (value: number) => toCssPixel(value),
-    fontDimension: (value: number) => toCssPixel(value),
-    fontWeight: (value: number) => value,
-  },
-});
+export const defaultVariableNameFormatter = ({ slug }: { slug: string[] }) =>
+  slug
+    .filter(
+      (s) =>
+        !(
+          s === "dimension" ||
+          s === "radius" ||
+          s === "font-size" ||
+          s === "font-weight" ||
+          s === "line-height"
+        ),
+    )
+    .map((s) => s.replaceAll(",", "_"))
+    .map(camelCasePreserveUnderscoreBetweenNumbers)
+    .join(".");
+
+export const defaultStyleNameFormatter = ({ slug }: { slug: string[] }) =>
+  camelCase(slug[slug.length - 1]!, { mergeAmbiguousCharacters: true });
+
+export const defaultRawValueFormatters = {
+  color: (value: RGBA) => toCssRgba(value),
+  dimension: (value: number) => toCssPixel(value),
+  fontDimension: (value: number) => toCssPixel(value),
+  fontWeight: (value: number) => value,
+};

package/src/codegen/core/context.ts

@@ -1,20 +0,0 @@
-import { AsyncLocalStorage } from "async_hooks";
-
-export interface CodegenOptions {
-  shouldInferAutoLayout: boolean;
-  shouldInferVariableName: boolean;
-}
-
-export const codegenOptionsContext = new AsyncLocalStorage<CodegenOptions>();
-
-export function useCodegenOptions(): CodegenOptions {
-  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;
-}