init (graduate from prototype)

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

@@ -0,0 +1,31 @@
+export function patchAttr(
+  el: Element,
+  key: string,
+  value: any,
+  isSVG: boolean
+) {
+  // isSVG short-circuits isXlink check
+  if (isSVG && isXlink(key)) {
+    if (value == null) {
+      el.removeAttributeNS(xlinkNS, getXlinkProp(key))
+    } else {
+      el.setAttributeNS(xlinkNS, key, value)
+    }
+  } else {
+    if (value == null) {
+      el.removeAttribute(key)
+    } else {
+      el.setAttribute(key, value)
+    }
+  }
+}
+
+const xlinkNS = 'http://www.w3.org/1999/xlink'
+
+function isXlink(name: string): boolean {
+  return name.charAt(5) === ':' && name.slice(0, 5) === 'xlink'
+}
+
+function getXlinkProp(name: string): string {
+  return isXlink(name) ? name.slice(6, name.length) : ''
+}

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

@@ -0,0 +1,29 @@
+// compiler should normlaize class + :class bindings on the same element
+// into a single binding ['staticClass', dynamic]
+
+export function patchClass(el: Element, value: any, isSVG: boolean) {
+  // directly setting className should be faster than setAttribute in theory
+  if (isSVG) {
+    el.setAttribute('class', normalizeClass(value))
+  } else {
+    el.className = normalizeClass(value)
+  }
+}
+
+function normalizeClass(value: any): string {
+  let res = ''
+  if (typeof value === 'string') {
+    res = value
+  } else if (Array.isArray(value)) {
+    for (let i = 0; i < value.length; i++) {
+      res += normalizeClass(value[i]) + ' '
+    }
+  } else if (typeof value === 'object') {
+    for (const name in value) {
+      if (value[name]) {
+        res += name + ' '
+      }
+    }
+  }
+  return res.trim()
+}

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

@@ -0,0 +1,142 @@
+const delegateRE = /^(?:click|dblclick|submit|(?:key|mouse|touch).*)$/
+
+type EventValue = Function | Function[]
+type TargetRef = { el: Element | Document }
+
+export function patchEvent(
+  el: Element,
+  name: string,
+  prevValue: EventValue | null,
+  nextValue: EventValue | null
+) {
+  if (delegateRE.test(name)) {
+    handleDelegatedEvent(el, name, nextValue)
+  } else {
+    handleNormalEvent(el, name, prevValue, nextValue)
+  }
+}
+
+const eventCounts: Record<string, number> = {}
+const attachedGlobalHandlers: Record<string, Function> = {}
+
+export function handleDelegatedEvent(
+  el: any,
+  name: string,
+  value: EventValue | null
+) {
+  const count = eventCounts[name]
+  let store = el.__events
+  if (value) {
+    if (!count) {
+      attachGlobalHandler(name)
+    }
+    if (!store) {
+      store = el.__events = {}
+    }
+    if (!store[name]) {
+      eventCounts[name]++
+    }
+    store[name] = value
+  } else if (store && store[name]) {
+    eventCounts[name]--
+    store[name] = null
+    if (count === 1) {
+      removeGlobalHandler(name)
+    }
+  }
+}
+
+function attachGlobalHandler(name: string) {
+  const handler = (attachedGlobalHandlers[name] = (e: Event) => {
+    const { type } = e
+    const isClick = type === 'click' || type === 'dblclick'
+    if (isClick && (e as MouseEvent).button !== 0) {
+      e.stopPropagation()
+      return false
+    }
+    e.stopPropagation = stopPropagation
+    const targetRef: TargetRef = { el: document }
+    Object.defineProperty(e, 'currentTarget', {
+      configurable: true,
+      get() {
+        return targetRef.el
+      }
+    })
+    dispatchEvent(e, name, isClick, targetRef)
+  })
+  document.addEventListener(name, handler)
+  eventCounts[name] = 0
+}
+
+function stopPropagation() {
+  this.cancelBubble = true
+  if (!this.immediatePropagationStopped) {
+    this.stopImmediatePropagation()
+  }
+}
+
+function dispatchEvent(
+  e: Event,
+  name: string,
+  isClick: boolean,
+  targetRef: TargetRef
+) {
+  let el = e.target as any
+  while (el != null) {
+    // Don't process clicks on disabled elements
+    if (isClick && el.disabled) {
+      break
+    }
+    const store = el.__events
+    if (store) {
+      const value = store[name]
+      if (value) {
+        targetRef.el = el
+        invokeEvents(e, value)
+        if (e.cancelBubble) {
+          break
+        }
+      }
+    }
+    el = el.parentNode
+  }
+}
+
+function invokeEvents(e: Event, value: EventValue) {
+  if (Array.isArray(value)) {
+    for (let i = 0; i < value.length; i++) {
+      value[i](e)
+    }
+  } else {
+    value(e)
+  }
+}
+
+function removeGlobalHandler(name: string) {
+  document.removeEventListener(name, attachedGlobalHandlers[name] as any)
+  eventCounts[name] = 0
+}
+
+function handleNormalEvent(el: Element, name: string, prev: any, next: any) {
+  const invoker = prev && prev.invoker
+  if (next) {
+    if (invoker) {
+      prev.invoker = null
+      invoker.value = next
+      next.invoker = invoker
+    } else {
+      el.addEventListener(name, createInvoker(next))
+    }
+  } else if (invoker) {
+    el.removeEventListener(name, invoker)
+  }
+}
+
+function createInvoker(value: any) {
+  const invoker = ((e: Event) => {
+    invokeEvents(e, invoker.value)
+  }) as any
+  invoker.value = value
+  value.invoker = invoker
+  return invoker
+}

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

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

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

@@ -0,0 +1,54 @@
+import { isObservable } from '@vue/core'
+
+// style properties that should NOT have "px" added when numeric
+const nonNumericRE = /acit|ex(?:s|g|n|p|$)|rph|ows|mnc|ntw|ine[ch]|zoo|^ord/i
+
+export function patchStyle(el: any, prev: any, next: any, data: any) {
+  // If next is observed, the user is likely to mutate the style object.
+  // We need to normalize + clone it and replace data.style with the clone.
+  if (isObservable(next)) {
+    data.style = normalizeStyle(next)
+  }
+
+  const { style } = el
+  if (!next) {
+    el.removeAttribute('style')
+  } else if (typeof next === 'string') {
+    style.cssText = next
+  } else {
+    // TODO: warn invalid value in dev
+    next = normalizeStyle(next)
+    for (const key in next) {
+      let value = next[key]
+      if (typeof value === 'number' && !nonNumericRE.test(key)) {
+        value = value + 'px'
+      }
+      style.setProperty(key, value)
+    }
+    if (prev && typeof prev !== 'string') {
+      prev = normalizeStyle(prev)
+      for (const key in prev) {
+        if (!next[key]) {
+          style.setProperty(key, '')
+        }
+      }
+    }
+  }
+}
+
+function normalizeStyle(value: any): Record<string, string | number> | void {
+  if (value && typeof value === 'object') {
+    return value
+  } else if (Array.isArray(value)) {
+    const res: Record<string, string | number> = {}
+    for (let i = 0; i < value.length; i++) {
+      const normalized = normalizeStyle(value[i])
+      if (normalized) {
+        for (const key in normalized) {
+          res[key] = normalized[key]
+        }
+      }
+    }
+    return res
+  }
+}