@seed-design/figma 0.0.20 → 0.0.22

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

@@ -9,14 +9,14 @@ import {
   defineElementTransformer,
   type ElementTransformer,
 } from "../../core";
-import type { ContainerLayoutProps, PropsTransformers } from "./props";
+import type { ContainerLayoutProps, PropsConverters } from "./props";
 
 export interface FrameTransformerDeps {
-  propsTransformers: PropsTransformers;
+  propsConverters: PropsConverters;
 }
 
 export function createFrameTransformer({
-  propsTransformers,
+  propsConverters,
 }: FrameTransformerDeps): ElementTransformer<
   NormalizedFrameNode | NormalizedInstanceNode | NormalizedComponentNode
 > {
@@ -39,11 +39,11 @@ export function createFrameTransformer({
       const isFlex = node.layoutMode === "HORIZONTAL" || node.layoutMode === "VERTICAL";
 
       const props = {
-        ...propsTransformers.radius(node, traverse),
-        ...(isFlex ? propsTransformers.containerLayout(node, traverse) : {}),
-        ...propsTransformers.selfLayout(node, traverse),
-        ...propsTransformers.frameFill(node, traverse),
-        ...propsTransformers.stroke(node, traverse),
+        ...propsConverters.radius(node),
+        ...(isFlex ? propsConverters.containerLayout(node) : {}),
+        ...propsConverters.selfLayout(node),
+        ...propsConverters.frameFill(node),
+        ...propsConverters.stroke(node),
       };
 
       const isStretch = props.align === undefined || props.align === "stretch";

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

@@ -0,0 +1,50 @@
+import type { IconService } from "@/entities";
+import { pascalCase } from "change-case";
+import { type ElementNode, createElement } from "../../core";
+
+export interface IconHandler {
+  isIconInstance: (node: { componentKey: string }) => boolean;
+  transform: (node: { componentKey: string }) => ElementNode;
+}
+
+export interface IconHandlerDeps {
+  iconService: IconService;
+  iconNameFormatter?: (props: { name: string; weight?: string }) => string;
+}
+
+const defaultIconNameFormatter = ({ name, weight }: { name: string; weight?: string }) =>
+  pascalCase(`${name}${weight ? weight : ""}`);
+
+export function createIconHandler({
+  iconService,
+  iconNameFormatter = defaultIconNameFormatter,
+}: IconHandlerDeps): IconHandler {
+  function isIconInstance(node: { componentKey: string }): boolean {
+    const key = node.componentKey;
+
+    if (!key) {
+      return false;
+    }
+
+    return iconService.isAvailable(key);
+  }
+
+  function transform(node: { componentKey: string }): ElementNode {
+    const key = node.componentKey;
+    const iconData = iconService.getOne(key);
+    if (!iconData) {
+      return createElement("UnknownIcon");
+    }
+
+    const { name, weight } = iconData;
+
+    const tagName = iconNameFormatter({ name, weight });
+
+    return createElement(tagName);
+  }
+
+  return {
+    isIconInstance,
+    transform,
+  };
+}

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

@@ -4,4 +4,4 @@ export * from "./frame";
 export * from "./instance";
 export * from "./text";
 export * from "./component";
-export * from "./context";
+export * from "./pipeline";

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

@@ -1,74 +1,43 @@
-import type { IconService } from "@/entities";
-import type { NormalizedFrameTrait, NormalizedInstanceNode } from "@/normalizer";
+import type { NormalizedInstanceNode } from "@/normalizer";
 import {
   createElement,
   defineElementTransformer,
-  definePropsTransformer,
-  type ComponentTransformer,
+  type ComponentHandler,
   type ElementTransformer,
 } from "../../core";
-import type { PropsTransformers } from "./props";
+import type { IconHandler } from "./icon";
+import type { PropsConverters } from "./props";
 
 export interface InstanceTransformerDeps {
-  iconService?: IconService;
-  ignoredComponentKeys?: Set<string>;
-  propsTransformers: PropsTransformers;
-  componentTransformers: Record<string, ComponentTransformer>;
+  iconHandler?: IconHandler;
+  propsConverters: PropsConverters;
+  componentHandlers: Record<string, ComponentHandler>;
   frameTransformer: ElementTransformer<NormalizedInstanceNode>;
 }
 
 export function createInstanceTransformer({
-  iconService,
-  ignoredComponentKeys,
-  propsTransformers,
-  componentTransformers,
+  iconHandler,
+  propsConverters,
+  componentHandlers,
   frameTransformer,
 }: InstanceTransformerDeps): ElementTransformer<NormalizedInstanceNode> {
-  const transformIconColorProps = definePropsTransformer((node: NormalizedFrameTrait, traverse) => {
-    if (node.children.length === 0) {
-      throw new Error("Node has no children");
-    }
-
-    const vectors = node.children.filter(
-      (child) => child.type === "VECTOR" || child.type === "BOOLEAN_OPERATION",
-    );
-
-    const colorProps = vectors.map((vector) => propsTransformers.shapeFill(vector, traverse));
-
-    const fills = new Set(
-      colorProps.map((props) => props.color).filter((color) => color !== undefined),
-    );
-
-    // If there are more than 1 color, colors are likely pre-defined in the icon component; we should ignore the color prop.
-    if (fills.size > 1) {
-      return {};
-    }
-
-    return { color: fills.values().next().value };
-  });
-
   const transform = defineElementTransformer((node: NormalizedInstanceNode, traverse) => {
     const { componentKey, componentSetKey } = node;
 
-    if (ignoredComponentKeys?.has(componentKey)) {
-      return undefined;
-    }
-
-    if (iconService?.isIconComponent(componentKey)) {
-      const tagName = iconService.createIconTagName(componentKey);
+    if (iconHandler?.isIconInstance(node)) {
       const props = {
-        ...propsTransformers.iconSelfLayout(node, traverse),
-        ...transformIconColorProps(node, traverse),
+        ...propsConverters.iconSelfLayout(node),
+        ...propsConverters.vectorChildrenFill(node),
       };
-      return createElement("Icon", { svg: createElement(tagName), ...props });
+      return createElement("Icon", { svg: iconHandler.transform(node), ...props });
     }
 
-    const componentTransformer = componentSetKey
-      ? componentTransformers[componentSetKey]
-      : componentTransformers[componentKey];
+    const componentHandler = componentSetKey
+      ? componentHandlers[componentSetKey]
+      : componentHandlers[componentKey];
 
-    if (componentTransformer) {
-      return componentTransformer.transform(node);
+    if (componentHandler) {
+      return componentHandler.transform(node);
     }
 
     return frameTransformer(node, traverse);

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

@@ -0,0 +1,108 @@
+import { createCodeGenerator } from "@/codegen/core";
+import { iconService } from "@/codegen/default-services";
+import {
+  type UnboundComponentHandler,
+  bindComponentHandler,
+  unboundSeedComponentHandlers,
+} from "./component";
+import { createFrameTransformer } from "./frame";
+import { createIconHandler } from "./icon";
+import { createInstanceTransformer } from "./instance";
+import {
+  createContainerLayoutPropsConverter,
+  createFrameFillPropsConverter,
+  createIconSelfLayoutPropsConverter,
+  createRadiusPropsConverter,
+  createSelfLayoutPropsConverter,
+  createShapeFillPropsConverter,
+  createStrokePropsConverter,
+  createTextFillPropsConverter,
+  createTypeStylePropsConverter,
+  createVectorChildrenFillPropsConverter,
+} from "./props";
+import {
+  createBooleanOperationTransformer,
+  createRectangleTransformer,
+  createVectorTransformer,
+} from "./shape";
+import { createTextTransformer } from "./text";
+import { valueResolver } from "./value-resolver";
+
+export interface CreatePipelineConfig {
+  extend?: {
+    componentHandlers?: Array<UnboundComponentHandler<any>>;
+  };
+}
+
+const iconHandler = createIconHandler({
+  iconService,
+});
+
+export function createPipeline(options: CreatePipelineConfig = {}) {
+  const { extend = {} } = options;
+
+  const containerLayoutPropsConverter = createContainerLayoutPropsConverter(valueResolver);
+  const selfLayoutPropsConverter = createSelfLayoutPropsConverter(valueResolver);
+  const iconSelfLayoutPropsConverter = createIconSelfLayoutPropsConverter(valueResolver);
+  const frameFillPropsConverter = createFrameFillPropsConverter(valueResolver);
+  const shapeFillPropsConverter = createShapeFillPropsConverter(valueResolver);
+  const textFillPropsConverter = createTextFillPropsConverter(valueResolver);
+  const vectorChildrenFillPropsConverter = createVectorChildrenFillPropsConverter(valueResolver);
+  const radiusPropsConverter = createRadiusPropsConverter(valueResolver);
+  const strokePropsConverter = createStrokePropsConverter(valueResolver);
+  const typeStylePropsConverter = createTypeStylePropsConverter({
+    valueResolver,
+  });
+  const propsConverters = {
+    containerLayout: containerLayoutPropsConverter,
+    selfLayout: selfLayoutPropsConverter,
+    iconSelfLayout: iconSelfLayoutPropsConverter,
+    frameFill: frameFillPropsConverter,
+    shapeFill: shapeFillPropsConverter,
+    textFill: textFillPropsConverter,
+    vectorChildrenFill: vectorChildrenFillPropsConverter,
+    radius: radiusPropsConverter,
+    stroke: strokePropsConverter,
+    typeStyle: typeStylePropsConverter,
+  };
+
+  const componentHandlers = Object.fromEntries(
+    [...unboundSeedComponentHandlers, ...(extend.componentHandlers ?? [])]
+      .map((h) =>
+        bindComponentHandler(h, {
+          valueResolver,
+          iconHandler,
+        }),
+      )
+      .map((t) => [t.key, t]),
+  );
+
+  const frameTransformer = createFrameTransformer({
+    propsConverters,
+  });
+  const instanceTransformer = createInstanceTransformer({
+    iconHandler,
+    propsConverters,
+    componentHandlers,
+    frameTransformer,
+  });
+  const textTransformer = createTextTransformer({
+    propsConverters,
+  });
+  const rectangleTransformer = createRectangleTransformer({
+    propsConverters,
+  });
+  const vectorTransformer = createVectorTransformer();
+  const booleanOperationTransformer = createBooleanOperationTransformer();
+
+  const codeGenerator = createCodeGenerator({
+    frameTransformer,
+    textTransformer,
+    rectangleTransformer,
+    instanceTransformer,
+    vectorTransformer,
+    booleanOperationTransformer,
+  });
+
+  return codeGenerator;
+}

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

@@ -1,10 +1,4 @@
-import {
-  createPropsTransformer,
-  definePropsTransformer,
-  type PropsTransformer,
-  type ValueTransformer,
-} from "@/codegen/core";
-import type { StyleService } from "@/entities";
+import { createPropsConverter, definePropsConverter, type PropsConverter } from "@/codegen/core";
 import type {
   NormalizedCornerTrait,
   NormalizedHasChildrenTrait,
@@ -15,17 +9,19 @@ import type {
   NormalizedTypePropertiesTrait,
 } from "@/normalizer";
 import { match } from "ts-pattern";
-
-export interface PropsTransformers {
-  containerLayout: PropsTransformer<ContainerLayoutTrait, ContainerLayoutProps>;
-  selfLayout: PropsTransformer<SelfLayoutTrait, SelfLayoutProps>;
-  iconSelfLayout: PropsTransformer<SelfLayoutTrait, IconSelfLayoutProps>;
-  radius: PropsTransformer<RadiusTrait, RadiusProps>;
-  frameFill: PropsTransformer<FillTrait, FrameFillProps>;
-  shapeFill: PropsTransformer<FillTrait, ShapeFillProps>;
-  textFill: PropsTransformer<FillTrait, TextFillProps>;
-  stroke: PropsTransformer<StrokeTrait, StrokeProps>;
-  typeStyle: PropsTransformer<TypeStyleTrait, TypeStyleProps>;
+import type { ReactValueResolver } from "./value-resolver";
+
+export interface PropsConverters {
+  containerLayout: PropsConverter<ContainerLayoutTrait, ContainerLayoutProps>;
+  selfLayout: PropsConverter<SelfLayoutTrait, SelfLayoutProps>;
+  iconSelfLayout: PropsConverter<SelfLayoutTrait, IconSelfLayoutProps>;
+  radius: PropsConverter<RadiusTrait, RadiusProps>;
+  frameFill: PropsConverter<FillTrait, FrameFillProps>;
+  shapeFill: PropsConverter<FillTrait, ShapeFillProps>;
+  textFill: PropsConverter<FillTrait, TextFillProps>;
+  vectorChildrenFill: PropsConverter<ContainerLayoutTrait, VectorChildrenFillProps>;
+  stroke: PropsConverter<StrokeTrait, StrokeProps>;
+  typeStyle: PropsConverter<TypeStyleTrait, TypeStyleProps>;
 }
 
 export type ContainerLayoutTrait = NormalizedHasFramePropertiesTrait &
@@ -58,12 +54,10 @@ export interface ContainerLayoutProps {
   p?: string | 0;
 }
 
-type ReactValueTransformer = ValueTransformer<string, string, string, number>;
-
-export function createContainerLayoutPropsTransformer(
-  valueTransformer: ReactValueTransformer,
-): PropsTransformer<ContainerLayoutTrait, ContainerLayoutProps> {
-  return createPropsTransformer({
+export function createContainerLayoutPropsConverter(
+  valueResolver: ReactValueResolver,
+): PropsConverter<ContainerLayoutTrait, ContainerLayoutProps> {
+  return createPropsConverter({
     _types: {
       trait: {} as ContainerLayoutTrait,
       props: {} as ContainerLayoutProps,
@@ -120,12 +114,12 @@ export function createContainerLayoutPropsTransformer(
           return undefined;
         }
 
-        return valueTransformer.getFormattedValue.itemSpacing(node);
+        return valueResolver.getFormattedValue.itemSpacing(node);
       },
-      pt: (node) => valueTransformer.getFormattedValue.paddingTop(node),
-      pb: (node) => valueTransformer.getFormattedValue.paddingBottom(node),
-      pl: (node) => valueTransformer.getFormattedValue.paddingLeft(node),
-      pr: (node) => valueTransformer.getFormattedValue.paddingRight(node),
+      pt: (node) => valueResolver.getFormattedValue.paddingTop(node),
+      pb: (node) => valueResolver.getFormattedValue.paddingBottom(node),
+      pl: (node) => valueResolver.getFormattedValue.paddingLeft(node),
+      pr: (node) => valueResolver.getFormattedValue.paddingRight(node),
     },
     shorthands: {
       p: ["pt", "pb", "pl", "pr"],
@@ -159,10 +153,10 @@ export interface SelfLayoutProps {
   maxHeight?: string | number;
 }
 
-export function createSelfLayoutPropsTransformer(
-  valueTransformer: ReactValueTransformer,
-): PropsTransformer<SelfLayoutTrait, SelfLayoutProps> {
-  return createPropsTransformer({
+export function createSelfLayoutPropsConverter(
+  valueResolver: ReactValueResolver,
+): PropsConverter<SelfLayoutTrait, SelfLayoutProps> {
+  return createPropsConverter({
     _types: {
       trait: {} as SelfLayoutTrait,
       props: {} as SelfLayoutProps,
@@ -180,27 +174,27 @@ export function createSelfLayoutPropsTransformer(
           .exhaustive(),
       height: (node) =>
         node.layoutSizingVertical === "FIXED"
-          ? valueTransformer.getFormattedValue.height(node)
+          ? valueResolver.getFormattedValue.height(node)
           : undefined,
       width: (node) =>
         node.layoutSizingHorizontal === "FIXED"
-          ? valueTransformer.getFormattedValue.width(node)
+          ? valueResolver.getFormattedValue.width(node)
           : undefined,
       minHeight: (node) =>
         node.layoutSizingVertical === "HUG"
-          ? valueTransformer.getFormattedValue.minHeight(node)
+          ? valueResolver.getFormattedValue.minHeight(node)
           : undefined,
       maxHeight: (node) =>
         node.layoutSizingVertical === "HUG"
-          ? valueTransformer.getFormattedValue.maxHeight(node)
+          ? valueResolver.getFormattedValue.maxHeight(node)
           : undefined,
       minWidth: (node) =>
         node.layoutSizingHorizontal === "HUG"
-          ? valueTransformer.getFormattedValue.minWidth(node)
+          ? valueResolver.getFormattedValue.minWidth(node)
           : undefined,
       maxWidth: (node) =>
         node.layoutSizingHorizontal === "HUG"
-          ? valueTransformer.getFormattedValue.maxWidth(node)
+          ? valueResolver.getFormattedValue.maxWidth(node)
           : undefined,
     },
     defaults: {
@@ -213,14 +207,14 @@ export interface IconSelfLayoutProps {
   size?: string | number;
 }
 
-export function createIconSelfLayoutPropsTransformer(valueTransformer: ReactValueTransformer) {
-  return createPropsTransformer({
+export function createIconSelfLayoutPropsConverter(valueResolver: ReactValueResolver) {
+  return createPropsConverter({
     _types: {
       trait: {} as SelfLayoutTrait,
       props: {} as IconSelfLayoutProps,
     },
     handlers: {
-      size: (node) => valueTransformer.getFormattedValue.width(node),
+      size: (node) => valueResolver.getFormattedValue.width(node),
     },
   });
 }
@@ -233,17 +227,17 @@ export interface RadiusProps {
   borderBottomRightRadius?: string | 0;
 }
 
-export function createRadiusPropsTransformer(valueTransformer: ReactValueTransformer) {
-  return createPropsTransformer({
+export function createRadiusPropsConverter(valueResolver: ReactValueResolver) {
+  return createPropsConverter({
     _types: {
       trait: {} as RadiusTrait,
       props: {} as RadiusProps,
     },
     handlers: {
-      borderTopLeftRadius: (node) => valueTransformer.getFormattedValue.topLeftRadius(node),
-      borderTopRightRadius: (node) => valueTransformer.getFormattedValue.topRightRadius(node),
-      borderBottomLeftRadius: (node) => valueTransformer.getFormattedValue.bottomLeftRadius(node),
-      borderBottomRightRadius: (node) => valueTransformer.getFormattedValue.bottomRightRadius(node),
+      borderTopLeftRadius: (node) => valueResolver.getFormattedValue.topLeftRadius(node),
+      borderTopRightRadius: (node) => valueResolver.getFormattedValue.topRightRadius(node),
+      borderBottomLeftRadius: (node) => valueResolver.getFormattedValue.bottomLeftRadius(node),
+      borderBottomRightRadius: (node) => valueResolver.getFormattedValue.bottomRightRadius(node),
     },
     shorthands: {
       borderRadius: [
@@ -271,15 +265,13 @@ export interface TypeStyleProps {
   maxLines?: number;
 }
 
-export function createTypeStylePropsTransformer({
-  valueTransformer,
-  styleService,
+export function createTypeStylePropsConverter({
+  valueResolver,
 }: {
-  valueTransformer: ReactValueTransformer;
-  styleService: StyleService;
-}): PropsTransformer<TypeStyleTrait, TypeStyleProps> {
-  return definePropsTransformer((node) => {
-    const styleName = node.textStyleKey ? styleService.getStyleName(node.textStyleKey) : undefined;
+  valueResolver: ReactValueResolver;
+}): PropsConverter<TypeStyleTrait, TypeStyleProps> {
+  return definePropsConverter((node) => {
+    const styleName = valueResolver.getTextStyleValue(node);
     const maxLines =
       node.style.textTruncation === "ENDING" ? (node.style.maxLines ?? undefined) : undefined;
 
@@ -291,9 +283,9 @@ export function createTypeStylePropsTransformer({
     }
 
     return {
-      fontSize: valueTransformer.getFormattedValue.fontSize(node),
-      fontWeight: valueTransformer.getFormattedValue.fontWeight(node),
-      lineHeight: valueTransformer.getFormattedValue.lineHeight(node),
+      fontSize: valueResolver.getFormattedValue.fontSize(node),
+      fontWeight: valueResolver.getFormattedValue.fontWeight(node),
+      lineHeight: valueResolver.getFormattedValue.lineHeight(node),
       maxLines,
     };
   });
@@ -303,9 +295,9 @@ export interface FrameFillProps {
   bg?: string;
 }
 
-export function createFrameFillPropsTransformer(valueTransformer: ReactValueTransformer) {
-  return definePropsTransformer<FillTrait, FrameFillProps>((node) => {
-    const bg = valueTransformer.getFormattedValue.frameFill(node);
+export function createFrameFillPropsConverter(valueResolver: ReactValueResolver) {
+  return definePropsConverter<FillTrait, FrameFillProps>((node) => {
+    const bg = valueResolver.getFormattedValue.frameFill(node);
 
     return {
       bg,
@@ -317,9 +309,9 @@ export interface ShapeFillProps {
   color?: string;
 }
 
-export function createShapeFillPropsTransformer(valueTransformer: ReactValueTransformer) {
-  return definePropsTransformer<FillTrait, ShapeFillProps>((node) => {
-    const color = valueTransformer.getFormattedValue.shapeFill(node);
+export function createShapeFillPropsConverter(valueResolver: ReactValueResolver) {
+  return definePropsConverter<FillTrait, ShapeFillProps>((node) => {
+    const color = valueResolver.getFormattedValue.shapeFill(node);
 
     return {
       color,
@@ -331,9 +323,9 @@ export interface TextFillProps {
   color?: string;
 }
 
-export function createTextFillPropsTransformer(valueTransformer: ReactValueTransformer) {
-  return definePropsTransformer<FillTrait, TextFillProps>((node) => {
-    const color = valueTransformer.getFormattedValue.textFill(node);
+export function createTextFillPropsConverter(valueResolver: ReactValueResolver) {
+  return definePropsConverter<FillTrait, TextFillProps>((node) => {
+    const color = valueResolver.getFormattedValue.textFill(node);
 
     return {
       color,
@@ -341,16 +333,46 @@ export function createTextFillPropsTransformer(valueTransformer: ReactValueTrans
   });
 }
 
+export interface VectorChildrenFillProps {
+  color?: string;
+}
+
+export function createVectorChildrenFillPropsConverter(valueResolver: ReactValueResolver) {
+  return definePropsConverter<ContainerLayoutTrait, VectorChildrenFillProps>((node) => {
+    if (node.children.length === 0) {
+      console.warn(
+        `createVectorChildrenFillPropsConverter: Node has no children. Name:${node.name}, ID:${node.id}`,
+      );
+      return {};
+    }
+
+    const vectors = node.children.filter(
+      (child) => child.type === "VECTOR" || child.type === "BOOLEAN_OPERATION",
+    );
+
+    const colors = vectors.map((vector) => valueResolver.getFormattedValue.shapeFill(vector));
+
+    const fills = new Set(colors.filter((color) => color !== undefined));
+
+    // If there are more than 1 color, colors are likely pre-defined in the icon component; we should ignore the color prop.
+    if (fills.size > 1) {
+      return {};
+    }
+
+    return { color: fills.values().next().value };
+  });
+}
+
 export interface StrokeProps {
   borderWidth?: number;
   borderColor?: string;
 }
 
-export function createStrokePropsTransformer(
-  valueTransformer: ReactValueTransformer,
-): PropsTransformer<StrokeTrait, StrokeProps> {
-  return definePropsTransformer((node) => {
-    const borderColor = valueTransformer.getFormattedValue.stroke(node);
+export function createStrokePropsConverter(
+  valueResolver: ReactValueResolver,
+): PropsConverter<StrokeTrait, StrokeProps> {
+  return definePropsConverter((node) => {
+    const borderColor = valueResolver.getFormattedValue.stroke(node);
     const borderWidth = borderColor ? node.strokeWeight : undefined;
 
     return {

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

@@ -4,19 +4,19 @@ import type {
   NormalizedVectorNode,
 } from "@/normalizer";
 import { createElement, defineElementTransformer, type ElementTransformer } from "../../core";
-import type { PropsTransformers } from "./props";
+import type { PropsConverters } from "./props";
 
 export interface RectangleTransformerDeps {
-  propsTransformers: PropsTransformers;
+  propsConverters: PropsConverters;
 }
 
 export function createRectangleTransformer({
-  propsTransformers,
+  propsConverters,
 }: RectangleTransformerDeps): ElementTransformer<NormalizedRectangleNode> {
-  return defineElementTransformer((node: NormalizedRectangleNode, traverse) => {
+  return defineElementTransformer((node: NormalizedRectangleNode) => {
     return createElement(
       "Box",
-      { ...propsTransformers.selfLayout(node, traverse), background: "palette.gray200" },
+      { ...propsConverters.selfLayout(node), background: "palette.gray200" },
       undefined,
       "Rectangle Node Placeholder",
     );

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

@@ -1,20 +1,20 @@
 import type { NormalizedTextNode } from "@/normalizer";
 import { compactObject } from "@/utils/common";
 import { createElement, defineElementTransformer, type ElementTransformer } from "../../core";
-import type { PropsTransformers } from "./props";
+import type { PropsConverters } from "./props";
 
 export interface TextTransformerDeps {
-  propsTransformers: PropsTransformers;
+  propsConverters: PropsConverters;
 }
 
 export function createTextTransformer({
-  propsTransformers,
+  propsConverters,
 }: TextTransformerDeps): ElementTransformer<NormalizedTextNode> {
-  return defineElementTransformer((node: NormalizedTextNode, traverse) => {
+  return defineElementTransformer((node: NormalizedTextNode) => {
     const hasMultipleFills = node.fills.length > 1;
 
-    const fillProps = propsTransformers.textFill(node, traverse);
-    const typeStyleProps = propsTransformers.typeStyle(node, traverse);
+    const fillProps = propsConverters.textFill(node);
+    const typeStyleProps = propsConverters.typeStyle(node);
 
     const props = compactObject({
       ...typeStyleProps,