Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/stagas/html-vdom

JSX virtual DOM using standard HTML.
https://github.com/stagas/html-vdom

html jsx vdom

Last synced: 5 days ago
JSON representation

JSX virtual DOM using standard HTML.

Awesome Lists containing this project

README 

        





html-vdom    







JSX virtual DOM using standard HTML







npm i html-vdom 



pnpm add html-vdom 



yarn add html-vdom



## Examples



#  from-element  
        #  view source  example/from-element.tsx  
    


    ```tsx

    /** @jsxImportSource html-vdom */

    import { render } from 'html-vdom'

    import { fromElement } from 'html-vdom/from-element'
    


    class FooElement extends HTMLElement {

      root = this.attachShadow({ mode: 'open' })

      set who(name: string) {

        this.root.innerHTML = 'Hello, ' + name

      }

    }
    


    const Foo = fromElement(FooElement)

    render(, document.body)

    ```
    


    

#  simple  
        #  view source  example/simple.tsx  
    


    ```tsx

    /** @jsxImportSource html-vdom */

    import { $, render } from 'html-vdom'
    


    const App: $<{ who: string }> = ({ who }) => 
    

    Hello, {who}!
    

    render(, document.body)

    ```
    


#  with-hook  
        #  view source  example/with-hook.tsx  
    


    ```tsx

    /** @jsxImportSource html-vdom */

    import { $, Hook, hook, render } from 'html-vdom'
    


    let greeting = 'Hello'

    let update: Hook
    


    const App: $<{ who: string }> = ({ who }) => {

      update = hook

      return 
    

    {greeting}, {who}!
    

    }
    


    render(, document.body)
    


    setTimeout(() => {

      greeting = 'Hiya'

      update()

    }, 500)

    ```
    





## API



  #  Chunk        
            
      #  constructor(arrayLength)        
          
        #  new Chunk()        
          
    #  dom   =   []      
      

      El  []
              
    #  firstChild        
      

      any
              
    #  last        
              
    #  nextSibling        
              
    #  after(x)        
          
          #  x        
        

        Node
                
        
      

      after(x)   =>  
      

        void
      

    

    #  appendChild(x)        
        
        #  x        
      

      any
              
      
    

    appendChild(x)   =>  
    

      void
        
#  remove()        
        
          
    

    remove()   =>  
    

      void
        
#  removeChild(x)        
        
        #  x        
      

      any
              
      
    

    removeChild(x)   =>  
    

      void
        
#  save()        
        
          
    

    save()   =>  
    

      void
        
#  DOMAttributes        
            
      #  class        
      

      string
              
    #  className        
      

      string
              
    #  exportparts        
      

      string
              
    #  hook        
      

      null | VRef<unknown>
              
    #  innerHTML        
      

      string
              
    #  onhook        
      #  (hook)        
            
            #  hook        
          

          any
                  
          
        

        (hook)   =>  
        

          void | #  ()        
                
                  
            

            ()   =>  
            

              void
            

          

        

        
            #  onref        
    

    #  (el)        
          
          #  el        
        

        any
                
        
      

      (el)   =>  
      

        void | #  ()        
              
                
          

          ()   =>  
          

            void
          

        

      

        
            #  onunhook        
    

    #  (hook)        
          
          #  hook        
        

        any
                
        
      

      (hook)   =>  
      

        void | #  ()        
              
                
          

          ()   =>  
          

            void
          

        

      

        
            #  onunref        
    

    #  (el)        
          
          #  el        
        

        any
                
        
      

      (el)   =>  
      

        void | #  ()        
              
                
          

          ()   =>  
          

            void
          

        

      

        
            #  part        
    

    string
            
#  style        
    

    null | string | false | void | Partial<CSSStyleDeclaration>
            
#  title        
    

    string
            
#  EventHandler        
        
        #  e        
      

      E & {
      

        #  currentTarget        
      #  target        
        

        Element
                
      }
            
  
