You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
129 lines
3.2 KiB
129 lines
3.2 KiB
function ind(_: number | undefined | null, str: string): string {
|
|
return str;
|
|
};
|
|
|
|
var tagsToReplace: Record<string, string> = {
|
|
'&': '&',
|
|
'<': '<',
|
|
'>': '>'
|
|
};
|
|
|
|
export function escapeHtmlShitty(x: string): string {
|
|
return x.replace(/[&<>]/g, (tag) => tagsToReplace[tag] || tag);
|
|
}
|
|
|
|
export interface HtmlEnt {
|
|
toHtmlStr(indent?: number): string;
|
|
};
|
|
|
|
class HtmlElem implements HtmlEnt {
|
|
public name: string;
|
|
public attrs: { [id: string]: string | boolean | undefined } = {};
|
|
public content: HtmlEnt[] = [];
|
|
|
|
constructor(n: string) {
|
|
this.name = n;
|
|
}
|
|
|
|
setAttribute(id: string, val: string | boolean) {
|
|
this.attrs[id] = val;
|
|
}
|
|
|
|
appendChild(...c: HtmlEnt[]) {
|
|
this.content.push(...c);
|
|
}
|
|
|
|
toHtmlStr(indent?: number) {
|
|
const out: string[] = [];
|
|
const tag: string[] = [`<${this.name}`];
|
|
for (const key of Object.keys(this.attrs)) {
|
|
if (!this.attrs.hasOwnProperty(key)) continue;
|
|
|
|
const x = this.attrs[key];
|
|
if (x === undefined) continue;
|
|
if (typeof x === "boolean" && !!x) {
|
|
tag.push(key);
|
|
} else {
|
|
tag.push(`${key}="${x}"`);
|
|
}
|
|
}
|
|
if (this.content.length === 0) {
|
|
return ind(indent, tag.join(" ")) + " />";
|
|
}
|
|
|
|
out.push(ind(indent, tag.join(" ")) + '>');
|
|
for (const e of this.content) {
|
|
try {
|
|
out.push(e.toHtmlStr((indent ?? 0) + 2));
|
|
} catch(exc) {
|
|
out.push(e.toString());
|
|
}
|
|
}
|
|
out.push(ind(indent, `</${this.name}>`));
|
|
return out.join("");
|
|
}
|
|
}
|
|
|
|
class HtmlText implements HtmlEnt {
|
|
public value: string;
|
|
constructor(v: string) {
|
|
this.value = v;
|
|
}
|
|
|
|
toHtmlStr(indent?: number) {
|
|
return ind(indent, this.value);
|
|
}
|
|
}
|
|
|
|
type Content = HtmlEnt | string | Content[] | undefined;
|
|
|
|
const add = (element: HtmlElem, child: Content) => {
|
|
if (typeof child === 'string') {
|
|
element.appendChild(new HtmlText(child.toString()))
|
|
} else if (child instanceof Array) {
|
|
child.forEach((x) => add(element, x));
|
|
} else if (child === undefined) {
|
|
return;
|
|
} else {
|
|
element.appendChild(child);
|
|
}
|
|
};
|
|
|
|
type JSXName<T> = string | ((props: T) => HtmlEnt);
|
|
type ElemProps = { [id: string]: string | boolean }
|
|
|
|
export class JSX {
|
|
static createTextNode(t: string): HtmlEnt {
|
|
return new HtmlText(t);
|
|
}
|
|
|
|
static createElement<T>(fn: (props: T) => HtmlEnt, props: T, ...content: Content[]): HtmlEnt;
|
|
static createElement(name: string, props: ElemProps, ...content: Content[]): HtmlEnt;
|
|
static createElement<P, T extends JSXName<P>>(name: T, arg: T extends 'string' ? ElemProps : P, ...content: Content[]): HtmlEnt {
|
|
if (typeof name !== 'string') {
|
|
return name(arg);
|
|
} else {
|
|
const element = new HtmlElem(name);
|
|
const props = (arg as { [id: string]: string | boolean }) || {};
|
|
|
|
for (let name in props) {
|
|
if (name && props.hasOwnProperty(name)) {
|
|
let value = props[name];
|
|
if (value === true) {
|
|
element.setAttribute(name, name);
|
|
} else if (value !== false && value != null) {
|
|
element.setAttribute(name, value.toString());
|
|
}
|
|
}
|
|
}
|
|
|
|
for (let i = 0; i < content.length; i++) {
|
|
let child = content[i];
|
|
add(element, child);
|
|
}
|
|
return element;
|
|
}
|
|
}
|
|
};
|
|
|
|
export default JSX;
|