babel-plugin-transform-taroapi 4.1.10-beta.0 → 4.1.10-beta.12

package/dist/index.js

@@ -3,6 +3,19 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const lodash_1 = require("lodash");
 const plugin = function (babel) {
     const t = babel.types;
+    // 默认属性映射：将驼峰命名转换为 kebab-case（仅 H5 平台使用）
+    const DEFAULT_ATTRIBUTE_MAP = {
+        ariaRole: 'role',
+        ariaLabel: 'aria-label',
+        ariaHidden: 'aria-hidden',
+        ariaChecked: 'aria-checked',
+        ariaSelected: 'aria-selected',
+        ariaRoledescription: 'aria-roledescription',
+        ariaValuemax: 'aria-valuemax',
+        ariaValuemin: 'aria-valuemin',
+        ariaValuenow: 'aria-valuenow',
+        ariaValuetext: 'aria-valuetext',
+    };
     // 这些变量需要在每个 program 里重置
     const invokedApis = new Map();
     let taroName;
@@ -133,6 +146,18 @@ const plugin = function (babel) {
                         replaceCanIUse(ast, this.definition);
                 }
             },
+            JSXAttribute(ast) {
+                // 仅在 H5 平台进行属性转换
+                if (process.env.TARO_ENV !== 'h5')
+                    return;
+                const { name } = ast.node;
+                if (!t.isJSXIdentifier(name))
+                    return;
+                // 使用默认属性映射进行转换
+                if (DEFAULT_ATTRIBUTE_MAP[name.name]) {
+                    name.name = DEFAULT_ATTRIBUTE_MAP[name.name];
+                }
+            },
             Program: {
                 enter(ast) {
                     needDefault = false;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "babel-plugin-transform-taroapi",
-  "version": "4.1.10-beta.0",
+  "version": "4.1.10-beta.12",
   "author": "O2Team",
   "license": "MIT",
   "main": "dist/index.js",
@@ -26,6 +26,6 @@
     "test": "vitest run",
     "test:ci": "vitest run --coverage",
     "test:dev": "vitest",
-    "updateSnapshot": "vitest run --update"
+    "updateSnapshot": "vitest run --updateSnapshot"
   }
 }

package/src/index.ts