EventHandler(e)   =>  
    void
    #  HTMLAttributes        
            
      #  accesskey        
      

      string
              
    #  aria-activedescendant        
      

      string
              
    #  aria-atomic        
      

      boolean | "false" | "true"
              
    #  aria-autocomplete        
      

      "none" | "list" | "inline" | "both"
              
    #  aria-busy        
      

      boolean | "false" | "true"
              
    #  aria-checked        
      

      boolean | "false" | "true" | "mixed"
              
    #  aria-colcount        
      

      number
              
    #  aria-colindex        
      

      number
              
    #  aria-colspan        
      

      number
              
    #  aria-controls        
      

      string
              
    #  aria-current        
      

      boolean | "false" | "time" | "true" | "page" | "step" | "location" | "date"
              
    #  aria-describedby        
      

      string
              
    #  aria-details        
      

      string
              
    #  aria-disabled        
      

      boolean | "false" | "true"
              
    #  aria-dropeffect        
      

      "link" | "none" | "copy" | "execute" | "move" | "popup"
              
    #  aria-errormessage        
      

      string
              
    #  aria-expanded        
      

      boolean | "false" | "true"
              
    #  aria-flowto        
      

      string
              
    #  aria-grabbed        
      

      boolean | "false" | "true"
              
    #  aria-haspopup        
      

      boolean | "false" | "dialog" | "menu" | "true" | "grid" | "listbox" | "tree"
              
    #  aria-hidden        
      

      boolean | "false" | "true"
              
    #  aria-invalid        
      

      boolean | "false" | "true" | "grammar" | "spelling"
              
    #  aria-keyshortcuts        
      

      string
              
    #  aria-label        
      

      string
              
    #  aria-labelledby        
      

      string
              
    #  aria-level        
      

      number
              
    #  aria-live        
      

      "off" | "assertive" | "polite"
              
    #  aria-modal        
      

      boolean | "false" | "true"
              
    #  aria-multiline        
      

      boolean | "false" | "true"
              
    #  aria-multiselectable        
      

      boolean | "false" | "true"
              
    #  aria-orientation        
      

      "horizontal" | "vertical"
              
    #  aria-owns        
      

      string
              
    #  aria-placeholder        
      

      string
              
    #  aria-posinset        
      

      number
              
    #  aria-pressed        
      

      boolean | "false" | "true" | "mixed"
              
    #  aria-readonly        
      

      boolean | "false" | "true"
              
    #  aria-relevant        
      

      "text" | "additions" | "additions removals" | "additions text" | "all" | "removals" | "removals additions" | "removals text" | "text additions" | "text removals"
              
    #  aria-required        
      

      boolean | "false" | "true"
              
    #  aria-roledescription        
      

      string
              
    #  aria-rowcount        
      

      number
              
    #  aria-rowindex        
      

      number
              
    #  aria-rowspan        
      

      number
              
    #  aria-selected        
      

      boolean | "false" | "true"
              
    #  aria-setsize        
      

      number
              
    #  aria-sort        
      

      "none" | "ascending" | "descending" | "other"
              
    #  aria-valuemax        
      

      number
              
    #  aria-valuemin        
      

      number
              
    #  aria-valuenow        
      

      number
              
    #  aria-valuetext        
      

      string
              
    #  autocapitalize        #  autofocus        
      

      boolean
              
    #  class        
      

      string
              
    #  className        
      

      string
              
    #  contenteditable        
      

      "false" | "true"
              
    #  contextmenu        
      

      string
              
    #  dir        #  draggable        
      

      "false" | "true"
              
    #  enterkeyhint        
      

      "search" | "done" | "enter" | "go" | "next" | "previous" | "send"
              
    #  exportparts        
      

      string
              
    #  hidden        
      

      boolean
              
    #  hook        
      

      null | VRef<unknown>
              
    #  id        
      

      string
              
    #  innerHTML        
      

      string
              
    #  inputmode        
      

      "search" | "text" | "none" | "tel" | "url" | "email" | "numeric" | "decimal"
              
    #  is        
      

      string
              
    #  itemid        
      

      string
              
    #  itemprop        
      

      string
              
    #  itemref        
      

      string | number | string | number  []
              
    #  itemscope        
      

      boolean
              
    #  itemtype        
      

      string
              
    #  lang        
      

      string
              
    #  nonce        
      

      string
              
    #  onabort        #  onanimationend        #  onanimationiteration        #  onanimationstart        #  onblur        #  oncanplay        #  oncanplaythrough        #  onchange        #  onclick        #  oncompositionend        #  oncompositionstart        #  oncompositionupdate        #  oncontextmenu        #  oncopy        #  oncut        #  ondblclick        #  ondrag        #  ondragend        #  ondragenter        #  ondragexit        #  ondragleave        #  ondragover        #  ondragstart        #  ondrop        #  ondurationchange        #  onemptied        #  onencrypted        #  onended        #  onerror        #  onfocus        #  ongotpointercapture        #  onhook        
      #  (hook)        
            
            #  hook        
          

          any
                  
          
        

        (hook)   =>  
        

          void | #  ()        
                
                  
            

            ()   =>  
            

              void
            

          

        

        
            #  oninput        #  onkeydown        #  onkeypress        #  onkeyup        #  onload        #  onloadeddata        #  onloadedmetadata        #  onloadstart        #  onlostpointercapture        #  onmousedown        #  onmouseenter        #  onmouseleave        #  onmousemove        #  onmouseout        #  onmouseover        #  onmouseup        #  onpaste        #  onpause        #  onplay        #  onplaying        #  onpointercancel        #  onpointerdown        #  onpointerenter        #  onpointerleave        #  onpointermove        #  onpointerout        #  onpointerover        #  onpointerup        #  onprogress        #  onratechange        #  onref        
    

    #  (el)        
          
          #  el        
        

        any
                
        
      

      (el)   =>  
      

        void | #  ()        
              
                
          

          ()   =>  
          

            void
          

        

      

        
            #  onreset        #  onscroll        #  onseeked        #  onseeking        #  onselect        #  onstalled        #  onsubmit        #  onsuspend        #  ontimeupdate        #  ontouchcancel        #  ontouchend        #  ontouchmove        #  ontouchstart        #  ontransitionend        #  onunhook        
    

    #  (hook)        
          
          #  hook        
        

        any
                
        
      

      (hook)   =>  
      

        void | #  ()        
              
                
          

          ()   =>  
          

            void
          

        

      

        
            #  onunref        
    

    #  (el)        
          
          #  el        
        

        any
                
        
      

      (el)   =>  
      

        void | #  ()        
              
                
          

          ()   =>  
          

            void
          

        

      

        
            #  onvolumechange        #  onwaiting        #  onwheel        #  part        
    

    string
            
#  role        #  slot        
    

    string
            
#  spellcheck        
    

    "false" | "true"
            
#  style        
    

    null | string | false | Partial<CSSStyleDeclaration> | StandardProperties<0 | string & {}, string & {}>
            
#  tabindex        
    

    string | number
            
#  title        
    

    string
            
#  translate        
    

    "false" | "true"
            
#  xml:base        
    

    string
            
#  xml:lang        
    

    string
            
