feat(runtime-core): support app.config.globalProperties

per https://github.com/vuejs/rfcs/pull/117/
This commit is contained in:
Evan You 2020-03-25 09:28:37 -04:00
parent 394fd4c6aa
commit 27873dbe1c
4 changed files with 53 additions and 26 deletions

View File

@ -440,4 +440,38 @@ describe('api: createApp', () => {
).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')
})
})

View File

@ -563,28 +563,6 @@ describe('api: options', () => {
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', () => {
mockWarn()

View File

@ -50,6 +50,7 @@ export interface AppConfig {
devtools: boolean
performance: boolean
optionMergeStrategies: Record<string, OptionMergeFunction>
globalProperties: Record<string, any>
isCustomElement: (tag: string) => boolean
errorHandler?: (
err: unknown,
@ -86,6 +87,7 @@ export function createAppContext(): AppContext {
isNativeTag: NO,
devtools: true,
performance: false,
globalProperties: {},
optionMergeStrategies: {},
isCustomElement: NO,
errorHandler: undefined,

View File

@ -77,7 +77,15 @@ const enum AccessTypes {
export const PublicInstanceProxyHandlers: ProxyHandler<any> = {
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
// 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)
const publicGetter = publicPropertiesMap[key]
let cssModule
let cssModule, globalProperties
if (publicGetter) {
if (__DEV__ && key === '$attrs') {
markAttrsAccessed()
}
return publicGetter(target)
} else if (hasOwn(sink, key)) {
return sink[key]
} else if (
(cssModule = type.__cssModules) &&
(cssModule = cssModule[key])
) {
return cssModule
} else if (hasOwn(sink, key)) {
return sink[key]
} else if (
((globalProperties = appContext.config.globalProperties),
hasOwn(globalProperties, key))
) {
return globalProperties[key]
} else if (__DEV__ && currentRenderingInstance) {
warn(
`Property ${JSON.stringify(key)} was accessed during render ` +