feat(runtime-vapor): fallback component

Author: sxzz

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

@@ -134,7 +134,6 @@ describe('api: createVaporApp', () => {
       setup() {
         const FooBar = resolveComponent('foo-bar')
         const BarBaz = resolveComponent('bar-baz')
-        // @ts-expect-error TODO support string
         return [createComponent(FooBar), createComponent(BarBaz)]
       },
     }).create()

packages/runtime-vapor/src/apiCreateComponent.ts

@@ -3,19 +3,58 @@ import {
   createComponentInstance,
   currentInstance,
 } from './component'
-import { setupComponent } from './apiRender'
-import type { RawProps } from './componentProps'
+import { type Block, setupComponent } from './apiRender'
+import type { NormalizedRawProps, RawProps } from './componentProps'
 import type { DynamicSlots, Slots } from './componentSlots'
-import { withAttrs } from './componentAttrs'
+import { walkRawProps, withAttrs } from './componentAttrs'
+import { isArray, isString } from '@vue/shared'
+import { renderEffect } from './renderEffect'
+import { normalizeBlock } from './dom/element'
+import { setDynamicProp } from './dom/prop'
 
 export function createComponent(
-  comp: Component,
+  comp: Component | string,
   rawProps: RawProps | null = null,
   slots: Slots | null = null,
   dynamicSlots: DynamicSlots | null = null,
   singleRoot: boolean = false,
   once: boolean = false,
 ) {
+  if (isString(comp)) {
+    // eslint-disable-next-line no-restricted-globals
+    const el = document.createElement(comp)
+
+    if (rawProps) {
+      if (!isArray(rawProps)) rawProps = [rawProps]
+      renderEffect(() => {
+        walkRawProps(rawProps as NormalizedRawProps, (key, value, getter) => {
+          setDynamicProp(el, key, getter ? value() : value)
+        })
+      })
+    }
+
+    if ((dynamicSlots && dynamicSlots.length) || (slots && slots.default)) {
+      renderEffect(() => {
+        let block: Block | undefined
+
+        if (slots && slots.default) {
+          block = slots.default()
+        } else {
+          for (const slotFn of dynamicSlots!) {
+            const slot = slotFn()
+            if (slot.name === 'default') {
+              block = slot.fn()
+              break
+            }
+          }
+        }
+
+        if (block) el.append(...normalizeBlock(block))
+      })
+    }
+
+    return el
+  }
   const current = currentInstance!
   const instance = createComponentInstance(
     comp,

packages/runtime-vapor/src/componentAttrs.ts

@@ -2,7 +2,7 @@ import { camelize, isArray, isFunction } from '@vue/shared'
 import { type ComponentInternalInstance, currentInstance } from './component'
 import { isEmitListener } from './componentEmits'
 import { setDynamicProps } from './dom/prop'
-import type { RawProps } from './componentProps'
+import type { NormalizedRawProps, RawProps } from './componentProps'
 import { renderEffect } from './renderEffect'
 
 export function patchAttrs(instance: ComponentInternalInstance) {
@@ -14,19 +14,8 @@ export function patchAttrs(instance: ComponentInternalInstance) {
 
   if (!rawProps.length) return
   const keys = new Set<string>()
-  for (const props of Array.from(rawProps).reverse()) {
-    if (isFunction(props)) {
-      const resolved = props()
-      for (const rawKey in resolved) {
-        registerAttr(rawKey, resolved[rawKey])
-      }
-    } else {
-      for (const rawKey in props) {
-        registerAttr(rawKey, props[rawKey], true)
-      }
-    }
-  }
 
+  walkRawProps(rawProps, registerAttr)
   for (const key in attrs) {
     if (!keys.has(key)) {
       delete attrs[key]
@@ -53,6 +42,24 @@ export function patchAttrs(instance: ComponentInternalInstance) {
   }
 }
 
+export function walkRawProps(
+  rawProps: NormalizedRawProps,
+  cb: (key: string, value: any, getter?: boolean) => void,
+) {
+  for (const props of Array.from(rawProps).reverse()) {
+    if (isFunction(props)) {
+      const resolved = props()
+      for (const rawKey in resolved) {
+        cb(rawKey, resolved[rawKey])
+      }
+    } else {
+      for (const rawKey in props) {
+        cb(rawKey, props[rawKey], true)
+      }
+    }
+  }
+}
+
 export function withAttrs(props: RawProps): RawProps {
   const instance = currentInstance!
   if (instance.component.inheritAttrs === false) return props

packages/runtime-vapor/src/componentSlots.ts

@@ -35,7 +35,7 @@ export interface DynamicSlot {
   fn: Slot
 }
 
-type DynamicSlotFn = () => DynamicSlot | DynamicSlot[]
+type DynamicSlotFn = () => DynamicSlot
 
 export type DynamicSlots = DynamicSlotFn[]
 
@@ -60,12 +60,11 @@ export function initSlots(
       firstEffect(instance, () => {
         const slotRecord = (dynamicSlotRecords[index] =
           dynamicSlotRecords[index] || {})
-        const dynamicSlot: DynamicSlot | DynamicSlot[] =
-          callWithAsyncErrorHandling(
-            fn,
-            instance,
-            VaporErrorCodes.RENDER_FUNCTION,
-          )
+        const dynamicSlot: DynamicSlot = callWithAsyncErrorHandling(
+          fn,
+          instance,
+          VaporErrorCodes.RENDER_FUNCTION,
+        )
         // array of dynamic slot generated by <template v-for="..." #[...]>
         if (isArray(dynamicSlot)) {
           for (let j = 0; j < dynamicSlot.length; j++) {