#  HTMLElements        
            
      #  a        
      

      AHTMLAttributes<HTMLAnchorElement>
              
    #  abbr        #  acronym        #  address        #  applet        
      

      AppletHTMLAttributes<HTMLElement>
              
    #  area        
      

      AreaHTMLAttributes<HTMLAreaElement>
              
    #  article        #  aside        #  audio        
      

      AudioHTMLAttributes<HTMLAudioElement>
              
    #  b        #  base        
      

      BaseHTMLAttributes<HTMLBaseElement>
              
    #  basefont        
      

      BasefontHTMLAttributes<HTMLElement>
              
    #  bdi        #  bdo        
      

      BdoHTMLAttributes<HTMLElement>
              
    #  bgsound        
      

      BgsoundHTMLAttributes<HTMLElement>
              
    #  big        #  blink        #  blockquote        
      

      BlockquoteHTMLAttributes<HTMLElement>
              
    #  body        
      

      BodyHTMLAttributes<HTMLBodyElement>
              
    #  br        
      

      BrHTMLAttributes<HTMLBRElement>
              
    #  button        
      

      ButtonHTMLAttributes<HTMLButtonElement>
              
    #  canvas        
      

      CanvasHTMLAttributes<HTMLCanvasElement>
              
    #  caption        
      

      CaptionHTMLAttributes<HTMLElement>
              
    #  center        #  cite        #  code        #  col        
      

      ColHTMLAttributes<HTMLTableColElement>
              
    #  colgroup        
      

      ColgroupHTMLAttributes<HTMLTableColElement>
              
    #  content        
      

      ContentHTMLAttributes<HTMLElement>
              
    #  data        
      

      DataHTMLAttributes<HTMLDataElement>
              
    #  datalist        #  dd        
      

      DdHTMLAttributes<HTMLElement>
              
    #  del        
      

      DelHTMLAttributes<HTMLElement>
              
    #  details        
      

      DetailsHTMLAttributes<HTMLDetailsElement>
              
    #  dfn        #  dialog        
      

      DialogHTMLAttributes<HTMLDialogElement>
              
    #  dir        
      

      DirHTMLAttributes<HTMLElement>
              
    #  div        #  dl        #  dt        #  em        #  embed        
      

      EmbedHTMLAttributes<HTMLEmbedElement>
              
    #  fieldset        
      

      FieldsetHTMLAttributes<HTMLFieldSetElement>
              
    #  figcaption        #  figure        #  font        
      

      FontHTMLAttributes<HTMLFontElement>
              
    #  footer        #  form        
      

      FormHTMLAttributes<HTMLFormElement>
              
    #  frame        
      

      FrameHTMLAttributes<HTMLFrameElement>
              
    #  frameset        
      

      FramesetHTMLAttributes<HTMLFrameSetElement>
              
    #  h1        #  h2        #  h3        #  h4        #  h5        #  head        
      

      HeadHTMLAttributes<HTMLHeadElement>
              
    #  header        #  hgroup        #  hr        
      

      HrHTMLAttributes<HTMLHRElement>
              
    #  html        
      

      HtmlHTMLAttributes<HTMLHtmlElement>
              
    #  i        #  iframe        
      

      IframeHTMLAttributes<HTMLIFrameElement>
              
    #  img        
      

      ImgHTMLAttributes<HTMLImageElement>
              
    #  input        
      

      InputHTMLAttributes<HTMLInputElement>
              
    #  ins        
      

      InsHTMLAttributes<HTMLModElement>
              
    #  isindex        #  kbd        #  keygen        
      

      KeygenHTMLAttributes<HTMLElement>
              
    #  label        
      

      LabelHTMLAttributes<HTMLLabelElement>
              
    #  legend        #  li        
      

      LiHTMLAttributes<HTMLLIElement>
              
    #  link        
      

      LinkHTMLAttributes<HTMLLinkElement>
              
    #  listing        #  main        #  map        
      

      MapHTMLAttributes<HTMLMapElement>
              
    #  mark        #  marquee        
      

      MarqueeHTMLAttributes<HTMLMarqueeElement>
              
    #  menu        #  menuitem        
      

      MenuitemHTMLAttributes<HTMLElement>
              
    #  meta        
      

      MetaHTMLAttributes<HTMLMetaElement>
              
    #  meter        
      

      MeterHTMLAttributes<HTMLMeterElement>
              
    #  multicol        #  nav        #  nextid        #  nobr        #  noembed        #  noframes        #  noscript        #  object        
      

      ObjectHTMLAttributes<HTMLObjectElement>
              
    #  ol        
      

      OlHTMLAttributes<HTMLOListElement>
              
    #  optgroup        
      

      OptgroupHTMLAttributes<HTMLOptGroupElement>
              
    #  option        
      

      OptionHTMLAttributes<HTMLOptionElement>
              
    #  output        
      

      OutputHTMLAttributes<HTMLOutputElement>
              
    #  p        #  param        
      

      ParamHTMLAttributes<HTMLParamElement>
              
    #  picture        #  plaintext        #  portal        
      

      PortalHTMLAttributes<HTMLElement>
              
    #  pre        
      

      PreHTMLAttributes<HTMLPreElement>
              
    #  progress        
      

      ProgressHTMLAttributes<HTMLProgressElement>
              
    #  q        
      

      QHTMLAttributes<HTMLQuoteElement>
              
    #  rb        #  rp        #  rt        #  rtc        #  ruby        #  s        #  samp        #  script        
      

      ScriptHTMLAttributes<HTMLScriptElement>
              
    #  section        #  select        
      

      SelectHTMLAttributes<HTMLSelectElement>
              
    #  shadow        #  slot        
      

      SlotHTMLAttributes<HTMLSlotElement>
              
    #  small        #  source        
      

      SourceHTMLAttributes<HTMLSourceElement>
              
    #  spacer        
      

      SpacerHTMLAttributes<HTMLElement>
              
    #  span        #  strike        #  strong        #  style        
      

      StyleHTMLAttributes<HTMLStyleElement>
              
    #  sub        #  summary        #  sup        #  table        
      

      TableHTMLAttributes<HTMLTableElement>
              
    #  tbody        
      

      TbodyHTMLAttributes<HTMLTableSectionElement>
              
    #  td        
      

      TdHTMLAttributes<HTMLTableDataCellElement>
              
    #  template        #  textarea        
      

      TextareaHTMLAttributes<HTMLTextAreaElement>
              
    #  tfoot        
      

      TfootHTMLAttributes<HTMLTableSectionElement>
              
    #  th        
      

      ThHTMLAttributes<HTMLTableHeaderCellElement>
              
    #  thead        
      

      TheadHTMLAttributes<HTMLTableSectionElement>
              
    #  time        
      

      TimeHTMLAttributes<HTMLTimeElement>
              
    #  title        #  tr        
      

      TrHTMLAttributes<HTMLTableRowElement>
              
    #  track        
      

      TrackHTMLAttributes<HTMLTrackElement>
              
    #  tt        #  u        #  ul        
      

      UlHTMLAttributes<HTMLUListElement>
              
    #  var        #  video        
      

      VideoHTMLAttributes<HTMLVideoElement>
              
    #  wbr        #  xmp        
    

