cohost/html/html.ts

165 lines
4.1 KiB
TypeScript
Raw Normal View History

2023-07-11 14:48:27 -04:00
import { writeText } from "https://deno.land/x/copy_paste@v1.1.3/mod.ts";
2023-07-09 02:34:35 -04:00
export type Prop = string | number | boolean;
export type Attributes = Record<string, Prop>;
export type Html = string | NonText;
export type NonText = {
tag: string;
attributes: Attributes;
children: Html[];
};
export const Fragment = "Fragment";
function is_string(elem: Html): elem is string {
return typeof elem == "string";
}
export function fr(...children: Html[]): Html {
return { tag: Fragment, attributes: {}, children };
}
function div(...children: Html[]): Html {
return { tag: "div", attributes: {}, children };
}
function expand_fragments_in_list(children: Html[]): Html[] {
let out = [];
for (const child of children) {
if (is_string(child)) {
out.push(child);
} else if (child.tag == Fragment) {
out.push(...child.children.map(expand_fragments));
} else {
out.push(child);
}
}
return out;
}
// NOTE: if you pass a fragment to this, it won't be expanded (which makes sense if you think about it)
function expand_fragments(elem: Html): Html {
if (is_string(elem)) {
return elem;
} else {
2023-07-11 14:19:46 -04:00
const children = expand_fragments_in_list(elem.children ?? []);
2023-07-09 02:34:35 -04:00
return { ...elem, children };
}
}
const attr = (attrs: Attributes) => (elem: Html): Html => {
if (is_string(elem)) {
return elem;
} else {
const { tag, attributes, children } = elem;
return { tag, attributes: { ...attributes, ...attrs }, children };
}
};
2023-07-11 14:19:46 -04:00
const escape = (unsafe: string): string =>
unsafe
2023-07-09 02:34:35 -04:00
.replaceAll("&", "&amp;")
.replaceAll("<", "&lt;")
.replaceAll(">", "&gt;")
.replaceAll('"', "&quot;")
.replaceAll("'", "&#039;");
function render_attributes(attrs: Attributes): string {
return (
(Object.keys(attrs).length > 0 ? " " : "") +
Object.entries(attrs)
.filter(([_attr, val]) => typeof val != "undefined")
.map(([attr, val]) => `${attr}="${escape((val ?? "").toString())}"`)
.join(" ")
);
}
function indent(str: string, amount = 4, char = " "): string {
2023-07-11 14:19:46 -04:00
const ind = char.repeat(amount);
2023-07-09 02:34:35 -04:00
return str
.split("\n")
.map((l) => ind + l)
.join("\n");
}
2023-07-11 14:19:46 -04:00
// incomplete, obviously
// i hate html
const NON_SELF_CLOSING = ["div", "p", "a", "summary"];
2023-07-09 20:51:15 -04:00
2023-07-09 02:34:35 -04:00
function render_elem(
{ tag, attributes, children }: NonText,
mini = false,
): string {
if (children.length == 0) {
2023-07-12 07:05:48 -04:00
if (NON_SELF_CLOSING.includes(tag)) {
return `<${tag}${render_attributes(attributes)}></${tag}>`;
} else {
2023-07-09 20:51:15 -04:00
return (
`<${tag}${render_attributes(attributes)}` + (mini ? "/>" : " />")
);
}
2023-07-09 02:34:35 -04:00
} else {
let inner = "";
let string_last = false;
for (let i = 0; i < children.length; i++) {
let child = children[i];
2023-07-09 13:21:24 -04:00
const rendered = render(child, mini ? "mini" : undefined);
2023-07-09 02:34:35 -04:00
if (is_string(child)) {
mini && string_last && (inner += " ");
inner += rendered;
string_last = true;
} else {
inner += rendered;
string_last = false;
}
if (!mini && i + 1 < children.length) inner += "\n";
}
return [
`<${tag}${render_attributes(attributes)}>`,
mini ? inner : indent(inner),
`</${tag}>`,
].join(mini ? "" : "\n");
}
}
// old:
// joining with " " is inefficient, but necessary for correct string behavior
// i've decided that joining with "" is worth the size savings
// THIS MEANS MINIFICATION IS SEMANTICALLY DIFFERENT
// JK I DID IT THE HARD WAY :]
2023-07-09 13:21:24 -04:00
export function render(elem: Html, mini?: "mini"): string {
2023-07-09 02:34:35 -04:00
if (is_string(elem)) {
return escape(elem);
} else if (elem.tag == Fragment) {
// mimics react's behavior with fragments, ehhh nvm different aims
return elem.children.map((elem) => render(elem, mini)).join("\n");
} else {
const { tag, attributes } = elem;
const expanded = expand_fragments(elem);
if (is_string(expanded)) {
throw "impossible";
}
return render_elem(
{ tag, attributes, children: expanded.children },
2023-07-09 13:21:24 -04:00
mini == "mini",
2023-07-09 02:34:35 -04:00
);
}
}
2023-07-09 13:22:38 -04:00
export function debug_render(elem: Html) {
console.log(elem);
console.log(render(elem));
2023-07-11 14:48:27 -04:00
const mini_render = render(elem, "mini");
console.log(mini_render);
writeText(mini_render);
2023-07-09 13:22:38 -04:00
}