refactor

Author: sxzz

packages/runtime-vapor/src/apiCreateComponent.ts

@@ -4,10 +4,15 @@ import {
   currentInstance,
 } from './component'
 import { type Block, setupComponent } from './apiRender'
-import type { NormalizedRawProps, RawProps } from './componentProps'
+import {
+  type NormalizedRawProps,
+  type RawProps,
+  normalizeRawProps,
+  walkRawProps,
+} from './componentProps'
 import type { DynamicSlots, Slots } from './componentSlots'
-import { walkRawProps, withAttrs } from './componentAttrs'
-import { isArray, isString } from '@vue/shared'
+import { withAttrs } from './componentAttrs'
+import { isString } from '@vue/shared'
 import { renderEffect } from './renderEffect'
 import { normalizeBlock } from './dom/element'
 import { setDynamicProp } from './dom/prop'
@@ -21,40 +26,9 @@ export function createComponent(
   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
+    return fallbackComponent(comp, rawProps, slots, dynamicSlots, singleRoot)
   }
+
   const current = currentInstance!
   const instance = createComponentInstance(
     comp,
@@ -70,3 +44,44 @@ export function createComponent(
 
   return instance
 }
+
+function fallbackComponent(
+  comp: string,
+  rawProps: RawProps | null = null,
+  slots: Slots | null = null,
+  dynamicSlots: DynamicSlots | null = null,
+  singleRoot: boolean = false,
+) {
+  // eslint-disable-next-line no-restricted-globals
+  const el = document.createElement(comp)
+
+  if (rawProps) {
+    rawProps = normalizeRawProps(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 { __return: el, rawProps }
+}

packages/runtime-vapor/src/componentAttrs.ts

@@ -1,8 +1,8 @@
-import { camelize, isArray, isFunction } from '@vue/shared'
+import { camelize, isArray } from '@vue/shared'
 import { type ComponentInternalInstance, currentInstance } from './component'
 import { isEmitListener } from './componentEmits'
 import { setDynamicProps } from './dom/prop'
-import type { NormalizedRawProps, RawProps } from './componentProps'
+import { type RawProps, walkRawProps } from './componentProps'
 import { renderEffect } from './renderEffect'
 
 export function patchAttrs(instance: ComponentInternalInstance) {
@@ -42,24 +42,6 @@ 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/componentProps.ts

@@ -83,10 +83,7 @@ export function initProps(
   isStateful: boolean,
   once: boolean,
 ) {
-  if (!rawProps) rawProps = []
-  else if (!isArray(rawProps)) rawProps = [rawProps]
-  instance.rawProps = rawProps
-
+  instance.rawProps = rawProps = normalizeRawProps(rawProps)
   const props: Data = {}
   const attrs = (instance.attrs = shallowReactive<Data>({}))
   const [options] = instance.propsOptions
@@ -166,6 +163,30 @@ function registerProp(
   }
 }
 
+export function normalizeRawProps(rawProps: RawProps) {
+  if (!rawProps) return []
+  if (!isArray(rawProps)) return [rawProps]
+  return rawProps
+}
+
+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)
+      }
+    }
+  }
+}
+
 function getRawKey(obj: Data, key: string) {
   return Object.keys(obj).find(k => camelize(k) === key)
 }