#  IntrinsicElements        
            
      #  a        
      

      AHTMLAttributes<HTMLAnchorElement>
              
    #  abbr        #  acronym        #  address        #  animate        
      

      AnimateSVGAttributes<SVGAnimateElement>
              
    #  animateMotion        
      

      AnimateMotionSVGAttributes<SVGAnimateMotionElement>
              
    #  animateTransform        
      

      AnimateTransformSVGAttributes<SVGAnimateTransformElement>
              
    #  applet        
      

      AppletHTMLAttributes<HTMLElement>
              
    #  area        
      

      AreaHTMLAttributes<HTMLAreaElement>
              
    #  article        #  aside        #  audio        
      

      AudioHTMLAttributes<HTMLAudioElement>
              
    #  b        #  base        
      

      BaseHTMLAttributes<HTMLBaseElement>
              
    #  basefont        
      

      BasefontHTMLAttributes<HTMLElement>
              
    #  bdi        #  bdo        
      

      BdoHTMLAttributes<HTMLElement>
              
    #  bgsound        
      

      BgsoundHTMLAttributes<HTMLElement>
              
    #  big        #  blink        #  blockquote        
      

      BlockquoteHTMLAttributes<HTMLElement>
              
    #  body        
      

      BodyHTMLAttributes<HTMLBodyElement>
              
    #  br        
      

      BrHTMLAttributes<HTMLBRElement>
              
    #  button        
      

      ButtonHTMLAttributes<HTMLButtonElement>
              
    #  canvas        
      

      CanvasHTMLAttributes<HTMLCanvasElement>
              
    #  caption        
      

      CaptionHTMLAttributes<HTMLElement>
              
    #  center        #  circle        
      

      CircleSVGAttributes<SVGCircleElement>
              
    #  cite        #  clipPath        
      

      ClipPathSVGAttributes<SVGClipPathElement>
              
    #  code        #  col        
      

      ColHTMLAttributes<HTMLTableColElement>
              
    #  colgroup        
      

      ColgroupHTMLAttributes<HTMLTableColElement>
              
    #  content        
      

      ContentHTMLAttributes<HTMLElement>
              
    #  data        
      

      DataHTMLAttributes<HTMLDataElement>
              
    #  datalist        #  dd        
      

      DdHTMLAttributes<HTMLElement>
              
    #  defs        
      

      DefsSVGAttributes<SVGDefsElement>
              
    #  del        
      

      DelHTMLAttributes<HTMLElement>
              
    #  desc        
      

      DescSVGAttributes<SVGDescElement>
              
    #  details        
      

      DetailsHTMLAttributes<HTMLDetailsElement>
              
    #  dfn        #  dialog        
      

      DialogHTMLAttributes<HTMLDialogElement>
              
    #  dir        
      

      DirHTMLAttributes<HTMLElement>
              
    #  div        #  dl        #  dt        #  ellipse        
      

      EllipseSVGAttributes<SVGEllipseElement>
              
    #  em        #  embed        
      

      EmbedHTMLAttributes<HTMLEmbedElement>
              
    #  feBlend        
      

      FeBlendSVGAttributes<SVGFEBlendElement>
              
    #  feColorMatrix        
      

      FeColorMatrixSVGAttributes<SVGFEColorMatrixElement>
              
    #  feComponentTransfer        
      

      FeComponentTransferSVGAttributes<SVGFEComponentTransferElement>
              
    #  feComposite        
      

      FeCompositeSVGAttributes<SVGFECompositeElement>
              
    #  feConvolveMatrix        
      

      FeConvolveMatrixSVGAttributes<SVGFEConvolveMatrixElement>
              
    #  feDiffuseLighting        
      

      FeDiffuseLightingSVGAttributes<SVGFEDiffuseLightingElement>
              
    #  feDisplacementMap        
      

      FeDisplacementMapSVGAttributes<SVGFEDisplacementMapElement>
              
    #  feDistantLight        
      

      FeDistantLightSVGAttributes<SVGFEDistantLightElement>
              
    #  feFlood        
      

      FeFloodSVGAttributes<SVGFEFloodElement>
              
    #  feFuncA        
      

      FeFuncSVGAttributes<SVGFEFuncAElement>
              
    #  feFuncB        
      

      FeFuncSVGAttributes<SVGFEFuncBElement>
              
    #  feFuncG        
      

      FeFuncSVGAttributes<SVGFEFuncGElement>
              
    #  feFuncR        
      

      FeFuncSVGAttributes<SVGFEFuncRElement>
              
    #  feGaussianBlur        
      

      FeGaussianBlurSVGAttributes<SVGFEGaussianBlurElement>
              
    #  feImage        
      

      FeImageSVGAttributes<SVGFEImageElement>
              
    #  feMerge        
      

      FeMergeSVGAttributes<SVGFEMergeElement>
              
    #  feMergeNode        
      

      FeMergeNodeSVGAttributes<SVGFEMergeNodeElement>
              
    #  feMorphology        
      

      FeMorphologySVGAttributes<SVGFEMorphologyElement>
              
    #  feOffset        
      

      FeOffsetSVGAttributes<SVGFEOffsetElement>
              
    #  fePointLight        
      

      FePointLightSVGAttributes<SVGFEPointLightElement>
              
    #  feSpecularLighting        
      

      FeSpecularLightingSVGAttributes<SVGFESpecularLightingElement>
              
    #  feSpotLight        
      

      FeSpotLightSVGAttributes<SVGFESpotLightElement>
              
    #  feTile        
      

      FeTileSVGAttributes<SVGFETileElement>
              
    #  feTurbulence        
      

      FeTurbulanceSVGAttributes<SVGFETurbulenceElement>
              
    #  fieldset        
      

      FieldsetHTMLAttributes<HTMLFieldSetElement>
              
    #  figcaption        #  figure        #  filter        
      

      FilterSVGAttributes<SVGFilterElement>
              
    #  font        
      

      FontHTMLAttributes<HTMLFontElement>
              
    #  footer        #  foreignObject        
      

      ForeignObjectSVGAttributes<SVGForeignObjectElement>
              
    #  form        
      

      FormHTMLAttributes<HTMLFormElement>
              
    #  frame        
      

      FrameHTMLAttributes<HTMLFrameElement>
              
    #  frameset        
      

      FramesetHTMLAttributes<HTMLFrameSetElement>
              
    #  g        
      

      GSVGAttributes<SVGGElement>
              
    #  h1        #  h2        #  h3        #  h4        #  h5        #  head        
      

      HeadHTMLAttributes<HTMLHeadElement>
              
    #  header        #  hgroup        #  hr        
      

      HrHTMLAttributes<HTMLHRElement>
              
    #  html        
      

      HtmlHTMLAttributes<HTMLHtmlElement>
              
    #  i        #  iframe        
      

      IframeHTMLAttributes<HTMLIFrameElement>
              
    #  image        
      

      ImageSVGAttributes<SVGImageElement>
              
    #  img        
      

      ImgHTMLAttributes<HTMLImageElement>
              
    #  input        
      

      InputHTMLAttributes<HTMLInputElement>
              
    #  ins        
      

      InsHTMLAttributes<HTMLModElement>
              
    #  isindex        #  kbd        #  keygen        
      

      KeygenHTMLAttributes<HTMLElement>
              
    #  label        
      

      LabelHTMLAttributes<HTMLLabelElement>
              
    #  legend        #  li        
      

      LiHTMLAttributes<HTMLLIElement>
              
    #  line        
      

      LineSVGAttributes<SVGLineElement>
              
    #  linearGradient        
      

      LinearGradientSVGAttributes<SVGLinearGradientElement>
              
    #  link        
      

      LinkHTMLAttributes<HTMLLinkElement>
              
    #  listing        #  main        #  map        
      

      MapHTMLAttributes<HTMLMapElement>
              
    #  mark        #  marker        
      

      MarkerSVGAttributes<SVGMarkerElement>
              
    #  marquee        
      

      MarqueeHTMLAttributes<HTMLMarqueeElement>
              
    #  mask        
      

      MaskSVGAttributes<SVGMaskElement>
              
    #  menu        #  menuitem        
      

      MenuitemHTMLAttributes<HTMLElement>
              
    #  meta        
      

      MetaHTMLAttributes<HTMLMetaElement>
              
    #  metadata        
      

      MetadataSVGAttributes<SVGMetadataElement>
              
    #  meter        
      

      MeterHTMLAttributes<HTMLMeterElement>
              
    #  multicol        #  nav        #  nextid        #  nobr        #  noembed        #  noframes        #  noscript        #  object        
      

      ObjectHTMLAttributes<HTMLObjectElement>
              
    #  ol        
      

      OlHTMLAttributes<HTMLOListElement>
              
    #  optgroup        
      

      OptgroupHTMLAttributes<HTMLOptGroupElement>
              
    #  option        
      

      OptionHTMLAttributes<HTMLOptionElement>
              
    #  output        
      

      OutputHTMLAttributes<HTMLOutputElement>
              
    #  p        #  param        
      

      ParamHTMLAttributes<HTMLParamElement>
              
    #  path        
      

      PathSVGAttributes<SVGPathElement>
              
    #  pattern        
      

      PatternSVGAttributes<SVGPatternElement>
              
    #  picture        #  plaintext        #  polygon        
      

      PolygonSVGAttributes<SVGPolygonElement>
              
    #  polyline        
      

      PolylineSVGAttributes<SVGPolylineElement>
              
    #  portal        
      

      PortalHTMLAttributes<HTMLElement>
              
    #  pre        
      

      PreHTMLAttributes<HTMLPreElement>
              
    #  progress        
      

      ProgressHTMLAttributes<HTMLProgressElement>
              
    #  q        
      

      QHTMLAttributes<HTMLQuoteElement>
              
    #  radialGradient        
      

      RadialGradientSVGAttributes<SVGRadialGradientElement>
              
    #  rb        #  rect        
      

      RectSVGAttributes<SVGRectElement>
              
    #  rp        #  rt        #  rtc        #  ruby        #  s        #  samp        #  script        
      

      ScriptHTMLAttributes<HTMLScriptElement>
              
    #  section        #  select        
      

      SelectHTMLAttributes<HTMLSelectElement>
              
    #  shadow        #  slot        
      

      SlotHTMLAttributes<HTMLSlotElement>
              
    #  small        #  source        
      

      SourceHTMLAttributes<HTMLSourceElement>
              
    #  spacer        
      

      SpacerHTMLAttributes<HTMLElement>
              
    #  span        #  stop        
      

      StopSVGAttributes<SVGStopElement>
              
    #  strike        #  strong        #  style        
      

      StyleHTMLAttributes<HTMLStyleElement>
              
    #  sub        #  summary        #  sup        #  svg        
      

      SvgSVGAttributes<SVGSVGElement>
              
    #  switch        
      

      SwitchSVGAttributes<SVGSwitchElement>
              
    #  symbol        
      

      SymbolSVGAttributes<SVGSymbolElement>
              
    #  table        
      

      TableHTMLAttributes<HTMLTableElement>
              
    #  tbody        
      

      TbodyHTMLAttributes<HTMLTableSectionElement>
              
    #  td        
      

      TdHTMLAttributes<HTMLTableDataCellElement>
              
    #  template        #  text        
      

      TextSVGAttributes<SVGTextElement>
              
    #  textPath        
      

      TextPathSVGAttributes<SVGTextPathElement>
              
    #  textarea        
      

      TextareaHTMLAttributes<HTMLTextAreaElement>
              
    #  tfoot        
      

      TfootHTMLAttributes<HTMLTableSectionElement>
              
    #  th        
      

      ThHTMLAttributes<HTMLTableHeaderCellElement>
              
    #  thead        
      

      TheadHTMLAttributes<HTMLTableSectionElement>
              
    #  time        
      

      TimeHTMLAttributes<HTMLTimeElement>
              
    #  title        #  tr        
      

      TrHTMLAttributes<HTMLTableRowElement>
              
    #  track        
      

      TrackHTMLAttributes<HTMLTrackElement>
              
    #  tspan        
      

      TSpanSVGAttributes<SVGTSpanElement>
              
    #  tt        #  u        #  ul        
      

      UlHTMLAttributes<HTMLUListElement>
              
    #  use        
      

      UseSVGAttributes<SVGUseElement>
              
    #  var        #  video        
      

      VideoHTMLAttributes<HTMLVideoElement>
              
    #  view        
      

      ViewSVGAttributes<SVGViewElement>
              
    #  wbr        #  xmp        
    

