Fix boolean props issue

Author: owjs3901

src/codegen/Codegen.ts

@@ -115,6 +115,49 @@ function getTextPropName(
   return undefined
 }
 
+/**
+ * Recursively apply BOOLEAN conditions and TEXT bindings to nested descendants.
+ * buildTree produces the tree structure but doesn't check BOOLEAN/TEXT bindings —
+ * those are only available via componentPropertyReferences on the original Figma nodes.
+ * This walks the tree and Figma node tree in parallel, applying conditions at every level.
+ */
+function applyNestedConditions(
+  tree: NodeTree,
+  node: SceneNode,
+  booleanSlots: Map<string, string>,
+  textSlots: Map<string, string>,
+): void {
+  // Skip component references and wrappers — their children aren't expanded in the tree
+  if (tree.isComponent || tree.nodeType === 'WRAPPER') return
+  if (!('children' in node) || tree.children.length === 0) return
+
+  const figmaChildren = (node as SceneNode & ChildrenMixin).children
+  const len = Math.min(figmaChildren.length, tree.children.length)
+
+  for (let i = 0; i < len; i++) {
+    const childTree = tree.children[i]
+    const childNode = figmaChildren[i]
+
+    if (!childTree.condition) {
+      const conditionName = getBooleanConditionName(childNode, booleanSlots)
+      if (conditionName) {
+        childTree.condition = conditionName
+      }
+    }
+
+    const textPropName = getTextPropName(childNode, textSlots)
+    if (
+      textPropName &&
+      childTree.textChildren &&
+      !childTree.textChildren[0]?.startsWith('{')
+    ) {
+      childTree.textChildren = [`{${textPropName}}`]
+    }
+
+    applyNestedConditions(childTree, childNode, booleanSlots, textSlots)
+  }
+}
+
 /**
  * Shallow-clone a NodeTree — creates a new object so that per-instance
  * property reassignment (e.g., `tree.props = { ...tree.props, ...selectorProps }`)
@@ -485,6 +528,22 @@ export class Codegen {
   ): Promise<void> {
     const tAdd = perfStart()
 
+    // Reserve position in componentTrees so parent components appear
+    // before their children in Map iteration order.
+    // Map.set() with the same key later updates the value without changing position.
+    this.componentTrees.set(nodeId, {
+      name: getComponentName(node),
+      node,
+      tree: {
+        component: '',
+        props: {},
+        children: [],
+        nodeType: node.type,
+        nodeName: node.name,
+      },
+      variants: {},
+    })
+
     // Fire getProps + getSelectorProps early (2 independent API calls)
     const propsPromise = getProps(node)
     const t = perfStart()
@@ -540,6 +599,8 @@ export class Codegen {
           if (textPropName && tree.textChildren) {
             tree.textChildren = [`{${textPropName}}`]
           }
+          // Apply conditions to nested descendants (grandchildren and deeper)
+          applyNestedConditions(tree, child, booleanSlots, textSlots)
           childrenTrees.push(tree)
         }
       }

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

@@ -1250,12 +1250,6 @@ exports[`Codegen renders component with parent component set name: component: Ho
 }
 `;
 
-exports[`Codegen Tree Methods INSTANCE_SWAP / BOOLEAN snapshot renders component with INSTANCE_SWAP slot: INSTANCE_SWAP slot: Icon 1`] = `
-"export function Icon() {
-  return <Box boxSize="100%" />
-}"
-`;
-
 exports[`Codegen Tree Methods INSTANCE_SWAP / BOOLEAN snapshot renders component with INSTANCE_SWAP slot: INSTANCE_SWAP slot: IconButton 1`] = `
 "export interface IconButtonProps {
   size: 'sm' | 'md' | 'lg'
@@ -1284,6 +1278,12 @@ export function IconButton({ size, leftIcon }: IconButtonProps) {
 }"
 `;
 
+exports[`Codegen Tree Methods INSTANCE_SWAP / BOOLEAN snapshot renders component with INSTANCE_SWAP slot: INSTANCE_SWAP slot: Icon 1`] = `
+"export function Icon() {
+  return <Box boxSize="100%" />
+}"
+`;
+
 exports[`Codegen Tree Methods INSTANCE_SWAP / BOOLEAN snapshot renders component with BOOLEAN conditional: BOOLEAN conditional: AlertCard 1`] = `
 "export interface AlertCardProps {
   State: 'Default' | 'Hover'
@@ -1312,8 +1312,26 @@ export function AlertCard({ State, showBadge }: AlertCardProps) {
 }"
 `;
 
-exports[`Codegen Tree Methods INSTANCE_SWAP / BOOLEAN snapshot renders component with INSTANCE_SWAP + BOOLEAN combined: INSTANCE_SWAP+BOOLEAN: Icon 1`] = `
-"export function Icon() {
+exports[`Codegen Tree Methods INSTANCE_SWAP / BOOLEAN snapshot renders component with nested BOOLEAN conditionals (grandchildren): nested BOOLEAN conditional: CurriculumCard 1`] = `
+"export interface CurriculumCardProps {
+  _1st?: boolean
+  _2nd?: boolean
+}
+
+export function CurriculumCard({ _1st, _2nd }: CurriculumCardProps) {
+  return (
+    <Box>
+      <Box boxSize="100%">
+        {_1st && <CurriculumSubTitle />}
+        {_2nd && <CurriculumSubTitle />}
+      </Box>
+    </Box>
+  )
+}"
+`;
+
+exports[`Codegen Tree Methods INSTANCE_SWAP / BOOLEAN snapshot renders component with nested BOOLEAN conditionals (grandchildren): nested BOOLEAN conditional: CurriculumSubTitle 1`] = `
+"export function CurriculumSubTitle() {
   return <Box boxSize="100%" />
 }"
 `;
@@ -1350,6 +1368,12 @@ export function Button({ size, leftIcon, showLeftIcon, rightIcon, showRightIcon
 }"
 `;
 
+exports[`Codegen Tree Methods INSTANCE_SWAP / BOOLEAN snapshot renders component with INSTANCE_SWAP + BOOLEAN combined: INSTANCE_SWAP+BOOLEAN: Icon 1`] = `
+"export function Icon() {
+  return <Box boxSize="100%" />
+}"
+`;
+
 exports[`Codegen Tree Methods INSTANCE_SWAP / BOOLEAN snapshot renders component with INSTANCE_SWAP + BOOLEAN combined: INSTANCE_SWAP+BOOLEAN: ArrowIcon 1`] = `
 "export function ArrowIcon() {
   return <Box boxSize="100%" />

src/codegen/__tests__/codegen.test.ts

@@ -3759,6 +3759,96 @@ describe('Codegen Tree Methods', () => {
       expect(condChild?.condition).toBe('showIcon')
     })
 
+    test('detects BOOLEAN conditions on nested grandchildren (not just direct children)', async () => {
+      // Grandchild INSTANCE nodes with componentPropertyReferences.visible
+      // These are inside a FRAME wrapper, not direct children of the COMPONENT
+      const subTitle1 = {
+        type: 'INSTANCE',
+        name: 'CurriculumSubTitle1',
+        visible: true,
+        componentPropertyReferences: { visible: '_1st#80:1' },
+        getMainComponentAsync: async () =>
+          ({
+            type: 'COMPONENT',
+            name: 'CurriculumSubTitle',
+            children: [],
+            visible: true,
+          }) as unknown as ComponentNode,
+      } as unknown as InstanceNode
+
+      const subTitle2 = {
+        type: 'INSTANCE',
+        name: 'CurriculumSubTitle2',
+        visible: true,
+        componentPropertyReferences: { visible: '_2nd#80:2' },
+        getMainComponentAsync: async () =>
+          ({
+            type: 'COMPONENT',
+            name: 'CurriculumSubTitle',
+            children: [],
+            visible: true,
+          }) as unknown as ComponentNode,
+      } as unknown as InstanceNode
+
+      // Intermediate wrapper frame — this is the direct child of the COMPONENT
+      const contentWrapper = {
+        type: 'FRAME',
+        name: 'ContentWrapper',
+        children: [subTitle1, subTitle2],
+        visible: true,
+        strokes: [],
+        effects: [],
+        reactions: [],
+      } as unknown as FrameNode
+
+      const defaultVariant = {
+        type: 'COMPONENT',
+        name: 'State=Default',
+        children: [contentWrapper],
+        visible: true,
+        reactions: [],
+      } as unknown as ComponentNode
+
+      const node = {
+        type: 'COMPONENT_SET',
+        name: 'CurriculumCard',
+        children: [defaultVariant],
+        defaultVariant,
+        visible: true,
+        componentPropertyDefinitions: {
+          '_1st#80:1': {
+            type: 'BOOLEAN',
+            defaultValue: true,
+          },
+          '_2nd#80:2': {
+            type: 'BOOLEAN',
+            defaultValue: true,
+          },
+        },
+      } as unknown as ComponentSetNode
+      addParent(node)
+
+      const codegen = new Codegen(node)
+      await codegen.buildTree()
+
+      const componentTrees = codegen.getComponentTrees()
+      const compTree = [...componentTrees.values()].find(
+        (ct) => ct.name === 'CurriculumCard',
+      )
+      expect(compTree).toBeDefined()
+
+      // The direct child (ContentWrapper) should NOT have a condition
+      const wrapper = compTree?.tree.children[0]
+      expect(wrapper?.condition).toBeUndefined()
+
+      // The grandchildren (inside ContentWrapper) SHOULD have conditions
+      const grandchildren = wrapper?.children ?? []
+      const cond1 = grandchildren.find((c) => c.condition === '_1st')
+      const cond2 = grandchildren.find((c) => c.condition === '_2nd')
+      expect(cond1).toBeDefined()
+      expect(cond2).toBeDefined()
+    })
+
     test('detects combined INSTANCE_SWAP + BOOLEAN slot with condition', async () => {
       const iconChild = {
         type: 'INSTANCE',
@@ -4196,6 +4286,80 @@ describe('Codegen Tree Methods', () => {
       }
     })
 
+    test('renders component with nested BOOLEAN conditionals (grandchildren)', async () => {
+      const subTitle1 = {
+        type: 'INSTANCE',
+        name: 'CurriculumSubTitle1',
+        visible: true,
+        componentPropertyReferences: { visible: '_1st#80:1' },
+        getMainComponentAsync: async () =>
+          ({
+            type: 'COMPONENT',
+            name: 'CurriculumSubTitle',
+            children: [],
+            visible: true,
+          }) as unknown as ComponentNode,
+      } as unknown as InstanceNode
+
+      const subTitle2 = {
+        type: 'INSTANCE',
+        name: 'CurriculumSubTitle2',
+        visible: true,
+        componentPropertyReferences: { visible: '_2nd#80:2' },
+        getMainComponentAsync: async () =>
+          ({
+            type: 'COMPONENT',
+            name: 'CurriculumSubTitle',
+            children: [],
+            visible: true,
+          }) as unknown as ComponentNode,
+      } as unknown as InstanceNode
+
+      const contentWrapper = {
+        type: 'FRAME',
+        name: 'ContentWrapper',
+        children: [subTitle1, subTitle2],
+        visible: true,
+        strokes: [],
+        effects: [],
+        reactions: [],
+      } as unknown as FrameNode
+
+      const defaultVariant = {
+        type: 'COMPONENT',
+        name: 'State=Default',
+        children: [contentWrapper],
+        visible: true,
+        reactions: [],
+      } as unknown as ComponentNode
+
+      const node = {
+        type: 'COMPONENT_SET',
+        name: 'CurriculumCard',
+        children: [defaultVariant],
+        defaultVariant,
+        visible: true,
+        componentPropertyDefinitions: {
+          '_1st#80:1': {
+            type: 'BOOLEAN',
+            defaultValue: true,
+          },
+          '_2nd#80:2': {
+            type: 'BOOLEAN',
+            defaultValue: true,
+          },
+        },
+      } as unknown as ComponentSetNode
+      addParent(node)
+
+      const codegen = new Codegen(node)
+      await codegen.run()
+
+      for (const [name, code] of codegen.getComponentsCodes()) {
+        expect(code).toMatchSnapshot(`nested BOOLEAN conditional: ${name}`)
+      }
+    })
+
     test('renders component with INSTANCE_SWAP + BOOLEAN combined', async () => {
       const leftIconChild = {
         type: 'INSTANCE',

src/codegen/utils/__tests__/extract-instance-variant-props.test.ts

@@ -20,7 +20,7 @@ describe('extractInstanceVariantProps', () => {
     })
   })
 
-  test('ignores non-VARIANT type props', () => {
+  test('extracts BOOLEAN type props when value is true', () => {
     const node = {
       componentProperties: {
         'status#123:456': { type: 'VARIANT', value: 'active' },
@@ -31,6 +31,23 @@ describe('extractInstanceVariantProps', () => {
 
     const result = extractInstanceVariantProps(node)
 
+    expect(result).toEqual({
+      status: 'active',
+      visible: true,
+    })
+  })
+
+  test('ignores BOOLEAN type props when value is false', () => {
+    const node = {
+      componentProperties: {
+        'status#123:456': { type: 'VARIANT', value: 'active' },
+        'hidden#345:678': { type: 'BOOLEAN', value: false },
+        'label#789:012': { type: 'TEXT', value: 'Click me' },
+      },
+    } as unknown as InstanceNode
+
+    const result = extractInstanceVariantProps(node)
+
     expect(result).toEqual({
       status: 'active',
     })

src/codegen/utils/extract-instance-variant-props.ts

@@ -27,17 +27,20 @@ export function isReservedVariantKey(key: string): boolean {
  */
 export function extractInstanceVariantProps(
   node: InstanceNode,
-): Record<string, string> {
-  const variantProps: Record<string, string> = {}
+): Record<string, unknown> {
+  const variantProps: Record<string, unknown> = {}
 
   if (!node.componentProperties) {
     return variantProps
   }
 
   for (const [key, prop] of Object.entries(node.componentProperties)) {
-    if (prop.type === 'VARIANT' && !isReservedVariantKey(key)) {
-      const sanitizedKey = sanitizePropertyName(key)
+    if (isReservedVariantKey(key)) continue
+    const sanitizedKey = sanitizePropertyName(key)
+    if (prop.type === 'VARIANT') {
       variantProps[sanitizedKey] = String(prop.value)
+    } else if (prop.type === 'BOOLEAN' && prop.value === true) {
+      variantProps[sanitizedKey] = true
     }
   }