@phosphor/virtualdom

  • Version 1.2.0
  • Published
  • 45.5 kB
  • 1 dependency
  • BSD-3-Clause license

Install

npm i @phosphor/virtualdom
yarn add @phosphor/virtualdom
pnpm add @phosphor/virtualdom

Overview

PhosphorJS - Virtual DOM

Index

Functions

function h

h: typeof h;
  • Create a new virtual element node.

    Parameter tag

    The tag name for the element.

    Parameter attrs

    The attributes for the element, if any.

    Parameter children

    The children for the element, if any.

    Returns

    A new virtual element node for the given parameters.

    #### Notes The children may be string literals, other virtual nodes, null, or an array of those things. Strings are converted into text nodes, and arrays are inlined as if the array contents were given as positional arguments. This makes it simple to build up an array of children by any desired means. null child values are simply ignored.

    A bound function for each HTML tag name is available as a static function attached to the h() function. E.g. h('div', ...) is equivalent to h.div(...).

Classes

class VirtualElement

class VirtualElement {}
  • A virtual node which represents an HTML element.

    #### Notes User code will not typically create a VirtualElement node directly. Instead, the h() function will be used to create an element tree.

constructor

constructor(tag: string, attrs: ElementAttrs, children: readonly VirtualNode[]);
  • Construct a new virtual element node.

    Parameter tag

    The element tag name.

    Parameter attrs

    The element attributes.

    Parameter children

    The element children.

property attrs

readonly attrs: ElementAttrs;
  • The attributes for the element.

property children

readonly children: readonly VirtualNode[];
  • The children for the element.

property tag

readonly tag: string;
  • The tag name for the element.

property type

readonly type: string;
  • The type of the node.

    This value can be used as a type guard for discriminating the VirtualNode union type.

class VirtualText

class VirtualText {}
  • A virtual node which represents plain text content.

    #### Notes User code will not typically create a VirtualText node directly. Instead, the h() function will be used to create an element tree.

constructor

constructor(content: string);
  • Construct a new virtual text node.

    Parameter content

    The text content for the node.

property content

readonly content: string;
  • The text content for the node.

property type

readonly type: string;
  • The type of the node.

    This value can be used as a type guard for discriminating the VirtualNode union type.

Type Aliases

type CSSPropertyNames

