inject.ts — vue Source File
Architecture documentation for inject.ts, a typescript file in the vue codebase. 6 imports, 2 dependents.
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
- apiInject
- component
- defineReactive
- index.ts
- index.ts
- toggleObserving
Source
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