Support single slot

Author: owjs3901

src/codegen/Codegen.ts

@@ -354,6 +354,20 @@ export class Codegen {
       )
     }
 
+    // Handle native Figma SLOT nodes — render as {children} in the component.
+    // SLOT is a newer Figma node type not yet in @figma/plugin-typings.
+    if ((node.type as string) === 'SLOT') {
+      perfEnd('buildTree()', tBuild)
+      return {
+        component: 'children',
+        props: {},
+        children: [],
+        nodeType: 'SLOT',
+        nodeName: node.name,
+        isSlot: true,
+      }
+    }
+
     // Handle asset nodes (images/SVGs)
     const assetNode = checkAssetNode(node)
     if (assetNode) {
@@ -393,6 +407,20 @@ export class Codegen {
       const componentName = getComponentName(mainComponent || node)
       const variantProps = extractInstanceVariantProps(node)
 
+      // Check for native SLOT children and build their overridden content.
+      // SLOT children contain the content placed into the component's slot.
+      const slotChildren: NodeTree[] = []
+      if ('children' in node) {
+        for (const child of node.children) {
+          if ((child.type as string) === 'SLOT' && 'children' in child) {
+            for (const slotContent of (child as SceneNode & ChildrenMixin)
+              .children) {
+              slotChildren.push(await this.buildTree(slotContent))
+            }
+          }
+        }
+      }
+
       // Only compute position + transform (sync, no Figma API calls)
       const posProps = getPositionProps(node)
       if (posProps?.pos) {
@@ -417,7 +445,7 @@ export class Codegen {
             {
               component: componentName,
               props: variantProps,
-              children: [],
+              children: slotChildren,
               nodeType: node.type,
               nodeName: node.name,
               isComponent: true,
@@ -432,7 +460,7 @@ export class Codegen {
       return {
         component: componentName,
         props: variantProps,
-        children: [],
+        children: slotChildren,
         nodeType: node.type,
         nodeName: node.name,
         isComponent: true,
@@ -625,6 +653,16 @@ export class Codegen {
     }
     const variantComments = selectorProps?.variantComments || {}
 
+    // Detect native SLOT children — add children: React.ReactNode to variants
+    if (
+      !variants.children &&
+      childrenTrees.some(
+        (child) => child.nodeType === 'SLOT' && child.component === 'children',
+      )
+    ) {
+      variants.children = 'React.ReactNode'
+    }
+
     this.componentTrees.set(nodeId, {
       name: getComponentName(node),
       node,

src/codegen/__tests__/codegen.test.ts

@@ -3456,6 +3456,84 @@ describe('Codegen Tree Methods', () => {
       expect(tree.children.length).toBe(1)
       expect(tree.children[0].isComponent).toBe(true)
     })
+
+    test('builds tree for native SLOT node', async () => {
+      const slotContent = {
+        type: 'FRAME',
+        name: 'DefaultContent',
+        children: [],
+        visible: true,
+        strokes: [],
+        effects: [],
+        reactions: [],
+      } as unknown as FrameNode
+
+      const node = {
+        type: 'SLOT',
+        name: 'ContentSlot',
+        children: [slotContent],
+        visible: true,
+        strokes: [],
+        effects: [],
+        fills: [],
+      } as unknown as SceneNode
+      addParent(node)
+
+      const codegen = new Codegen(node)
+      const tree = await codegen.buildTree()
+
+      expect(tree.component).toBe('children')
+      expect(tree.nodeType).toBe('SLOT')
+      expect(tree.isSlot).toBe(true)
+      expect(tree.children).toEqual([])
+    })
+
+    test('builds INSTANCE tree with native SLOT children content', async () => {
+      const slotContent = {
+        type: 'FRAME',
+        name: 'UserContent',
+        children: [],
+        visible: true,
+        strokes: [],
+        effects: [],
+        reactions: [],
+      } as unknown as FrameNode
+
+      const slotNode = {
+        type: 'SLOT',
+        name: 'ContentSlot',
+        children: [slotContent],
+        visible: true,
+        strokes: [],
+        effects: [],
+        fills: [],
+      } as unknown as SceneNode
+
+      const node = {
+        type: 'INSTANCE',
+        name: 'BottomSheet',
+        children: [slotNode],
+        visible: true,
+        componentProperties: {},
+        getMainComponentAsync: async () =>
+          ({
+            type: 'COMPONENT',
+            name: 'BottomSheet',
+            children: [],
+            visible: true,
+          }) as unknown as ComponentNode,
+      } as unknown as InstanceNode
+      addParent(node)
+
+      const codegen = new Codegen(node)
+      const tree = await codegen.buildTree()
+
+      expect(tree.component).toBe('BottomSheet')
+      expect(tree.isComponent).toBe(true)
+      // SLOT content should be extracted as children
+      expect(tree.children.length).toBe(1)
+      expect(tree.children[0].nodeName).toBe('UserContent')
+    })
   })
 
   describe('getTree', () => {
@@ -3997,6 +4075,67 @@ describe('Codegen Tree Methods', () => {
       expect(textTree).toBeDefined()
       expect(textTree?.textChildren).toEqual(['{children}'])
     })
+
+    test('detects native SLOT children and adds children: React.ReactNode to variants', async () => {
+      const textChild = {
+        type: 'TEXT',
+        name: 'Title',
+        visible: true,
+        characters: 'Hello',
+        getStyledTextSegments: () => [createTextSegment('Hello')],
+        strokes: [],
+        effects: [],
+        reactions: [],
+        textAutoResize: 'WIDTH_AND_HEIGHT',
+      } as unknown as TextNode
+
+      const slotChild = {
+        type: 'SLOT',
+        name: 'ContentSlot',
+        children: [],
+        visible: true,
+        strokes: [],
+        effects: [],
+        fills: [],
+      } as unknown as SceneNode
+
+      const defaultVariant = {
+        type: 'COMPONENT',
+        name: 'State=Default',
+        children: [textChild, slotChild],
+        visible: true,
+        reactions: [],
+      } as unknown as ComponentNode
+
+      const node = {
+        type: 'COMPONENT_SET',
+        name: 'BottomSheet',
+        children: [defaultVariant],
+        defaultVariant,
+        visible: true,
+        componentPropertyDefinitions: {},
+      } 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 === 'BottomSheet',
+      )
+      expect(compTree).toBeDefined()
+
+      // Should have native SLOT as {children} placeholder
+      const slotTree = compTree?.tree.children.find(
+        (c) => c.isSlot && c.component === 'children',
+      )
+      expect(slotTree).toBeDefined()
+      expect(slotTree?.nodeType).toBe('SLOT')
+
+      // Should add children: React.ReactNode to variants
+      expect(compTree?.variants.children).toBe('React.ReactNode')
+    })
   })
 
   describe('renderTree (static)', () => {
@@ -4142,6 +4281,28 @@ describe('Codegen Tree Methods', () => {
       const result = Codegen.renderTree(tree)
       expect(result).toBe('{showBox && <Box />}')
     })
+
+    test('renders native SLOT as {children}', () => {
+      const tree = {
+        component: 'Flex',
+        props: {},
+        children: [
+          {
+            component: 'children',
+            props: {},
+            children: [],
+            nodeType: 'SLOT',
+            nodeName: 'ContentSlot',
+            isSlot: true,
+          },
+        ],
+        nodeType: 'FRAME',
+        nodeName: 'Parent',
+      }
+
+      const result = Codegen.renderTree(tree)
+      expect(result).toContain('{children}')
+    })
   })
 
   describe('INSTANCE_SWAP / BOOLEAN snapshot', () => {