Refactor JSX types to include a reference to instance type

[Arlen22]

This generates a second jsx.*.d.ts which does two things.

• Export the types instead of putting them on global
• Include the class instance type in the interface type parameter

import { JQ } from '@mdui/jq';
import * as mdui from "./mdui.js";

export interface IntrinsicAttributes<T> { }

export interface IntrinsicElements {
  "mdui-avatar": {
    "value": string;
  } & IntrinsicAttributes<mdui.Avatar>
}

This allows the type declarations to be used with any custom JSX typing system or any other attribute based types.

import type * as MDUI from "mdui/jsx2.en.d.ts";
declare global {
  export interface CustomElements extends MDUI.IntrinsicElements { }
}
declare module "mdui/jsx2.en.d.ts" {
  // extend IntrinsicAttributes with my own HTMLAttributes typing
  export interface IntrinsicAttributes<T extends Element> extends JSX.SimpleAttrs<{}, T> { }
}

const test = <mdui-avatar ref={e => e}></mdui-avatar>

It might be surprising that this works, but since multiple interface declarations are combined, TypeScript doesn't care where they're declared and just combines them all, allowing the consumer of a library to fill in the missing definitions. All declarations of an interface must have identical type parameters, allowing them to transfer type information.

If the instance type was the only thing I needed, I could match this to HTMLElementTagNameMap. But I wanted to use my own list of standard attributes rather than the ones from React, because they aren't quite the same and I'm not using React. I'm also using attributes specifically, not properties.