jsx.ts

declare global {
  // eslint-disable-next-line @typescript-eslint/no-namespace
  namespace jsx.JSX {
    interface IntrinsicElements {
      [tagName: string]: Record<string, string>
    }
  }
}

// eslint-disable-next-line @typescript-eslint/ban-types
type EscapedString = String & { isEscaped: true }

function escape(str: string): string {
  return str
    .replace(/&/g, '&amp;')
    .replace(/"/g, '&quot;')
    .replace(/'/g, '&#39;')
    .replace(/</g, '&lt;')
    .replace(/>/g, '&gt;')
}

export function jsx(
  tag: string | Function,
  props: Record<string, any>,
  ...children: (string | EscapedString)[]
): EscapedString {
  if (typeof tag === 'function') {
    return tag.call(null, { ...props, children })
  }
  let attrs = ''
  const propsKeys = Object.keys(props || {})
  for (let i = 0, len = propsKeys.length; i < len; i++) {
    attrs += ` ${propsKeys[i]}="${escape(props[propsKeys[i]])}"`
  }

  const res: any = new String(
    `<${tag}${attrs}>${children
      .flat()
      .map((c) => ((c as any).isEscaped ? c : escape(c as string)))
      .join('')}</${tag}>`
  )
  res.isEscaped = true

  return res
}