type CSSPropertyNames =
| 'alignContent'
| 'alignItems'
| 'alignSelf'
| 'alignmentBaseline'
| 'animation'
| 'animationDelay'
| 'animationDirection'
| 'animationDuration'
| 'animationFillMode'
| 'animationIterationCount'
| 'animationName'
| 'animationPlayState'
| 'animationTimingFunction'
| 'backfaceVisibility'
| 'background'
| 'backgroundAttachment'
| 'backgroundClip'
| 'backgroundColor'
| 'backgroundImage'
| 'backgroundOrigin'
| 'backgroundPosition'
| 'backgroundPositionX'
| 'backgroundPositionY'
| 'backgroundRepeat'
| 'backgroundSize'
| 'baselineShift'
| 'border'
| 'borderBottom'
| 'borderBottomColor'
| 'borderBottomLeftRadius'
| 'borderBottomRightRadius'
| 'borderBottomStyle'
| 'borderBottomWidth'
| 'borderCollapse'
| 'borderColor'
| 'borderImage'
| 'borderImageOutset'
| 'borderImageRepeat'
| 'borderImageSlice'
| 'borderImageSource'
| 'borderImageWidth'
| 'borderLeft'
| 'borderLeftColor'
| 'borderLeftStyle'
| 'borderLeftWidth'
| 'borderRadius'
| 'borderRight'
| 'borderRightColor'
| 'borderRightStyle'
| 'borderRightWidth'
| 'borderSpacing'
| 'borderStyle'
| 'borderTop'
| 'borderTopColor'
| 'borderTopLeftRadius'
| 'borderTopRightRadius'
| 'borderTopStyle'
| 'borderTopWidth'
| 'borderWidth'
| 'bottom'
| 'boxShadow'
| 'boxSizing'
| 'breakAfter'
| 'breakBefore'
| 'breakInside'
| 'captionSide'
| 'clear'
| 'clip'
| 'clipPath'
| 'clipRule'
| 'color'
| 'colorInterpolationFilters'
| 'columnCount'
| 'columnFill'
| 'columnGap'
| 'columnRule'
| 'columnRuleColor'
| 'columnRuleStyle'
| 'columnRuleWidth'
| 'columnSpan'
| 'columnWidth'
| 'columns'
| 'content'
| 'counterIncrement'
| 'counterReset'
| 'cssFloat'
| 'cssText'
| 'cursor'
| 'direction'
| 'display'
| 'dominantBaseline'
| 'emptyCells'
| 'enableBackground'
| 'fill'
| 'fillOpacity'
| 'fillRule'
| 'filter'
| 'flex'
| 'flexBasis'
| 'flexDirection'
| 'flexFlow'
| 'flexGrow'
| 'flexShrink'
| 'flexWrap'
| 'floodColor'
| 'floodOpacity'
| 'font'
| 'fontFamily'
| 'fontFeatureSettings'
| 'fontSize'
| 'fontSizeAdjust'
| 'fontStretch'
| 'fontStyle'
| 'fontVariant'
| 'fontWeight'
| 'glyphOrientationHorizontal'
| 'glyphOrientationVertical'
| 'height'
| 'imeMode'
| 'justifyContent'
| 'kerning'
| 'left'
| 'letterSpacing'
| 'lightingColor'
| 'lineHeight'
| 'listStyle'
| 'listStyleImage'
| 'listStylePosition'
| 'listStyleType'
| 'margin'
| 'marginBottom'
| 'marginLeft'
| 'marginRight'
| 'marginTop'
| 'marker'
| 'markerEnd'
| 'markerMid'
| 'markerStart'
| 'mask'
| 'maxHeight'
| 'maxWidth'
| 'minHeight'
| 'minWidth'
| 'msContentZoomChaining'
| 'msContentZoomLimit'
| 'msContentZoomLimitMax'
| 'msContentZoomLimitMin'
| 'msContentZoomSnap'
| 'msContentZoomSnapPoints'
| 'msContentZoomSnapType'
| 'msContentZooming'
| 'msFlowFrom'
| 'msFlowInto'
| 'msFontFeatureSettings'
| 'msGridColumn'
| 'msGridColumnAlign'
| 'msGridColumnSpan'
| 'msGridColumns'
| 'msGridRow'
| 'msGridRowAlign'
| 'msGridRowSpan'
| 'msGridRows'
| 'msHighContrastAdjust'
| 'msHyphenateLimitChars'
| 'msHyphenateLimitLines'
| 'msHyphenateLimitZone'
| 'msHyphens'
| 'msImeAlign'
| 'msOverflowStyle'
| 'msScrollChaining'
| 'msScrollLimit'
| 'msScrollLimitXMax'
| 'msScrollLimitXMin'
| 'msScrollLimitYMax'
| 'msScrollLimitYMin'
| 'msScrollRails'
| 'msScrollSnapPointsX'
| 'msScrollSnapPointsY'
| 'msScrollSnapType'
| 'msScrollSnapX'
| 'msScrollSnapY'
| 'msScrollTranslation'
| 'msTextCombineHorizontal'
| 'msTextSizeAdjust'
| 'msTouchAction'
| 'msTouchSelect'
| 'msUserSelect'
| 'msWrapFlow'
| 'msWrapMargin'
| 'msWrapThrough'
| 'opacity'
| 'order'
| 'orphans'
| 'outline'
| 'outlineColor'
| 'outlineStyle'
| 'outlineWidth'
| 'overflow'
| 'overflowX'
| 'overflowY'
| 'padding'
| 'paddingBottom'
| 'paddingLeft'
| 'paddingRight'
| 'paddingTop'
| 'pageBreakAfter'
| 'pageBreakBefore'
| 'pageBreakInside'
| 'perspective'
| 'perspectiveOrigin'
| 'pointerEvents'
| 'position'
| 'quotes'
| 'resize'
| 'right'
| 'rubyAlign'
| 'rubyOverhang'
| 'rubyPosition'
| 'stopColor'
| 'stopOpacity'
| 'stroke'
| 'strokeDasharray'
| 'strokeDashoffset'
| 'strokeLinecap'
| 'strokeLinejoin'
| 'strokeMiterlimit'
| 'strokeOpacity'
| 'strokeWidth'
| 'tableLayout'
| 'textAlign'
| 'textAlignLast'
| 'textAnchor'
| 'textDecoration'
| 'textIndent'
| 'textJustify'
| 'textKashida'
| 'textKashidaSpace'
| 'textOverflow'
| 'textShadow'
| 'textTransform'
| 'textUnderlinePosition'
| 'top'
| 'touchAction'
| 'transform'
| 'transformOrigin'
| 'transformStyle'
| 'transition'
| 'transitionDelay'
| 'transitionDuration'
| 'transitionProperty'
| 'transitionTimingFunction'
| 'unicodeBidi'
| 'verticalAlign'
| 'visibility'
| 'webkitAlignContent'
| 'webkitAlignItems'
| 'webkitAlignSelf'
| 'webkitAnimation'
| 'webkitAnimationDelay'
| 'webkitAnimationDirection'
| 'webkitAnimationDuration'
| 'webkitAnimationFillMode'
| 'webkitAnimationIterationCount'
| 'webkitAnimationName'
| 'webkitAnimationPlayState'
| 'webkitAnimationTimingFunction'
| 'webkitAppearance'
| 'webkitBackfaceVisibility'
| 'webkitBackgroundClip'
| 'webkitBackgroundOrigin'
| 'webkitBackgroundSize'
| 'webkitBorderBottomLeftRadius'
| 'webkitBorderBottomRightRadius'
| 'webkitBorderImage'
| 'webkitBorderRadius'
| 'webkitBorderTopLeftRadius'
| 'webkitBorderTopRightRadius'
| 'webkitBoxAlign'
| 'webkitBoxDirection'
| 'webkitBoxFlex'
| 'webkitBoxOrdinalGroup'
| 'webkitBoxOrient'
| 'webkitBoxPack'
| 'webkitBoxSizing'
| 'webkitColumnBreakAfter'
| 'webkitColumnBreakBefore'
| 'webkitColumnBreakInside'
| 'webkitColumnCount'
| 'webkitColumnGap'
| 'webkitColumnRule'
| 'webkitColumnRuleColor'
| 'webkitColumnRuleStyle'
| 'webkitColumnRuleWidth'
| 'webkitColumnSpan'
| 'webkitColumnWidth'
| 'webkitColumns'
| 'webkitFilter'
| 'webkitFlex'
| 'webkitFlexBasis'
| 'webkitFlexDirection'
| 'webkitFlexFlow'
| 'webkitFlexGrow'
| 'webkitFlexShrink'
| 'webkitFlexWrap'
| 'webkitJustifyContent'
| 'webkitOrder'
| 'webkitPerspective'
| 'webkitPerspectiveOrigin'
| 'webkitTapHighlightColor'
| 'webkitTextFillColor'
| 'webkitTextSizeAdjust'
| 'webkitTransform'
| 'webkitTransformOrigin'
| 'webkitTransformStyle'
| 'webkitTransition'
| 'webkitTransitionDelay'
| 'webkitTransitionDuration'
| 'webkitTransitionProperty'
| 'webkitTransitionTimingFunction'
| 'webkitUserModify'
| 'webkitUserSelect'
| 'webkitWritingMode'
| 'whiteSpace'
| 'widows'
| 'width'
| 'wordBreak'
| 'wordSpacing'
| 'wordWrap'
| 'writingMode'
| 'zIndex'
| 'zoom';
  • The names of the supported HTML5 CSS property names.

    If a standardized or widely supported name is missing, please open an issue to have it added.

    The property names were collected from the following sources: - TypeScript's lib.dom.d.ts file

