From e7d094ed8f36fa6a39eba8a398655eaa284a0401 Mon Sep 17 00:00:00 2001
From: Haoqun Jiang <haoqunjiang@gmail.com>
Date: Wed, 6 Jul 2022 15:34:55 +0800
Subject: [PATCH] feat: rework the `compositionAPI` option of the preset to
 support Vue 2.7

---
 packages/babel-preset-jsx/README.md    |  4 +++
 packages/babel-preset-jsx/package.json |  8 +++++-
 packages/babel-preset-jsx/src/index.js | 35 +++++++++++++++++++++++---
 3 files changed, 43 insertions(+), 4 deletions(-)

diff --git a/packages/babel-preset-jsx/README.md b/packages/babel-preset-jsx/README.md
index 2241868..dbc5e82 100644
--- a/packages/babel-preset-jsx/README.md
+++ b/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
diff --git a/packages/babel-preset-jsx/package.json b/packages/babel-preset-jsx/package.json
index c01243c..fd7f571 100644
--- a/packages/babel-preset-jsx/package.json
+++ b/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
+    }
   }
 }
diff --git a/packages/babel-preset-jsx/src/index.js b/packages/babel-preset-jsx/src/index.js
index 200cdc4..e80ffe4 100644
--- a/packages/babel-preset-jsx/src/index.js
+++ b/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),
   }