Merge pull request #166 from yahia-berashish/main

Fix children and props type issue in VanJSX

Author: Tao-VanJS

addons/van_jsx/src/jsx-internal.d.ts

@@ -3,18 +3,17 @@ import { State, ChildDom } from "vanjs-core";
 import { FunctionChild } from "./type";
 
 type OriginalElement = HTMLElement;
+type JSXProp<T, K extends keyof T> = T[K] | (() => T[K]) | State<T[K]>;
 
 export declare namespace JSX {
-  type HTMLAttributes<T> = Partial<Omit<T, "style" | "children">> & {
-    style?: CSS.Properties;
-    ref?: State<T>;
-    children?: ChildDom;
-  };
-  type SVGAttributes<T> = Partial<Omit<T, "style" | "children">> & {
-    style?: CSS.Properties;
-    ref?: State<T>;
-    children?: ChildDom;
-  };
+  type HTMLAttributes<T> = {
+    [K in keyof Omit<T, "children" | "style">]?: JSXProp<T, K>;
+  } & Partial<{ children: ChildDom; style: CSS.Properties; ref: State<T> }>;
+
+  type SVGAttributes<T> = {
+    [K in keyof Omit<T, "children" | "style">]?: JSXProp<T, K>;
+  } & Partial<{ children: ChildDom; style: CSS.Properties; ref: State<T> }>;
+
   export type ElementType = string | FunctionChild<any>;
   export interface Element extends OriginalElement {}
   export interface ElementAttributesProperty {
@@ -24,181 +23,9 @@ export declare namespace JSX {
     children: {};
   }
   export interface IntrinsicAttributes {}
-  export interface IntrinsicElements {
-    a: HTMLAttributes<HTMLAnchorElement>;
-    abbr: HTMLAttributes<HTMLElement>;
-    address: HTMLAttributes<HTMLElement>;
-    area: HTMLAttributes<HTMLAreaElement>;
-    article: HTMLAttributes<HTMLElement>;
-    aside: HTMLAttributes<HTMLElement>;
-    audio: HTMLAttributes<HTMLAudioElement>;
-    b: HTMLAttributes<HTMLElement>;
-    base: HTMLAttributes<HTMLBaseElement>;
-    bdi: HTMLAttributes<HTMLElement>;
-    bdo: HTMLAttributes<HTMLElement>;
-    big: HTMLAttributes<HTMLElement>;
-    blockquote: HTMLAttributes<HTMLQuoteElement>;
-    body: HTMLAttributes<HTMLBodyElement>;
-    br: HTMLAttributes<HTMLBRElement>;
-    button: HTMLAttributes<HTMLButtonElement>;
-    canvas: HTMLAttributes<HTMLCanvasElement>;
-    caption: HTMLAttributes<HTMLTableCaptionElement>;
-    cite: HTMLAttributes<HTMLElement>;
-    code: HTMLAttributes<HTMLElement>;
-    col: HTMLAttributes<HTMLTableColElement>;
-    colgroup: HTMLAttributes<HTMLTableColElement>;
-    data: HTMLAttributes<HTMLDataElement>;
-    datalist: HTMLAttributes<HTMLDataListElement>;
-    dd: HTMLAttributes<HTMLElement>;
-    del: HTMLAttributes<HTMLModElement>;
-    details: HTMLAttributes<HTMLDetailsElement>;
-    dfn: HTMLAttributes<HTMLElement>;
-    dialog: HTMLAttributes<HTMLDialogElement>;
-    div: HTMLAttributes<HTMLDivElement>;
-    dl: HTMLAttributes<HTMLDListElement>;
-    dt: HTMLAttributes<HTMLElement>;
-    em: HTMLAttributes<HTMLElement>;
-    embed: HTMLAttributes<HTMLEmbedElement>;
-    fieldset: HTMLAttributes<HTMLFieldSetElement>;
-    figcaption: HTMLAttributes<HTMLElement>;
-    figure: HTMLAttributes<HTMLElement>;
-    footer: HTMLAttributes<HTMLElement>;
-    form: HTMLAttributes<HTMLFormElement>;
-    h1: HTMLAttributes<HTMLHeadingElement>;
-    h2: HTMLAttributes<HTMLHeadingElement>;
-    h3: HTMLAttributes<HTMLHeadingElement>;
-    h4: HTMLAttributes<HTMLHeadingElement>;
-    h5: HTMLAttributes<HTMLHeadingElement>;
-    h6: HTMLAttributes<HTMLHeadingElement>;
-    head: HTMLAttributes<HTMLHeadElement>;
-    header: HTMLAttributes<HTMLElement>;
-    hgroup: HTMLAttributes<HTMLElement>;
-    hr: HTMLAttributes<HTMLHRElement>;
-    html: HTMLAttributes<HTMLHtmlElement>;
-    i: HTMLAttributes<HTMLElement>;
-    iframe: HTMLAttributes<HTMLIFrameElement>;
-    img: HTMLAttributes<HTMLImageElement>;
-    input: HTMLAttributes<HTMLInputElement>;
-    ins: HTMLAttributes<HTMLModElement>;
-    kbd: HTMLAttributes<HTMLElement>;
-    keygen: HTMLAttributes<HTMLUnknownElement>;
-    label: HTMLAttributes<HTMLLabelElement>;
-    legend: HTMLAttributes<HTMLLegendElement>;
-    li: HTMLAttributes<HTMLLIElement>;
-    link: HTMLAttributes<HTMLLinkElement>;
-    main: HTMLAttributes<HTMLElement>;
-    map: HTMLAttributes<HTMLMapElement>;
-    mark: HTMLAttributes<HTMLElement>;
-    marquee: HTMLAttributes<HTMLMarqueeElement>;
-    menu: HTMLAttributes<HTMLMenuElement>;
-    menuitem: HTMLAttributes<HTMLUnknownElement>;
-    meta: HTMLAttributes<HTMLMetaElement>;
-    meter: HTMLAttributes<HTMLMeterElement>;
-    nav: HTMLAttributes<HTMLElement>;
-    noscript: HTMLAttributes<HTMLElement>;
-    object: HTMLAttributes<HTMLObjectElement>;
-    ol: HTMLAttributes<HTMLOListElement>;
-    optgroup: HTMLAttributes<HTMLOptGroupElement>;
-    option: HTMLAttributes<HTMLOptionElement>;
-    output: HTMLAttributes<HTMLOutputElement>;
-    p: HTMLAttributes<HTMLParagraphElement>;
-    param: HTMLAttributes<HTMLParamElement>;
-    picture: HTMLAttributes<HTMLPictureElement>;
-    pre: HTMLAttributes<HTMLPreElement>;
-    progress: HTMLAttributes<HTMLProgressElement>;
-    q: HTMLAttributes<HTMLQuoteElement>;
-    rp: HTMLAttributes<HTMLElement>;
-    rt: HTMLAttributes<HTMLElement>;
-    ruby: HTMLAttributes<HTMLElement>;
-    s: HTMLAttributes<HTMLElement>;
-    samp: HTMLAttributes<HTMLElement>;
-    script: HTMLAttributes<HTMLScriptElement>;
-    search: HTMLAttributes<HTMLElement>;
-    section: HTMLAttributes<HTMLElement>;
-    select: HTMLAttributes<HTMLSelectElement>;
-    slot: HTMLAttributes<HTMLSlotElement>;
-    small: HTMLAttributes<HTMLElement>;
-    source: HTMLAttributes<HTMLSourceElement>;
-    span: HTMLAttributes<HTMLSpanElement>;
-    strong: HTMLAttributes<HTMLElement>;
-    style: HTMLAttributes<HTMLStyleElement>;
-    sub: HTMLAttributes<HTMLElement>;
-    summary: HTMLAttributes<HTMLElement>;
-    sup: HTMLAttributes<HTMLElement>;
-    table: HTMLAttributes<HTMLTableElement>;
-    tbody: HTMLAttributes<HTMLTableSectionElement>;
-    td: HTMLAttributes<HTMLTableCellElement>;
-    textarea: HTMLAttributes<HTMLTextAreaElement>;
-    tfoot: HTMLAttributes<HTMLTableSectionElement>;
-    th: HTMLAttributes<HTMLTableCellElement>;
-    thead: HTMLAttributes<HTMLTableSectionElement>;
-    time: HTMLAttributes<HTMLTimeElement>;
-    title: HTMLAttributes<HTMLTitleElement>;
-    tr: HTMLAttributes<HTMLTableRowElement>;
-    track: HTMLAttributes<HTMLTrackElement>;
-    u: HTMLAttributes<HTMLElement>;
-    ul: HTMLAttributes<HTMLUListElement>;
-    var: HTMLAttributes<HTMLElement>;
-    video: HTMLAttributes<HTMLVideoElement>;
-    wbr: HTMLAttributes<HTMLElement>;
-    svg: SVGAttributes<SVGSVGElement>;
-    animate: SVGAttributes<SVGAnimateElement>;
-    circle: SVGAttributes<SVGCircleElement>;
-    animateMotion: SVGAttributes<SVGAnimateMotionElement>;
-    animateTransform: SVGAttributes<SVGAnimateTransformElement>;
-    clipPath: SVGAttributes<SVGClipPathElement>;
-    defs: SVGAttributes<SVGDefsElement>;
-    desc: SVGAttributes<SVGDescElement>;
-    ellipse: SVGAttributes<SVGEllipseElement>;
-    feBlend: SVGAttributes<SVGFEBlendElement>;
-    feColorMatrix: SVGAttributes<SVGFEColorMatrixElement>;
-    feComponentTransfer: SVGAttributes<SVGFEComponentTransferElement>;
-    feComposite: SVGAttributes<SVGFECompositeElement>;
-    feConvolveMatrix: SVGAttributes<SVGFEConvolveMatrixElement>;
-    feDiffuseLighting: SVGAttributes<SVGFEDiffuseLightingElement>;
-    feDisplacementMap: SVGAttributes<SVGFEDisplacementMapElement>;
-    feDistantLight: SVGAttributes<SVGFEDistantLightElement>;
-    feDropShadow: SVGAttributes<SVGFEDropShadowElement>;
-    feFlood: SVGAttributes<SVGFEFloodElement>;
-    feFuncA: SVGAttributes<SVGFEFuncAElement>;
-    feFuncB: SVGAttributes<SVGFEFuncBElement>;
-    feFuncG: SVGAttributes<SVGFEFuncGElement>;
-    feFuncR: SVGAttributes<SVGFEFuncRElement>;
-    feGaussianBlur: SVGAttributes<SVGFEGaussianBlurElement>;
-    feImage: SVGAttributes<SVGFEImageElement>;
-    feMerge: SVGAttributes<SVGFEMergeElement>;
-    feMergeNode: SVGAttributes<SVGFEMergeNodeElement>;
-    feMorphology: SVGAttributes<SVGFEMorphologyElement>;
-    feOffset: SVGAttributes<SVGFEOffsetElement>;
-    fePointLight: SVGAttributes<SVGFEPointLightElement>;
-    feSpecularLighting: SVGAttributes<SVGFESpecularLightingElement>;
-    feSpotLight: SVGAttributes<SVGFESpotLightElement>;
-    feTile: SVGAttributes<SVGFETileElement>;
-    feTurbulence: SVGAttributes<SVGFETurbulenceElement>;
-    filter: SVGAttributes<SVGFilterElement>;
-    foreignObject: SVGAttributes<SVGForeignObjectElement>;
-    g: SVGAttributes<SVGGElement>;
-    image: SVGAttributes<SVGImageElement>;
-    line: SVGAttributes<SVGLineElement>;
-    linearGradient: SVGAttributes<SVGLinearGradientElement>;
-    marker: SVGAttributes<SVGMarkerElement>;
-    mask: SVGAttributes<SVGMaskElement>;
-    metadata: SVGAttributes<SVGMetadataElement>;
-    mpath: SVGAttributes<SVGMPathElement>;
-    path: SVGAttributes<SVGPathElement>;
-    pattern: SVGAttributes<SVGPatternElement>;
-    polygon: SVGAttributes<SVGPolygonElement>;
-    polyline: SVGAttributes<SVGPolylineElement>;
-    radialGradient: SVGAttributes<SVGRadialGradientElement>;
-    rect: SVGAttributes<SVGRectElement>;
-    set: SVGAttributes<SVGSetElement>;
-    stop: SVGAttributes<SVGStopElement>;
-    switch: SVGAttributes<SVGSwitchElement>;
-    symbol: SVGAttributes<SVGSymbolElement>;
-    text: SVGAttributes<SVGTextElement>;
-    textPath: SVGAttributes<SVGTextPathElement>;
-    tspan: SVGAttributes<SVGTSpanElement>;
-    use: SVGAttributes<SVGUseElement>;
-    view: SVGAttributes<SVGViewElement>;
-  }
+  export type IntrinsicElements = {
+    [K in keyof HTMLElementTagNameMap]: HTMLElementTagNameMap[K] extends HTMLElement
+      ? HTMLAttributes<HTMLElementTagNameMap[K]>
+      : SVGAttributes<HTMLElementTagNameMap[K]>;
+  };
 }