fix: Support async components (#686)

Closes #627.

Author: shuding

src/layout.ts

@@ -94,7 +94,7 @@ export default async function* layout(
       // stateless, and not relying on any React APIs such as hooks or suspense.
       // So we can safely evaluate it to render. Otherwise, an error will be
       // thrown by React.
-      iter = layout((element.type as Function)(element.props), context)
+      iter = layout(await (element.type as Function)(element.props), context)
       yield (await iter.next()).value as { word: string; locale?: string }[]
     }
 

test/__image_snapshots__/basic-test-tsx-test-basic-test-tsx-basic-should-support-custom-components-1-snap.png

@@ -98,6 +98,55 @@ describe('Basic', () => {
     expect(toImage(svg, 100)).toMatchImageSnapshot()
   })
 
+  it('should support custom components', async () => {
+    function MyComponent() {
+      return <h1 style={{ fontSize: 16 }}>Hello from My Component</h1>
+    }
+
+    const svg = await satori(
+      <div
+        style={{
+          backgroundColor: '#ff0',
+          width: '100%',
+          height: '100%',
+          display: 'flex',
+        }}
+      >
+        <MyComponent />
+      </div>,
+      {
+        width: 100,
+        height: 100,
+        fonts,
+      }
+    )
+    expect(toImage(svg, 100)).toMatchImageSnapshot()
+
+    async function MyAsyncComponent() {
+      await new Promise((resolve) => setTimeout(resolve, 0))
+      return <h1 style={{ fontSize: 16 }}>Hello from My Async Component</h1>
+    }
+    const svg2 = await satori(
+      <div
+        style={{
+          backgroundColor: '#ff0',
+          width: '100%',
+          height: '100%',
+          display: 'flex',
+        }}
+      >
+        {/* @ts-ignore */}
+        <MyAsyncComponent />
+      </div>,
+      {
+        width: 100,
+        height: 100,
+        fonts,
+      }
+    )
+    expect(toImage(svg2, 100)).toMatchImageSnapshot()
+  })
+
   it('should combine textNodes correctly', async () => {
     const svg = await satori(
       <div