type ElementAttrNames

type ElementAttrNames =
| 'abbr'
| 'accept'
| 'accept-charset'
| 'accesskey'
| 'action'
| 'allowfullscreen'
| 'alt'
| 'autocomplete'
| 'autofocus'
| 'autoplay'
| 'autosave'
| 'checked'
| 'cite'
| 'cols'
| 'colspan'
| 'contenteditable'
| 'controls'
| 'coords'
| 'crossorigin'
| 'data'
| 'datetime'
| 'default'
| 'dir'
| 'dirname'
| 'disabled'
| 'download'
| 'draggable'
| 'dropzone'
| 'enctype'
| 'form'
| 'formaction'
| 'formenctype'
| 'formmethod'
| 'formnovalidate'
| 'formtarget'
| 'headers'
| 'height'
| 'hidden'
| 'high'
| 'href'
| 'hreflang'
| 'id'
| 'inputmode'
| 'integrity'
| 'ismap'
| 'kind'
| 'label'
| 'lang'
| 'list'
| 'loop'
| 'low'
| 'max'
| 'maxlength'
| 'media'
| 'mediagroup'
| 'method'
| 'min'
| 'minlength'
| 'multiple'
| 'muted'
| 'name'
| 'novalidate'
| 'optimum'
| 'pattern'
| 'placeholder'
| 'poster'
| 'preload'
| 'readonly'
| 'rel'
| 'required'
| 'reversed'
| 'rows'
| 'rowspan'
| 'sandbox'
| 'scope'
| 'selected'
| 'shape'
| 'size'
| 'sizes'
| 'span'
| 'spellcheck'
| 'src'
| 'srcdoc'
| 'srclang'
| 'srcset'
| 'start'
| 'step'
| 'tabindex'
| 'target'
| 'title'
| 'type'
| 'typemustmatch'
| 'usemap'
| 'value'
| 'width'
| 'wrap';
  • The names of the supported HTML5 DOM element attributes.

    This list is not all-encompassing, rather it attempts to define the attribute names which are relevant for use in a virtual DOM context. If a standardized or widely supported name is missing, please open an issue to have it added.

    The attribute names were collected from the following sources: - https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes - https://www.w3.org/TR/html5/index.html#attributes-1 - https://html.spec.whatwg.org/multipage/indices.html#attributes-3

