feat(runtime-vapor): add normalizeNode to support non-block nodes

packages/runtime-vapor/__tests__/component.spec.ts

@@ -333,26 +333,30 @@ describe('component', () => {
     __DEV__ = true
   })
 
-  it('warn if functional vapor component not return a block', () => {
-    define(() => {
-      return () => {}
+  it('functional vapor component return a object', () => {
+    const { host } = define(() => {
+      return {}
     }).render()
 
-    expect(
-      'Functional vapor component must return a block directly',
-    ).toHaveBeenWarned()
+    expect(host.textContent).toBe(`[object Object]`)
   })
 
-  it('warn if setup return a function and no render function', () => {
-    define({
+  it('functional vapor component return a function', () => {
+    const { host } = define(() => {
+      return () => ({})
+    }).render()
+
+    expect(host.textContent).toBe(`() => ({})`)
+  })
+
+  it('setup return a function and no render function', () => {
+    const { host } = define({
       setup() {
         return () => []
       },
     }).render()
 
-    expect(
-      'Vapor component setup() returned non-block value, and has no render function',
-    ).toHaveBeenWarned()
+    expect(host.textContent).toBe(`() => []`)
   })
 })
 

packages/runtime-vapor/__tests__/dom/node.spec.ts

@@ -0,0 +1,20 @@
+import { createTextNode, normalizeNode } from '../../src/dom/node'
+
+describe('dom node', () => {
+  test('normalizeNode', () => {
+    // null / undefined -> Comment
+    expect(normalizeNode(null)).toBeInstanceOf(Comment)
+    expect(normalizeNode(undefined)).toBeInstanceOf(Comment)
+
+    // boolean -> Comment
+    expect(normalizeNode(true)).toBeInstanceOf(Comment)
+    expect(normalizeNode(false)).toBeInstanceOf(Comment)
+
+    // ['foo'] -> [TextNode]
+    expect(normalizeNode(['foo'])).toMatchObject(createTextNode('foo'))
+
+    // primitive types
+    expect(normalizeNode('foo')).toMatchObject(createTextNode('foo'))
+    expect(normalizeNode(1)).toMatchObject(createTextNode('1'))
+  })
+})

packages/runtime-vapor/__tests__/errorHandling.spec.ts

@@ -182,7 +182,6 @@ describe('error handling', () => {
 
     define(Comp).render()
     expect(fn).toHaveBeenCalledWith(err, 'setup function')
-    expect(`returned non-block value`).toHaveBeenWarned()
   })
 
   test('in render function', () => {

packages/runtime-vapor/src/component.ts

@@ -23,9 +23,8 @@ import {
   setCurrentInstance,
   startMeasure,
   unregisterHMR,
-  warn,
 } from '@vue/runtime-dom'
-import { type Block, DynamicFragment, insert, isBlock, remove } from './block'
+import { type Block, DynamicFragment, insert, remove } from './block'
 import {
   type ShallowRef,
   markRaw,
@@ -63,6 +62,7 @@ import {
   insertionParent,
   resetInsertionState,
 } from './insertionState'
+import { type NodeChild, normalizeNode } from './dom/node'
 
 export { currentInstance } from '@vue/runtime-dom'
 
@@ -71,7 +71,7 @@ export type VaporComponent = FunctionalVaporComponent | ObjectVaporComponent
 export type VaporSetupFn = (
   props: any,
   ctx: Pick<VaporComponentInstance, 'slots' | 'attrs' | 'emit' | 'expose'>,
-) => Block | Record<string, any> | undefined
+) => NodeChild | Record<string, any> | undefined
 
 export type FunctionalVaporComponent = VaporSetupFn &
   Omit<ObjectVaporComponent, 'setup'> & {
@@ -212,26 +212,21 @@ export function createComponent(
   }
 
   const setupFn = isFunction(component) ? component : component.setup
-  const setupResult = setupFn
-    ? callWithErrorHandling(setupFn, instance, ErrorCodes.SETUP_FUNCTION, [
-        instance.props,
-        instance,
-      ]) || EMPTY_OBJ
-    : EMPTY_OBJ
-
-  if (__DEV__ && !isBlock(setupResult)) {
-    if (isFunction(component)) {
-      warn(`Functional vapor component must return a block directly.`)
-      instance.block = []
-    } else if (!component.render) {
-      warn(
-        `Vapor component setup() returned non-block value, and has no render function.`,
-      )
-      instance.block = []
+  const setupResult =
+    setupFn &&
+    callWithErrorHandling(setupFn, instance, ErrorCodes.SETUP_FUNCTION, [
+      instance.props,
+      instance,
+    ])
+
+  if (__DEV__) {
+    if (isFunction(component) || !component.render) {
+      instance.block = normalizeNode(setupResult)
     } else {
-      instance.devtoolsRawSetupState = setupResult
       // TODO make the proxy warn non-existent property access during dev
-      instance.setupState = proxyRefs(setupResult)
+      instance.setupState = proxyRefs(
+        (instance.devtoolsRawSetupState = setupResult || EMPTY_OBJ),
+      )
       devRender(instance)
     }
   } else {
@@ -245,7 +240,7 @@ export function createComponent(
       )
     } else {
       // in prod result can only be block
-      instance.block = setupResult as Block
+      instance.block = normalizeNode(setupResult)
     }
   }
 
@@ -513,7 +508,8 @@ export function createComponentWithFallback(
     if (rawSlots.$) {
       // TODO dynamic slot fragment
     } else {
-      insert(getSlot(rawSlots as RawSlots, 'default')!(), el)
+      const defaultSlot = getSlot(rawSlots as RawSlots, 'default')
+      defaultSlot && insert(normalizeNode(defaultSlot()), el)
     }
   }
 

packages/runtime-vapor/src/dom/node.ts

@@ -1,3 +1,6 @@
+import { type Block, isBlock } from '../block'
+import { isArray } from '@vue/shared'
+
 /*! #__NO_SIDE_EFFECTS__ */
 export function createTextNode(value = ''): Text {
   return document.createTextNode(value)
@@ -27,3 +30,23 @@ export function nthChild(node: Node, i: number): Node {
 export function next(node: Node): Node {
   return node.nextSibling!
 }
+
+type NodeChildAtom = Block | string | number | boolean | null | undefined | void
+
+export type NodeArrayChildren = Array<NodeArrayChildren | NodeChildAtom>
+
+export type NodeChild = NodeChildAtom | NodeArrayChildren
+
+export function normalizeNode(node: NodeChild): Block {
+  if (node == null || typeof node === 'boolean') {
+    // empty placeholder
+    return createComment('')
+  } else if (isArray(node) && node.length) {
+    return node.map(normalizeNode)
+  } else if (isBlock(node)) {
+    return node
+  } else {
+    // strings and numbers
+    return createTextNode(String(node))
+  }
+}