feat(bridge): enable composition-api (#551)

docs/content/7.bridge/1.intro.md

@@ -26,7 +26,7 @@ Performance            | 👎 Slower      | 👍  Enhanced     | 🔥 Fastest
 Nitro Engine           | ❌             | ✅               | ✅
 ESM support            | 🌙 Partial     | 👍 Better        | ✅
 Typescript             | ☑️ Opt-in      | 🚧 Faster        | ✅
-Composition API        | 📖 Community   | 🚧 Nuxt3 API     | ✅
+Composition API        | ⚠️ Deprecated  | ✅               | ✅
 Components Auto Import | ✅             | ✅               | ✅
 Auto Imports           | ❌             | 🚧               | ✅
 Webpack                | 4              | 5                 | 5

docs/content/7.bridge/2.migration.md

@@ -60,7 +60,14 @@ If you have a project with `target: 'static'`, update "build" script to use `nux
 See [Migrating from CommonJS](#step-2-avoid-commonjs-syntax) from module author section.
 We need same steps for `plugins`, `store`, `pages`, `serverMiddleware` and `nuxt.config.js`.
 
-### **Step 4:** Ensure everything goes well
+### **Step 4:** Remove incompatible modules
+
+- Remove `@nuxt/content` (1.x): **note**: a v2 rewrite for nuxt 3 support is planned, or you may also use docus
+- Remove `nuxt-vite`: Bridge injects module when enabled with `{ bridge: { vite: true } }`
+- Remove `@nuxt/nitro`: Bridge injects module
+- Remove `@nuxtjs/composition-api`: Bridge provides a nuxt 3 compatible composition-api layer.
+
+### **Step 5:** Ensure everything goes well
 
 Try with both `nuxt dev`, `nuxt build` and `nuxt start` if everything goes as expected
 If there is an issue, please report it to us or to relavant module repository.

packages/bridge/src/app.ts

@@ -2,27 +2,19 @@ import { useNuxt, resolveModule } from '@nuxt/kit'
 import { resolve } from 'upath'
 import { distDir } from './dirs'
 
-export function setupAppBridge () {
+export function setupAppBridge (_options: any) {
   const nuxt = useNuxt()
 
   // Setup aliases
   nuxt.options.alias['#app'] = resolve(distDir, 'runtime/index.mjs')
   nuxt.options.alias['#build'] = nuxt.options.buildDir
 
-  // Resolve to same vue2 path
-  nuxt.options.alias.vue = nuxt.options.alias.vue || resolveModule('vue/dist/vue.runtime.esm.js', { paths: nuxt.options.modulesDir })
-
   // Transpile runtime/
   nuxt.options.build.transpile.push(resolve(distDir, 'runtime'))
 
-  // Add composition-api support
+  // Resolve to same vue2 path
-  // nuxt.options.alias['@vue/composition-api'] = require.resolve('@vue/composition-api/dist/vue-composition-api.mjs')
+  nuxt.options.alias.vue = nuxt.options.alias.vue ||
-  // const capiPluginPath = resolve(distDir, 'runtime/capi.plugin.mjs')
+    resolveModule('vue/dist/vue.runtime.esm.js', { paths: nuxt.options.modulesDir })
-  // addPluginTemplate({ filename: 'capi.plugin.mjs', src: capiPluginPath })
-  // nuxt.hook('webpack:config', (configs) => {
-  //   // @ts-ignore
-  //   configs.forEach(config => config.entry.app.unshift(capiPluginPath))
-  // })
 
   // Fix wp4 esm
   nuxt.hook('webpack:config', (configs) => {

packages/bridge/src/capi.ts

@@ -0,0 +1,23 @@
+import { useNuxt, addPluginTemplate } from '@nuxt/kit'
+import { resolve } from 'upath'
+import { distDir } from './dirs'
+
+export function setupCAPIBridge (_options: any) {
+  const nuxt = useNuxt()
+
+  // Error if `@nuxtjs/composition-api` is added
+  if (nuxt.options.buildModules.find(m => m === '@nuxtjs/composition-api' || m === '@nuxtjs/composition-api/module')) {
+    throw new Error('Please remove `@nuxtjs/composition-api` from `buildModules` to avoid conflict with bridge.')
+  }
+
+  // Add composition-api support
+  nuxt.options.alias['@vue/composition-api'] = require.resolve('@vue/composition-api/dist/vue-composition-api.mjs')
+  const capiPluginPath = resolve(distDir, 'runtime/capi.plugin.mjs')
+  addPluginTemplate({ filename: 'capi.plugin.mjs', src: capiPluginPath })
+  nuxt.hook('webpack:config', (configs) => {
+    // @ts-ignore
+    configs.forEach(config => config.entry.app.unshift(capiPluginPath))
+  })
+
+  // TODO: Add @nuxtjs/composition-api shims
+}

packages/bridge/src/module.ts

@@ -1,6 +1,7 @@
 import { defineNuxtModule, installModule } from '@nuxt/kit'
 import { setupNitroBridge } from './nitro'
 import { setupAppBridge } from './app'
+import { setupCAPIBridge } from './capi'
 
 export default defineNuxtModule({
   name: 'nuxt-bridge',
@@ -8,7 +9,8 @@ export default defineNuxtModule({
   defaults: {
     nitro: true,
     vite: false,
-    app: true,
+    app: {},
+    capi: {},
     // TODO: Remove from 2.16
     postcss8: true,
     swc: true
@@ -18,7 +20,13 @@ export default defineNuxtModule({
       await setupNitroBridge()
     }
     if (opts.app) {
-      await setupAppBridge()
+      await setupAppBridge(opts.app)
+    }
+    if (opts.capi) {
+      if (!opts.app) {
+        throw new Error('[bridge] Cannot enable composition-api with app disabled!')
+      }
+      await setupCAPIBridge(opts.capi)
     }
     if (opts.vite) {
       await installModule(nuxt, require.resolve('nuxt-vite'))

packages/bridge/src/runtime/app.mjs

@@ -0,0 +1,5 @@
+const mock = () => () => { throw new Error('not implemented') }
+
+export const defineNuxtPlugin = mock()
+export const defineNuxtComponent = mock()
+export const useNuxtApp = mock()

packages/bridge/src/runtime/composables.mjs

@@ -1,10 +1,10 @@
+export * from '@vue/composition-api'
+
 const mock = () => () => { throw new Error('not implemented') }
 
 export const useAsyncData = mock()
 export const asyncData = mock()
-export const defineNuxtComponent = mock()
 export const useSSRRef = mock()
 export const useData = mock()
 export const useGlobalData = mock()
 export const useHydration = mock()
-export const defineNuxtPlugin = mock()

packages/bridge/src/runtime/index.mjs

@@ -1 +1,2 @@
+export * from './app'
 export * from './composables'

test/fixtures/bridge/pages/index.vue

@@ -1,3 +1,15 @@
 <template>
-  <div>Hello Vue!</div>
+  <div>Hello Vue {{ version }}!</div>
 </template>
+
+<script>
+import { defineComponent, ref } from '#app'
+
+export default defineComponent({
+  setup () {
+    return {
+      version: ref('2')
+    }
+  }
+})
+</script>