johnholdun/fake-jsx.js

## fake-jsx.js
var objectToAttributes = function (object) {
  var output = "";

  var keyTranslations = {
    className: "class",
    htmlFor: "for"
  };

  Object.keys(object).forEach(function (key) {
    var value = object[key];

    if (!value) {
      return;
    }

    if (output.length) {
      output += " ";
    }

    output += keyTranslations[key] || key;

    if (value === true) {
      return;
    }

    output += "=" + JSON.stringify(value.toString());
  });

  return output;
};

var isSelfClosingTag = function (tag) {
  var selfClosingTags = [
    "area",
    "base",
    "br",
    "col",
    "embed",
    "hr",
    "img",
    "input",
    "keygen",
    "link",
    "meta",
    "param",
    "source",
    "track",
    "wbr"
  ];

  return selfClosingTags.indexOf(tag) > -1;
};

var assign = function (obj) {
  var length = arguments.length;

  for (var index = 1; index < length; index++) {
    var
      source = arguments[index],
      keys = Object.keys(source),
      l = keys.length;

    for (var i = 0; i < l; i++) {
      var key = keys[i];
      obj[key] = source[key];
    }
  }

  return obj;
};

var el = function (tag, props, children) {
  if (typeof props !== "object") {
    props = {};
  }

  if (!children) {
    children = [];
  } else if (!(children instanceof Array)) {
    children = [children];
  }

  if (typeof tag === "function") {
    if (children.length) {
      props = assign({}, props, { children: children });
    }

    return tag(props);
  }

  if (props.hasOwnProperty("children")) {
    children = props.children;
    props = assign({}, props, { children: null });
  }

  var output = "<" + tag;

  var attributes = objectToAttributes(props);

  if (attributes.length) {
    output += " " + attributes;
  }

  if (isSelfClosingTag(tag) && !children.length) {
    output += " />";
  } else {
    output += ">" + children.join("") + "</" + tag + ">";
  }

  return output;
};

var Figure = function (props) {
  return el("figure", { className: props.className }, [
    el("img", { alt: props.alt, src: props.src }),
    el("figcaption", {}, props.caption)
  ]);
};

var Root = function (props) {
  var html = el("html", {}, [
    el("head", {}, [
      el("meta", { charset: "utf-8" }),
      el("title", {}, props.title)
    ]),
    el("body", {}, props.children)
  ]);

  return "<!DOCTYPE html>\n" + html;
};

var doc = el(Root, { title: "My Foobar on the Web" }, [
  el("div", { id: "zerpy" }, [
    el(Figure, {
      className: "foobar",
      alt: "My Foobar",
      src: "/foobar.jpg",
      caption: "My Foobar"
    })
  ])
]);

console.log(doc);
	var objectToAttributes = function (object) {
	var output = "";

	var keyTranslations = {
	className: "class",
	htmlFor: "for"
	};

	Object.keys(object).forEach(function (key) {
	var value = object[key];

	if (!value) {
	return;
	}

	if (output.length) {
	output += " ";
	}

	output += keyTranslations[key] \|\| key;

	if (value === true) {
	return;
	}

	output += "=" + JSON.stringify(value.toString());
	});

	return output;
	};

	var isSelfClosingTag = function (tag) {
	var selfClosingTags = [
	"area",
	"base",
	"br",
	"col",
	"embed",
	"hr",
	"img",
	"input",
	"keygen",
	"link",
	"meta",
	"param",
	"source",
	"track",
	"wbr"
	];

	return selfClosingTags.indexOf(tag) > -1;
	};

	var assign = function (obj) {
	var length = arguments.length;

	for (var index = 1; index < length; index++) {
	var
	source = arguments[index],
	keys = Object.keys(source),
	l = keys.length;

	for (var i = 0; i < l; i++) {
	var key = keys[i];
	obj[key] = source[key];
	}
	}

	return obj;
	};

	var el = function (tag, props, children) {
	if (typeof props !== "object") {
	props = {};
	}

	if (!children) {
	children = [];
	} else if (!(children instanceof Array)) {
	children = [children];
	}

	if (typeof tag === "function") {
	if (children.length) {
	props = assign({}, props, { children: children });
	}

	return tag(props);
	}

	if (props.hasOwnProperty("children")) {
	children = props.children;
	props = assign({}, props, { children: null });
	}

	var output = "<" + tag;

	var attributes = objectToAttributes(props);

	if (attributes.length) {
	output += " " + attributes;
	}

	if (isSelfClosingTag(tag) && !children.length) {
	output += " />";
	} else {
	output += ">" + children.join("") + "</" + tag + ">";
	}

	return output;
	};

	var Figure = function (props) {
	return el("figure", { className: props.className }, [
	el("img", { alt: props.alt, src: props.src }),
	el("figcaption", {}, props.caption)
	]);
	};

	var Root = function (props) {
	var html = el("html", {}, [
	el("head", {}, [
	el("meta", { charset: "utf-8" }),
	el("title", {}, props.title)
	]),
	el("body", {}, props.children)
	]);

	return "<!DOCTYPE html>\n" + html;
	};

	var doc = el(Root, { title: "My Foobar on the Web" }, [
	el("div", { id: "zerpy" }, [
	el(Figure, {
	className: "foobar",
	alt: "My Foobar",
	src: "/foobar.jpg",
	caption: "My Foobar"
	})
	])
	]);

	console.log(doc);