Jsx2mp/dev

packages/jsx-compiler/package.json

@@ -1,6 +1,6 @@
 {
   "name": "jsx-compiler",
-  "version": "0.1.5",
+  "version": "0.1.6",
   "license": "BSD-3-Clause",
   "description": "Parser for Rax JSX Statements.",
   "main": "src/index.js",

packages/jsx-compiler/src/modules/__tests__/condition.js

@@ -12,4 +12,34 @@ describe('Transform condition', () => {
 
     expect(genCode(ast).code).toEqual('<View><block a:if="{{foo}}"><View /></block><block a:else><Text /></block></View>');
   });
+
+  it("transform conditional's consequent is conditional expression", () => {
+    const ast = parseExpression(`
+      <View>{foo ? bar ? <Bar /> : <View /> : <Text />}</View>
+    `);
+    _transformTemplate(ast, adapter, {});
+
+    expect(genCode(ast).code).toEqual('<View><block a:if="{{foo}}"><block a:if="{{bar}}"><Bar /></block><block a:else><View /></block></block><block a:else><Text /></block></View>');
+  });
+
+  it("transform condition's alternate is conditional expression", () => {
+    const ast = parseExpression(`
+      <View>{empty ? <Empty /> : loading ? null : 'xxx' }</View>
+    `);
+    _transformTemplate(ast, adapter, {});
+
+    expect(genCode(ast).code).toEqual('<View><block a:if="{{empty}}"><Empty /></block><block a:else><block a:if="{{loading}}"></block><block a:else>xxx</block></block></View>');
+  });
+
+  it('transform conditional expression in JSXContainer2', () => {
+    const ast = parseExpression(`
+      <View>{foo ? <View /> : <Text />}</View>
+    `);
+    const dynamicValue = _transformTemplate(ast, adapter, {});
+
+    expect(genCode(ast).code).toEqual('<View><block a:if="{{foo}}"><View /></block><block a:else><Text /></block></View>');
+    expect(Object.keys(dynamicValue)).toEqual(['foo']);
+  });
 });
+
+

packages/jsx-compiler/src/modules/__tests__/element.js

@@ -113,6 +113,19 @@ describe('Transform JSXElement', () => {
 
       expect(genInlineCode(ast).code).toEqual('<View onClick="_e0" />');
     });
+
+    it('bind methods', () => {
+      const ast = parseExpression(`
+        <View 
+          onClick={onClick.bind(this, { a: 1 })}
+          onKeyPress={this.handleClick.bind(this, 'hello')}
+        />
+      `);
+      const dynamicValue = _transform(ast);
+
+      expect(genInlineCode(ast).code).toEqual('<View onClick="_e0" onKeyPress="_e1" data-arg-context="this" data-arg-0="{{ a: 1 }}" data-arg-context="this" data-arg-0="{{\'hello\'}}" />');
+      expect(genDynamicAttrs(dynamicValue)).toEqual('{ _e0: onClick, _e1: this.handleClick }');
+    });
   });
 
   describe('element', () => {

packages/jsx-compiler/src/modules/code.js

@@ -1,4 +1,5 @@
 const t = require('@babel/types');
+const genExpression = require('../codegen/genExpression');
 const isClassComponent = require('../utils/isClassComponent');
 const isFunctionComponent = require('../utils/isFunctionComponent');
 const traverse = require('../utils/traverseNodePath');
@@ -17,6 +18,9 @@ const SAFE_CREATE_COMPONENT = '__create_component__';
 const SAFE_CREATE_PAGE = '__create_page__';
 const SAFE_CREATE_STYLE = '__create_style__';
 
+const USE_EFFECT = 'useEffect';
+const USE_STATE = 'useState';
+
 const EXPORTED_DEF = '__def__';
 const RUNTIME = 'jsx2mp-runtime';
 
@@ -83,13 +87,15 @@ module.exports = {
       }
     }
 
-    addDefine(parsed.ast, options.type, userDefineType, eventHandlers, parsed.useCreateStyle);
+    const hooks = transformHooks(parsed.renderFunctionPath);
+
+    addDefine(parsed.ast, options.type, userDefineType, eventHandlers, parsed.useCreateStyle, hooks);
     removeRaxImports(parsed.ast);
     removeDefaultImports(parsed.ast);
   },
 };
 
-function addDefine(ast, type, userDefineType, eventHandlers, useCreateStyle) {
+function addDefine(ast, type, userDefineType, eventHandlers, useCreateStyle, hooks) {
   let safeCreateInstanceId;
   let importedIdentifier;
   switch (type) {
@@ -120,6 +126,12 @@ function addDefine(ast, type, userDefineType, eventHandlers, useCreateStyle) {
         ));
       }
 
+      if (Array.isArray(hooks)) {
+        hooks.forEach(id => {
+          specifiers.push(t.importSpecifier(t.identifier(id), t.identifier(id)));
+        });
+      }
+
       if (useCreateStyle) {
         specifiers.push(t.importSpecifier(
           t.identifier(SAFE_CREATE_STYLE),
@@ -197,3 +209,25 @@ function getReplacer(defaultExportedPath) {
     return null;
   }
 }
+
+function transformHooks(root) {
+  let ret = {};
+  traverse(root, {
+    CallExpression(path) {
+      const { node } = path;
+      if (t.isIdentifier(node.callee, { name: USE_STATE })) {
+        if (t.isVariableDeclarator(path.parentPath.node) && t.isArrayPattern(path.parentPath.node.id)) {
+          const firstId = path.parentPath.node.id.elements[0];
+          node.arguments[1] = t.stringLiteral(firstId.name);
+          ret[USE_STATE] = true;
+        } else {
+          console.warn(`useState should be called with following: const [foo, setFoo] = useState(originalFoo); instead of ${genExpression(path.parentPath.node)}`);
+        }
+      } else if (t.isIdentifier(node.callee, { name: USE_EFFECT })) {
+        ret[USE_EFFECT] = true;
+      }
+    }
+  });
+
+  return Object.keys(ret);
+}