babel-plugin-jsx-to-handlebars - npm Package Compare versions

Comparing version 0.1.2 to 0.1.3

dist/plugin.dist.js

@@ -246,14 +246,18 @@ 'use strict';
 
-        markup += ' ' + getAttributeName(attribute) + '=';
         var value = attribute.get('value');
+        var valueMarkup = '';
         if (value.isJSXExpressionContainer()) {
           if (!renderAsPartial) {
-            markup += '"{{';
+            valueMarkup += '"{{';
           }
-          markup += stringifyExpression(filterThisExpressions(value.get('expression')));
+          value = stringifyExpression(filterThisExpressions(value.get('expression')));
+          valueMarkup += value;
           if (!renderAsPartial) {
-            markup += '}}"';
+            valueMarkup += '}}"';
           }
+          markup += prepareAttributeMarkup(attribute, renderAsPartial, value, valueMarkup);
         } else if (value.isLiteral()) {
-          markup += '"' + value.get('value').node + '"';
+          value = value.get('value').node;
+          valueMarkup += '"' + value + '"';
+          markup += prepareAttributeMarkup(attribute, true, value, valueMarkup);
         } else {
@@ -281,2 +285,14 @@ throw new Error('Unknown attribute node type: ' + attribute.get('type').node);
 
+  function prepareAttributeMarkup(attribute, isStatic, value, valueMarkup) {
+    var markup = '';
+    if (!isStatic) {
+      markup += '{{#if ' + value + '}}';
+    }
+    markup += ' ' + getAttributeName(attribute) + '=' + valueMarkup;
+    if (!isStatic) {
+      markup += '{{/if}}';
+    }
+    return markup;
+  }
+
   function processJSXExpressionContainer() {
@@ -357,2 +373,5 @@ var markup = '';
 
+  /**
+   * Returns a valid template snippet, either markup or a valid variable reference.
+   */
   function processMaybeJsxElement(path) {
@@ -365,3 +384,3 @@ if (path.isJSXElement()) {
       stmt.insertBefore(t.expressionStatement(t.assignmentExpression('=', createMemberExpression(localContextRef, expressionRef.name), path.node)));
-      return expressionRef.name;
+      return '{{' + expressionRef.name + '}}';
     }
@@ -390,2 +409,4 @@ }
     switch (path.get('type').node) {
+      case 'Literal':
+        return path.get('value').node;
       case 'Identifier':
@@ -392,0 +413,0 @@ return path.get('name').node;

lib/plugin.js

@@ -491,14 +491,18 @@ module.exports = function(opts) {
     for (let attribute of attributes) {
-      markup += ' ' + getAttributeName(attribute) + '=';
       let value = attribute.get('value');
+      let valueMarkup = '';
       if (value.isJSXExpressionContainer()) {
         if (!renderAsPartial) {
-          markup += '"{{'
+          valueMarkup += '"{{'
         }
-        markup += stringifyExpression(filterThisExpressions(value.get('expression')));
+        value = stringifyExpression(filterThisExpressions(value.get('expression')));
+        valueMarkup += value;
         if (!renderAsPartial) {
-          markup += '}}"'
+          valueMarkup += '}}"'
         }
+        markup += prepareAttributeMarkup(attribute, renderAsPartial, value, valueMarkup);
       } else if (value.isLiteral()) {
-        markup += '"' + value.get('value').node + '"';
+        value = value.get('value').node;
+        valueMarkup += '"' + value + '"';
+        markup += prepareAttributeMarkup(attribute, true, value, valueMarkup);
       } else {
@@ -511,2 +515,14 @@ throw new Error('Unknown attribute node type: ' + attribute.get('type').node);
 
+  function prepareAttributeMarkup(attribute, isStatic, value, valueMarkup) {
+    let markup = '';
+    if (!isStatic) {
+      markup += '{{#if ' + value + '}}';
+    }
+    markup += ' ' + getAttributeName(attribute) + '=' + valueMarkup;
+    if (!isStatic) {
+      markup += '{{/if}}';
+    }
+    return markup;
+  }
+
   function processJSXExpressionContainer() {
@@ -632,2 +648,5 @@ let markup = '';
 
+  /**
+   * Returns a valid template snippet, either markup or a valid variable reference.
+   */
   function processMaybeJsxElement(path) {
@@ -648,3 +667,3 @@ if (path.isJSXElement()) {
       );
-      return expressionRef.name;
+      return `{{${expressionRef.name}}}`;
     }
@@ -675,2 +694,4 @@ }
     switch (path.get('type').node) {
+      case 'Literal':
+        return path.get('value').node;
       case 'Identifier':
@@ -677,0 +698,0 @@ return path.get('name').node;

package.json

 {
   "name": "babel-plugin-jsx-to-handlebars",
-  "version": "0.1.2",
+  "version": "0.1.3",
   "description": "babel-plugin to convert simple stateless react compontents to handlebars templates",
@@ -5,0 +5,0 @@ "main": "dist/plugin.dist.js",

tests/logic/guard.jsx

@@ -7,8 +7,11 @@ import React from 'react';
     return (
-      <ul>
-        {show && <li></li>}
-        {show ? <li></li> : null}
-      </ul>
+      <div>
+        <ul>
+          {show && <li></li>}
+          {show ? <li></li> : null}
+        </ul>
+        {show && ['a', 'b', 'c'].join(' ')}
+      </div>
     );
   }
 }

tests/props/props.jsx

@@ -11,2 +11,3 @@ import React from 'react';
         {this.props.property}
+        <link href={this.props['text-element']} />
       </div>
@@ -13,0 +14,0 @@ );

No alert changes

Improved metrics

Total package byte prevSize

73631

2.1%

Lines of code

2003

2.25%

No dependency changes