@@ -1,208 +1,234 @@
-import { isMatchWith, setWith } from 'lodash'
-
-import type * as BabelCore from '@babel/core'
-
-interface IState extends BabelCore.PluginPass {
-  apis: Set<string>
-  bindingName: string
-  packageName: string
-  canIUse: string
-  definition: Record<string, any>
-}
-
-const plugin = function (babel: typeof BabelCore): BabelCore.PluginObj<IState> {
-  const t = babel.types
-
-  // 这些变量需要在每个 program 里重置
-  const invokedApis: Map<string, string> = new Map()
-  let taroName: string
-  let needDefault: boolean
-
-  let referTaro: any[]
-
-  function canIUse (definition, scheme = '') {
-    if (!scheme) return false
-    const o = setWith({}, scheme, true, Object)
-    return isMatchWith(definition, o, (a, b) => {
-      if (a === '*' || b === true) return true
-    })
-  }
-
-  function replaceCanIUse (ast: BabelCore.NodePath<BabelCore.types.CallExpression>, definition) {
-    const args = ast.node.arguments
-
-    if (args.length < 1) return
-
-    // Note: 暂不考虑其他类型的参数映射
-    if (t.isStringLiteral(args[0])) {
-      const isSupported = canIUse(definition, args[0].value)
-      ast.replaceInline(t.booleanLiteral(isSupported))
-    }
-  }
-
-  return {
-    name: 'babel-plugin-transform-taro-api',
-    pre () {
-      const { opts = {} as any } = this
-      const { apis = new Set<string>(), bindingName = 'Taro', packageName = '@tarojs/taro-h5', definition = {} } = opts
-      this.definition = {
-        ...definition.apis,
-        ...definition.components,
-        [this.canIUse]: '*'
-      }
-      this.bindingName = bindingName
-      this.packageName = packageName
-      this.canIUse = 'canIUse'
-      if (apis.size < 1) {
-        apis.add(this.canIUse)
-        Object.keys(definition.apis || {}).forEach(key => apis.add(key))
-      }
-      this.apis = apis
-    },
-    visitor: {
-      ImportDeclaration (ast: BabelCore.NodePath<any>) {
-        if (ast.node.source.value !== this.packageName) return
-
-        ast.node.specifiers.forEach(node => {
-          if (t.isImportDefaultSpecifier(node)) {
-            needDefault = true
-            taroName = node.local.name
-          } else if (t.isImportSpecifier(node)) {
-            const { imported } = node
-            const propertyName = t.isIdentifier(imported) ? imported.name : imported.value
-            if (this.apis.has(propertyName)) { // 记录 api 名字
-              ast.scope.rename(node.local.name)
-              invokedApis.set(propertyName, node.local.name)
-            } else { // 如果是未实现的 api 改成 Taro.xxx
-              needDefault = true
-              const localName = node.local.name
-              const binding = ast.scope.getBinding(localName)
-              const idn = t.identifier(taroName)
-              referTaro.push(idn)
-              binding && binding.referencePaths.forEach(reference => {
-                reference.replaceWith(
-                  t.memberExpression(
-                    idn,
-                    t.identifier(propertyName)
-                  ) as any
-                )
-              })
-            }
-          }
-        })
-      },
-      MemberExpression (ast: BabelCore.NodePath<any>) {
-        /* 处理 Taro.xxx */
-        const isTaro = t.isIdentifier(ast.node.object, { name: taroName })
-        const property = ast.node.property
-        let propertyName: string | null = null
-        let propName = 'name'
-
-        if (!isTaro) return
-
-        // 兼容一下 Taro['xxx']
-        if (t.isStringLiteral(property)) {
-          propName = 'value'
-        }
-        propertyName = property[propName]
-
-        if (!propertyName) return
-
-        // 同一 api 使用多次，读取变量名
-        if (this.apis.has(propertyName)) {
-          const parentNode = ast.parent as BabelCore.types.AssignmentExpression
-          const isAssignment = t.isAssignmentExpression(parentNode) && parentNode.left === ast.node
-
-          if (!isAssignment) {
-            let identifier: BabelCore.types.Identifier
-            if (invokedApis.has(propertyName)) {
-              identifier = t.identifier(invokedApis.get(propertyName)!)
-            } else {
-              const newPropertyName = ast.scope.generateUid(propertyName)
-              invokedApis.set(propertyName, newPropertyName)
-              /* 未绑定作用域 */
-              identifier = t.identifier(newPropertyName)
-            }
-            ast.replaceWith(identifier as any)
-          }
-        } else {
-          needDefault = true
-        }
-      },
-      CallExpression (ast: BabelCore.NodePath<any>) {
-        if (!ast.scope.hasReference(this.canIUse)) return
-        const callee = ast.node.callee
-        if (t.isMemberExpression(callee) && t.isIdentifier(callee.object, { name: taroName })) {
-          let propertyName: string | null = null
-          let propName = 'name'
-
-          // 兼容一下 Taro['xxx']
-          if (t.isStringLiteral(callee.property)) {
-            propName = 'value'
-          }
-          propertyName = callee.property[propName]
-          if (propertyName === this.canIUse) {
-            // Taro.canIUse or Taro['canIUse']
-            replaceCanIUse(ast, this.definition)
-          }
-        } else if (invokedApis.has(this.canIUse)) {
-          const { name } = t.identifier(invokedApis.get(this.canIUse)!)
-          const isCanIUse = t.isIdentifier(callee, { name })
-          // canIUse as _canIUse
-          if (isCanIUse) replaceCanIUse(ast, this.definition)
-        }
-      },
-      Program: {
-        enter (ast) {
-          needDefault = false
-          referTaro = []
-          invokedApis.clear()
-
-          taroName = ast.scope.getBinding(this.bindingName)
-            ? ast.scope.generateUid(this.bindingName)
-            : this.bindingName
-        },
-        exit (ast) {
-          const that = this
-          // 防止重复引入
-          let isTaroApiImported = false
-          referTaro.forEach(node => {
-            node.name = taroName
-          })
-
-          ast.traverse({
-            ImportDeclaration (ast) {
-              const isImportingTaroApi = ast.node.source.value === that.packageName
-              if (!isImportingTaroApi) return
-              if (isTaroApiImported) return ast.remove()
-              isTaroApiImported = true
-              const namedImports = Array.from(invokedApis.entries()).map(([imported, local]) => t.importSpecifier(t.identifier(local), t.identifier(imported)))
-              if (needDefault) {
-                const defaultImport = t.importDefaultSpecifier(t.identifier(taroName))
-                ast.node.specifiers = [
-                  defaultImport,
-                  ...namedImports
-                ]
-                needDefault = false
-              } else {
-                ast.node.specifiers = namedImports
-              }
-            },
-            CallExpression (ast: BabelCore.NodePath<any>) {
-              if (!invokedApis.has(that.canIUse)) return
-              const callee = ast.node.callee
-              const { name } = t.identifier(invokedApis.get(that.canIUse)!)
-              const isCanIUse = t.isIdentifier(callee, { name })
-              if (isCanIUse) {
-                // canIUse as _use
-                replaceCanIUse(ast, that.definition)
-              }
-            },
-          })
-        }
-      }
-    }
-  }
-}
-
-export default plugin
+import { isMatchWith, setWith } from 'lodash'
+
+import type * as BabelCore from '@babel/core'
+
+interface IState extends BabelCore.PluginPass {
+  apis: Set<string>
+  bindingName: string
+  packageName: string
+  canIUse: string
+  definition: Record<string, any>
+}
+
+const plugin = function (babel: typeof BabelCore): BabelCore.PluginObj<IState> {
+  const t = babel.types
+
+  // 默认属性映射：将驼峰命名转换为 kebab-case（仅 H5 平台使用）
+  const DEFAULT_ATTRIBUTE_MAP: Record<string, string> = {
+    ariaRole: 'role',
+    ariaLabel: 'aria-label',
+    ariaHidden: 'aria-hidden',
+    ariaChecked: 'aria-checked',
+    ariaSelected: 'aria-selected',
+    ariaRoledescription: 'aria-roledescription',
+    ariaValuemax: 'aria-valuemax',
+    ariaValuemin: 'aria-valuemin',
+    ariaValuenow: 'aria-valuenow',
+    ariaValuetext: 'aria-valuetext',
+  }
+
+  // 这些变量需要在每个 program 里重置
+  const invokedApis: Map<string, string> = new Map()
+  let taroName: string
+  let needDefault: boolean
+
+  let referTaro: any[]
+
+  function canIUse (definition, scheme = '') {
+    if (!scheme) return false
+    const o = setWith({}, scheme, true, Object)
+    return isMatchWith(definition, o, (a, b) => {
+      if (a === '*' || b === true) return true
+    })
+  }
+
+  function replaceCanIUse (ast: BabelCore.NodePath<BabelCore.types.CallExpression>, definition) {
+    const args = ast.node.arguments
+
+    if (args.length < 1) return
+
+    // Note: 暂不考虑其他类型的参数映射
+    if (t.isStringLiteral(args[0])) {
+      const isSupported = canIUse(definition, args[0].value)
+      ast.replaceInline(t.booleanLiteral(isSupported))
+    }
+  }
+
+  return {
+    name: 'babel-plugin-transform-taro-api',
+    pre () {
+      const { opts = {} as any } = this
+      const { apis = new Set<string>(), bindingName = 'Taro', packageName = '@tarojs/taro-h5', definition = {} } = opts
+      this.definition = {
+        ...definition.apis,
+        ...definition.components,
+        [this.canIUse]: '*'
+      }
+      this.bindingName = bindingName
+      this.packageName = packageName
+      this.canIUse = 'canIUse'
+      if (apis.size < 1) {
+        apis.add(this.canIUse)
+        Object.keys(definition.apis || {}).forEach(key => apis.add(key))
+      }
+      this.apis = apis
+    },
+    visitor: {
+      ImportDeclaration (ast: BabelCore.NodePath<any>) {
+        if (ast.node.source.value !== this.packageName) return
+
+        ast.node.specifiers.forEach(node => {
+          if (t.isImportDefaultSpecifier(node)) {
+            needDefault = true
+            taroName = node.local.name
+          } else if (t.isImportSpecifier(node)) {
+            const { imported } = node
+            const propertyName = t.isIdentifier(imported) ? imported.name : imported.value
+            if (this.apis.has(propertyName)) { // 记录 api 名字
+              ast.scope.rename(node.local.name)
+              invokedApis.set(propertyName, node.local.name)
+            } else { // 如果是未实现的 api 改成 Taro.xxx
+              needDefault = true
+              const localName = node.local.name
+              const binding = ast.scope.getBinding(localName)
+              const idn = t.identifier(taroName)
+              referTaro.push(idn)
+              binding && binding.referencePaths.forEach(reference => {
+                reference.replaceWith(
+                  t.memberExpression(
+                    idn,
+                    t.identifier(propertyName)
+                  ) as any
+                )
+              })
+            }
+          }
+        })
+      },
+      MemberExpression (ast: BabelCore.NodePath<any>) {
+        /* 处理 Taro.xxx */
+        const isTaro = t.isIdentifier(ast.node.object, { name: taroName })
+        const property = ast.node.property
+        let propertyName: string | null = null
+        let propName = 'name'
+
+        if (!isTaro) return
+
+        // 兼容一下 Taro['xxx']
+        if (t.isStringLiteral(property)) {
+          propName = 'value'
+        }
+        propertyName = property[propName]
+
+        if (!propertyName) return
+
+        // 同一 api 使用多次，读取变量名
+        if (this.apis.has(propertyName)) {
+          const parentNode = ast.parent as BabelCore.types.AssignmentExpression
+          const isAssignment = t.isAssignmentExpression(parentNode) && parentNode.left === ast.node
+
+          if (!isAssignment) {
+            let identifier: BabelCore.types.Identifier
+            if (invokedApis.has(propertyName)) {
+              identifier = t.identifier(invokedApis.get(propertyName)!)
+            } else {
+              const newPropertyName = ast.scope.generateUid(propertyName)
+              invokedApis.set(propertyName, newPropertyName)
+              /* 未绑定作用域 */
+              identifier = t.identifier(newPropertyName)
+            }
+            ast.replaceWith(identifier as any)
+          }
+        } else {
+          needDefault = true
+        }
+      },
+      CallExpression (ast: BabelCore.NodePath<any>) {
+        if (!ast.scope.hasReference(this.canIUse)) return
+        const callee = ast.node.callee
+        if (t.isMemberExpression(callee) && t.isIdentifier(callee.object, { name: taroName })) {
+          let propertyName: string | null = null
+          let propName = 'name'
+
+          // 兼容一下 Taro['xxx']
+          if (t.isStringLiteral(callee.property)) {
+            propName = 'value'
+          }
+          propertyName = callee.property[propName]
+          if (propertyName === this.canIUse) {
+            // Taro.canIUse or Taro['canIUse']
+            replaceCanIUse(ast, this.definition)
+          }
+        } else if (invokedApis.has(this.canIUse)) {
+          const { name } = t.identifier(invokedApis.get(this.canIUse)!)
+          const isCanIUse = t.isIdentifier(callee, { name })
+          // canIUse as _canIUse
+          if (isCanIUse) replaceCanIUse(ast, this.definition)
+        }
+      },
+      JSXAttribute (ast: BabelCore.NodePath<any>) {
+        // 仅在 H5 平台进行属性转换
+        if (process.env.TARO_ENV !== 'h5') return
+
+        const { name } = ast.node
+        if (!t.isJSXIdentifier(name)) return
+
+        // 使用默认属性映射进行转换
+        if (DEFAULT_ATTRIBUTE_MAP[name.name]) {
+          name.name = DEFAULT_ATTRIBUTE_MAP[name.name]
+        }
+      },
+      Program: {
+        enter (ast) {
+          needDefault = false
+          referTaro = []
+          invokedApis.clear()
+
+          taroName = ast.scope.getBinding(this.bindingName)
+            ? ast.scope.generateUid(this.bindingName)
+            : this.bindingName
+        },
+        exit (ast) {
+          const that = this
+          // 防止重复引入
+          let isTaroApiImported = false
+          referTaro.forEach(node => {
+            node.name = taroName
+          })
+
+          ast.traverse({
+            ImportDeclaration (ast) {
+              const isImportingTaroApi = ast.node.source.value === that.packageName
+              if (!isImportingTaroApi) return
+              if (isTaroApiImported) return ast.remove()
+              isTaroApiImported = true
+              const namedImports = Array.from(invokedApis.entries()).map(([imported, local]) => t.importSpecifier(t.identifier(local), t.identifier(imported)))
+              if (needDefault) {
+                const defaultImport = t.importDefaultSpecifier(t.identifier(taroName))
+                ast.node.specifiers = [
+                  defaultImport,
+                  ...namedImports
+                ]
+                needDefault = false
+              } else {
+                ast.node.specifiers = namedImports
+              }
+            },
+            CallExpression (ast: BabelCore.NodePath<any>) {
+              if (!invokedApis.has(that.canIUse)) return
+              const callee = ast.node.callee
+              const { name } = t.identifier(invokedApis.get(that.canIUse)!)
+              const isCanIUse = t.isIdentifier(callee, { name })
+              if (isCanIUse) {
+                // canIUse as _use
+                replaceCanIUse(ast, that.definition)
+              }
+            },
+          })
+        }
+      }
+    }
+  }
+}
+
+export default plugin

