import { h, JSXNode } from "./jsx.ts";
export interface HtmlOptions { lang?: string; classes?: { html?: (string | boolean)[]; body?: (string | boolean)[] }; title?: string; meta?: Record<string, boolean | string | null | undefined>; links?: (boolean | { [key: string]: string; href: string; rel: string })[]; styles?: (boolean | string | { href?: string; text?: string; id?: string })[]; scripts?: (boolean | string | { src?: string; text?: string; type?: string; id?: string; async?: boolean; defer?: boolean; })[]; plugins?: Plugin[];}
export interface PluginContext extends Omit<Required<HtmlOptions>, "plugins" | "classes" | "lang" | "title"> { lang?: string; title?: string; classes: { html: (string | boolean)[]; body: (string | boolean)[] }; body: string; status: number; headers: Headers;}
export interface Plugin { (props: PluginContext): void | Promise<void>;}
export interface RenderOptions extends HtmlOptions { body: JSXNode | string; status?: number; headers?: HeadersInit;}
export default async function html( input: JSXNode | string | RenderOptions,): Promise<Response> { const { classes = {}, meta = {}, links = [], styles = [], scripts = [], body, status = 200, headers: headersInit, plugins, ...rest } = input instanceof JSXNode || typeof input === "string" ? { body: input } as RenderOptions : input; const { html: htmlClasses = [], body: bodyClasses = [] } = classes; const bodyHtml = typeof body === "string" ? body : body.toString(); const headers = new Headers(headersInit); headers.append("Content-Type", "text/html; charset=utf-8"); const context: PluginContext = { ...rest, classes: { html: htmlClasses, body: bodyClasses, }, meta, links, styles, scripts, body: bodyHtml, status, headers, }; for (const plugin of html.plugins) { await plugin(context); } if (plugins) { for (const plugin of plugins) { if (!html.plugins.includes(plugin)) { await plugin(context); } } } const root = <Html {...context} />; return new Response( `<!DOCTYPE html>` + root.toString(), { status: context.status, headers: context.headers, }, );}
export type HtmlProps = Omit<PluginContext, "status" | "headers">;
export function Html(props: HtmlProps): JSX.Element { const { lang, title, classes, meta, links, styles, scripts, body, } = props; return ( <html lang={lang ?? "en"} class={classes.html.filter(Boolean).join(" ") || undefined} > <head> <meta charSet="utf-8" /> {title && <title>{title}</title>} {Object.entries(meta).filter(([name, content]) => !!name && !!content) .map(([name, content]) => ( name.startsWith("og:") ? <meta property={name} content={String(content)} /> : <meta name={name} content={String(content)} /> ))} {links.filter(boolFilter).map(({ rel, href, ...rest }) => ( <link rel={rel} href={href} {...rest} /> ))} {styles.filter(boolFilter).map((style) => ( typeof style === "string" ? <style dangerouslySetInnerHTML={{ __html: style }} /> : ( <link id={style.id} rel="stylesheet" href={style.href} dangerouslySetInnerHTML={style.text ? { __html: style.text } : undefined} /> ) ))} {scripts.filter(boolFilter).map((script) => ( typeof script === "string" ? <script dangerouslySetInnerHTML={{ __html: script }} /> : ( <script id={script.id} type={script.type} src={script.src} async={script.async} defer={script.defer} dangerouslySetInnerHTML={script.text ? { __html: script.text } : undefined} /> ) ))} </head> <body class={classes.body.filter(Boolean).join(" ") || undefined} dangerouslySetInnerHTML={{ __html: body }} /> </html> );}
function boolFilter<T>(value: T | boolean): value is T { return Boolean(value);}
html.plugins = [] as Plugin[];html.use = (...plugin: Plugin[]) => { html.plugins.push(...plugin);};