refactor(runtime-vapor): extract fallback component

Author: sxzz

packages/runtime-vapor/src/apiCreateComponent.ts

@@ -5,19 +5,11 @@ import {
   currentInstance,
 } from './component'
 import { setupComponent } from './apiRender'
-import {
-  type NormalizedRawProps,
-  type RawProps,
-  normalizeRawProps,
-  walkRawProps,
-} from './componentProps'
-import { type RawSlots, isDynamicSlotFn } from './componentSlots'
+import type { RawProps } from './componentProps'
+import type { RawSlots } from './componentSlots'
 import { withAttrs } from './componentAttrs'
 import { isString } from '@vue/shared'
-import { renderEffect } from './renderEffect'
-import { setClass, setDynamicProp } from './dom/prop'
-import { setStyle } from './dom/style'
-import { normalizeBlock } from './block'
+import { fallbackComponent } from './componentFallback'
 
 export function createComponent(
   comp: Component | string,
@@ -50,60 +42,3 @@ export function createComponent(
 
   return instance
 }
-
-function fallbackComponent(
-  comp: string,
-  rawProps: RawProps | null,
-  slots: RawSlots | null,
-  instance: ComponentInternalInstance,
-  singleRoot: boolean = false,
-): HTMLElement {
-  // eslint-disable-next-line no-restricted-globals
-  const el = document.createElement(comp)
-
-  if (rawProps || Object.keys(instance.attrs).length) {
-    rawProps = [() => instance.attrs, ...normalizeRawProps(rawProps)]
-
-    renderEffect(() => {
-      let classes: unknown[] | undefined
-      let styles: unknown[] | undefined
-
-      walkRawProps(
-        rawProps as NormalizedRawProps,
-        (key, valueOrGetter, getter) => {
-          const value = getter ? valueOrGetter() : valueOrGetter
-          if (key === 'class') (classes ||= []).push(value)
-          else if (key === 'style') (styles ||= []).push(value)
-          else setDynamicProp(el, key, value)
-        },
-      )
-
-      if (classes) setClass(el, classes)
-      if (styles) setStyle(el, styles)
-    })
-  }
-
-  if (slots) {
-    if (!Array.isArray(slots)) slots = [slots]
-    for (let i = 0; i < slots.length; i++) {
-      const slot = slots[i]
-      if (!isDynamicSlotFn(slot) && slot.default) {
-        const block = slot.default && slot.default()
-        if (block) el.append(...normalizeBlock(block))
-      }
-    }
-  }
-
-  if (singleRoot) {
-    instance.dynamicAttrs = true
-    for (let i = 0; i < instance.scopeIds.length; i++) {
-      const id = instance.scopeIds[i]
-      el.setAttribute(id, '')
-    }
-  }
-
-  const scopeId = instance.type.__scopeId
-  if (scopeId) el.setAttribute(scopeId, '')
-
-  return el
-}

packages/runtime-vapor/src/apiSetupHelpers.ts

@@ -5,8 +5,6 @@ import {
 } from './component'
 import { warn } from './warning'
 
-// TODO: warning compiler-macros runtime usages
-
 export function useSlots(): SetupContext['slots'] {
   return getContext().slots
 }

packages/runtime-vapor/src/componentFallback.ts

@@ -0,0 +1,69 @@
+import type { ComponentInternalInstance } from './component'
+import {
+  type NormalizedRawProps,
+  type RawProps,
+  normalizeRawProps,
+  walkRawProps,
+} from './componentProps'
+import { type RawSlots, isDynamicSlotFn } from './componentSlots'
+import { renderEffect } from './renderEffect'
+import { setClass, setDynamicProp } from './dom/prop'
+import { setStyle } from './dom/style'
+import { normalizeBlock } from './block'
+
+export function fallbackComponent(
+  comp: string,
+  rawProps: RawProps | null,
+  slots: RawSlots | null,
+  instance: ComponentInternalInstance,
+  singleRoot: boolean = false,
+): HTMLElement {
+  // eslint-disable-next-line no-restricted-globals
+  const el = document.createElement(comp)
+
+  if (rawProps || Object.keys(instance.attrs).length) {
+    rawProps = [() => instance.attrs, ...normalizeRawProps(rawProps)]
+
+    renderEffect(() => {
+      let classes: unknown[] | undefined
+      let styles: unknown[] | undefined
+
+      walkRawProps(
+        rawProps as NormalizedRawProps,
+        (key, valueOrGetter, getter) => {
+          const value = getter ? valueOrGetter() : valueOrGetter
+          if (key === 'class') (classes ||= []).push(value)
+          else if (key === 'style') (styles ||= []).push(value)
+          else setDynamicProp(el, key, value)
+        },
+      )
+
+      if (classes) setClass(el, classes)
+      if (styles) setStyle(el, styles)
+    })
+  }
+
+  if (slots) {
+    if (!Array.isArray(slots)) slots = [slots]
+    for (let i = 0; i < slots.length; i++) {
+      const slot = slots[i]
+      if (!isDynamicSlotFn(slot) && slot.default) {
+        const block = slot.default && slot.default()
+        if (block) el.append(...normalizeBlock(block))
+      }
+    }
+  }
+
+  if (singleRoot) {
+    instance.dynamicAttrs = true
+    for (let i = 0; i < instance.scopeIds.length; i++) {
+      const id = instance.scopeIds[i]
+      el.setAttribute(id, '')
+    }
+  }
+
+  const scopeId = instance.type.__scopeId
+  if (scopeId) el.setAttribute(scopeId, '')
+
+  return el
+}