type ElementAttrs

type ElementAttrs = ElementBaseAttrs & ElementEventAttrs & ElementSpecialAttrs;
  • The full set of attributes supported by a virtual element node.

    This is the combination of the base element attributes, the inline element event listeners, and the special element attributes.

type ElementBaseAttrs

type ElementBaseAttrs = {
readonly [T in ElementAttrNames]?: string;
};
  • The base attributes for a virtual element node.

    These are the attributes which are applied to a real DOM element via element.setAttribute(). The supported attribute names are defined by the ElementAttrNames type.

    Node attributes are specified using the lower-case HTML name instead of the camel-case JS name due to browser inconsistencies in handling the JS versions.

type ElementDataset

type ElementDataset = {
readonly [name: string]: string;
};
  • An object which represents a dataset for a virtual DOM element.

    The names of the dataset properties will be automatically prefixed with data- before being added to the node, e.g. { thing: '12' } will be rendered as data-thing='12' in the DOM element.

    Dataset property names should not contain spaces.

type ElementEventAttrs

type ElementEventAttrs = {
readonly [T in keyof ElementEventMap]?: (
this: HTMLElement,
event: ElementEventMap[T]
) => any;
};
  • The inline event listener attributes for a virtual element node.

    The supported listeners are defined by the ElementEventMap type.

type ElementEventMap

type ElementEventMap = {
onabort: UIEvent;
onauxclick: MouseEvent;
onblur: FocusEvent;
oncanplay: Event;
oncanplaythrough: Event;
onchange: Event;
onclick: MouseEvent;
oncontextmenu: PointerEvent;
oncopy: ClipboardEvent;
oncuechange: Event;
oncut: ClipboardEvent;
ondblclick: MouseEvent;
ondrag: DragEvent;
ondragend: DragEvent;
ondragenter: DragEvent;
ondragexit: DragEvent;
ondragleave: DragEvent;
ondragover: DragEvent;
ondragstart: DragEvent;
ondrop: DragEvent;
ondurationchange: Event;
onemptied: Event;
onended: MediaStreamErrorEvent;
onerror: ErrorEvent;
onfocus: FocusEvent;
oninput: Event;
oninvalid: Event;
onkeydown: KeyboardEvent;
onkeypress: KeyboardEvent;
onkeyup: KeyboardEvent;
onload: Event;
onloadeddata: Event;
onloadedmetadata: Event;
onloadend: Event;
onloadstart: Event;
onmousedown: MouseEvent;
onmouseenter: MouseEvent;
onmouseleave: MouseEvent;
onmousemove: MouseEvent;
onmouseout: MouseEvent;
onmouseover: MouseEvent;
onmouseup: MouseEvent;
onmousewheel: WheelEvent;
onpaste: ClipboardEvent;
onpause: Event;
onplay: Event;
onplaying: Event;
onpointercancel: PointerEvent;
onpointerdown: PointerEvent;
onpointerenter: PointerEvent;
onpointerleave: PointerEvent;
onpointermove: PointerEvent;
onpointerout: PointerEvent;
onpointerover: PointerEvent;
onpointerup: PointerEvent;
onprogress: ProgressEvent;
onratechange: Event;
onreset: Event;
onscroll: UIEvent;
onseeked: Event;
onseeking: Event;
onselect: UIEvent;
onselectstart: Event;
onstalled: Event;
onsubmit: Event;
onsuspend: Event;
ontimeupdate: Event;
onvolumechange: Event;
onwaiting: Event;
};
  • A mapping of inline event name to event object type.

    This mapping is used to create the event listener properties for the virtual DOM element attributes object. If a standardized or widely supported name is missing, please open an issue to have it added.

    The event names were collected from the following sources: - TypeScript's lib.dom.d.ts file - https://www.w3.org/TR/html5/index.html#attributes-1 - https://html.spec.whatwg.org/multipage/webappapis.html#idl-definitions

