(feat) simple renderDOM implementation

MKRhere · MKRhere · commit ac2ea83b60f0 · 2021-06-24T01:41:59.000+05:30
Signed-off-by: Muthu Kumar &lt;muthukumar@thefeathers.in&gt;
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1 @@
+browser-test/test.browser.js
diff --git a/browser-test/index.html b/browser-test/index.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<meta charset="utf-8" />
+		<title>Hyperactive!</title>
+		<meta name="viewport" content="width=device-width, initial-scale=1" />
+	</head>
+
+	<body>
+		<noscript>You need to enable JavaScript to run this app.</noscript>
+		<div id="root"></div>
+		<script type="application/javascript" src="/test.browser.js"></script>
+	</body>
+</html>
diff --git a/src/render.ts b/src/render.ts
@@ -1,5 +1,8 @@
-import { Nodeish, HTMLNode } from "./Node.ts";
-import { isFalsy, escapeHTML } from "./util.ts";
+///<reference path="https://raw.githubusercontent.com/denoland/deno/main/cli/dts/lib.deno.ns.d.ts" />
+///<reference path="https://raw.githubusercontent.com/microsoft/TypeScript/main/lib/lib.dom.d.ts" />
+
+import { Node, Nodeish, HTMLNode } from "./Node.ts";
+import { Falsy, isFalsy, escapeHTML, guessEnv } from "./util.ts";
 
 export function renderHTML(node: Nodeish) {
 	if (isFalsy(node)) return "";
@@ -21,3 +24,47 @@ export function renderHTML(node: Nodeish) {
 
 	return stringified;
 }
+
+type NodeishtoDOM<N extends Nodeish> = N extends Falsy
+	? ""
+	: N extends string
+	? string
+	: N extends HTMLNode
+	? { innerHTML: string }
+	: HTMLElement;
+
+const toDOM = function toDOM<N extends Nodeish>(node: N) {
+	if (isFalsy(node)) return "";
+	if (typeof node === "string") return escapeHTML(node);
+	if (node instanceof HTMLNode) return { innerHTML: node.htmlString };
+
+	const el = document.createElement(node.tag);
+
+	for (const attr in node.attrs) {
+		el.setAttribute(attr, node.attrs[attr]);
+	}
+
+	for (const child of node.children) {
+		const childNode = toDOM(child);
+		if (typeof childNode !== "string" && "innerHTML" in childNode)
+			el.insertAdjacentHTML("beforeend", childNode.innerHTML);
+		else el.append(childNode);
+	}
+
+	return el;
+} as <N extends Nodeish>(node: N) => NodeishtoDOM<N>;
+
+export function renderDOM<
+	HyNode extends Node | string,
+	RootNode extends HTMLElement,
+>(rootNode: RootNode, hyNode: HyNode) {
+	const env = guessEnv();
+	if (env !== "browser")
+		throw new Error(
+			`renderDOM is meant to be used in the browser.` +
+				` Found: '${env || "unknown"}'`,
+		);
+
+	const domNode = toDOM(hyNode);
+	return rootNode.append(domNode);
+}
diff --git a/src/util.ts b/src/util.ts
@@ -14,3 +14,12 @@ export type Falsy = false | "" | 0 | 0n | undefined | null;
 export const Falsy = new Set([false, "", 0, 0n, undefined, null]);
 // deno-lint-ignore no-explicit-any
 export const isFalsy = (n: any): n is Falsy => Falsy.has(n);
+
+export const guessEnv = () => {
+	if (typeof window === "undefined") {
+		// @ts-ignore process is a node global API
+		if (typeof process === "undefined") return "node";
+		else return undefined;
+	} else if (typeof window.Deno !== "undefined") return "deno";
+	else return "browser";
+};
diff --git a/test.browser.ts b/test.browser.ts
@@ -0,0 +1,11 @@
+///<reference path="https://raw.githubusercontent.com/denoland/deno/main/cli/dts/lib.deno.ns.d.ts" />
+///<reference path="https://raw.githubusercontent.com/microsoft/TypeScript/main/lib/lib.dom.d.ts" />
+
+import { elements, renderDOM } from "./mod.ts";
+
+const { div, p } = elements;
+
+renderDOM(
+	document.getElementById("root")!,
+	div({ class: "container" }, p("Hello world")),
+);
