(feat) escape HTML by default, use trust() for raw

Signed-off-by: Muthu Kumar <muthukumar@thefeathers.in>

Author: MKRhere

README.md

@@ -7,6 +7,8 @@ Hyperactive is a suite of tools to build smart webapps. As of 1.0, only server-s
 ```TypeScript
 import { elements, renderHTML } from "https://deno.land/x/hyperactive/mod.ts";
 
+const [ div, p, h1 ] = elements("div", "p", "h1");
+
 assertEquals(
   renderHTML(
     div(

src/Node.ts

@@ -1,19 +1,13 @@
 import { Element } from "./elements.ts";
-
-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);
+import { Falsy, isFalsy } from "./util.ts";
 
 export type Attr = Record<string, string>;
 
 export type TextNode = string;
 
-export type Nodeish<Tag extends Element = Element> =
-	| Node<Tag>
-	| TextNode
-	| Falsy;
+export class HTMLNode {
+	constructor(public htmlString: string) {}
+}
 
 export class Node<Tag extends Element = Element, Attrs extends Attr = Attr> {
 	constructor(
@@ -23,9 +17,15 @@ export class Node<Tag extends Element = Element, Attrs extends Attr = Attr> {
 	) {}
 }
 
+export type Nodeish<Tag extends Element = Element> =
+	| Node<Tag>
+	| TextNode
+	| HTMLNode
+	| Falsy;
+
 // deno-lint-ignore no-explicit-any
-export const isNode = (n: any): n is Node | TextNode =>
-	n instanceof Node || typeof n === "string";
+export const isNode = (n: any): n is Node | HTMLNode | TextNode =>
+	n instanceof Node || n instanceof HTMLNode || typeof n === "string";
 
 export function h<Tag extends Element = Element, Attrs extends Attr = Attr>(
 	elem: Tag,
@@ -71,7 +71,7 @@ export function h(
 export type hElement<Tag extends Element = Element> =
 	//
 	((props?: Attr) => Node<Tag>) &
-		(<TNodeish extends Nodeish>(childNode: TNodeish) => Node<Tag>) &
+		((...childNodes: Nodeish[]) => Node<Tag>) &
 		((props: Attr, ...childNodes: Nodeish[]) => Node<Tag>);
 
 export const elements = <Elems extends Element[]>(...elems: Elems) => {
@@ -86,3 +86,7 @@ export const elements = <Elems extends Element[]>(...elems: Elems) => {
 		>;
 	};
 };
+
+export function trust(html: string) {
+	return new HTMLNode(html);
+}

src/render.ts

@@ -1,8 +1,10 @@
-import { Nodeish, isFalsy } from "./Node.ts";
+import { Nodeish, HTMLNode } from "./Node.ts";
+import { isFalsy, escapeHTML } from "./util.ts";
 
 export function renderHTML(node: Nodeish) {
-	if (typeof node === "string") return node;
 	if (isFalsy(node)) return "";
+	if (typeof node === "string") return escapeHTML(node);
+	if (node instanceof HTMLNode) return node.htmlString;
 
 	let stringified = "<" + node.tag;
 

src/util.ts

@@ -1 +1,16 @@
+const escapables = {
+	"<": "&lt;",
+	">": "&gt;",
+	"&": "&amp;",
+	"'": "&#39;",
+	'"': "&quot;",
+};
+
+export const escapeHTML = (s: string) =>
+	s.replace(/<|>|&|"|'/g, r => escapables[r as keyof typeof escapables] || r);
+
 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);

test.ts

@@ -1,6 +1,6 @@
 import { assertEquals } from "https://deno.land/std@0.99.0/testing/asserts.ts";
 
-import { elements, renderHTML } from "./mod.ts";
+import { elements, trust, renderHTML } from "./mod.ts";
 
 const [div, p, h1, br] = elements("div", "p", "h1", "br");
 
@@ -28,3 +28,17 @@ Deno.test({
 		);
 	},
 });
+
+Deno.test({
+	name: "renderHTML with HTML characters",
+	fn: () => {
+		assertEquals(renderHTML(p("<test />")), `<p>&lt;test /&gt;</p>`);
+	},
+});
+
+Deno.test({
+	name: "renderHTML with trusted HTML",
+	fn: () => {
+		assertEquals(renderHTML(p(trust("<test />"))), `<p><test /></p>`);
+	},
+});