type ElementInlineStyle

type ElementInlineStyle = {
readonly [T in CSSPropertyNames]?: string;
};
  • The inline style for for a virtual DOM element.

    Style attributes use the JS camel-cased property names instead of the CSS hyphenated names for performance and security.

type ElementSpecialAttrs

type ElementSpecialAttrs = {
/**
* The key id for the virtual element node.
*
* If a node is given a key id, the generated DOM node will not be
* recreated during a rendering update if it only moves among its
* siblings in the render tree.
*
* In general, reordering child nodes will cause the nodes to be
* completely re-rendered. Keys allow this to be optimized away.
*
* If a key is provided, it must be unique among sibling nodes.
*/
readonly key?: string;
/**
* The JS-safe name for the HTML `class` attribute.
*/
readonly className?: string;
/**
* The JS-safe name for the HTML `for` attribute.
*/
readonly htmlFor?: string;
/**
* The dataset for the rendered DOM element.
*/
readonly dataset?: ElementDataset;
/**
* The inline style for the rendered DOM element.
*/
readonly style?: ElementInlineStyle;
};
  • The special-cased attributes for a virtual element node.

type VirtualNode

type VirtualNode = VirtualElement | VirtualText;
  • A type alias for a general virtual node.

Namespaces

namespace h

namespace h {}
  • The namespace for the h function statics.

variable a

