chore: tests / data mapping

README.md

@@ -28,6 +28,7 @@
 - [x] 页面
 - [x] App
 - [ ] 组件化
+   - [ ] tag属性的支持
    - [x] component
       - [x] 组件children
       - [ ] 抽象组件

build/pages/index/index.js

@@ -1,19 +1,12 @@
-
 const i = 'shit';
 const react_wechat_obj = {
   data: {
-    foo: 1
+    foo: 100
   },
   onLoad: function () {},
-  check: function () {
-    const a = i + 'hahah';
-    this.setData({
-      foo: '213'
-    });
-  },
   onTaps: function () {
     this.setData({
-      foo: this.data.foo + 1
+      foo: this.data.foo + 10
     });
   }
 }

build/pages/index/index.wxml

@@ -4,12 +4,6 @@
     <view> second无状态组件 </view>
   </view>
 </template>
-<import src="./outside.wxml" />
-<view class="container">
-  <view>你好 react-wechat{{props.s}}</view>
-  <button bindtap="onTaps">+1</button>
-  <view>{{foo}}</view>
-  <Modal propsFoo="{{foo}}" />
-  <template is="Second" data="{{foo,bar}}" />
-  <template is="First" />
+<view class="container" bindtap="onTaps" style="height:200px; background:rgba({{foo+20}},3,{{foo+20}},1); ">
+  <image class="logo" src="../../res/reaction.svg" />
 </view>

build/pages/index/index.wxss

@@ -1,3 +1,17 @@
 .container {
-    text-align: center
+    text-align: center;
+    margin-top: 30px;
+}
+
+.logo {
+    animation: spin 5000ms infinite linear;
+}
+
+@keyframes spin {
+    0% {
+        transform: rotate(360deg);
+    }
+    100% {
+        transform: rotate(0deg);
+    }
 }

lib/convert.js

@@ -67,8 +67,7 @@ const transform = (code, filePath, destPath, dependencies, ouput) => {
 
   const visitor = {
     ArrowFunctionExpression: {
-      enter(path) {
-      }
+      enter(path) {}
     },
     MemberExpression(path) {
       const code = generate(path.node).code
@@ -408,18 +407,65 @@ const ConverJSXOpeningElement = path => {
       let tempArrts = ''
       arrt.value.expression.properties.forEach(styleProp => {
         const key = generate(styleProp.key).code
-        const isNumber = t.isNumericLiteral(styleProp.value)
-        const value = isNumber ? generate(styleProp.value).code + 'px' : styleProp.value.value
+        let value = ConvertStyle(styleProp.value)
         tempArrts += `${key}:${value}; `
       })
       arrt.value = t.stringLiteral(`${tempArrts}`)
     }
   })
 }
 
+const ConvertBinaryExpression = (value, node) => {
+  console.log(value)
+  if (value === void 666) return value
+  //检测左边
+  if (t.isIdentifier(node.left) || t.isNumericLiteral(node.left)) {
+    value += `${node.left.name || node.left.value}`
+  } else {
+    value += ConvertBinaryExpression(value, node.left)
+  }
+  value += node.operator
+
+  //检测右边
+  if (t.isIdentifier(node.right) || t.isNumericLiteral(node.right)) {
+    value += `${node.right.name || node.right.value}`
+  } else {
+    value += ConvertBinaryExpression(value, node.right)
+  }
+
+  return value
+}
+
+const ConvertStyle = node => {
+  const isNumber = t.isNumericLiteral(node)
+  if (t.isTemplateLiteral(node)) {
+    let value = ''
+    node.quasis.forEach((qua, index) => {
+      value += qua.value.raw
+      const exp = node.expressions[index]
+      if (exp) {
+        //递归的`{foo+1+3+4}px`=>>"{{foo+1+3+4}}px"
+        if (t.isBinaryExpression(exp)) {
+          let small = ''
+          small = ConvertBinaryExpression(small, exp)
+
+          value += `{{${small}}}`
+        } else {
+          //正常的`{foo}px`=>>"{{foo}}px"
+          value += `{{${exp.name}}}`
+        }
+      }
+    })
+    return value
+  }
+
+  return isNumber ? generate(node).code + 'px' : node.value
+}
+
 const ConverJSXExpressionContainer = path => {
   if (t.isJSXAttribute(path.parent)) {
     path.replaceWith(t.stringLiteral(`{{${generate(path.node.expression).code}}}`))
+
     return
   }
 

nodemon.json

@@ -3,5 +3,5 @@
     "watch": ["lib", "temple/*/**", "temple"],
     "verbose": true,
     "exec": "node ./lib/pack",
-    "ext": "js json"
+    "ext": "js json css"
 }