package/tests/__snapshots__/harmony.spec.ts.snap

@@ -101,3 +101,105 @@ _getStorage();
 _setStorage();
 export { Taro };"
 `;
+
+exports[`babel-plugin-transform-taroapi should canIUse support scheme with numeric attributes! 1`] = `
+"import { canIUse as _canUse } from '@tarojs/taro-h5';
+// 入参带有数字属性的对象路径
+true;
+true;"
+`;
+
+exports[`babel-plugin-transform-taroapi should canIUse support! 1`] = `
+"import { canIUse as _canUse } from '@tarojs/taro-h5';
+// 对象的属性或方法
+false;
+false;
+false;
+false;
+
+// 接口参数、回调或者返回值
+true;
+false;
+false;
+false;
+false;
+true;
+
+// 组件的属性
+true;
+true;
+true;"
+`;
+
+exports[`babel-plugin-transform-taroapi should canIUse work or skip! 1`] = `
+"import Taro from '@tarojs/taro-h5';
+function canIUse() {}
+false;
+false;
+canIUse('showToast.object.image');"
+`;
+
+exports[`babel-plugin-transform-taroapi should leave other apis untouched 1`] = `
+"import Taro from '@tarojs/taro-h5';
+Taro.noop;"
+`;
+
+exports[`babel-plugin-transform-taroapi should move static apis under "Taro" 1`] = `
+"import Taro from '@tarojs/taro-h5';
+Taro.noop;
+Taro.noop();"
+`;
+
+exports[`babel-plugin-transform-taroapi should not go wrong when using an api twice 1`] = `
+"import Taro, { createAnimation as _createAnimation } from '@tarojs/taro-h5';
+const animation = _createAnimation({
+  duration: dura * 1000,
+  timingFunction: 'linear'
+});
+const resetAnimation = _createAnimation({
+  duration: 0,
+  timingFunction: 'linear'
+});"
+`;
+
+exports[`babel-plugin-transform-taroapi should not import taro duplicity 1`] = `
+"import Taro, { createAnimation as _createAnimation, initPxTransform as _initPxTransform } from '@tarojs/taro-h5';
+Taro.Component;
+_createAnimation();
+_initPxTransform();"
+`;
+
+exports[`babel-plugin-transform-taroapi should preserve assignments in left hands 1`] = `
+"import Taro, { createAnimation as _createAnimation, request as _request } from '@tarojs/taro-h5';
+let animation;
+animation = _createAnimation({
+  transformOrigin: "50% 50%",
+  duration: 1000,
+  timingFunction: "ease",
+  delay: 0
+});
+_request();
+Taro.request = '';
+Taro['request'] = '';"
+`;
+
+exports[`babel-plugin-transform-taroapi should preserve default imports 1`] = `
+"import Taro from '@tarojs/taro-h5';
+console.log(Taro);"
+`;
+
+exports[`babel-plugin-transform-taroapi should support rename of imported names 1`] = `
+"// import { inject as mobxInject, observer as mobxObserver } from '@tarojs/mobx'
+import Taro from '@tarojs/taro-h5';
+export class Connected extends Taro.Component {}"
+`;
+
+exports[`babel-plugin-transform-taroapi should work! 1`] = `
+"import Taro, { setStorage as _setStorage, initPxTransform as _initPxTransform, getStorage as _getStorage } from '@tarojs/taro-h5';
+_initPxTransform(Taro.param);
+_initPxTransform();
+_initPxTransform();
+_getStorage();
+_setStorage();
+export { Taro };"
+`;

package/tests/__snapshots__/index.spec.ts.snap

@@ -94,3 +94,98 @@ _getStorage();
 _setStorage();
 export { Taro };"
 `;
