const def =
{
	type: "div",
	childNodes:
	[
		{ type: "p", childNodes: [ "こんにちは！" ] }
	]
};

export type TagFunc<Result> = (first?: Props | ChildDom, ...rest: readonly ChildDom[]) => Result

interface Tags extends Readonly<Record<string, TagFunc<Element>>> {
  // Register known element types
  // Source: https://developer.mozilla.org/en-US/docs/Web/HTML/Element

  // Main root
  readonly html: TagFunc<HTMLHtmlElement>

  // Document metadata
  readonly base: TagFunc<HTMLBaseElement>
  readonly head: TagFunc<HTMLHeadElement>
  readonly link: TagFunc<HTMLLinkElement>
  readonly meta: TagFunc<HTMLMetaElement>
  readonly style: TagFunc<HTMLStyleElement>
  readonly title: TagFunc<HTMLTitleElement>

  // Sectioning root
  readonly body: TagFunc<HTMLBodyElement>

  // Content sectioning
  readonly h1: TagFunc<HTMLHeadingElement>
  readonly h2: TagFunc<HTMLHeadingElement>
  readonly h3: TagFunc<HTMLHeadingElement>
  readonly h4: TagFunc<HTMLHeadingElement>
  readonly h5: TagFunc<HTMLHeadingElement>
  readonly h6: TagFunc<HTMLHeadingElement>

  // Text content
  readonly blockquote: TagFunc<HTMLQuoteElement>
  readonly div: TagFunc<HTMLDivElement>
  readonly dl: TagFunc<HTMLDListElement>

  ...
}

export interface Van {
  readonly state: <T>(initVal: T) => State<T>
  readonly val: <T>(s: T | StateView<T>) => T
  readonly oldVal: <T>(s: T | StateView<T>) => T
  readonly derive: <T>(f: () => T) => State<T>
  readonly add: (dom: Element, ...children: readonly ChildDom[]) => Element
  readonly _: (f: () => PropValue) => () => PropValue
  readonly tags: Tags
  readonly tagsNS: (namespaceURI: string) => Readonly<Record<string, TagFunc<Element>>>
  readonly hydrate: <T extends Node>(dom: T, f: (dom: T) => T | null | undefined) => T
}

declare const van: Van

export default van

...

let tagsNS = ns => new Proxy((name, ...args) => {
  let [props, ...children] = protoOf(args[0] ?? 0) === objProto ? args : [{}, ...args]
  let dom = ns ? doc.createElementNS(ns, name) : doc.createElement(name)
  for (let [k, v] of Obj.entries(props)) {
    let getPropDescriptor = proto => proto ?
      Obj.getOwnPropertyDescriptor(proto, k) ?? getPropDescriptor(protoOf(proto)) :
      _undefined
    let cacheKey = name + "," + k
    let propSetter = propSetterCache[cacheKey] ??
      (propSetterCache[cacheKey] = getPropDescriptor(protoOf(dom))?.set ?? 0)
    let setter = propSetter ? propSetter.bind(dom) : dom.setAttribute.bind(dom, k)
    let protoOfV = protoOf(v ?? 0)
    if (protoOfV === stateProto) bind(() => (setter(v.val), dom))
    else if (protoOfV === funcProto && (!k.startsWith("on") || v._isBindingFunc))
      bind(() => (setter(v()), dom))
    else setter(v)
  }
  return add(dom, ...children)
}, {get: (tag, name) => tag.bind(_undefined, name)})

...

export default {add, _, tags: tagsNS(), tagsNS, state, val, oldVal, derive, hydrate}

