v1.4.0

Author: deadlyjack

.gitignore

@@ -1 +1,2 @@
 node_modules
+.DS_Store

.vscode/settings.json

@@ -34,6 +34,7 @@
     "valuenow",
     "valuetext",
     "mydiv",
+    "onref",
     "quickpage"
   ]
 }

CHANGELOG.md

@@ -0,0 +1,35 @@
+# Change log html-tag-js
+
+## 1.4.0
+
+- Filter out null and undefined node from children
+  e.g.
+
+  ```jsx
+  <div>
+    {null}
+    <span>hello</span>
+    {undefined}
+  </div>
+  ```
+
+  will render
+
+  ```html
+  <div>
+    <span>hello</span>
+  </div>
+  ```
+
+- Support for empty JSXExpression
+  e.g.
+
+  ```jsx
+  <div>{}</div>
+  ```
+
+  will render
+
+  ```html
+  <div></div>
+  ```

dist/tag.js

@@ -46,6 +46,9 @@ <h1>HTML-TAG-JS</h1>
             ['\nAnother text'],
           ],
         }),
+        tag('span', {
+          children: [null, undefined, tag.text('This is a span')],
+        }),
       );
 
       p.style.backgroundColor = 'blue';

index.html

@@ -35,11 +35,7 @@ module.exports = (babel) => {
         }
 
         const children = [];
-
-        childrenNode.forEach((node) => {
-          children.push(parseNode(t, node));
-        });
-
+        populateChildren(childrenNode, children, t);
         const arrayExpression = t.arrayExpression(children);
         path.replaceWith(arrayExpression, node);
       },
@@ -58,12 +54,9 @@ module.exports = (babel) => {
         const children = [];
         const options = [];
         const events = {};
-
         const isComponent = /^[A-Z]((?!-).)*$/.test(tagName);
 
-        childrenNode.forEach((node) => {
-          children.push(parseNode(t, node));
-        });
+        populateChildren(childrenNode, children, t);
 
         attributes.forEach((attr) => {
           if (attr.type === 'JSXSpreadAttribute') {
@@ -142,18 +135,15 @@ module.exports = (babel) => {
             );
           }
 
-          if (attrs.length > 0 || children.length > 0) {
+          if (attrs.length > 0) {
             args.push(t.objectExpression(attrs));
           }
 
           if (children.length > 0) {
             args.push(t.arrayExpression(children));
           }
         } else {
-          args.push(
-            t.stringLiteral(tagName),
-            t.objectExpression(options),
-          );
+          args.push(t.stringLiteral(tagName));
 
           if (on.length > 0) {
             options.push(
@@ -173,14 +163,18 @@ module.exports = (babel) => {
             );
           }
 
-          if (children.length > 0) {
+          if (children.length) {
             options.push(
               t.objectProperty(
                 t.identifier('children'),
                 t.arrayExpression(children),
               )
             );
           }
+
+          if (options.length) {
+            args.push(t.objectExpression(options));
+          }
         }
 
 
@@ -192,6 +186,12 @@ module.exports = (babel) => {
   };
 };
 
+/**
+ * Parse node to expression
+ * @param {any} types  babel.types
+ * @param {any} node 
+ * @returns expression
+ */
 function parseNode(types, node) {
   const { type } = node;
 
@@ -204,5 +204,25 @@ function parseNode(types, node) {
   }
 
   const { expression } = node;
+  const invalidExpressions = ['JSXEmptyExpression'];
+
+  if (invalidExpressions.includes(expression.type)) {
+    return null;
+  }
+
   return expression;
 }
+
+/**
+ * Populate children
+ * @param {Array<any>} childrenNode 
+ * @param {Array<any>} children 
+ * @param {any} t 
+ */
+function populateChildren(childrenNode, children, t) {
+  childrenNode.forEach((node) => {
+    node = parseNode(t, node);
+    if (!node) return;
+    children.push(node);
+  });
+}

jsx/jsx-to-tag.js

@@ -105,4 +105,4 @@
   },
   "dependencies": {},
   "browserslist": "cover 100%,not android < 5"
-}
+}

package.json

@@ -10,6 +10,11 @@ export default function tag(tagName, options = {}, children = []) {
 function create(tagName, options = {}, children = []) {
   let $el;
 
+  if (Array.isArray(options)) {
+    children = options;
+    options = {};
+  }
+
   if (typeof tagName === 'function') {
     return tagName(options, children);
   } else if (tagName instanceof Node) {
@@ -87,16 +92,19 @@ function create(tagName, options = {}, children = []) {
  */
 function addChildren($el, children) {
   for (let child of children) {
-    if (child instanceof Text) {
+    if (!(child instanceof Node)) {
+      if (
+        child === null
+        || child === undefined
+        || child === ''
+      ) continue;
+      child = tag.text(`${child}`);
+    } else if (child instanceof Text) {
       if ('clone' in child) {
         child = child.clone();
       }
     }
 
-    if (!(child instanceof Node)) {
-      child = tag.text(`${child}`);
-    }
-
     $el.appendChild(child);
   }
 }
@@ -117,16 +125,6 @@ Object.defineProperties(tag, {
       return [...$els];
     },
   },
-  parse: {
-    value(html) {
-      const $div = document.createElement('div');
-      $div.innerHTML = html;
-      if ($div.childElementCount === 1) {
-        return $div.firstElementChild;
-      }
-      return [...$div.children];
-    },
-  },
   text: {
     value(text) {
       return document.createTextNode(text);

src/tag.js

@@ -91,7 +91,7 @@ test(`<Test>...</Test>`, () => {
   <div className='test2'></div>
 </Test>`;
   const transformed = babel.transformSync(code, config);
-  expect(transformed.code).toBe(`tag(Test, {}, ["\\n  ", tag("div", {
+  expect(transformed.code).toBe(`tag(Test, ["\\n  ", tag("div", {
   className: 'test1'
 }), "\\n  ", tag("div", {
   className: 'test2'
@@ -193,3 +193,15 @@ test(`<button off:click={clickHandler}>Click me</button>`, () => {
   children: ["Click me"]
 });`);
 });
+
+test(`<div>{}</div>`, () => {
+  const code = `<div>{}</div>`;
+  const transformed = babel.transformSync(code, config);
+  expect(transformed.code).toBe(`tag("div");`);
+});
+
+test(`<div>{/*Comment*/}</div>`, () => {
+  const code = `<div>{/*Comment*/}</div>`;
+  const transformed = babel.transformSync(code, config);
+  expect(transformed.code).toBe(`tag("div");`);
+});