#  SVGAttributes                    #  oninput        #  onkeydown        #  onkeypress        #  onkeyup        #  onload        #  onloadeddata        #  onloadedmetadata        #  onloadstart        #  onlostpointercapture        #  onmousedown        #  onmouseenter        #  onmouseleave        #  onmousemove        #  onmouseout        #  onmouseover        #  onmouseup        #  onpaste        #  onpause        #  onplay        #  onplaying        #  onpointercancel        #  onpointerdown        #  onpointerenter        #  onpointerleave        #  onpointermove        #  onpointerout        #  onpointerover        #  onpointerup        #  onprogress        #  onratechange        #  onref        
    

    #  (el)        
          
          #  el        
        

        any
                
        
      

      (el)   =>  
      

        void | #  ()        
              
                
          

          ()   =>  
          

            void
          

        

      

        
            #  onreset        #  onscroll        #  onseeked        #  onseeking        #  onselect        #  onstalled        #  onsubmit        #  onsuspend        #  ontimeupdate        #  ontouchcancel        #  ontouchend        #  ontouchmove        #  ontouchstart        #  ontransitionend        #  onunhook        
    

    #  (hook)        
          
          #  hook        
        

        any
                
        
      

      (hook)   =>  
      

        void | #  ()        
              
                
          

          ()   =>  
          

            void
          

        

      

        
            #  onunref        
    

    #  (el)        
          
          #  el        
        

        any
                
        
      

      (el)   =>  
      

        void | #  ()        
              
                
          

          ()   =>  
          

            void
          

        

      

        
            #  onvolumechange        #  onwaiting        #  onwheel        #  part        
    

    string
            