interface HTMLElementTagNameMap {
    "a": HTMLAnchorElement;
    "abbr": HTMLElement;
    "address": HTMLElement;
    "area": HTMLAreaElement;
    "article": HTMLElement;
    "aside": HTMLElement;
    "audio": HTMLAudioElement;
    "b": HTMLElement;
    "base": HTMLBaseElement;
    "bdi": HTMLElement;
    "bdo": HTMLElement;
    "blockquote": HTMLQuoteElement;
...

type Factory < T > =
{
	[ type in keyof T ] : boolean ;
};

const ef = {} as Factory < HTMLElementTagNameMap >;

type CreateElement < E > = ( ... args : any [] ) => void ;

type ElementFactory < E > =
{
	[ type in keyof E ] : CreateElement < E[ type ] > ;
};

const handler : ProxyHandler < ElementFactory < HTMLElementTagNameMap > > =
{
	get( factory, type )
	{
		console.log( type );
		return ( ... args : any []) => { console.log( type, args ); }
	}
}

const ef = new Proxy( {} as ElementFactory < HTMLElementTagNameMap >, handler );

const { div, h1, p, a } = ef;

div
(
	{ class: "app" },
	h1( "かんたん シングルページアプリ" ),
	p( "所沢の、その先　Reactivity..", a( { href: "./" }, "クリック" ) ),
)

type gE = globalThis.Element;

namespace Defs
{
	export type CreateElement < E > = ( first ? : Props < E > | Part, ... rest : Part [] ) => Element ;

	export type Element < E extends gE = gE > =
	{
		type : string ;			// "div" "p" などの「タグ名」
		props ? : Props < E > ;	// "id"  "href"  "value" などのプロパティー
		parts ? : Part [] ;		// "childNodes" と名づけるべきですが、好みで。
		[ isElement ] : true ;	// Props とのユニオンやその他の識別のため。
	};

	const isElement = Symbol();

	export type Props < E = {} > =
	{
		[ prop in keyof E ] ? : E [ prop ] ;
	};

	export type Part = Element | Value ;

	type Value = string ;

	//  //

	export const createElement = ( type : string, first ? : Props | Part, ... rest : Part [] ) : Element =>
	{
		if( typeof first == "object" && ! ( isElement in first ) )
		{
			return { type, props: first, parts: rest, [ isElement ]: true };
		}
		return { type, parts: first ? [ first, ...rest ] : undefined, [ isElement ]: true };
	}
}

{ type: "a", props: { href: "./" }, parts: [ "クリック！" ] }

type ElementFactory < Es > =
{
	[ type in keyof Es ] : Defs.CreateElement < Es[ type ] > ;
};

const handler : ProxyHandler < ElementFactory < HTMLElementTagNameMap > > =
{
	get( factory, type )
	{
		console.log( type );

		if( typeof type != "string" ) return;

		const fn = ( first : Defs.Props | Defs.Part, ... rest : Defs.Part [] ) =>
		{
			console.log( `* ${ type }` );
			return Defs.createElement( type, first, ... rest );
		};

		return fn;
	}
}

const ef = new Proxy( {} as ElementFactory < HTMLElementTagNameMap >, handler );

const { div, h1, p, a, input } = ef;

const def = div
(
	{ className: "app" },
	h1( "かんたん シングルページアプリ" ),
	p( "所沢の、小手指の、その先、Reactivity..", a( { href: "./", }, "クリック" ) ),
	input
	(
		{
			type: "range",
			max: "500",
			tabIndex: 4,
			oninput( ev )
			{
				ev instanceof HTMLInputElement && console.log( ev.value )
			}
		}
	)
);

console.log( JSON.stringify( def, null, "    " ) );

{
    "type": "div",
    "props": {
        "className": "app"
    },
    "parts": [
        {
            "type": "h1",
            "parts": [
                "かんたん シングルページアプリ"
            ]
        },
        {
            "type": "p",
            "parts": [
                "所沢の、小手指の、その先、Reactivity..",
                {
                    "type": "a",
                    "props": {
                        "href": "./"
                    },
                    "parts": [
                        "クリック"
                    ]
                }
            ]
        },
        {
            "type": "input",
            "props": {
                "type": "range",
                "max": "500",
                "tabIndex": 4
            },
            "parts": []
        }
    ]
}