Fix indent issue

Author: owjs3901

src/codegen/Codegen.ts

@@ -1,6 +1,6 @@
 import { getComponentName } from '../utils'
 import { getProps } from './props'
-import { getSelectorProps } from './props/selector'
+import { getSelectorProps, sanitizePropertyName } from './props/selector'
 import { renderComponent, renderNode } from './render'
 import { renderText } from './render/text'
 import type { ComponentTree, NodeTree } from './types'
@@ -79,7 +79,7 @@ export class Codegen {
     for (const [compNode, compTree] of this.componentTrees) {
       if (!this.components.has(compNode)) {
         this.components.set(compNode, {
-          code: Codegen.renderTree(compTree.tree, 2),
+          code: Codegen.renderTree(compTree.tree, 0),
           variants: compTree.variants,
         })
       }
@@ -138,6 +138,17 @@ export class Codegen {
 
       const componentName = getComponentName(mainComponent || node)
 
+      // Extract variant props from instance's componentProperties
+      const variantProps: Record<string, string> = {}
+      if (node.componentProperties) {
+        for (const [key, prop] of Object.entries(node.componentProperties)) {
+          if (prop.type === 'VARIANT') {
+            const sanitizedKey = sanitizePropertyName(key)
+            variantProps[sanitizedKey] = String(prop.value)
+          }
+        }
+      }
+
       // Check if needs position wrapper
       if (props.pos) {
         return {
@@ -158,7 +169,7 @@ export class Codegen {
           children: [
             {
               component: componentName,
-              props: {},
+              props: variantProps,
               children: [],
               nodeType: node.type,
               nodeName: node.name,
@@ -172,7 +183,7 @@ export class Codegen {
 
       return {
         component: componentName,
-        props: {},
+        props: variantProps,
         children: [],
         nodeType: node.type,
         nodeName: node.name,

src/codegen/__tests__/__snapshots__/codegen.test.ts.snap

@@ -2948,17 +2948,17 @@ exports[`render real world component real world $ 104`] = `
       transition="0.3ms ease-out"
       transitionProperty="background,box-shadow,opacity"
     >
-  <Text
-    color="#FFF"
-    fontFamily="Pretendard"
-    fontSize="16px"
-    fontWeight="700"
-    letterSpacing="-0.04em"
-    lineHeight="1.4"
-    wordBreak="keep-all"
-  >
-    자세히 알아보기 →
-  </Text>
+      <Text
+        color="#FFF"
+        fontFamily="Pretendard"
+        fontSize="16px"
+        fontWeight="700"
+        letterSpacing="-0.04em"
+        lineHeight="1.4"
+        wordBreak="keep-all"
+      >
+        자세히 알아보기 →
+      </Text>
     </Center>
   )
 }"
@@ -3005,23 +3005,23 @@ export function Button({ size, variant }: ButtonProps) {
       transition="0.2ms ease-out"
       transitionProperty="background"
     >
-  <Text
-    color={{
-      primary: "#FFF",
-      white: "$primaryAccent"
-    }[variant]}
-    fontFamily="Noto Sans KR"
-    fontSize={{
-      Md: ["16px", null, null, null, "20px"],
-      Sm: ["14px", null, null, null, "15px"]
-    }[size]}
-    fontWeight="500"
-    letterSpacing="-0.04em"
-    lineHeight="normal"
-    wordBreak="keep-all"
-  >
-    참가 신청하기
-  </Text>
+      <Text
+        color={{
+          primary: "#FFF",
+          white: "$primaryAccent"
+        }[variant]}
+        fontFamily="Noto Sans KR"
+        fontSize={{
+          Md: ["16px", null, null, null, "20px"],
+          Sm: ["14px", null, null, null, "15px"]
+        }[size]}
+        fontWeight="500"
+        letterSpacing="-0.04em"
+        lineHeight="normal"
+        wordBreak="keep-all"
+      >
+        참가 신청하기
+      </Text>
     </Center>
   )
 }"

src/codegen/__tests__/render.test.ts

@@ -29,7 +29,7 @@ describe('renderNode', () => {
       props: { p: '8px' },
       deps: 1,
       children: ['<Text />'] as string[],
-      expected: '  <Box p="8px">\n  <Text />\n  </Box>',
+      expected: '  <Box p="8px">\n    <Text />\n  </Box>',
     },
   ])('$title', ({ component, props, deps, children, expected }) => {
     const result = renderNode(component, props, deps, children)
@@ -61,9 +61,9 @@ describe('renderComponent', () => {
 
 export function Banner({ size }: BannerProps) {
   return (
-<Box>
-  <Text />
-</Box>
+    <Box>
+      <Text />
+    </Box>
   )
 }`,
     },

src/codegen/render/index.ts

@@ -1,7 +1,10 @@
 import { space } from '../../utils'
 import { filterPropsWithComponent } from '../props'
 import { isDefaultProp } from '../utils/is-default-prop'
-import { paddingLeftMultiline } from '../utils/padding-left-multiline'
+import {
+  paddingLeftMultiline,
+  wrapReturnStatement,
+} from '../utils/padding-left-multiline'
 import { propsToString } from '../utils/props-to-str'
 
 export function renderNode(
@@ -25,7 +28,7 @@ export function renderNode(
     }`,
     hasChildren
       ? childrenCodes
-          .map((child) => space(1) + child.split('\n').join(`\n${space(1)}`))
+          .map((child) => paddingLeftMultiline(child, deps + 1))
           .join('\n')
       : '',
     tail,
@@ -55,14 +58,7 @@ ${Object.entries(filteredVariants)
     ? `{ ${Object.keys(filteredVariants).join(', ')} }: ${component}Props`
     : ''
   return `${interfaceCode}export function ${component}(${propsParam}) {
-  return ${
-    code.includes('\n')
-      ? `(\n${code
-          .split('\n')
-          .map((line) => line)
-          .join('\n')}\n${space(1)})`
-      : code.trim().replace(/\s+/g, ' ')
-  }
+  return ${wrapReturnStatement(code, 1)}
 }`
 }
 

src/codegen/responsive/ResponsiveCodegen.ts

@@ -375,7 +375,7 @@ export class ResponsiveCodegen {
       // Generate merged responsive code
       const mergedCode = responsiveCodegen.generateMergedCode(
         treesByBreakpoint,
-        2,
+        0,
       )
 
       results.push([
@@ -574,7 +574,7 @@ export class ResponsiveCodegen {
     const mergedCode = responsiveCodegen.generateMultiVariantMergedCode(
       sanitizedVariantKeys,
       responsivePropsByComposite,
-      2,
+      0,
     )
 
     const result: Array<readonly [string, string]> = [
@@ -608,7 +608,7 @@ export class ResponsiveCodegen {
     }
 
     // Render the tree to JSX
-    const code = Codegen.renderTree(tree, 2)
+    const code = Codegen.renderTree(tree, 0)
 
     // No variant props needed since effect is handled via pseudo-selectors
     const result: Array<readonly [string, string]> = [
@@ -678,7 +678,7 @@ export class ResponsiveCodegen {
     const mergedCode = responsiveCodegen.generateVariantOnlyMergedCode(
       sanitizedPrimaryVariantKey,
       treesByVariant,
-      2,
+      0,
     )
 
     const result: Array<readonly [string, string]> = [

src/codegen/responsive/__tests__/__snapshots__/ResponsiveCodegen.test.ts.snap

@@ -2,4 +2,4 @@
 
 exports[`ResponsiveCodegen generateVariantOnlyMergedCode renders OR conditional for child existing in multiple but not all variants 1`] = `"render:Flex:depth=0:{}|{(status === "scroll" || status === "hover") && render:Box:depth=0:{"id":{"__variantProp":true,"variantKey":"status","values":{"scroll":"PartialChild","hover":"PartialChildHover"}}}|}"`;
 
-exports[`ResponsiveCodegen generateVariantResponsiveComponents handles effect + viewport + size + variant (4 dimensions) 1`] = `"component:Button:{"size":"'Md' | 'Sm'","variant":"'primary' | 'white'"}|render:Box:depth=2:{"id":"RootTablet","_hover":{"bg":{"__variantProp":true,"variantKey":"variant","values":{"primary":"#3D2B1F","white":"#F2F2F2"}}},"_active":{"bg":{"__variantProp":true,"variantKey":"variant","values":{"primary":"#30241A","white":"#E6E6E6"}}}}|render:Box:depth=0:{"id":"Shared"}|"`;
+exports[`ResponsiveCodegen generateVariantResponsiveComponents handles effect + viewport + size + variant (4 dimensions) 1`] = `"component:Button:{"size":"'Md' | 'Sm'","variant":"'primary' | 'white'"}|render:Box:depth=0:{"id":"RootTablet","_hover":{"bg":{"__variantProp":true,"variantKey":"variant","values":{"primary":"#3D2B1F","white":"#F2F2F2"}}},"_active":{"bg":{"__variantProp":true,"variantKey":"variant","values":{"primary":"#30241A","white":"#E6E6E6"}}}}|render:Box:depth=0:{"id":"Shared"}|"`;

src/codegen/utils/padding-left-multiline.ts

@@ -1,9 +1,27 @@
 import { space } from '../../utils'
 
-export function paddingLeftMultiline(code: string, dep = 0) {
-  if (dep === 0) return code
+/**
+ * 코드 블록의 각 줄에 들여쓰기 추가
+ */
+export function paddingLeftMultiline(code: string, depth = 0) {
+  if (depth === 0) return code
   return code
     .split('\n')
-    .map((line) => space(dep) + line)
+    .map((line) => space(depth) + line)
     .join('\n')
 }
+
+/**
+ * return 문으로 JSX 코드를 래핑
+ * - 한 줄: `<Component />`
+ * - 여러 줄: `(\n    <Component>\n    </Component>\n  )`
+ */
+export function wrapReturnStatement(code: string, baseDepth = 1): string {
+  const hasNewLine = code.includes('\n')
+  if (!hasNewLine) {
+    return code.trim().replace(/\s+/g, ' ')
+  }
+  // 멀티라인: ( ... )
+  const indentedCode = paddingLeftMultiline(code, baseDepth + 1)
+  return `(\n${indentedCode}\n${space(baseDepth)})`
+}

src/codegen/utils/wrap-component.ts

@@ -1,4 +1,4 @@
-import { paddingLeftMultiline } from './padding-left-multiline'
+import { wrapReturnStatement } from './padding-left-multiline'
 
 interface WrapComponentOptions {
   exportDefault?: boolean
@@ -10,9 +10,8 @@ export function wrapComponent(
   options: WrapComponentOptions = {},
 ) {
   const { exportDefault = false } = options
-  const hasNewLine = code.includes('\n')
   const exportKeyword = exportDefault ? 'export default' : 'export'
   return `${exportKeyword} function ${name}() {
-  return ${hasNewLine ? `(\n${paddingLeftMultiline(code, 2)}\n  )` : code}
+  return ${wrapReturnStatement(code, 1)}
 }`
 }