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 VueCore Instance 6 imports 2 dependents 3 functions

Entity Profile

Dependency Diagram

graph LR
  2951feab_0890_f54d_27c2_673dc66ea804["inject.ts"]
  76672dd6_4e87_4468_a48b_f4da793fd211["index.ts"]
  2951feab_0890_f54d_27c2_673dc66ea804 --> 76672dd6_4e87_4468_a48b_f4da793fd211
  af395f8e_1ac5_a239_71b7_fd29a1c03d2c["index.ts"]
  2951feab_0890_f54d_27c2_673dc66ea804 --> af395f8e_1ac5_a239_71b7_fd29a1c03d2c
  dea83477_00f1_3c8b_f0a1_584882807d1f["defineReactive"]
  2951feab_0890_f54d_27c2_673dc66ea804 --> dea83477_00f1_3c8b_f0a1_584882807d1f
  c9e94feb_048a_387e_29a1_1567a76d119c["toggleObserving"]
  2951feab_0890_f54d_27c2_673dc66ea804 --> c9e94feb_048a_387e_29a1_1567a76d119c
  64c87498_c46a_6944_ab9d_8e45519852a8["component"]
  2951feab_0890_f54d_27c2_673dc66ea804 --> 64c87498_c46a_6944_ab9d_8e45519852a8
  1e9bf8c5_aacc_3cd7_a769_6d3963a83c28["apiInject"]
  2951feab_0890_f54d_27c2_673dc66ea804 --> 1e9bf8c5_aacc_3cd7_a769_6d3963a83c28
  ae790ceb_073b_1bcf_331c_af2d587c1ad6["init.ts"]
  ae790ceb_073b_1bcf_331c_af2d587c1ad6 --> 2951feab_0890_f54d_27c2_673dc66ea804
  414b37af_5f63_dee7_31a2_9a7cad5979ec["create-functional-component.ts"]
  414b37af_5f63_dee7_31a2_9a7cad5979ec --> 2951feab_0890_f54d_27c2_673dc66ea804
  style 2951feab_0890_f54d_27c2_673dc66ea804 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 VueCore 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: VueCore, 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