Class DOMRenderer
Index
Constructors
Properties
Methods
Constructors
constructor
- new DOMRenderer(): DOMRenderer
Returns DOMRenderer
Methods
Protectedattrs
Protectedcommit
- commit
Child(root, node, index?): void Parameters
- root: ParentNode
- node: Node
- index: number = 0
Returns void
Protecteddelete
- delete
Node(__namedParameters): void Parameters
- __namedParameters: VNode
Returns void
ProtecteddiffVChildren
- diffVChildren(oldVNode, newVNode): Generator<UpdateTask, any, any>
Returns Generator<UpdateTask, any, any>
Protectedhandle
- handle
Custom Event(node, event): void Parameters
- node: EventTarget
- event: string
Returns void
Protectedkey
- key
Of(__namedParameters, index?): any Parameters
- __namedParameters: VNode
Optionalindex: number
Returns any
patch
Protectedpatch
Protectedprops
Protectedremove
- remove
Property(node, key): void Parameters
- node: Element
- key: string
Returns void
render
render
- render
To Readable Stream(tree): ReadableStream<string> Parameters
- tree: VNode
Returns ReadableStream<string>
render
- render
To Static Markup(tree): string Parameters
- tree: VNode
Returns string
Protectedset
- set
Property(node, key, value): void Parameters
- node: Element
- key: string
- value: string
Returns void
Protectedupdate
- update
Props<N, P>(node, oldProps?, newProps?, onDelete?, onAdd?): void Type Parameters
- N extends DataObject
- P extends DataObject
Parameters
Returns void
Protectedv
Class VNode
Hierarchy (view full)
- VNodeMeta
- VNode
Index
Constructors
Properties
Methods
Properties
Optionalchildren
Optionalis
is?: string
Optionalkey
key?: IndexKey
Optionalnamespace
namespace?: string
Optionalnode
Optionalparent
Optionalprops
Optionalref
Optionalselector
selector?: string
Optionalstyle
Optionaltag
tag
Optionaltext
text?: string
Staticattrs
attrs
| "slot"
| "accessKey"
| "accessKeyLabel"
| "autocapitalize"
| "dir"
| "draggable"
| "hidden"
| "inert"
| "innerText"
| "lang"
| "offsetHeight"
| "offsetLeft"
| "offsetParent"
| "offsetTop"
| "offsetWidth"
| "outerText"
| "popover"
| "spellcheck"
| "title"
| "translate"
| "attributes"
| "classList"
| "className"
| "clientHeight"
| "clientLeft"
| "clientTop"
| "clientWidth"
| "id"
| "innerHTML"
| "localName"
| "namespaceURI"
| "outerHTML"
| "part"
| "prefix"
| "scrollHeight"
| "scrollLeft"
| "scrollTop"
| "scrollWidth"
| "shadowRoot"
| "tagName"
| "ariaBrailleLabel"
| "ariaBrailleRoleDescription"
| "nextElementSibling"
| "previousElementSibling"
| "childElementCount"
| "children"
| "firstElementChild"
| "lastElementChild"
| "assignedSlot"
| "attributeStyleMap"
| "style"
| "contentEditable"
| "enterKeyHint"
| "inputMode"
| "isContentEditable"
| "autofocus"
| "dataset"
| "nonce"
| "tabIndex"
| "onFullscreenChange"
| "onFullscreenError"
| "onAbort"
| "onAnimationCancel"
| "onAnimationEnd"
| "onAnimationIteration"
| "onAnimationStart"
| "onAuxClick"
| "onBeforeInput"
| "onBeforeToggle"
| "onBlur"
| "onCancel"
| "onCanPlay"
| "onCanplaythrough"
| "onChange"
| "onClick"
| "onClose"
| "onContextlost"
| "onContextmenu"
| "onContextrestored"
| "onCopy"
| "onCueChange"
| "onCut"
| "onDblClick"
| "onDrag"
| "onDragEnd"
| "onDragEnter"
| "onDragLeave"
| "onDragOver"
| "onDragStart"
| "onDrop"
| "onDurationChange"
| "onEmptied"
| "onEnded"
| "onError"
| "onFocus"
| "onFormdata"
| "onGotpointercapture"
| "onInput"
| "onInvalid"
| "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"
| "onReset"
| "onResize"
| "onScroll"
| "onScrollend"
| "onSecuritypolicyviolation"
| "onSeeked"
| "onSeeking"
| "onSelect"
| "onSelectionChange"
| "onSelectstart"
| "onSlotChange"
| "onStalled"
| "onSubmit"
| "onSuspend"
| "onTimeupdate"
| "onToggle"
| "onTouchCancel"
| "onTouchEnd"
| "onTouchMove"
| "onTouchStart"
| "onTransitionCancel"
| "onTransitionEnd"
| "onTransitionRun"
| "onTransitionStart"
| "onVolumeChange"
| "onWaiting"
| "onWebkitanimationend"
| "onWebkitanimationiteration"
| "onWebkitanimationstart"
| "onWebkittransitionend"
| "onWheel"
| (keyof IAom)
| "control"
| "form"
| "htmlFor"> = ...
| "slot"
| "accessKey"
| "accessKeyLabel"
| "autocapitalize"
| "dir"
| "draggable"
| "hidden"
| "inert"
| "innerText"
| "lang"
| "offsetHeight"
| "offsetLeft"
| "offsetParent"
| "offsetTop"
| "offsetWidth"
| "outerText"
| "popover"
| "spellcheck"
| "title"
| "translate"
| "attributes"
| "classList"
| "className"
| "clientHeight"
| "clientLeft"
| "clientTop"
| "clientWidth"
| "id"
| "innerHTML"
| "localName"
| "namespaceURI"
| "outerHTML"
| "part"
| "prefix"
| "scrollHeight"
| "scrollLeft"
| "scrollTop"
| "scrollWidth"
| "shadowRoot"
| "tagName"
| "ariaBrailleLabel"
| "ariaBrailleRoleDescription"
| "nextElementSibling"
| "previousElementSibling"
| "childElementCount"
| "children"
| "firstElementChild"
| "lastElementChild"
| "assignedSlot"
| "attributeStyleMap"
| "style"
| "contentEditable"
| "enterKeyHint"
| "inputMode"
| "isContentEditable"
| "autofocus"
| "dataset"
| "nonce"
| "tabIndex"
| "onFullscreenChange"
| "onFullscreenError"
| "onAbort"
| "onAnimationCancel"
| "onAnimationEnd"
| "onAnimationIteration"
| "onAnimationStart"
| "onAuxClick"
| "onBeforeInput"
| "onBeforeToggle"
| "onBlur"
| "onCancel"
| "onCanPlay"
| "onCanplaythrough"
| "onChange"
| "onClick"
| "onClose"
| "onContextlost"
| "onContextmenu"
| "onContextrestored"
| "onCopy"
| "onCueChange"
| "onCut"
| "onDblClick"
| "onDrag"
| "onDragEnd"
| "onDragEnter"
| "onDragLeave"
| "onDragOver"
| "onDragStart"
| "onDrop"
| "onDurationChange"
| "onEmptied"
| "onEnded"
| "onError"
| "onFocus"
| "onFormdata"
| "onGotpointercapture"
| "onInput"
| "onInvalid"
| "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"
| "onReset"
| "onResize"
| "onScroll"
| "onScrollend"
| "onSecuritypolicyviolation"
| "onSeeked"
| "onSeeking"
| "onSelect"
| "onSelectionChange"
| "onSelectstart"
| "onSlotChange"
| "onStalled"
| "onSubmit"
| "onSuspend"
| "onTimeupdate"
| "onToggle"
| "onTouchCancel"
| "onTouchEnd"
| "onTouchMove"
| "onTouchStart"
| "onTransitionCancel"
| "onTransitionEnd"
| "onTransitionRun"
| "onTransitionStart"
| "onVolumeChange"
| "onWaiting"
| "onWebkitanimationend"
| "onWebkitanimationiteration"
| "onWebkitanimationstart"
| "onWebkittransitionend"
| "onWheel"
| (keyof IAom)
| "control"
| "form"
| "htmlFor"> = ...
Staticprops
props
| "slot"
| "accessKey"
| "accessKeyLabel"
| "autocapitalize"
| "dir"
| "draggable"
| "hidden"
| "inert"
| "innerText"
| "lang"
| "offsetHeight"
| "offsetLeft"
| "offsetParent"
| "offsetTop"
| "offsetWidth"
| "outerText"
| "popover"
| "spellcheck"
| "title"
| "translate"
| "attributes"
| "classList"
| "className"
| "clientHeight"
| "clientLeft"
| "clientTop"
| "clientWidth"
| "id"
| "innerHTML"
| "localName"
| "namespaceURI"
| "outerHTML"
| "part"
| "prefix"
| "scrollHeight"
| "scrollLeft"
| "scrollTop"
| "scrollWidth"
| "shadowRoot"
| "tagName"
| "ariaBrailleLabel"
| "ariaBrailleRoleDescription"
| "nextElementSibling"
| "previousElementSibling"
| "childElementCount"
| "children"
| "firstElementChild"
| "lastElementChild"
| "assignedSlot"
| "attributeStyleMap"
| "style"
| "contentEditable"
| "enterKeyHint"
| "inputMode"
| "isContentEditable"
| "autofocus"
| "dataset"
| "nonce"
| "tabIndex"
| "onFullscreenChange"
| "onFullscreenError"
| "onAbort"
| "onAnimationCancel"
| "onAnimationEnd"
| "onAnimationIteration"
| "onAnimationStart"
| "onAuxClick"
| "onBeforeInput"
| "onBeforeToggle"
| "onBlur"
| "onCancel"
| "onCanPlay"
| "onCanplaythrough"
| "onChange"
| "onClick"
| "onClose"
| "onContextlost"
| "onContextmenu"
| "onContextrestored"
| "onCopy"
| "onCueChange"
| "onCut"
| "onDblClick"
| "onDrag"
| "onDragEnd"
| "onDragEnter"
| "onDragLeave"
| "onDragOver"
| "onDragStart"
| "onDrop"
| "onDurationChange"
| "onEmptied"
| "onEnded"
| "onError"
| "onFocus"
| "onFormdata"
| "onGotpointercapture"
| "onInput"
| "onInvalid"
| "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"
| "onReset"
| "onResize"
| "onScroll"
| "onScrollend"
| "onSecuritypolicyviolation"
| "onSeeked"
| "onSeeking"
| "onSelect"
| "onSelectionChange"
| "onSelectstart"
| "onSlotChange"
| "onStalled"
| "onSubmit"
| "onSuspend"
| "onTimeupdate"
| "onToggle"
| "onTouchCancel"
| "onTouchEnd"
| "onTouchMove"
| "onTouchStart"
| "onTransitionCancel"
| "onTransitionEnd"
| "onTransitionRun"
| "onTransitionStart"
| "onVolumeChange"
| "onWaiting"
| "onWebkitanimationend"
| "onWebkitanimationiteration"
| "onWebkitanimationstart"
| "onWebkittransitionend"
| "onWheel"
| (keyof IAom)
| "control"
| "form"
| "htmlFor", string>> = ...
| "slot"
| "accessKey"
| "accessKeyLabel"
| "autocapitalize"
| "dir"
| "draggable"
| "hidden"
| "inert"
| "innerText"
| "lang"
| "offsetHeight"
| "offsetLeft"
| "offsetParent"
| "offsetTop"
| "offsetWidth"
| "outerText"
| "popover"
| "spellcheck"
| "title"
| "translate"
| "attributes"
| "classList"
| "className"
| "clientHeight"
| "clientLeft"
| "clientTop"
| "clientWidth"
| "id"
| "innerHTML"
| "localName"
| "namespaceURI"
| "outerHTML"
| "part"
| "prefix"
| "scrollHeight"
| "scrollLeft"
| "scrollTop"
| "scrollWidth"
| "shadowRoot"
| "tagName"
| "ariaBrailleLabel"
| "ariaBrailleRoleDescription"
| "nextElementSibling"
| "previousElementSibling"
| "childElementCount"
| "children"
| "firstElementChild"
| "lastElementChild"
| "assignedSlot"
| "attributeStyleMap"
| "style"
| "contentEditable"
| "enterKeyHint"
| "inputMode"
| "isContentEditable"
| "autofocus"
| "dataset"
| "nonce"
| "tabIndex"
| "onFullscreenChange"
| "onFullscreenError"
| "onAbort"
| "onAnimationCancel"
| "onAnimationEnd"
| "onAnimationIteration"
| "onAnimationStart"
| "onAuxClick"
| "onBeforeInput"
| "onBeforeToggle"
| "onBlur"
| "onCancel"
| "onCanPlay"
| "onCanplaythrough"
| "onChange"
| "onClick"
| "onClose"
| "onContextlost"
| "onContextmenu"
| "onContextrestored"
| "onCopy"
| "onCueChange"
| "onCut"
| "onDblClick"
| "onDrag"
| "onDragEnd"
| "onDragEnter"
| "onDragLeave"
| "onDragOver"
| "onDragStart"
| "onDrop"
| "onDurationChange"
| "onEmptied"
| "onEnded"
| "onError"
| "onFocus"
| "onFormdata"
| "onGotpointercapture"
| "onInput"
| "onInvalid"
| "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"
| "onReset"
| "onResize"
| "onScroll"
| "onScrollend"
| "onSecuritypolicyviolation"
| "onSeeked"
| "onSeeking"
| "onSelect"
| "onSelectionChange"
| "onSelectstart"
| "onSlotChange"
| "onStalled"
| "onSubmit"
| "onSuspend"
| "onTimeupdate"
| "onToggle"
| "onTouchCancel"
| "onTouchEnd"
| "onTouchMove"
| "onTouchStart"
| "onTransitionCancel"
| "onTransitionEnd"
| "onTransitionRun"
| "onTransitionStart"
| "onVolumeChange"
| "onWaiting"
| "onWebkitanimationend"
| "onWebkitanimationiteration"
| "onWebkitanimationstart"
| "onWebkittransitionend"
| "onWheel"
| (keyof IAom)
| "control"
| "form"
| "htmlFor", string>> = ...
Methods
createDOM
- createDOM(document?): Element | DocumentFragment | Text
Parameters
- document: Document = globalThis.document
Returns Element | DocumentFragment | Text
Protectedgenerate
generateXML
namespace
toJSON
walk
StaticfromDOM
Staticis
- is
Fragment(__namedParameters): boolean Parameters
- __namedParameters: VNode
Returns boolean
Class VNodeMeta
Hierarchy (view full)
- VNodeMeta
Function Fragment
- Fragment(__namedParameters): VNode
Parameters
- __namedParameters: DataObject & Omit<VNode, "props">
Returns VNode
Function jsx
- jsx(type, __namedParameters, key?): VNode
Parameters
- type: string | Function
- __namedParameters: DataObject
Optionalkey: IndexKey
Returns VNode
Function jsxDEV
- jsxDEV(type, __namedParameters, key?): VNode
Parameters
- type: string | Function
- __namedParameters: DataObject
Optionalkey: IndexKey
Returns VNode
Function jsxs
- jsxs(type, __namedParameters, key?): VNode
Parameters
- type: string | Function
- __namedParameters: DataObject
Optionalkey: IndexKey
Returns VNode
DOM Renderer
DOM Renderer
A light-weight DOM Renderer supports Web components standard & TypeScript language.
+
+
Feature
-
+
- input: Virtual DOM object in JSX syntax +
- output: DOM object or XML string of HTML, SVG & MathML languages +
Usage
JavaScript
import { DOMRenderer } from 'dom-renderer';
const newVNode = new DOMRenderer().patch(
{
tagName: 'body',
node: document.body
},
{
tagName: 'body',
children: [
{
tagName: 'a',
props: { href: 'https://idea2.app/' },
style: { color: 'red' },
children: [{ text: 'idea2app' }]
}
]
}
);
console.log(newVNode);
+TypeScript
tsconfig.json
{
"compilerOptions": {
"jsx": "react-jsx",
"jsxImportSource": "dom-renderer"
}
}
+index.tsx
import { DOMRenderer } from 'dom-renderer';
const newVNode = new DOMRenderer().render(
<a href="https://idea2.app/" style={{ color: 'red' }}>
idea2app
</a>
);
console.log(newVNode);
+Node.js & Bun
view.tsx
import { DOMRenderer } from 'dom-renderer';
const renderer = new DOMRenderer();
const Hello = () => <h1>Hello, JSX SSR!</h1>;
export const generateStream = () => renderer.renderToReadableStream(<Hello />);
+index.ts
import { Readable } from 'stream';
import { createServer } from 'http';
import 'dom-renderer/polyfill';
import { generateStream } from './view';
createServer((request, response) => {
const stream = generateStream();
Readable.fromWeb(stream).pipe(response);
}).listen(8080);
+Framework
Web components
Original
Inspiration
Prototype
diff --git a/modules.html b/modules.html
new file mode 100644
index 0000000..5e481ce
--- /dev/null
+++ b/modules.html
@@ -0,0 +1,3 @@
+
DOM Renderer
Index
Modules
dist
+jsx-
Module dist
Index
Classes
Interfaces
Type Aliases
Type Alias DataObject
Type Alias JsxChild
Type Alias JsxChildren
Type Alias JsxProps<T>
Jsx
children?: JsxChildren;
}
children?: JsxChildren;
}
Type Parameters
- T extends HTMLElement
Type Alias MathMlJsxProps<T>
Math
children?: JsxChildren;
}
children?: JsxChildren;
}
Type Parameters
- T extends MathMLElement
Type Alias SvgJsxProps<T>
Svg
children?: JsxChildren;
}
children?: JsxChildren;
}
Type Parameters
- T extends SVGElement
See
https://babeljs.io/docs/babel-plugin-transform-react-jsx#react-automatic-runtime-1
+