Add redux map state for apentle

apentle · Sep 30, 2016 · 43f1d53 · 43f1d53
1 parent 7aa6d3f
commit 43f1d53
Show file tree

Hide file tree

Showing 4 changed files with 52 additions and 5 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "babel-plugin-react-native-layout",
-  "version": "0.1.4",
+  "version": "0.1.5",
   "description": "Dynamic layout for react native components",
   "main": "lib/index.js",
   "scripts": {
@@ -10,7 +10,8 @@
   },
   "dependencies": {
     "babel-plugin-transform-react-jsx": "^6.8.0",
-    "babel-runtime": "^6.3.19"
+    "babel-runtime": "^6.3.19",
+    "babylon": "^6.11.2"
   },
   "devDependencies": {
     "babel-cli": "^6.3.17",

diff --git a/src/index.js b/src/index.js
@@ -1,6 +1,9 @@
 'use strict';
 
+import * as babylon from "babylon";
+
 const _apLayoutKey = '_apLayoutKey';
+const _apConnect = '_apConnect';
 
 module.exports = function ({types: t}) {
   var component;
@@ -235,6 +238,31 @@ module.exports = function ({types: t}) {
           t.JSXIdentifier('layoutContext'), t.JSXExpressionContainer(t.thisExpression())
         ));
       },
+      Identifier: function Identifier(path, state) {
+        if (path.node.name === 'connect') {
+          // Process react-redux connect
+          var parentPath = path.parentPath;
+          while (t.isMemberExpression(parentPath)) {
+            parentPath = parentPath.parentPath;
+          }
+          if (t.isCallExpression(parentPath) && parentPath.node.arguments.length > 0) {
+            var args = parentPath.node.arguments;
+            args[0] = t.callExpression(
+              t.identifier(_apConnect),
+              [args[0]]
+            );
+            // Add _apConnect function
+            state.file.path.unshiftContainer('body', babylon.parse(`
+              var ${_apConnect} = function(mapStateToProps) {
+                  return function(store, ownProps) {
+                    var state = typeof mapStateToProps === 'function' ? mapStateToProps(store, ownProps) : {};
+                    events.emit(${_apLayoutKey}, state, store, ownProps);
+                    return state;
+                  }
+              };`));
+          }
+        }
+      },
       Program: function Program(path, state) {
         component = undefined;
 

diff --git a/tests/container/component/actual.js b/tests/container/component/actual.js
@@ -1,6 +1,7 @@
 'use strict';
 
 import React, { Component, StyleSheet, Text, View } from 'react-native';
+const {connect} = require('react-redux');
 
 class Inline extends Component {
   render() {
@@ -31,4 +32,10 @@ const styles = StyleSheet.create({
   more: {}
 });
 
-module.exports = Inline;
+function select(store) {
+  return {
+    random: store.random,
+  };
+}
+
+module.exports = connect(select, {})(Inline);
diff --git a/tests/container/component/expected.js b/tests/container/component/expected.js
@@ -1,7 +1,12 @@
 'use strict';
 
-var _apLayoutKey = 'container_component_actual';
+var _apConnect = function (mapStateToProps) {
+  return function (store, ownProps) {
+    var state = typeof mapStateToProps === 'function' ? mapStateToProps(store, ownProps) : {};events.emit(_apLayoutKey, state, store, ownProps);return state;
+  };
+};var _apLayoutKey = 'container_component_actual';
 import React, { Component, StyleSheet, Text, View } from 'react-native';
+const { connect } = require('react-redux');
 
 class Inline extends Component {
   render() {
@@ -46,4 +51,10 @@ const styles = StyleSheet.create({
   more: {}
 });
 
-module.exports = Inline;
+function select(store) {
+  return {
+    random: store.random
+  };
+}
+
+module.exports = connect(_apConnect(select), {})(Inline);