Fixes & Updates

Author: NekR

index.js

@@ -1,42 +1,31 @@
 var jsx = require('jsx-runtime');
 var escape = require('escape-html');
-var Tag = require('./tag');
+var Tag = require('./lib/tag');
+var hasOwn = Object.prototype.hasOwnProperty;
 
 var renderer = jsx.register('HTML', {
   tags: {
     '*': {
       enter: function(tag, props) {
-        return new Tag(tag, props);
+        return new Tag(escape(tag), props);
       },
       leave: function(parent, tag) {
         return parent;
       },
       child: function(child, parent) {
         if (child == null) return parent;
 
-        if (typeof child === 'string') {
-          child = escape(child);
+        if (child instanceof Tag) {
+          parent.children.push(child);
+        } else {
+          child = escape(child + '');
         }
 
-        parent.children.push(child);
         return parent;
       },
       props: function(props) {
-        return Object.keys(props).map(function(key) {
-          var val = key && props[key];
-
-          if (!key || val == null) return '';
-          if (val instanceof Tag) return '';
-
-          if (typeof val === 'string') {
-            val = JSON.stringify(val);
-            val = val.slice(1, val.length - 1);
-          } else {
-            val = JSON.stringify(val);
-          }
-
-          return key + '="' + escape(val) + '"';
-        }).join(' ');
+        return Object.keys(props)
+          .map(mapProps).join(' ');
       }
     }
   },
@@ -45,4 +34,49 @@ var renderer = jsx.register('HTML', {
   }
 });
 
-module.exports = renderer;
+module.exports = renderer;
+
+function mapProps(key) {
+  var val = key && props[key];
+
+  if (!key || val == null) return '';
+  if (val instanceof Tag) return '';
+
+  if (key === 'className') key = 'class';
+  else if (key === 'cssFor') key = 'for';
+  else key = key.toLowerCase();
+
+  if (key === 'style') {
+    val = handleStyle(val);
+  }
+
+  if (typeof val === 'string') {
+    // do nothing
+  } else {
+    val = JSON.stringify(val);
+  }
+
+  return escape(key) + '="' + escape(val) + '"';
+}
+
+function handleStyle(style) {
+  if (typeof style === 'string') return style;
+
+  var string = '';
+
+  for (var key in style) {
+    if (!hasOwn.call(style, key)) continue;
+
+    key = key.replace(/[A-Z]/g, function(m) {
+      return '-' + m.toLowerCase();
+    });
+
+    if (key.search(/moz-|webkit-|o-|ms-/) === 0) {
+      key = '-' + key;
+    }
+
+    string += key + ': ' + val + ';';
+  }
+
+  return string;
+}

package.json

@@ -9,10 +9,10 @@
   "author": "Arthur Stolyar <[email protected]>",
   "license": "MIT",
   "dependencies": {
-    "babel-plugin-jsx": "^1.0.1",
+    "babel-plugin-jsx": "^1.1.0",
+    "jsx-runtime": "^1.1.0",
     "escape-html": "^1.0.2",
     "html-tags": "^1.1.1",
-    "jsx-runtime": "^1.0.2",
     "svg-tags": "^1.0.0"
   },
   "repository": "jsx-ir/jsx-to-html",