babel-plugin-brahmos - npm Package Compare versions

Comparing version 0.1.3 to 0.2.0

package.json

 {
   "name": "babel-plugin-brahmos",
-  "version": "0.1.3",
+  "version": "0.2.0",
   "description": "Babel plugin to transform JSX to Brahmos Tagged Template literal",
@@ -5,0 +5,0 @@ "main": "src/index.js",

src/index.js

@@ -27,2 +27,8 @@ const jsx = require('@babel/plugin-syntax-jsx').default;
 
+/** Check if a template literal is an empty wrap for single expression */
+function isEmptyLiteralWrap(strings) {
+  const emptyStrings = strings.filter((strNode) => !strNode.value.raw);
+  return strings.length === 2 && emptyStrings.length === 2;
+}
+
 function BabelPluginBrahmos (babel) {
@@ -33,3 +39,14 @@ const { types: t } = babel;
     const { strings, expressions } = getLiteralParts(node);
-    const taggedTemplate = t.taggedTemplateExpression(t.identifier('html'), t.templateLiteral(strings, expressions));
+
+    /**
+     * we do not need a tagged expression if there is a single expression and two empty string part
+     * In that case we can just return the expression
+     */
+    if (expressions.length === 1 && isEmptyLiteralWrap(strings)) {
+      return expressions[0];
+    }
+
+    const brahmosHtml = t.memberExpression(t.identifier('Brahmos'), t.identifier('html'));
+
+    const taggedTemplate = t.taggedTemplateExpression(brahmosHtml, t.templateLiteral(strings, expressions));
     const callExpression = t.callExpression(taggedTemplate, []);
@@ -62,2 +79,19 @@ return callExpression;
 
+    function pushAttributeToExpressions(expression, lastExpression) {
+      /**
+       * If last expression is defined push on the same expression else create a new expression.
+       */
+      if (lastExpression) {
+        lastExpression.properties.push(...expression.properties);
+        return lastExpression;
+      }
+
+      pushToExpressions(expression);
+    
+      // keep space after expressions
+      stringPart.push(' ');
+
+      return expression;
+    }
+
     function recurseNode (node) {
@@ -73,2 +107,8 @@ if (t.isJSXElement(node)) {
 
+          /**
+           * Keep the reference of last dynamic expression so we can add it to same object,
+           * instead of creating new expression for each attributes
+           */ 
+          let lastExpression = null;
+
           // push all attributes to opening tag
@@ -78,3 +118,3 @@ attributes.forEach(attribute => {
             if (t.isJSXSpreadAttribute(attribute)) {
-              pushToExpressions(attribute.argument);
+              lastExpression = pushAttributeToExpressions(attribute.argument, lastExpression);
             } else {
@@ -90,5 +130,4 @@ const { name, value } = attribute;
               if (needsToBeExpression(tagName, attrName) || t.isJSXExpressionContainer(value)) {
-                pushToExpressions(createAttributeExpression(name, value));
-                // keep space after expressions
-                stringPart.push(' ');
+                const expression = createAttributeExpression(name, value);
+                lastExpression = pushAttributeToExpressions(expression, lastExpression);
               } else {
@@ -102,2 +141,5 @@ /**
                 stringPart.push(` ${attrName}${value ? `="${value.value}" ` : ''}`);
+
+                //reset the lastExpression value, as static part comes between two dynamic parts
+                lastExpression = null;
               }
@@ -139,3 +181,4 @@ }
 
-          const expression = t.callExpression(t.identifier('createElement'), createElementArguments);
+          const brahmosCreateElement = t.memberExpression(t.identifier('Brahmos'), t.identifier('createElement'));
+          const expression = t.callExpression(brahmosCreateElement, createElementArguments);
 
@@ -142,0 +185,0 @@ pushToExpressions(expression);

No alert changes

Improved metrics

Total package byte prevSize

9854

increased by19.12%

Lines of code

178

increased by22.76%

No dependency changes