JSX without react

README.md

Code snippets to use JSX without React

external.d.ts

declare module JSX {
	type Element = string;

	interface IntrinsicElements {
		[elemName: string]: any;
	}
}

index.ts

import "./JSX";

console.log("Hello world");

JSX.ts

class JSXService {
	public createElement(tag: string, attrs: any, children: any): HTMLElement {
		var element: HTMLElement = document.createElement(tag);
		for (let name in attrs) {
			if (name && attrs.hasOwnProperty(name)) {
				var value: string | null | boolean = attrs[name];
				if (value === true) {
					element.setAttribute(name, name);
				} else if (value !== false && value != null) {
					element.setAttribute(name, value.toString());
				}
			}
		}
		for (let i: number = 2; i < arguments.length; i++) {
			let child: any = arguments[i];
			element.appendChild(
				child.nodeType == null ?
					document.createTextNode(child.toString()) : child);
		}
		return element;
	}
}

var JSX: JSXService = new JSXService();
window["JSX"] = JSX;

tsconfig.json

{
  "compilerOptions": {
    "jsx": "react",
    "jsxFactory": "JSX.createElement"
  }
}