feat: support vue 2.7 (#162)

.github/test.js

@@ -8,7 +8,8 @@ const [agent, version, type = 'commonjs'] = process.argv.slice(2)
 const ROOT = resolve(__dirname, '..')
 const DIR = resolve(ROOT, `../vue-demi-test-${type}`)
 
-const isVue2 = version === '2'
+const isVue2 = version.startsWith('2')
+const isVue27 = version.startsWith('2.7')
 const isCjs = type === 'commonjs'
 
 function pack() {
@@ -21,20 +22,24 @@ function installDeps() {
 
   let installCmd = agent === 'yarn' ? `${agent} add` : `${agent} i`
 
-  execSync(`${installCmd} ${isVue2 ? 'vue@2 @vue/composition-api' : 'vue@3'}`, { cwd: DIR, stdio: 'inherit' })
+  const packages = isVue27 ? 'vue@v2-alpha' : isVue2 ? `vue@2.6 @vue/composition-api` : 'vue@3'
+  execSync(`${installCmd} ${packages}`, { cwd: DIR, stdio: 'inherit' })
   execSync(`${installCmd} ${agent === 'yarn' ? `file:${tarball}` : tarball} --force`, { cwd: DIR, stdio: 'inherit' })
 }
 
 function prepareTestPackage(type = 'commonjs') {
-  if (fs.existsSync(DIR)) 
-    fs.rmSync(DIR, { recursive: true })
+  if (fs.existsSync(DIR)) fs.rmSync(DIR, { recursive: true })
 
   fs.mkdirSync(DIR)
-  fs.writeFileSync(join(DIR, 'package.json'), JSON.stringify({
-    name: `vue-demi-test-${type}`,
-    version: packageVersion,
-    type,
-  }), 'utf-8')
+  fs.writeFileSync(
+    join(DIR, 'package.json'),
+    JSON.stringify({
+      name: `vue-demi-test-${type}`,
+      version: packageVersion,
+      type,
+    }),
+    'utf-8'
+  )
 
   installDeps()
 }
@@ -56,21 +61,53 @@ if (!isCjs && !/export\s\{\n\s\sVue,\n\s\sVue2,\n\s\sisVue2/gm.test(mod)) {
   failed = true
 }
 
+const outputVersion = execSync(`node -e "console.log(require('vue-demi').version)"`, { cwd: DIR }).toString().trim()
+console.log('version: ' + outputVersion)
+
 // isVue2
 const is2 = execSync(`node -e "console.log(require('vue-demi').isVue2)"`, { cwd: DIR }).toString().trim()
 
 if (is2 !== `${isVue2}`) {
-  console.log(`isVue2: ${is2} === ${isVue2}`)
+  console.log(`isVue2: ${is2} !== ${isVue2}`)
   failed = true
 }
 
 const hasVue2 = execSync(`node -e "console.log(require('vue-demi').Vue2 !== undefined)"`, { cwd: DIR }).toString().trim()
 
 if (hasVue2 !== `${isVue2}`) {
-  console.log(`hasVue2: ${hasVue2} === ${isVue2}`)
+  console.log(`hasVue2: ${hasVue2} !== ${isVue2}`)
+  failed = true
+}
+
+const importCJS = `const { ref, computed } = require('vue-demi');`
+const importESM = `const { ref, computed } = await import('vue-demi');`
+
+const snippet = `
+let a = ref(12)
+let b = computed(() => a.value * 2)
+console.log(b.value)
+a.value += 1
+console.log(b.value)
+`
+  .replace(/\n/g, ';')
+  .trim()
+
+// ref
+const refCJS = execSync(`node -e "${importCJS}${snippet}"`, { cwd: DIR }).toString().trim()
+if (refCJS !== `24\n26`) {
+  console.log(`ref(cjs): ${refCJS} !== 24\n26`)
   failed = true
 }
 
+// TODO: 2.7's ESM can't runs in Node currently
+if (!isVue27) {
+  const refESM = execSync(`node -e "(async ()=>{${importESM}${snippet}})()"`, { cwd: DIR }).toString().trim()
+  if (refESM !== `24\n26`) {
+    console.log(`ref(esm): ${refESM} !== 24\n26`)
+    failed = true
+  }
+}
+
 if (failed) {
   setTimeout(() => {
     process.exit(1)

.github/workflows/test.yml

@@ -10,9 +10,9 @@ jobs:
   npm:
     strategy:
       matrix:
-        node: [12.x, 15.x]
+        node: [14.x, 16.x]
         os: [ubuntu-latest]
-        vue: [2, 3]
+        vue: [2.6, 2.7, 3]
       fail-fast: false
 
     runs-on: ${{ matrix.os }}
@@ -30,9 +30,9 @@ jobs:
   yarn:
     strategy:
       matrix:
-        node: [12.x, 14.x]
+        node: [14.x, 16.x]
         os: [ubuntu-latest]
-        vue: [2, 3]
+        vue: [2.6, 2.7, 3]
         yarn: [latest, berry]
         type: [commonjs, module]
 
@@ -52,9 +52,9 @@ jobs:
   pnpm:
     strategy:
       matrix:
-        node: [12.x, 14.x]
+        node: [14.x, 16.x]
         os: [ubuntu-latest]
-        vue: [2, 3]
+        vue: [2.6, 2.7, 3]
 
     runs-on: ${{ matrix.os }}
 

lib/index.iife.js

@@ -3,7 +3,34 @@
     return VueDemi
   }
   if (Vue) {
-    if (Vue.version.slice(0, 2) === '2.') {
+    if (Vue.version.slice(0, 4) === '2.7.') {
+      for (var key in Vue) {
+        VueDemi[key] = Vue[key]
+      }
+      VueDemi.isVue2 = true
+      VueDemi.isVue3 = false
+      VueDemi.install = function (){}
+      VueDemi.Vue = Vue
+      VueDemi.Vue2 = Vue
+      VueDemi.version = Vue.version
+      VueDemi.set = function(target, key, val) {
+        if (Array.isArray(target)) {
+          target.length = Math.max(target.length, key)
+          target.splice(key, 1, val)
+          return val
+        }
+        Vue.set(target, key, val)
+        return val
+      }
+      VueDemi.del = function(target, key) {
+        if (Array.isArray(target)) {
+          target.splice(key, 1)
+          return
+        }
+        Vue.delete(target, key)
+      }
+    }
+    else if (Vue.version.slice(0, 2) === '2.') {
       if (VueCompositionAPI) {
         for (var key in VueCompositionAPI) {
           VueDemi[key] = VueCompositionAPI[key]

lib/v2.7/index.cjs

@@ -0,0 +1,29 @@
+var Vue = require('vue')
+
+Object.keys(Vue).forEach(function(key) {
+  exports[key] = Vue[key]
+})
+
+exports.set = function(target, key, val) {
+  if (Array.isArray(target)) {
+    target.length = Math.max(target.length, key)
+    target.splice(key, 1, val)
+    return val
+  }
+  Vue.set(target, key, val)
+  return val
+}
+
+exports.del = function(target, key) {
+  if (Array.isArray(target)) {
+    target.splice(key, 1)
+    return
+  }
+  Vue.delete(target, key)
+}
+
+exports.Vue = Vue
+exports.Vue2 = Vue
+exports.isVue2 = true
+exports.isVue3 = false
+exports.install = function(){}

lib/v2.7/index.d.ts

@@ -0,0 +1,31 @@
+import Vue from 'vue'
+import type { PluginFunction, PluginObject } from 'vue'
+declare const isVue2: boolean
+declare const isVue3: boolean
+declare const Vue2: Vue | undefined
+declare const version: string
+declare const install: (vue?: Vue) => void
+/**
+ * @deprecated To avoid bringing in all the tree-shakable modules, this API has been deprecated. Use `Vue2` or named exports instead.
+ * Refer to https://github.com/vueuse/vue-demi/issues/41
+ */
+declare const V: Vue
+
+/**
+ * DebuggerEvent is a Vue 3 development only feature. This type cannot exist in Vue 2.
+ */
+export declare type DebuggerEvent = never
+
+// accept no generic because Vue 3 doesn't accept any
+// https://github.com/vuejs/vue-next/pull/2758/
+export declare type Plugin = PluginObject<any> | PluginFunction<any>
+export type { VNode } from 'vue'
+export * from 'vue'
+export {
+  V as Vue,
+  Vue2,
+  isVue2,
+  isVue3,
+  version,
+  install,
+}

lib/v2.7/index.mjs

@@ -0,0 +1,34 @@
+import Vue from 'vue'
+
+var isVue2 = true
+var isVue3 = false
+var Vue2 = Vue
+
+function 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
+  }
+  Vue.set(target, key, val)
+  return val
+}
+
+export function del(target, key) {
+  if (Array.isArray(target)) {
+    target.splice(key, 1)
+    return
+  }
+  Vue.delete(target, key)
+}
+
+export * from 'vue'
+export {
+  Vue,
+  Vue2,
+  isVue2,
+  isVue3,
+  install,
+}

scripts/postinstall.js

@@ -5,6 +5,9 @@ const Vue = loadModule('vue')
 if (!Vue || typeof Vue.version !== 'string') {
   console.warn('[vue-demi] Vue is not found. Please run "npm install vue" to install.')
 }
+else if (Vue.version.startsWith('2.7.')) {
+  switchVersion(2.7)
+}
 else if (Vue.version.startsWith('2.')) {
   switchVersion(2)
 }

scripts/switch-cli.js

@@ -3,10 +3,13 @@ const { switchVersion } = require('./utils')
 const version = process.argv[2]
 const vueEntry = process.argv[3] || 'vue'
 
-if (version == '2') {
+if (version === '2.7') {
+  switchVersion(2.7, vueEntry)
+  console.log(`[vue-demi] Switched for Vue 2.7 (entry: "${vueEntry}")`)
+} else if (version === '2') {
   switchVersion(2, vueEntry)
   console.log(`[vue-demi] Switched for Vue 2 (entry: "${vueEntry}")`)
-} else if (version == '3') {
+} else if (version === '3') {
   switchVersion(3, vueEntry)
   console.log(`[vue-demi] Switched for Vue 3 (entry: "${vueEntry}")`)
 } else {