fix: allow custom globalContext and globalNuxt (#80)

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",

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),

src/fetch.ts

@@ -37,7 +37,8 @@ const fetches = new WeakMap<ComponentInstance, Fetch[]>()
 
 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) {

src/index.ts

@@ -22,9 +22,22 @@ const compositionApiModule: Module<any> = 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 || {}

src/ssr-ref.ts

@@ -46,7 +46,10 @@ export const ssrRef = <T>(value: T | (() => T), key?: string): Ref<T> => {
   }
 
   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 = <T>(
 
   if (process.client) {
     return shallowRef(
-      (window as any).__NUXT__?.ssrRefs?.[key] ?? getValue(value)
+      (window as any)['<%= options.globalContext %>']?.ssrRefs?.[key] ??
+        getValue(value)
     )
   }
 

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