#  style        
    

    null | string | false | void | Partial<CSSStyleDeclaration>
            
#  tabindex        
    

    string | number
            
#  title        
    

    string
            
#  SVGElements        
            
      #  animate        
      

      AnimateSVGAttributes<SVGAnimateElement>
              
    #  animateMotion        
      

      AnimateMotionSVGAttributes<SVGAnimateMotionElement>
              
    #  animateTransform        
      

      AnimateTransformSVGAttributes<SVGAnimateTransformElement>
              
    #  circle        
      

      CircleSVGAttributes<SVGCircleElement>
              
    #  clipPath        
      

      ClipPathSVGAttributes<SVGClipPathElement>
              
    #  defs        
      

      DefsSVGAttributes<SVGDefsElement>
              
    #  desc        
      

      DescSVGAttributes<SVGDescElement>
              
    #  ellipse        
      

      EllipseSVGAttributes<SVGEllipseElement>
              
    #  feBlend        
      

      FeBlendSVGAttributes<SVGFEBlendElement>
              
    #  feColorMatrix        
      

      FeColorMatrixSVGAttributes<SVGFEColorMatrixElement>
              
    #  feComponentTransfer        
      

      FeComponentTransferSVGAttributes<SVGFEComponentTransferElement>
              
    #  feComposite        
      

      FeCompositeSVGAttributes<SVGFECompositeElement>
              
    #  feConvolveMatrix        
      

      FeConvolveMatrixSVGAttributes<SVGFEConvolveMatrixElement>
              
    #  feDiffuseLighting        
      

      FeDiffuseLightingSVGAttributes<SVGFEDiffuseLightingElement>
              
    #  feDisplacementMap        
      

      FeDisplacementMapSVGAttributes<SVGFEDisplacementMapElement>
              
    #  feDistantLight        
      

      FeDistantLightSVGAttributes<SVGFEDistantLightElement>
              
    #  feFlood        
      

      FeFloodSVGAttributes<SVGFEFloodElement>
              
    #  feFuncA        
      

      FeFuncSVGAttributes<SVGFEFuncAElement>
              
    #  feFuncB        
      

      FeFuncSVGAttributes<SVGFEFuncBElement>
              
    #  feFuncG        
      

      FeFuncSVGAttributes<SVGFEFuncGElement>
              
    #  feFuncR        
      

      FeFuncSVGAttributes<SVGFEFuncRElement>
              
    #  feGaussianBlur        
      

      FeGaussianBlurSVGAttributes<SVGFEGaussianBlurElement>
              
    #  feImage        
      

      FeImageSVGAttributes<SVGFEImageElement>
              
    #  feMerge        
      

      FeMergeSVGAttributes<SVGFEMergeElement>
              
    #  feMergeNode        
      

      FeMergeNodeSVGAttributes<SVGFEMergeNodeElement>
              
    #  feMorphology        
      

      FeMorphologySVGAttributes<SVGFEMorphologyElement>
              
    #  feOffset        
      

      FeOffsetSVGAttributes<SVGFEOffsetElement>
              
    #  fePointLight        
      

      FePointLightSVGAttributes<SVGFEPointLightElement>
              
    #  feSpecularLighting        
      

      FeSpecularLightingSVGAttributes<SVGFESpecularLightingElement>
              
    #  feSpotLight        
      

      FeSpotLightSVGAttributes<SVGFESpotLightElement>
              
    #  feTile        
      

      FeTileSVGAttributes<SVGFETileElement>
              
    #  feTurbulence        
      

      FeTurbulanceSVGAttributes<SVGFETurbulenceElement>
              
    #  filter        
      

      FilterSVGAttributes<SVGFilterElement>
              
    #  foreignObject        
      

      ForeignObjectSVGAttributes<SVGForeignObjectElement>
              
    #  g        
      

      GSVGAttributes<SVGGElement>
              
    #  image        
      

      ImageSVGAttributes<SVGImageElement>
              
    #  line        
      

      LineSVGAttributes<SVGLineElement>
              
    #  linearGradient        
      

      LinearGradientSVGAttributes<SVGLinearGradientElement>
              
    #  marker        
      

      MarkerSVGAttributes<SVGMarkerElement>
              
    #  mask        
      

      MaskSVGAttributes<SVGMaskElement>
              
    #  metadata        
      

      MetadataSVGAttributes<SVGMetadataElement>
              
    #  path        
      

      PathSVGAttributes<SVGPathElement>
              
    #  pattern        
      

      PatternSVGAttributes<SVGPatternElement>
              
    #  polygon        
      

      PolygonSVGAttributes<SVGPolygonElement>
              
    #  polyline        
      

      PolylineSVGAttributes<SVGPolylineElement>
              
    #  radialGradient        
      

      RadialGradientSVGAttributes<SVGRadialGradientElement>
              
    #  rect        
      

      RectSVGAttributes<SVGRectElement>
              
    #  stop        
      

      StopSVGAttributes<SVGStopElement>
              
    #  svg        
      

      SvgSVGAttributes<SVGSVGElement>
              
    #  switch        
      

      SwitchSVGAttributes<SVGSwitchElement>
              
    #  symbol        
      

      SymbolSVGAttributes<SVGSymbolElement>
              
    #  text        
      

      TextSVGAttributes<SVGTextElement>
              
    #  textPath        
      

      TextPathSVGAttributes<SVGTextPathElement>
              
    #  tspan        
      

      TSpanSVGAttributes<SVGTSpanElement>
              
    #  use        
      

      UseSVGAttributes<SVGUseElement>
              
    #  view        
      

      ViewSVGAttributes<SVGViewElement>
              
    

