From f298386795ffdd19dcead9b044c1fb4cb2b7c639 Mon Sep 17 00:00:00 2001 From: Anthony Fu Date: Mon, 15 Nov 2021 18:25:50 +0800 Subject: [PATCH] feat(bridge, nuxt3): mock vue-demi (#1849) Co-authored-by: Pooya Parsa --- packages/bridge/src/app.ts | 2 ++ packages/bridge/src/runtime/app.ts | 3 +++ packages/bridge/src/runtime/vue2-bridge.mjs | 9 +++++++- packages/bridge/src/vite/vite.ts | 4 +++- packages/nuxt3/src/app/compat/capi.ts | 21 +++++++++++++++++++ .../app/{legacy.ts => compat/legacy-app.ts} | 2 +- packages/nuxt3/src/app/compat/vue-demi.ts | 5 +++++ .../nuxt3/src/app/composables/component.ts | 2 +- packages/nuxt3/src/app/index.ts | 3 +++ packages/nuxt3/src/app/nuxt.ts | 2 +- packages/nuxt3/src/auto-imports/imports.ts | 8 +++++++ packages/nuxt3/src/core/nuxt.ts | 2 ++ packages/vite/src/vite.ts | 5 ++++- 13 files changed, 62 insertions(+), 6 deletions(-) create mode 100644 packages/nuxt3/src/app/compat/capi.ts rename packages/nuxt3/src/app/{legacy.ts => compat/legacy-app.ts} (98%) create mode 100644 packages/nuxt3/src/app/compat/vue-demi.ts diff --git a/packages/bridge/src/app.ts b/packages/bridge/src/app.ts index fc259e4096..1bde964325 100644 --- a/packages/bridge/src/app.ts +++ b/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', diff --git a/packages/bridge/src/runtime/app.ts b/packages/bridge/src/runtime/app.ts index 4d98e77777..d3352c4146 100644 --- a/packages/bridge/src/runtime/app.ts +++ b/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 { } diff --git a/packages/bridge/src/runtime/vue2-bridge.mjs b/packages/bridge/src/runtime/vue2-bridge.mjs index f77707a746..43cce7412c 100644 --- a/packages/bridge/src/runtime/vue2-bridge.mjs +++ b/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 diff --git a/packages/bridge/src/vite/vite.ts b/packages/bridge/src/vite/vite.ts index 2ed65beb7d..9502a54bf4 100644 --- a/packages/bridge/src/vite/vite.ts +++ b/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: { diff --git a/packages/nuxt3/src/app/compat/capi.ts b/packages/nuxt3/src/app/compat/capi.ts new file mode 100644 index 0000000000..5bbad31e0d --- /dev/null +++ b/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] +} diff --git a/packages/nuxt3/src/app/legacy.ts b/packages/nuxt3/src/app/compat/legacy-app.ts similarity index 98% rename from packages/nuxt3/src/app/legacy.ts rename to packages/nuxt3/src/app/compat/legacy-app.ts index f21ee5a655..d160a88800 100644 --- a/packages/nuxt3/src/app/legacy.ts +++ b/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 diff --git a/packages/nuxt3/src/app/compat/vue-demi.ts b/packages/nuxt3/src/app/compat/vue-demi.ts new file mode 100644 index 0000000000..c54dba1fe5 --- /dev/null +++ b/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 diff --git a/packages/nuxt3/src/app/composables/component.ts b/packages/nuxt3/src/app/composables/component.ts index 2d9ddc88da..b784c29594 100644 --- a/packages/nuxt3/src/app/composables/component.ts +++ b/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' diff --git a/packages/nuxt3/src/app/index.ts b/packages/nuxt3/src/app/index.ts index c4b91a3b54..1a9d8ae0d1 100644 --- a/packages/nuxt3/src/app/index.ts +++ b/packages/nuxt3/src/app/index.ts @@ -1,2 +1,5 @@ export * from './nuxt' export * from './composables' + +export const isVue2 = false +export const isVue3 = true diff --git a/packages/nuxt3/src/app/nuxt.ts b/packages/nuxt3/src/app/nuxt.ts index 10ac1fab8b..4038105841 100644 --- a/packages/nuxt3/src/app/nuxt.ts +++ b/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 diff --git a/packages/nuxt3/src/auto-imports/imports.ts b/packages/nuxt3/src/auto-imports/imports.ts index 0f4b38a844..fbe7e81c4f 100644 --- a/packages/nuxt3/src/auto-imports/imports.ts +++ b/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', diff --git a/packages/nuxt3/src/core/nuxt.ts b/packages/nuxt3/src/core/nuxt.ts index 70fcb2d312..5eaa1f63ae 100644 --- a/packages/nuxt3/src/core/nuxt.ts +++ b/packages/nuxt3/src/core/nuxt.ts @@ -77,6 +77,8 @@ export async function loadNuxt (opts: LoadNuxtOptions): Promise { 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) diff --git a/packages/vite/src/vite.ts b/packages/vite/src/vite.ts index e564303f21..00ca331b73 100644 --- a/packages/vite/src/vite.ts +++ b/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') ]