const a: IFactory;

    variable abbr

    const abbr: IFactory;

      variable address

      const address: IFactory;

        variable area

        const area: IFactory;

          variable article

          const article: IFactory;

            variable aside

            const aside: IFactory;

              variable audio

              const audio: IFactory;

                variable b

                const b: IFactory;

                  variable bdi

                  const bdi: IFactory;

                    variable bdo

                    const bdo: IFactory;

                      variable blockquote

                      const blockquote: IFactory;

                        variable br

                        const br: IFactory;

                          variable button

                          const button: IFactory;

                            variable canvas

                            const canvas: IFactory;

                              variable caption

                              const caption: IFactory;

                                variable cite

                                const cite: IFactory;

                                  variable code

                                  const code: IFactory;

                                    variable col

                                    const col: IFactory;

                                      variable colgroup

                                      const colgroup: IFactory;

                                        variable data

                                        const data: IFactory;

                                          variable datalist

                                          const datalist: IFactory;

                                            variable dd

                                            const dd: IFactory;

                                              variable del

                                              const del: IFactory;

                                                variable dfn

                                                const dfn: IFactory;

                                                  variable div

                                                  const div: IFactory;

                                                    variable dl

                                                    const dl: IFactory;

                                                      variable dt

                                                      const dt: IFactory;

                                                        variable em

                                                        const em: IFactory;

                                                          variable embed

                                                          const embed: IFactory;

                                                            variable fieldset

                                                            const fieldset: IFactory;

                                                              variable figcaption

                                                              const figcaption: IFactory;

                                                                variable figure

                                                                const figure: IFactory;

                                                                  variable footer

                                                                  const footer: IFactory;

                                                                    variable form

                                                                    const form: IFactory;

                                                                      variable h1

                                                                      const h1: IFactory;

                                                                        variable h2

                                                                        const h2: IFactory;

                                                                          variable h3

                                                                          const h3: IFactory;

                                                                            variable h4

                                                                            const h4: IFactory;

                                                                              variable h5

                                                                              const h5: IFactory;

                                                                                variable h6

                                                                                const h6: IFactory;

                                                                                  variable header

                                                                                  const header: IFactory;

                                                                                    variable hr

                                                                                    const hr: IFactory;

                                                                                      variable i

                                                                                      const i: IFactory;

                                                                                        variable iframe

                                                                                        const iframe: IFactory;

                                                                                          variable img

                                                                                          const img: IFactory;

                                                                                            variable input

                                                                                            const input: IFactory;

                                                                                              variable ins

                                                                                              const ins: IFactory;

                                                                                                variable kbd

                                                                                                const kbd: IFactory;

                                                                                                  variable label

                                                                                                  const label: IFactory;

                                                                                                    variable legend

                                                                                                    const legend: IFactory;

                                                                                                      variable li

                                                                                                      const li: IFactory;

                                                                                                        variable main

                                                                                                        const main: IFactory;

                                                                                                          variable map

                                                                                                          const map: IFactory;

                                                                                                            variable mark

                                                                                                            const mark: IFactory;

                                                                                                              variable meter

                                                                                                              const meter: IFactory;

                                                                                                                variable nav

                                                                                                                const nav: IFactory;

                                                                                                                  variable noscript

                                                                                                                  const noscript: IFactory;

                                                                                                                    variable object

                                                                                                                    const object: IFactory;

                                                                                                                      variable ol

                                                                                                                      const ol: IFactory;

                                                                                                                        variable optgroup

                                                                                                                        const optgroup: IFactory;

                                                                                                                          variable option

                                                                                                                          const option: IFactory;

                                                                                                                            variable output

                                                                                                                            const output: IFactory;

                                                                                                                              variable p

                                                                                                                              const p: IFactory;

                                                                                                                                variable param

                                                                                                                                const param: IFactory;

                                                                                                                                  variable pre

                                                                                                                                  const pre: IFactory;

                                                                                                                                    variable progress

                                                                                                                                    const progress: IFactory;

                                                                                                                                      variable q

                                                                                                                                      const q: IFactory;

                                                                                                                                        variable rp

                                                                                                                                        const rp: IFactory;

                                                                                                                                          variable rt

                                                                                                                                          const rt: IFactory;

                                                                                                                                            variable ruby

                                                                                                                                            const ruby: IFactory;

                                                                                                                                              variable s

                                                                                                                                              const s: IFactory;

                                                                                                                                                variable samp

                                                                                                                                                const samp: IFactory;

                                                                                                                                                  variable section

                                                                                                                                                  const section: IFactory;

                                                                                                                                                    variable select

                                                                                                                                                    const select: IFactory;

                                                                                                                                                      variable small

                                                                                                                                                      const small: IFactory;

                                                                                                                                                        variable source

                                                                                                                                                        const source: IFactory;

                                                                                                                                                          variable span

                                                                                                                                                          const span: IFactory;

                                                                                                                                                            variable strong

                                                                                                                                                            const strong: IFactory;

                                                                                                                                                              variable sub

                                                                                                                                                              const sub: IFactory;

                                                                                                                                                                variable summary

                                                                                                                                                                const summary: IFactory;

                                                                                                                                                                  variable sup

                                                                                                                                                                  const sup: IFactory;

                                                                                                                                                                    variable table

                                                                                                                                                                    const table: IFactory;

                                                                                                                                                                      variable tbody

                                                                                                                                                                      const tbody: IFactory;

                                                                                                                                                                        variable td

                                                                                                                                                                        const td: IFactory;

                                                                                                                                                                          variable textarea

                                                                                                                                                                          const textarea: IFactory;

                                                                                                                                                                            variable tfoot

                                                                                                                                                                            const tfoot: IFactory;

                                                                                                                                                                              variable th

                                                                                                                                                                              const th: IFactory;

                                                                                                                                                                                variable thead

                                                                                                                                                                                const thead: IFactory;

                                                                                                                                                                                  variable time

                                                                                                                                                                                  const time: IFactory;

                                                                                                                                                                                    variable title

                                                                                                                                                                                    const title: IFactory;

                                                                                                                                                                                      variable tr

                                                                                                                                                                                      const tr: IFactory;

                                                                                                                                                                                        variable track

                                                                                                                                                                                        const track: IFactory;

                                                                                                                                                                                          variable u

                                                                                                                                                                                          const u: IFactory;

                                                                                                                                                                                            variable ul

                                                                                                                                                                                            const ul: IFactory;

                                                                                                                                                                                              variable var_

                                                                                                                                                                                              const var_: IFactory;

                                                                                                                                                                                                variable video

                                                                                                                                                                                                const video: IFactory;

                                                                                                                                                                                                  variable wbr

                                                                                                                                                                                                  const wbr: IFactory;

                                                                                                                                                                                                    interface IFactory

                                                                                                                                                                                                    interface IFactory {}
                                                                                                                                                                                                    • A bound factory function for a specific h() tag.

                                                                                                                                                                                                    call signature

                                                                                                                                                                                                    (...children: Child[]): VirtualElement;

                                                                                                                                                                                                      call signature

                                                                                                                                                                                                      (attrs: ElementAttrs, ...children: Child[]): VirtualElement;

                                                                                                                                                                                                        type Child

                                                                                                                                                                                                        type Child = (string | VirtualNode | null) | Array<string | VirtualNode | null>;
                                                                                                                                                                                                        • A type alias for the supported child argument types.

                                                                                                                                                                                                        namespace VirtualDOM

                                                                                                                                                                                                        namespace VirtualDOM {}
                                                                                                                                                                                                        • The namespace for the virtual DOM rendering functions.

                                                                                                                                                                                                        function realize

                                                                                                                                                                                                        realize: (node: VirtualElement) => HTMLElement;
                                                                                                                                                                                                        • Create a real DOM element from a virtual element node.

                                                                                                                                                                                                          Parameter node

                                                                                                                                                                                                          The virtual element node to realize.

                                                                                                                                                                                                          Returns

                                                                                                                                                                                                          A new DOM element for the given virtual element node.

                                                                                                                                                                                                          #### Notes This creates a brand new *real* DOM element with a structure which matches the given virtual DOM node.

                                                                                                                                                                                                          If virtual diffing is desired, use the render function instead.

                                                                                                                                                                                                        function render

                                                                                                                                                                                                        render: (
                                                                                                                                                                                                        content: VirtualNode | ReadonlyArray<VirtualNode> | null,
                                                                                                                                                                                                        host: HTMLElement
                                                                                                                                                                                                        ) => void;
                                                                                                                                                                                                        • Render virtual DOM content into a host element.

                                                                                                                                                                                                          Parameter content

                                                                                                                                                                                                          The virtual DOM content to render.

                                                                                                                                                                                                          Parameter host

                                                                                                                                                                                                          The host element for the rendered content.

                                                                                                                                                                                                          #### Notes This renders the delta from the previous rendering. It assumes that the content of the host element is not manipulated by external code.

                                                                                                                                                                                                          Providing null content will clear the rendering.

                                                                                                                                                                                                          Externally modifying the provided content or the host element will result in undefined rendering behavior.

                                                                                                                                                                                                        Package Files (1)

                                                                                                                                                                                                        Dependencies (1)

                                                                                                                                                                                                        Dev Dependencies (14)

                                                                                                                                                                                                        Peer Dependencies (0)

                                                                                                                                                                                                        No peer dependencies.

                                                                                                                                                                                                        Badge

                                                                                                                                                                                                        To add a badge like this onejsDocs.io badgeto your package's README, use the codes available below.

                                                                                                                                                                                                        You may also use Shields.io to create a custom badge linking to https://www.jsdocs.io/package/@phosphor/virtualdom.

                                                                                                                                                                                                        • Markdown
                                                                                                                                                                                                          [![jsDocs.io](https://img.shields.io/badge/jsDocs.io-reference-blue)](https://www.jsdocs.io/package/@phosphor/virtualdom)
                                                                                                                                                                                                        • HTML
                                                                                                                                                                                                          <a href="https://www.jsdocs.io/package/@phosphor/virtualdom"><img src="https://img.shields.io/badge/jsDocs.io-reference-blue" alt="jsDocs.io"></a>