@seed-design/figma 0.0.21 → 0.0.22

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@seed-design/figma",
-  "version": "0.0.21",
+  "version": "0.0.22",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/daangn/seed-design.git",
@@ -14,6 +14,16 @@
       "types": "./lib/index.d.ts",
       "import": "./lib/index.js",
       "require": "./lib/index.cjs"
+    },
+    "./codegen": {
+      "types": "./lib/codegen/index.d.ts",
+      "import": "./lib/codegen/index.js",
+      "require": "./lib/codegen/index.cjs"
+    },
+    "./codegen/targets/react": {
+      "types": "./lib/codegen/targets/react/index.d.ts",
+      "import": "./lib/codegen/targets/react/index.js",
+      "require": "./lib/codegen/targets/react/index.cjs"
     }
   },
   "main": "./lib/index.cjs",

package/src/codegen/{targets/react/component/properties.type.ts → component-properties.ts}

@@ -1,19 +1,19 @@
-import type { InferFromDefinition } from "@/codegen/core";
+import type { InferComponentDefinition } from "@/codegen/core";
 import type * as metadata from "@/entities/data/__generated__/component-sets";
 
-export type ActionButtonProperties = InferFromDefinition<
+export type ActionButtonProperties = InferComponentDefinition<
   typeof metadata.actionButton.componentPropertyDefinitions
 >;
 
-export type ActionChipProperties = InferFromDefinition<
+export type ActionChipProperties = InferComponentDefinition<
   typeof metadata.actionChip.componentPropertyDefinitions
 >;
 
-export type ActionSheetProperties = InferFromDefinition<
+export type ActionSheetProperties = InferComponentDefinition<
   typeof metadata.actionSheet.componentPropertyDefinitions
 >;
 
