/** @jsxRuntime classic */
/** @jsx h */
/** @jsxFrag Fragment */
/*
  sample-no-react.tsx: JSX with no library at all.
  Free sample from 99helpers.com/file-types/tsx

  The three comments above tell the compiler what to turn JSX into:
  <tag a="1">text</tag> becomes h("tag", { a: "1" }, "text"), and <>…</>
  becomes h(Fragment, null, …). Here h() builds HTML as text, so the file
  needs no React and no npm install.

  Run:    npx tsx sample-no-react.tsx    or    bun sample-no-react.tsx
  Check:  npx tsc --noEmit --jsx react sample-no-react.tsx
*/

// h() returns this object rather than a bare string, so finished HTML is
// never escaped a second time.
type Html = { readonly html: string };
type Child = Html | string | number | boolean | null | undefined | Child[];
type Props = Record<string, unknown> | null;
type Component = (props: Record<string, unknown>) => Html;

// The types TypeScript checks JSX against: what <tag> returns, which
// lowercase tags exist, and which prop carries the children.
declare global {
  namespace JSX {
    type Element = Html;
    interface IntrinsicElements {
      [tag: string]: Record<string, unknown>;
    }
    interface ElementChildrenAttribute {
      children: unknown;
    }
  }
}

const ENTITIES: Record<string, string> = { "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;" };
const escape = (text: string): string => text.replace(/[&<>"]/g, (c) => ENTITIES[c]);

function render(child: Child): string {
  if (Array.isArray(child)) return child.map(render).join("");
  if (child === null || child === undefined || typeof child === "boolean") return "";
  if (typeof child === "object") return child.html;
  return escape(String(child));
}

export function Fragment(props: { children?: Child }): Html {
  return { html: render(props.children ?? []) };
}

export function h(tag: string | Component, props: Props, ...children: Child[]): Html {
  if (typeof tag === "function") return tag({ ...props, children });
  const attrs = Object.entries(props ?? {})
    .map(([name, value]) => ` ${name}="${escape(String(value))}"`)
    .join("");
  return { html: `<${tag}${attrs}>${render(children)}</${tag}>` };
}

// A typed component, used like any other JSX tag.
function Item(props: { name: string; price: number; children?: Child }) {
  return (
    <li data-price={props.price}>
      {props.name}: €{props.price.toFixed(2)} {props.children}
    </li>
  );
}

const menu: Array<[string, number]> = [
  ["Thé vert", 3.5],
  ["Crème brûlée", 5.25],
  ["Fish & chips", 12],
];

const page = (
  <>
    <h1 class="title">Café menu</h1>
    <ul>
      {menu.map(([name, price]) => (
        <Item name={name} price={price}>
          {price > 10 ? <em>(main)</em> : null}
        </Item>
      ))}
    </ul>
  </>
);

console.log(page.html);