feat: ArrowFunction

kubb-labs · Oct 7, 2023 · 3f1ba74 · 3f1ba74
1 parent df1d238
commit 3f1ba74
Show file tree

Hide file tree

Showing 4 changed files with 99 additions and 3 deletions.
diff --git a/packages/react-template/src/components/Function.tsx b/packages/react-template/src/components/Function.tsx
@@ -36,4 +36,37 @@ export function Function({ name, export: canExport, async, generics, params, ret
   )
 }
 
+export function ArrowFunction({ name, export: canExport, async, generics, params, returnType, children }: Props): React.ReactNode {
+  return (
+    <>
+      {canExport && <Text>export </Text>}
+      <Text>const {name} = </Text>
+      {async && <Text>async </Text>}
+      {generics && (
+        <Text>
+          {'<'}
+          {generics.join(',')}
+          {'>'}
+        </Text>
+      )}
+      <Text>({params})</Text>
+      {returnType && !async && <Text>: {returnType}</Text>}
+      {returnType && async && (
+        <Text>
+          : Promise{'<'}
+          {returnType}
+          {'>'}
+        </Text>
+      )}
+      <Text>{' => {'}</Text>
+      <br />
+      <Text indentSize={4}>{children}</Text>
+      <br />
+      <Text>{'};'}</Text>
+    </>
+  )
+}
+
+Function.Arrow = ArrowFunction
+
 export const Fun = Function
diff --git a/packages/react-template/src/reconciler.ts b/packages/react-template/src/reconciler.ts
@@ -6,7 +6,8 @@ import { DefaultEventPriority } from 'react-reconciler/constants.js'
 import Yoga from 'yoga-wasm-web/auto'
 import type { Node as YogaNode } from 'yoga-wasm-web/auto'
 import { createTextNode, appendChildNode, insertBeforeNode, removeChildNode, setTextNodeValue, createNode, setAttribute } from './dom.js'
-import type { DOMNodeAttribute, TextNode, ElementNames, DOMElement } from './dom.ts'
+import type { DOMNodeAttribute, TextNode, DOMElement } from './dom.ts'
+import type { ElementNames } from './types.ts'
 
 type AnyObject = Record<string, unknown>
 

diff --git a/packages/react-template/src/render.test.tsx b/packages/react-template/src/render.test.tsx
@@ -1,5 +1,5 @@
 import { render } from './render.ts'
-import { Text, Function } from './components/index.ts'
+import { Text, ArrowFunction, Function } from './components/index.ts'
 import { format } from '../mocks/format.ts'
 
 describe('Render', () => {
@@ -29,6 +29,26 @@ describe('Render', () => {
        `),
     )
   })
+
+  test('render ArrowFunction', async () => {
+    const Component = () => {
+      return (
+        <ArrowFunction name="getData" export async>
+          return 2;
+        </ArrowFunction>
+      )
+    }
+    const { output } = render(<Component />)
+
+    expect(await format(output)).toMatch(
+      await format(`
+      export const getData = async () => {
+        return 2;
+      };
+        
+       `),
+    )
+  })
   test('render Function Generics', async () => {
     const Component = () => {
       return (
@@ -48,4 +68,46 @@ describe('Render', () => {
        `),
     )
   })
+
+  test('render ArrowFunction Generics', async () => {
+    const Component = () => {
+      return (
+        <ArrowFunction name="getData" export async generics={['TData']} returnType="number">
+          return 2;
+        </ArrowFunction>
+      )
+    }
+    const { output } = render(<Component />)
+
+    console.log(output)
+
+    expect(await format(output)).toMatch(
+      await format(`
+      export const getData = async <TData>(): Promise<number> => {
+        return 2;
+      };
+        
+       `),
+    )
+  })
+  // test('render Function ServerComponent(beta)', async () => {
+  //   const Component = async () => {
+  //     const data = await Promise.resolve('return 2;')
+  //     return (
+  //       <Function name="getData" export async generics={['TData']} returnType="number">
+  //         {data}
+  //       </Function>
+  //     )
+  //   }
+  //   const { output } = render(<Component />)
+
+  //   expect(await format(output)).toMatch(
+  //     await format(`
+  //     export async function getData<TData>(): number {
+  //         return 2;
+  //     };
+
+  //      `),
+  //   )
+  // })
 })
diff --git a/packages/react-template/src/render.ts b/packages/react-template/src/render.ts
@@ -39,7 +39,7 @@ export type Instance = {
 /**
  * Mount a component and render the output.
  */
-export function render(node: ReactNode, options: RenderOptions = {}): Instance {
+export function render(node: ReactNode | JSX.Element, options: RenderOptions = {}): Instance {
   const reactTemplateOptions: ReactTemplateOptions = {
     stdout: process.stdout,
     stdin: process.stdin,