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.

Author: danielroe

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.js

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

src/babel-plugin/index.js

@@ -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/babel-plugin.ts renamed to src/babel-plugin/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