Create component

Author: owjs3901

src/Element.ts

@@ -5,13 +5,15 @@ import {
   filterPropsByChildrenCountAndType,
   fixChildrenText,
   formatSvg,
+  getElementProps,
   organizeProps,
   propsToComponentProps,
   propsToPropsWithTypography,
   space,
 } from './utils'
 import { extractKeyValueFromCssVar } from './utils/extract-key-value-from-css-var'
 import { textSegmentToTypography } from './utils/text-segment-to-typography'
+import { toCamel } from './utils/to-camel'
 import { toPascal } from './utils/to-pascal'
 
 export type ComponentType =
@@ -403,8 +405,40 @@ export class Element {
       .join(' ')
     const body = `${space(dep)}<${componentType}${propsString ? ' ' + propsString : ''}${hasChildren ? '' : ' /'}>${hasChildren ? `\n${space(dep + 1)}${renderChildren}\n` : ''}${hasChildren ? `${space(dep)}</${componentType}>` : ''}`
 
-    if (this.node.type === 'INSTANCE' && this.componentType !== 'Image')
-      return space(dep) + `<${toPascal(this.node.name)} />`
+    if (this.node.type === 'INSTANCE' && this.componentType !== 'Image') {
+      const { componentProperties } = this.node
+      let componentChildren = ''
+      const props = Object.entries(componentProperties)
+        .filter(([key, value]) => {
+          if (
+            value.type === 'TEXT' &&
+            toCamel(key.split('#')[0]) === 'children'
+          ) {
+            componentChildren += value.value
+            return false
+          }
+          return true
+        })
+        .map(getElementProps)
+        .join(' ')
+      const content =
+        space(dep) +
+        `<${toPascal(this.node.name)}${props ? ' ' + props : ''}${
+          !componentChildren
+            ? ' />'
+            : `>\n${space(dep + 1)}${componentChildren}\n${space(dep)}</${toPascal(this.node.name)}>`
+        }`
+
+      if (!this.parent) {
+        const mainComponent = await this.node.getMainComponentAsync()
+        if (mainComponent) {
+          const mainComponentElement = new Element(mainComponent)
+          const mainComponentChildren = await mainComponentElement.render(dep)
+          return `${content}\n\n/*\n${mainComponentChildren}\n*/`
+        }
+      }
+      return content
+    }
 
     if (this.node.type === 'COMPONENT') {
       const componentName = toPascal(this.node.name)

src/__tests__/Element.test.ts

@@ -15,16 +15,20 @@ function createNode(
     layoutSizingHorizontal,
     styledTextSegments = [],
     variantProperties,
+    componentProperties,
+    getMainComponentAsync,
     ...props
   }: {
     [_: string]: any
     characters?: string
     name?: string
+    componentProperties?: ComponentProperties
     textStyleId?: string
     children?: SceneNode[]
     layoutPositioning?: string
     styledTextSegments?: any[]
     variantProperties?: Record<string, string>
+    getMainComponentAsync?: () => Promise<ComponentNode | null>
   } = {},
 ): SceneNode {
   const ret = {
@@ -44,6 +48,8 @@ function createNode(
     fills,
     variantProperties,
     children: children ?? [],
+    componentProperties,
+    getMainComponentAsync: getMainComponentAsync ?? (async () => null),
   } as unknown as SceneNode
   ;(ret as any).children.forEach((child: any) => {
     ;(child as any).parent = ret
@@ -1213,10 +1219,69 @@ describe('Element', () => {
 
   describe('Instance', () => {
     it('should render Instance', async () => {
-      const element = createElement('INSTANCE', {
-        name: 'Instance',
-      })
-      expect(await element.render()).toEqual('<Instance />')
+      {
+        const element = createElement('INSTANCE', {
+          name: 'Instance',
+          componentProperties: {},
+        })
+        expect(await element.render()).toEqual('<Instance />')
+      }
+      {
+        const element = createElement('INSTANCE', {
+          name: 'Instance',
+          componentProperties: {
+            children: { type: 'TEXT', value: 'Hello' },
+          },
+        })
+        expect(await element.render()).toEqual(
+          '<Instance>\n  Hello\n</Instance>',
+        )
+      }
+      {
+        const element = createElement('INSTANCE', {
+          name: 'Instance',
+          componentProperties: {
+            children: { type: 'TEXT', value: 'Hello' },
+            color: { type: 'TEXT', value: 'red' },
+            width: { type: 'TEXT', value: '100px' },
+            height: { type: 'TEXT', value: '100px' },
+            danger: { type: 'BOOLEAN', value: true },
+          },
+        })
+        expect(await element.render()).toEqual(
+          '<Instance color="red" width="100px" height="100px" danger>\n  Hello\n</Instance>',
+        )
+      }
+      {
+        const element = createElement('INSTANCE', {
+          name: 'Instance',
+          componentProperties: {
+            children: { type: 'TEXT', value: 'Hello' },
+            color: { type: 'TEXT', value: 'red' },
+            width: { type: 'TEXT', value: '100px' },
+            height: { type: 'TEXT', value: '100px' },
+            danger: { type: 'BOOLEAN', value: true },
+          },
+          getMainComponentAsync: async () =>
+            createNode('COMPONENT', {
+              name: 'MainComponent',
+              children: [],
+            }),
+        })
+        expect(await element.render()).toEqual(
+          `<Instance color="red" width="100px" height="100px" danger>
+  Hello
+</Instance>
+
+/*
+export function MainComponent() {
+  return (
+    <Box />
+  )
+}
+*/`,
+        )
+      }
     })
   })
 

src/utils.ts

@@ -652,7 +652,14 @@ export function createInterface(
   if (!props || Object.keys(props).length === 0) return null
   return `export interface ${componentName}Props {
 ${Object.keys(props)
-  .map((key) => `  ${key}: unknown`)
+  .map((key) => `  ${toCamel(key)}: unknown`)
   .join('\n')}
 }`
 }
+
+export function getElementProps(props: [string, ComponentProperties[string]]) {
+  const [key, value] = props
+  const propKey = toCamel(key.split('#')[0])
+  if (value.type === 'BOOLEAN' && value.value) return propKey
+  return `${propKey}="${value.value}"`
+}