refactor: rename packages

packages/runtime-dom/.npmignore

@@ -0,0 +1,3 @@
+__tests__/
+__mocks__/
+dist/packages

packages/runtime-dom/README.md

@@ -0,0 +1,21 @@
+# @vue/runtime-dom
+
+``` js
+import { h, render, Component } from '@vue/runtime-dom'
+
+class App extends Component {
+  data () {
+    return {
+      msg: 'Hello World!'
+    }
+  }
+  render () {
+    return h('div', this.msg)
+  }
+}
+
+render(
+  h(App),
+  document.getElementById('app')
+)
+```

packages/runtime-dom/index.js

@@ -0,0 +1,7 @@
+'use strict'
+
+if (process.env.NODE_ENV === 'production') {
+  module.exports = require('./dist/runtime-dom.cjs.prod.js')
+} else {
+  module.exports = require('./dist/runtime-dom.cjs.js')
+}

packages/runtime-dom/jsx.d.ts

@@ -0,0 +1,763 @@
+// This code is based on https://github.com/wonderful-panda/vue-tsx-support
+// published under the MIT license.
+// Copyright by @wonderful-panda
+//
+// which is in turn based on the react definition in DefinitelyTyped
+// published under the MIT license.
+//      Repository: https://github.com/DefinitelyTyped/DefinitelyTyped
+//      Path in the repository: types/react/v15/index.d.ts
+//
+// Copyrights of original definition are:
+//      Asana <https://asana.com>
+//      AssureSign <http://www.assuresign.com>
+//      Microsoft <https://microsoft.com>
+//      John Reilly <https://github.com/johnnyreilly/>
+//      Benoit Benezech <https://github.com/bbenezech>
+//      Patricio Zavolinsky <https://github.com/pzavolinsky>
+//      Digiguru <https://github.com/digiguru>
+//      Eric Anderson <https://github.com/ericanderson>
+//      Albert Kurniawan <https://github.com/morcerf>
+//      Tanguy Krotoff <https://github.com/tkrotoff>
+//      Dovydas Navickas <https://github.com/DovydasNavickas>
+//      Stéphane Goetz <https://github.com/onigoetz>
+
+interface HTMLAttributes {
+  class?: any
+  style?: string | { [key: string]: string | number }
+  accesskey?: string
+  contenteditable?: boolean
+  contextmenu?: string
+  dir?: string
+  disabled?: boolean
+  draggable?: boolean
+  hidden?: boolean
+  id?: string
+  lang?: string
+  spellcheck?: boolean
+  tabindex?: number
+  title?: string
+
+  role?: string
+}
+
+interface AnchorHTMLAttributes extends HTMLAttributes {
+  download?: any
+  href?: string
+  hreflang?: string
+  media?: string
+  rel?: string
+  target?: string
+}
+
+interface AreaHTMLAttributes extends HTMLAttributes {
+  alt?: string
+  coord?: string
+  download?: any
+  href?: string
+  hreflang?: string
+  media?: string
+  rel?: string
+  shape?: string
+  target?: string
+}
+
+interface AudioHTMLAttributes extends MediaHTMLAttributes {}
+
+interface BaseHTMLAttributes extends HTMLAttributes {
+  href?: string
+  target?: string
+}
+
+interface BlockquoteHTMLAttributes extends HTMLAttributes {
+  cite?: string
+}
+
+interface ButtonHTMLAttributes extends HTMLAttributes {
+  autofocus?: boolean
+  disabled?: boolean
+  form?: string
+  formaction?: string
+  formenctype?: string
+  formmethod?: string
+  formnovalidate?: boolean
+  formtarget?: string
+  name?: string
+  type?: string
+  value?: string | string[] | number
+}
+
+interface CanvasHTMLAttributes extends HTMLAttributes {
+  height?: number | string
+  width?: number | string
+}
+
+interface ColHTMLAttributes extends HTMLAttributes {
+  span?: number
+}
+
+interface ColgroupHTMLAttributes extends ColHTMLAttributes {}
+
+interface DetailsHTMLAttributes extends HTMLAttributes {
+  open?: boolean
+}
+
+interface DelHTMLAttributes extends HTMLAttributes {
+  cite?: string
+  datetime?: string
+}
+
+interface EmbedHTMLAttributes extends HTMLAttributes {
+  height?: number | string
+  src?: string
+  type?: string
+  width?: number | string
+}
+
+interface FieldsetHTMLAttributes extends HTMLAttributes {
+  disabled?: boolean
+  form?: string
+  name?: string
+}
+
+interface FormHTMLAttributes extends HTMLAttributes {
+  acceptcharset?: string
+  action?: string
+  autocomplete?: string
+  enctype?: string
+  method?: string
+  name?: string
+  novalidate?: boolean
+  target?: string
+}
+
+interface HtmlHTMLAttributes extends HTMLAttributes {
+  manifest?: string
+}
+
+interface IframeHTMLAttributes extends HTMLAttributes {
+  allowfullscreen?: boolean
+  allowtransparency?: boolean
+  frameborder?: number | string
+  height?: number | string
+  marginheight?: number
+  marginwidth?: number
+  name?: string
+  sandbox?: string
+  scrolling?: string
+  seamless?: boolean
+  src?: string
+  srcdoc?: string
+  width?: number | string
+}
+
+interface ImgHTMLAttributes extends HTMLAttributes {
+  alt?: string
+  height?: number | string
+  sizes?: string
+  src?: string
+  srcset?: string
+  usemap?: string
+  width?: number | string
+}
+
+interface InsHTMLAttributes extends HTMLAttributes {
+  cite?: string
+  datetime?: string
+}
+
+interface InputHTMLAttributes extends HTMLAttributes {
+  accept?: string
+  alt?: string
+  autocomplete?: string
+  autofocus?: boolean
+  capture?: boolean // https://www.w3.org/tr/html-media-capture/#the-capture-attribute
+  checked?: boolean
+  crossorigin?: string
+  disabled?: boolean
+  form?: string
+  formaction?: string
+  formenctype?: string
+  formmethod?: string
+  formnovalidate?: boolean
+  formtarget?: string
+  height?: number | string
+  list?: string
+  max?: number | string
+  maxlength?: number
+  min?: number | string
+  minlength?: number
+  multiple?: boolean
+  name?: string
+  pattern?: string
+  placeholder?: string
+  readonly?: boolean
+  required?: boolean
+  size?: number
+  src?: string
+  step?: number | string
+  type?: string
+  value?: string | string[] | number
+  width?: number | string
+}
+
+interface KeygenHTMLAttributes extends HTMLAttributes {
+  autofocus?: boolean
+  challenge?: string
+  disabled?: boolean
+  form?: string
+  keytype?: string
+  keyparams?: string
+  name?: string
+}
+
+interface LabelHTMLAttributes extends HTMLAttributes {
+  form?: string
+  htmlfor?: string
+}
+
+interface LiHTMLAttributes extends HTMLAttributes {
+  value?: string | string[] | number
+}
+
+interface LinkHTMLAttributes extends HTMLAttributes {
+  href?: string
+  hreflang?: string
+  integrity?: string
+  media?: string
+  rel?: string
+  sizes?: string
+  type?: string
+}
+
+interface MapHTMLAttributes extends HTMLAttributes {
+  name?: string
+}
+
+interface MenuHTMLAttributes extends HTMLAttributes {
+  type?: string
+}
+
+interface MediaHTMLAttributes extends HTMLAttributes {
+  autoplay?: boolean
+  controls?: boolean
+  crossorigin?: string
+  loop?: boolean
+  mediagroup?: string
+  muted?: boolean
+  preload?: string
+  src?: string
+}
+
+interface MetaHTMLAttributes extends HTMLAttributes {
+  charset?: string
+  content?: string
+  httpequiv?: string
+  name?: string
+}
+
+interface MeterHTMLAttributes extends HTMLAttributes {
+  form?: string
+  high?: number
+  low?: number
+  max?: number | string
+  min?: number | string
+  optimum?: number
+  value?: string | string[] | number
+}
+
+interface QuoteHTMLAttributes extends HTMLAttributes {
+  cite?: string
+}
+
+interface ObjectHTMLAttributes extends HTMLAttributes {
+  classid?: string
+  data?: string
+  form?: string
+  height?: number | string
+  name?: string
+  type?: string
+  usemap?: string
+  width?: number | string
+  wmode?: string
+}
+
+interface OlHTMLAttributes extends HTMLAttributes {
+  reversed?: boolean
+  start?: number
+}
+
+interface OptgroupHTMLAttributes extends HTMLAttributes {
+  disabled?: boolean
+  label?: string
+}
+
+interface OptionHTMLAttributes extends HTMLAttributes {
+  disabled?: boolean
+  label?: string
+  selected?: boolean
+  value?: string | string[] | number
+}
+
+interface OutputHTMLAttributes extends HTMLAttributes {
+  form?: string
+  htmlfor?: string
+  name?: string
+}
+
+interface ParamHTMLAttributes extends HTMLAttributes {
+  name?: string
+  value?: string | string[] | number
+}
+
+interface ProgressHTMLAttributes extends HTMLAttributes {
+  max?: number | string
+  value?: string | string[] | number
+}
+
+interface ScriptHTMLAttributes extends HTMLAttributes {
+  async?: boolean
+  charset?: string
+  crossorigin?: string
+  defer?: boolean
+  integrity?: string
+  nonce?: string
+  src?: string
+  type?: string
+}
+
+interface SelectHTMLAttributes extends HTMLAttributes {
+  autofocus?: boolean
+  disabled?: boolean
+  form?: string
+  multiple?: boolean
+  name?: string
+  required?: boolean
+  size?: number
+  value?: string | string[] | number
+}
+
+interface SourceHTMLAttributes extends HTMLAttributes {
+  media?: string
+  sizes?: string
+  src?: string
+  srcset?: string
+  type?: string
+}
+
+interface StyleHTMLAttributes extends HTMLAttributes {
+  media?: string
+  nonce?: string
+  scoped?: boolean
+  type?: string
+}
+
+interface TableHTMLAttributes extends HTMLAttributes {
+  cellpadding?: number | string
+  cellspacing?: number | string
+  summary?: string
+}
+
+interface TextareaHTMLAttributes extends HTMLAttributes {
+  autocomplete?: string
+  autofocus?: boolean
+  cols?: number
+  dirname?: string
+  disabled?: boolean
+  form?: string
+  maxlength?: number
+  minlength?: number
+  name?: string
+  placeholder?: string
+  readonly?: boolean
+  required?: boolean
+  rows?: number
+  value?: string | string[] | number
+  wrap?: string
+}
+
+interface TdHTMLAttributes extends HTMLAttributes {
+  colspan?: number
+  headers?: string
+  rowspan?: number
+}
+
+interface ThHTMLAttributes extends HTMLAttributes {
+  colspan?: number
+  headers?: string
+  rowspan?: number
+  scope?: string
+}
+
+interface TimeHTMLAttributes extends HTMLAttributes {
+  datetime?: string
+}
+
+interface TrackHTMLAttributes extends HTMLAttributes {
+  default?: boolean
+  kind?: string
+  label?: string
+  src?: string
+  srclang?: string
+}
+
+interface VideoHTMLAttributes extends MediaHTMLAttributes {
+  height?: number | string
+  playsinline?: boolean
+  poster?: string
+  width?: number | string
+}
+
+interface AllHTMLAttributes extends HTMLAttributes {
+  accept?: string
+  acceptcharset?: string
+  action?: boolean
+  allowfullscreen?: boolean
+  allowtransparency?: boolean
+  alt?: string
+  async?: boolean
+  autocomplete?: string
+  autofocus?: boolean
+  autoplay?: boolean
+  capture?: boolean // https://www.w3.org/tr/html-media-capture/#the-capture-attribute
+  cellpadding?: number | string
+  cellspacing?: number | string
+  challenge?: string
+  charset?: string
+  checked?: boolean
+  cite?: string
+  classid?: string
+  cols?: number
+  colspan?: number
+  content?: string
+  controls?: boolean
+  coord?: string
+  crossorigin?: string
+  data?: string
+  datetime?: string
+  default?: boolean
+  defer?: boolean
+  dirname?: string
+  disabled?: boolean
+  download?: any
+  enctype?: string
+  form?: string
+  formaction?: string
+  formenctype?: string
+  formmethod?: string
+  formnovalidate?: boolean
+  formtarget?: string
+  frameborder?: number | string
+  headers?: string
+  height?: number | string
+  high?: number
+  href?: string
+  hreflang?: string
+  htmlfor?: string
+  httpequiv?: string
+  integrity?: string
+  keyparams?: string
+  keytype?: string
+  kind?: string
+  label?: string
+  list?: string
+  loop?: boolean
+  low?: number
+  manifest?: string
+  marginheight?: number
+  marginwidth?: number
+  max?: number | string
+  maxlength?: number
+  media?: string
+  mediagroup?: string
+  method?: string
+  min?: number | string
+  minlength?: number
+  multiple?: boolean
+  muted?: boolean
+  name?: string
+  nonce?: string
+  novalidate?: boolean
+  open?: boolean
+  optimum?: number
+  pattern?: string
+  placeholder?: string
+  playsinline?: boolean
+  poster?: string
+  preload?: string
+  readonly?: boolean
+  rel?: string
+  required?: boolean
+  reversed?: boolean
+  rows?: number
+  rowspan?: number
+  sandbox?: string
+  scope?: string
+  scoped?: boolean
+  scrolling?: string
+  seamless?: boolean
+  selected?: boolean
+  shape?: string
+  size?: number
+  sizes?: string
+  span?: number
+  src?: string
+  srcdoc?: string
+  srclang?: string
+  srcset?: string
+  start?: number
+  step?: number | string
+  summary?: string
+  target?: string
+  type?: string
+  usemap?: string
+  value?: string | string[] | number
+  width?: number | string
+  wmode?: string
+  wrap?: string
+}
+
+interface IntrinsicElementAttributes {
+  a: AnchorHTMLAttributes
+  abbr: HTMLAttributes
+  address: HTMLAttributes
+  area: AreaHTMLAttributes
+  article: HTMLAttributes
+  aside: HTMLAttributes
+  audio: AudioHTMLAttributes
+  b: HTMLAttributes
+  base: BaseHTMLAttributes
+  bdi: HTMLAttributes
+  bdo: HTMLAttributes
+  big: HTMLAttributes
+  blockquote: BlockquoteHTMLAttributes
+  body: HTMLAttributes
+  br: HTMLAttributes
+  button: ButtonHTMLAttributes
+  canvas: CanvasHTMLAttributes
+  caption: HTMLAttributes
+  cite: HTMLAttributes
+  code: HTMLAttributes
+  col: ColHTMLAttributes
+  colgroup: ColgroupHTMLAttributes
+  data: HTMLAttributes
+  datalist: HTMLAttributes
+  dd: HTMLAttributes
+  del: DelHTMLAttributes
+  details: DetailsHTMLAttributes
+  dfn: HTMLAttributes
+  dialog: HTMLAttributes
+  div: HTMLAttributes
+  dl: HTMLAttributes
+  dt: HTMLAttributes
+  em: HTMLAttributes
+  embed: EmbedHTMLAttributes
+  fieldset: FieldsetHTMLAttributes
+  figcaption: HTMLAttributes
+  figure: HTMLAttributes
+  footer: HTMLAttributes
+  form: FormHTMLAttributes
+  h1: HTMLAttributes
+  h2: HTMLAttributes
+  h3: HTMLAttributes
+  h4: HTMLAttributes
+  h5: HTMLAttributes
+  h6: HTMLAttributes
+  head: HTMLAttributes
+  header: HTMLAttributes
+  hgroup: HTMLAttributes
+  hr: HTMLAttributes
+  html: HtmlHTMLAttributes
+  i: HTMLAttributes
+  iframe: IframeHTMLAttributes
+  img: ImgHTMLAttributes
+  input: InputHTMLAttributes
+  ins: InsHTMLAttributes
+  kbd: HTMLAttributes
+  keygen: KeygenHTMLAttributes
+  label: LabelHTMLAttributes
+  legend: HTMLAttributes
+  li: LiHTMLAttributes
+  link: LinkHTMLAttributes
+  main: HTMLAttributes
+  map: MapHTMLAttributes
+  mark: HTMLAttributes
+  menu: MenuHTMLAttributes
+  menuitem: HTMLAttributes
+  meta: MetaHTMLAttributes
+  meter: MeterHTMLAttributes
+  nav: HTMLAttributes
+  noscript: HTMLAttributes
+  object: ObjectHTMLAttributes
+  ol: OlHTMLAttributes
+  optgroup: OptgroupHTMLAttributes
+  option: OptionHTMLAttributes
+  output: OutputHTMLAttributes
+  p: HTMLAttributes
+  param: ParamHTMLAttributes
+  picture: HTMLAttributes
+  pre: HTMLAttributes
+  progress: ProgressHTMLAttributes
+  q: QuoteHTMLAttributes
+  rp: HTMLAttributes
+  rt: HTMLAttributes
+  ruby: HTMLAttributes
+  s: HTMLAttributes
+  samp: HTMLAttributes
+  script: ScriptHTMLAttributes
+  section: HTMLAttributes
+  select: SelectHTMLAttributes
+  small: HTMLAttributes
+  source: SourceHTMLAttributes
+  span: HTMLAttributes
+  strong: HTMLAttributes
+  style: StyleHTMLAttributes
+  sub: HTMLAttributes
+  summary: HTMLAttributes
+  sup: HTMLAttributes
+  table: TableHTMLAttributes
+  tbody: HTMLAttributes
+  td: TdHTMLAttributes
+  textarea: TextareaHTMLAttributes
+  tfoot: HTMLAttributes
+  th: ThHTMLAttributes
+  thead: HTMLAttributes
+  time: TimeHTMLAttributes
+  title: HTMLAttributes
+  tr: HTMLAttributes
+  track: TrackHTMLAttributes
+  u: HTMLAttributes
+  ul: HTMLAttributes
+  var: HTMLAttributes
+  video: VideoHTMLAttributes
+  wbr: HTMLAttributes
+}
+
+interface Events {
+  // clipboard events
+  onCopy: ClipboardEvent
+  onCut: ClipboardEvent
+  onPaste: ClipboardEvent
+
+  // composition events
+  onCompositionend: CompositionEvent
+  onCompositionstart: CompositionEvent
+  onCompositionupdate: CompositionEvent
+
+  // drag drop events
+  onDrag: DragEvent
+  onDragend: DragEvent
+  onDragenter: DragEvent
+  onDragexit: DragEvent
+  onDragleave: DragEvent
+  onDragover: DragEvent
+  onDragstart: DragEvent
+  onDrop: DragEvent
+
+  // focus events
+  onFocus: FocusEvent
+  onBlur: FocusEvent
+
+  // form events
+  onChange: Event
+  onInput: Event
+  onReset: Event
+  onSubmit: Event
+  onInvalid: Event
+
+  // image events
+  onLoad: Event
+  onError: Event
+
+  // keyboard events
+  onKeydown: KeyboardEvent
+  onKeypress: KeyboardEvent
+  onKeyup: KeyboardEvent
+
+  // mouse events
+  onClick: MouseEvent
+  onContextmenu: MouseEvent
+  onDblclick: MouseEvent
+  onMousedown: MouseEvent
+  onMouseenter: MouseEvent
+  onMouseleave: MouseEvent
+  onMousemove: MouseEvent
+  onMouseout: MouseEvent
+  onMouseover: MouseEvent
+  onMouseup: MouseEvent
+
+  // media events
+  onAbort: Event
+  onCanplay: Event
+  onCanplaythrough: Event
+  onDurationchange: Event
+  onEmptied: Event
+  onEncrypted: Event
+  onEnded: Event
+  onLoadeddata: Event
+  onLoadedmetadata: Event
+  onLoadstart: Event
+  onPause: Event
+  onPlay: Event
+  onPlaying: Event
+  onProgress: Event
+  onRatechange: Event
+  onSeeked: Event
+  onSeeking: Event
+  onStalled: Event
+  onSuspend: Event
+  onTimeupdate: Event
+  onVolumechange: Event
+  onWaiting: Event
+
+  // selection events
+  onSelect: Event
+
+  // UI events
+  onScroll: UIEvent
+
+  // touch events
+  onTouchcancel: TouchEvent
+  onTouchend: TouchEvent
+  onTouchmove: TouchEvent
+  onTouchstart: TouchEvent
+
+  // wheel events
+  onWheel: WheelEvent
+
+  // animation events
+  onAnimationstart: AnimationEvent
+  onAnimationend: AnimationEvent
+  onAnimationiteration: AnimationEvent
+
+  // transition events
+  onTransitionend: TransitionEvent
+  onTransitionstart: TransitionEvent
+}
+
+type StringKeyOf<T> = Extract<keyof T, string>
+
+type EventHandlers<E> = {
+  [K in StringKeyOf<E>]?: E[K] extends Function ? E[K] : (payload: E[K]) => void
+}
+
+type ElementAttrs<T> = T & EventHandlers<Events>
+
+type NativeElements = {
+  [K in StringKeyOf<IntrinsicElementAttributes>]: ElementAttrs<
+    IntrinsicElementAttributes[K]
+  >
+}
+
+declare namespace JSX {
+  interface Element {}
+  interface ElementClass {
+    render(props: any, slots: any, attrs: any): any
+  }
+  interface ElementAttributesProperty {
+    $props: {}
+  }
+  interface IntrinsicElements extends NativeElements {
+    // allow arbitrary elements
+    [name: string]: any
+  }
+}

