[RELEASE] JSX2MP @ 1114 (#1479)

* chore: bump version * fix: require function traverse * fix: loop component instance id * chore: test * feat: optimize error report (#1483) * feat: catch error when compiling app/page/component and optimize error report * fix: lint error * fix: no need to add './' if path starts with '.' in ensureIndexPath (#1486) * fix: no need to add './' if path starts with '.' * fix: lint error * feat: add turnOffSourceMap to turn off source map in dev mode (#1487) * feat: add turnOffSourceMap to turn off source map in dev mode * fix: add default value of options in genCode * fix: tag parentId * chore: bump version * fix: npm component parentId (#1489) * fix: tag parentId * chore: bump version * chore: exclude base component * chore: array indexof * fix: jsx2mp-compiler parse namespace import error (#1488) * feat(miniapp): add upgrade tips for miniapp packages (#1490) * feat: Support attribute is function in x-for (#1494) * feat: 支持 x-for 里函数 filter 功能 * fix: use DynamicBinding * fix: 修复列表中key为item/idex的对象变量的转换 (#1495) * feat: 支持 x-for 里函数 filter 功能 * fix: 修复列表中key为item/idex的对象变量的转换 * fix: use DynamicBinding * fix: conflict * feat(miniapp): support using native miniapp components both in app and component projects (#1493) * refactor: require package.json to get pkg name/version (#1491) * feat(miniapp): add upgrade tips for miniapp packages * refactor: require package.json to get pkg name/version * fix(miniapp): add eslint disable comment * feat(miniapp): add turnoff to turn off update check * refactor(miniapp): use function checkNeedUpdate to check update * fix: custom component x-for (#1492) * fix: tag parentId * chore: bump version * feat: support titleClick * fix: object pattern rest element error (#1498) * fix: object pattern rest element error * fix: add object rest compile test * chore: compat in native miniapp project condition (#1496) * fix: tag parentId * chore: bump version * feat: compat in native miniapp project condition * chore: rename instanceId * chore: bump version * fix: props value is string * fix: props value is string (#1499) * chore: bump version * fix: jsx2mp filter (#1500) * fix: test
alibaba · Nov 17, 2019 · c9f9ee5 · c9f9ee5
1 parent 8957782
commit c9f9ee5
Show file tree

Hide file tree

Showing 39 changed files with 519 additions and 201 deletions.
diff --git a/packages/jsx-compiler/package.json b/packages/jsx-compiler/package.json
@@ -1,6 +1,6 @@
 {
   "name": "jsx-compiler",
-  "version": "0.3.6",
+  "version": "0.3.10",
   "license": "BSD-3-Clause",
   "description": "Parser for Rax JSX Statements.",
   "main": "src/index.js",

diff --git a/packages/jsx-compiler/src/codegen/genCode.js b/packages/jsx-compiler/src/codegen/genCode.js
@@ -9,7 +9,8 @@ const generateOptions = {
  * Generate code and map from babel ast.
  * @param ast
  */
-function genCode(ast, options) {
+function genCode(ast, options = {}) {
+  options.sourceMaps = !options.turnOffSourceMap;
   return generate(ast, Object.assign({}, generateOptions, options));
 }
 

diff --git a/packages/jsx-compiler/src/modules/__tests__/components.js b/packages/jsx-compiler/src/modules/__tests__/components.js
@@ -41,6 +41,6 @@ describe('Transform components', () => {
     expect(genCode(ast).code).toEqual(`<rax-view>
         <c-a94616 __parentId="{{__tagId}}" __tagId="0" />
       </rax-view>`);
-    expect(componentsAlias).toEqual({'c-a94616': {'default': true, 'from': '../components/CustomEl', 'isCustomEl': true, 'local': 'CustomEl', 'name': 'c-a94616'}});
+    expect(componentsAlias).toEqual({'c-a94616': {'default': true, 'namespace': false, 'from': '../components/CustomEl', 'isCustomEl': true, 'local': 'CustomEl', 'name': 'c-a94616'}});
   });
 });
diff --git a/packages/jsx-compiler/src/modules/__tests__/condition.js b/packages/jsx-compiler/src/modules/__tests__/condition.js
@@ -116,7 +116,8 @@ describe('Transform condition', () => {
 
 describe('Transiform condition render function', () => {
   it('basic case', () => {
-    const ast = parseExpression(`(function render() {
+    const ast = parseExpression(`(function render(props) {
+        let { a, b, ...c } = props;
         let vdom;
         if (a > 0) {
           vdom = <view>case 1</view>
@@ -132,7 +133,12 @@ describe('Transiform condition render function', () => {
 
     const tmpVars = _transformRenderFunction(ast, adapter);
     expect(genExpression(tmpVars.vdom.value)).toEqual('<block><block a:if="{{a > 0}}"><view>case 1</view></block><block a:else><view>case 1.1</view></block><block a:if="{{a > 1}}"><view>case 2</view></block></block>');
-    expect(genExpression(ast)).toEqual(`function render() {
+    expect(genExpression(ast)).toEqual(`function render(props) {
+  let {
+    a,
+    b,
+    ...c
+  } = props;
   let vdom;
   return vdom;
 }`);

diff --git a/packages/jsx-compiler/src/modules/__tests__/element.js b/packages/jsx-compiler/src/modules/__tests__/element.js
@@ -25,7 +25,9 @@ describe('Transform JSXElement', () => {
     it('identifier', () => {
       const sourceCode = '<View foo={bar}>{ bar }</View>';
       const ast = parseExpression(sourceCode);
-      const { dynamicValues } = _transform(ast, null, null, sourceCode);
+      const { dynamicValues } = _transform({
+        templateAST: ast
+      }, null, null, sourceCode);
       const code = genInlineCode(ast).code;
       expect(code).toEqual('<View foo="{{_d0}}">{{ _d0 }}</View>');
       expect(genDynamicAttrs(dynamicValues)).toEqual('{ _d0: bar }');
@@ -44,7 +46,9 @@ describe('Transform JSXElement', () => {
         >{false}{'string'}{8}{}{undefined}{null}{/a-z/}</View>
       `;
       const ast = parseExpression(sourceCode);
-      const { dynamicValues } = _transform(ast, null, null, sourceCode);
+      const { dynamicValues } = _transform({
+        templateAST: ast
+      }, null, null, sourceCode);
 
       expect(genInlineCode(ast).code).toEqual('<View bool="{{true}}" str=\'string\' num="{{8}}" nil="{{null}}" regexp="{{_d0}}" tpl="hello world {{_d1}}">string8{{ _d0 }}</View>');
 
@@ -79,7 +83,9 @@ describe('Transform JSXElement', () => {
         />
       `;
       const ast = parseExpression(sourceCode);
-      const { dynamicValues, dynamicEvents } = _transform(ast, null, null, sourceCode);
+      const { dynamicValues, dynamicEvents } = _transform({
+        templateAST: ast
+      }, null, null, sourceCode);
 
       expect(genDynamicAttrs(dynamicValues)).toEqual('{ _d0: this.props.foo, _d1: this.state.bar, _d2: foo, _d3: fn(), _d4: foo.method(), _d5: a, _d6: a() ? 1 : 2, _d7: ~a, _d8: b, _d9: c, _d10: new Foo(), _d11: delete foo.bar, _d12: typeof aaa, _d13: { ...{ a: 1 } } }');
 
@@ -90,22 +96,28 @@ describe('Transform JSXElement', () => {
 
     it('unsupported', () => {
       expect(() => {
-        _transform(parseExpression('<View assign={a = 1} />'));
+        _transform({
+          templateAST: parseExpression('<View assign={a = 1} />')
+        });
       }).toThrowError();
     });
 
     it('should handle MemberExpression', () => {
       const sourceCode = '<View>{a.b.c}</View>';
       const ast = parseExpression(sourceCode);
-      const { dynamicValues } = _transform(ast, null, null, sourceCode);
+      const { dynamicValues } = _transform({
+        templateAST: ast
+      }, null, null, sourceCode);
       expect(genInlineCode(ast).code).toEqual('<View>{{ _d0.b.c }}</View>');
       expect(genDynamicAttrs(dynamicValues)).toEqual('{ _d0: a }');
     });
 
     it('should handle nested MemberExpression', () => {
       const sourceCode = '<View>{a ? a.b[c.d] : 1}</View>';
       const ast = parseExpression(sourceCode);
-      const { dynamicValues } = _transform(ast, null, null, sourceCode);
+      const { dynamicValues } = _transform({
+        templateAST: ast
+      }, null, null, sourceCode);
       expect(genInlineCode(ast).code).toEqual('<View>{{ _d0 ? _d0.b[_d1.d] : 1 }}</View>');
       expect(genDynamicAttrs(dynamicValues)).toEqual('{ _d0: a, _d1: c }');
     });
@@ -121,7 +133,9 @@ describe('Transform JSXElement', () => {
       /**
        * { _e0: this.handleClick }
        */
-      const { dynamicEvents } = _transform(ast);
+      const { dynamicEvents } = _transform({
+        templateAST: ast
+      });
       expect(genDynamicAttrs(dynamicEvents)).toEqual('{ _e0: this.handleClick }');
       expect(genInlineCode(ast).code).toEqual('<View onClick="_e0" />');
     });
@@ -132,7 +146,9 @@ describe('Transform JSXElement', () => {
           onClick={props.onClick}
         />
       `);
-      const { dynamicEvents } = _transform(ast);
+      const { dynamicEvents } = _transform({
+        templateAST: ast
+      });
 
       expect(genInlineCode(ast).code).toEqual('<View onClick="_e0" />');
       expect(genDynamicAttrs(dynamicEvents)).toEqual('{ _e0: props.onClick }');
@@ -145,7 +161,9 @@ describe('Transform JSXElement', () => {
           onKeyPress={this.handleClick.bind(this, 'hello')}
         />
       `);
-      const { dynamicEvents } = _transform(ast);
+      const { dynamicEvents } = _transform({
+        templateAST: ast
+      });
 
       expect(genInlineCode(ast).code).toEqual('<View onClick="_e0" onKeyPress="_e1" data-e0-arg-context="this" data-e0-arg-0="{{ a: 1 }}" data-e1-arg-context="this" data-e1-arg-0="{{\'hello\'}}" />');
       expect(genDynamicAttrs(dynamicEvents)).toEqual('{ _e0: onClick, _e1: this.handleClick }');
@@ -161,15 +179,19 @@ describe('Transform JSXElement', () => {
           p.node.__transformed = true;
         }
       });
-      const { dynamicValues } = _transform(ast, null, null, sourceCode);
+      const { dynamicValues } = _transform({
+        templateAST: ast
+      }, null, null, sourceCode);
       expect(genDynamicAttrs(dynamicValues)).toEqual('{}');
     });
   });
 
   describe('element', () => {
     it('should handle identifier', () => {
       const ast = parseExpression('<View>{foo}</View>');
-      const { dynamicValues } = _transform(ast);
+      const { dynamicValues } = _transform({
+        templateAST: ast
+      });
       const code = genInlineCode(ast).code;
       expect(code).toEqual('<View>{{ _d0 }}</View>');
       expect(genDynamicAttrs(dynamicValues)).toEqual('{ _d0: foo }');
@@ -188,7 +210,9 @@ describe('Transform JSXElement', () => {
         </View>
       `;
       const ast = parseExpression(sourceCode);
-      const { dynamicValues } = _transform(ast, null, null, sourceCode);
+      const { dynamicValues } = _transform({
+        templateAST: ast
+      }, null, null, sourceCode);
 
       expect(genInlineCode(ast).code).toEqual(`<View>
           string
@@ -224,7 +248,9 @@ describe('Transform JSXElement', () => {
         {{...{ a: 1 }}}
       </View>`;
       const ast = parseExpression(sourceCode);
-      const { dynamicValues } = _transform(ast, null, null, sourceCode);
+      const { dynamicValues } = _transform({
+        templateAST: ast
+      }, null, null, sourceCode);
 
       expect(genInlineCode(ast).code).toEqual(`<View>
         {{ _d0 }}
@@ -253,22 +279,28 @@ describe('Transform JSXElement', () => {
     it('should handle text', () => {
       const sourceCode = '<Text style={styles.name}>{data && data.itemTitle ? data.itemTitle : \'\'}</Text>';
       const ast = parseExpression(sourceCode);
-      const { dynamicValues } = _transform(ast, null, adapter, sourceCode);
+      const { dynamicValues } = _transform({
+        templateAST: ast
+      }, null, adapter, sourceCode);
       expect(genInlineCode(ast).code).toEqual('<Text style="{{_d0.name}}">{{ _d1 && _d1.itemTitle ? _d1.itemTitle : \'\' }}</Text>');
       expect(genDynamicAttrs(dynamicValues)).toEqual('{ _d0: styles, _d1: data }');
     });
 
     it('should collect object expression', () => {
       const sourceCode = '<Image style={{...styles.avator, ...styles[\`\${rank}Avator\`]}} source={{ uri: avator }}></Image>';
       const ast = parseExpression(sourceCode);
-      const { dynamicValues } = _transform(ast, null, adapter, sourceCode);
+      const { dynamicValues } = _transform({
+        templateAST: ast
+      }, null, adapter, sourceCode);
       expect(genInlineCode(ast).code).toEqual('<Image style="{{_d0}}" source="{{ uri: _d1 }}"></Image>');
       expect(genDynamicAttrs(dynamicValues)).toEqual('{ _d0: { ...styles.avator, ...styles[`${rank}Avator`] }, _d1: avator }');
     });
 
     it('unsupported', () => {
       expect(() => {
-        _transform(parseExpression('<View>{a = 1}</View>'));
+        _transform({
+          templateAST: parseExpression('<View>{a = 1}</View>')
+        });
       }).toThrowError();
     });
   });

diff --git a/packages/jsx-compiler/src/modules/__tests__/function.js b/packages/jsx-compiler/src/modules/__tests__/function.js
@@ -20,6 +20,28 @@ describe('Transform function', () => {
     const dom = null;
     console.log(dom);
   }
+}`);
+  });
+  it('should remove weex module in another function', () => {
+    const code = `
+        export default function Index() {
+          useEffect(() => {
+            if (isWeex) {
+              const dom = require('@weex-module/dom');
+              console.log(dom);
+            }
+          });
+        }
+      `;
+    const ast = parseCode(code);
+    _transformFunction(ast);
+    expect(genExpression(ast)).toEqual(`export default function Index() {
+  useEffect(() => {
+    if (isWeex) {
+      const dom = null;
+      console.log(dom);
+    }
+  });
 }`);
   });
 });
diff --git a/packages/jsx-compiler/src/modules/__tests__/jsx-plus.js b/packages/jsx-compiler/src/modules/__tests__/jsx-plus.js
@@ -12,45 +12,51 @@ describe('Directives', () => {
   describe('list', () => {
     it('simple', () => {
       const code = `
-      <View x-for={val in array}>{val}</View>
+      <View>
+        <View x-for={val in array}>{val}</View>
+      </View>
     `;
       const ast = parseExpression(code);
       _transformList(ast, code, adapter);
       expect(genExpression(ast))
-        .toEqual(`<View a:for={array.map((val, index) => {
-  return {
-    val: val,
-    index: index
-  };
-})} a:for-item="val" a:for-index="index">{val}</View>`);
+        .toEqual(`<View>
+        <block a:for={array.map((val, index) => {
+    return {
+      val: val,
+      index: index
+    };
+  })} a:for-item="val" a:for-index="index"><View>{val}</View></block>
+      </View>`);
     });
 
     it('nested', () => {
       const code = `
-      <View x-for={item in array}>
-        <View x-for={item2 in item}>
-          {item2}
+      <View>
+        <View x-for={item in array}>
+          <View x-for={item2 in item}>{item2}
         </View>
       </View>
+</View>
     `;
       const ast = parseExpression(code);
       _transformList(ast, code, adapter);
       expect(genExpression(ast))
-        .toEqual(`<View a:for={array.map((item, index) => {
-  return {
-    item: item.map((item2, index) => {
-      return {
-        item2: item2,
-        index: index
-      };
-    }),
-    index: index
-  };
-})} a:for-item="item" a:for-index="index">
-        <View a:for={item} a:for-item="item2" a:for-index="index">
-          {item2}
-        </View>
-      </View>`);
+        .toEqual(`<View>
+        <block a:for={array.map((item, index) => {
+    return {
+      item: item.map((item2, index) => {
+        return {
+          item2: item2,
+          index: index
+        };
+      }),
+      index: index
+    };
+  })} a:for-item="item" a:for-index="index"><View>
+          <block a:for={item} a:for-item="item2" a:for-index="index"><View>{item2}
+        </View></block>
+      </View></block>
+</View>`);
     });
   });
 

diff --git a/packages/jsx-compiler/src/modules/code.js b/packages/jsx-compiler/src/modules/code.js
@@ -559,7 +559,8 @@ function normalizeFileName(filename) {
  */
 function ensureIndexInPath(value, resourcePath) {
   const target = require.resolve(resolve(dirname(resourcePath), value));
-  return removeJSExtension('./' + relative(dirname(resourcePath), target));
+  const result = relative(dirname(resourcePath), target);
+  return removeJSExtension(result[0] === '.' ? result : './' + result);
 };
 
 function removeJSExtension(filePath) {

diff --git a/packages/jsx-compiler/src/modules/components.js b/packages/jsx-compiler/src/modules/components.js
@@ -9,6 +9,7 @@ const moduleResolve = require('../utils/moduleResolve');
 const createJSX = require('../utils/createJSX');
 const Expression = require('../utils/Expression');
 const compiledComponents = require('../compiledComponents');
+const baseComponents = require('../baseComponents');
 const replaceComponentTagName = require('../utils/replaceComponentTagName');
 
 const RELATIVE_COMPONENTS_REG = /^\..*(\.jsx?)?$/i;
@@ -56,7 +57,7 @@ function transformIdentifierComponentName(path, alias, dynamicValue, parsed, opt
       }
     }
 
-    if (alias.isCustomEl) {
+    if (baseComponents.indexOf(componentTag) < 0) {
       node.attributes.push(
         t.jsxAttribute(
           t.jsxIdentifier('__parentId'),

diff --git a/packages/jsx-compiler/src/modules/condition.js b/packages/jsx-compiler/src/modules/condition.js
@@ -28,7 +28,10 @@ function transformRenderFunction(ast, adapter) {
             case 'ObjectPattern':
               if (Array.isArray(id.properties)) {
                 id.properties.forEach(objProperty => {
-                  templateVariables[objProperty.value.name] = {
+                  templateVariables[t.isRestElement(objProperty) ?
+                    objProperty.argument.name :
+                    objProperty.value.name
+                  ] = {
                     source: t.isMemberExpression(init)
                       ? init.property.name
                       : init.name,