import { html, RawHTML } from "https://esm.town/v/postpostscript/html"; export function multiFormat( strings: TemplateStringsArray, ...replacements: (string | R)[] ) { return strings.reduce((res, string, index) => { let toAdd = { text: string } as R; if (replacements.length >= index + 1) { const replacement = replacements[index]; toAdd = combineMultiFormat([ toAdd, typeof replacement === "string" ? { text: replacement } : replacement, ]); } return combineMultiFormat([res, toAdd]); }, { text: "", } as R); } export const DEFAULT_TRANSFORMERS: Transformers = { html(value: string) { if (value instanceof RawHTML) { return value; } return new RawHTML(html`${value}`.replace(/\n/g, "\n
")) as string; }, }; export function combineMultiFormat( values: (R | string)[], transformers = DEFAULT_TRANSFORMERS as Transformers, ) { if (values.length === 1) { return normalizeMultiFormat(values[0]); } const keys = new Set( ["text", ...values].map(value => { return typeof value === "string" ? [] : Object.keys(value); }).flat(), ); return Object.fromEntries([...keys].map(key => { const normalize = transformers[key] ? (value: string) => transformers[key](value) : (value: string) => value; return [ key, values.slice(1).reduce( (res, value) => { return addStrings( res, isString(value) ? normalize(value) : getMultiFormatValue(value, key), ); }, isString(values[0]) ? normalize(values[0]) : getMultiFormatValue(values[0], key, transformers), ), ]; })) as R; } export function joinMultiFormat(values: (R | string)[], join: R | string) { if (!values.length) { return { text: "", }; } let res = normalizeMultiFormat(values[0]); for (const value of values.slice(1)) { res = combineMultiFormat([ res, join, value, ]); } return res; } export function normalizeMultiFormat(value: R | string | number | boolean | null | undefined) { if (isString(value)) { return { text: value }; } if (typeof value === "object") { return value; } return { text: toString(value) }; } export function getMultiFormatValue( value: R, key: K, transformers: Transformers = DEFAULT_TRANSFORMERS, ) { const normalize = transformers[key] ? (value: string) => transformers[key](value) : (value: string) => value; if (typeof value !== "object") { return normalize(toString(value)); } return value[key] ?? normalize(value.text); } function isString(value: unknown): value is string { return typeof value === "string" || value instanceof String; } function toString(value: unknown) { if (isString(value)) { return value; } if (value === undefined) { return "undefined"; } return JSON.stringify(value); } export function addStrings(valueA: unknown, valueB: unknown) { if (!(isString(valueA) && isString(valueB))) { return addStrings( toString(valueA), toString(valueB), ); } const constructor = valueA.constructor !== String ? valueA.constructor : valueB.constructor; return constructor === String ? valueA + valueB : new constructor(valueA + valueB) as string; } export function wrapHTMLTag( tag: string, text: string | MultiFormatWithHTML, attrs: Record = {}, ): MultiFormatWithHTML { const value = normalizeMultiFormat(text); const _tag = new RawHTML(tag); const _attrs = Object.values(attrs).length ? new RawHTML( " " + Object.entries(attrs).map(([key, value]) => { return key.replace(/[^a-zA-Z\-_]/g, "") + "=" + JSON.stringify(value); }).join(" "), ) : ""; return { ...value, html: html`<${_tag}${_attrs}>${getMultiFormatValue(value, "html")}`, }; } export function createFormatMethod(method: (value: R) => R) { return ( strings: TemplateStringsArray, ...replacements: (string | R)[] ) => { return method(multiFormat(strings, ...replacements)); }; } export function createWrapTagFormatMethod(tag: string, attrs: Record = {}) { return createFormatMethod((value) => { return wrapHTMLTag(tag, value, attrs); }); } export const Paragraph = createWrapTagFormatMethod("p"); export const Container = createWrapTagFormatMethod("div"); export const Heading1 = createWrapTagFormatMethod("h1"); export const Heading2 = createWrapTagFormatMethod("h2"); export const Heading3 = createWrapTagFormatMethod("h3"); export const Heading4 = createWrapTagFormatMethod("h4"); export const Heading5 = createWrapTagFormatMethod("h5"); export const Heading6 = createWrapTagFormatMethod("h6"); export const LineBreak: MultiFormatWithHTML = { text: "\n", html: html`
` as string, }; export const Strong = createWrapTagFormatMethod("strong"); export const Emphasis = createWrapTagFormatMethod("em"); export const Underline = createWrapTagFormatMethod("u"); export const Small = createWrapTagFormatMethod("small"); export const Monospace = createWrapTagFormatMethod("pre", { style: "display: inline-block", }); export function ListItem(item: string | MultiFormatWithHTML, i: number | undefined = undefined) { return combineMultiFormat([ { text: typeof i === "number" ? `${i}. ` : "- ", html: html`

` as string, }, normalizeMultiFormat(item), { text: "", html: html`

` as string, }, ]); } export function OrderedList(items: (string | MultiFormatWithHTML)[]) { return joinMultiFormat([ { text: "\n", html: html`\n` as string, }, wrapHTMLTag( "ol", joinMultiFormat(items.map((item, i) => ListItem(item, i + 1)), { text: "\n", html: html`\n` as string, }), ), { text: "\n", html: html`\n` as string, }, ], ""); } export function UnorderedList(items: (string | MultiFormatWithHTML)[]) { return joinMultiFormat([ { text: "\n", html: html`\n` as string, }, wrapHTMLTag( "ul", joinMultiFormat(items.map(item => ListItem(item)), { text: "\n", html: html`\n` as string, }), ), { text: "\n", html: html`\n` as string, }, ], ""); } export const Hidden = createFormatMethod((value) => { return wrapHTMLTag("span", value, { style: "display: none;", }); }); export const Link = (href: string, label?: string | MultiFormatWithHTML) => { return wrapHTMLTag("a", label ?? href, { href, }); }; export const Trim = createFormatMethod((value) => { return Object.fromEntries( Object.entries(value).map(([key, value]) => { let trimmed = value.trim(); if (value instanceof RawHTML) { trimmed = new RawHTML(trimmed.replace(/(^\s*(\s*)*)|(\s*(\s*)*$)/g, "")); } return [ key, typeof value === "string" ? trimmed : new value.constructor(trimmed), ]; }), ); }); export const format = { Plain: multiFormat, Trim, Strong, Emphasis, Underline, Small, Link, Hidden, Monospace, Paragraph, Container, LineBreak, OrderedList, UnorderedList, Heading1, Heading2, Heading3, Heading4, Heading5, Heading6, }; export type MultiFormat = { text: string } & Partial>; export type MultiFormatWithHTML = { text: string; html?: string } & Partial>; export type Transformers = Partial< { [key in keyof R]: (value: string) => string; } >;