Add support for JSX dynamic child expressions

Author: ryansolid

package-lock.json

@@ -1,7 +1,7 @@
 {
   "name": "babel-plugin-jsx-dom-expressions",
   "description": "A JSX to DOM plugin that wraps expressions for fine grained change detection",
-  "version": "0.8.1",
+  "version": "0.8.2",
   "author": "Ryan Carniato",
   "license": "MIT",
   "repository": {

package.json

@@ -127,18 +127,21 @@ export default (babel) => {
   function transformComponentChildren(path, children, opts) {
     const filteredChildren = filterChildren(children);
     if (!filteredChildren.length) return;
-    let child = filteredChildren.length === 1 ?
-      filteredChildren[0] :
-      t.JSXFragment(t.JSXOpeningFragment(), t.JSXClosingFragment(), children);
+    let child, dynamic;
+    if (filteredChildren.length === 1) {
+      if (t.isJSXExpressionContainer(filteredChildren[0])) dynamic = checkParens(filteredChildren[0], path)
+      child = filteredChildren[0]
+    } else child = t.JSXFragment(t.JSXOpeningFragment(), t.JSXClosingFragment(), children);
+
     child = generateHTMLNode(path, child, opts);
     if (child == null) return;
     if (child.id) {
       registerTemplate(path, child, filteredChildren.length !== 1);
       if (!child.exprs.length && child.decl.declarations.length === 1)
-        return child.decl.declarations[0].init;
-      else return t.callExpression(t.arrowFunctionExpression([], t.blockStatement([child.decl, ...child.exprs, t.returnStatement(child.id)])), []);
+        return [child.decl.declarations[0].init];
+      else return [t.callExpression(t.arrowFunctionExpression([], t.blockStatement([child.decl, ...child.exprs, t.returnStatement(child.id)])), [])];
     }
-    return child.exprs[0];
+    return [child.exprs[0], dynamic];
   }
 
   // reduce unnecessary refs
@@ -230,9 +233,11 @@ export default (babel) => {
       }
     });
 
-    const children = transformComponentChildren(path, jsx.children, opts);
-    if (children)
-      runningObject.push(t.objectProperty(t.identifier("children"), children));
+    const childResult = transformComponentChildren(path, jsx.children, opts);
+    if (childResult && childResult[0]) {
+      childResult[1] && dynamic.push(t.stringLiteral('children'))
+      runningObject.push(t.objectProperty(t.identifier("children"), childResult[0]));
+    }
 
     if (runningObject.length)
       props.push(t.objectExpression(runningObject));

src/index.js

@@ -41,4 +41,8 @@ const template4 = (
   <Child>{() =>
     <div />
   }</Child>
+)
+
+const template5 = (
+  <Child>{( dynamicValue )}</Child>
 )

test/__fixtures__/subTemplates/code.js

@@ -83,4 +83,8 @@ const template3 = Child({
 });
 const template4 = Child({
   children: () => _tmpl$6.content.firstChild.cloneNode(true)
-});
+});
+
+const template5 = _$createComponent(Child, {
+  children: () => dynamicValue
+}, ["children"]);