temple/pages/index/index.css

@@ -1,3 +1,17 @@
 .container {
-    text-align: center
+    text-align: center;
+    margin-top: 30px;
+}
+
+.logo {
+    animation: spin 5000ms infinite linear;
+}
+
+@keyframes spin {
+    0% {
+        transform: rotate(360deg);
+    }
+    100% {
+        transform: rotate(0deg);
+    }
 }

temple/pages/index/index.js

@@ -1,7 +1,5 @@
 import { Page } from '../../wechat'
 import Modal from '../../components/modal/modal'
-import First from './outside'
-
 const i = 'shit'
 
 function Second() {
@@ -14,35 +12,28 @@ function Second() {
 }
 export default class Index extends Page {
   state = {
-    foo: 1
+    foo: 100
   }
   window = {
     navigationBarTitleText: 'react-wechat'
   }
 
   onLoad() {}
 
-  check() {
-    const a = i + 'hahah'
-    this.setState({
-      foo: '213'
-    })
-  }
   onTaps() {
     this.setState({
-      foo: this.state.foo + 1
+      foo: this.state.foo + 10
     })
   }
   render() {
     const { foo } = this.state
     return (
-      <view class="container">
-        <view>你好 react-wechat{props.s}</view>
-        <button bindTap={this.onTaps}>+1</button>
-        <view>{foo}</view>
-        <Modal propsFoo={foo} />
-        <Second data="{{foo,bar}}" />
-        <First />
+      <view
+        class="container"
+        bindtap={this.onTaps}
+        style={{ height: `200px`, background: `rgba(${foo + 20},3,${foo + 20},1)` }}
+      >
+        <image class="logo" src="../../res/reaction.svg" />
       </view>
     )
   }

test/page.test.js

@@ -27,7 +27,6 @@ describe('Page.js.test wxml', function() {
     const r = new RegExp('<view> {{foo}} </view>')
     assert.equal(r.test(output.wxml), true)
 
-    console.log(output.wxml)
     done()
   })
 
@@ -54,4 +53,19 @@ describe('Page.js.test wxml', function() {
     done()
   })
 
+  it('连续相加字符串能够成功 width:{{foo+1-3-4+2+foo}}px;', done => {
+    assert.equal(/{{foo\+1-3-4\+2\+foo}}px/.test(output.wxml), true)
+    done()
+  })
+
+  it('字符串中{{}} background:rgba({{bar}},3,3,1);', done => {
+    console.log(output.wxml)
+    assert.equal(/background:rgba\({{bar}},3,3,1\);/.test(output.wxml), true)
+    done()
+  })
+
+  it('字符串中 做加法 rgba({{foo+100}},3,3,1)', done => {
+    assert.equal(/rgba\({{foo\+100}},3,3,1\)/.test(output.wxml), true)
+    done()
+  })
 })

test/temple/page.js

@@ -33,7 +33,9 @@ export default class Index extends Page {
     const { foo } = this.state
     return (
       <view class="container">
-        <view>你好 react-wechat</view>
+        <view style={{ height: `${foo}px`, width: `${foo + 1 - 3 - 4 + 2 + foo}px` }}>你好 react-wechat</view>
+        <view style={{ height: `${bar}px`, background: `rgba(${bar},3,3,1)` }}>你好 react-wechat</view>
+        <view style={{ height: '300px', background: `rgba(${foo + 100},3,3,1)` }} />
         <First />
         <Second />
       </view>