extend.ts — vue Source File

Architecture documentation for extend.ts, a typescript file in the vue codebase. 9 imports, 1 dependents.

File typescript CoreRuntime VirtualDOM 9 imports 1 dependents 3 functions

Entity Profile

CoreRuntime→ VirtualDOM→ extend.ts — vue Source File

Dependency Diagram

graph LR
  a14b0815_48fb_998a_d3d7_ac867ed1d7f9["extend.ts"]
  910d3a96_5984_cf85_40a3_47933bd75818["state.ts"]
  a14b0815_48fb_998a_d3d7_ac867ed1d7f9 --> 910d3a96_5984_cf85_40a3_47933bd75818
  d78d0fa2_2aba_d914_c67d_4cb1b5a75d62["defineComputed"]
  a14b0815_48fb_998a_d3d7_ac867ed1d7f9 --> d78d0fa2_2aba_d914_c67d_4cb1b5a75d62
  cedf6e5d_ac48_bf6f_0fc6_d75bd1082b6e["proxy"]
  a14b0815_48fb_998a_d3d7_ac867ed1d7f9 --> cedf6e5d_ac48_bf6f_0fc6_d75bd1082b6e
  2a298df2_21b8_7e5a_c372_51ba50c9d92d["index.ts"]
  a14b0815_48fb_998a_d3d7_ac867ed1d7f9 --> 2a298df2_21b8_7e5a_c372_51ba50c9d92d
  a6875054_df8a_0ce4_8a16_374ce422dc53["create-component.ts"]
  a14b0815_48fb_998a_d3d7_ac867ed1d7f9 --> a6875054_df8a_0ce4_8a16_374ce422dc53
  16abdeb5_17d6_b741_ca16_dfc41a7d0df5["getComponentName"]
  a14b0815_48fb_998a_d3d7_ac867ed1d7f9 --> 16abdeb5_17d6_b741_ca16_dfc41a7d0df5
  19d0b34b_7289_2457_32d9_273105740f2a["constants"]
  a14b0815_48fb_998a_d3d7_ac867ed1d7f9 --> 19d0b34b_7289_2457_32d9_273105740f2a
  907f4994_ea28_43b1_7976_0db9f0e97637["component"]
  a14b0815_48fb_998a_d3d7_ac867ed1d7f9 --> 907f4994_ea28_43b1_7976_0db9f0e97637
  51931e9b_f9dc_de8e_3f55_263f1372f144["global-api"]
  a14b0815_48fb_998a_d3d7_ac867ed1d7f9 --> 51931e9b_f9dc_de8e_3f55_263f1372f144
  6090fc15_0543_136f_4e4a_ce1860382ce6["index.ts"]
  6090fc15_0543_136f_4e4a_ce1860382ce6 --> a14b0815_48fb_998a_d3d7_ac867ed1d7f9
  style a14b0815_48fb_998a_d3d7_ac867ed1d7f9 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

import { ASSET_TYPES } from 'shared/constants'
import type { Component } from 'types/component'
import type { GlobalAPI } from 'types/global-api'
import { defineComputed, proxy } from '../instance/state'
import { extend, mergeOptions, validateComponentName } from '../util/index'
import { getComponentName } from '../vdom/create-component'

export function initExtend(Vue: GlobalAPI) {
  /**
   * Each instance constructor, including Vue, has a unique
   * cid. This enables us to create wrapped "child
   * constructors" for prototypal inheritance and cache them.
   */
  Vue.cid = 0
  let cid = 1

  /**
   * Class inheritance
   */
  Vue.extend = function (extendOptions: any): typeof Component {
    extendOptions = extendOptions || {}
    const Super = this
    const SuperId = Super.cid
    const cachedCtors = extendOptions._Ctor || (extendOptions._Ctor = {})
    if (cachedCtors[SuperId]) {
      return cachedCtors[SuperId]
    }

    const name =
      getComponentName(extendOptions) || getComponentName(Super.options)
    if (__DEV__ && name) {
      validateComponentName(name)
    }

    const Sub = function VueComponent(this: any, options: any) {
      this._init(options)
    } as unknown as typeof Component
    Sub.prototype = Object.create(Super.prototype)
    Sub.prototype.constructor = Sub
    Sub.cid = cid++
    Sub.options = mergeOptions(Super.options, extendOptions)
    Sub['super'] = Super

    // For props and computed properties, we define the proxy getters on
    // the Vue instances at extension time, on the extended prototype. This
    // avoids Object.defineProperty calls for each instance created.
    if (Sub.options.props) {
      initProps(Sub)
    }
    if (Sub.options.computed) {
      initComputed(Sub)
    }

    // allow further extension/mixin/plugin usage
    Sub.extend = Super.extend
    Sub.mixin = Super.mixin
    Sub.use = Super.use

    // create asset registers, so extended classes
    // can have their private assets too.
    ASSET_TYPES.forEach(function (type) {
      Sub[type] = Super[type]
    })
    // enable recursive self-lookup
    if (name) {
      Sub.options.components[name] = Sub
    }

    // keep a reference to the super options at extension time.
    // later at instantiation we can check if Super's options have
    // been updated.
    Sub.superOptions = Super.options
    Sub.extendOptions = extendOptions
    Sub.sealedOptions = extend({}, Sub.options)

    // cache constructor
    cachedCtors[SuperId] = Sub
    return Sub
  }
}

function initProps(Comp: typeof Component) {
  const props = Comp.options.props
  for (const key in props) {
    proxy(Comp.prototype, `_props`, key)
  }
}

function initComputed(Comp: typeof Component) {
  const computed = Comp.options.computed
  for (const key in computed) {
    defineComputed(Comp.prototype, key, computed[key])
  }
}