feat: rework the compositionAPI option of the preset to support Vue 2.7

Author: haoqunjiang

packages/babel-preset-jsx/README.md

@@ -44,6 +44,10 @@ module.exports = {
 Options are:
 
 - `compositionAPI` - Enables [@vue/babel-sugar-composition-api-inject-h](../babel-sugar-composition-api-inject-h) and [@vue/babel-sugar-composition-api-render-instance](../babel-sugar-composition-api-render-instance), support returning render function in `setup`.
+  - The default value is `false`;
+  - When set to `'auto'` (or `true`), it will detect the Vue version in the project. If it's >= 2.7, it will import the composition utilities from `vue`, otherwise from `@vue/composition-api`;
+  - When set to `'native'` (or `'naruto'`), it will always import the composition utilities from `vue`
+  - When set to `plugin`, it will always import the composition utilities from `@vue/composition-api`
 - `functional` [@vue/babel-sugar-functional-vue](../babel-sugar-functional-vue/README.md) - Functional components syntactic sugar
 - `injectH` [@vue/babel-sugar-inject-h](../babel-sugar-inject-h/README.md) - Automatic `h` injection syntactic sugar
 - `vModel` [@vue/babel-sugar-v-model](../babel-sugar-v-model/README.md) - `vModel` syntactic sugar

packages/babel-preset-jsx/package.json

@@ -30,6 +30,12 @@
     "rollup-plugin-babel-minify": "^6.2.0"
   },
   "peerDependencies": {
-    "@babel/core": "^7.0.0-0"
+    "@babel/core": "^7.0.0-0",
+    "vue": "2.x"
+  },
+  "peerDependenciesMeta": {
+    "vue": {
+      "optional": true
+    }
   }
 }

packages/babel-preset-jsx/src/index.js

@@ -6,14 +6,43 @@ import babelSugarCompositionApiRenderInstance from '@vue/babel-sugar-composition
 import babelSugarVModel from '@vue/babel-sugar-v-model'
 import babelSugarVOn from '@vue/babel-sugar-v-on'
 
-export default (_, { functional = true, injectH = true, vModel = true, vOn = true, compositionAPI = false } = {}) => {
+export default (_, {
+  functional = true,
+  injectH = true,
+  vModel = true,
+  vOn = true,
+  compositionAPI = false
+} = {}) => {
+  // compositionAPI: 'auto' | 'native' | 'plugin' | false
+  // legacy: compositionAPI: true (equivalent to 'auto')
+  // bonus:  compositionAPI: 'naruto' (equivalent to 'native')
+  let injectHPlugin = babelSugarInjectH
+  let importSource = '@vue/composition-api'
+
+  if (compositionAPI) {
+    if (compositionAPI === 'native' || compositionAPI === 'naruto') {
+      importSource = 'vue'
+    }
+
+    if (compositionAPI === 'auto' || compositionAPI === true) {
+      try {
+        const vueVersion = require('vue/package.json').version
+        if (vueVersion.startsWith('2.7')) {
+          importSource = 'vue'
+        }
+      } catch (e) {}
+    }
+
+    injectHPlugin = [babelSugarCompositionApiInjectH, { importSource }]
+  }
+
   return {
     plugins: [
       functional && babelSugarFunctionalVue,
-      injectH && (compositionAPI ? babelSugarCompositionApiInjectH : babelSugarInjectH),
+      injectH && injectHPlugin,
       vModel && babelSugarVModel,
       vOn && babelSugarVOn,
-      compositionAPI && babelSugarCompositionApiRenderInstance,
+      compositionAPI && [babelSugarCompositionApiRenderInstance, { importSource }],
       babelPluginTransformVueJsx,
     ].filter(Boolean),
   }