+
+exports[`babel-plugin-transform-taroapi should canIUse support! 1`] = `
+"import { canIUse as _canUse } from '@tarojs/taro-h5';
+// 对象的属性或方法
+false;
+false;
+false;
+false;
+
+// 接口参数、回调或者返回值
+true;
+false;
+false;
+false;
+false;
+true;
+
+// 组件的属性
+true;
+true;
+false;"
+`;
+
+exports[`babel-plugin-transform-taroapi should canIUse work or skip! 1`] = `
+"import Taro from '@tarojs/taro-h5';
+function canIUse() {}
+false;
+false;
+canIUse('showToast.object.image');"
+`;
+
+exports[`babel-plugin-transform-taroapi should leave other apis untouched 1`] = `
+"import Taro from '@tarojs/taro-h5';
+Taro.noop;"
+`;
+
+exports[`babel-plugin-transform-taroapi should move static apis under "Taro" 1`] = `
+"import Taro from '@tarojs/taro-h5';
+Taro.noop;
+Taro.noop();"
+`;
+
+exports[`babel-plugin-transform-taroapi should not go wrong when using an api twice 1`] = `
+"import Taro, { createAnimation as _createAnimation } from '@tarojs/taro-h5';
+const animation = _createAnimation({
+  duration: dura * 1000,
+  timingFunction: 'linear'
+});
+const resetAnimation = _createAnimation({
+  duration: 0,
+  timingFunction: 'linear'
+});"
+`;
+
+exports[`babel-plugin-transform-taroapi should not import taro duplicity 1`] = `
+"import Taro, { createAnimation as _createAnimation, initPxTransform as _initPxTransform } from '@tarojs/taro-h5';
+Taro.Component;
+_createAnimation();
+_initPxTransform();"
+`;
+
+exports[`babel-plugin-transform-taroapi should preserve assignments in left hands 1`] = `
+"import Taro, { createAnimation as _createAnimation, request as _request } from '@tarojs/taro-h5';
+let animation;
+animation = _createAnimation({
+  transformOrigin: "50% 50%",
+  duration: 1000,
+  timingFunction: "ease",
+  delay: 0
+});
+_request();
+Taro.request = '';
+Taro['request'] = '';"
+`;
+
+exports[`babel-plugin-transform-taroapi should preserve default imports 1`] = `
+"import Taro from '@tarojs/taro-h5';
+console.log(Taro);"
+`;
+
+exports[`babel-plugin-transform-taroapi should support rename of imported names 1`] = `
+"// import { inject as mobxInject, observer as mobxObserver } from '@tarojs/mobx'
+import Taro from '@tarojs/taro-h5';
+export class Connected extends Taro.Component {}"
+`;
+
+exports[`babel-plugin-transform-taroapi should work! 1`] = `
+"import Taro, { setStorage as _setStorage, initPxTransform as _initPxTransform, getStorage as _getStorage } from '@tarojs/taro-h5';
+_initPxTransform(Taro.param);
+_initPxTransform();
+_initPxTransform();
+_getStorage();
+_setStorage();
+export { Taro };"
+`;