Feature component: 转换constructor中的this.state初始化为data

README.md

@@ -16,6 +16,7 @@ npm run dev
 ```
 
 ##支持列表
+- [x] constructor 转换data
 - [x] 页面
   - [x] jsx模板转换
     - [x] render函数对map函数多层嵌套支持
@@ -30,8 +31,6 @@ npm run dev
    - [ ] component
       - [x] defaultProps 转换properties
       - [ ] 组件children
-      - [ ] 抽象组件
-      - [ ] 组件关系
       - [ ] behaviors
    - [ ] 无状态组件
       - [ ] 通过外部引入无状态组件
@@ -52,8 +51,11 @@ npm run dev
 - [ ] ui库 
 - [x] 单元测试
 - [x] 项目配置
-- [ ] typing 支持
-- [ ] 工具 watch (增量编译)
-- [ ] CI/CD
-- [ ] COV
-- [ ] 拷贝资源目录
+- [x] 工具 watch (增量编译)
+- [x] 拷贝资源目录
+
+### 本项目已被正美纳入anu
+(anu连接)[https://github.com/RubyLouvre/anu/tree/master/packages/render/miniapp]
+
+## Licences
+MIT

build/App.js

@@ -1 +1,10 @@
-App({});
+const onInit = function (config) {
+  if (config.hasOwnProperty("constructor")) {
+    config.constructor.call(config);
+  }
+
+  config.data = obj.state;
+  return config;
+};
+
+App(onInit({}));

build/components/Comp1.js

@@ -1,4 +1,13 @@
-Component({
+const onInit = function (config) {
+  if (config.hasOwnProperty("constructor")) {
+    config.constructor.call(config);
+  }
+
+  config.data = obj.state;
+  return config;
+};
+
+Component(onInit({
   properties: {
     aaa: {
       type: Number,
@@ -25,7 +34,7 @@ Component({
       value: {}
     }
   }
-}); // Comp.defaultProps = {
+})); // Comp.defaultProps = {
 //   aaa: 1121,
 //   bbb: null,
 //   ccc: "xxx",

build/pages/Page1.js

@@ -1,5 +1,29 @@
 const e = 'e';
-Page({
+
+const onInit = function (config) {
+  if (config.hasOwnProperty("constructor")) {
+    config.constructor.call(config);
+  }
+
+  config.data = obj.state;
+  return config;
+};
+
+Page(onInit({
+  constructor: function (props) {
+    this.state = {
+      items: ["hello"],
+      name: {
+        a: {}
+      } // this.state.name = { a: {}}
+
+    };
+    this.state.name.a.b = "s"; // fine
+
+    this.state.name.ab = "me"; // bug1
+
+    this.state.n = "n"; // bug2
+  },
   onClick: function () {
     console.log('test click1' + e);
     this.setData({
@@ -18,4 +42,4 @@ Page({
       }]]
     });
   }
-});
+}));

package.json

@@ -36,6 +36,7 @@
     "@babel/preset-env": "^7.0.0-beta.46",
     "@babel/preset-react": "^7.0.0-beta.46",
     "@babel/register": "^7.0.0-beta.46",
+    "@babel/template": "^7.0.0-beta.51",
     "@babel/traverse": "^7.0.0-beta.46",
     "@babel/types": "^7.0.0-beta.46",
     "chalk": "^2.4.1",

packages/react-miniapp-tranformation-plugin/common.js

@@ -1,8 +1,8 @@
 /*
  * @Author: hibad 
  * @Date: 2018-06-24 10:36:22 
- * @Last Modified by:   hibad 
- * @Last Modified time: 2018-06-24 10:36:22 
+ * @Last Modified by: hibad
+ * @Last Modified time: 2018-06-27 23:51:12
  */
 const t = require('@babel/types');
 const generate = require('@babel/generator').default;
@@ -16,11 +16,11 @@ let cache = {};
 
 function assembleMapTag(tagName,fo, forItem, forIndex, nextNode) {
   const attrs = [
-    t.jSXAttribute(t.jSXIdentifier('wx:for'), t.stringLiteral(`{{${fo}}}`)),
-    t.jSXAttribute(t.jSXIdentifier('wx:for-item'), t.stringLiteral(`${forItem}`)),
+    t.jSXAttribute(t.jsxIdentifier('wx:for'), t.stringLiteral(`{{${fo}}}`)),
+    t.jSXAttribute(t.jsxIdentifier('wx:for-item'), t.stringLiteral(`${forItem}`)),
   ]
   if (forIndex) 
-    attrs.push(t.jSXAttribute(t.jSXIdentifier('wx:for-index'), t.stringLiteral(`${forIndex}`)));
+    attrs.push(t.jSXAttribute(t.jsxIdentifier('wx:for-index'), t.stringLiteral(`${forIndex}`)));
 
   const jsxOpening = t.jsxOpeningElement(t.jsxIdentifier(tagName), attrs);
   const jsxClosing = t.jsxClosingElement(t.jsxIdentifier(tagName));

packages/react-miniapp-tranformation-plugin/converters/dataProps.js

@@ -2,7 +2,7 @@
  * @Author: hibad 
  * @Date: 2018-06-24 10:36:14 
  * @Last Modified by: hibad
- * @Last Modified time: 2018-06-26 00:37:41
+ * @Last Modified time: 2018-06-26 08:57:44
  * @Description: 
  */
 
@@ -47,7 +47,8 @@ function dataHandler (expression) {
     } else {
       const stack = []
       _memberIterator(expression.expression.left, stack);
-      _walkData2Insert(expression, stack, sharedState.compiled.data.value.properties, 0);
+      // console.log(stack)
+      _walkData2Insert(expression, stack, sharedState.compiled.data.value.properties, 0); // this.state后的properties
       console.log(generate(sharedState.compiled.data).code)
       // sharedState.compiled.data = t.objectProperty(
       //   t.identifier(property.name),
@@ -57,15 +58,32 @@ function dataHandler (expression) {
   }
 }
 
+/**
+ * @param {*} originExpression 
+ * @param {*} stack 
+ * @param {*} properties 
+ * @param {*} index 
+ */
 function _walkData2Insert(originExpression, stack, properties, index) {
+  const level = 0
+
   for(const property of properties){
-    if(t.isObjectExpression(property.value) && stack.length - 2 === index){
+    if(level != stack.length - 1){
+      if(property.key.name === stack[index].property.name){
+        _walkData2Insert(originExpression, stack, property.value.properties, ++index);
+      }
+    }
+    if(t.isObjectExpression(property.value) && stack.length - 1 === index){
       if(property.value.properties.length === 0) {  // 如this.state.name.a = {} 但未定义b
         property.value.properties.push(
-          t.objectProperty(t.identifier(stack[index+1].property.name), originExpression.expression.right)
+          t.objectProperty(t.identifier(stack[index].property.name), originExpression.expression.right)
         );
+        return;
+      } else {
+        // _walkData2Insert(originExpression, stack, properties.value.properties, index);
       }
-    } else if(property.key.name === stack[index].property.name){
+    }
+    if(property.key.name === stack[index].property.name){
       _walkData2Insert(originExpression, stack, property.value.properties, ++index);
     }
   }
@@ -76,7 +94,7 @@ function _walkData2Insert(originExpression, stack, properties, index) {
  * @param {*} memberExpression 
  */
 function _memberIterator(memberExpression, stack) {
-  if (t.isThisExpression(memberExpression.object)) {
+  if (t.isThisExpression(memberExpression.object)) { // 可能需要把this.state打入栈
     return;
   } else { //member expression
     stack.unshift(memberExpression);

packages/react-miniapp-tranformation-plugin/visitor.js

@@ -2,10 +2,11 @@
  * @Author: hibad 
  * @Date: 2018-06-24 10:36:07 
  * @Last Modified by: hibad
- * @Last Modified time: 2018-06-25 22:43:06
+ * @Last Modified time: 2018-06-28 00:52:54
  */
 const sharedState = require('./sharedState');
 const t = require('@babel/types');
+const template = require('@babel/template').default;
 const generate = require('@babel/generator').default;
 const prettifyXml = require('./utils').prettifyXml;
 const nPath = require('path');
@@ -35,27 +36,55 @@ function loadCSSFromFile(filePath){
 module.exports = {
   ClassDeclaration: {
     enter(path) {      
-      const superClz = path.node.superClass && path.node.superClass.name;
-      if (superClz) {
-        if (superClz !== 'App' && superClz !== 'Page' && superClz !== 'Component') return;
-        sharedState.output.type = superClz;
+      //取得组件的父类
+      let className = path.node.superClass ? path.node.superClass.name : "";
+      let match = className.match(/\.?(App|Page|Component)/);
+      if (match) {
+        var clazzName = match[1];
+        //取得或清理组件名，组件名可以用于defaultProps
+        sharedState.componentName =
+        clazzName === "Component" ? path.node.id.name : null;
+        sharedState.output.type = clazzName;
       }
     },
     exit(path) {
       // 把该节点从path中移除?
-      const call = t.expressionStatement(
+      /*const call = t.expressionStatement(
         t.callExpression(
           t.identifier(sharedState.output.type),
           [t.objectExpression(sharedState.compiled.methods)]
         )
+      );*/
+      const call = t.expressionStatement(
+        t.callExpression(t.identifier(sharedState.output.type), [
+          t.callExpression(t.identifier("onInit"), [
+            t.objectExpression(sharedState.compiled.methods)
+          ])
+        ])
       );
+      var onInit = template(`const onInit = function (config){
+        if(config.hasOwnProperty("constructor")){
+          config.constructor.call(config)
+        }
+        config.data = obj.state;
+        return config;
+      }`)({});
+      //插入到最前面
+      path.insertBefore(onInit)
+      //可以通过`console.log(generate(call).code)`验证
       path.replaceWith(call);
     }
   },
   MemberExpression(path) {    
-    const code = generate(path.node).code;
-    if (code === 'this.state' && sharedState.walkingMethod !== 'constructor') {
-      path.node.property.name = 'data';
+    //转换constructor与render外的方法中的this.state为this.data
+    if (
+      sharedState.walkingMethod !== "constructor" &&
+      sharedState.walkingMethod !== "render"
+    ) {
+      const code = generate(path.node).code;
+      if (code === "this.state") {
+        path.node.property.name = "data";
+      }
     }
   },
   AssignmentExpression(path){
@@ -108,7 +137,7 @@ module.exports = {
     enter(path) {
       const methodName = path.node.key.name;
       sharedState.walkingMethod = methodName;
-      if (methodName === 'render' || methodName === 'constructor') return;
+      if (methodName === 'render') return;
 
       //构造method的ast节点
       const fn = t.ObjectProperty(
@@ -128,11 +157,11 @@ module.exports = {
         sharedState.output.wxml = wxmlAST && prettifyXml(wxml);
         path.remove();
       } else if (methodName === 'constructor') {
-        for(const body of path.node.body.body ){
-          if(t.isExpressionStatement(body)){
-            converters.dataProps.dataHandler(body);
-          }
-        }
+        // for(const body of path.node.body.body ){
+        //   if(t.isExpressionStatement(body)){
+        //     converters.dataProps.dataHandler(body);
+        //   }
+        // }
       }
     }
   }

packages/react-miniapp-tranformation-plugin/wx/tag.js

@@ -4,7 +4,7 @@
  */
 
 module.exports = {
-  view: true,
+  view: 'view',
   text: true,
   button: true,
   'scroll-view': 1,