#  VRef        
            
      #  current        
      

      null | void | T
              
    

#  $        
    

    #  (props)        
          
          #  props        
        

        T & {
        

          #  children        
          

          any
                  
        }
              
      
    

    (props)   =>  
    

      JSX.Element
        
        #  Doc        
    

    #  (tag, opts)        
          
          #  tag        
        

        string
                
      #  opts        
        

        ElementCreationOptions
                
        
      

      (tag, opts)   =>  
      

        Element
      

        
        #  HTMLAutocapitalize        
    

    "off" | "none" | "on" | "sentences" | "words" | "characters"
            
#  HTMLAutocomplete        
    

    "additional-name" | "address-level1" | "address-level2" | "address-level3" | "address-level4" | "address-line1" | "address-line2" | "address-line3" | "bday" | "bday-year" | "bday-day" | "bday-month" | "billing" | "cc-additional-name" | "cc-csc" | "cc-exp" | "cc-exp-month" | "cc-exp-year" | "cc-family-name" | "cc-given-name" | "cc-name" | "cc-number" | "cc-type" | "country" | "country-name" | "current-password" | "email" | "family-name" | "fax" | "given-name" | "home" | "honorific-prefix" | "honorific-suffix" | "impp" | "language" | "mobile" | "name" | "new-password" | "nickname" | "organization" | "organization-title" | "pager" | "photo" | "postal-code" | "sex" | "shipping" | "street-address" | "tel-area-code" | "tel" | "tel-country-code" | "tel-extension" | "tel-local" | "tel-local-prefix" | "tel-local-suffix" | "tel-national" | "transaction-amount" | "transaction-currency" | "url" | "username" | "work"
            
#  HTMLCrossorigin        
    

    "anonymous" | "use-credentials" | ""
            
#  HTMLDir        
    

    "ltr" | "rtl" | "auto"
            
#  HTMLFormEncType        
    

    "application/x-www-form-urlencoded" | "multipart/form-data" | "text/plain"
            
#  HTMLFormMethod        
    

    "post" | "get" | "dialog"
            
#  HTMLIframeSandbox        
    

    "allow-downloads-without-user-activation" | "allow-forms" | "allow-modals" | "allow-orientation-lock" | "allow-pointer-lock" | "allow-popups" | "allow-popups-to-escape-sandbox" | "allow-presentation" | "allow-same-origin" | "allow-scripts" | "allow-storage-access-by-user-activation" | "allow-top-navigation" | "allow-top-navigation-by-user-activation"
            
#  HTMLLinkAs        
    

    "audio" | "document" | "embed" | "fetch" | "font" | "image" | "object" | "script" | "style" | "track" | "video" | "worker"
            
#  HTMLReferrerPolicy        
    

    "no-referrer" | "no-referrer-when-downgrade" | "origin" | "origin-when-cross-origin" | "same-origin" | "strict-origin" | "strict-origin-when-cross-origin" | "unsafe-url"
            
