htmlを出力するための関数

h.ts

export interface HElement {
  tag: string, attrs: Record<string,string>, children: (HElement|string)[], toHTML(): string, toDOM(): Element
}

export type HComponent = ((attrs:Record<string,string>,children:HElement["children"],componentUtil:HComponentUtil)=>HElement)

export interface HComponentUtil_nonPrivate {
  __nativeElement__?:Element
  __event__: {
    didMount:null|(()=>void)
  }
}

export class HComponentUtil {
  private __nativeElement__?:HComponentUtil_nonPrivate["__nativeElement__"]
  private __event__:HComponentUtil_nonPrivate["__event__"] = {
    didMount:null as null|(()=>void)
  }

  didMount(f:(()=>void)): void {
    if (!this.__event__.didMount)this.__event__.didMount = f
  }
}

export const isNode = (): (typeof globalThis.process) extends undefined ? false : true => globalThis.process !== undefined

export const h = (()=>{
  const escapeHTML = (text:string) => ["&","<",">","=",'"',"'","`","/"].forEach( c => text = text.replaceAll(c,"&#x"+c.charCodeAt(0).toString(16)+";") ) as undefined || text
  return (tag:string|HComponent,attrs: Record<string,string>,...children: HElement["children"]): HElement => {
    if (typeof tag === "string"){
      let __tag = tag
      const __attrs = attrs
      let __element:ReturnType<typeof isNode> extends true ? Element : undefined
      if (!isNode()){
        //TODO
      }
      return ({
        set tag(v:string){
          __tag = v
        },
        get tag(){
          return __tag
        },
        get attrs(){
          return __attrs
        },
        children: children,
        toHTML(){
          return `<${tag} ${Object.entries(attrs).map(([k,v]) => `${k}="${escapeHTML(v)}"`).join(" ")}>${children.map( x => typeof x === "string" ? escapeHTML(x) : x.toHTML()).join("")}</${tag}>`
        },
        toDOM(){
          // TODO
        }
      })
    }
    else return tag(attrs,children,new HComponentUtil())
  }
})()