Home / File/ inject.ts — vue Source File

inject.ts — vue Source File

Architecture documentation for inject.ts, a typescript file in the vue codebase. 6 imports, 2 dependents.

File typescript CoreRuntime Instance 6 imports 2 dependents 3 functions

Entity Profile

Dependency Diagram

graph LR
  4ac7e661_4a8f_08cb_4f7e_e4704e6ee6bd["inject.ts"]
  2a298df2_21b8_7e5a_c372_51ba50c9d92d["index.ts"]
  4ac7e661_4a8f_08cb_4f7e_e4704e6ee6bd --> 2a298df2_21b8_7e5a_c372_51ba50c9d92d
  012c0986_6b9d_ad59_8fba_57884312dd3b["index.ts"]
  4ac7e661_4a8f_08cb_4f7e_e4704e6ee6bd --> 012c0986_6b9d_ad59_8fba_57884312dd3b
  772e5b8f_95bc_3463_fed7_f1034ba985e1["defineReactive"]
  4ac7e661_4a8f_08cb_4f7e_e4704e6ee6bd --> 772e5b8f_95bc_3463_fed7_f1034ba985e1
  2bcc88b5_db8a_b047_2abd_7382948898ab["toggleObserving"]
  4ac7e661_4a8f_08cb_4f7e_e4704e6ee6bd --> 2bcc88b5_db8a_b047_2abd_7382948898ab
  907f4994_ea28_43b1_7976_0db9f0e97637["component"]
  4ac7e661_4a8f_08cb_4f7e_e4704e6ee6bd --> 907f4994_ea28_43b1_7976_0db9f0e97637
  a9e85c35_2d6d_5066_7c92_2dcb4afc523b["apiInject"]
  4ac7e661_4a8f_08cb_4f7e_e4704e6ee6bd --> a9e85c35_2d6d_5066_7c92_2dcb4afc523b
  9e587547_0a20_aaaa_ba5c_6103ca27ef79["init.ts"]
  9e587547_0a20_aaaa_ba5c_6103ca27ef79 --> 4ac7e661_4a8f_08cb_4f7e_e4704e6ee6bd
  dfa00dc1_b5e1_fc4b_364c_221e22660e03["create-functional-component.ts"]
  dfa00dc1_b5e1_fc4b_364c_221e22660e03 --> 4ac7e661_4a8f_08cb_4f7e_e4704e6ee6bd
  style 4ac7e661_4a8f_08cb_4f7e_e4704e6ee6bd fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

import { warn, hasSymbol, isFunction, isObject } from '../util/index'
import { defineReactive, toggleObserving } from '../observer/index'
import type { Component } from 'types/component'
import { resolveProvided } from 'v3/apiInject'

export function initProvide(vm: Component) {
  const provideOption = vm.$options.provide
  if (provideOption) {
    const provided = isFunction(provideOption)
      ? provideOption.call(vm)
      : provideOption
    if (!isObject(provided)) {
      return
    }
    const source = resolveProvided(vm)
    // IE9 doesn't support Object.getOwnPropertyDescriptors so we have to
    // iterate the keys ourselves.
    const keys = hasSymbol ? Reflect.ownKeys(provided) : Object.keys(provided)
    for (let i = 0; i < keys.length; i++) {
      const key = keys[i]
      Object.defineProperty(
        source,
        key,
        Object.getOwnPropertyDescriptor(provided, key)!
      )
    }
  }
}

export function initInjections(vm: Component) {
  const result = resolveInject(vm.$options.inject, vm)
  if (result) {
    toggleObserving(false)
    Object.keys(result).forEach(key => {
      /* istanbul ignore else */
      if (__DEV__) {
        defineReactive(vm, key, result[key], () => {
          warn(
            `Avoid mutating an injected value directly since the changes will be ` +
              `overwritten whenever the provided component re-renders. ` +
              `injection being mutated: "${key}"`,
            vm
          )
        })
      } else {
        defineReactive(vm, key, result[key])
      }
    })
    toggleObserving(true)
  }
}

export function resolveInject(
  inject: any,
  vm: Component
): Record<string, any> | undefined | null {
  if (inject) {
    // inject is :any because flow is not smart enough to figure out cached
    const result = Object.create(null)
    const keys = hasSymbol ? Reflect.ownKeys(inject) : Object.keys(inject)

    for (let i = 0; i < keys.length; i++) {
      const key = keys[i]
      // #6574 in case the inject object is observed...
      if (key === '__ob__') continue
      const provideKey = inject[key].from
      if (provideKey in vm._provided) {
        result[key] = vm._provided[provideKey]
      } else if ('default' in inject[key]) {
        const provideDefault = inject[key].default
        result[key] = isFunction(provideDefault)
          ? provideDefault.call(vm)
          : provideDefault
      } else if (__DEV__) {
        warn(`Injection "${key as string}" not found`, vm)
      }
    }
    return result
  }
}

Domain

Subdomains

Dependencies

Frequently Asked Questions

What does inject.ts do?
inject.ts is a source file in the vue codebase, written in typescript. It belongs to the CoreRuntime domain, Instance subdomain.
What functions are defined in inject.ts?
inject.ts defines 3 function(s): initInjections, initProvide, resolveInject.
What does inject.ts depend on?
inject.ts imports 6 module(s): apiInject, component, defineReactive, index.ts, index.ts, toggleObserving.
What files import inject.ts?
inject.ts is imported by 2 file(s): create-functional-component.ts, init.ts.
Where is inject.ts in the architecture?
inject.ts is located at src/core/instance/inject.ts (domain: CoreRuntime, subdomain: Instance, directory: src/core/instance).

Analyze Your Own Codebase

Get architecture documentation, dependency graphs, and domain analysis for your codebase in minutes.

Try Supermodel Free