feat(runtime-core): support app.config.globalProperties
per https://github.com/vuejs/rfcs/pull/117/
This commit is contained in:
parent
394fd4c6aa
commit
27873dbe1c
@ -440,4 +440,38 @@ describe('api: createApp', () => {
|
|||||||
).toHaveBeenWarned()
|
).toHaveBeenWarned()
|
||||||
})
|
})
|
||||||
})
|
})
|
||||||
|
|
||||||
|
test('config.optionMergeStrategies', () => {
|
||||||
|
let merged: string
|
||||||
|
const App = defineComponent({
|
||||||
|
render() {},
|
||||||
|
mixins: [{ foo: 'mixin' }],
|
||||||
|
extends: { foo: 'extends' },
|
||||||
|
foo: 'local',
|
||||||
|
beforeCreate() {
|
||||||
|
merged = this.$options.foo
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
const app = createApp(App)
|
||||||
|
app.mixin({
|
||||||
|
foo: 'global'
|
||||||
|
})
|
||||||
|
app.config.optionMergeStrategies.foo = (a, b) => (a ? `${a},` : ``) + b
|
||||||
|
|
||||||
|
app.mount(nodeOps.createElement('div'))
|
||||||
|
expect(merged!).toBe('global,extends,mixin,local')
|
||||||
|
})
|
||||||
|
|
||||||
|
test('config.globalProperties', () => {
|
||||||
|
const app = createApp({
|
||||||
|
render() {
|
||||||
|
return this.foo
|
||||||
|
}
|
||||||
|
})
|
||||||
|
app.config.globalProperties.foo = 'hello'
|
||||||
|
const root = nodeOps.createElement('div')
|
||||||
|
app.mount(root)
|
||||||
|
expect(serializeInner(root)).toBe('hello')
|
||||||
|
})
|
||||||
})
|
})
|
||||||
|
@ -563,28 +563,6 @@ describe('api: options', () => {
|
|||||||
expect(serializeInner(root)).toBe(`<div>1,1,3</div>`)
|
expect(serializeInner(root)).toBe(`<div>1,1,3</div>`)
|
||||||
})
|
})
|
||||||
|
|
||||||
test('optionMergeStrategies', () => {
|
|
||||||
let merged: string
|
|
||||||
const App = defineComponent({
|
|
||||||
render() {},
|
|
||||||
mixins: [{ foo: 'mixin' }],
|
|
||||||
extends: { foo: 'extends' },
|
|
||||||
foo: 'local',
|
|
||||||
beforeCreate() {
|
|
||||||
merged = this.$options.foo
|
|
||||||
}
|
|
||||||
})
|
|
||||||
|
|
||||||
const app = createApp(App)
|
|
||||||
app.mixin({
|
|
||||||
foo: 'global'
|
|
||||||
})
|
|
||||||
app.config.optionMergeStrategies.foo = (a, b) => (a ? `${a},` : ``) + b
|
|
||||||
|
|
||||||
app.mount(nodeOps.createElement('div'))
|
|
||||||
expect(merged!).toBe('global,extends,mixin,local')
|
|
||||||
})
|
|
||||||
|
|
||||||
describe('warnings', () => {
|
describe('warnings', () => {
|
||||||
mockWarn()
|
mockWarn()
|
||||||
|
|
||||||
|
@ -50,6 +50,7 @@ export interface AppConfig {
|
|||||||
devtools: boolean
|
devtools: boolean
|
||||||
performance: boolean
|
performance: boolean
|
||||||
optionMergeStrategies: Record<string, OptionMergeFunction>
|
optionMergeStrategies: Record<string, OptionMergeFunction>
|
||||||
|
globalProperties: Record<string, any>
|
||||||
isCustomElement: (tag: string) => boolean
|
isCustomElement: (tag: string) => boolean
|
||||||
errorHandler?: (
|
errorHandler?: (
|
||||||
err: unknown,
|
err: unknown,
|
||||||
@ -86,6 +87,7 @@ export function createAppContext(): AppContext {
|
|||||||
isNativeTag: NO,
|
isNativeTag: NO,
|
||||||
devtools: true,
|
devtools: true,
|
||||||
performance: false,
|
performance: false,
|
||||||
|
globalProperties: {},
|
||||||
optionMergeStrategies: {},
|
optionMergeStrategies: {},
|
||||||
isCustomElement: NO,
|
isCustomElement: NO,
|
||||||
errorHandler: undefined,
|
errorHandler: undefined,
|
||||||
|
@ -77,7 +77,15 @@ const enum AccessTypes {
|
|||||||
|
|
||||||
export const PublicInstanceProxyHandlers: ProxyHandler<any> = {
|
export const PublicInstanceProxyHandlers: ProxyHandler<any> = {
|
||||||
get(target: ComponentInternalInstance, key: string) {
|
get(target: ComponentInternalInstance, key: string) {
|
||||||
const { renderContext, data, propsProxy, accessCache, type, sink } = target
|
const {
|
||||||
|
renderContext,
|
||||||
|
data,
|
||||||
|
propsProxy,
|
||||||
|
accessCache,
|
||||||
|
type,
|
||||||
|
sink,
|
||||||
|
appContext
|
||||||
|
} = target
|
||||||
|
|
||||||
// data / props / renderContext
|
// data / props / renderContext
|
||||||
// This getter gets called for every property access on the render context
|
// This getter gets called for every property access on the render context
|
||||||
@ -118,19 +126,24 @@ export const PublicInstanceProxyHandlers: ProxyHandler<any> = {
|
|||||||
|
|
||||||
// public $xxx properties & user-attached properties (sink)
|
// public $xxx properties & user-attached properties (sink)
|
||||||
const publicGetter = publicPropertiesMap[key]
|
const publicGetter = publicPropertiesMap[key]
|
||||||
let cssModule
|
let cssModule, globalProperties
|
||||||
if (publicGetter) {
|
if (publicGetter) {
|
||||||
if (__DEV__ && key === '$attrs') {
|
if (__DEV__ && key === '$attrs') {
|
||||||
markAttrsAccessed()
|
markAttrsAccessed()
|
||||||
}
|
}
|
||||||
return publicGetter(target)
|
return publicGetter(target)
|
||||||
|
} else if (hasOwn(sink, key)) {
|
||||||
|
return sink[key]
|
||||||
} else if (
|
} else if (
|
||||||
(cssModule = type.__cssModules) &&
|
(cssModule = type.__cssModules) &&
|
||||||
(cssModule = cssModule[key])
|
(cssModule = cssModule[key])
|
||||||
) {
|
) {
|
||||||
return cssModule
|
return cssModule
|
||||||
} else if (hasOwn(sink, key)) {
|
} else if (
|
||||||
return sink[key]
|
((globalProperties = appContext.config.globalProperties),
|
||||||
|
hasOwn(globalProperties, key))
|
||||||
|
) {
|
||||||
|
return globalProperties[key]
|
||||||
} else if (__DEV__ && currentRenderingInstance) {
|
} else if (__DEV__ && currentRenderingInstance) {
|
||||||
warn(
|
warn(
|
||||||
`Property ${JSON.stringify(key)} was accessed during render ` +
|
`Property ${JSON.stringify(key)} was accessed during render ` +
|
||||||
|
Loading…
x
Reference in New Issue
Block a user