refactor: extract vca registration into an external/shared js file (#470)

Author: danielroe

jest.config.js

@@ -8,5 +8,7 @@ module.exports = {
   setupFiles: ['<rootDir>/test/unit/setup'],
   moduleNameMapper: {
     '@nuxtjs/composition-api/dist/globals': '<rootDir>/src/globals',
+    '@nuxtjs/composition-api/dist/runtime/register':
+      '<rootDir>/src/runtime/register',
   },
 }

package.json

@@ -26,7 +26,8 @@
     "./package.json": "./package.json",
     "./dist/babel-plugin": "./dist/babel-plugin.js",
     "./dist/globals": "./dist/globals.js",
-    "./dist/runtime/templates/*": "./dist/runtime/templates/*"
+    "./dist/runtime/templates/*": "./dist/runtime/templates/*",
+    "./dist/runtime/register": "./dist/runtime/register.js"
   },
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",

siroc.config.js

@@ -2,6 +2,9 @@ import { defineSirocConfig } from 'siroc'
 
 export default defineSirocConfig({
   rollup: {
-    externals: ['@nuxtjs/composition-api/dist/globals'],
+    externals: [
+      '@nuxtjs/composition-api/dist/globals',
+      '@nuxtjs/composition-api/dist/runtime/register',
+    ],
   },
 })

src/module.ts

@@ -49,29 +49,6 @@ const compositionApiModule: Module<never> = function compositionApiModule() {
     })
   })
 
-  // Register the Vue Composition API
-
-  if (nuxtOptions.features.middleware) {
-    const middleware = addResolvedTemplate.call(this, 'register.js')
-    this.nuxt.hook(
-      'build:templates',
-      ({ templateVars }: { templateVars: Record<string, any> }) => {
-        templateVars.middleware.unshift({
-          src: middleware,
-          dst: '.' + sep + relative(nuxtOptions.buildDir, middleware),
-          name: 'compositionApiRegistration',
-        })
-      }
-    )
-  } else if (nuxtOptions.features.layouts) {
-    this.addLayout(resolveRelativePath('runtime/templates/layout.js'), '0')
-  } else {
-    const dst = addResolvedTemplate.call(this, 'register.js')
-    this.nuxt.hook('modules:done', () =>
-      this.nuxt.hook('build:before', () => nuxtOptions.plugins.unshift(dst))
-    )
-  }
-
   // If we're using nuxt-vite, register vite plugin & inject configuration
 
   this.nuxt.hook('vite:extend', async (ctx: any) => {

src/runtime/composables/index.ts

@@ -1,3 +1,5 @@
+import '@nuxtjs/composition-api/dist/runtime/register'
+
 export { useAsync } from './async'
 export { defineComponent } from './component'
 export { useContext, withContext } from './context'

src/runtime/templates/register.js renamed to src/runtime/register.ts

@@ -2,5 +2,3 @@ import Vue from 'vue'
 import CompositionApi from '@vue/composition-api'
 
 Vue.use(CompositionApi)
-
-export default {}

src/runtime/templates/layout.js

@@ -15,6 +15,11 @@ console.log('Testing', inDevelopment ? 'source' : 'built', 'module')
 
 export default <NuxtConfig>{
   alias: {
+    '@nuxtjs/composition-api/dist/runtime/register': join(
+      rootDir,
+      inDevelopment ? 'src' : 'dist',
+      'runtime/register'
+    ),
     '@nuxtjs/composition-api/dist/globals': join(
       rootDir,
       inDevelopment ? 'src' : 'dist',