types: rename
This commit is contained in:
		
							parent
							
								
									d22b71b27e
								
							
						
					
					
						commit
						e698c8f492
					
				@ -17,7 +17,7 @@ export interface ComponentClass extends Flatten<typeof InternalComponent> {
 | 
			
		||||
  new <P extends object = {}, D extends object = {}>(): MergedComponent<P, D>
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
export type MergedComponent<P, D> = D & P & MountedComponent<P, D>
 | 
			
		||||
export type MergedComponent<P, D> = D & P & ComponentInstance<P, D>
 | 
			
		||||
 | 
			
		||||
export interface FunctionalComponent<P = {}> {
 | 
			
		||||
  (props: Readonly<P>, slots: Slots, attrs: Data): any
 | 
			
		||||
@ -31,15 +31,15 @@ export type ComponentType = ComponentClass | FunctionalComponent
 | 
			
		||||
 | 
			
		||||
// this interface is merged with the class type
 | 
			
		||||
// to represent a mounted component
 | 
			
		||||
export interface MountedComponent<P = {}, D = {}> extends InternalComponent {
 | 
			
		||||
export interface ComponentInstance<P = {}, D = {}> extends InternalComponent {
 | 
			
		||||
  $vnode: MountedVNode
 | 
			
		||||
  $data: D
 | 
			
		||||
  $props: Readonly<P>
 | 
			
		||||
  $attrs: Data
 | 
			
		||||
  $computed: Data
 | 
			
		||||
  $slots: Slots
 | 
			
		||||
  $root: MountedComponent
 | 
			
		||||
  $children: MountedComponent[]
 | 
			
		||||
  $root: ComponentInstance
 | 
			
		||||
  $children: ComponentInstance[]
 | 
			
		||||
  $options: ComponentOptions<P, D>
 | 
			
		||||
 | 
			
		||||
  data?(): Partial<D>
 | 
			
		||||
@ -58,7 +58,7 @@ export interface MountedComponent<P = {}, D = {}> extends InternalComponent {
 | 
			
		||||
  errorCaptured?(): (
 | 
			
		||||
    err: Error,
 | 
			
		||||
    type: ErrorTypes,
 | 
			
		||||
    target: MountedComponent
 | 
			
		||||
    target: ComponentInstance
 | 
			
		||||
  ) => boolean | void
 | 
			
		||||
  activated?(): void
 | 
			
		||||
  deactivated?(): void
 | 
			
		||||
@ -68,7 +68,7 @@ export interface MountedComponent<P = {}, D = {}> extends InternalComponent {
 | 
			
		||||
  $forceUpdate: () => void
 | 
			
		||||
  $nextTick: (fn: () => void) => Promise<any>
 | 
			
		||||
 | 
			
		||||
  _self: MountedComponent<D, P> // on proxies only
 | 
			
		||||
  _self: ComponentInstance<D, P> // on proxies only
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
class InternalComponent {
 | 
			
		||||
@ -85,11 +85,11 @@ class InternalComponent {
 | 
			
		||||
  public $attrs: Data | null = null
 | 
			
		||||
  public $computed: Data | null = null
 | 
			
		||||
  public $slots: Slots | null = null
 | 
			
		||||
  public $root: MountedComponent | null = null
 | 
			
		||||
  public $parent: MountedComponent | null = null
 | 
			
		||||
  public $children: MountedComponent[] = []
 | 
			
		||||
  public $root: ComponentInstance | null = null
 | 
			
		||||
  public $parent: ComponentInstance | null = null
 | 
			
		||||
  public $children: ComponentInstance[] = []
 | 
			
		||||
  public $options: any
 | 
			
		||||
  public $refs: Record<string, MountedComponent | RenderNode> = {}
 | 
			
		||||
  public $refs: Record<string, ComponentInstance | RenderNode> = {}
 | 
			
		||||
  public $proxy: any = null
 | 
			
		||||
  public $forceUpdate: (() => void) | null = null
 | 
			
		||||
 | 
			
		||||
@ -118,10 +118,10 @@ class InternalComponent {
 | 
			
		||||
  }
 | 
			
		||||
 | 
			
		||||
  $watch(
 | 
			
		||||
    keyOrFn: string | (() => any),
 | 
			
		||||
    cb: (newValue: any, oldValue: any) => void,
 | 
			
		||||
    keyOrFn: string | ((this: this) => any),
 | 
			
		||||
    cb: (this: this, newValue: any, oldValue: any) => void,
 | 
			
		||||
    options?: WatchOptions
 | 
			
		||||
  ) {
 | 
			
		||||
  ): () => void {
 | 
			
		||||
    return setupWatcher(this as any, keyOrFn, cb, options)
 | 
			
		||||
  }
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
@ -1,6 +1,6 @@
 | 
			
		||||
import { EMPTY_OBJ } from './utils'
 | 
			
		||||
import { computed, stop, ComputedGetter } from '@vue/observer'
 | 
			
		||||
import { ComponentClass, MountedComponent } from './component'
 | 
			
		||||
import { ComponentClass, ComponentInstance } from './component'
 | 
			
		||||
import { ComponentComputedOptions } from './componentOptions'
 | 
			
		||||
 | 
			
		||||
const extractionCache: WeakMap<
 | 
			
		||||
@ -30,7 +30,7 @@ export function getComputedOptions(
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
export function initializeComputed(
 | 
			
		||||
  instance: MountedComponent,
 | 
			
		||||
  instance: ComponentInstance,
 | 
			
		||||
  computedOptions: ComponentComputedOptions | undefined
 | 
			
		||||
) {
 | 
			
		||||
  if (!computedOptions) {
 | 
			
		||||
@ -58,7 +58,7 @@ export function initializeComputed(
 | 
			
		||||
  )
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
export function teardownComputed(instance: MountedComponent) {
 | 
			
		||||
export function teardownComputed(instance: ComponentInstance) {
 | 
			
		||||
  const handles = instance._computedGetters
 | 
			
		||||
  if (handles !== null) {
 | 
			
		||||
    for (const key in handles) {
 | 
			
		||||
 | 
			
		||||
@ -1,4 +1,4 @@
 | 
			
		||||
import { MergedComponent, MountedComponent } from './component'
 | 
			
		||||
import { MergedComponent, ComponentInstance } from './component'
 | 
			
		||||
import { Slots } from './vdom'
 | 
			
		||||
 | 
			
		||||
export type Data = Record<string, any>
 | 
			
		||||
@ -38,15 +38,15 @@ export interface PropOptions<T = any> {
 | 
			
		||||
  validator?(value: T): boolean
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
export interface ComponentComputedOptions<This = MountedComponent> {
 | 
			
		||||
export interface ComponentComputedOptions<This = ComponentInstance> {
 | 
			
		||||
  [key: string]: (this: This, c: any) => any
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
export interface ComponentWatchOptions<This = MountedComponent> {
 | 
			
		||||
export interface ComponentWatchOptions<This = ComponentInstance> {
 | 
			
		||||
  [key: string]: ComponentWatchOption<This>
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
export type ComponentWatchOption<This = MountedComponent> =
 | 
			
		||||
export type ComponentWatchOption<This = ComponentInstance> =
 | 
			
		||||
  | WatchHandler<This>
 | 
			
		||||
  | WatchHandler<This>[]
 | 
			
		||||
  | WatchOptionsWithHandler<This>
 | 
			
		||||
 | 
			
		||||
@ -1,5 +1,5 @@
 | 
			
		||||
import { immutable, unwrap, lock, unlock } from '@vue/observer'
 | 
			
		||||
import { MountedComponent } from './component'
 | 
			
		||||
import { ComponentInstance } from './component'
 | 
			
		||||
import {
 | 
			
		||||
  Data,
 | 
			
		||||
  ComponentPropsOptions,
 | 
			
		||||
@ -16,13 +16,16 @@ import {
 | 
			
		||||
  capitalize
 | 
			
		||||
} from './utils'
 | 
			
		||||
 | 
			
		||||
export function initializeProps(instance: MountedComponent, data: Data | null) {
 | 
			
		||||
export function initializeProps(
 | 
			
		||||
  instance: ComponentInstance,
 | 
			
		||||
  data: Data | null
 | 
			
		||||
) {
 | 
			
		||||
  const { props, attrs } = resolveProps(data, instance.$options.props)
 | 
			
		||||
  instance.$props = immutable(props || {})
 | 
			
		||||
  instance.$attrs = immutable(attrs || {})
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
export function updateProps(instance: MountedComponent, nextData: Data) {
 | 
			
		||||
export function updateProps(instance: ComponentInstance, nextData: Data) {
 | 
			
		||||
  // instance.$props and instance.$attrs are observables that should not be
 | 
			
		||||
  // replaced. Instead, we mutate them to match latest props, which will trigger
 | 
			
		||||
  // updates if any value that's been used in child component has changed.
 | 
			
		||||
 | 
			
		||||
@ -1,4 +1,4 @@
 | 
			
		||||
import { MountedComponent } from './component'
 | 
			
		||||
import { ComponentInstance } from './component'
 | 
			
		||||
 | 
			
		||||
const bindCache = new WeakMap()
 | 
			
		||||
 | 
			
		||||
@ -15,7 +15,7 @@ function getBoundMethod(fn: Function, target: any, receiver: any): Function {
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
const renderProxyHandlers = {
 | 
			
		||||
  get(target: MountedComponent<any, any>, key: string, receiver: any) {
 | 
			
		||||
  get(target: ComponentInstance<any, any>, key: string, receiver: any) {
 | 
			
		||||
    if (key === '_self') {
 | 
			
		||||
      return target
 | 
			
		||||
    } else if (
 | 
			
		||||
@ -50,7 +50,7 @@ const renderProxyHandlers = {
 | 
			
		||||
    }
 | 
			
		||||
  },
 | 
			
		||||
  set(
 | 
			
		||||
    target: MountedComponent<any, any>,
 | 
			
		||||
    target: ComponentInstance<any, any>,
 | 
			
		||||
    key: string,
 | 
			
		||||
    value: any,
 | 
			
		||||
    receiver: any
 | 
			
		||||
@ -77,6 +77,6 @@ const renderProxyHandlers = {
 | 
			
		||||
  }
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
export function createRenderProxy(instance: any): MountedComponent {
 | 
			
		||||
  return new Proxy(instance, renderProxyHandlers) as MountedComponent
 | 
			
		||||
export function createRenderProxy(instance: any): ComponentInstance {
 | 
			
		||||
  return new Proxy(instance, renderProxyHandlers) as ComponentInstance
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
@ -1,8 +1,8 @@
 | 
			
		||||
import { EMPTY_OBJ } from './utils'
 | 
			
		||||
import { MountedComponent } from './component'
 | 
			
		||||
import { ComponentInstance } from './component'
 | 
			
		||||
import { observable } from '@vue/observer'
 | 
			
		||||
 | 
			
		||||
export function initializeState(instance: MountedComponent) {
 | 
			
		||||
export function initializeState(instance: ComponentInstance) {
 | 
			
		||||
  if (instance.data) {
 | 
			
		||||
    instance._rawData = instance.data()
 | 
			
		||||
    instance.$data = observable(instance._rawData)
 | 
			
		||||
 | 
			
		||||
@ -2,7 +2,7 @@ import { VNodeFlags } from './flags'
 | 
			
		||||
import { EMPTY_OBJ } from './utils'
 | 
			
		||||
import { h } from './h'
 | 
			
		||||
import { VNode, MountedVNode, createFragment } from './vdom'
 | 
			
		||||
import { Component, MountedComponent, ComponentClass } from './component'
 | 
			
		||||
import { Component, ComponentInstance, ComponentClass } from './component'
 | 
			
		||||
import { createTextVNode, cloneVNode } from './vdom'
 | 
			
		||||
import { initializeState } from './componentState'
 | 
			
		||||
import { initializeProps } from './componentProps'
 | 
			
		||||
@ -12,16 +12,16 @@ import {
 | 
			
		||||
  teardownComputed
 | 
			
		||||
} from './componentComputed'
 | 
			
		||||
import { initializeWatch, teardownWatch } from './componentWatch'
 | 
			
		||||
import { Data, ComponentOptions } from './componentOptions'
 | 
			
		||||
import { ComponentOptions } from './componentOptions'
 | 
			
		||||
import { createRenderProxy } from './componentProxy'
 | 
			
		||||
import { handleError, ErrorTypes } from './errorHandling'
 | 
			
		||||
 | 
			
		||||
export function createComponentInstance(
 | 
			
		||||
  vnode: VNode,
 | 
			
		||||
  Component: ComponentClass,
 | 
			
		||||
  parentComponent: MountedComponent | null
 | 
			
		||||
): MountedComponent {
 | 
			
		||||
  const instance = (vnode.children = new Component()) as MountedComponent
 | 
			
		||||
  parentComponent: ComponentInstance | null
 | 
			
		||||
): ComponentInstance {
 | 
			
		||||
  const instance = (vnode.children = new Component()) as ComponentInstance
 | 
			
		||||
  instance.$parentVNode = vnode as MountedVNode
 | 
			
		||||
 | 
			
		||||
  // renderProxy
 | 
			
		||||
@ -50,10 +50,10 @@ export function createComponentInstance(
 | 
			
		||||
    instance.created.call(proxy)
 | 
			
		||||
  }
 | 
			
		||||
 | 
			
		||||
  return instance as MountedComponent
 | 
			
		||||
  return instance as ComponentInstance
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
export function renderInstanceRoot(instance: MountedComponent): VNode {
 | 
			
		||||
export function renderInstanceRoot(instance: ComponentInstance): VNode {
 | 
			
		||||
  let vnode
 | 
			
		||||
  try {
 | 
			
		||||
    vnode = instance.render.call(instance.$proxy, h, {
 | 
			
		||||
@ -79,7 +79,7 @@ export function renderInstanceRoot(instance: MountedComponent): VNode {
 | 
			
		||||
  )
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
export function teardownComponentInstance(instance: MountedComponent) {
 | 
			
		||||
export function teardownComponentInstance(instance: ComponentInstance) {
 | 
			
		||||
  if (instance._unmounted) {
 | 
			
		||||
    return
 | 
			
		||||
  }
 | 
			
		||||
@ -97,7 +97,7 @@ export function teardownComponentInstance(instance: MountedComponent) {
 | 
			
		||||
export function normalizeComponentRoot(
 | 
			
		||||
  vnode: any,
 | 
			
		||||
  componentVNode: VNode | null,
 | 
			
		||||
  attrs: Data | void,
 | 
			
		||||
  attrs: Record<string, any> | void,
 | 
			
		||||
  inheritAttrs: boolean | void
 | 
			
		||||
): VNode {
 | 
			
		||||
  if (vnode == null) {
 | 
			
		||||
@ -141,8 +141,8 @@ export function normalizeComponentRoot(
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
export function shouldUpdateFunctionalComponent(
 | 
			
		||||
  prevProps: Data | null,
 | 
			
		||||
  nextProps: Data | null
 | 
			
		||||
  prevProps: Record<string, any> | null,
 | 
			
		||||
  nextProps: Record<string, any> | null
 | 
			
		||||
): boolean {
 | 
			
		||||
  if (prevProps === nextProps) {
 | 
			
		||||
    return false
 | 
			
		||||
@ -170,25 +170,31 @@ export function shouldUpdateFunctionalComponent(
 | 
			
		||||
export function createComponentClassFromOptions(
 | 
			
		||||
  options: ComponentOptions
 | 
			
		||||
): ComponentClass {
 | 
			
		||||
  class ObjectComponent extends Component {
 | 
			
		||||
  class AnonymousComponent extends Component {
 | 
			
		||||
    constructor() {
 | 
			
		||||
      super()
 | 
			
		||||
      this.$options = options
 | 
			
		||||
    }
 | 
			
		||||
  }
 | 
			
		||||
  const proto = AnonymousComponent.prototype as any
 | 
			
		||||
  for (const key in options) {
 | 
			
		||||
    const value = options[key]
 | 
			
		||||
    // name -> displayName
 | 
			
		||||
    if (__COMPAT__ && key === 'name') {
 | 
			
		||||
      options.displayName = options.name
 | 
			
		||||
    }
 | 
			
		||||
    if (typeof value === 'function') {
 | 
			
		||||
      ;(ObjectComponent.prototype as any)[key] =
 | 
			
		||||
        key === 'render'
 | 
			
		||||
          ? function() {
 | 
			
		||||
              return value.call(this, h)
 | 
			
		||||
            }
 | 
			
		||||
          : value
 | 
			
		||||
      if (__COMPAT__ && key === 'render') {
 | 
			
		||||
        proto[key] = function() {
 | 
			
		||||
          return value.call(this, h)
 | 
			
		||||
        }
 | 
			
		||||
      } else {
 | 
			
		||||
        proto[key] = value
 | 
			
		||||
      }
 | 
			
		||||
    }
 | 
			
		||||
    if (key === 'computed') {
 | 
			
		||||
      const isGet = typeof value === 'function'
 | 
			
		||||
      Object.defineProperty(ObjectComponent.prototype, key, {
 | 
			
		||||
      Object.defineProperty(proto, key, {
 | 
			
		||||
        configurable: true,
 | 
			
		||||
        get: isGet ? value : value.get,
 | 
			
		||||
        set: isGet ? undefined : value.set
 | 
			
		||||
@ -196,9 +202,15 @@ export function createComponentClassFromOptions(
 | 
			
		||||
    }
 | 
			
		||||
    if (key === 'methods') {
 | 
			
		||||
      for (const method in value) {
 | 
			
		||||
        ;(ObjectComponent.prototype as any)[method] = value[method]
 | 
			
		||||
        if (__DEV__ && proto.hasOwnProperty(method)) {
 | 
			
		||||
          console.warn(
 | 
			
		||||
            `Object syntax contains method name that conflicts with ` +
 | 
			
		||||
              `lifecycle hook: "${method}"`
 | 
			
		||||
          )
 | 
			
		||||
        }
 | 
			
		||||
        proto[method] = value[method]
 | 
			
		||||
      }
 | 
			
		||||
    }
 | 
			
		||||
  }
 | 
			
		||||
  return ObjectComponent as ComponentClass
 | 
			
		||||
  return AnonymousComponent as ComponentClass
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
@ -1,12 +1,12 @@
 | 
			
		||||
import { EMPTY_OBJ, NOOP } from './utils'
 | 
			
		||||
import { MountedComponent } from './component'
 | 
			
		||||
import { ComponentInstance } from './component'
 | 
			
		||||
import { ComponentWatchOptions, WatchOptions } from './componentOptions'
 | 
			
		||||
import { autorun, stop } from '@vue/observer'
 | 
			
		||||
import { queueJob } from '@vue/scheduler'
 | 
			
		||||
import { handleError, ErrorTypes } from './errorHandling'
 | 
			
		||||
 | 
			
		||||
export function initializeWatch(
 | 
			
		||||
  instance: MountedComponent,
 | 
			
		||||
  instance: ComponentInstance,
 | 
			
		||||
  options: ComponentWatchOptions | undefined
 | 
			
		||||
) {
 | 
			
		||||
  if (options !== void 0) {
 | 
			
		||||
@ -26,7 +26,7 @@ export function initializeWatch(
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
export function setupWatcher(
 | 
			
		||||
  instance: MountedComponent,
 | 
			
		||||
  instance: ComponentInstance,
 | 
			
		||||
  keyOrFn: string | Function,
 | 
			
		||||
  cb: (newValue: any, oldValue: any) => void,
 | 
			
		||||
  options: WatchOptions = EMPTY_OBJ as WatchOptions
 | 
			
		||||
@ -87,7 +87,7 @@ export function setupWatcher(
 | 
			
		||||
  }
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
export function teardownWatch(instance: MountedComponent) {
 | 
			
		||||
export function teardownWatch(instance: ComponentInstance) {
 | 
			
		||||
  if (instance._watchHandles !== null) {
 | 
			
		||||
    instance._watchHandles.forEach(stop)
 | 
			
		||||
  }
 | 
			
		||||
 | 
			
		||||
@ -12,7 +12,7 @@ import {
 | 
			
		||||
  VNodeChildren
 | 
			
		||||
} from './vdom'
 | 
			
		||||
import {
 | 
			
		||||
  MountedComponent,
 | 
			
		||||
  ComponentInstance,
 | 
			
		||||
  FunctionalComponent,
 | 
			
		||||
  ComponentClass
 | 
			
		||||
} from './component'
 | 
			
		||||
@ -111,7 +111,7 @@ export function createRenderer(options: RendererOptions) {
 | 
			
		||||
  function mount(
 | 
			
		||||
    vnode: VNode,
 | 
			
		||||
    container: RenderNode | null,
 | 
			
		||||
    parentComponent: MountedComponent | null,
 | 
			
		||||
    parentComponent: ComponentInstance | null,
 | 
			
		||||
    isSVG: boolean,
 | 
			
		||||
    endNode: RenderNode | null
 | 
			
		||||
  ) {
 | 
			
		||||
@ -140,7 +140,7 @@ export function createRenderer(options: RendererOptions) {
 | 
			
		||||
  function mountArrayChildren(
 | 
			
		||||
    children: VNode[],
 | 
			
		||||
    container: RenderNode | null,
 | 
			
		||||
    parentComponent: MountedComponent | null,
 | 
			
		||||
    parentComponent: ComponentInstance | null,
 | 
			
		||||
    isSVG: boolean,
 | 
			
		||||
    endNode: RenderNode | null
 | 
			
		||||
  ) {
 | 
			
		||||
@ -156,7 +156,7 @@ export function createRenderer(options: RendererOptions) {
 | 
			
		||||
  function mountElement(
 | 
			
		||||
    vnode: VNode,
 | 
			
		||||
    container: RenderNode | null,
 | 
			
		||||
    parentComponent: MountedComponent | null,
 | 
			
		||||
    parentComponent: ComponentInstance | null,
 | 
			
		||||
    isSVG: boolean,
 | 
			
		||||
    endNode: RenderNode | null
 | 
			
		||||
  ) {
 | 
			
		||||
@ -198,7 +198,7 @@ export function createRenderer(options: RendererOptions) {
 | 
			
		||||
    }
 | 
			
		||||
  }
 | 
			
		||||
 | 
			
		||||
  function mountRef(ref: Ref, el: RenderNode | MountedComponent) {
 | 
			
		||||
  function mountRef(ref: Ref, el: RenderNode | ComponentInstance) {
 | 
			
		||||
    lifecycleHooks.push(() => {
 | 
			
		||||
      ref(el)
 | 
			
		||||
    })
 | 
			
		||||
@ -207,7 +207,7 @@ export function createRenderer(options: RendererOptions) {
 | 
			
		||||
  function mountStatefulComponent(
 | 
			
		||||
    vnode: VNode,
 | 
			
		||||
    container: RenderNode | null,
 | 
			
		||||
    parentComponent: MountedComponent | null,
 | 
			
		||||
    parentComponent: ComponentInstance | null,
 | 
			
		||||
    isSVG: boolean,
 | 
			
		||||
    endNode: RenderNode | null
 | 
			
		||||
  ) {
 | 
			
		||||
@ -229,7 +229,7 @@ export function createRenderer(options: RendererOptions) {
 | 
			
		||||
  function mountFunctionalComponent(
 | 
			
		||||
    vnode: VNode,
 | 
			
		||||
    container: RenderNode | null,
 | 
			
		||||
    parentComponent: MountedComponent | null,
 | 
			
		||||
    parentComponent: ComponentInstance | null,
 | 
			
		||||
    isSVG: boolean,
 | 
			
		||||
    endNode: RenderNode | null
 | 
			
		||||
  ) {
 | 
			
		||||
@ -260,7 +260,7 @@ export function createRenderer(options: RendererOptions) {
 | 
			
		||||
  function mountFragment(
 | 
			
		||||
    vnode: VNode,
 | 
			
		||||
    container: RenderNode | null,
 | 
			
		||||
    parentComponent: MountedComponent | null,
 | 
			
		||||
    parentComponent: ComponentInstance | null,
 | 
			
		||||
    isSVG: boolean,
 | 
			
		||||
    endNode: RenderNode | null
 | 
			
		||||
  ) {
 | 
			
		||||
@ -290,7 +290,7 @@ export function createRenderer(options: RendererOptions) {
 | 
			
		||||
  function mountPortal(
 | 
			
		||||
    vnode: VNode,
 | 
			
		||||
    container: RenderNode | null,
 | 
			
		||||
    parentComponent: MountedComponent | null
 | 
			
		||||
    parentComponent: ComponentInstance | null
 | 
			
		||||
  ) {
 | 
			
		||||
    const { tag, children, childFlags, ref } = vnode
 | 
			
		||||
    const target = typeof tag === 'string' ? platformQuerySelector(tag) : tag
 | 
			
		||||
@ -354,7 +354,7 @@ export function createRenderer(options: RendererOptions) {
 | 
			
		||||
    prevVNode: MountedVNode,
 | 
			
		||||
    nextVNode: VNode,
 | 
			
		||||
    container: RenderNode,
 | 
			
		||||
    parentComponent: MountedComponent | null,
 | 
			
		||||
    parentComponent: ComponentInstance | null,
 | 
			
		||||
    isSVG: boolean
 | 
			
		||||
  ) {
 | 
			
		||||
    const nextFlags = nextVNode.flags
 | 
			
		||||
@ -379,7 +379,7 @@ export function createRenderer(options: RendererOptions) {
 | 
			
		||||
    prevVNode: MountedVNode,
 | 
			
		||||
    nextVNode: VNode,
 | 
			
		||||
    container: RenderNode,
 | 
			
		||||
    parentComponent: MountedComponent | null,
 | 
			
		||||
    parentComponent: ComponentInstance | null,
 | 
			
		||||
    isSVG: boolean
 | 
			
		||||
  ) {
 | 
			
		||||
    const { flags, tag } = nextVNode
 | 
			
		||||
@ -452,7 +452,7 @@ export function createRenderer(options: RendererOptions) {
 | 
			
		||||
    prevVNode: MountedVNode,
 | 
			
		||||
    nextVNode: VNode,
 | 
			
		||||
    container: RenderNode,
 | 
			
		||||
    parentComponent: MountedComponent | null,
 | 
			
		||||
    parentComponent: ComponentInstance | null,
 | 
			
		||||
    isSVG: boolean
 | 
			
		||||
  ) {
 | 
			
		||||
    const { tag, flags } = nextVNode
 | 
			
		||||
@ -480,7 +480,7 @@ export function createRenderer(options: RendererOptions) {
 | 
			
		||||
    } = nextVNode
 | 
			
		||||
 | 
			
		||||
    const instance = (nextVNode.children =
 | 
			
		||||
      prevVNode.children) as MountedComponent
 | 
			
		||||
      prevVNode.children) as ComponentInstance
 | 
			
		||||
    instance.$slots = nextSlots || EMPTY_OBJ
 | 
			
		||||
    instance.$parentVNode = nextVNode as MountedVNode
 | 
			
		||||
 | 
			
		||||
@ -508,7 +508,7 @@ export function createRenderer(options: RendererOptions) {
 | 
			
		||||
    prevVNode: MountedVNode,
 | 
			
		||||
    nextVNode: VNode,
 | 
			
		||||
    container: RenderNode,
 | 
			
		||||
    parentComponent: MountedComponent | null,
 | 
			
		||||
    parentComponent: ComponentInstance | null,
 | 
			
		||||
    isSVG: boolean
 | 
			
		||||
  ) {
 | 
			
		||||
    // functional component tree is stored on the vnode as `children`
 | 
			
		||||
@ -542,7 +542,7 @@ export function createRenderer(options: RendererOptions) {
 | 
			
		||||
    prevVNode: MountedVNode,
 | 
			
		||||
    nextVNode: VNode,
 | 
			
		||||
    container: RenderNode,
 | 
			
		||||
    parentComponent: MountedComponent | null,
 | 
			
		||||
    parentComponent: ComponentInstance | null,
 | 
			
		||||
    isSVG: boolean
 | 
			
		||||
  ) {
 | 
			
		||||
    // determine the tail node of the previous fragment,
 | 
			
		||||
@ -599,7 +599,7 @@ export function createRenderer(options: RendererOptions) {
 | 
			
		||||
  function patchPortal(
 | 
			
		||||
    prevVNode: MountedVNode,
 | 
			
		||||
    nextVNode: VNode,
 | 
			
		||||
    parentComponent: MountedComponent | null
 | 
			
		||||
    parentComponent: ComponentInstance | null
 | 
			
		||||
  ) {
 | 
			
		||||
    const prevContainer = prevVNode.tag as RenderNode
 | 
			
		||||
    const nextContainer = nextVNode.tag as RenderNode
 | 
			
		||||
@ -635,7 +635,7 @@ export function createRenderer(options: RendererOptions) {
 | 
			
		||||
    prevVNode: MountedVNode,
 | 
			
		||||
    nextVNode: VNode,
 | 
			
		||||
    container: RenderNode,
 | 
			
		||||
    parentComponent: MountedComponent | null,
 | 
			
		||||
    parentComponent: ComponentInstance | null,
 | 
			
		||||
    isSVG: boolean
 | 
			
		||||
  ) {
 | 
			
		||||
    const refNode = platformNextSibling(getVNodeLastEl(prevVNode))
 | 
			
		||||
@ -649,7 +649,7 @@ export function createRenderer(options: RendererOptions) {
 | 
			
		||||
    prevChildren: VNodeChildren,
 | 
			
		||||
    nextChildren: VNodeChildren,
 | 
			
		||||
    container: RenderNode,
 | 
			
		||||
    parentComponent: MountedComponent | null,
 | 
			
		||||
    parentComponent: ComponentInstance | null,
 | 
			
		||||
    isSVG: boolean,
 | 
			
		||||
    endNode: RenderNode | null
 | 
			
		||||
  ) {
 | 
			
		||||
@ -769,7 +769,7 @@ export function createRenderer(options: RendererOptions) {
 | 
			
		||||
    container: RenderNode,
 | 
			
		||||
    prevLength: number,
 | 
			
		||||
    nextLength: number,
 | 
			
		||||
    parentComponent: MountedComponent | null,
 | 
			
		||||
    parentComponent: ComponentInstance | null,
 | 
			
		||||
    isSVG: boolean,
 | 
			
		||||
    endNode: RenderNode | null
 | 
			
		||||
  ) {
 | 
			
		||||
@ -807,7 +807,7 @@ export function createRenderer(options: RendererOptions) {
 | 
			
		||||
    container: RenderNode,
 | 
			
		||||
    prevLength: number,
 | 
			
		||||
    nextLength: number,
 | 
			
		||||
    parentComponent: MountedComponent | null,
 | 
			
		||||
    parentComponent: ComponentInstance | null,
 | 
			
		||||
    isSVG: boolean,
 | 
			
		||||
    endNode: RenderNode | null
 | 
			
		||||
  ) {
 | 
			
		||||
@ -1074,9 +1074,9 @@ export function createRenderer(options: RendererOptions) {
 | 
			
		||||
    } else if (flags & VNodeFlags.COMPONENT) {
 | 
			
		||||
      if (flags & VNodeFlags.COMPONENT_STATEFUL) {
 | 
			
		||||
        if (flags & VNodeFlags.COMPONENT_STATEFUL_SHOULD_KEEP_ALIVE) {
 | 
			
		||||
          deactivateComponentInstance(children as MountedComponent)
 | 
			
		||||
          deactivateComponentInstance(children as ComponentInstance)
 | 
			
		||||
        } else {
 | 
			
		||||
          unmountComponentInstance(children as MountedComponent)
 | 
			
		||||
          unmountComponentInstance(children as ComponentInstance)
 | 
			
		||||
        }
 | 
			
		||||
      } else {
 | 
			
		||||
        unmount(children as MountedVNode)
 | 
			
		||||
@ -1156,14 +1156,14 @@ export function createRenderer(options: RendererOptions) {
 | 
			
		||||
    parentVNode: VNode,
 | 
			
		||||
    Component: ComponentClass,
 | 
			
		||||
    container: RenderNode | null,
 | 
			
		||||
    parentComponent: MountedComponent | null,
 | 
			
		||||
    parentComponent: ComponentInstance | null,
 | 
			
		||||
    isSVG: boolean,
 | 
			
		||||
    endNode: RenderNode | null
 | 
			
		||||
  ): RenderNode {
 | 
			
		||||
    // a vnode may already have an instance if this is a compat call with
 | 
			
		||||
    // new Vue()
 | 
			
		||||
    const instance =
 | 
			
		||||
      (__COMPAT__ && (parentVNode.children as MountedComponent)) ||
 | 
			
		||||
      (__COMPAT__ && (parentVNode.children as ComponentInstance)) ||
 | 
			
		||||
      createComponentInstance(parentVNode, Component, parentComponent)
 | 
			
		||||
 | 
			
		||||
    // inject platform-specific unmount to keep-alive container
 | 
			
		||||
@ -1212,7 +1212,7 @@ export function createRenderer(options: RendererOptions) {
 | 
			
		||||
  }
 | 
			
		||||
 | 
			
		||||
  function mountComponentInstanceCallbacks(
 | 
			
		||||
    instance: MountedComponent,
 | 
			
		||||
    instance: ComponentInstance,
 | 
			
		||||
    ref: Ref | null
 | 
			
		||||
  ) {
 | 
			
		||||
    if (ref) {
 | 
			
		||||
@ -1225,7 +1225,10 @@ export function createRenderer(options: RendererOptions) {
 | 
			
		||||
    }
 | 
			
		||||
  }
 | 
			
		||||
 | 
			
		||||
  function updateComponentInstance(instance: MountedComponent, isSVG: boolean) {
 | 
			
		||||
  function updateComponentInstance(
 | 
			
		||||
    instance: ComponentInstance,
 | 
			
		||||
    isSVG: boolean
 | 
			
		||||
  ) {
 | 
			
		||||
    const prevVNode = instance.$vnode
 | 
			
		||||
 | 
			
		||||
    if (instance.beforeUpdate) {
 | 
			
		||||
@ -1277,7 +1280,7 @@ export function createRenderer(options: RendererOptions) {
 | 
			
		||||
    }
 | 
			
		||||
  }
 | 
			
		||||
 | 
			
		||||
  function unmountComponentInstance(instance: MountedComponent) {
 | 
			
		||||
  function unmountComponentInstance(instance: ComponentInstance) {
 | 
			
		||||
    if (instance._unmounted) {
 | 
			
		||||
      return
 | 
			
		||||
    }
 | 
			
		||||
@ -1298,14 +1301,14 @@ export function createRenderer(options: RendererOptions) {
 | 
			
		||||
  // Keep Alive ----------------------------------------------------------------
 | 
			
		||||
 | 
			
		||||
  function activateComponentInstance(vnode: VNode) {
 | 
			
		||||
    const instance = vnode.children as MountedComponent
 | 
			
		||||
    const instance = vnode.children as ComponentInstance
 | 
			
		||||
    vnode.el = instance.$el
 | 
			
		||||
    lifecycleHooks.push(() => {
 | 
			
		||||
      callActivatedHook(instance, true)
 | 
			
		||||
    })
 | 
			
		||||
  }
 | 
			
		||||
 | 
			
		||||
  function callActivatedHook(instance: MountedComponent, asRoot: boolean) {
 | 
			
		||||
  function callActivatedHook(instance: ComponentInstance, asRoot: boolean) {
 | 
			
		||||
    // 1. check if we are inside an inactive parent tree.
 | 
			
		||||
    if (asRoot) {
 | 
			
		||||
      instance._inactiveRoot = false
 | 
			
		||||
@ -1323,11 +1326,11 @@ export function createRenderer(options: RendererOptions) {
 | 
			
		||||
    }
 | 
			
		||||
  }
 | 
			
		||||
 | 
			
		||||
  function deactivateComponentInstance(instance: MountedComponent) {
 | 
			
		||||
  function deactivateComponentInstance(instance: ComponentInstance) {
 | 
			
		||||
    callDeactivateHook(instance, true)
 | 
			
		||||
  }
 | 
			
		||||
 | 
			
		||||
  function callDeactivateHook(instance: MountedComponent, asRoot: boolean) {
 | 
			
		||||
  function callDeactivateHook(instance: ComponentInstance, asRoot: boolean) {
 | 
			
		||||
    if (asRoot) {
 | 
			
		||||
      instance._inactiveRoot = true
 | 
			
		||||
      if (isInInactiveTree(instance)) return
 | 
			
		||||
@ -1344,7 +1347,7 @@ export function createRenderer(options: RendererOptions) {
 | 
			
		||||
    }
 | 
			
		||||
  }
 | 
			
		||||
 | 
			
		||||
  function isInInactiveTree(instance: MountedComponent): boolean {
 | 
			
		||||
  function isInInactiveTree(instance: ComponentInstance): boolean {
 | 
			
		||||
    while ((instance = instance.$parent as any) !== null) {
 | 
			
		||||
      if (instance._inactiveRoot) return true
 | 
			
		||||
    }
 | 
			
		||||
@ -1376,7 +1379,7 @@ export function createRenderer(options: RendererOptions) {
 | 
			
		||||
    }
 | 
			
		||||
    flushHooks()
 | 
			
		||||
    return vnode && vnode.flags & VNodeFlags.COMPONENT_STATEFUL
 | 
			
		||||
      ? (vnode.children as MountedComponent).$proxy
 | 
			
		||||
      ? (vnode.children as ComponentInstance).$proxy
 | 
			
		||||
      : null
 | 
			
		||||
  }
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
@ -1,4 +1,4 @@
 | 
			
		||||
import { MountedComponent } from './component'
 | 
			
		||||
import { ComponentInstance } from './component'
 | 
			
		||||
 | 
			
		||||
export const enum ErrorTypes {
 | 
			
		||||
  BEFORE_CREATE = 1,
 | 
			
		||||
@ -36,7 +36,7 @@ const ErrorTypeStrings: Record<number, string> = {
 | 
			
		||||
 | 
			
		||||
export function handleError(
 | 
			
		||||
  err: Error,
 | 
			
		||||
  instance: MountedComponent,
 | 
			
		||||
  instance: ComponentInstance,
 | 
			
		||||
  type: ErrorTypes
 | 
			
		||||
) {
 | 
			
		||||
  let cur = instance
 | 
			
		||||
 | 
			
		||||
@ -1,8 +1,8 @@
 | 
			
		||||
import { VNode } from '../vdom'
 | 
			
		||||
import { MountedComponent } from '../component'
 | 
			
		||||
import { ComponentInstance } from '../component'
 | 
			
		||||
 | 
			
		||||
interface DirectiveBinding {
 | 
			
		||||
  instance: MountedComponent
 | 
			
		||||
  instance: ComponentInstance
 | 
			
		||||
  value?: any
 | 
			
		||||
  oldValue?: any
 | 
			
		||||
  arg?: string
 | 
			
		||||
@ -32,7 +32,7 @@ const valueCache = new WeakMap<Directive, WeakMap<any, any>>()
 | 
			
		||||
export function applyDirective(
 | 
			
		||||
  vnode: VNode,
 | 
			
		||||
  directive: Directive,
 | 
			
		||||
  instance: MountedComponent,
 | 
			
		||||
  instance: ComponentInstance,
 | 
			
		||||
  value?: any,
 | 
			
		||||
  arg?: string,
 | 
			
		||||
  modifiers?: DirectiveModifiers
 | 
			
		||||
 | 
			
		||||
@ -1,4 +1,4 @@
 | 
			
		||||
import { Component, ComponentClass, MountedComponent } from '../component'
 | 
			
		||||
import { Component, ComponentClass, ComponentInstance } from '../component'
 | 
			
		||||
import { VNode, Slots, cloneVNode } from '../vdom'
 | 
			
		||||
import { VNodeFlags } from '../flags'
 | 
			
		||||
 | 
			
		||||
@ -20,13 +20,13 @@ export class KeepAlive extends Component<KeepAliveProps> {
 | 
			
		||||
  keys: Set<CacheKey> = new Set()
 | 
			
		||||
 | 
			
		||||
  // to be set in createRenderer when instance is created
 | 
			
		||||
  $unmount: (instance: MountedComponent) => void
 | 
			
		||||
  $unmount: (instance: ComponentInstance) => void
 | 
			
		||||
 | 
			
		||||
  beforeUnmount() {
 | 
			
		||||
    this.cache.forEach(vnode => {
 | 
			
		||||
      // change flag so it can be properly unmounted
 | 
			
		||||
      vnode.flags = VNodeFlags.COMPONENT_STATEFUL_NORMAL
 | 
			
		||||
      this.$unmount(vnode.children as MountedComponent)
 | 
			
		||||
      this.$unmount(vnode.children as ComponentInstance)
 | 
			
		||||
    })
 | 
			
		||||
  }
 | 
			
		||||
 | 
			
		||||
@ -43,7 +43,7 @@ export class KeepAlive extends Component<KeepAliveProps> {
 | 
			
		||||
    const cached = this.cache.get(key) as VNode
 | 
			
		||||
    const current = this.$vnode
 | 
			
		||||
    if (!current || cached.tag !== current.tag) {
 | 
			
		||||
      this.$unmount(cached.children as MountedComponent)
 | 
			
		||||
      this.$unmount(cached.children as ComponentInstance)
 | 
			
		||||
    }
 | 
			
		||||
    this.cache.delete(key)
 | 
			
		||||
    this.keys.delete(key)
 | 
			
		||||
 | 
			
		||||
@ -1,5 +1,5 @@
 | 
			
		||||
import {
 | 
			
		||||
  MountedComponent,
 | 
			
		||||
  ComponentInstance,
 | 
			
		||||
  ComponentClass,
 | 
			
		||||
  FunctionalComponent
 | 
			
		||||
} from './component'
 | 
			
		||||
@ -46,7 +46,7 @@ export interface VNodeData {
 | 
			
		||||
 | 
			
		||||
export type VNodeChildren =
 | 
			
		||||
  | VNode[] // ELEMENT | PORTAL
 | 
			
		||||
  | MountedComponent // COMPONENT_STATEFUL
 | 
			
		||||
  | ComponentInstance // COMPONENT_STATEFUL
 | 
			
		||||
  | VNode // COMPONENT_FUNCTIONAL
 | 
			
		||||
  | string // TEXT
 | 
			
		||||
  | null
 | 
			
		||||
@ -55,7 +55,7 @@ export type RawVNodeChildren = VNodeChildren | unknown[]
 | 
			
		||||
 | 
			
		||||
export type Key = string | number
 | 
			
		||||
 | 
			
		||||
export type Ref = (t: RenderNode | MountedComponent | null) => void
 | 
			
		||||
export type Ref = (t: RenderNode | ComponentInstance | null) => void
 | 
			
		||||
 | 
			
		||||
export type Slot = (...args: any[]) => VNode[]
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
		Loading…
	
	
			
			x
			
			
		
	
		Reference in New Issue
	
	Block a user