wip: add types to refactored runtime-core

packages/runtime-dom/src/index.ts

@@ -1,17 +1,10 @@
-import { createRenderer, Component } from '@vue/runtime-core'
-import { nodeOps } from './nodeOps'
-import { patchData } from './patchData'
+import { createRenderer, VNode } from '@vue/runtime-core'
+import { DOMRendererOptions } from './rendererOptions'
 
-const { render: _render } = createRenderer({
-  nodeOps,
-  patchData
-})
-
-type publicRender = (
-  node: {} | null,
+export const render = createRenderer(DOMRendererOptions) as (
+  vnode: VNode | null,
   container: HTMLElement
-) => Promise<Component | null>
-export const render = _render as publicRender
+) => VNode
 
 // re-export everything from core
 // h, Component, observer API, nextTick, flags & types

packages/runtime-dom/src/modules/props.ts

@@ -1,18 +1,12 @@
-import { VNode, ChildrenFlags } from '@vue/runtime-core'
-
 export function patchDOMProp(
   el: any,
   key: string,
   value: any,
-  prevVNode: VNode,
+  prevChildren: any,
   unmountChildren: any
 ) {
-  if (key === 'innerHTML' || key === 'textContent') {
-    if (prevVNode && prevVNode.children) {
-      unmountChildren(prevVNode.children, prevVNode.childFlags)
-      prevVNode.children = null
-      prevVNode.childFlags = ChildrenFlags.NO_CHILDREN
-    }
+  if ((key === 'innerHTML' || key === 'textContent') && prevChildren != null) {
+    unmountChildren(prevChildren)
   }
   el[key] = value
 }

packages/runtime-dom/src/modules/style.ts

@@ -1,6 +1,6 @@
 import { isString } from '@vue/shared'
 
-export function patchStyle(el: any, prev: any, next: any, data: any) {
+export function patchStyle(el: any, prev: any, next: any) {
   const { style } = el
   if (!next) {
     el.removeAttribute('style')

packages/runtime-dom/src/nodeOps.ts

@@ -1,37 +0,0 @@
-import { NodeOps } from '@vue/runtime-core'
-
-const svgNS = 'http://www.w3.org/2000/svg'
-
-export const nodeOps: NodeOps = {
-  createElement: (tag: string, isSVG?: boolean): Element =>
-    isSVG ? document.createElementNS(svgNS, tag) : document.createElement(tag),
-
-  createText: (text: string): Text => document.createTextNode(text),
-
-  setText: (node: Text, text: string) => {
-    node.nodeValue = text
-  },
-
-  appendChild: (parent: Node, child: Node) => {
-    parent.appendChild(child)
-  },
-
-  insertBefore: (parent: Node, child: Node, ref: Node) => {
-    parent.insertBefore(child, ref)
-  },
-
-  removeChild: (parent: Node, child: Node) => {
-    parent.removeChild(child)
-  },
-
-  clearContent: (node: Node) => {
-    node.textContent = ''
-  },
-
-  parentNode: (node: Node): Node | null => node.parentNode,
-
-  nextSibling: (node: Node): Node | null => node.nextSibling,
-
-  querySelector: (selector: string): Node | null =>
-    document.querySelector(selector)
-}

packages/runtime-dom/src/patchProp.ts

@@ -1,24 +1,19 @@
-import { VNode } from '@vue/runtime-core'
 import { patchClass } from './modules/class'
 import { patchStyle } from './modules/style'
 import { patchAttr } from './modules/attrs'
 import { patchDOMProp } from './modules/props'
 import { patchEvent } from './modules/events'
 import { isOn } from '@vue/shared'
+import { VNode } from '@vue/runtime-core'
 
-// value, checked, selected & muted
-// plus anything with upperCase letter in it are always patched as properties
-const domPropsReplaceRE = /^domProps/
-
-export function patchData(
+export function patchProp(
   el: Element,
   key: string,
   prevValue: any,
   nextValue: any,
-  prevVNode: VNode,
-  nextVNode: VNode,
   isSVG: boolean,
-  unmountChildren: any
+  prevChildren?: VNode[],
+  unmountChildren?: any
 ) {
   switch (key) {
     // special
@@ -26,19 +21,13 @@ export function patchData(
       patchClass(el, nextValue, isSVG)
       break
     case 'style':
-      patchStyle(el, prevValue, nextValue, nextVNode.data)
+      patchStyle(el, prevValue, nextValue)
       break
     default:
       if (isOn(key)) {
         patchEvent(el, key.slice(2).toLowerCase(), prevValue, nextValue)
       } else if (key in el) {
-        patchDOMProp(
-          el,
-          key.replace(domPropsReplaceRE, '').toLowerCase(),
-          nextValue,
-          prevVNode,
-          unmountChildren
-        )
+        patchDOMProp(el, key, nextValue, prevChildren, unmountChildren)
       } else {
         patchAttr(el, key, nextValue, isSVG)
       }

packages/runtime-dom/src/rendererOptions.ts

@@ -0,0 +1,40 @@
+import { RendererOptions } from '@vue/runtime-core'
+import { patchProp } from './patchProp'
+
+const svgNS = 'http://www.w3.org/2000/svg'
+
+export const DOMRendererOptions: RendererOptions = {
+  patchProp,
+
+  insert: (parent: Node, child: Node, anchor?: Node) => {
+    if (anchor != null) {
+      parent.insertBefore(child, anchor)
+    } else {
+      parent.appendChild(child)
+    }
+  },
+
+  remove: (child: Node) => {
+    const parent = child.parentNode
+    if (parent != null) {
+      parent.removeChild(child)
+    }
+  },
+
+  createElement: (tag: string, isSVG?: boolean): Element =>
+    isSVG ? document.createElementNS(svgNS, tag) : document.createElement(tag),
+
+  createText: (text: string): Text => document.createTextNode(text),
+
+  createComment: (text: string): Comment => document.createComment(text),
+
+  setText: (node: Text, text: string) => {
+    node.nodeValue = text
+  },
+
+  setElementText: (el: HTMLElement, text: string) => {
+    el.textContent = text
+  },
+
+  nextSibling: (node: Node): Node | null => node.nextSibling
+}