Implement CLASS directive

Author: damianc

README.md

@@ -9,6 +9,7 @@ Babel plugin that carries directives to React JSX:
 * `rx-if / rx-else (rx-elseif)`
 * `rx-for`
 * `rx-switch / rx-case (rx-default)`
+* `rx-class`
 
 ## Installation
 
@@ -65,4 +66,12 @@ plugins: [
 	<p rx-case={3}>3</p>
 	<p rx-default>?</p>
 </div>
+```
+
+## The `rx-class` Directive
+
+```
+<div className="box"
+	rx-class={{isError: this.state.isError, isOk: this.state.isOk}}
+>...</div>
 ```

directives/class.directive.js

@@ -0,0 +1,109 @@
+const t = require('babel-types');
+const u = require('../utils');
+const Directive = require('./enum');
+
+function transformClassDirective(path, state) {
+	let classDirAttrs = path.node.openingElement.attributes;
+	let classAttrIdx = u.getDirectiveIndex(classDirAttrs, Directive.CLASS);
+	let classExpression = classDirAttrs[classAttrIdx].value.expression;
+	let classNameAttr = classDirAttrs.find(prop => {
+		return prop.name.name == 'className';
+	});
+	let classNameValue;
+
+	if (classNameAttr && t.isJSXExpressionContainer(classNameAttr.value)) {
+		classNameValue = classNameAttr.value.expression;
+	} else if (classNameAttr && t.isStringLiteral(classNameAttr.value)) {
+		classNameValue = classNameAttr.value;
+	}
+
+	let classNameArr = classNameValue ? t.arrayExpression([
+		classNameValue
+	]) : t.arrayExpression([]);
+
+	let classObjEntries = t.callExpression(
+		t.memberExpression(
+			t.identifier('Object'),
+			t.identifier('entries')
+		), [
+			classExpression
+		]
+	);
+
+	let classObjFilteredEntries = t.callExpression(
+		t.memberExpression(
+			classObjEntries,
+			t.identifier('filter')
+		), [
+			t.arrowFunctionExpression(
+				[t.identifier('c')],
+				t.binaryExpression(
+					'===',
+					t.memberExpression(
+						t.identifier('c'),
+						t.identifier('1')
+					),
+					t.booleanLiteral(true)
+				)
+			)
+		]
+	);
+
+	let classObjMappedEntries = t.callExpression(
+		t.memberExpression(
+			classObjFilteredEntries,
+			t.identifier('map')
+		), [
+			t.arrowFunctionExpression(
+				[t.identifier('c')],
+				t.memberExpression(
+					t.identifier('c'),
+					t.identifier('0')
+				)
+			)
+		]
+	);
+
+	let classNameConcatenatedArr = t.callExpression(
+		t.memberExpression(
+			classNameArr,
+			t.identifier('concat')
+		), [
+			classObjMappedEntries
+		]
+	);
+
+	let classNameString = t.callExpression(
+		t.memberExpression(
+			classNameConcatenatedArr,
+			t.identifier('join')
+		), [
+			t.stringLiteral(' ')
+		]
+	);
+
+	let newClassNameProp = t.jSXAttribute(
+		t.jSXIdentifier('className'),
+		t.jSXExpressionContainer(
+			classNameString
+		)
+	);
+
+	let classNameIdx  = classDirAttrs.findIndex(attr => {
+		return attr.name.name == 'className';
+	});
+	if (classNameIdx !== -1) classDirAttrs.splice(classNameIdx, 1);
+	classDirAttrs.push(newClassNameProp);
+	// return console.log('>>>>>>>>>>>>>>>>>', classDirAttrs);
+
+	path.replaceWith(
+		u.createJSXElement(
+			path.node.openingElement.name.name,
+			classDirAttrs,
+			path.node.children,
+			[Directive.CLASS]
+		)
+	);
+}
+
+module.exports = transformClassDirective;

directives/enum.js

@@ -21,6 +21,9 @@ const Directive = {
 	},
 	get DEFAULT() {
 		return getDirectiveProp('default');
+	},
+	get CLASS() {
+		return getDirectiveProp('class');
 	}
 };
 

directives/index.js

@@ -1,9 +1,11 @@
 const transformIfDirective = require('./if.directive');
 const transformForDirective = require('./for.directive');
 const transformSwitchDirective = require('./switch.directive');
+const transformClassDirective = require('./class.directive');
 
 module.exports = {
 	transformIfDirective,
 	transformForDirective,
-	transformSwitchDirective
+	transformSwitchDirective,
+	transformClassDirective
 };

index.js

@@ -35,6 +35,11 @@ function directiveParser(_, opts) {
 					return;
 				}
 
+				if (hasDirective(path.node, Directive.CLASS)) {
+					d.transformClassDirective(path, state);
+					return;
+				}
+
 			}
 		}
 	};