packages/runtime-dom/package.json

@@ -0,0 +1,30 @@
+{
+  "name": "@vue/runtime-dom",
+  "version": "3.0.0-alpha.1",
+  "description": "@vue/runtime-dom",
+  "main": "index.js",
+  "module": "dist/runtime-dom.esm-bundler.js",
+  "types": "dist/index.d.ts",
+  "unpkg": "dist/runtime-dom.global.js",
+  "sideEffects": false,
+  "buildOptions": {
+    "name": "VueDOMRenderer",
+    "formats": ["esm", "cjs", "global", "esm-browser"]
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/vuejs/vue.git"
+  },
+  "keywords": [
+    "vue"
+  ],
+  "author": "Evan You",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/vuejs/vue/issues"
+  },
+  "homepage": "https://github.com/vuejs/vue/tree/dev/packages/runtime-dom#readme",
+  "dependencies": {
+    "@vue/runtime-core": "3.0.0-alpha.1"
+  }
+}

packages/runtime-dom/src/index.ts

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

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

@@ -0,0 +1,31 @@
+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) : ''
+}
+
+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)
+    }
+  }
+}

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

@@ -0,0 +1,11 @@
+// compiler should normlaize class + :class bindings on the same element
+// into a single binding ['staticClass', dynamic]
+
+export function patchClass(el: Element, value: string, isSVG: boolean) {
+  // directly setting className should be faster than setAttribute in theory
+  if (isSVG) {
+    el.setAttribute('class', value)
+  } else {
+    el.className = value
+  }
+}

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) && !__JSDOM__) {
+    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/runtime-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,28 @@
+import { isString } from '@vue/shared'
+
+// 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) {
+  const { style } = el
+  if (!next) {
+    el.removeAttribute('style')
+  } else if (isString(next)) {
+    style.cssText = next
+  } else {
+    for (const key in next) {
+      let value = next[key]
+      if (typeof value === 'number' && !nonNumericRE.test(key)) {
+        value = value + 'px'
+      }
+      style[key] = value
+    }
+    if (prev && !isString(prev)) {
+      for (const key in prev) {
+        if (!next[key]) {
+          style[key] = ''
+        }
+      }
+    }
+  }
+}

