❤
npm
Sign UpSign In

html-vdom
TypeScript icon, indicating that this package has built-in type declarations

2.7.0 • Public • Published

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 

    /** @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(<Foo who="world" />, document.body)
# simple
    # view source example/simple.tsx 

    /** @jsxImportSource html-vdom */
import { $, render } from 'html-vdom'

const App: $<{ who: string }> = ({ who }) => <h1>Hello, {who}!</h1>
render(<App who="world" />, document.body)
# with-hook
    # view source example/with-hook.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 <h1>{greeting}, {who}!</h1>
}

render(<App who="world" />, 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

Contributing

Fork or edit and submit a PR.

All contributions are welcome!

License

MIT © 2023 stagas

Readme

Keywords

Package Sidebar

Install

npm i html-vdom

Repository

github.com/stagas/html-vdom

Homepage

github.com/stagas/html-vdom#readme

Weekly Downloads

92

Version

2.7.0

License

MIT

Unpacked Size

535 kB

Total Files

28

Last publish

Collaborators

  • stagas
Try on RunKit
Report malware