diff --git a/package.json b/package.json index 90785c29..d0c803fa 100644 --- a/package.json +++ b/package.json @@ -42,6 +42,7 @@ "prepublishOnly": "yarn lint && yarn test", "release": "release-it", "test": "run-s test:*", + "test:e2e-globals": "GLOBALS=true start-server-and-test fixture:prod 3000 \"testcafe firefox:headless test/e2e\"", "test:e2e-ssr": "start-server-and-test fixture:prod 3000 \"testcafe firefox:headless test/e2e\"", "test:e2e-generated": "start-server-and-test fixture:generate 3000 \"GENERATE=true testcafe firefox:headless test/e2e\"", "test:types": "tsd", diff --git a/src/context.ts b/src/context.ts index 2d14854a..25cd6693 100644 --- a/src/context.ts +++ b/src/context.ts @@ -14,7 +14,7 @@ export const withContext = (callback: ContextCallback) => { const vm = getCurrentInstance() if (!vm) throw new Error('This must be called within a setup function.') - callback(vm.$nuxt.context) + callback(vm['<%= options.globalNuxt %>' as '$nuxt'].context) } /** @@ -36,7 +36,7 @@ export const useContext = () => { if (!vm) throw new Error('This must be called within a setup function.') return { - ...vm.$nuxt.context, + ...vm['<%= options.globalNuxt %>' as '$nuxt'].context, route: computed(() => vm.$route), query: computed(() => vm.$route.query), from: computed(() => vm.$route.redirectedFrom), diff --git a/src/fetch.ts b/src/fetch.ts index 2da89a74..5c9f6f55 100644 --- a/src/fetch.ts +++ b/src/fetch.ts @@ -37,7 +37,8 @@ const fetches = new WeakMap() const isSsrHydration = (vm: ComponentInstance) => (vm.$vnode?.elm as any)?.dataset?.fetchKey -const nuxtState = process.client && (window as any).__NUXT__ +const nuxtState = + process.client && (window as any)['<%= options.globalContext %>'] interface AugmentedComponentInstance extends ComponentInstance { _fetchKey?: number @@ -55,7 +56,7 @@ function registerCallback(vm: ComponentInstance, callback: Fetch) { async function callFetches(this: AugmentedComponentInstance) { const fetchesToCall = fetches.get(this) if (!fetchesToCall) return - ;(this.$nuxt as any).nbFetching++ + ;(this['<%= options.globalNuxt %>' as '$nuxt'] as any).nbFetching++ this.$fetchState.pending = true this.$fetchState.error = null @@ -79,7 +80,9 @@ async function callFetches(this: AugmentedComponentInstance) { this.$fetchState.pending = false this.$fetchState.timestamp = Date.now() - this.$nextTick(() => (this.$nuxt as any).nbFetching--) + this.$nextTick( + () => (this['<%= options.globalNuxt %>' as '$nuxt'] as any).nbFetching-- + ) } async function serverPrefetch(vm: AugmentedComponentInstance) { diff --git a/src/index.ts b/src/index.ts index ddd66ee9..c9d194bc 100644 --- a/src/index.ts +++ b/src/index.ts @@ -22,9 +22,22 @@ const compositionApiModule: Module = function () { }, }) + const globalName = this.options.globalName || 'nuxt' + const globalContextFactory = + this.options.globals?.context || + (globalName => `__${globalName.toUpperCase()}__`) + const globalNuxtFactory = + this.options.globals?.nuxt || (globalName => `$${globalName}`) + const globalContext = globalContextFactory(globalName) + const globalNuxt = globalNuxtFactory(globalName) + const { dst: entryDst } = this.addTemplate({ src: resolve(libRoot, 'lib', 'entrypoint.js'), fileName: join('composition-api', 'index.js'), + options: { + globalContext, + globalNuxt, + }, }) this.options.build = this.options.build || {} diff --git a/src/ssr-ref.ts b/src/ssr-ref.ts index 159c60d3..2adb1ff8 100644 --- a/src/ssr-ref.ts +++ b/src/ssr-ref.ts @@ -46,7 +46,10 @@ export const ssrRef = (value: T | (() => T), key?: string): Ref => { } if (process.client) { - return ref((window as any).__NUXT__?.ssrRefs?.[key] ?? getValue(value)) + return ref( + (window as any)['<%= options.globalContext %>']?.ssrRefs?.[key] ?? + getValue(value) + ) } const val = getValue(value) @@ -117,7 +120,8 @@ export const shallowSsrRef = ( if (process.client) { return shallowRef( - (window as any).__NUXT__?.ssrRefs?.[key] ?? getValue(value) + (window as any)['<%= options.globalContext %>']?.ssrRefs?.[key] ?? + getValue(value) ) } diff --git a/test/fixture/nuxt.config.js b/test/fixture/nuxt.config.js index 59a6efc6..7bf69b94 100644 --- a/test/fixture/nuxt.config.js +++ b/test/fixture/nuxt.config.js @@ -10,15 +10,24 @@ module.exports = { head: { link: [ { - rel: "stylesheet", href: "https://newcss.net/lite.css" - } - ] + rel: 'stylesheet', + href: 'https://newcss.net/lite.css', + }, + ], }, + ...(process.env.GLOBALS === 'true' + ? { + globalName: 'bob', + globals: { + nuxt: globalName => `$my${globalName}`, + }, + } + : {}), ...(process.env.NOW_BUILD === 'true' ? { generate: { dir: 'dist/fixture', - routes + routes, }, router: { base: '/fixture/', @@ -28,10 +37,10 @@ module.exports = { }, } : { - generate: { - routes, - } - }), + generate: { + routes, + }, + }), buildModules: [ process.env.NODE_ENV === 'test' ? require('../..').default