packages/runtime-dom/src/nodeOps.ts

@@ -0,0 +1,35 @@
+const svgNS = 'http://www.w3.org/2000/svg'
+
+export const 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/patchData.ts

@@ -0,0 +1,47 @@
+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'
+
+// value, checked, selected & muted
+// plus anything with upperCase letter in it are always patched as properties
+const domPropsRE = /\W|^(?:value|checked|selected|muted)$/
+
+export function patchData(
+  el: Element,
+  key: string,
+  prevValue: any,
+  nextValue: any,
+  prevVNode: VNode,
+  nextVNode: VNode,
+  isSVG: boolean,
+  unmountChildren: any
+) {
+  switch (key) {
+    // special
+    case 'class':
+      patchClass(el, nextValue, isSVG)
+      break
+    case 'style':
+      patchStyle(el, prevValue, nextValue, nextVNode.data)
+      break
+    default:
+      if (isOn(key)) {
+        patchEvent(el, key.slice(2).toLowerCase(), prevValue, nextValue)
+      } else if (domPropsRE.test(key)) {
+        patchDOMProp(
+          el,
+          key[8].toLowerCase() + key.slice(9),
+          nextValue,
+          prevVNode,
+          unmountChildren
+        )
+      } else {
+        patchAttr(el, key, nextValue, isSVG)
+      }
+      break
+  }
+}

packages/runtime-dom/src/teardownVNode.ts

@@ -0,0 +1,14 @@
+import { VNode } from '@vue/runtime-core'
+import { handleDelegatedEvent } from './modules/events'
+import { isOn } from '@vue/shared'
+
+export function teardownVNode(vnode: VNode) {
+  const { el, data } = vnode
+  if (data != null) {
+    for (const key in data) {
+      if (isOn(key)) {
+        handleDelegatedEvent(el, key.slice(2).toLowerCase(), null)
+      }
+    }
+  }
+}