feat: add importSource option (#284)

Author: sxzz

packages/babel-sugar-composition-api-inject-h/src/index.js

@@ -1,7 +1,5 @@
 import syntaxJsx from '@babel/plugin-syntax-jsx'
 
-const importSource = '@vue/composition-api'
-
 /**
  * Check if body contains JSX
  * @param t
@@ -49,7 +47,7 @@ const remove$createElement = (t, path) => {
 }
 
 // auto import `h` from `@vue/composition-api`
-const autoImportH = (t, path) => {
+const autoImportH = (t, path, importSource) => {
   if (hasJSX(t, path)) {
     const importNodes = path
       .get('body')
@@ -68,15 +66,15 @@ const autoImportH = (t, path) => {
   }
 }
 
-export default babel => {
+export default (babel, { importSource = '@vue/composition-api' } = {}) => {
   const t = babel.types
 
   return {
     inherits: syntaxJsx,
     visitor: {
       Program(path) {
         remove$createElement(t, path)
-        autoImportH(t, path)
+        autoImportH(t, path, importSource)
       },
     },
   }

packages/babel-sugar-composition-api-inject-h/test/test.js

@@ -7,7 +7,7 @@ const transpile = src =>
     transform(
       src,
       {
-        plugins: [plugin],
+        plugins: [[plugin, { importSource: 'source' }]],
       },
       (err, result) => {
         if (err) {
@@ -35,13 +35,13 @@ const tests = [
   },
   {
     name: "Don't re-inject",
-    from: `import { h } from "@vue/composition-api";
+    from: `import { h } from "source";
 const obj = {
       method () {
         return <div>test</div>
       }
     }`,
-    to: `import { h } from "@vue/composition-api";
+    to: `import { h } from "source";
 const obj = {
   method() {
     return <div>test</div>;
@@ -56,7 +56,7 @@ const obj = {
         return <div>test</div>
       }
     }`,
-    to: `import { h } from "@vue/composition-api";
+    to: `import { h } from "source";
 const obj = {
   method() {
     return <div>test</div>;
@@ -75,7 +75,7 @@ const obj = {
         }}>test</div>
       }
     }`,
-    to: `import { h } from "@vue/composition-api";
+    to: `import { h } from "source";
 const obj = {
   method() {
     return <div foo={{
@@ -95,7 +95,7 @@ const obj = {
         return <div>test</div>
       }
     }`,
-    to: `import { h } from "@vue/composition-api";
+    to: `import { h } from "source";
 const obj = {
   get method() {
     return <div>test</div>;
@@ -110,7 +110,7 @@ const obj = {
         return <div>test</div>
       }
     }`,
-    to: `import { h } from "@vue/composition-api";
+    to: `import { h } from "source";
 const obj = {
   method(hey) {
     return <div>test</div>;
@@ -125,7 +125,7 @@ const obj = {
         return <div>test</div>
       }
     }`,
-    to: `import { h } from "@vue/composition-api";
+    to: `import { h } from "source";
 const obj = {
   render() {
     return <div>test</div>;
@@ -145,7 +145,7 @@ const obj = {
       }
     }
     }`,
-    to: `import { h } from "@vue/composition-api";
+    to: `import { h } from "source";
 const obj = {
   setup() {
     return () => {
@@ -166,7 +166,7 @@ const obj = {
       }
     }
     }`,
-    to: `import { h } from "@vue/composition-api";
+    to: `import { h } from "source";
 const obj = {
   setup2() {
     var h = this.$createElement;

packages/babel-sugar-composition-api-render-instance/src/index.js

@@ -1,7 +1,6 @@
 import syntaxJsx from '@babel/plugin-syntax-jsx'
 
-const autoImportGetCurrentInstance = (t, path) => {
-  const importSource = '@vue/composition-api'
+const autoImportGetCurrentInstance = (t, path, importSource) => {
   const importNodes = path
     .get('body')
     .filter(p => p.isImportDeclaration())
@@ -22,7 +21,7 @@ const autoImportGetCurrentInstance = (t, path) => {
 
 const injectInstanceId = '__currentInstance'
 
-export default ({ types: t }) => {
+export default ({ types: t }, { importSource = '@vue/composition-api' } = {}) => {
   return {
     inherits: syntaxJsx,
     visitor: {
@@ -35,8 +34,6 @@ export default ({ types: t }) => {
 
             let instanceInjected = false
 
-           
-
             path1.traverse({
               JSXAttribute(path2) {
                 const n = path2.get('name')
@@ -47,7 +44,7 @@ export default ({ types: t }) => {
                     const obj = path3.get('object')
                     const prop = path3.get('property')
                     if (t.isThisExpression(obj) && t.isIdentifier(prop) && ['$', '_'].includes(prop.node.name[0])) {
-                      autoImportGetCurrentInstance(t, p)
+                      autoImportGetCurrentInstance(t, p, importSource)
                       if (!instanceInjected) {
                         path1.node.value.body.body.unshift(
                           t.variableDeclaration('const', [

packages/babel-sugar-composition-api-render-instance/test/test.js

@@ -17,7 +17,7 @@ const transpile = src =>
         transform(
           result.code,
           {
-            plugins: [plugin],
+            plugins: [[plugin, { importSource: 'source' }]],
           },
           (err, result) => {
             if (err) {
@@ -45,7 +45,7 @@ const a = {
     name: 'Generic component vModel',
     from: `const a = { setup: () => { return () => <MyComponent vModel={a.b} /> } }`,
     to: `
-import { getCurrentInstance } from "@vue/composition-api";
+import { getCurrentInstance } from "source";
 const a = {
   setup: () => {
     const __currentInstance = getCurrentInstance();
@@ -63,7 +63,7 @@ const a = {
     name: 'Component vModel_number',
     from: `const a = { setup: () => { return () => <MyComponent vModel_number={a.b} /> } }`,
     to: `
-import { getCurrentInstance } from "@vue/composition-api";
+import { getCurrentInstance } from "source";
 const a = {
   setup: () => {
     const __currentInstance = getCurrentInstance();