#  HTMLRole        
    

    "alert" | "alertdialog" | "application" | "article" | "banner" | "blockquote" | "button" | "caption" | "cell" | "checkbox" | "code" | "columnheader" | "combobox" | "command" | "complementary" | "composite" | "contentinfo" | "definition" | "deletion" | "dialog" | "directory" | "document" | "emphasis" | "feed" | "figure" | "form" | "generic" | "grid" | "gridcell" | "group" | "heading" | "img" | "input" | "insertion" | "landmark" | "link" | "list" | "listbox" | "listitem" | "log" | "main" | "marquee" | "math" | "menu" | "menubar" | "menuitem" | "menuitemcheckbox" | "menuitemradio" | "meter" | "navigation" | "none" | "note" | "option" | "paragraph" | "presentation" | "progressbar" | "radio" | "radiogroup" | "range" | "region" | "roletype" | "row" | "rowgroup" | "rowheader" | "scrollbar" | "search" | "searchbox" | "section" | "sectionhead" | "select" | "separator" | "slider" | "spinbutton" | "status" | "strong" | "structure" | "subscript" | "superscript" | "switch" | "tab" | "table" | "tablist" | "tabpanel" | "term" | "textbox" | "time" | "timer" | "toolbar" | "tooltip" | "tree" | "treegrid" | "treeitem" | "widget" | "window"
            
#  Hook        
    

    Fn & {
    

      #  fn        
      

      Fn
              
    #  onend        
      

      Fn
              
    #  onremove        
      

      Fn
              
    #  onstart        
      

      Fn
              
    } & EventEmitter<{
      #  end        
      #  ()        
            
              
        

        ()   =>  
        

          void
        

        
        #  remove        
    

    #  ()        
          
            
      

      ()   =>  
      

        void
      

        
        #  start        
    

    #  ()        
          
            
      

      ()   =>  
      

        void
      

        
        }> & T        #  Props        
    

    Record<string, any>
            
#  VFn        
    

    #  (props)        
          
          #  props        
        

        any
                
        
      

      (props)   =>  
      

      

        
        #  VKid        
    

    VKids | VNode<any> | string | number | boolean | null | undefined | void
            
#  VNode        
    

    {
    

      #  hook        
    #  keep        
      

      boolean
              
    #  key        
      

      string
              
    #  kind        #  onunhook        
      #  ()        
            
              
        

        ()   =>  
        

          void
        

        
        #  onunref        
    

    #  ()        
          
            
      

      ()   =>  
      

        void
      

        
        #  props        }        #  Fragment   =   ...      #  renderCache   =   ...      
    

    WeakMap<object, any>
            
#  createHook()        
        
          
    

    createHook()   =>  
    

        
#  createProps(doc, el, type, props, attrs, cacheRef)        
        
        #  doc        
    #  el        
      

      Element
              
    #  type        
      

      string
              
    #  props   =   {}      #  attrs   =   {}      
      

      Record<string, Attr>
              
    #  cacheRef   =   el      
      

      object
              
      
    

    createProps(doc, el, type, props, attrs, cacheRef)   =>  
    

      void
        
#  hook(args)        
        
        #  args        
      

      any
              
      
    

    hook(args)   =>  
    

      any
        
#  html(tagName, options)        
        
        #  tagName        
    #  options        
      

      ElementCreationOptions
              
      
    

    html<K>(tagName, options)   =>  
    

      

      HTMLElementTagNameMap  [K]
      #  tagName        

    #  options        
      

      ElementCreationOptions
              
      
    html<K>(tagName, options)   =>  
    

      

      HTMLElementDeprecatedTagNameMap  [K]
      #  tagName        
      

      string
              
    

    #  options        
      

      ElementCreationOptions
              
      
    html(tagName, options)   =>  
    

      HTMLElement
        
#  jsx(kind, props, key)        
        
        #  kind        
      

      any
              
    #  props        
      

      any
              
    #  key        
      

      any
              
      
    

    jsx(kind, props, key)   =>  
    

        
#  jsxs(kind, props, key)        
        
        #  kind        
      

      any
              
    #  props        
      

      any
              
    #  key        
      

      any
              
      
    

    jsxs(kind, props, key)   =>  
    

        
#  render(n)        
        
        #  n        
      
    

    render(n)   =>  
    

      DocumentFragment
      #  n        

    #  el        

    #  doc        

    #  withNull        
      

      boolean
              
      
    render<T extends      TargetEl>(n, el, doc, withNull)   =>  
    

        
#  svg(args)        
        
        #  args        
      

      [  named-tuple-member, named-tuple-member  ]
              
      
    

    svg(args)   =>  
    

      Element
        
#  updateProps(doc, el, type, next, cacheRef)        
        
        #  doc        
    #  el        
      

      Element
              
    #  type        
      

      string
              
    #  next   =   {}      #  cacheRef   =   el      
      

      object
              
      
    

    updateProps(doc, el, type, next, cacheRef)   =>  
    

      void
        



## Credits

- [event-toolkit](https://npmjs.org/package/event-toolkit) by [stagas](https://github.com/stagas) – Toolkit for DOM events.

- [everyday-types](https://npmjs.org/package/everyday-types) by [stagas](https://github.com/stagas) – Everyday utility types

- [everyday-utils](https://npmjs.org/package/everyday-utils) by [stagas](https://github.com/stagas) – Everyday utilities

- [html-jsx](https://npmjs.org/package/html-jsx) by [stagas](https://github.com/stagas) – Extensible jsx type definitions for standard html interfaces.



## Contributing



[Fork](https://github.com/stagas/html-vdom/fork) or [edit](https://github.dev/stagas/html-vdom) and submit a PR.



All contributions are welcome!



## License



MIT © 2023 [stagas](https://github.com/stagas)