refactor: add createElement helper

Author: edison1105

packages/runtime-vapor/src/component.ts

@@ -58,6 +58,7 @@ import {
   getSlot,
 } from './componentSlots'
 import { hmrReload, hmrRerender } from './hmr'
+import { createElement } from './dom/node'
 
 export { currentInstance } from '@vue/runtime-dom'
 
@@ -458,7 +459,7 @@ export function createComponentWithFallback(
     return createComponent(comp, rawProps, rawSlots, isSingleRoot, appContext)
   }
 
-  const el = document.createElement(comp)
+  const el = createElement(comp)
   // mark single root
   ;(el as any).$root = isSingleRoot
 

packages/runtime-vapor/src/components/TransitionGroup.ts

@@ -36,6 +36,7 @@ import {
 } from '../component'
 import { isForBlock } from '../apiCreateFor'
 import { renderEffect } from '../renderEffect'
+import { createElement } from '../dom/node'
 
 const positionMap = new WeakMap<TransitionBlock, DOMRect>()
 const newPositionMap = new WeakMap<TransitionBlock, DOMRect>()
@@ -105,7 +106,7 @@ export const VaporTransitionGroup: ObjectVaporComponent = decorate({
 
       prevChildren.forEach(callPendingCbs)
       prevChildren.forEach(child => {
-        delete child.$transition!.disabled
+        child.$transition!.disabled = false
         recordPosition(child)
       })
       const movedChildren = prevChildren.filter(applyTranslation)
@@ -146,7 +147,7 @@ export const VaporTransitionGroup: ObjectVaporComponent = decorate({
 
     const tag = props.tag
     if (tag) {
-      const container = document.createElement(tag)
+      const container = createElement(tag)
       insert(slottedBlock, container)
       // fallthrough attrs
       if (instance!.hasFallthrough) {

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

@@ -1,3 +1,8 @@
+/*! #__NO_SIDE_EFFECTS__ */
+export function createElement(tagName: string): HTMLElement {
+  return document.createElement(tagName)
+}
+
 /*! #__NO_SIDE_EFFECTS__ */
 export function createTextNode(value = ''): Text {
   return document.createTextNode(value)

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

@@ -3,7 +3,7 @@ import {
   currentHydrationNode,
   isHydrating,
 } from './hydration'
-import { child, createTextNode } from './node'
+import { child, createElement, createTextNode } from './node'
 
 let t: HTMLTemplateElement
 
@@ -23,7 +23,7 @@ export function template(html: string, root?: boolean) {
       return createTextNode(html)
     }
     if (!node) {
-      t = t || document.createElement('template')
+      t = t || createElement('template')
       t.innerHTML = html
       node = child(t.content)
     }