feat(bridge, nuxt3): mock vue-demi (#1849)

Co-authored-by: Pooya Parsa <pyapar@gmail.com>

packages/bridge/src/app.ts

@@ -27,6 +27,8 @@ export function setupAppBridge (_options: any) {
     '@vue/reactivity',
     '@vue/runtime-core',
     '@vue/runtime-dom',
+    // vue-demi
+    'vue-demi',
     ...[
       // vue 2 dist files
       'vue/dist/vue.common.dev',

packages/bridge/src/runtime/app.ts

@@ -4,6 +4,9 @@ import type { Vue } from 'vue/types/vue'
 import type { ComponentOptions } from 'vue'
 import { defineComponent, getCurrentInstance } from './composables'
 
+export const isVue2 = true
+export const isVue3 = false
+
 export const defineNuxtComponent = defineComponent
 
 export interface RuntimeNuxtHooks { }

packages/bridge/src/runtime/vue2-bridge.mjs

@@ -1,7 +1,14 @@
 import Vue from 'vue2'
 
-export { EffectScope, computed, createApp, createRef, customRef, defineAsyncComponent, defineComponent, del, effectScope, getCurrentInstance, getCurrentScope, h, inject, isRaw, isReactive, isReadonly, isRef, markRaw, nextTick, onActivated, onBeforeMount, onBeforeUnmount, onBeforeUpdate, onDeactivated, onErrorCaptured, onMounted, onScopeDispose, onServerPrefetch, onUnmounted, onUpdated, provide, proxyRefs, reactive, readonly, ref, set, shallowReactive, shallowReadonly, shallowRef, toRaw, toRef, toRefs, triggerRef, unref, useAttrs, useCSSModule, useCssModule, useSlots, version, warn, watch, watchEffect, watchPostEffect, watchSyncEffect } from '@vue/composition-api'
+export { EffectScope, computed, createApp, createRef, customRef, defineAsyncComponent, defineComponent, del, effectScope, getCurrentInstance, getCurrentScope, h, inject, isRaw, isReactive, isReadonly, isRef, markRaw, nextTick, onActivated, onBeforeMount, onBeforeUnmount, onBeforeUpdate, onDeactivated, onErrorCaptured, onMounted, onScopeDispose, onServerPrefetch, onUnmounted, onUpdated, provide, proxyRefs, reactive, readonly, ref, set, shallowReactive, shallowReadonly, shallowRef, toRaw, toRef, toRefs, triggerRef, unref, useAttrs, useCSSModule, useCssModule, useSlots, warn, watch, watchEffect, watchPostEffect, watchSyncEffect } from '@vue/composition-api'
 
 export const isFunction = fn => fn instanceof Function
 
 export { Vue as default }
+
+// mock for vue-demi
+export const Vue2 = Vue
+export const isVue2 = true
+export const isVue3 = false
+export const install = () => {}
+export const version = Vue.version

packages/bridge/src/vite/vite.ts

@@ -51,12 +51,14 @@ async function bundle (nuxt: Nuxt, builder: any) {
         css: resolveCSSOptions(nuxt),
         optimizeDeps: {
           exclude: [
+            ...nuxt.options.build.transpile.filter(i => typeof i === 'string'),
             'ufo',
             'date-fns',
             'nanoid',
             'vue',
             'vue2',
-            'vue2-bridge'
+            'vue2-bridge',
+            'vue-demi'
           ]
         },
         esbuild: {

packages/nuxt3/src/app/compat/capi.ts

@@ -0,0 +1,21 @@
+export * from 'vue'
+
+export const install = () => {}
+
+export function set (target, key, val) {
+  if (Array.isArray(target)) {
+    target.length = Math.max(target.length, key)
+    target.splice(key, 1, val)
+    return val
+  }
+  target[key] = val
+  return val
+}
+
+export function del (target, key) {
+  if (Array.isArray(target)) {
+    target.splice(key, 1)
+    return
+  }
+  delete target[key]
+}

packages/nuxt3/src/app/compat/legacy-app.ts

@@ -2,7 +2,7 @@ import type { IncomingMessage, ServerResponse } from 'http'
 import type { App } from 'vue'
 import type { Component } from '@vue/runtime-core'
 import mockContext from 'unenv/runtime/mock/proxy'
-import { NuxtApp, useRuntimeConfig } from './nuxt'
+import { NuxtApp, useRuntimeConfig } from '../nuxt'
 
 type Route = any
 type Store = any

packages/nuxt3/src/app/compat/vue-demi.ts

@@ -0,0 +1,5 @@
+export * from './capi'
+
+export const Vue2 = undefined
+export const isVue2 = false
+export const isVue3 = true

packages/nuxt3/src/app/composables/component.ts

@@ -2,7 +2,7 @@ import { toRefs } from '@vue/reactivity'
 import { defineComponent, getCurrentInstance } from 'vue'
 import type { DefineComponent } from 'vue'
 import { useRoute } from 'vue-router'
-import type { LegacyContext } from '../legacy'
+import type { LegacyContext } from '../compat/legacy-app'
 import { useNuxtApp } from '../nuxt'
 import { useAsyncData } from './asyncData'
 

packages/nuxt3/src/app/index.ts

@@ -1,2 +1,5 @@
 export * from './nuxt'
 export * from './composables'
+
+export const isVue2 = false
+export const isVue3 = true

packages/nuxt3/src/app/nuxt.ts

@@ -3,7 +3,7 @@ import { getCurrentInstance, reactive } from 'vue'
 import type { App, VNode } from 'vue'
 import { createHooks, Hookable } from 'hookable'
 import type { RuntimeConfig } from '@nuxt/kit'
-import { legacyPlugin, LegacyContext } from './legacy'
+import { legacyPlugin, LegacyContext } from './compat/legacy-app'
 
 type NuxtMeta = {
   htmlAttrs?: string

packages/nuxt3/src/auto-imports/imports.ts

@@ -29,6 +29,14 @@ export const Nuxt3AutoImports: AutoImportSource[] = [
       'useRouter'
     ]
   },
+  // vue-demi (mocked)
+  {
+    from: 'vue-demi',
+    names: [
+      'isVue2',
+      'isVue3'
+    ]
+  },
   // vue
   {
     from: 'vue',

packages/nuxt3/src/core/nuxt.ts

@@ -77,6 +77,8 @@ export async function loadNuxt (opts: LoadNuxtOptions): Promise<Nuxt> {
   options._majorVersion = 3
   options.buildModules.push(pagesModule, metaModule, componentsModule, autoImportsModule)
   options.modulesDir.push(resolve(pkgDir, 'node_modules'))
+  options.alias['vue-demi'] = resolve(options.appDir, 'compat/vue-demi')
+  options.alias['@vue/composition-api'] = resolve(options.appDir, 'compat/capi')
 
   const nuxt = createNuxt(options)
 

packages/vite/src/vite.ts

@@ -56,7 +56,10 @@ export async function bundle (nuxt: Nuxt) {
         },
         css: resolveCSSOptions(nuxt),
         optimizeDeps: {
-          exclude: [],
+          exclude: [
+            ...nuxt.options.build.transpile.filter(i => typeof i === 'string'),
+            'vue-demi'
+          ],
           entries: [
             resolve(nuxt.options.appDir, 'entry.ts')
           ]