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

This commit is contained in:
pooya parsa 2021-09-22 17:34:11 +02:00 committed by GitHub
parent a137d2e5ec
commit fc019b8816
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
9 changed files with 67 additions and 19 deletions

View File

@ -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

View File

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

View File

@ -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
// 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))
// })
// Resolve to same vue2 path
nuxt.options.alias.vue = nuxt.options.alias.vue ||
resolveModule('vue/dist/vue.runtime.esm.js', { paths: nuxt.options.modulesDir })
// Fix wp4 esm
nuxt.hook('webpack:config', (configs) => {

View File

@ -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
}

View File

@ -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'))

View File

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

View File

@ -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()

View File

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

View File

@ -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>