fix(jsx): report a clear error when a component returns an array

A function component returning an array failed with "str.search is not a
function". The return value did not match any branch in
JSXFunctionNode.toStringToBuffer() and fell through to escapeToBuffer(),
which expects a string, so the message pointed at an internal helper
instead of the code that has to change.

Returning an array is still not supported -- the type layer already
rejects it -- so detect the case and throw a message that names the
problem and the fix.

Author: natsuki-engr

src/jsx/base.ts

@@ -289,6 +289,12 @@ class JSXFunctionNode extends JSXNode {
         buffer.callbacks ||= []
         buffer.callbacks.push(...res.callbacks)
       }
+    } else if (Array.isArray(res)) {
+      // Reaching `escapeToBuffer()` with an array fails with an unrelated message,
+      // so report what the caller actually has to change.
+      throw new Error(
+        'A function component must not return an array. Wrap the elements in a Fragment: <>...</>'
+      )
     } else {
       escapeToBuffer(res, buffer)
     }

src/jsx/index.test.tsx

@@ -171,6 +171,16 @@ describe('render to string', () => {
     expect(template.toString()).toBe('<p><span>a</span><span>b</span></p>')
   })
 
+  it('Should throw when a component returns an array', () => {
+    const Item = ({ x }: { x: number }) => <span>{x}</span>
+    const Items = () => [0, 1].map((x) => <Item key={x} x={x} />)
+    // @ts-expect-error a component returning an array is not a valid JSX element
+    const template = <Items />
+    expect(() => template.toString()).toThrow(
+      'A function component must not return an array. Wrap the elements in a Fragment: <>...</>'
+    )
+  })
+
   it('Empty elements are rended without closing tag', () => {
     const template = <input />
     expect(template.toString()).toBe('<input/>')