feat: 添加小程自定义属性data-class

zahoorwang · Oct 21, 2020 · a5c7998 · a5c7998
1 parent 623071c
commit a5c7998
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 9 deletions.
diff --git a/packages/chameleon-loader/src/loader.js b/packages/chameleon-loader/src/loader.js
@@ -202,6 +202,7 @@ module.exports = function (content) {
     let {source, usedBuildInTagMap = {}} = compileTemplate(templateContent, cmlType, {
       buildInComponents,
       cmss,
+      media,
       ...options
     });
     // currentUsedBuildInTagMap 中 key为  cml-builtin-button

diff --git a/packages/chameleon-template-parse/src/parser/parse-class.js b/packages/chameleon-template-parse/src/parser/parse-class.js
@@ -79,7 +79,7 @@ parseClass.tap('weex-cml', (args) => {
 
 })
 parseClass.tap('wx-alipay-baidu-cml', (args) => {
-  let { node, type, options: {lang, filePath, usingComponents, isInjectBaseStyle} } = args;
+  let { node, type, options: { media, lang, filePath, usingComponents, isInjectBaseStyle } } = args;
   // type === 'wx' || type === 'alipay' || type === 'baidu'
   if (lang === 'cml' && (['wx', 'qq', 'baidu', 'alipay', 'tt'].includes(type))) {
     let tagName = node.openingElement.name.name;
@@ -106,14 +106,20 @@ parseClass.tap('wx-alipay-baidu-cml', (args) => {
         extraClass = `${extraClass} cml-${randomClassName}` // 不插入全局样式的时候也要插入样式隔离
       }
     }
+    let chameleonConfig = cml.config.get()[type][media];
+    const hasMiniAppCustomDataClass = chameleonConfig.hasMiniAppCustomDataClass;
 
     if (classNodes.length === 0) {
       extraClass && attributes.push(t.jsxAttribute(t.jsxIdentifier('class'), t.stringLiteral(extraClass)))
+      // 添加 data-class 方便在小程序中的时间回调 event 中拿到class值
+      hasMiniAppCustomDataClass && extraClass && attributes.push(t.jsxAttribute(t.jsxIdentifier('data-class'), t.stringLiteral(extraClass.trim())))
     } else if (classNodes.length === 1) {
-      classNodes.forEach((itemNode) => {
-        const dealedClassNodeValue = `${itemNode.value.value} ${extraClass}`
-        itemNode.value.value = dealedClassNodeValue;
-      })
+      const classNode = classNodes[0];
+      const dealedClassNodeValue = `${classNode.value.value} ${extraClass}`
+
+      classNode.value.value = dealedClassNodeValue;
+      // 添加 data-class 方便在小程序中的时间回调 event 中拿到class值
+      hasMiniAppCustomDataClass && attributes.push(t.jsxAttribute(t.jsxIdentifier('data-class'), t.stringLiteral(dealedClassNodeValue)))
     } else {
       throw new Error('Only allow one class node in element\'s attribute with cml syntax');
     }

diff --git a/packages/chameleon-tool/lib/config.js b/packages/chameleon-tool/lib/config.js
@@ -22,6 +22,8 @@ function clone (value) {
 }
 var miniappConfig = {
   dev: {
+    hash: true,
+    hasMiniAppCustomDataClass: false,
     moduleIdType: 'name',
     definePlugin: {
       'process.env.NODE_ENV': JSON.stringify('development')
@@ -30,13 +32,15 @@ var miniappConfig = {
   },
   build: {
     hash: true,
+    hasMiniAppCustomDataClass: false,
     minimize: true,
     definePlugin: {
       'process.env.NODE_ENV': JSON.stringify('production')
     }
   },
   export: {
     hash: true,
+    hasMiniAppCustomDataClass: false,
     minimize: true,
     definePlugin: {
       'process.env.NODE_ENV': JSON.stringify('production')
@@ -110,6 +114,8 @@ var chameleonConfig = {
   tt: clone(miniappConfig),
   web: {
     dev: {
+      hash: true,
+      hasMiniAppCustomDataClass: false,
       isWrapComponent: true, // 默认对组件进行一层包裹
       babelPolyfill: false, // 是否添加babel polyfill 只web端有此属性
       moduleIdType: 'name',
@@ -122,18 +128,20 @@ var chameleonConfig = {
       }
     },
     build: {
+      hash: true,
+      hasMiniAppCustomDataClass: false,
       isWrapComponent: true, // 默认对组件进行一层包裹
       babelPolyfill: false, // 是否添加babel polyfill 只web端有此属性
-      hash: true,
       minimize: true,
       moduleIdType: 'chameleon',
       definePlugin: {
         'process.env.NODE_ENV': JSON.stringify('production')
       }
     },
     export: {
-      isWrapComponent: true, // 默认对组件进行一层包裹
       hash: true,
+      hasMiniAppCustomDataClass: false,
+      isWrapComponent: true, // 默认对组件进行一层包裹
       minimize: true,
       moduleIdType: 'chameleon',
       entry: [
@@ -146,24 +154,28 @@ var chameleonConfig = {
   },
   weex: {
     dev: {
+      hash: true,
+      hasMiniAppCustomDataClass: false,
       isWrapComponent: true, // 默认对组件进行一层包裹
       moduleIdType: 'name',
       definePlugin: {
         'process.env.NODE_ENV': JSON.stringify('development')
       }
     },
     build: {
+      hash: true,
+      hasMiniAppCustomDataClass: false,
       isWrapComponent: true, // 默认对组件进行一层包裹
       minimize: true,
-      hash: true,
       moduleIdType: 'chameleon',
       definePlugin: {
         'process.env.NODE_ENV': JSON.stringify('production')
       }
     },
     export: {
-      isWrapComponent: true, // 默认对组件进行一层包裹
       hash: true,
+      hasMiniAppCustomDataClass: false,
+      isWrapComponent: true, // 默认对组件进行一层包裹
       minimize: true,
       moduleIdType: 'chameleon',
       entry: [