@seed-design/figma 0.0.21 → 0.0.23

package/src/codegen/targets/react/component/{transformers → handlers}/text-button.ts

@@ -1,24 +1,22 @@
-import { createElement, defineComponentTransformer } from "@/codegen/core";
+import type { TextButtonProperties } from "@/codegen/component-properties";
+import { createElement, defineComponentHandler } from "@/codegen/core";
 import * as metadata from "@/entities/data/__generated__/component-sets";
 import type { NormalizedInstanceNode } from "@/normalizer";
 import { findOne } from "@/utils/figma-node";
 import { camelCase } from "change-case";
 import { match } from "ts-pattern";
-import type { SeedComponentTransformerDeps } from "../deps.interface";
-import type { TextButtonProperties } from "../properties.type";
+import type { ComponentHandlerDeps } from "../deps.interface";
 import { handleSizeProp } from "../size";
 
-export const createTextButtonTransformer = (ctx: SeedComponentTransformerDeps) =>
-  defineComponentTransformer<TextButtonProperties>(metadata.textButton.key, (node) => {
+export const createTextButtonHandler = (ctx: ComponentHandlerDeps) =>
+  defineComponentHandler<TextButtonProperties>(metadata.textButton.key, (node) => {
     const { componentProperties: props } = node;
 
     const states = props.State.value.split("-");
 
     const { prefixIcon, suffixIcon, children } = match(props.Layout.value)
       .with("Icon First", () => ({
-        prefixIcon: createElement(
-          ctx.iconService.createIconTagName(props["Prefix Icon#7561:0"].componentKey),
-        ),
+        prefixIcon: ctx.iconHandler.transform(props["Prefix Icon#7561:0"]),
         suffixIcon: undefined,
         children: props["Label#6148:0"].value,
       }))
@@ -28,13 +26,9 @@ export const createTextButtonTransformer = (ctx: SeedComponentTransformerDeps) =
           (node) => node.type === "INSTANCE" && node.name === "Suffix Icon",
         ) as NormalizedInstanceNode | null;
 
-        const suffixIconComponentKey = suffixIconNode?.componentKey;
-
         return {
           prefixIcon: undefined,
-          suffixIcon: suffixIconComponentKey
-            ? createElement(ctx.iconService.createIconTagName(suffixIconComponentKey))
-            : undefined,
+          suffixIcon: suffixIconNode ? ctx.iconHandler.transform(suffixIconNode) : undefined,
           children: props["Label#6148:0"].value,
         };
       })

package/src/codegen/targets/react/component/{transformers → handlers}/text-field.ts

@@ -1,11 +1,11 @@
-import { createElement, defineComponentTransformer } from "@/codegen/core";
+import { createElement, defineComponentHandler } from "@/codegen/core";
 import * as metadata from "@/entities/data/__generated__/component-sets";
-import type { SeedComponentTransformerDeps } from "../deps.interface";
-import type { TextFieldProperties } from "../properties.type";
+import type { ComponentHandlerDeps } from "../deps.interface";
+import type { TextFieldProperties } from "@/codegen/component-properties";
 import { handleSizeProp } from "../size";
 
-export const createTextFieldTransformer = (ctx: SeedComponentTransformerDeps) =>
-  defineComponentTransformer<TextFieldProperties>(
+export const createTextFieldHandler = (ctx: ComponentHandlerDeps) =>
+  defineComponentHandler<TextFieldProperties>(
     metadata.textField.key,
     ({ componentProperties: props }) => {
       const {
@@ -18,14 +18,14 @@ export const createTextFieldTransformer = (ctx: SeedComponentTransformerDeps) =>
         "Indicator#15327:249": { value: indicator },
         "Show Prefix#958:125": { value: showPrefix },
         "Show Prefix Icon#1267:50": { value: showPrefixIcon },
-        "Prefix Icon#1267:25": { componentKey: prefixIcon },
+        "Prefix Icon#1267:25": prefixIcon,
         "Show Prefix Text#1267:0": { value: showPrefixText },
         "Prefix Text#15327:101": { value: prefix },
         "Placeholder#958:0": { value: placeholder },
         "Filled Text#1304:0": { value: defaultValue },
         "Show Suffix#958:100": { value: showSuffix },
         "Show Suffix Icon#1267:75": { value: showSuffixIcon },
-        "Suffix Icon #1267:100": { componentKey: suffixIcon },
+        "Suffix Icon #1267:100": suffixIcon,
         "Show Suffix Text#1267:125": { value: showSuffixText },
         "Suffix Text#15327:138": { value: suffix },
         "Show Footer#958:25": { value: showFooter },
@@ -51,7 +51,7 @@ export const createTextFieldTransformer = (ctx: SeedComponentTransformerDeps) =>
         // input affixes
         ...(showPrefix &&
           showPrefixIcon && {
-            prefixIcon: createElement(ctx.iconService.createIconTagName(prefixIcon)),
+            prefixIcon: ctx.iconHandler.transform(prefixIcon),
           }),
         ...(showPrefix &&
           showPrefixText && {
@@ -59,7 +59,7 @@ export const createTextFieldTransformer = (ctx: SeedComponentTransformerDeps) =>
           }),
         ...(showSuffix &&
           showSuffixIcon && {
-            suffixIcon: createElement(ctx.iconService.createIconTagName(suffixIcon)),
+            suffixIcon: ctx.iconHandler.transform(suffixIcon),
           }),
         ...(showSuffix &&
           showSuffixText && {

package/src/codegen/targets/react/component/{transformers → handlers}/toggle-button.ts

@@ -1,12 +1,12 @@
-import { createElement, defineComponentTransformer } from "@/codegen/core";
+import { createElement, defineComponentHandler } from "@/codegen/core";
 import * as metadata from "@/entities/data/__generated__/component-sets";
 import { camelCase } from "change-case";
-import type { SeedComponentTransformerDeps } from "../deps.interface";
-import type { ToggleButtonProperties } from "../properties.type";
+import type { ComponentHandlerDeps } from "../deps.interface";
+import type { ToggleButtonProperties } from "@/codegen/component-properties";
 import { handleSizeProp } from "../size";
 
-export const createToggleButtonTransformer = (ctx: SeedComponentTransformerDeps) =>
-  defineComponentTransformer<ToggleButtonProperties>(
+export const createToggleButtonHandler = (ctx: ComponentHandlerDeps) =>
+  defineComponentHandler<ToggleButtonProperties>(
     metadata.toggleButton.key,
     ({ componentProperties: props }) => {
       const states = props.State.value.split("-");
@@ -28,17 +28,13 @@ export const createToggleButtonTransformer = (ctx: SeedComponentTransformerDeps)
       return createElement("ToggleButton", commonProps, [
         props["Show Prefix Icon#6122:392"].value
           ? createElement("PrefixIcon", {
-              svg: createElement(
-                ctx.iconService.createIconTagName(props["Prefix Icon#6122:98"].componentKey),
-              ),
+              svg: ctx.iconHandler.transform(props["Prefix Icon#6122:98"]),
             })
           : undefined,
         props["Label#6122:49"].value,
         props["Show Suffix Icon#6122:147"].value
           ? createElement("SuffixIcon", {
-              svg: createElement(
-                ctx.iconService.createIconTagName(props["Suffix Icon#6122:343"].componentKey),
-              ),
+              svg: ctx.iconHandler.transform(props["Suffix Icon#6122:343"]),
             })
           : undefined,
       ]);

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

@@ -1,77 +1,81 @@
-import type { ComponentTransformer } from "@/codegen/core";
-import type { SeedComponentTransformerDeps } from "./deps.interface";
-import { createActionButtonTransformer } from "./transformers/action-button";
-import { createActionChipTransformer } from "./transformers/action-chip";
-import { createActionSheetTransformer } from "./transformers/action-sheet";
-import { createAppBarTransformer } from "./transformers/app-bar";
-import { createAvatarTransformer } from "./transformers/avatar";
-import { createAvatarStackTransformer } from "./transformers/avatar-stack";
-import { createBadgeTransformer } from "./transformers/badge";
-import { createCalloutTransformer } from "./transformers/callout";
-import { createCheckboxTransformer } from "./transformers/checkbox";
-import { createChipTabsTransformer } from "./transformers/chip-tabs";
-import { createControlChipTransformer } from "./transformers/control-chip";
-import { createErrorStateTransformer } from "./transformers/error-state";
-import { createExtendedActionSheetTransformer } from "./transformers/extended-action-sheet";
-import { createExtendedFabTransformer } from "./transformers/extended-fab";
-import { createFabTransformer } from "./transformers/fab";
-import { createHelpBubbleTransformer } from "./transformers/help-bubble";
-import { createIdentityPlaceholderTransformer } from "./transformers/identity-placeholder";
-import { createInlineBannerTransformer } from "./transformers/inline-banner";
-import { createMannerTempBadgeTransformer } from "./transformers/manner-temp-badge";
-import { createMultilineTextFieldTransformer } from "./transformers/multiline-text-field";
-import { createProgressCircleTransformer } from "./transformers/progress-circle";
-import { createReactionButtonTransformer } from "./transformers/reaction-button";
-import { createSegmentedControlTransformer } from "./transformers/segmented-control";
-import {
-  createSelectBoxGroupTransformer,
-  createSelectBoxTransformer,
-} from "./transformers/select-box";
-import { createSkeletonTransformer } from "./transformers/skeleton";
-import { createSnackbarTransformer } from "./transformers/snackbar";
-import { createSwitchTransformer } from "./transformers/switch";
-import { createTabsTransformer } from "./transformers/tabs";
-import { createTextButtonTransformer } from "./transformers/text-button";
-import { createTextFieldTransformer } from "./transformers/text-field";
-import { createToggleButtonTransformer } from "./transformers/toggle-button";
+import type { ComponentHandler } from "@/codegen/core";
+import type { NormalizedInstanceNode } from "@/normalizer";
+import type { ComponentHandlerDeps } from "./deps.interface";
+import { createActionButtonHandler } from "./handlers/action-button";
+import { createActionChipHandler } from "./handlers/action-chip";
+import { createActionSheetHandler } from "./handlers/action-sheet";
+import { createAppBarHandler } from "./handlers/app-bar";
+import { createAvatarHandler } from "./handlers/avatar";
+import { createAvatarStackHandler } from "./handlers/avatar-stack";
+import { createBadgeHandler } from "./handlers/badge";
+import { createCalloutHandler } from "./handlers/callout";
+import { createCheckboxHandler } from "./handlers/checkbox";
+import { createChipTabsHandler } from "./handlers/chip-tabs";
+import { createControlChipHandler } from "./handlers/control-chip";
+import { createErrorStateHandler } from "./handlers/error-state";
+import { createExtendedActionSheetHandler } from "./handlers/extended-action-sheet";
+import { createExtendedFabHandler } from "./handlers/extended-fab";
+import { createFabHandler } from "./handlers/fab";
+import { createHelpBubbleHandler } from "./handlers/help-bubble";
+import { createIdentityPlaceholderHandler } from "./handlers/identity-placeholder";
+import { createInlineBannerHandler } from "./handlers/inline-banner";
+import { createMannerTempBadgeHandler } from "./handlers/manner-temp-badge";
+import { createMultilineTextFieldHandler } from "./handlers/multiline-text-field";
+import { createProgressCircleHandler } from "./handlers/progress-circle";
+import { createReactionButtonHandler } from "./handlers/reaction-button";
+import { createSegmentedControlHandler } from "./handlers/segmented-control";
+import { createSelectBoxGroupHandler, createSelectBoxHandler } from "./handlers/select-box";
+import { createSkeletonHandler } from "./handlers/skeleton";
+import { createSnackbarHandler } from "./handlers/snackbar";
+import { createSwitchHandler } from "./handlers/switch";
+import { createTabsHandler } from "./handlers/tabs";
+import { createTextButtonHandler } from "./handlers/text-button";
+import { createTextFieldHandler } from "./handlers/text-field";
+import { createToggleButtonHandler } from "./handlers/toggle-button";
 
-export type { SeedComponentTransformerDeps };
-export type * from "./properties.type";
+export type { ComponentHandlerDeps };
+export type UnboundComponentHandler<T extends NormalizedInstanceNode["componentProperties"]> = (
+  deps: ComponentHandlerDeps,
+) => ComponentHandler<T>;
 
-export const createSeedComponentTransformers = (ctx: SeedComponentTransformerDeps) =>
-  Object.fromEntries(
-    [
-      createActionButtonTransformer(ctx),
-      createActionChipTransformer(ctx),
-      createActionSheetTransformer(ctx),
-      createAppBarTransformer(ctx),
-      createAvatarTransformer(ctx),
-      createAvatarStackTransformer(ctx),
-      createBadgeTransformer(ctx),
-      createCalloutTransformer(ctx),
-      createCheckboxTransformer(ctx),
-      createChipTabsTransformer(ctx),
-      createControlChipTransformer(ctx),
-      createErrorStateTransformer(ctx),
-      createExtendedActionSheetTransformer(ctx),
-      createExtendedFabTransformer(ctx),
-      createFabTransformer(ctx),
-      createHelpBubbleTransformer(ctx),
-      createIdentityPlaceholderTransformer(ctx),
-      createInlineBannerTransformer(ctx),
-      createMannerTempBadgeTransformer(ctx),
-      createMultilineTextFieldTransformer(ctx),
-      createProgressCircleTransformer(ctx),
-      createReactionButtonTransformer(ctx),
-      createSegmentedControlTransformer(ctx),
-      createSelectBoxGroupTransformer(ctx),
-      createSelectBoxTransformer(ctx),
-      createSkeletonTransformer(ctx),
-      createSnackbarTransformer(ctx),
-      createSwitchTransformer(ctx),
-      createTabsTransformer(ctx),
-      createTextButtonTransformer(ctx),
-      createTextFieldTransformer(ctx),
-      createToggleButtonTransformer(ctx),
-    ].map((x) => [x.key, x]) as Array<[string, ComponentTransformer]>,
-  );
+export function bindComponentHandler<T extends NormalizedInstanceNode["componentProperties"]>(
+  unbound: UnboundComponentHandler<T>,
+  deps: ComponentHandlerDeps,
+): ComponentHandler<T> {
+  return unbound(deps);
+}
+
+export const unboundSeedComponentHandlers: Array<UnboundComponentHandler<any>> = [
+  createActionButtonHandler,
+  createActionChipHandler,
+  createActionSheetHandler,
+  createAppBarHandler,
+  createAvatarHandler,
+  createAvatarStackHandler,
+  createBadgeHandler,
+  createCalloutHandler,
+  createCheckboxHandler,
+  createChipTabsHandler,
+  createControlChipHandler,
+  createErrorStateHandler,
+  createExtendedActionSheetHandler,
+  createExtendedFabHandler,
+  createFabHandler,
+  createHelpBubbleHandler,
+  createIdentityPlaceholderHandler,
+  createInlineBannerHandler,
+  createMannerTempBadgeHandler,
+  createMultilineTextFieldHandler,
+  createProgressCircleHandler,
+  createReactionButtonHandler,
+  createSegmentedControlHandler,
+  createSelectBoxGroupHandler,
+  createSelectBoxHandler,
+  createSkeletonHandler,
+  createSnackbarHandler,
+  createSwitchHandler,
+  createTabsHandler,
+  createTextButtonHandler,
+  createTextFieldHandler,
+  createToggleButtonHandler,
+];

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,124 @@
+import { createCodeGenerator, createValueResolver } from "@/codegen/core";
+import { iconService, styleService, variableService } 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 {
+  defaultRawValueFormatters,
+  defaultStyleNameFormatter,
+  defaultVariableNameFormatter,
+} from "./value-resolver";
+
+export interface CreatePipelineConfig {
+  shouldInferAutoLayout?: boolean;
+  shouldInferVariableName?: boolean;
+  extend?: {
+    componentHandlers?: Array<UnboundComponentHandler<any>>;
+  };
+}
+
+const iconHandler = createIconHandler({
+  iconService,
+});
+
+export function createPipeline(options: CreatePipelineConfig = {}) {
+  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);
+  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,
+    shouldInferAutoLayout,
+  });
+
+  return codeGenerator;
+}