fix: rework composition API registration (#484)

* addresses issue with .mjs format (nuxt + jest)
* compile composables into single file
* registers composition API using webpack entrypoint (or, for vite, by overriding `./middleware.js` import)
* retains auto-registration for testing (in cjs export - if `process.env.NODE_ENV === 'test'`)

closes #476, closes #479 (by implementing)

Also should cover nuxt/vite#134 and nuxt/vite#123.

jest.config.js

@@ -9,7 +9,5 @@ module.exports = {
   moduleNameMapper: {
     '@nuxtjs/composition-api/dist/runtime/globals':
       '<rootDir>/src/runtime/globals',
-    '@nuxtjs/composition-api/dist/runtime/register':
-      '<rootDir>/src/runtime/register',
   },
 }

package.json

@@ -23,14 +23,15 @@
       "import": "./dist/runtime/index.mjs",
       "require": "./dist/runtime/index.js"
     },
-    "./module": "./dist/module.js",
+    "./module": "./dist/module/index.js",
     "./package.json": "./package.json",
-    "./dist/babel-plugin": "./dist/babel-plugin.js",
-    "./dist/runtime/*": "./dist/runtime/*"
+    "./dist/babel-plugin": "./dist/babel-plugin/index.js",
+    "./dist/runtime/globals": "./dist/runtime/globals.js",
+    "./dist/runtime/templates/*": "./dist/runtime/templates/*"
   },
   "main": "./dist/runtime/index.js",
   "module": "./dist/runtime/index.mjs",
-  "types": "./dist/index.d.ts",
+  "types": "./dist/runtime/index.d.ts",
   "files": [
     "dist",
     "module.js"

siroc.config.js

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

src/babel-plugin/index.js

@@ -0,0 +1,2 @@
+// eslint-disable-next-line
+module.exports = require('jiti')(__dirname)('./index.ts')

src/babel-register.ts → src/module/babel-register.ts

@@ -17,7 +17,7 @@ export function registerBabelPlugin(this: ModuleThis) {
       'Unable to automatically add Babel plugin. Make sure your custom `build.babel.plugins` returns `@nuxtjs/composition-api/dist/babel-plugin`'
     )
   } else {
-    nuxtOptions.build.babel.plugins.push(resolveRelativePath('babel-plugin'))
+    nuxtOptions.build.babel.plugins.push(resolveRelativePath('../babel-plugin'))
   }
 
   /**

src/module.ts → src/module/index.ts

@@ -1,7 +1,8 @@
 import type { Module, NuxtOptions } from '@nuxt/types'
 import { resolve } from 'upath'
+import type { Compiler } from 'webpack'
 
-import { name, version } from '../package.json'
+import { name, version } from '../../package.json'
 
 import { registerBabelPlugin } from './babel-register'
 import { addGlobalsFile } from './globals-register'
@@ -26,6 +27,14 @@ const compositionApiModule: Module<never> = function compositionApiModule() {
     '@vue/composition-api/dist/vue-composition-api.esm.js'
   )
 
+  // Register the Vue Composition API for webpack
+
+  const registration = addResolvedTemplate.call(this, 'register.mjs')
+  this.nuxt.hook('build:compile', ({ compiler }: { compiler: Compiler }) => {
+    const entry = compiler.options.entry as Record<string, string[]>
+    entry.app.unshift(registration)
+  })
+
   // Turn off webpack4 module context for .mjs files (as it appears to have some issues)
 
   this.extendBuild(config => {
@@ -40,9 +49,11 @@ const compositionApiModule: Module<never> = function compositionApiModule() {
 
   // If we're using nuxt-vite, register vite plugin & inject configuration
 
+  const viteMiddleware = addResolvedTemplate.call(this, 'middleware.mjs')
   this.nuxt.hook('vite:extend', async (ctx: any) => {
     const { compositionApiPlugin } = await import('./vite-plugin')
     ctx.config.plugins.push(compositionApiPlugin())
+    ctx.config.resolve.alias['./middleware.js'] = viteMiddleware
   })
 
   // If we're using Babel, register Babel plugin for injecting keys

src/utils.ts → src/module/utils.ts

@@ -1,6 +1,6 @@
 import { NuxtConfig, NuxtOptions } from '@nuxt/types'
 import { ModuleThis } from '@nuxt/types/config/module'
-import { basename, join, resolve } from 'upath'
+import { join, resolve } from 'upath'
 
 export function isFullStatic(options: NuxtConfig) {
   return (
@@ -26,10 +26,11 @@ export function addResolvedTemplate(
 ) {
   const nuxtOptions: NuxtOptions = this.nuxt.options
 
-  const src = resolveRelativePath(join('runtime/templates', template))
+  const src = resolveRelativePath(`../runtime/templates/${template}`)
+  const filename = template.replace('register.mjs', 'register.js')
   const { dst } = this.addTemplate({
     src,
-    fileName: join('composition-api', basename(src)),
+    fileName: join('composition-api', filename),
     options,
   })
 

src/runtime/composables/index.ts

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

src/runtime/index.ts

@@ -1 +1,8 @@
+import Vue from 'vue'
+import CompositionApi from '@vue/composition-api'
+
+if (process.env.NODE_ENV === 'test') {
+  Vue.use(CompositionApi)
+}
+
 export * from './composables'

src/runtime/templates/middleware.mjs

@@ -0,0 +1,4 @@
+import './register.js'
+import middleware from '../middleware.js'
+
+export default middleware

src/runtime/register.ts → src/runtime/templates/register.mjs

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

test/fixture/nuxt.config.ts

@@ -10,25 +10,21 @@ const isTesting = process.env.NODE_ENV !== 'development'
 const rootDir = resolve(__dirname, '../..')
 
 const inDevelopment = !process.env.TEST_BUILT_MODULE
+const moduleSource = join(rootDir, inDevelopment ? 'src' : 'dist')
 
 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/runtime/globals': join(
-      rootDir,
-      inDevelopment ? 'src' : 'dist',
+      moduleSource,
       'runtime/globals'
     ),
-    '@nuxtjs/composition-api': join(
-      rootDir,
-      inDevelopment ? 'src/runtime/index.ts' : 'dist/runtime/index.js'
+    '@nuxtjs/composition-api/dist/babel-plugin': join(
+      moduleSource,
+      'babel-plugin'
     ),
+    '@nuxtjs/composition-api': join(moduleSource, 'runtime'),
   },
   target: isGenerated ? 'static' : 'server',
   publicRuntimeConfig: {
@@ -76,7 +72,7 @@ export default <NuxtConfig>{
   buildModules: [
     '@nuxt/typescript-build',
     '@nuxtjs/pwa',
-    join(rootDir, inDevelopment ? 'src' : 'dist', 'module'),
+    join(moduleSource, 'module'),
   ],
   pwa: {
     icon: false,

tsconfig.json

@@ -15,9 +15,6 @@
       "@nuxtjs/composition-api/dist/runtime/globals": [
         "./src/runtime/globals.ts"
       ],
-      "@nuxtjs/composition-api/dist/runtime/register": [
-        "./src/runtime/register.ts"
-      ],
       "@nuxtjs/composition-api": ["./src/index.ts"]
     },
     "types": ["node", "@nuxt/types", "jest"]