Handle JSX Comments

ryansolid · May 4, 2019 · ce90ca5 · ce90ca5
1 parent 9b53e5b
commit ce90ca5
Show file tree

Hide file tree

Showing 5 changed files with 9 additions and 4 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.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.7.2",
+  "version": "0.7.3",
   "author": "Ryan Carniato",
   "license": "MIT",
   "repository": {

diff --git a/src/index.js b/src/index.js
@@ -123,8 +123,10 @@ export default (babel) => {
   // reduce unnecessary refs
   function detectExpressions(jsx, index) {
     for (let i = index; i < jsx.children.length; i++) {
-      if (t.isJSXExpressionContainer(jsx.children[i])) return true;
-      if (t.isJSXElement(jsx.children[i])) {
+      if (t.isJSXExpressionContainer(jsx.children[i])) {
+        if (!t.isJSXEmptyExpression(jsx.children[i].expression)) return true;
+      }
+      else if (t.isJSXElement(jsx.children[i])) {
         const tagName = getTagName(jsx.children[i]);
         if (tagName.toLowerCase() !== tagName) return true;
         if (jsx.children[i].openingElement.attributes.some(attr => t.isJSXSpreadAttribute(attr) || t.isJSXExpressionContainer(attr.value))) return true;
@@ -340,6 +342,7 @@ export default (babel) => {
       if (!info.skipId) results.id = path.scope.generateUidIdentifier("el$")
       return results;
     } else if (t.isJSXExpressionContainer(jsx)) {
+      if (t.isJSXEmptyExpression(jsx.expression)) return null;
       if (!checkParens(jsx, path)) return { exprs: [jsx.expression], template: '' }
       return { exprs: [t.arrowFunctionExpression([], jsx.expression)], template: '' }
     }

diff --git a/test/__fixtures__/simpleElements/code.js b/test/__fixtures__/simpleElements/code.js
@@ -3,5 +3,6 @@ const template = (
     <h1>Welcome</h1>
     <label for={"entry"}>Edit:</label>
     <input id="entry" type="text" />
+    {/* Comment Node */}
   </div>
 );
diff --git a/test/__fixtures__/subTemplates/code.js b/test/__fixtures__/subTemplates/code.js
@@ -15,6 +15,7 @@ const template = props => {
         <div>From Parent</div>
       </Child>
       <Child name='Jason' {...(props)} forwardRef={props.ref}>
+        {/* Comment Node */}
         <div>{state.content}</div>
       </Child>
       <Context.Consumer>{ context =>