-export type ActionSheetItemProperties = InferFromDefinition<{
+export type ActionSheetItemProperties = InferComponentDefinition<{
   "Label#15420:4": {
     type: "TEXT";
     defaultValue: "액션 버튼";
@@ -30,31 +30,31 @@ export type ActionSheetItemProperties = InferFromDefinition<{
   };
 }>;
 
-export type AvatarProperties = InferFromDefinition<
+export type AvatarProperties = InferComponentDefinition<
   typeof metadata.avatar.componentPropertyDefinitions
 >;
 
-export type AvatarStackProperties = InferFromDefinition<
+export type AvatarStackProperties = InferComponentDefinition<
   typeof metadata.avatarStack.componentPropertyDefinitions
 >;
 
-export type BadgeProperties = InferFromDefinition<
+export type BadgeProperties = InferComponentDefinition<
   typeof metadata.badge.componentPropertyDefinitions
 >;
 
-export type CalloutProperties = InferFromDefinition<
+export type CalloutProperties = InferComponentDefinition<
   typeof metadata.callout.componentPropertyDefinitions
 >;
 
-export type CheckboxProperties = InferFromDefinition<
+export type CheckboxProperties = InferComponentDefinition<
   typeof metadata.checkbox.componentPropertyDefinitions
 >;
 
-export type ChipTabsProperties = InferFromDefinition<
+export type ChipTabsProperties = InferComponentDefinition<
   typeof metadata.chipTablist.componentPropertyDefinitions
 >;
 
-export type ChipTabsItemProperties = InferFromDefinition<{
+export type ChipTabsItemProperties = InferComponentDefinition<{
   "Label#8876:0": {
     type: "TEXT";
     defaultValue: "라벨";
@@ -78,19 +78,19 @@ export type ChipTabsItemProperties = InferFromDefinition<{
   };
 }>;
 
-export type ControlChipProperties = InferFromDefinition<
+export type ControlChipProperties = InferComponentDefinition<
   typeof metadata.controlChip.componentPropertyDefinitions
 >;
 
-export type ErrorStateProperties = InferFromDefinition<
+export type ErrorStateProperties = InferComponentDefinition<
   typeof metadata.errorState.componentPropertyDefinitions
 >;
 
-export type ExtendedActionSheetProperties = InferFromDefinition<
+export type ExtendedActionSheetProperties = InferComponentDefinition<
   typeof metadata.extendedActionSheet.componentPropertyDefinitions
 >;
 
-export type ExtendedActionSheetGroupProperties = InferFromDefinition<{
+export type ExtendedActionSheetGroupProperties = InferComponentDefinition<{
   "Action Count": {
     type: "VARIANT";
     defaultValue: "8";
@@ -98,7 +98,7 @@ export type ExtendedActionSheetGroupProperties = InferFromDefinition<{
   };
 }>;
 
-export type ExtendedActionSheetItemProperties = InferFromDefinition<{
+export type ExtendedActionSheetItemProperties = InferComponentDefinition<{
   "Show Prefix Icon#17043:5": {
     type: "BOOLEAN";
     defaultValue: true;
@@ -124,47 +124,47 @@ export type ExtendedActionSheetItemProperties = InferFromDefinition<{
   };
 }>;
 
-export type ExtendedFabProperties = InferFromDefinition<
+export type ExtendedFabProperties = InferComponentDefinition<
   typeof metadata.extendedFloatingActionButton.componentPropertyDefinitions
 >;
 
-export type FabProperties = InferFromDefinition<
+export type FabProperties = InferComponentDefinition<
   typeof metadata.floatingActionButton.componentPropertyDefinitions
 >;
 
-export type HelpBubbleProperties = InferFromDefinition<
+export type HelpBubbleProperties = InferComponentDefinition<
   typeof metadata.helpBubble.componentPropertyDefinitions
 >;
 
-export type IdentityPlaceholderProperties = InferFromDefinition<
+export type IdentityPlaceholderProperties = InferComponentDefinition<
   typeof metadata.identityPlaceholder.componentPropertyDefinitions
 >;
 
-export type InlineBannerProperties = InferFromDefinition<
+export type InlineBannerProperties = InferComponentDefinition<
   typeof metadata.inlineBanner.componentPropertyDefinitions
 >;
 
-export type MannerTempBadgeProperties = InferFromDefinition<
+export type MannerTempBadgeProperties = InferComponentDefinition<
   typeof metadata.mannerTempBadge.componentPropertyDefinitions
 >;
 
-export type MultilineTextFieldProperties = InferFromDefinition<
+export type MultilineTextFieldProperties = InferComponentDefinition<
   typeof metadata.multilineTextField.componentPropertyDefinitions
 >;
 
-export type ProgressCircleProperties = InferFromDefinition<
+export type ProgressCircleProperties = InferComponentDefinition<
   typeof metadata.progressCircle.componentPropertyDefinitions
 >;
 
-export type ReactionButtonProperties = InferFromDefinition<
+export type ReactionButtonProperties = InferComponentDefinition<
   typeof metadata.reactionButton.componentPropertyDefinitions
 >;
 
-export type SegmentedControlProperties = InferFromDefinition<
+export type SegmentedControlProperties = InferComponentDefinition<
   typeof metadata.segmentedControl.componentPropertyDefinitions
 >;
 
-export type SegmentedControlItemProperties = InferFromDefinition<{
+export type SegmentedControlItemProperties = InferComponentDefinition<{
   "Label#11366:15": {
     type: "TEXT";
     defaultValue: "라벨";
@@ -183,31 +183,31 @@ export type SegmentedControlItemProperties = InferFromDefinition<{
   };
 }>;
 
-export type SelectBoxGroupProperties = InferFromDefinition<
+export type SelectBoxGroupProperties = InferComponentDefinition<
   typeof metadata.templateSelectBoxGroup.componentPropertyDefinitions
 >;
 
-export type SelectBoxProperties = InferFromDefinition<
+export type SelectBoxProperties = InferComponentDefinition<
   typeof metadata.selectBox.componentPropertyDefinitions
 >;
 
-export type SkeletonProperties = InferFromDefinition<
+export type SkeletonProperties = InferComponentDefinition<
   typeof metadata.skeleton.componentPropertyDefinitions
 >;
 
-export type SnackbarProperties = InferFromDefinition<
+export type SnackbarProperties = InferComponentDefinition<
   typeof metadata.snackbar.componentPropertyDefinitions
 >;
 
-export type SwitchProperties = InferFromDefinition<
+export type SwitchProperties = InferComponentDefinition<
   typeof metadata.switch.componentPropertyDefinitions
 >;
 
-export type TabsProperties = InferFromDefinition<
+export type TabsProperties = InferComponentDefinition<
   typeof metadata.tablist.componentPropertyDefinitions
 >;
 
-export type TabsHugItemProperties = InferFromDefinition<{
+export type TabsHugItemProperties = InferComponentDefinition<{
   "Label#4478:2": {
     type: "TEXT";
     defaultValue: "라벨";
@@ -229,7 +229,7 @@ export type TabsHugItemProperties = InferFromDefinition<{
   };
 }>;
 
-export type TabsFillItemProperties = InferFromDefinition<{
+export type TabsFillItemProperties = InferComponentDefinition<{
   "Label#4478:2": {
     type: "TEXT";
     defaultValue: "라벨";
@@ -251,23 +251,23 @@ export type TabsFillItemProperties = InferFromDefinition<{
   };
 }>;
 
-export type TextButtonProperties = InferFromDefinition<
+export type TextButtonProperties = InferComponentDefinition<
   typeof metadata.textButton.componentPropertyDefinitions
 >;
 
-export type TextFieldProperties = InferFromDefinition<
+export type TextFieldProperties = InferComponentDefinition<
   typeof metadata.textField.componentPropertyDefinitions
 >;
 
-export type ToggleButtonProperties = InferFromDefinition<
+export type ToggleButtonProperties = InferComponentDefinition<
   typeof metadata.toggleButton.componentPropertyDefinitions
 >;
 
-export type AppBarProperties = InferFromDefinition<
+export type AppBarProperties = InferComponentDefinition<
   typeof metadata.standardNavigation.componentPropertyDefinitions
 >;
 
-export type AppBarMainProperties = InferFromDefinition<{
+export type AppBarMainProperties = InferComponentDefinition<{
   "Show Right#16958:13": {
     type: "BOOLEAN";
     defaultValue: false;
@@ -301,7 +301,7 @@ export type AppBarMainProperties = InferFromDefinition<{
   };
 }>;
 
-export type AppBarLeftProperties = InferFromDefinition<{
+export type AppBarLeftProperties = InferComponentDefinition<{
   Action: {
     type: "VARIANT";
     defaultValue: "Back";
@@ -309,7 +309,7 @@ export type AppBarLeftProperties = InferFromDefinition<{
   };
 }>;
 
-export type AppBarRightProperties = InferFromDefinition<{
+export type AppBarRightProperties = InferComponentDefinition<{
   Type: {
     type: "VARIANT";
     defaultValue: "1 Icon";

package/src/codegen/core/codegen.ts

@@ -9,11 +9,12 @@ import type {
   NormalizedVectorNode,
 } from "@/normalizer";
 import { match } from "ts-pattern";
-import { appendSource, createElement, type ElementNode } from "../core/jsx";
-import type { ElementTransformer } from "./element";
+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";
 
-export interface CodegenTransformerDeps {
+export interface CodeGeneratorDeps {
   frameTransformer: ElementTransformer<
     NormalizedFrameNode | NormalizedComponentNode | NormalizedInstanceNode
   >;
@@ -22,23 +23,23 @@ export interface CodegenTransformerDeps {
   instanceTransformer: ElementTransformer<NormalizedInstanceNode>;
   vectorTransformer: ElementTransformer<NormalizedVectorNode>;
   booleanOperationTransformer: ElementTransformer<NormalizedBooleanOperationNode>;
-  shouldInferAutoLayout: boolean;
 }
 
-export function createCodegenTransformer({
+export function createCodeGenerator({
   frameTransformer,
   textTransformer,
   rectangleTransformer,
   instanceTransformer,
   vectorTransformer,
   booleanOperationTransformer,
-  shouldInferAutoLayout,
-}: CodegenTransformerDeps): (node: NormalizedSceneNode) => ElementNode | undefined {
+}: 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
@@ -61,5 +62,19 @@ export function createCodegenTransformer({
     return;
   }
 
-  return (node) => traverse(node);
+  function generateJsxTree(node: NormalizedSceneNode, options: CodegenOptions) {
+    return codegenOptionsContext.run(options, () => traverse(node));
+  }
+
+  function generateCode(
+    node: NormalizedSceneNode,
+    options: CodegenOptions & { shouldPrintSource: boolean },
+  ) {
+    const jsxTree = generateJsxTree(node, options);
+    return jsxTree
+      ? stringifyElement(jsxTree, { printSource: options.shouldPrintSource })
+      : undefined;
+  }
+
+  return { generateJsxTree, generateCode };
 }

package/src/codegen/core/{component.ts → component-handler.ts}

@@ -1,7 +1,7 @@
 import type { NormalizedInstanceNode } from "@/normalizer";
 import type { ElementNode } from "./jsx";
 
-export interface ComponentTransformer<
+export interface ComponentHandler<
   T extends
     NormalizedInstanceNode["componentProperties"] = NormalizedInstanceNode["componentProperties"],
 > {
@@ -9,9 +9,9 @@ export interface ComponentTransformer<
   transform: (node: NormalizedInstanceNode & { componentProperties: T }) => ElementNode;
 }
 
-export function defineComponentTransformer<T extends NormalizedInstanceNode["componentProperties"]>(
+export function defineComponentHandler<T extends NormalizedInstanceNode["componentProperties"]>(
   key: string,
   transform: (node: NormalizedInstanceNode & { componentProperties: T }) => ElementNode,
-): ComponentTransformer<T> {
+): ComponentHandler<T> {
   return { key, transform };
 }

package/src/codegen/core/component-type-helper.ts

@@ -0,0 +1,35 @@
+import type { ComponentPropertyType, InstanceSwapPreferredValue } from "@figma/rest-api-spec";
+
+export interface ComponentPropertyDefinition {
+  type: ComponentPropertyType;
+  preferredValues?: InstanceSwapPreferredValue[];
+  variantOptions?: string[];
+}
+
+export type InferComponentPropertyType<T extends ComponentPropertyDefinition> =
+  T["type"] extends "TEXT"
+    ? string
+    : T["type"] extends "BOOLEAN"
+      ? boolean
+      : T["type"] extends "INSTANCE_SWAP"
+        ? string
+        : T["type"] extends "VARIANT"
+          ? T["variantOptions"] extends string[]
+            ? T["variantOptions"][number]
+            : never
+          : never;
+
+export type InferComponentDefinition<T extends Record<string, ComponentPropertyDefinition>> = {
+  [K in keyof T]: {
+    type: T[K]["type"];
+    value: InferComponentPropertyType<T[K]>;
+    readonly boundVariables?: {
+      [field in VariableBindableComponentPropertyField]?: VariableAlias;
+    };
+  } & (T[K]["type"] extends "INSTANCE_SWAP"
+    ? {
+        componentKey: string;
+        preferredValues: InstanceSwapPreferredValue[];
+      }
+    : {});
+};

package/src/codegen/core/context.ts

@@ -0,0 +1,20 @@
+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;
+}

package/src/codegen/core/index.ts

@@ -1,19 +1,21 @@
-export type { CodegenTransformerDeps } from "./codegen";
-export type { ComponentTransformer } from "./component";
+export type { CodeGeneratorDeps } from "./codegen";
+export type { ComponentHandler } from "./component-handler";
 export type {
   ComponentPropertyDefinition,
-  InferFromDefinition,
-  InferPropertyType,
-} from "./component.types";
-export type { ElementTransformer } from "./element";
+  InferComponentDefinition,
+  InferComponentPropertyType,
+} from "./component-type-helper";
+export type { CodegenOptions } from "./context";
+export type { ElementTransformer } from "./element-transformer";
 export type { ElementNode } from "./jsx";
-export type { PropsTransformer } from "./props";
-export type { ValueTransformer } from "./value";
+export type { PropsConverter } from "./props-converter";
+export type { ValueResolver } from "./value-resolver";
 
-export { createCodegenTransformer } from "./codegen";
-export { defineComponentTransformer } from "./component";
-export { defineElementTransformer } from "./element";
+export { createCodeGenerator } from "./codegen";
+export { defineComponentHandler } from "./component-handler";
+export { useCodegenOptions } from "./context";
+export { defineElementTransformer } from "./element-transformer";
 export { inferLayout } from "./infer-layout";
-export { createElement, cloneElement } from "./jsx";
-export { createPropsTransformer, definePropsTransformer } from "./props";
-export { createValueTransformer } from "./value";
+export { cloneElement, createElement } from "./jsx";
+export { createPropsConverter, definePropsConverter } from "./props-converter";
+export { createValueResolver } from "./value-resolver";

package/src/codegen/core/{props.ts → props-converter.ts}

@@ -1,18 +1,15 @@
 import type { VariableValueResolved } from "@/entities";
-import type { NormalizedSceneNode } from "@/normalizer";
 import { objectEntries } from "@/utils/common";
-import type { ElementNode } from "./jsx";
 
-export type PropsTransformer<
+export type PropsConverter<
   T extends Record<string, any> = Record<string, any>,
   R extends Record<string, any> = Record<string, any>,
-> = (node: T, traverse: (node: NormalizedSceneNode) => ElementNode | undefined) => R;
+> = (node: T) => R;
 
-export function definePropsTransformer<
-  T extends Record<string, any>,
-  R extends Record<string, any>,
->(transformer: PropsTransformer<T, R>) {
-  return transformer;
+export function definePropsConverter<T extends Record<string, any>, R extends Record<string, any>>(
+  converter: PropsConverter<T, R>,
+) {
+  return converter;
 }
 
 type Handlers<
@@ -28,7 +25,7 @@ type Shorthands<TProps extends Record<string, any>, HandlerKeys extends keyof TP
   HandlerKeys[]
 >;
 
-export interface PropsTransformerConfig<
+export interface CreatePropsConverterConfig<
   TTrait extends Record<string, any>,
   TProps extends Record<string, any>,
   HandlerKeys extends keyof TProps,
@@ -42,7 +39,7 @@ export interface PropsTransformerConfig<
   defaults?: Partial<TProps>;
 }
 
-export function createPropsTransformer<
+export function createPropsConverter<
   TTrait extends Record<string, any>,
   TProps extends Record<string, any>,
   HandlerKeys extends keyof TProps,
@@ -50,8 +47,8 @@ export function createPropsTransformer<
   handlers,
   shorthands,
   defaults,
-}: PropsTransformerConfig<TTrait, TProps, HandlerKeys>): PropsTransformer<TTrait, TProps> {
-  return definePropsTransformer((node: TTrait) => {
+}: CreatePropsConverterConfig<TTrait, TProps, HandlerKeys>): PropsConverter<TTrait, TProps> {
+  return definePropsConverter((node: TTrait) => {
     const result = {} as TProps;
 
     for (const [prop, handler] of objectEntries(handlers)) {