jaandrle/deka-dom-el
1
0
Fork 0
mirror of https://github.com/jaandrle/deka-dom-el synced 2024-11-24 01:29:36 +01:00
Code Packages Releases Activity

💥 simulateSlots

Browse Source
This commit is contained in:
Jan Andrle 2023-11-24 16:16:08 +01:00
parent 6a293d75a6
commit fb02635d24
Signed by: jaandrle
GPG Key ID: B3A25AED155AFFAB
20 changed files with 1263 additions and 1299 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
dist/dde-with-signals.js vendored
View File

File diff suppressed because one or more lines are too long

27
dist/dde.js vendored
View File

File diff suppressed because one or more lines are too long

587
dist/esm-with-signals.d.ts vendored
View File

@ -46,7 +46,7 @@ export function classListDeclarative<El extends SupportedElement>(element: El, c
export function assign<El extends SupportedElement>(element: El, ...attrs_array: Partial<ElementAttributes<El>>[]): El export function assign<El extends SupportedElement>(element: El, ...attrs_array: Partial<ElementAttributes<El>>[]): El
export function assignAttribute<El extends SupportedElement, ATT extends keyof ElementAttributes<El>>(element: El, attr: ATT, value: ElementAttributes<El>[ATT]): ElementAttributes<El>[ATT] export function assignAttribute<El extends SupportedElement, ATT extends keyof ElementAttributes<El>>(element: El, attr: ATT, value: ElementAttributes<El>[ATT]): ElementAttributes<El>[ATT]
type ExtendedHTMLElementTagNameMap= HTMLElementTagNameMap & CustomElementTagNameMap & ddePublicElementTagNameMap type ExtendedHTMLElementTagNameMap= ddeHTMLElementTagNameMap & CustomElementTagNameMap & ddePublicElementTagNameMap
export function el<TAG extends keyof ExtendedHTMLElementTagNameMap>( export function el<TAG extends keyof ExtendedHTMLElementTagNameMap>(
tag_name: TAG, tag_name: TAG,
attrs?: string | Partial<ElementAttributes<ExtendedHTMLElementTagNameMap[TAG]>>, attrs?: string | Partial<ElementAttributes<ExtendedHTMLElementTagNameMap[TAG]>>,
@ -54,7 +54,7 @@ export function el<TAG extends keyof ExtendedHTMLElementTagNameMap>(
): ExtendedHTMLElementTagNameMap[TAG] ): ExtendedHTMLElementTagNameMap[TAG]
export function el<T>( export function el<T>(
tag_name?: "<>", tag_name?: "<>",
): DocumentFragment ): ddeDocumentFragment
export function el< export function el<
A extends ddeComponentAttributes, A extends ddeComponentAttributes,
@ -68,22 +68,22 @@ export function el(
tag_name: string, tag_name: string,
attrs?: string | Record<string, any>, attrs?: string | Record<string, any>,
...addons: ddeElementAddon<HTMLElement>[] ...addons: ddeElementAddon<HTMLElement>[]
): HTMLElement ): ddeHTMLElement
export function elNS( export function elNS(
namespace: "http://www.w3.org/2000/svg" namespace: "http://www.w3.org/2000/svg"
): <TAG extends keyof SVGElementTagNameMap, KEYS extends keyof SVGElementTagNameMap[TAG] & { d: string }>( ): <TAG, EL extends ( TAG extends keyof ddeSVGElementTagNameMap ? ddeSVGElementTagNameMap[TAG] : ddeSVGElement ), KEYS extends keyof EL & { d: string }>(
tag_name: TAG, tag_name: TAG,
attrs?: string | Partial<{ [key in KEYS]: SVGElementTagNameMap[TAG][key] | string | number | boolean }>, attrs?: string | Partial<{ [key in KEYS]: EL[key] | string | number | boolean }>,
...addons: ddeElementAddon<SVGElementTagNameMap[TAG]>[] ...addons: ddeElementAddon<EL>[]
)=> SVGElementTagNameMap[TAG] )=> EL
export function elNS( export function elNS(
namespace: "http://www.w3.org/1998/Math/MathML" namespace: "http://www.w3.org/1998/Math/MathML"
): <TAG extends keyof MathMLElementTagNameMap, KEYS extends keyof MathMLElementTagNameMap[TAG] & { d: string }>( ): <TAG extends keyof MathMLElementTagNameMap, KEYS extends keyof MathMLElementTagNameMap[TAG] & { d: string }>(
tag_name: TAG, tag_name: TAG,
attrs?: string | Partial<{ [key in KEYS]: MathMLElementTagNameMap[TAG][key] | string | number | boolean }>, attrs?: string | Partial<{ [key in KEYS]: MathMLElementTagNameMap[TAG][key] | string | number | boolean }>,
...addons: ddeElementAddon<MathMLElementTagNameMap[TAG]>[] ...addons: ddeElementAddon<MathMLElementTagNameMap[TAG]>[]
)=> MathMLElementTagNameMap[TAG] )=> ddeMathMLElement
export function elNS( export function elNS(
namespace: string namespace: string
): ( ): (
@ -93,6 +93,7 @@ export function elNS(
)=> SupportedElement )=> SupportedElement
export function chainableAppend<EL extends SupportedElement>(el: EL): EL; export function chainableAppend<EL extends SupportedElement>(el: EL): EL;
export function simulateSlots<EL extends SupportedElement | DocumentFragment>(el: EL): EL
export function dispatchEvent(name: keyof DocumentEventMap | string, options?: EventInit): export function dispatchEvent(name: keyof DocumentEventMap | string, options?: EventInit):
(element: SupportedElement, data?: any)=> void; (element: SupportedElement, data?: any)=> void;
@ -166,304 +167,282 @@ export const scope: {
pop(): ReturnType<Array<Scope>["pop"]>, pop(): ReturnType<Array<Scope>["pop"]>,
}; };
/* /* TypeScript MEH // TODO for SVG */
* TODO TypeScript HACK (better way?)
* this doesnt works
* ```ts
* interface element<el> extends Node{
* prototype: el;
* append(...els: (SupportedElement | DocumentFragment | string | element<SupportedElement | DocumentFragment>)[]): el
* }
*
export function el<T>(
* tag_name?: "<>",
* ): element<DocumentFragment>
* ```
* …as its complains here
* ```
ts
*
const d= el("div");
*
const f= (a: HTMLDivElement)=> a;
* f(d);
//←
* document.head.append( //←
* el("script", { src: "https://flems.io/flems.html", type: "text/javascript", charset: "utf-8" }),
* );
* ```
* TODO for SVG
* */
type ddeAppend<el>= (...nodes: (Node | string)[])=> el; type ddeAppend<el>= (...nodes: (Node | string)[])=> el;
declare global{ declare global{
interface HTMLAnchorElement{ interface ddeDocumentFragment extends DocumentFragment{ append: ddeAppend<ddeDocumentFragment>; }
/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */ interface ddeHTMLElement extends HTMLElement{ append: ddeAppend<ddeHTMLElement>; }
append: ddeAppend<HTMLAnchorElement>; interface ddeSVGElement extends SVGElement{ append: ddeAppend<ddeSVGElement>; }
} interface ddeMathMLElement extends MathMLElement{ append: ddeAppend<ddeMathMLElement>; }
interface HTMLElement{
/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */ interface ddeHTMLElementTagNameMap {
append: ddeAppend<HTMLElement>; "a": ddeHTMLAnchorElement;
} "area": ddeHTMLAreaElement;
interface HTMLAreaElement{ "audio": ddeHTMLAudioElement;
/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */ "base": ddeHTMLBaseElement;
append: ddeAppend<HTMLAreaElement>; "blockquote": ddeHTMLQuoteElement;
} "body": ddeHTMLBodyElement;
interface HTMLAudioElement{ "br": ddeHTMLBRElement;
/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */ "button": ddeHTMLButtonElement;
append: ddeAppend<HTMLAudioElement>; "canvas": ddeHTMLCanvasElement;
} "caption": ddeHTMLTableCaptionElement;
interface HTMLBaseElement{ "col": ddeHTMLTableColElement;
/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */ "colgroup": ddeHTMLTableColElement;
append: ddeAppend<HTMLBaseElement>; "data": ddeHTMLDataElement;
} "datalist": ddeHTMLDataListElement;
interface HTMLQuoteElement{ "del": ddeHTMLModElement;
/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */ "details": ddeHTMLDetailsElement;
append: ddeAppend<HTMLQuoteElement>; "dialog": ddeHTMLDialogElement;
} "div": ddeHTMLDivElement;
interface HTMLBodyElement{ "dl": ddeHTMLDListElement;
/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */ "embed": ddeHTMLEmbedElement;
append: ddeAppend<HTMLBodyElement>; "fieldset": ddeHTMLFieldSetElement;
} "form": ddeHTMLFormElement;
interface HTMLBRElement{ "h1": ddeHTMLHeadingElement;
/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */ "h2": ddeHTMLHeadingElement;
append: ddeAppend<HTMLBRElement>; "h3": ddeHTMLHeadingElement;
} "h4": ddeHTMLHeadingElement;
interface HTMLButtonElement{ "h5": ddeHTMLHeadingElement;
/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */ "h6": ddeHTMLHeadingElement;
append: ddeAppend<HTMLButtonElement>; "head": ddeHTMLHeadElement;
} "hr": ddeHTMLHRElement;
interface HTMLCanvasElement{ "html": ddeHTMLHtmlElement;
/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */ "iframe": ddeHTMLIFrameElement;
append: ddeAppend<HTMLCanvasElement>; "img": ddeHTMLImageElement;
} "input": ddeHTMLInputElement;
interface HTMLTableCaptionElement{ "ins": ddeHTMLModElement;
/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */ "label": ddeHTMLLabelElement;
append: ddeAppend<HTMLTableCaptionElement>; "legend": ddeHTMLLegendElement;
} "li": ddeHTMLLIElement;
interface HTMLTableColElement{ "link": ddeHTMLLinkElement;
/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */ "map": ddeHTMLMapElement;
append: ddeAppend<HTMLTableColElement>; "menu": ddeHTMLMenuElement;
} "meta": ddeHTMLMetaElement;
interface HTMLTableColElement{ "meter": ddeHTMLMeterElement;
/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */ "object": ddeHTMLObjectElement;
append: ddeAppend<HTMLTableColElement>; "ol": ddeHTMLOListElement;
} "optgroup": ddeHTMLOptGroupElement;
interface HTMLDataElement{ "option": ddeHTMLOptionElement;
/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */ "output": ddeHTMLOutputElement;
append: ddeAppend<HTMLDataElement>; "p": ddeHTMLParagraphElement;
} "picture": ddeHTMLPictureElement;
interface HTMLDataListElement{ "pre": ddeHTMLPreElement;
/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */ "progress": ddeHTMLProgressElement;
append: ddeAppend<HTMLDataListElement>; "q": ddeHTMLQuoteElement;
} "script": ddeHTMLScriptElement;
interface HTMLModElement{ "select": ddeHTMLSelectElement;
/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */ "slot": ddeHTMLSlotElement;
append: ddeAppend<HTMLModElement>; "source": ddeHTMLSourceElement;
} "span": ddeHTMLSpanElement;
interface HTMLDetailsElement{ "style": ddeHTMLStyleElement;
/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */ "table": ddeHTMLTableElement;
append: ddeAppend<HTMLDetailsElement>; "tbody": ddeHTMLTableSectionElement;
} "td": ddeHTMLTableCellElement;
interface HTMLDialogElement{ "template": ddeHTMLTemplateElement;
/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */ "textarea": ddeHTMLTextAreaElement;
append: ddeAppend<HTMLDialogElement>; "tfoot": ddeHTMLTableSectionElement;
} "th": ddeHTMLTableCellElement;
interface HTMLDivElement{ "thead": ddeHTMLTableSectionElement;
/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */ "time": ddeHTMLTimeElement;
append: ddeAppend<HTMLDivElement>; "title": ddeHTMLTitleElement;
} "tr": ddeHTMLTableRowElement;
interface HTMLDListElement{ "track": ddeHTMLTrackElement;
/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */ "ul": ddeHTMLUListElement;
append: ddeAppend<HTMLDListElement>; "video": ddeHTMLVideoElement;
} }
interface HTMLEmbedElement{ interface ddeHTMLAnchorElement extends HTMLAnchorElement{ append: ddeAppend<ddeHTMLAnchorElement>; }
/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */ interface ddeHTMLAreaElement extends HTMLAreaElement{ append: ddeAppend<ddeHTMLAreaElement>; }
append: ddeAppend<HTMLEmbedElement>; interface ddeHTMLAudioElement extends HTMLAudioElement{ append: ddeAppend<ddeHTMLAudioElement>; }
} interface ddeHTMLBaseElement extends HTMLBaseElement{ append: ddeAppend<ddeHTMLBaseElement>; }
interface HTMLFieldSetElement{ interface ddeHTMLQuoteElement extends HTMLQuoteElement{ append: ddeAppend<ddeHTMLQuoteElement>; }
/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */ interface ddeHTMLBodyElement extends HTMLBodyElement{ append: ddeAppend<ddeHTMLBodyElement>; }
append: ddeAppend<HTMLFieldSetElement>; interface ddeHTMLBRElement extends HTMLBRElement{ append: ddeAppend<ddeHTMLBRElement>; }
} interface ddeHTMLButtonElement extends HTMLButtonElement{ append: ddeAppend<ddeHTMLButtonElement>; }
interface HTMLFormElement{ interface ddeHTMLCanvasElement extends HTMLCanvasElement{ append: ddeAppend<ddeHTMLCanvasElement>; }
/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */ interface ddeHTMLTableCaptionElement extends HTMLTableCaptionElement{ append: ddeAppend<ddeHTMLTableCaptionElement>; }
append: ddeAppend<HTMLFormElement>; interface ddeHTMLTableColElement extends HTMLTableColElement{ append: ddeAppend<ddeHTMLTableColElement>; }
} interface ddeHTMLTableColElement extends HTMLTableColElement{ append: ddeAppend<ddeHTMLTableColElement>; }
interface HTMLHeadingElement{ interface ddeHTMLDataElement extends HTMLDataElement{ append: ddeAppend<ddeHTMLDataElement>; }
/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */ interface ddeHTMLDataListElement extends HTMLDataListElement{ append: ddeAppend<ddeHTMLDataListElement>; }
append: ddeAppend<HTMLHeadingElement>; interface ddeHTMLModElement extends HTMLModElement{ append: ddeAppend<ddeHTMLModElement>; }
} interface ddeHTMLDetailsElement extends HTMLDetailsElement{ append: ddeAppend<ddeHTMLDetailsElement>; }
interface HTMLHeadElement{ interface ddeHTMLDialogElement extends HTMLDialogElement{ append: ddeAppend<ddeHTMLDialogElement>; }
/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */ interface ddeHTMLDivElement extends HTMLDivElement{ append: ddeAppend<ddeHTMLDivElement>; }
append: ddeAppend<HTMLHeadElement>; interface ddeHTMLDListElement extends HTMLDListElement{ append: ddeAppend<ddeHTMLDListElement>; }
} interface ddeHTMLEmbedElement extends HTMLEmbedElement{ append: ddeAppend<ddeHTMLEmbedElement>; }
interface HTMLHRElement{ interface ddeHTMLFieldSetElement extends HTMLFieldSetElement{ append: ddeAppend<ddeHTMLFieldSetElement>; }
/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */ interface ddeHTMLFormElement extends HTMLFormElement{ append: ddeAppend<ddeHTMLFormElement>; }
append: ddeAppend<HTMLHRElement>; interface ddeHTMLHeadingElement extends HTMLHeadingElement{ append: ddeAppend<ddeHTMLHeadingElement>; }
} interface ddeHTMLHeadElement extends HTMLHeadElement{ append: ddeAppend<ddeHTMLHeadElement>; }
interface HTMLHtmlElement{ interface ddeHTMLHRElement extends HTMLHRElement{ append: ddeAppend<ddeHTMLHRElement>; }
/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */ interface ddeHTMLHtmlElement extends HTMLHtmlElement{ append: ddeAppend<ddeHTMLHtmlElement>; }
append: ddeAppend<HTMLHtmlElement>; interface ddeHTMLIFrameElement extends HTMLIFrameElement{ append: ddeAppend<ddeHTMLIFrameElement>; }
} interface ddeHTMLImageElement extends HTMLImageElement{ append: ddeAppend<ddeHTMLImageElement>; }
interface HTMLIFrameElement{ interface ddeHTMLInputElement extends HTMLInputElement{ append: ddeAppend<ddeHTMLInputElement>; }
/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */ interface ddeHTMLLabelElement extends HTMLLabelElement{ append: ddeAppend<ddeHTMLLabelElement>; }
append: ddeAppend<HTMLIFrameElement>; interface ddeHTMLLegendElement extends HTMLLegendElement{ append: ddeAppend<ddeHTMLLegendElement>; }
} interface ddeHTMLLIElement extends HTMLLIElement{ append: ddeAppend<ddeHTMLLIElement>; }
interface HTMLImageElement{ interface ddeHTMLLinkElement extends HTMLLinkElement{ append: ddeAppend<ddeHTMLLinkElement>; }
/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */ interface ddeHTMLMapElement extends HTMLMapElement{ append: ddeAppend<ddeHTMLMapElement>; }
append: ddeAppend<HTMLImageElement>; interface ddeHTMLMenuElement extends HTMLMenuElement{ append: ddeAppend<ddeHTMLMenuElement>; }
} interface ddeHTMLMetaElement extends HTMLMetaElement{ append: ddeAppend<ddeHTMLMetaElement>; }
interface HTMLInputElement{ interface ddeHTMLMeterElement extends HTMLMeterElement{ append: ddeAppend<ddeHTMLMeterElement>; }
/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */ interface ddeHTMLObjectElement extends HTMLObjectElement{ append: ddeAppend<ddeHTMLObjectElement>; }
append: ddeAppend<HTMLInputElement>; interface ddeHTMLOListElement extends HTMLOListElement{ append: ddeAppend<ddeHTMLOListElement>; }
} interface ddeHTMLOptGroupElement extends HTMLOptGroupElement{ append: ddeAppend<ddeHTMLOptGroupElement>; }
interface HTMLLabelElement{ interface ddeHTMLOptionElement extends HTMLOptionElement{ append: ddeAppend<ddeHTMLOptionElement>; }
/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */ interface ddeHTMLOutputElement extends HTMLOutputElement{ append: ddeAppend<ddeHTMLOutputElement>; }
append: ddeAppend<HTMLLabelElement>; interface ddeHTMLParagraphElement extends HTMLParagraphElement{ append: ddeAppend<ddeHTMLParagraphElement>; }
} interface ddeHTMLPictureElement extends HTMLPictureElement{ append: ddeAppend<ddeHTMLPictureElement>; }
interface HTMLLegendElement{ interface ddeHTMLPreElement extends HTMLPreElement{ append: ddeAppend<ddeHTMLPreElement>; }
/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */ interface ddeHTMLProgressElement extends HTMLProgressElement{ append: ddeAppend<ddeHTMLProgressElement>; }
append: ddeAppend<HTMLLegendElement>; interface ddeHTMLScriptElement extends HTMLScriptElement{ append: ddeAppend<ddeHTMLScriptElement>; }
} interface ddeHTMLSelectElement extends HTMLSelectElement{ append: ddeAppend<ddeHTMLSelectElement>; }
interface HTMLLIElement{ interface ddeHTMLSlotElement extends HTMLSlotElement{ append: ddeAppend<ddeHTMLSlotElement>; }
/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */ interface ddeHTMLSourceElement extends HTMLSourceElement{ append: ddeAppend<ddeHTMLSourceElement>; }
append: ddeAppend<HTMLLIElement>; interface ddeHTMLSpanElement extends HTMLSpanElement{ append: ddeAppend<ddeHTMLSpanElement>; }
} interface ddeHTMLStyleElement extends HTMLStyleElement{ append: ddeAppend<ddeHTMLStyleElement>; }
interface HTMLLinkElement{ interface ddeHTMLTableElement extends HTMLTableElement{ append: ddeAppend<ddeHTMLTableElement>; }
/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */ interface ddeHTMLTableSectionElement extends HTMLTableSectionElement{ append: ddeAppend<ddeHTMLTableSectionElement>; }
append: ddeAppend<HTMLLinkElement>; interface ddeHTMLTableCellElement extends HTMLTableCellElement{ append: ddeAppend<ddeHTMLTableCellElement>; }
} interface ddeHTMLTemplateElement extends HTMLTemplateElement{ append: ddeAppend<ddeHTMLTemplateElement>; }
interface HTMLMapElement{ interface ddeHTMLTextAreaElement extends HTMLTextAreaElement{ append: ddeAppend<ddeHTMLTextAreaElement>; }
/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */ interface ddeHTMLTableCellElement extends HTMLTableCellElement{ append: ddeAppend<ddeHTMLTableCellElement>; }
append: ddeAppend<HTMLMapElement>; interface ddeHTMLTimeElement extends HTMLTimeElement{ append: ddeAppend<ddeHTMLTimeElement>; }
} interface ddeHTMLTitleElement extends HTMLTitleElement{ append: ddeAppend<ddeHTMLTitleElement>; }
interface HTMLMenuElement{ interface ddeHTMLTableRowElement extends HTMLTableRowElement{ append: ddeAppend<ddeHTMLTableRowElement>; }
/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */ interface ddeHTMLTrackElement extends HTMLTrackElement{ append: ddeAppend<ddeHTMLTrackElement>; }
append: ddeAppend<HTMLMenuElement>; interface ddeHTMLUListElement extends HTMLUListElement{ append: ddeAppend<ddeHTMLUListElement>; }
} interface ddeHTMLVideoElement extends HTMLVideoElement{ append: ddeAppend<ddeHTMLVideoElement>; }
interface HTMLMetaElement{
/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */ interface ddeSVGElementTagNameMap {
append: ddeAppend<HTMLMetaElement>; "a": ddeSVGAElement;
} "animate": ddeSVGAnimateElement;
interface HTMLMeterElement{ "animateMotion": ddeSVGAnimateMotionElement;
/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */ "animateTransform": ddeSVGAnimateTransformElement;
append: ddeAppend<HTMLMeterElement>; "circle": ddeSVGCircleElement;
} "clipPath": ddeSVGClipPathElement;
interface HTMLObjectElement{ "defs": ddeSVGDefsElement;
/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */ "desc": ddeSVGDescElement;
append: ddeAppend<HTMLObjectElement>; "ellipse": ddeSVGEllipseElement;
} "feBlend": ddeSVGFEBlendElement;
interface HTMLOListElement{ "feColorMatrix": ddeSVGFEColorMatrixElement;
/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */ "feComponentTransfer": ddeSVGFEComponentTransferElement;
append: ddeAppend<HTMLOListElement>; "feComposite": ddeSVGFECompositeElement;
} "feConvolveMatrix": ddeSVGFEConvolveMatrixElement;
interface HTMLOptGroupElement{ "feDiffuseLighting": ddeSVGFEDiffuseLightingElement;
/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */ "feDisplacementMap": ddeSVGFEDisplacementMapElement;
append: ddeAppend<HTMLOptGroupElement>; "feDistantLight": ddeSVGFEDistantLightElement;
} "feDropShadow": ddeSVGFEDropShadowElement;
interface HTMLOptionElement{ "feFlood": ddeSVGFEFloodElement;
/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */ "feFuncA": ddeSVGFEFuncAElement;
append: ddeAppend<HTMLOptionElement>; "feFuncB": ddeSVGFEFuncBElement;
} "feFuncG": ddeSVGFEFuncGElement;
interface HTMLOutputElement{ "feFuncR": ddeSVGFEFuncRElement;
/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */ "feGaussianBlur": ddeSVGFEGaussianBlurElement;
append: ddeAppend<HTMLOutputElement>; "feImage": ddeSVGFEImageElement;
} "feMerge": ddeSVGFEMergeElement;
interface HTMLParagraphElement{ "feMergeNode": ddeSVGFEMergeNodeElement;
/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */ "feMorphology": ddeSVGFEMorphologyElement;
append: ddeAppend<HTMLParagraphElement>; "feOffset": ddeSVGFEOffsetElement;
} "fePointLight": ddeSVGFEPointLightElement;
interface HTMLPictureElement{ "feSpecularLighting": ddeSVGFESpecularLightingElement;
/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */ "feSpotLight": ddeSVGFESpotLightElement;
append: ddeAppend<HTMLPictureElement>; "feTile": ddeSVGFETileElement;
} "feTurbulence": ddeSVGFETurbulenceElement;
interface HTMLPreElement{ "filter": ddeSVGFilterElement;
/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */ "foreignObject": ddeSVGForeignObjectElement;
append: ddeAppend<HTMLPreElement>; "g": ddeSVGGElement;
} "image": ddeSVGImageElement;
interface HTMLProgressElement{ "line": ddeSVGLineElement;
/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */ "linearGradient": ddeSVGLinearGradientElement;
append: ddeAppend<HTMLProgressElement>; "marker": ddeSVGMarkerElement;
} "mask": ddeSVGMaskElement;
interface HTMLScriptElement{ "metadata": ddeSVGMetadataElement;
/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */ "mpath": ddeSVGMPathElement;
append: ddeAppend<HTMLScriptElement>; "path": ddeSVGPathElement;
} "pattern": ddeSVGPatternElement;
interface HTMLSelectElement{ "polygon": ddeSVGPolygonElement;
/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */ "polyline": ddeSVGPolylineElement;
append: ddeAppend<HTMLSelectElement>; "radialGradient": ddeSVGRadialGradientElement;
} "rect": ddeSVGRectElement;
interface HTMLSlotElement{ "script": ddeSVGScriptElement;
/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */ "set": ddeSVGSetElement;
append: ddeAppend<HTMLSlotElement>; "stop": ddeSVGStopElement;
} "style": ddeSVGStyleElement;
interface HTMLSourceElement{ "svg": ddeSVGSVGElement;
/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */ "switch": ddeSVGSwitchElement;
append: ddeAppend<HTMLSourceElement>; "symbol": ddeSVGSymbolElement;
} "text": ddeSVGTextElement;
interface HTMLSpanElement{ "textPath": ddeSVGTextPathElement;
/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */ "title": ddeSVGTitleElement;
append: ddeAppend<HTMLSpanElement>; "tspan": ddeSVGTSpanElement;
} "use": ddeSVGUseElement;
interface HTMLStyleElement{ "view": ddeSVGViewElement;
/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */ }
append: ddeAppend<HTMLStyleElement>; interface ddeSVGAElement extends SVGAElement{ append: ddeAppend<ddeSVGAElement>; }
} interface ddeSVGAnimateElement extends SVGAnimateElement{ append: ddeAppend<ddeSVGAnimateElement>; }
interface HTMLTableElement{ interface ddeSVGAnimateMotionElement extends SVGAnimateMotionElement{ append: ddeAppend<ddeSVGAnimateMotionElement>; }
/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */ interface ddeSVGAnimateTransformElement extends SVGAnimateTransformElement{ append: ddeAppend<ddeSVGAnimateTransformElement>; }
append: ddeAppend<HTMLTableElement>; interface ddeSVGCircleElement extends SVGCircleElement{ append: ddeAppend<ddeSVGCircleElement>; }
} interface ddeSVGClipPathElement extends SVGClipPathElement{ append: ddeAppend<ddeSVGClipPathElement>; }
interface HTMLTableSectionElement{ interface ddeSVGDefsElement extends SVGDefsElement{ append: ddeAppend<ddeSVGDefsElement>; }
/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */ interface ddeSVGDescElement extends SVGDescElement{ append: ddeAppend<ddeSVGDescElement>; }
append: ddeAppend<HTMLTableSectionElement>; interface ddeSVGEllipseElement extends SVGEllipseElement{ append: ddeAppend<ddeSVGEllipseElement>; }
} interface ddeSVGFEBlendElement extends SVGFEBlendElement{ append: ddeAppend<ddeSVGFEBlendElement>; }
interface HTMLTableCellElement{ interface ddeSVGFEColorMatrixElement extends SVGFEColorMatrixElement{ append: ddeAppend<ddeSVGFEColorMatrixElement>; }
/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */ interface ddeSVGFEComponentTransferElement extends SVGFEComponentTransferElement{ append: ddeAppend<ddeSVGFEComponentTransferElement>; }
append: ddeAppend<HTMLTableCellElement>; interface ddeSVGFECompositeElement extends SVGFECompositeElement{ append: ddeAppend<ddeSVGFECompositeElement>; }
} interface ddeSVGFEConvolveMatrixElement extends SVGFEConvolveMatrixElement{ append: ddeAppend<ddeSVGFEConvolveMatrixElement>; }
interface HTMLTemplateElement{ interface ddeSVGFEDiffuseLightingElement extends SVGFEDiffuseLightingElement{ append: ddeAppend<ddeSVGFEDiffuseLightingElement>; }
/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */ interface ddeSVGFEDisplacementMapElement extends SVGFEDisplacementMapElement{ append: ddeAppend<ddeSVGFEDisplacementMapElement>; }
append: ddeAppend<HTMLTemplateElement>; interface ddeSVGFEDistantLightElement extends SVGFEDistantLightElement{ append: ddeAppend<ddeSVGFEDistantLightElement>; }
} interface ddeSVGFEDropShadowElement extends SVGFEDropShadowElement{ append: ddeAppend<ddeSVGFEDropShadowElement>; }
interface HTMLTextAreaElement{ interface ddeSVGFEFloodElement extends SVGFEFloodElement{ append: ddeAppend<ddeSVGFEFloodElement>; }
/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */ interface ddeSVGFEFuncAElement extends SVGFEFuncAElement{ append: ddeAppend<ddeSVGFEFuncAElement>; }
append: ddeAppend<HTMLTextAreaElement>; interface ddeSVGFEFuncBElement extends SVGFEFuncBElement{ append: ddeAppend<ddeSVGFEFuncBElement>; }
} interface ddeSVGFEFuncGElement extends SVGFEFuncGElement{ append: ddeAppend<ddeSVGFEFuncGElement>; }
interface HTMLTableCellElement{ interface ddeSVGFEFuncRElement extends SVGFEFuncRElement{ append: ddeAppend<ddeSVGFEFuncRElement>; }
/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */ interface ddeSVGFEGaussianBlurElement extends SVGFEGaussianBlurElement{ append: ddeAppend<ddeSVGFEGaussianBlurElement>; }
append: ddeAppend<HTMLTableCellElement>; interface ddeSVGFEImageElement extends SVGFEImageElement{ append: ddeAppend<ddeSVGFEImageElement>; }
} interface ddeSVGFEMergeElement extends SVGFEMergeElement{ append: ddeAppend<ddeSVGFEMergeElement>; }
interface HTMLTimeElement{ interface ddeSVGFEMergeNodeElement extends SVGFEMergeNodeElement{ append: ddeAppend<ddeSVGFEMergeNodeElement>; }
/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */ interface ddeSVGFEMorphologyElement extends SVGFEMorphologyElement{ append: ddeAppend<ddeSVGFEMorphologyElement>; }
append: ddeAppend<HTMLTimeElement>; interface ddeSVGFEOffsetElement extends SVGFEOffsetElement{ append: ddeAppend<ddeSVGFEOffsetElement>; }
} interface ddeSVGFEPointLightElement extends SVGFEPointLightElement{ append: ddeAppend<ddeSVGFEPointLightElement>; }
interface HTMLTitleElement{ interface ddeSVGFESpecularLightingElement extends SVGFESpecularLightingElement{ append: ddeAppend<ddeSVGFESpecularLightingElement>; }
/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */ interface ddeSVGFESpotLightElement extends SVGFESpotLightElement{ append: ddeAppend<ddeSVGFESpotLightElement>; }
append: ddeAppend<HTMLTitleElement>; interface ddeSVGFETileElement extends SVGFETileElement{ append: ddeAppend<ddeSVGFETileElement>; }
} interface ddeSVGFETurbulenceElement extends SVGFETurbulenceElement{ append: ddeAppend<ddeSVGFETurbulenceElement>; }
interface HTMLTableRowElement{ interface ddeSVGFilterElement extends SVGFilterElement{ append: ddeAppend<ddeSVGFilterElement>; }
/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */ interface ddeSVGForeignObjectElement extends SVGForeignObjectElement{ append: ddeAppend<ddeSVGForeignObjectElement>; }
append: ddeAppend<HTMLTableRowElement>; interface ddeSVGGElement extends SVGGElement{ append: ddeAppend<ddeSVGGElement>; }
} interface ddeSVGImageElement extends SVGImageElement{ append: ddeAppend<ddeSVGImageElement>; }
interface HTMLTrackElement{ interface ddeSVGLineElement extends SVGLineElement{ append: ddeAppend<ddeSVGLineElement>; }
/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */ interface ddeSVGLinearGradientElement extends SVGLinearGradientElement{ append: ddeAppend<ddeSVGLinearGradientElement>; }
append: ddeAppend<HTMLTrackElement>; interface ddeSVGMarkerElement extends SVGMarkerElement{ append: ddeAppend<ddeSVGMarkerElement>; }
} interface ddeSVGMaskElement extends SVGMaskElement{ append: ddeAppend<ddeSVGMaskElement>; }
interface HTMLUListElement{ interface ddeSVGMetadataElement extends SVGMetadataElement{ append: ddeAppend<ddeSVGMetadataElement>; }
/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */ interface ddeSVGMPathElement extends SVGMPathElement{ append: ddeAppend<ddeSVGMPathElement>; }
append: ddeAppend<HTMLUListElement>; interface ddeSVGPathElement extends SVGPathElement{ append: ddeAppend<ddeSVGPathElement>; }
} interface ddeSVGPatternElement extends SVGPatternElement{ append: ddeAppend<ddeSVGPatternElement>; }
interface HTMLVideoElement{ interface ddeSVGPolygonElement extends SVGPolygonElement{ append: ddeAppend<ddeSVGPolygonElement>; }
/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */ interface ddeSVGPolylineElement extends SVGPolylineElement{ append: ddeAppend<ddeSVGPolylineElement>; }
append: ddeAppend<HTMLVideoElement>; interface ddeSVGRadialGradientElement extends SVGRadialGradientElement{ append: ddeAppend<ddeSVGRadialGradientElement>; }
} interface ddeSVGRectElement extends SVGRectElement{ append: ddeAppend<ddeSVGRectElement>; }
interface DocumentFragment{ interface ddeSVGScriptElement extends SVGScriptElement{ append: ddeAppend<ddeSVGScriptElement>; }
/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */ interface ddeSVGSetElement extends SVGSetElement{ append: ddeAppend<ddeSVGSetElement>; }
append: ddeAppend<DocumentFragment>; interface ddeSVGStopElement extends SVGStopElement{ append: ddeAppend<ddeSVGStopElement>; }
} interface ddeSVGStyleElement extends SVGStyleElement{ append: ddeAppend<ddeSVGStyleElement>; }
interface SVGElement{ interface ddeSVGSVGElement extends SVGSVGElement{ append: ddeAppend<ddeSVGSVGElement>; }
/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */ interface ddeSVGSwitchElement extends SVGSwitchElement{ append: ddeAppend<ddeSVGSwitchElement>; }
append: ddeAppend<SVGElement>; interface ddeSVGSymbolElement extends SVGSymbolElement{ append: ddeAppend<ddeSVGSymbolElement>; }
} interface ddeSVGTextElement extends SVGTextElement{ append: ddeAppend<ddeSVGTextElement>; }
interface ddeSVGTextPathElement extends SVGTextPathElement{ append: ddeAppend<ddeSVGTextPathElement>; }
interface ddeSVGTitleElement extends SVGTitleElement{ append: ddeAppend<ddeSVGTitleElement>; }
interface ddeSVGTSpanElement extends SVGTSpanElement{ append: ddeAppend<ddeSVGTSpanElement>; }
interface ddeSVGUseElement extends SVGUseElement{ append: ddeAppend<ddeSVGUseElement>; }
interface ddeSVGViewElement extends SVGViewElement{ append: ddeAppend<ddeSVGViewElement>; }
} }
export type Signal<V, A>= (set?: V)=> V & A; export type Signal<V, A>= (set?: V)=> V & A;
type Action<V>= (this: { value: V }, ...a: any[])=> typeof S._ | void; type Action<V>= (this: { value: V }, ...a: any[])=> typeof S._ | void;

8
dist/esm-with-signals.js vendored
View File

File diff suppressed because one or more lines are too long

587
dist/esm.d.ts vendored
View File

@ -46,7 +46,7 @@ export function classListDeclarative<El extends SupportedElement>(element: El, c
export function assign<El extends SupportedElement>(element: El, ...attrs_array: Partial<ElementAttributes<El>>[]): El export function assign<El extends SupportedElement>(element: El, ...attrs_array: Partial<ElementAttributes<El>>[]): El
export function assignAttribute<El extends SupportedElement, ATT extends keyof ElementAttributes<El>>(element: El, attr: ATT, value: ElementAttributes<El>[ATT]): ElementAttributes<El>[ATT] export function assignAttribute<El extends SupportedElement, ATT extends keyof ElementAttributes<El>>(element: El, attr: ATT, value: ElementAttributes<El>[ATT]): ElementAttributes<El>[ATT]
type ExtendedHTMLElementTagNameMap= HTMLElementTagNameMap & CustomElementTagNameMap & ddePublicElementTagNameMap type ExtendedHTMLElementTagNameMap= ddeHTMLElementTagNameMap & CustomElementTagNameMap & ddePublicElementTagNameMap
export function el<TAG extends keyof ExtendedHTMLElementTagNameMap>( export function el<TAG extends keyof ExtendedHTMLElementTagNameMap>(
tag_name: TAG, tag_name: TAG,
attrs?: string | Partial<ElementAttributes<ExtendedHTMLElementTagNameMap[TAG]>>, attrs?: string | Partial<ElementAttributes<ExtendedHTMLElementTagNameMap[TAG]>>,
@ -54,7 +54,7 @@ export function el<TAG extends keyof ExtendedHTMLElementTagNameMap>(
): ExtendedHTMLElementTagNameMap[TAG] ): ExtendedHTMLElementTagNameMap[TAG]
export function el<T>( export function el<T>(
tag_name?: "<>", tag_name?: "<>",
): DocumentFragment ): ddeDocumentFragment
export function el< export function el<
A extends ddeComponentAttributes, A extends ddeComponentAttributes,
@ -68,22 +68,22 @@ export function el(
tag_name: string, tag_name: string,
attrs?: string | Record<string, any>, attrs?: string | Record<string, any>,
...addons: ddeElementAddon<HTMLElement>[] ...addons: ddeElementAddon<HTMLElement>[]
): HTMLElement ): ddeHTMLElement
export function elNS( export function elNS(
namespace: "http://www.w3.org/2000/svg" namespace: "http://www.w3.org/2000/svg"
): <TAG extends keyof SVGElementTagNameMap, KEYS extends keyof SVGElementTagNameMap[TAG] & { d: string }>( ): <TAG, EL extends ( TAG extends keyof ddeSVGElementTagNameMap ? ddeSVGElementTagNameMap[TAG] : ddeSVGElement ), KEYS extends keyof EL & { d: string }>(
tag_name: TAG, tag_name: TAG,
attrs?: string | Partial<{ [key in KEYS]: SVGElementTagNameMap[TAG][key] | string | number | boolean }>, attrs?: string | Partial<{ [key in KEYS]: EL[key] | string | number | boolean }>,
...addons: ddeElementAddon<SVGElementTagNameMap[TAG]>[] ...addons: ddeElementAddon<EL>[]
)=> SVGElementTagNameMap[TAG] )=> EL
export function elNS( export function elNS(
namespace: "http://www.w3.org/1998/Math/MathML" namespace: "http://www.w3.org/1998/Math/MathML"
): <TAG extends keyof MathMLElementTagNameMap, KEYS extends keyof MathMLElementTagNameMap[TAG] & { d: string }>( ): <TAG extends keyof MathMLElementTagNameMap, KEYS extends keyof MathMLElementTagNameMap[TAG] & { d: string }>(
tag_name: TAG, tag_name: TAG,
attrs?: string | Partial<{ [key in KEYS]: MathMLElementTagNameMap[TAG][key] | string | number | boolean }>, attrs?: string | Partial<{ [key in KEYS]: MathMLElementTagNameMap[TAG][key] | string | number | boolean }>,
...addons: ddeElementAddon<MathMLElementTagNameMap[TAG]>[] ...addons: ddeElementAddon<MathMLElementTagNameMap[TAG]>[]
)=> MathMLElementTagNameMap[TAG] )=> ddeMathMLElement
export function elNS( export function elNS(
namespace: string namespace: string
): ( ): (
@ -93,6 +93,7 @@ export function elNS(
)=> SupportedElement )=> SupportedElement
export function chainableAppend<EL extends SupportedElement>(el: EL): EL; export function chainableAppend<EL extends SupportedElement>(el: EL): EL;
export function simulateSlots<EL extends SupportedElement | DocumentFragment>(el: EL): EL
export function dispatchEvent(name: keyof DocumentEventMap | string, options?: EventInit): export function dispatchEvent(name: keyof DocumentEventMap | string, options?: EventInit):
(element: SupportedElement, data?: any)=> void; (element: SupportedElement, data?: any)=> void;
@ -166,302 +167,280 @@ export const scope: {
pop(): ReturnType<Array<Scope>["pop"]>, pop(): ReturnType<Array<Scope>["pop"]>,
}; };
/* /* TypeScript MEH // TODO for SVG */
* TODO TypeScript HACK (better way?)
* this doesnt works
* ```ts
* interface element<el> extends Node{
* prototype: el;
* append(...els: (SupportedElement | DocumentFragment | string | element<SupportedElement | DocumentFragment>)[]): el
* }
*
export function el<T>(
* tag_name?: "<>",
* ): element<DocumentFragment>
* ```
* …as its complains here
* ```
ts
*
const d= el("div");
*
const f= (a: HTMLDivElement)=> a;
* f(d);
//←
* document.head.append( //←
* el("script", { src: "https://flems.io/flems.html", type: "text/javascript", charset: "utf-8" }),
* );
* ```
* TODO for SVG
* */
type ddeAppend<el>= (...nodes: (Node | string)[])=> el; type ddeAppend<el>= (...nodes: (Node | string)[])=> el;
declare global{ declare global{
interface HTMLAnchorElement{ interface ddeDocumentFragment extends DocumentFragment{ append: ddeAppend<ddeDocumentFragment>; }
/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */ interface ddeHTMLElement extends HTMLElement{ append: ddeAppend<ddeHTMLElement>; }
append: ddeAppend<HTMLAnchorElement>; interface ddeSVGElement extends SVGElement{ append: ddeAppend<ddeSVGElement>; }
} interface ddeMathMLElement extends MathMLElement{ append: ddeAppend<ddeMathMLElement>; }
interface HTMLElement{
/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */ interface ddeHTMLElementTagNameMap {
append: ddeAppend<HTMLElement>; "a": ddeHTMLAnchorElement;
} "area": ddeHTMLAreaElement;
interface HTMLAreaElement{ "audio": ddeHTMLAudioElement;
/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */ "base": ddeHTMLBaseElement;
append: ddeAppend<HTMLAreaElement>; "blockquote": ddeHTMLQuoteElement;
} "body": ddeHTMLBodyElement;
interface HTMLAudioElement{ "br": ddeHTMLBRElement;
/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */ "button": ddeHTMLButtonElement;
append: ddeAppend<HTMLAudioElement>; "canvas": ddeHTMLCanvasElement;
} "caption": ddeHTMLTableCaptionElement;
interface HTMLBaseElement{ "col": ddeHTMLTableColElement;
/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */ "colgroup": ddeHTMLTableColElement;
append: ddeAppend<HTMLBaseElement>; "data": ddeHTMLDataElement;
} "datalist": ddeHTMLDataListElement;
interface HTMLQuoteElement{ "del": ddeHTMLModElement;
/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */ "details": ddeHTMLDetailsElement;
append: ddeAppend<HTMLQuoteElement>; "dialog": ddeHTMLDialogElement;
} "div": ddeHTMLDivElement;
interface HTMLBodyElement{ "dl": ddeHTMLDListElement;
/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */ "embed": ddeHTMLEmbedElement;
append: ddeAppend<HTMLBodyElement>; "fieldset": ddeHTMLFieldSetElement;
} "form": ddeHTMLFormElement;
interface HTMLBRElement{ "h1": ddeHTMLHeadingElement;
/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */ "h2": ddeHTMLHeadingElement;
append: ddeAppend<HTMLBRElement>; "h3": ddeHTMLHeadingElement;
} "h4": ddeHTMLHeadingElement;
interface HTMLButtonElement{ "h5": ddeHTMLHeadingElement;
/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */ "h6": ddeHTMLHeadingElement;
append: ddeAppend<HTMLButtonElement>; "head": ddeHTMLHeadElement;
} "hr": ddeHTMLHRElement;
interface HTMLCanvasElement{ "html": ddeHTMLHtmlElement;
/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */ "iframe": ddeHTMLIFrameElement;
append: ddeAppend<HTMLCanvasElement>; "img": ddeHTMLImageElement;
} "input": ddeHTMLInputElement;
interface HTMLTableCaptionElement{ "ins": ddeHTMLModElement;
/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */ "label": ddeHTMLLabelElement;
append: ddeAppend<HTMLTableCaptionElement>; "legend": ddeHTMLLegendElement;
} "li": ddeHTMLLIElement;
interface HTMLTableColElement{ "link": ddeHTMLLinkElement;
/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */ "map": ddeHTMLMapElement;
append: ddeAppend<HTMLTableColElement>; "menu": ddeHTMLMenuElement;
} "meta": ddeHTMLMetaElement;
interface HTMLTableColElement{ "meter": ddeHTMLMeterElement;
/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */ "object": ddeHTMLObjectElement;
append: ddeAppend<HTMLTableColElement>; "ol": ddeHTMLOListElement;
} "optgroup": ddeHTMLOptGroupElement;
interface HTMLDataElement{ "option": ddeHTMLOptionElement;
/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */ "output": ddeHTMLOutputElement;
append: ddeAppend<HTMLDataElement>; "p": ddeHTMLParagraphElement;
} "picture": ddeHTMLPictureElement;
interface HTMLDataListElement{ "pre": ddeHTMLPreElement;
/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */ "progress": ddeHTMLProgressElement;
append: ddeAppend<HTMLDataListElement>; "q": ddeHTMLQuoteElement;
} "script": ddeHTMLScriptElement;
interface HTMLModElement{ "select": ddeHTMLSelectElement;
/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */ "slot": ddeHTMLSlotElement;
append: ddeAppend<HTMLModElement>; "source": ddeHTMLSourceElement;
} "span": ddeHTMLSpanElement;
interface HTMLDetailsElement{ "style": ddeHTMLStyleElement;
/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */ "table": ddeHTMLTableElement;
append: ddeAppend<HTMLDetailsElement>; "tbody": ddeHTMLTableSectionElement;
} "td": ddeHTMLTableCellElement;
interface HTMLDialogElement{ "template": ddeHTMLTemplateElement;
/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */ "textarea": ddeHTMLTextAreaElement;
append: ddeAppend<HTMLDialogElement>; "tfoot": ddeHTMLTableSectionElement;
} "th": ddeHTMLTableCellElement;
interface HTMLDivElement{ "thead": ddeHTMLTableSectionElement;
/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */ "time": ddeHTMLTimeElement;
append: ddeAppend<HTMLDivElement>; "title": ddeHTMLTitleElement;
} "tr": ddeHTMLTableRowElement;
interface HTMLDListElement{ "track": ddeHTMLTrackElement;
/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */ "ul": ddeHTMLUListElement;
append: ddeAppend<HTMLDListElement>; "video": ddeHTMLVideoElement;
} }
interface HTMLEmbedElement{ interface ddeHTMLAnchorElement extends HTMLAnchorElement{ append: ddeAppend<ddeHTMLAnchorElement>; }
/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */ interface ddeHTMLAreaElement extends HTMLAreaElement{ append: ddeAppend<ddeHTMLAreaElement>; }
append: ddeAppend<HTMLEmbedElement>; interface ddeHTMLAudioElement extends HTMLAudioElement{ append: ddeAppend<ddeHTMLAudioElement>; }
} interface ddeHTMLBaseElement extends HTMLBaseElement{ append: ddeAppend<ddeHTMLBaseElement>; }
interface HTMLFieldSetElement{ interface ddeHTMLQuoteElement extends HTMLQuoteElement{ append: ddeAppend<ddeHTMLQuoteElement>; }
/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */ interface ddeHTMLBodyElement extends HTMLBodyElement{ append: ddeAppend<ddeHTMLBodyElement>; }
append: ddeAppend<HTMLFieldSetElement>; interface ddeHTMLBRElement extends HTMLBRElement{ append: ddeAppend<ddeHTMLBRElement>; }
} interface ddeHTMLButtonElement extends HTMLButtonElement{ append: ddeAppend<ddeHTMLButtonElement>; }
interface HTMLFormElement{ interface ddeHTMLCanvasElement extends HTMLCanvasElement{ append: ddeAppend<ddeHTMLCanvasElement>; }
/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */ interface ddeHTMLTableCaptionElement extends HTMLTableCaptionElement{ append: ddeAppend<ddeHTMLTableCaptionElement>; }
append: ddeAppend<HTMLFormElement>; interface ddeHTMLTableColElement extends HTMLTableColElement{ append: ddeAppend<ddeHTMLTableColElement>; }
} interface ddeHTMLTableColElement extends HTMLTableColElement{ append: ddeAppend<ddeHTMLTableColElement>; }
interface HTMLHeadingElement{ interface ddeHTMLDataElement extends HTMLDataElement{ append: ddeAppend<ddeHTMLDataElement>; }
/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */ interface ddeHTMLDataListElement extends HTMLDataListElement{ append: ddeAppend<ddeHTMLDataListElement>; }
append: ddeAppend<HTMLHeadingElement>; interface ddeHTMLModElement extends HTMLModElement{ append: ddeAppend<ddeHTMLModElement>; }
} interface ddeHTMLDetailsElement extends HTMLDetailsElement{ append: ddeAppend<ddeHTMLDetailsElement>; }
interface HTMLHeadElement{ interface ddeHTMLDialogElement extends HTMLDialogElement{ append: ddeAppend<ddeHTMLDialogElement>; }
/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */ interface ddeHTMLDivElement extends HTMLDivElement{ append: ddeAppend<ddeHTMLDivElement>; }
append: ddeAppend<HTMLHeadElement>; interface ddeHTMLDListElement extends HTMLDListElement{ append: ddeAppend<ddeHTMLDListElement>; }
} interface ddeHTMLEmbedElement extends HTMLEmbedElement{ append: ddeAppend<ddeHTMLEmbedElement>; }
interface HTMLHRElement{ interface ddeHTMLFieldSetElement extends HTMLFieldSetElement{ append: ddeAppend<ddeHTMLFieldSetElement>; }
/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */ interface ddeHTMLFormElement extends HTMLFormElement{ append: ddeAppend<ddeHTMLFormElement>; }
append: ddeAppend<HTMLHRElement>; interface ddeHTMLHeadingElement extends HTMLHeadingElement{ append: ddeAppend<ddeHTMLHeadingElement>; }
} interface ddeHTMLHeadElement extends HTMLHeadElement{ append: ddeAppend<ddeHTMLHeadElement>; }
interface HTMLHtmlElement{ interface ddeHTMLHRElement extends HTMLHRElement{ append: ddeAppend<ddeHTMLHRElement>; }
/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */ interface ddeHTMLHtmlElement extends HTMLHtmlElement{ append: ddeAppend<ddeHTMLHtmlElement>; }
append: ddeAppend<HTMLHtmlElement>; interface ddeHTMLIFrameElement extends HTMLIFrameElement{ append: ddeAppend<ddeHTMLIFrameElement>; }
} interface ddeHTMLImageElement extends HTMLImageElement{ append: ddeAppend<ddeHTMLImageElement>; }
interface HTMLIFrameElement{ interface ddeHTMLInputElement extends HTMLInputElement{ append: ddeAppend<ddeHTMLInputElement>; }
/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */ interface ddeHTMLLabelElement extends HTMLLabelElement{ append: ddeAppend<ddeHTMLLabelElement>; }
append: ddeAppend<HTMLIFrameElement>; interface ddeHTMLLegendElement extends HTMLLegendElement{ append: ddeAppend<ddeHTMLLegendElement>; }
} interface ddeHTMLLIElement extends HTMLLIElement{ append: ddeAppend<ddeHTMLLIElement>; }
interface HTMLImageElement{ interface ddeHTMLLinkElement extends HTMLLinkElement{ append: ddeAppend<ddeHTMLLinkElement>; }
/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */ interface ddeHTMLMapElement extends HTMLMapElement{ append: ddeAppend<ddeHTMLMapElement>; }
append: ddeAppend<HTMLImageElement>; interface ddeHTMLMenuElement extends HTMLMenuElement{ append: ddeAppend<ddeHTMLMenuElement>; }
} interface ddeHTMLMetaElement extends HTMLMetaElement{ append: ddeAppend<ddeHTMLMetaElement>; }
interface HTMLInputElement{ interface ddeHTMLMeterElement extends HTMLMeterElement{ append: ddeAppend<ddeHTMLMeterElement>; }
/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */ interface ddeHTMLObjectElement extends HTMLObjectElement{ append: ddeAppend<ddeHTMLObjectElement>; }
append: ddeAppend<HTMLInputElement>; interface ddeHTMLOListElement extends HTMLOListElement{ append: ddeAppend<ddeHTMLOListElement>; }
} interface ddeHTMLOptGroupElement extends HTMLOptGroupElement{ append: ddeAppend<ddeHTMLOptGroupElement>; }
interface HTMLLabelElement{ interface ddeHTMLOptionElement extends HTMLOptionElement{ append: ddeAppend<ddeHTMLOptionElement>; }
/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */ interface ddeHTMLOutputElement extends HTMLOutputElement{ append: ddeAppend<ddeHTMLOutputElement>; }
append: ddeAppend<HTMLLabelElement>; interface ddeHTMLParagraphElement extends HTMLParagraphElement{ append: ddeAppend<ddeHTMLParagraphElement>; }
} interface ddeHTMLPictureElement extends HTMLPictureElement{ append: ddeAppend<ddeHTMLPictureElement>; }
interface HTMLLegendElement{ interface ddeHTMLPreElement extends HTMLPreElement{ append: ddeAppend<ddeHTMLPreElement>; }
/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */ interface ddeHTMLProgressElement extends HTMLProgressElement{ append: ddeAppend<ddeHTMLProgressElement>; }
append: ddeAppend<HTMLLegendElement>; interface ddeHTMLScriptElement extends HTMLScriptElement{ append: ddeAppend<ddeHTMLScriptElement>; }
} interface ddeHTMLSelectElement extends HTMLSelectElement{ append: ddeAppend<ddeHTMLSelectElement>; }
interface HTMLLIElement{ interface ddeHTMLSlotElement extends HTMLSlotElement{ append: ddeAppend<ddeHTMLSlotElement>; }
/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */ interface ddeHTMLSourceElement extends HTMLSourceElement{ append: ddeAppend<ddeHTMLSourceElement>; }
append: ddeAppend<HTMLLIElement>; interface ddeHTMLSpanElement extends HTMLSpanElement{ append: ddeAppend<ddeHTMLSpanElement>; }
} interface ddeHTMLStyleElement extends HTMLStyleElement{ append: ddeAppend<ddeHTMLStyleElement>; }
interface HTMLLinkElement{ interface ddeHTMLTableElement extends HTMLTableElement{ append: ddeAppend<ddeHTMLTableElement>; }
/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */ interface ddeHTMLTableSectionElement extends HTMLTableSectionElement{ append: ddeAppend<ddeHTMLTableSectionElement>; }
append: ddeAppend<HTMLLinkElement>; interface ddeHTMLTableCellElement extends HTMLTableCellElement{ append: ddeAppend<ddeHTMLTableCellElement>; }
} interface ddeHTMLTemplateElement extends HTMLTemplateElement{ append: ddeAppend<ddeHTMLTemplateElement>; }
interface HTMLMapElement{ interface ddeHTMLTextAreaElement extends HTMLTextAreaElement{ append: ddeAppend<ddeHTMLTextAreaElement>; }
/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */ interface ddeHTMLTableCellElement extends HTMLTableCellElement{ append: ddeAppend<ddeHTMLTableCellElement>; }
append: ddeAppend<HTMLMapElement>; interface ddeHTMLTimeElement extends HTMLTimeElement{ append: ddeAppend<ddeHTMLTimeElement>; }
} interface ddeHTMLTitleElement extends HTMLTitleElement{ append: ddeAppend<ddeHTMLTitleElement>; }
interface HTMLMenuElement{ interface ddeHTMLTableRowElement extends HTMLTableRowElement{ append: ddeAppend<ddeHTMLTableRowElement>; }
/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */ interface ddeHTMLTrackElement extends HTMLTrackElement{ append: ddeAppend<ddeHTMLTrackElement>; }
append: ddeAppend<HTMLMenuElement>; interface ddeHTMLUListElement extends HTMLUListElement{ append: ddeAppend<ddeHTMLUListElement>; }
} interface ddeHTMLVideoElement extends HTMLVideoElement{ append: ddeAppend<ddeHTMLVideoElement>; }
interface HTMLMetaElement{
/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */ interface ddeSVGElementTagNameMap {
append: ddeAppend<HTMLMetaElement>; "a": ddeSVGAElement;
} "animate": ddeSVGAnimateElement;
interface HTMLMeterElement{ "animateMotion": ddeSVGAnimateMotionElement;
/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */ "animateTransform": ddeSVGAnimateTransformElement;
append: ddeAppend<HTMLMeterElement>; "circle": ddeSVGCircleElement;
} "clipPath": ddeSVGClipPathElement;
interface HTMLObjectElement{ "defs": ddeSVGDefsElement;
/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */ "desc": ddeSVGDescElement;
append: ddeAppend<HTMLObjectElement>; "ellipse": ddeSVGEllipseElement;
} "feBlend": ddeSVGFEBlendElement;
interface HTMLOListElement{ "feColorMatrix": ddeSVGFEColorMatrixElement;
/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */ "feComponentTransfer": ddeSVGFEComponentTransferElement;
append: ddeAppend<HTMLOListElement>; "feComposite": ddeSVGFECompositeElement;
} "feConvolveMatrix": ddeSVGFEConvolveMatrixElement;
interface HTMLOptGroupElement{ "feDiffuseLighting": ddeSVGFEDiffuseLightingElement;
/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */ "feDisplacementMap": ddeSVGFEDisplacementMapElement;
append: ddeAppend<HTMLOptGroupElement>; "feDistantLight": ddeSVGFEDistantLightElement;
} "feDropShadow": ddeSVGFEDropShadowElement;
interface HTMLOptionElement{ "feFlood": ddeSVGFEFloodElement;
/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */ "feFuncA": ddeSVGFEFuncAElement;
append: ddeAppend<HTMLOptionElement>; "feFuncB": ddeSVGFEFuncBElement;
} "feFuncG": ddeSVGFEFuncGElement;
interface HTMLOutputElement{ "feFuncR": ddeSVGFEFuncRElement;
/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */ "feGaussianBlur": ddeSVGFEGaussianBlurElement;
append: ddeAppend<HTMLOutputElement>; "feImage": ddeSVGFEImageElement;
} "feMerge": ddeSVGFEMergeElement;
interface HTMLParagraphElement{ "feMergeNode": ddeSVGFEMergeNodeElement;
/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */ "feMorphology": ddeSVGFEMorphologyElement;
append: ddeAppend<HTMLParagraphElement>; "feOffset": ddeSVGFEOffsetElement;
} "fePointLight": ddeSVGFEPointLightElement;
interface HTMLPictureElement{ "feSpecularLighting": ddeSVGFESpecularLightingElement;
/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */ "feSpotLight": ddeSVGFESpotLightElement;
append: ddeAppend<HTMLPictureElement>; "feTile": ddeSVGFETileElement;
} "feTurbulence": ddeSVGFETurbulenceElement;
interface HTMLPreElement{ "filter": ddeSVGFilterElement;
/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */ "foreignObject": ddeSVGForeignObjectElement;
append: ddeAppend<HTMLPreElement>; "g": ddeSVGGElement;
} "image": ddeSVGImageElement;
interface HTMLProgressElement{ "line": ddeSVGLineElement;
/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */ "linearGradient": ddeSVGLinearGradientElement;
append: ddeAppend<HTMLProgressElement>; "marker": ddeSVGMarkerElement;
} "mask": ddeSVGMaskElement;
interface HTMLScriptElement{ "metadata": ddeSVGMetadataElement;
/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */ "mpath": ddeSVGMPathElement;
append: ddeAppend<HTMLScriptElement>; "path": ddeSVGPathElement;
} "pattern": ddeSVGPatternElement;
interface HTMLSelectElement{ "polygon": ddeSVGPolygonElement;
/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */ "polyline": ddeSVGPolylineElement;
append: ddeAppend<HTMLSelectElement>; "radialGradient": ddeSVGRadialGradientElement;
} "rect": ddeSVGRectElement;
interface HTMLSlotElement{ "script": ddeSVGScriptElement;
/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */ "set": ddeSVGSetElement;
append: ddeAppend<HTMLSlotElement>; "stop": ddeSVGStopElement;
} "style": ddeSVGStyleElement;
interface HTMLSourceElement{ "svg": ddeSVGSVGElement;
/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */ "switch": ddeSVGSwitchElement;
append: ddeAppend<HTMLSourceElement>; "symbol": ddeSVGSymbolElement;
} "text": ddeSVGTextElement;
interface HTMLSpanElement{ "textPath": ddeSVGTextPathElement;
/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */ "title": ddeSVGTitleElement;
append: ddeAppend<HTMLSpanElement>; "tspan": ddeSVGTSpanElement;
} "use": ddeSVGUseElement;
interface HTMLStyleElement{ "view": ddeSVGViewElement;
/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */ }
append: ddeAppend<HTMLStyleElement>; interface ddeSVGAElement extends SVGAElement{ append: ddeAppend<ddeSVGAElement>; }
} interface ddeSVGAnimateElement extends SVGAnimateElement{ append: ddeAppend<ddeSVGAnimateElement>; }
interface HTMLTableElement{ interface ddeSVGAnimateMotionElement extends SVGAnimateMotionElement{ append: ddeAppend<ddeSVGAnimateMotionElement>; }
/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */ interface ddeSVGAnimateTransformElement extends SVGAnimateTransformElement{ append: ddeAppend<ddeSVGAnimateTransformElement>; }
append: ddeAppend<HTMLTableElement>; interface ddeSVGCircleElement extends SVGCircleElement{ append: ddeAppend<ddeSVGCircleElement>; }
} interface ddeSVGClipPathElement extends SVGClipPathElement{ append: ddeAppend<ddeSVGClipPathElement>; }
interface HTMLTableSectionElement{ interface ddeSVGDefsElement extends SVGDefsElement{ append: ddeAppend<ddeSVGDefsElement>; }
/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */ interface ddeSVGDescElement extends SVGDescElement{ append: ddeAppend<ddeSVGDescElement>; }
append: ddeAppend<HTMLTableSectionElement>; interface ddeSVGEllipseElement extends SVGEllipseElement{ append: ddeAppend<ddeSVGEllipseElement>; }
} interface ddeSVGFEBlendElement extends SVGFEBlendElement{ append: ddeAppend<ddeSVGFEBlendElement>; }
interface HTMLTableCellElement{ interface ddeSVGFEColorMatrixElement extends SVGFEColorMatrixElement{ append: ddeAppend<ddeSVGFEColorMatrixElement>; }
/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */ interface ddeSVGFEComponentTransferElement extends SVGFEComponentTransferElement{ append: ddeAppend<ddeSVGFEComponentTransferElement>; }
append: ddeAppend<HTMLTableCellElement>; interface ddeSVGFECompositeElement extends SVGFECompositeElement{ append: ddeAppend<ddeSVGFECompositeElement>; }
} interface ddeSVGFEConvolveMatrixElement extends SVGFEConvolveMatrixElement{ append: ddeAppend<ddeSVGFEConvolveMatrixElement>; }
interface HTMLTemplateElement{ interface ddeSVGFEDiffuseLightingElement extends SVGFEDiffuseLightingElement{ append: ddeAppend<ddeSVGFEDiffuseLightingElement>; }
/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */ interface ddeSVGFEDisplacementMapElement extends SVGFEDisplacementMapElement{ append: ddeAppend<ddeSVGFEDisplacementMapElement>; }
append: ddeAppend<HTMLTemplateElement>; interface ddeSVGFEDistantLightElement extends SVGFEDistantLightElement{ append: ddeAppend<ddeSVGFEDistantLightElement>; }
} interface ddeSVGFEDropShadowElement extends SVGFEDropShadowElement{ append: ddeAppend<ddeSVGFEDropShadowElement>; }
interface HTMLTextAreaElement{ interface ddeSVGFEFloodElement extends SVGFEFloodElement{ append: ddeAppend<ddeSVGFEFloodElement>; }
/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */ interface ddeSVGFEFuncAElement extends SVGFEFuncAElement{ append: ddeAppend<ddeSVGFEFuncAElement>; }
append: ddeAppend<HTMLTextAreaElement>; interface ddeSVGFEFuncBElement extends SVGFEFuncBElement{ append: ddeAppend<ddeSVGFEFuncBElement>; }
} interface ddeSVGFEFuncGElement extends SVGFEFuncGElement{ append: ddeAppend<ddeSVGFEFuncGElement>; }
interface HTMLTableCellElement{ interface ddeSVGFEFuncRElement extends SVGFEFuncRElement{ append: ddeAppend<ddeSVGFEFuncRElement>; }
/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */ interface ddeSVGFEGaussianBlurElement extends SVGFEGaussianBlurElement{ append: ddeAppend<ddeSVGFEGaussianBlurElement>; }
append: ddeAppend<HTMLTableCellElement>; interface ddeSVGFEImageElement extends SVGFEImageElement{ append: ddeAppend<ddeSVGFEImageElement>; }
} interface ddeSVGFEMergeElement extends SVGFEMergeElement{ append: ddeAppend<ddeSVGFEMergeElement>; }
interface HTMLTimeElement{ interface ddeSVGFEMergeNodeElement extends SVGFEMergeNodeElement{ append: ddeAppend<ddeSVGFEMergeNodeElement>; }
/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */ interface ddeSVGFEMorphologyElement extends SVGFEMorphologyElement{ append: ddeAppend<ddeSVGFEMorphologyElement>; }
append: ddeAppend<HTMLTimeElement>; interface ddeSVGFEOffsetElement extends SVGFEOffsetElement{ append: ddeAppend<ddeSVGFEOffsetElement>; }
} interface ddeSVGFEPointLightElement extends SVGFEPointLightElement{ append: ddeAppend<ddeSVGFEPointLightElement>; }
interface HTMLTitleElement{ interface ddeSVGFESpecularLightingElement extends SVGFESpecularLightingElement{ append: ddeAppend<ddeSVGFESpecularLightingElement>; }
/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */ interface ddeSVGFESpotLightElement extends SVGFESpotLightElement{ append: ddeAppend<ddeSVGFESpotLightElement>; }
append: ddeAppend<HTMLTitleElement>; interface ddeSVGFETileElement extends SVGFETileElement{ append: ddeAppend<ddeSVGFETileElement>; }
} interface ddeSVGFETurbulenceElement extends SVGFETurbulenceElement{ append: ddeAppend<ddeSVGFETurbulenceElement>; }
interface HTMLTableRowElement{ interface ddeSVGFilterElement extends SVGFilterElement{ append: ddeAppend<ddeSVGFilterElement>; }
/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */ interface ddeSVGForeignObjectElement extends SVGForeignObjectElement{ append: ddeAppend<ddeSVGForeignObjectElement>; }
append: ddeAppend<HTMLTableRowElement>; interface ddeSVGGElement extends SVGGElement{ append: ddeAppend<ddeSVGGElement>; }
} interface ddeSVGImageElement extends SVGImageElement{ append: ddeAppend<ddeSVGImageElement>; }
interface HTMLTrackElement{ interface ddeSVGLineElement extends SVGLineElement{ append: ddeAppend<ddeSVGLineElement>; }
/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */ interface ddeSVGLinearGradientElement extends SVGLinearGradientElement{ append: ddeAppend<ddeSVGLinearGradientElement>; }
append: ddeAppend<HTMLTrackElement>; interface ddeSVGMarkerElement extends SVGMarkerElement{ append: ddeAppend<ddeSVGMarkerElement>; }
} interface ddeSVGMaskElement extends SVGMaskElement{ append: ddeAppend<ddeSVGMaskElement>; }
interface HTMLUListElement{ interface ddeSVGMetadataElement extends SVGMetadataElement{ append: ddeAppend<ddeSVGMetadataElement>; }
/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */ interface ddeSVGMPathElement extends SVGMPathElement{ append: ddeAppend<ddeSVGMPathElement>; }
append: ddeAppend<HTMLUListElement>; interface ddeSVGPathElement extends SVGPathElement{ append: ddeAppend<ddeSVGPathElement>; }
} interface ddeSVGPatternElement extends SVGPatternElement{ append: ddeAppend<ddeSVGPatternElement>; }
interface HTMLVideoElement{ interface ddeSVGPolygonElement extends SVGPolygonElement{ append: ddeAppend<ddeSVGPolygonElement>; }
/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */ interface ddeSVGPolylineElement extends SVGPolylineElement{ append: ddeAppend<ddeSVGPolylineElement>; }
append: ddeAppend<HTMLVideoElement>; interface ddeSVGRadialGradientElement extends SVGRadialGradientElement{ append: ddeAppend<ddeSVGRadialGradientElement>; }
} interface ddeSVGRectElement extends SVGRectElement{ append: ddeAppend<ddeSVGRectElement>; }
interface DocumentFragment{ interface ddeSVGScriptElement extends SVGScriptElement{ append: ddeAppend<ddeSVGScriptElement>; }
/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */ interface ddeSVGSetElement extends SVGSetElement{ append: ddeAppend<ddeSVGSetElement>; }
append: ddeAppend<DocumentFragment>; interface ddeSVGStopElement extends SVGStopElement{ append: ddeAppend<ddeSVGStopElement>; }
} interface ddeSVGStyleElement extends SVGStyleElement{ append: ddeAppend<ddeSVGStyleElement>; }
interface SVGElement{ interface ddeSVGSVGElement extends SVGSVGElement{ append: ddeAppend<ddeSVGSVGElement>; }
/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */ interface ddeSVGSwitchElement extends SVGSwitchElement{ append: ddeAppend<ddeSVGSwitchElement>; }
append: ddeAppend<SVGElement>; interface ddeSVGSymbolElement extends SVGSymbolElement{ append: ddeAppend<ddeSVGSymbolElement>; }
} interface ddeSVGTextElement extends SVGTextElement{ append: ddeAppend<ddeSVGTextElement>; }
interface ddeSVGTextPathElement extends SVGTextPathElement{ append: ddeAppend<ddeSVGTextPathElement>; }
interface ddeSVGTitleElement extends SVGTitleElement{ append: ddeAppend<ddeSVGTitleElement>; }
interface ddeSVGTSpanElement extends SVGTSpanElement{ append: ddeAppend<ddeSVGTSpanElement>; }
interface ddeSVGUseElement extends SVGUseElement{ append: ddeAppend<ddeSVGUseElement>; }
interface ddeSVGViewElement extends SVGViewElement{ append: ddeAppend<ddeSVGViewElement>; }
} }

2
dist/esm.js vendored
View File

File diff suppressed because one or more lines are too long

26
docs/global.css
View File

@ -119,6 +119,19 @@ main > *{
font-size: .9rem; font-size: .9rem;
font-style: italic; font-style: italic;
} }
.prevNext{
display: grid;
grid-template-columns: 1fr 2fr 1fr;
margin-top: 1rem;
border-top: 1px solid var(--border);
}
.prevNext [rel=prev]{
grid-column: 1;
}
.prevNext [rel=next]{
grid-column: 3;
text-align: right;
}
.code{ .code{
--shiki-color-text: #e9eded; --shiki-color-text: #e9eded;
--shiki-color-background: #212121; --shiki-color-background: #212121;
@ -152,16 +165,3 @@ main > *{
background: #212121 !important; background: #212121 !important;
border: 1px solid white; border: 1px solid white;
} }
.prevNext{
display: grid;
grid-template-columns: 1fr 2fr 1fr;
margin-top: 1rem;
border-top: 1px solid var(--border);
}
.prevNext [rel=prev]{
grid-column: 1;
}
.prevNext [rel=next]{
grid-column: 3;
text-align: right;
}

2
docs/index.html
View File

@ -1,4 +1,4 @@
<!DOCTYPE html><html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><meta name="description" content="Introducing a&nbsp;library."><title>`deka-dom-el` — Introduction</title><!--<dde:mark type="component" name="metaAuthor" host="this" ssr/>--><meta name="author" content="Jan Andrle"><link type="text/plain" rel="author" href="https://jaandrle.github.io/humans.txt"><meta name="generator" content="deka-dom-el"><!--<dde:mark type="component" name="metaTwitter" host="this" ssr/>--><meta name="twitter:card" content="summary_large_image"><meta name="twitter:url" content="https://github.com/jaandrle/deka-dom-el"><meta name="twitter:title" content="deka-dom-el"><meta name="twitter:description" content="A low-code library that simplifies the creation of native DOM elements/components using small wrappers and tweaks."><meta name="twitter:creator" content="@jaandrle"><!--<dde:mark type="component" name="metaFacebook" host="this" ssr/>--><meta name="og:url" content="https://github.com/jaandrle/deka-dom-el"><meta name="og:title" content="deka-dom-el"><meta name="og:description" content="A low-code library that simplifies the creation of native DOM elements/components using small wrappers and tweaks."><meta name="og:creator" content="@jaandrle"><script src="https://flems.io/flems.html" type="text/javascript" charset="utf-8"></script><link rel="stylesheet" href="global.css"></head><body><!--<dde:mark type="component" name="page" host="this" ssr/>--><!--<dde:mark type="component" name="header" host="this" ssr/>--><header><h1>`deka-dom-el` — Introduction</h1><p>Introducing a&nbsp;library.</p></header><nav><a href="https://github.com/jaandrle/deka-dom-el"><svg class="icon" viewBox="0 0 32 32"><!--<dde:mark type="component" name="iconGitHub" host="parentElement" ssr/>--><path d="M 16,0.395c -8.836,0 -16,7.163 -16,16c 0,7.069 4.585,13.067 10.942,15.182c 0.8,0.148 1.094,-0.347 1.094,-0.77c 0,-0.381 -0.015,-1.642 -0.022,-2.979c -4.452,0.968 -5.391,-1.888 -5.391,-1.888c -0.728,-1.849 -1.776,-2.341 -1.776,-2.341c -1.452,-0.993 0.11,-0.973 0.11,-0.973c 1.606,0.113 2.452,1.649 2.452,1.649c 1.427,2.446 3.743,1.739 4.656,1.33c 0.143,-1.034 0.558,-1.74 1.016,-2.14c -3.554,-0.404 -7.29,-1.777 -7.29,-7.907c 0,-1.747 0.625,-3.174 1.649,-4.295c -0.166,-0.403 -0.714,-2.03 0.155,-4.234c 0,0 1.344,-0.43 4.401,1.64c 1.276,-0.355 2.645,-0.532 4.005,-0.539c 1.359,0.006 2.729,0.184 4.008,0.539c 3.054,-2.07 4.395,-1.64 4.395,-1.64c 0.871,2.204 0.323,3.831 0.157,4.234c 1.026,1.12 1.647,2.548 1.647,4.295c 0,6.145 -3.743,7.498 -7.306,7.895c 0.574,0.497 1.085,1.47 1.085,2.963c 0,2.141 -0.019,3.864 -0.019,4.391c 0,0.426 0.288,0.925 1.099,0.768c 6.354,-2.118 10.933,-8.113 10.933,-15.18c 0,-8.837 -7.164,-16 -16,-16Z"></path></svg>GitHub</a><a href="./" title="Introducing a&nbsp;library." class="current">1. Introduction</a><a href="p02-elements" title="Basic concepts of elements modifications and creations.">2. Elements</a><a href="p03-events" title="Using not only events in UI declaratively.">3. Events and Addons</a><a href="p04-signals" title="Handling reactivity in UI via signals.">4. Signals and reactivity</a></nav><main><p>The library tries to provide pure JavaScript tool(s) to create reactive interfaces.</p><p>We start with creating and modifying a&nbsp;static elements and end up with UI templates. <i>From <code>document.createElement</code> to <code>el</code>.</i> Then we go through the native events system and the way to include it declaratively in UI templates. <i>From <code>element.addEventListener</code> to <code>on</code>.</i></p><p>Next step is providing interactivity not only for our UI templates. We introduce signals (<code>S</code>) and how them incorporate to UI templates.</p><p>Now we will clarify how the signals are incorporated into our templates with regard to application performance. This is not the only reason the library uses <code>scope</code>s. We will look at how they work in components represented in JavaScript by functions.</p><!--<dde:mark type="component" name="example" host="this" ssr/>--><div id="code-example-1-exquzbx4inc" class="example"><!--<dde:mark type="component" name="code" host="parentElement" ssr/>--><code class="language-js">import { el } from "https://cdn.jsdelivr.net/gh/jaandrle/deka-dom-el/dist/esm-with-signals.js"; <!DOCTYPE html><html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><meta name="description" content="Introducing a&nbsp;library."><title>`deka-dom-el` — Introduction</title><!--<dde:mark type="component" name="metaAuthor" host="this" ssr/>--><meta name="author" content="Jan Andrle"><link type="text/plain" rel="author" href="https://jaandrle.github.io/humans.txt"><meta name="generator" content="deka-dom-el"><!--<dde:mark type="component" name="metaTwitter" host="this" ssr/>--><meta name="twitter:card" content="summary_large_image"><meta name="twitter:url" content="https://github.com/jaandrle/deka-dom-el"><meta name="twitter:title" content="deka-dom-el"><meta name="twitter:description" content="A low-code library that simplifies the creation of native DOM elements/components using small wrappers and tweaks."><meta name="twitter:creator" content="@jaandrle"><!--<dde:mark type="component" name="metaFacebook" host="this" ssr/>--><meta name="og:url" content="https://github.com/jaandrle/deka-dom-el"><meta name="og:title" content="deka-dom-el"><meta name="og:description" content="A low-code library that simplifies the creation of native DOM elements/components using small wrappers and tweaks."><meta name="og:creator" content="@jaandrle"><script src="https://flems.io/flems.html" type="text/javascript" charset="utf-8"></script><link rel="stylesheet" href="global.css"></head><body><!--<dde:mark type="component" name="page" host="this" ssr/>--><!--<dde:mark type="component" name="simplePage" host="this" ssr/>--><!--<dde:mark type="component" name="header" host="this" ssr/>--><header><h1>`deka-dom-el` — Introduction</h1><p>Introducing a&nbsp;library.</p></header><nav><a href="https://github.com/jaandrle/deka-dom-el"><svg class="icon" viewBox="0 0 32 32"><!--<dde:mark type="component" name="iconGitHub" host="parentElement" ssr/>--><path d="M 16,0.395c -8.836,0 -16,7.163 -16,16c 0,7.069 4.585,13.067 10.942,15.182c 0.8,0.148 1.094,-0.347 1.094,-0.77c 0,-0.381 -0.015,-1.642 -0.022,-2.979c -4.452,0.968 -5.391,-1.888 -5.391,-1.888c -0.728,-1.849 -1.776,-2.341 -1.776,-2.341c -1.452,-0.993 0.11,-0.973 0.11,-0.973c 1.606,0.113 2.452,1.649 2.452,1.649c 1.427,2.446 3.743,1.739 4.656,1.33c 0.143,-1.034 0.558,-1.74 1.016,-2.14c -3.554,-0.404 -7.29,-1.777 -7.29,-7.907c 0,-1.747 0.625,-3.174 1.649,-4.295c -0.166,-0.403 -0.714,-2.03 0.155,-4.234c 0,0 1.344,-0.43 4.401,1.64c 1.276,-0.355 2.645,-0.532 4.005,-0.539c 1.359,0.006 2.729,0.184 4.008,0.539c 3.054,-2.07 4.395,-1.64 4.395,-1.64c 0.871,2.204 0.323,3.831 0.157,4.234c 1.026,1.12 1.647,2.548 1.647,4.295c 0,6.145 -3.743,7.498 -7.306,7.895c 0.574,0.497 1.085,1.47 1.085,2.963c 0,2.141 -0.019,3.864 -0.019,4.391c 0,0.426 0.288,0.925 1.099,0.768c 6.354,-2.118 10.933,-8.113 10.933,-15.18c 0,-8.837 -7.164,-16 -16,-16Z"></path></svg>GitHub</a><a href="./" title="Introducing a&nbsp;library." class="current">1. Introduction</a><a href="p02-elements" title="Basic concepts of elements modifications and creations.">2. Elements</a><a href="p03-events" title="Using not only events in UI declaratively.">3. Events and Addons</a><a href="p04-signals" title="Handling reactivity in UI via signals.">4. Signals and reactivity</a></nav><main><p>The library tries to provide pure JavaScript tool(s) to create reactive interfaces.</p><p>We start with creating and modifying a&nbsp;static elements and end up with UI templates. <i>From <code>document.createElement</code> to <code>el</code>.</i> Then we go through the native events system and the way to include it declaratively in UI templates. <i>From <code>element.addEventListener</code> to <code>on</code>.</i></p><p>Next step is providing interactivity not only for our UI templates. We introduce signals (<code>S</code>) and how them incorporate to UI templates.</p><p>Now we will clarify how the signals are incorporated into our templates with regard to application performance. This is not the only reason the library uses <code>scope</code>s. We will look at how they work in components represented in JavaScript by functions.</p><!--<dde:mark type="component" name="example" host="this" ssr/>--><div id="code-example-1-exquzbx4inc" class="example"><!--<dde:mark type="component" name="code" host="parentElement" ssr/>--><code class="language-js">import { el } from "https://cdn.jsdelivr.net/gh/jaandrle/deka-dom-el/dist/esm-with-signals.js";
import { S } from "https://cdn.jsdelivr.net/gh/jaandrle/deka-dom-el/dist/esm-with-signals.js"; import { S } from "https://cdn.jsdelivr.net/gh/jaandrle/deka-dom-el/dist/esm-with-signals.js";
const clicks= S(0); const clicks= S(0);
document.body.append( document.body.append(

2
docs/p02-elements.html
View File

@ -1,4 +1,4 @@
<!DOCTYPE html><html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><meta name="description" content="Basic concepts of elements modifications and creations."><title>`deka-dom-el` — Elements</title><!--<dde:mark type="component" name="metaAuthor" host="this" ssr/>--><meta name="author" content="Jan Andrle"><link type="text/plain" rel="author" href="https://jaandrle.github.io/humans.txt"><meta name="generator" content="deka-dom-el"><!--<dde:mark type="component" name="metaTwitter" host="this" ssr/>--><meta name="twitter:card" content="summary_large_image"><meta name="twitter:url" content="https://github.com/jaandrle/deka-dom-el"><meta name="twitter:title" content="deka-dom-el"><meta name="twitter:description" content="A low-code library that simplifies the creation of native DOM elements/components using small wrappers and tweaks."><meta name="twitter:creator" content="@jaandrle"><!--<dde:mark type="component" name="metaFacebook" host="this" ssr/>--><meta name="og:url" content="https://github.com/jaandrle/deka-dom-el"><meta name="og:title" content="deka-dom-el"><meta name="og:description" content="A low-code library that simplifies the creation of native DOM elements/components using small wrappers and tweaks."><meta name="og:creator" content="@jaandrle"><script src="https://flems.io/flems.html" type="text/javascript" charset="utf-8"></script><link rel="stylesheet" href="global.css"></head><body><!--<dde:mark type="component" name="page" host="this" ssr/>--><!--<dde:mark type="component" name="header" host="this" ssr/>--><header><h1>`deka-dom-el` — Elements</h1><p>Basic concepts of elements modifications and creations.</p></header><nav><a href="https://github.com/jaandrle/deka-dom-el"><svg class="icon" viewBox="0 0 32 32"><!--<dde:mark type="component" name="iconGitHub" host="parentElement" ssr/>--><path d="M 16,0.395c -8.836,0 -16,7.163 -16,16c 0,7.069 4.585,13.067 10.942,15.182c 0.8,0.148 1.094,-0.347 1.094,-0.77c 0,-0.381 -0.015,-1.642 -0.022,-2.979c -4.452,0.968 -5.391,-1.888 -5.391,-1.888c -0.728,-1.849 -1.776,-2.341 -1.776,-2.341c -1.452,-0.993 0.11,-0.973 0.11,-0.973c 1.606,0.113 2.452,1.649 2.452,1.649c 1.427,2.446 3.743,1.739 4.656,1.33c 0.143,-1.034 0.558,-1.74 1.016,-2.14c -3.554,-0.404 -7.29,-1.777 -7.29,-7.907c 0,-1.747 0.625,-3.174 1.649,-4.295c -0.166,-0.403 -0.714,-2.03 0.155,-4.234c 0,0 1.344,-0.43 4.401,1.64c 1.276,-0.355 2.645,-0.532 4.005,-0.539c 1.359,0.006 2.729,0.184 4.008,0.539c 3.054,-2.07 4.395,-1.64 4.395,-1.64c 0.871,2.204 0.323,3.831 0.157,4.234c 1.026,1.12 1.647,2.548 1.647,4.295c 0,6.145 -3.743,7.498 -7.306,7.895c 0.574,0.497 1.085,1.47 1.085,2.963c 0,2.141 -0.019,3.864 -0.019,4.391c 0,0.426 0.288,0.925 1.099,0.768c 6.354,-2.118 10.933,-8.113 10.933,-15.18c 0,-8.837 -7.164,-16 -16,-16Z"></path></svg>GitHub</a><a href="./" title="Introducing a&nbsp;library.">1. Introduction</a><a href="p02-elements" title="Basic concepts of elements modifications and creations." class="current">2. Elements</a><a href="p03-events" title="Using not only events in UI declaratively.">3. Events and Addons</a><a href="p04-signals" title="Handling reactivity in UI via signals.">4. Signals and reactivity</a></nav><main><h2>Native JavaScript DOM elements creations</h2><p>Let’s go through all patterns we would like to use and what needs to be improved for better experience.</p><h3 id="h-creating-elements-with-custom-attributes"><!--<dde:mark type="component" name="h3" host="parentElement" ssr/>--><a href="#h-creating-elements-with-custom-attributes" tabindex="-1">#</a> Creating element(s) (with custom attributes)</h3><p>You can create a native DOM element by using the <a href="https://developer.mozilla.org/en-US/docs/Web/API/Document/createElement" title="MDN documentation for document.createElement()"><code>document.createElement()</code></a>. It is also possible to provide a&nbsp;some attribute(s) declaratively using <code>Object.assign()</code>. More precisely, this way you can sets some <a href="https://developer.mozilla.org/en-US/docs/Glossary/IDL" title="MDN page about Interface Description Language"><abbr title="Interface Description Language">IDL</abbr></a> also known as a JavaScript property.</p><!--<dde:mark type="component" name="example" host="this" ssr/>--><div id="code-example-1-nkz9lcdhykg" class="example"><!--<dde:mark type="component" name="code" host="parentElement" ssr/>--><code class="language-js">document.body.append( <!DOCTYPE html><html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><meta name="description" content="Basic concepts of elements modifications and creations."><title>`deka-dom-el` — Elements</title><!--<dde:mark type="component" name="metaAuthor" host="this" ssr/>--><meta name="author" content="Jan Andrle"><link type="text/plain" rel="author" href="https://jaandrle.github.io/humans.txt"><meta name="generator" content="deka-dom-el"><!--<dde:mark type="component" name="metaTwitter" host="this" ssr/>--><meta name="twitter:card" content="summary_large_image"><meta name="twitter:url" content="https://github.com/jaandrle/deka-dom-el"><meta name="twitter:title" content="deka-dom-el"><meta name="twitter:description" content="A low-code library that simplifies the creation of native DOM elements/components using small wrappers and tweaks."><meta name="twitter:creator" content="@jaandrle"><!--<dde:mark type="component" name="metaFacebook" host="this" ssr/>--><meta name="og:url" content="https://github.com/jaandrle/deka-dom-el"><meta name="og:title" content="deka-dom-el"><meta name="og:description" content="A low-code library that simplifies the creation of native DOM elements/components using small wrappers and tweaks."><meta name="og:creator" content="@jaandrle"><script src="https://flems.io/flems.html" type="text/javascript" charset="utf-8"></script><link rel="stylesheet" href="global.css"></head><body><!--<dde:mark type="component" name="page" host="this" ssr/>--><!--<dde:mark type="component" name="simplePage" host="this" ssr/>--><!--<dde:mark type="component" name="header" host="this" ssr/>--><header><h1>`deka-dom-el` — Elements</h1><p>Basic concepts of elements modifications and creations.</p></header><nav><a href="https://github.com/jaandrle/deka-dom-el"><svg class="icon" viewBox="0 0 32 32"><!--<dde:mark type="component" name="iconGitHub" host="parentElement" ssr/>--><path d="M 16,0.395c -8.836,0 -16,7.163 -16,16c 0,7.069 4.585,13.067 10.942,15.182c 0.8,0.148 1.094,-0.347 1.094,-0.77c 0,-0.381 -0.015,-1.642 -0.022,-2.979c -4.452,0.968 -5.391,-1.888 -5.391,-1.888c -0.728,-1.849 -1.776,-2.341 -1.776,-2.341c -1.452,-0.993 0.11,-0.973 0.11,-0.973c 1.606,0.113 2.452,1.649 2.452,1.649c 1.427,2.446 3.743,1.739 4.656,1.33c 0.143,-1.034 0.558,-1.74 1.016,-2.14c -3.554,-0.404 -7.29,-1.777 -7.29,-7.907c 0,-1.747 0.625,-3.174 1.649,-4.295c -0.166,-0.403 -0.714,-2.03 0.155,-4.234c 0,0 1.344,-0.43 4.401,1.64c 1.276,-0.355 2.645,-0.532 4.005,-0.539c 1.359,0.006 2.729,0.184 4.008,0.539c 3.054,-2.07 4.395,-1.64 4.395,-1.64c 0.871,2.204 0.323,3.831 0.157,4.234c 1.026,1.12 1.647,2.548 1.647,4.295c 0,6.145 -3.743,7.498 -7.306,7.895c 0.574,0.497 1.085,1.47 1.085,2.963c 0,2.141 -0.019,3.864 -0.019,4.391c 0,0.426 0.288,0.925 1.099,0.768c 6.354,-2.118 10.933,-8.113 10.933,-15.18c 0,-8.837 -7.164,-16 -16,-16Z"></path></svg>GitHub</a><a href="./" title="Introducing a&nbsp;library.">1. Introduction</a><a href="p02-elements" title="Basic concepts of elements modifications and creations." class="current">2. Elements</a><a href="p03-events" title="Using not only events in UI declaratively.">3. Events and Addons</a><a href="p04-signals" title="Handling reactivity in UI via signals.">4. Signals and reactivity</a></nav><main><h2>Native JavaScript DOM elements creations</h2><p>Let’s go through all patterns we would like to use and what needs to be improved for better experience.</p><h3 id="h-creating-elements-with-custom-attributes"><!--<dde:mark type="component" name="h3" host="parentElement" ssr/>--><a href="#h-creating-elements-with-custom-attributes" tabindex="-1">#</a> Creating element(s) (with custom attributes)</h3><p>You can create a native DOM element by using the <a href="https://developer.mozilla.org/en-US/docs/Web/API/Document/createElement" title="MDN documentation for document.createElement()"><code>document.createElement()</code></a>. It is also possible to provide a&nbsp;some attribute(s) declaratively using <code>Object.assign()</code>. More precisely, this way you can sets some <a href="https://developer.mozilla.org/en-US/docs/Glossary/IDL" title="MDN page about Interface Description Language"><abbr title="Interface Description Language">IDL</abbr></a> also known as a JavaScript property.</p><!--<dde:mark type="component" name="example" host="this" ssr/>--><div id="code-example-1-nkz9lcdhykg" class="example"><!--<dde:mark type="component" name="code" host="parentElement" ssr/>--><code class="language-js">document.body.append(
document.createElement("div") document.createElement("div")
); );
console.log( console.log(

2
docs/p03-events.html
View File

@ -1,4 +1,4 @@
<!DOCTYPE html><html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><meta name="description" content="Using not only events in UI declaratively."><title>`deka-dom-el` — Events and Addons</title><!--<dde:mark type="component" name="metaAuthor" host="this" ssr/>--><meta name="author" content="Jan Andrle"><link type="text/plain" rel="author" href="https://jaandrle.github.io/humans.txt"><meta name="generator" content="deka-dom-el"><!--<dde:mark type="component" name="metaTwitter" host="this" ssr/>--><meta name="twitter:card" content="summary_large_image"><meta name="twitter:url" content="https://github.com/jaandrle/deka-dom-el"><meta name="twitter:title" content="deka-dom-el"><meta name="twitter:description" content="A low-code library that simplifies the creation of native DOM elements/components using small wrappers and tweaks."><meta name="twitter:creator" content="@jaandrle"><!--<dde:mark type="component" name="metaFacebook" host="this" ssr/>--><meta name="og:url" content="https://github.com/jaandrle/deka-dom-el"><meta name="og:title" content="deka-dom-el"><meta name="og:description" content="A low-code library that simplifies the creation of native DOM elements/components using small wrappers and tweaks."><meta name="og:creator" content="@jaandrle"><script src="https://flems.io/flems.html" type="text/javascript" charset="utf-8"></script><link rel="stylesheet" href="global.css"></head><body><!--<dde:mark type="component" name="page" host="this" ssr/>--><!--<dde:mark type="component" name="header" host="this" ssr/>--><header><h1>`deka-dom-el` — Events and Addons</h1><p>Using not only events in UI declaratively.</p></header><nav><a href="https://github.com/jaandrle/deka-dom-el"><svg class="icon" viewBox="0 0 32 32"><!--<dde:mark type="component" name="iconGitHub" host="parentElement" ssr/>--><path d="M 16,0.395c -8.836,0 -16,7.163 -16,16c 0,7.069 4.585,13.067 10.942,15.182c 0.8,0.148 1.094,-0.347 1.094,-0.77c 0,-0.381 -0.015,-1.642 -0.022,-2.979c -4.452,0.968 -5.391,-1.888 -5.391,-1.888c -0.728,-1.849 -1.776,-2.341 -1.776,-2.341c -1.452,-0.993 0.11,-0.973 0.11,-0.973c 1.606,0.113 2.452,1.649 2.452,1.649c 1.427,2.446 3.743,1.739 4.656,1.33c 0.143,-1.034 0.558,-1.74 1.016,-2.14c -3.554,-0.404 -7.29,-1.777 -7.29,-7.907c 0,-1.747 0.625,-3.174 1.649,-4.295c -0.166,-0.403 -0.714,-2.03 0.155,-4.234c 0,0 1.344,-0.43 4.401,1.64c 1.276,-0.355 2.645,-0.532 4.005,-0.539c 1.359,0.006 2.729,0.184 4.008,0.539c 3.054,-2.07 4.395,-1.64 4.395,-1.64c 0.871,2.204 0.323,3.831 0.157,4.234c 1.026,1.12 1.647,2.548 1.647,4.295c 0,6.145 -3.743,7.498 -7.306,7.895c 0.574,0.497 1.085,1.47 1.085,2.963c 0,2.141 -0.019,3.864 -0.019,4.391c 0,0.426 0.288,0.925 1.099,0.768c 6.354,-2.118 10.933,-8.113 10.933,-15.18c 0,-8.837 -7.164,-16 -16,-16Z"></path></svg>GitHub</a><a href="./" title="Introducing a&nbsp;library.">1. Introduction</a><a href="p02-elements" title="Basic concepts of elements modifications and creations.">2. Elements</a><a href="p03-events" title="Using not only events in UI declaratively." class="current">3. Events and Addons</a><a href="p04-signals" title="Handling reactivity in UI via signals.">4. Signals and reactivity</a></nav><main><h2>Listenning to the native DOM events and other Addons</h2><p>We quickly introduce helper to listening to the native DOM events. And library syntax/pattern so-called <em>Addon</em> to incorporate not only this in UI templates declaratively.</p><h3 id="h-events-and-listenners"><!--<dde:mark type="component" name="h3" host="parentElement" ssr/>--><a href="#h-events-and-listenners" tabindex="-1">#</a> Events and listenners</h3><p>In JavaScript you can listen to the native DOM events of the given element by using <a href="https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener" title="addEventListener on MDN"><code>element.addEventListener(type, listener, options)</code></a>. The library provides an alternative (<code>on</code>) accepting the differen order of the arguments:</p><!--<dde:mark type="component" name="example" host="this" ssr/>--><div id="code-example-1-1wmddlo83w68" class="example"><!--<dde:mark type="component" name="code" host="parentElement" ssr/>--><code class="language-js">import { el, on } from "https://cdn.jsdelivr.net/gh/jaandrle/deka-dom-el/dist/esm-with-signals.js"; <!DOCTYPE html><html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><meta name="description" content="Using not only events in UI declaratively."><title>`deka-dom-el` — Events and Addons</title><!--<dde:mark type="component" name="metaAuthor" host="this" ssr/>--><meta name="author" content="Jan Andrle"><link type="text/plain" rel="author" href="https://jaandrle.github.io/humans.txt"><meta name="generator" content="deka-dom-el"><!--<dde:mark type="component" name="metaTwitter" host="this" ssr/>--><meta name="twitter:card" content="summary_large_image"><meta name="twitter:url" content="https://github.com/jaandrle/deka-dom-el"><meta name="twitter:title" content="deka-dom-el"><meta name="twitter:description" content="A low-code library that simplifies the creation of native DOM elements/components using small wrappers and tweaks."><meta name="twitter:creator" content="@jaandrle"><!--<dde:mark type="component" name="metaFacebook" host="this" ssr/>--><meta name="og:url" content="https://github.com/jaandrle/deka-dom-el"><meta name="og:title" content="deka-dom-el"><meta name="og:description" content="A low-code library that simplifies the creation of native DOM elements/components using small wrappers and tweaks."><meta name="og:creator" content="@jaandrle"><script src="https://flems.io/flems.html" type="text/javascript" charset="utf-8"></script><link rel="stylesheet" href="global.css"></head><body><!--<dde:mark type="component" name="page" host="this" ssr/>--><!--<dde:mark type="component" name="simplePage" host="this" ssr/>--><!--<dde:mark type="component" name="header" host="this" ssr/>--><header><h1>`deka-dom-el` — Events and Addons</h1><p>Using not only events in UI declaratively.</p></header><nav><a href="https://github.com/jaandrle/deka-dom-el"><svg class="icon" viewBox="0 0 32 32"><!--<dde:mark type="component" name="iconGitHub" host="parentElement" ssr/>--><path d="M 16,0.395c -8.836,0 -16,7.163 -16,16c 0,7.069 4.585,13.067 10.942,15.182c 0.8,0.148 1.094,-0.347 1.094,-0.77c 0,-0.381 -0.015,-1.642 -0.022,-2.979c -4.452,0.968 -5.391,-1.888 -5.391,-1.888c -0.728,-1.849 -1.776,-2.341 -1.776,-2.341c -1.452,-0.993 0.11,-0.973 0.11,-0.973c 1.606,0.113 2.452,1.649 2.452,1.649c 1.427,2.446 3.743,1.739 4.656,1.33c 0.143,-1.034 0.558,-1.74 1.016,-2.14c -3.554,-0.404 -7.29,-1.777 -7.29,-7.907c 0,-1.747 0.625,-3.174 1.649,-4.295c -0.166,-0.403 -0.714,-2.03 0.155,-4.234c 0,0 1.344,-0.43 4.401,1.64c 1.276,-0.355 2.645,-0.532 4.005,-0.539c 1.359,0.006 2.729,0.184 4.008,0.539c 3.054,-2.07 4.395,-1.64 4.395,-1.64c 0.871,2.204 0.323,3.831 0.157,4.234c 1.026,1.12 1.647,2.548 1.647,4.295c 0,6.145 -3.743,7.498 -7.306,7.895c 0.574,0.497 1.085,1.47 1.085,2.963c 0,2.141 -0.019,3.864 -0.019,4.391c 0,0.426 0.288,0.925 1.099,0.768c 6.354,-2.118 10.933,-8.113 10.933,-15.18c 0,-8.837 -7.164,-16 -16,-16Z"></path></svg>GitHub</a><a href="./" title="Introducing a&nbsp;library.">1. Introduction</a><a href="p02-elements" title="Basic concepts of elements modifications and creations.">2. Elements</a><a href="p03-events" title="Using not only events in UI declaratively." class="current">3. Events and Addons</a><a href="p04-signals" title="Handling reactivity in UI via signals.">4. Signals and reactivity</a></nav><main><h2>Listenning to the native DOM events and other Addons</h2><p>We quickly introduce helper to listening to the native DOM events. And library syntax/pattern so-called <em>Addon</em> to incorporate not only this in UI templates declaratively.</p><h3 id="h-events-and-listenners"><!--<dde:mark type="component" name="h3" host="parentElement" ssr/>--><a href="#h-events-and-listenners" tabindex="-1">#</a> Events and listenners</h3><p>In JavaScript you can listen to the native DOM events of the given element by using <a href="https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener" title="addEventListener on MDN"><code>element.addEventListener(type, listener, options)</code></a>. The library provides an alternative (<code>on</code>) accepting the differen order of the arguments:</p><!--<dde:mark type="component" name="example" host="this" ssr/>--><div id="code-example-1-1wmddlo83w68" class="example"><!--<dde:mark type="component" name="code" host="parentElement" ssr/>--><code class="language-js">import { el, on } from "https://cdn.jsdelivr.net/gh/jaandrle/deka-dom-el/dist/esm-with-signals.js";
const log= mark=&gt; console.log.bind(console, mark); const log= mark=&gt; console.log.bind(console, mark);
const button= el("button", "Test click"); const button= el("button", "Test click");

4
docs/p04-signals.html
View File

@ -1,4 +1,4 @@
<!DOCTYPE html><html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><meta name="description" content="Handling reactivity in UI via signals."><title>`deka-dom-el` — Signals and reactivity</title><!--<dde:mark type="component" name="metaAuthor" host="this" ssr/>--><meta name="author" content="Jan Andrle"><link type="text/plain" rel="author" href="https://jaandrle.github.io/humans.txt"><meta name="generator" content="deka-dom-el"><!--<dde:mark type="component" name="metaTwitter" host="this" ssr/>--><meta name="twitter:card" content="summary_large_image"><meta name="twitter:url" content="https://github.com/jaandrle/deka-dom-el"><meta name="twitter:title" content="deka-dom-el"><meta name="twitter:description" content="A low-code library that simplifies the creation of native DOM elements/components using small wrappers and tweaks."><meta name="twitter:creator" content="@jaandrle"><!--<dde:mark type="component" name="metaFacebook" host="this" ssr/>--><meta name="og:url" content="https://github.com/jaandrle/deka-dom-el"><meta name="og:title" content="deka-dom-el"><meta name="og:description" content="A low-code library that simplifies the creation of native DOM elements/components using small wrappers and tweaks."><meta name="og:creator" content="@jaandrle"><script src="https://flems.io/flems.html" type="text/javascript" charset="utf-8"></script><link rel="stylesheet" href="global.css"></head><body><!--<dde:mark type="component" name="page" host="this" ssr/>--><!--<dde:mark type="component" name="header" host="this" ssr/>--><header><h1>`deka-dom-el` — Signals and reactivity</h1><p>Handling reactivity in UI via signals.</p></header><nav><a href="https://github.com/jaandrle/deka-dom-el"><svg class="icon" viewBox="0 0 32 32"><!--<dde:mark type="component" name="iconGitHub" host="parentElement" ssr/>--><path d="M 16,0.395c -8.836,0 -16,7.163 -16,16c 0,7.069 4.585,13.067 10.942,15.182c 0.8,0.148 1.094,-0.347 1.094,-0.77c 0,-0.381 -0.015,-1.642 -0.022,-2.979c -4.452,0.968 -5.391,-1.888 -5.391,-1.888c -0.728,-1.849 -1.776,-2.341 -1.776,-2.341c -1.452,-0.993 0.11,-0.973 0.11,-0.973c 1.606,0.113 2.452,1.649 2.452,1.649c 1.427,2.446 3.743,1.739 4.656,1.33c 0.143,-1.034 0.558,-1.74 1.016,-2.14c -3.554,-0.404 -7.29,-1.777 -7.29,-7.907c 0,-1.747 0.625,-3.174 1.649,-4.295c -0.166,-0.403 -0.714,-2.03 0.155,-4.234c 0,0 1.344,-0.43 4.401,1.64c 1.276,-0.355 2.645,-0.532 4.005,-0.539c 1.359,0.006 2.729,0.184 4.008,0.539c 3.054,-2.07 4.395,-1.64 4.395,-1.64c 0.871,2.204 0.323,3.831 0.157,4.234c 1.026,1.12 1.647,2.548 1.647,4.295c 0,6.145 -3.743,7.498 -7.306,7.895c 0.574,0.497 1.085,1.47 1.085,2.963c 0,2.141 -0.019,3.864 -0.019,4.391c 0,0.426 0.288,0.925 1.099,0.768c 6.354,-2.118 10.933,-8.113 10.933,-15.18c 0,-8.837 -7.164,-16 -16,-16Z"></path></svg>GitHub</a><a href="./" title="Introducing a&nbsp;library.">1. Introduction</a><a href="p02-elements" title="Basic concepts of elements modifications and creations.">2. Elements</a><a href="p03-events" title="Using not only events in UI declaratively.">3. Events and Addons</a><a href="p04-signals" title="Handling reactivity in UI via signals." class="current">4. Signals and reactivity</a></nav><main><h2>Using signals to manage reactivity</h2><p>How a program responds to variable data or user interactions is one of the fundamental problems of programming. If we desire to solve the issue in a declarative manner, signals may be a viable approach.</p><!--<dde:mark type="component" name="example" host="this" ssr/>--><div id="code-example-1-opc0krfvn3k" class="example"><!--<dde:mark type="component" name="code" host="parentElement" ssr/>--><code class="language-js">import { S } from "https://cdn.jsdelivr.net/gh/jaandrle/deka-dom-el/dist/esm-with-signals.js"; <!DOCTYPE html><html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><meta name="description" content="Handling reactivity in UI via signals."><title>`deka-dom-el` — Signals and reactivity</title><!--<dde:mark type="component" name="metaAuthor" host="this" ssr/>--><meta name="author" content="Jan Andrle"><link type="text/plain" rel="author" href="https://jaandrle.github.io/humans.txt"><meta name="generator" content="deka-dom-el"><!--<dde:mark type="component" name="metaTwitter" host="this" ssr/>--><meta name="twitter:card" content="summary_large_image"><meta name="twitter:url" content="https://github.com/jaandrle/deka-dom-el"><meta name="twitter:title" content="deka-dom-el"><meta name="twitter:description" content="A low-code library that simplifies the creation of native DOM elements/components using small wrappers and tweaks."><meta name="twitter:creator" content="@jaandrle"><!--<dde:mark type="component" name="metaFacebook" host="this" ssr/>--><meta name="og:url" content="https://github.com/jaandrle/deka-dom-el"><meta name="og:title" content="deka-dom-el"><meta name="og:description" content="A low-code library that simplifies the creation of native DOM elements/components using small wrappers and tweaks."><meta name="og:creator" content="@jaandrle"><script src="https://flems.io/flems.html" type="text/javascript" charset="utf-8"></script><link rel="stylesheet" href="global.css"></head><body><!--<dde:mark type="component" name="page" host="this" ssr/>--><!--<dde:mark type="component" name="simplePage" host="this" ssr/>--><!--<dde:mark type="component" name="header" host="this" ssr/>--><header><h1>`deka-dom-el` — Signals and reactivity</h1><p>Handling reactivity in UI via signals.</p></header><nav><a href="https://github.com/jaandrle/deka-dom-el"><svg class="icon" viewBox="0 0 32 32"><!--<dde:mark type="component" name="iconGitHub" host="parentElement" ssr/>--><path d="M 16,0.395c -8.836,0 -16,7.163 -16,16c 0,7.069 4.585,13.067 10.942,15.182c 0.8,0.148 1.094,-0.347 1.094,-0.77c 0,-0.381 -0.015,-1.642 -0.022,-2.979c -4.452,0.968 -5.391,-1.888 -5.391,-1.888c -0.728,-1.849 -1.776,-2.341 -1.776,-2.341c -1.452,-0.993 0.11,-0.973 0.11,-0.973c 1.606,0.113 2.452,1.649 2.452,1.649c 1.427,2.446 3.743,1.739 4.656,1.33c 0.143,-1.034 0.558,-1.74 1.016,-2.14c -3.554,-0.404 -7.29,-1.777 -7.29,-7.907c 0,-1.747 0.625,-3.174 1.649,-4.295c -0.166,-0.403 -0.714,-2.03 0.155,-4.234c 0,0 1.344,-0.43 4.401,1.64c 1.276,-0.355 2.645,-0.532 4.005,-0.539c 1.359,0.006 2.729,0.184 4.008,0.539c 3.054,-2.07 4.395,-1.64 4.395,-1.64c 0.871,2.204 0.323,3.831 0.157,4.234c 1.026,1.12 1.647,2.548 1.647,4.295c 0,6.145 -3.743,7.498 -7.306,7.895c 0.574,0.497 1.085,1.47 1.085,2.963c 0,2.141 -0.019,3.864 -0.019,4.391c 0,0.426 0.288,0.925 1.099,0.768c 6.354,-2.118 10.933,-8.113 10.933,-15.18c 0,-8.837 -7.164,-16 -16,-16Z"></path></svg>GitHub</a><a href="./" title="Introducing a&nbsp;library.">1. Introduction</a><a href="p02-elements" title="Basic concepts of elements modifications and creations.">2. Elements</a><a href="p03-events" title="Using not only events in UI declaratively.">3. Events and Addons</a><a href="p04-signals" title="Handling reactivity in UI via signals." class="current">4. Signals and reactivity</a></nav><main><h2>Using signals to manage reactivity</h2><p>How a program responds to variable data or user interactions is one of the fundamental problems of programming. If we desire to solve the issue in a declarative manner, signals may be a viable approach.</p><!--<dde:mark type="component" name="example" host="this" ssr/>--><div id="code-example-1-opc0krfvn3k" class="example"><!--<dde:mark type="component" name="code" host="parentElement" ssr/>--><code class="language-js">import { S } from "https://cdn.jsdelivr.net/gh/jaandrle/deka-dom-el/dist/esm-with-signals.js";
// α — `signal` represents a&nbsp;reactive value // α — `signal` represents a&nbsp;reactive value
const signal= S(0); const signal= S(0);
// β — just reacts on signal changes // β — just reacts on signal changes
@ -22,4 +22,4 @@ ac.signal.addEventListener("abort",
()=&gt; setTimeout(()=&gt; clearInterval(id), 2*interval)); ()=&gt; setTimeout(()=&gt; clearInterval(id), 2*interval));
setTimeout(()=&gt; ac.abort(), 3*interval) setTimeout(()=&gt; ac.abort(), 3*interval)
</code></div><script>Flems(document.getElementById("code-example-1-e9cfsaeb64o"), JSON.parse("{\"files\":[{\"name\":\".js\",\"content\":\"import { S } from \\\"https://cdn.jsdelivr.net/gh/jaandrle/deka-dom-el/dist/esm-with-signals.js\\\";\\nconst signal= S(0);\\n// computation pattern\\nconst double= S(()=> 2*signal());\\n\\nconst ac= new AbortController();\\nS.on(signal, v=> console.log(\\\"signal\\\", v), { signal: ac.signal });\\nS.on(double, v=> console.log(\\\"double\\\", v), { signal: ac.signal });\\n\\nsignal(signal()+1);\\nconst interval= 5000;\\nconst id= setInterval(()=> signal(signal()+1), interval);\\nac.signal.addEventListener(\\\"abort\\\",\\n\\t()=> setTimeout(()=> clearInterval(id), 2*interval));\\n\\nsetTimeout(()=> ac.abort(), 3*interval)\\n\"}],\"toolbar\":false}"));</script><div class="notice"><p>Mnemonic</p><ul><li><code>S(&lt;value&gt;)</code> — signal: reactive value</li><li><code>S(()=&gt; &lt;computation&gt;)</code> — signal: reactive value dependent on calculation using other signals</li><li><code>S.on(&lt;signal&gt;, &lt;listener&gt;[, &lt;options&gt;])</code> — listen to the signal value changes</li><li><code>S.clear(...&lt;signals&gt;)</code> — off and clear signals</li><li><code>S(&lt;value&gt;, &lt;actions&gt;)</code> — signal: pattern to create complex reactive objects/arrays</li><li><code>S.action(&lt;signal&gt;, &lt;action-name&gt;, ...&lt;action-arguments&gt;)</code> — invoke an&nbsp;action for given signal</li></ul></div></main></body></html> </code></div><script>Flems(document.getElementById("code-example-1-e9cfsaeb64o"), JSON.parse("{\"files\":[{\"name\":\".js\",\"content\":\"import { S } from \\\"https://cdn.jsdelivr.net/gh/jaandrle/deka-dom-el/dist/esm-with-signals.js\\\";\\nconst signal= S(0);\\n// computation pattern\\nconst double= S(()=> 2*signal());\\n\\nconst ac= new AbortController();\\nS.on(signal, v=> console.log(\\\"signal\\\", v), { signal: ac.signal });\\nS.on(double, v=> console.log(\\\"double\\\", v), { signal: ac.signal });\\n\\nsignal(signal()+1);\\nconst interval= 5000;\\nconst id= setInterval(()=> signal(signal()+1), interval);\\nac.signal.addEventListener(\\\"abort\\\",\\n\\t()=> setTimeout(()=> clearInterval(id), 2*interval));\\n\\nsetTimeout(()=> ac.abort(), 3*interval)\\n\"}],\"toolbar\":false}"));</script><div class="notice"><p>Mnemonic</p><ul><li><code>S(&lt;value&gt;)</code> — signal: reactive value</li><li><code>S(()=&gt; &lt;computation&gt;)</code> — signal: reactive value dependent on calculation using other signals</li><li><code>S.on(&lt;signal&gt;, &lt;listener&gt;[, &lt;options&gt;])</code> — listen to the signal value changes</li><li><code>S.clear(...&lt;signals&gt;)</code> — off and clear signals</li><li><code>S(&lt;value&gt;, &lt;actions&gt;)</code> — signal: pattern to create complex reactive objects/arrays</li><li><code>S.action(&lt;signal&gt;, &lt;action-name&gt;, ...&lt;action-arguments&gt;)</code> — invoke an&nbsp;action for given signal</li></ul></div><div class="prevNext"><!--<dde:mark type="component" name="prevNext" host="parentElement" ssr/>--><a rel="prev" href="p03-events" title="Using not only events in UI declaratively."><!--<dde:mark type="component" name="pageLink" host="parentElement" ssr/>-->Events and Addons (previous)</a><!--<dde:mark type="component" name="pageLink" host="this" ssr/>--></div></main></body></html>

13
docs_src/index.html.js
View File

@ -1,16 +1,11 @@
import "./global.css.js"; import { simplePage } from "./layout/simplePage.html.js";
import { el } from "deka-dom-el"; import { el } from "deka-dom-el";
import { header } from "./layout/head.html.js";
import { example } from "./components/example.html.js"; import { example } from "./components/example.html.js";
import { prevNext } from "./components/pageUtils.html.js";
/** @param {import("./types.d.ts").PageAttrs} attrs */ /** @param {import("./types.d.ts").PageAttrs} attrs */
export function page({ pkg, info }){ export function page({ pkg, info }){
const page_id= info.id; const page_id= info.id;
return el().append( return el(simplePage, { info, pkg }).append(
el(header, { info, pkg }),
el("main").append(
el("p", "The library tries to provide pure JavaScript tool(s) to create reactive interfaces."), el("p", "The library tries to provide pure JavaScript tool(s) to create reactive interfaces."),
el("p").append( el("p").append(
"We start with creating and modifying a static elements and end up with UI templates.", "We start with creating and modifying a static elements and end up with UI templates.",
@ -37,7 +32,5 @@ export function page({ pkg, info }){
"in JavaScript by functions." "in JavaScript by functions."
), ),
el(example, { src: new URL("./components/examples/helloWorld.js", import.meta.url), page_id }), el(example, { src: new URL("./components/examples/helloWorld.js", import.meta.url), page_id }),
el(prevNext, info)
)
); );
} }

16
docs_src/layout/simplePage.html.js Normal file
View File

@ -0,0 +1,16 @@
import "../global.css.js";
import { el, simulateSlots } from "deka-dom-el";
import { header } from "./head.html.js";
import { prevNext } from "../components/pageUtils.html.js";
/** @param {import("../types.d.ts").PageAttrs} attrs */
export function simplePage({ pkg, info }){
return simulateSlots(el().append(
el(header, { info, pkg }),
el("main").append(
el("slot"),
el(prevNext, info)
)
));
}

16
docs_src/p02-elements.html.js
View File

@ -1,19 +1,14 @@
import "./global.css.js"; import { simplePage } from "./layout/simplePage.html.js";
import { el } from "deka-dom-el"; import { el } from "deka-dom-el";
import { header } from "./layout/head.html.js";
import { example } from "./components/example.html.js"; import { example } from "./components/example.html.js";
import { h3, prevNext } from "./components/pageUtils.html.js"; import { h3 } from "./components/pageUtils.html.js";
/** @param {string} url */ /** @param {string} url */
const fileURL= url=> new URL(url, import.meta.url); const fileURL= url=> new URL(url, import.meta.url);
/** @param {import("./types.d.ts").PageAttrs} attrs */ /** @param {import("./types.d.ts").PageAttrs} attrs */
export function page({ pkg, info }){ export function page({ pkg, info }){
const page_id= info.id; const page_id= info.id;
return el().append( return el(simplePage, { info, pkg }).append(
el(header, { info, pkg }),
el("main").append(
el("h2", "Native JavaScript DOM elements creations"), el("h2", "Native JavaScript DOM elements creations"),
el("p", "Let’s go through all patterns we would like to use and what needs to be improved for better experience."), el("p", "Let’s go through all patterns we would like to use and what needs to be improved for better experience."),
@ -140,8 +135,5 @@ export function page({ pkg, info }){
) )
) )
), ),
el(prevNext, info)
)
); );
} }

16
docs_src/p03-events.html.js
View File

@ -1,19 +1,14 @@
import "./global.css.js"; import { simplePage } from "./layout/simplePage.html.js";
import { el } from "deka-dom-el"; import { el } from "deka-dom-el";
import { header } from "./layout/head.html.js";
import { example } from "./components/example.html.js"; import { example } from "./components/example.html.js";
import { h3, prevNext } from "./components/pageUtils.html.js"; import { h3 } from "./components/pageUtils.html.js";
/** @param {string} url */ /** @param {string} url */
const fileURL= url=> new URL(url, import.meta.url); const fileURL= url=> new URL(url, import.meta.url);
/** @param {import("./types.d.ts").PageAttrs} attrs */ /** @param {import("./types.d.ts").PageAttrs} attrs */
export function page({ pkg, info }){ export function page({ pkg, info }){
const page_id= info.id; const page_id= info.id;
return el().append( return el(simplePage, { info, pkg }).append(
el(header, { info, pkg }),
el("main").append(
el("h2", "Listenning to the native DOM events and other Addons"), el("h2", "Listenning to the native DOM events and other Addons"),
el("p").append( el("p").append(
"We quickly introduce helper to listening to the native DOM events.", "We quickly introduce helper to listening to the native DOM events.",
@ -132,8 +127,5 @@ export function page({ pkg, info }){
), ),
) )
), ),
el(prevNext, info)
)
); );
} }

13
docs_src/p04-signals.html.js
View File

@ -1,19 +1,15 @@
import "./global.css.js"; import { simplePage } from "./layout/simplePage.html.js";
import { el } from "deka-dom-el"; import { el } from "deka-dom-el";
import { header } from "./layout/head.html.js";
import { example } from "./components/example.html.js"; import { example } from "./components/example.html.js";
import { h3, prevNext } from "./components/pageUtils.html.js"; import { h3 } from "./components/pageUtils.html.js";
/** @param {string} url */ /** @param {string} url */
const fileURL= url=> new URL(url, import.meta.url); const fileURL= url=> new URL(url, import.meta.url);
/** @param {import("./types.d.ts").PageAttrs} attrs */ /** @param {import("./types.d.ts").PageAttrs} attrs */
export function page({ pkg, info }){ export function page({ pkg, info }){
const page_id= info.id; const page_id= info.id;
return el().append( return el(simplePage, { info, pkg }).append(
el(header, { info, pkg }),
el("main").append(
el("h2", "Using signals to manage reactivity"), el("h2", "Using signals to manage reactivity"),
el("p").append( el("p").append(
"How a program responds to variable data or user", "How a program responds to variable data or user",
@ -75,6 +71,5 @@ export function page({ pkg, info }){
) )
) )
), ),
)
); );
} }

1
docs_src/types.d.ts vendored
View File

@ -25,4 +25,5 @@ declare global{
interface ddePublicElementTagNameMap{ interface ddePublicElementTagNameMap{
["custom-test"]: CustomHTMLTestElement; ["custom-test"]: CustomHTMLTestElement;
} }
function test(): ddeHTMLParagraphElement
} }

582
index.d.ts vendored
View File

@ -45,7 +45,7 @@ export function classListDeclarative<El extends SupportedElement>(element: El, c
export function assign<El extends SupportedElement>(element: El, ...attrs_array: Partial<ElementAttributes<El>>[]): El export function assign<El extends SupportedElement>(element: El, ...attrs_array: Partial<ElementAttributes<El>>[]): El
export function assignAttribute<El extends SupportedElement, ATT extends keyof ElementAttributes<El>>(element: El, attr: ATT, value: ElementAttributes<El>[ATT]): ElementAttributes<El>[ATT] export function assignAttribute<El extends SupportedElement, ATT extends keyof ElementAttributes<El>>(element: El, attr: ATT, value: ElementAttributes<El>[ATT]): ElementAttributes<El>[ATT]
type ExtendedHTMLElementTagNameMap= HTMLElementTagNameMap & CustomElementTagNameMap & ddePublicElementTagNameMap type ExtendedHTMLElementTagNameMap= ddeHTMLElementTagNameMap & CustomElementTagNameMap & ddePublicElementTagNameMap
export function el<TAG extends keyof ExtendedHTMLElementTagNameMap>( export function el<TAG extends keyof ExtendedHTMLElementTagNameMap>(
tag_name: TAG, tag_name: TAG,
attrs?: string | Partial<ElementAttributes<ExtendedHTMLElementTagNameMap[TAG]>>, attrs?: string | Partial<ElementAttributes<ExtendedHTMLElementTagNameMap[TAG]>>,
@ -53,7 +53,7 @@ export function el<TAG extends keyof ExtendedHTMLElementTagNameMap>(
): ExtendedHTMLElementTagNameMap[TAG] ): ExtendedHTMLElementTagNameMap[TAG]
export function el<T>( export function el<T>(
tag_name?: "<>", tag_name?: "<>",
): DocumentFragment ): ddeDocumentFragment
export function el< export function el<
A extends ddeComponentAttributes, A extends ddeComponentAttributes,
@ -67,22 +67,22 @@ export function el(
tag_name: string, tag_name: string,
attrs?: string | Record<string, any>, attrs?: string | Record<string, any>,
...addons: ddeElementAddon<HTMLElement>[] ...addons: ddeElementAddon<HTMLElement>[]
): HTMLElement ): ddeHTMLElement
export function elNS( export function elNS(
namespace: "http://www.w3.org/2000/svg" namespace: "http://www.w3.org/2000/svg"
): <TAG extends keyof SVGElementTagNameMap, KEYS extends keyof SVGElementTagNameMap[TAG] & { d: string }>( ): <TAG, EL extends ( TAG extends keyof ddeSVGElementTagNameMap ? ddeSVGElementTagNameMap[TAG] : ddeSVGElement ), KEYS extends keyof EL & { d: string }>(
tag_name: TAG, tag_name: TAG,
attrs?: string | Partial<{ [key in KEYS]: SVGElementTagNameMap[TAG][key] | string | number | boolean }>, attrs?: string | Partial<{ [key in KEYS]: EL[key] | string | number | boolean }>,
...addons: ddeElementAddon<SVGElementTagNameMap[TAG]>[] ...addons: ddeElementAddon<EL>[]
)=> SVGElementTagNameMap[TAG] )=> EL
export function elNS( export function elNS(
namespace: "http://www.w3.org/1998/Math/MathML" namespace: "http://www.w3.org/1998/Math/MathML"
): <TAG extends keyof MathMLElementTagNameMap, KEYS extends keyof MathMLElementTagNameMap[TAG] & { d: string }>( ): <TAG extends keyof MathMLElementTagNameMap, KEYS extends keyof MathMLElementTagNameMap[TAG] & { d: string }>(
tag_name: TAG, tag_name: TAG,
attrs?: string | Partial<{ [key in KEYS]: MathMLElementTagNameMap[TAG][key] | string | number | boolean }>, attrs?: string | Partial<{ [key in KEYS]: MathMLElementTagNameMap[TAG][key] | string | number | boolean }>,
...addons: ddeElementAddon<MathMLElementTagNameMap[TAG]>[] ...addons: ddeElementAddon<MathMLElementTagNameMap[TAG]>[]
)=> MathMLElementTagNameMap[TAG] )=> ddeMathMLElement
export function elNS( export function elNS(
namespace: string namespace: string
): ( ): (
@ -92,6 +92,7 @@ export function elNS(
)=> SupportedElement )=> SupportedElement
export function chainableAppend<EL extends SupportedElement>(el: EL): EL; export function chainableAppend<EL extends SupportedElement>(el: EL): EL;
export function simulateSlots<EL extends SupportedElement | DocumentFragment>(el: EL): EL
export function dispatchEvent(name: keyof DocumentEventMap | string, options?: EventInit): export function dispatchEvent(name: keyof DocumentEventMap | string, options?: EventInit):
(element: SupportedElement, data?: any)=> void; (element: SupportedElement, data?: any)=> void;
@ -165,297 +166,280 @@ export const scope: {
pop(): ReturnType<Array<Scope>["pop"]>, pop(): ReturnType<Array<Scope>["pop"]>,
}; };
/* /* TypeScript MEH // TODO for SVG */
* TODO TypeScript HACK (better way?)
* this doesnt works
* ```ts
* interface element<el> extends Node{
* prototype: el;
* append(...els: (SupportedElement | DocumentFragment | string | element<SupportedElement | DocumentFragment>)[]): el
* }
* export function el<T>(
* tag_name?: "<>",
* ): element<DocumentFragment>
* ```
* …as its complains here
* ```ts
* const d= el("div");
* const f= (a: HTMLDivElement)=> a;
* f(d); //←
* document.head.append( //←
* el("script", { src: "https://flems.io/flems.html", type: "text/javascript", charset: "utf-8" }),
* );
* ```
* TODO for SVG
* */
type ddeAppend<el>= (...nodes: (Node | string)[])=> el; type ddeAppend<el>= (...nodes: (Node | string)[])=> el;
declare global{ declare global{
interface HTMLAnchorElement{ interface ddeDocumentFragment extends DocumentFragment{ append: ddeAppend<ddeDocumentFragment>; }
/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */ interface ddeHTMLElement extends HTMLElement{ append: ddeAppend<ddeHTMLElement>; }
append: ddeAppend<HTMLAnchorElement>; interface ddeSVGElement extends SVGElement{ append: ddeAppend<ddeSVGElement>; }
} interface ddeMathMLElement extends MathMLElement{ append: ddeAppend<ddeMathMLElement>; }
interface HTMLElement{
/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */ interface ddeHTMLElementTagNameMap {
append: ddeAppend<HTMLElement>; "a": ddeHTMLAnchorElement;
} "area": ddeHTMLAreaElement;
interface HTMLAreaElement{ "audio": ddeHTMLAudioElement;
/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */ "base": ddeHTMLBaseElement;
append: ddeAppend<HTMLAreaElement>; "blockquote": ddeHTMLQuoteElement;
} "body": ddeHTMLBodyElement;
interface HTMLAudioElement{ "br": ddeHTMLBRElement;
/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */ "button": ddeHTMLButtonElement;
append: ddeAppend<HTMLAudioElement>; "canvas": ddeHTMLCanvasElement;
} "caption": ddeHTMLTableCaptionElement;
interface HTMLBaseElement{ "col": ddeHTMLTableColElement;
/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */ "colgroup": ddeHTMLTableColElement;
append: ddeAppend<HTMLBaseElement>; "data": ddeHTMLDataElement;
} "datalist": ddeHTMLDataListElement;
interface HTMLQuoteElement{ "del": ddeHTMLModElement;
/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */ "details": ddeHTMLDetailsElement;
append: ddeAppend<HTMLQuoteElement>; "dialog": ddeHTMLDialogElement;
} "div": ddeHTMLDivElement;
interface HTMLBodyElement{ "dl": ddeHTMLDListElement;
/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */ "embed": ddeHTMLEmbedElement;
append: ddeAppend<HTMLBodyElement>; "fieldset": ddeHTMLFieldSetElement;
} "form": ddeHTMLFormElement;
interface HTMLBRElement{ "h1": ddeHTMLHeadingElement;
/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */ "h2": ddeHTMLHeadingElement;
append: ddeAppend<HTMLBRElement>; "h3": ddeHTMLHeadingElement;
} "h4": ddeHTMLHeadingElement;
interface HTMLButtonElement{ "h5": ddeHTMLHeadingElement;
/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */ "h6": ddeHTMLHeadingElement;
append: ddeAppend<HTMLButtonElement>; "head": ddeHTMLHeadElement;
} "hr": ddeHTMLHRElement;
interface HTMLCanvasElement{ "html": ddeHTMLHtmlElement;
/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */ "iframe": ddeHTMLIFrameElement;
append: ddeAppend<HTMLCanvasElement>; "img": ddeHTMLImageElement;
} "input": ddeHTMLInputElement;
interface HTMLTableCaptionElement{ "ins": ddeHTMLModElement;
/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */ "label": ddeHTMLLabelElement;
append: ddeAppend<HTMLTableCaptionElement>; "legend": ddeHTMLLegendElement;
} "li": ddeHTMLLIElement;
interface HTMLTableColElement{ "link": ddeHTMLLinkElement;
/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */ "map": ddeHTMLMapElement;
append: ddeAppend<HTMLTableColElement>; "menu": ddeHTMLMenuElement;
} "meta": ddeHTMLMetaElement;
interface HTMLTableColElement{ "meter": ddeHTMLMeterElement;
/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */ "object": ddeHTMLObjectElement;
append: ddeAppend<HTMLTableColElement>; "ol": ddeHTMLOListElement;
} "optgroup": ddeHTMLOptGroupElement;
interface HTMLDataElement{ "option": ddeHTMLOptionElement;
/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */ "output": ddeHTMLOutputElement;
append: ddeAppend<HTMLDataElement>; "p": ddeHTMLParagraphElement;
} "picture": ddeHTMLPictureElement;
interface HTMLDataListElement{ "pre": ddeHTMLPreElement;
/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */ "progress": ddeHTMLProgressElement;
append: ddeAppend<HTMLDataListElement>; "q": ddeHTMLQuoteElement;
} "script": ddeHTMLScriptElement;
interface HTMLModElement{ "select": ddeHTMLSelectElement;
/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */ "slot": ddeHTMLSlotElement;
append: ddeAppend<HTMLModElement>; "source": ddeHTMLSourceElement;
} "span": ddeHTMLSpanElement;
interface HTMLDetailsElement{ "style": ddeHTMLStyleElement;
/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */ "table": ddeHTMLTableElement;
append: ddeAppend<HTMLDetailsElement>; "tbody": ddeHTMLTableSectionElement;
} "td": ddeHTMLTableCellElement;
interface HTMLDialogElement{ "template": ddeHTMLTemplateElement;
/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */ "textarea": ddeHTMLTextAreaElement;
append: ddeAppend<HTMLDialogElement>; "tfoot": ddeHTMLTableSectionElement;
} "th": ddeHTMLTableCellElement;
interface HTMLDivElement{ "thead": ddeHTMLTableSectionElement;
/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */ "time": ddeHTMLTimeElement;
append: ddeAppend<HTMLDivElement>; "title": ddeHTMLTitleElement;
} "tr": ddeHTMLTableRowElement;
interface HTMLDListElement{ "track": ddeHTMLTrackElement;
/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */ "ul": ddeHTMLUListElement;
append: ddeAppend<HTMLDListElement>; "video": ddeHTMLVideoElement;
} }
interface HTMLEmbedElement{ interface ddeHTMLAnchorElement extends HTMLAnchorElement{ append: ddeAppend<ddeHTMLAnchorElement>; }
/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */ interface ddeHTMLAreaElement extends HTMLAreaElement{ append: ddeAppend<ddeHTMLAreaElement>; }
append: ddeAppend<HTMLEmbedElement>; interface ddeHTMLAudioElement extends HTMLAudioElement{ append: ddeAppend<ddeHTMLAudioElement>; }
} interface ddeHTMLBaseElement extends HTMLBaseElement{ append: ddeAppend<ddeHTMLBaseElement>; }
interface HTMLFieldSetElement{ interface ddeHTMLQuoteElement extends HTMLQuoteElement{ append: ddeAppend<ddeHTMLQuoteElement>; }
/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */ interface ddeHTMLBodyElement extends HTMLBodyElement{ append: ddeAppend<ddeHTMLBodyElement>; }
append: ddeAppend<HTMLFieldSetElement>; interface ddeHTMLBRElement extends HTMLBRElement{ append: ddeAppend<ddeHTMLBRElement>; }
} interface ddeHTMLButtonElement extends HTMLButtonElement{ append: ddeAppend<ddeHTMLButtonElement>; }
interface HTMLFormElement{ interface ddeHTMLCanvasElement extends HTMLCanvasElement{ append: ddeAppend<ddeHTMLCanvasElement>; }
/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */ interface ddeHTMLTableCaptionElement extends HTMLTableCaptionElement{ append: ddeAppend<ddeHTMLTableCaptionElement>; }
append: ddeAppend<HTMLFormElement>; interface ddeHTMLTableColElement extends HTMLTableColElement{ append: ddeAppend<ddeHTMLTableColElement>; }
} interface ddeHTMLTableColElement extends HTMLTableColElement{ append: ddeAppend<ddeHTMLTableColElement>; }
interface HTMLHeadingElement{ interface ddeHTMLDataElement extends HTMLDataElement{ append: ddeAppend<ddeHTMLDataElement>; }
/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */ interface ddeHTMLDataListElement extends HTMLDataListElement{ append: ddeAppend<ddeHTMLDataListElement>; }
append: ddeAppend<HTMLHeadingElement>; interface ddeHTMLModElement extends HTMLModElement{ append: ddeAppend<ddeHTMLModElement>; }
} interface ddeHTMLDetailsElement extends HTMLDetailsElement{ append: ddeAppend<ddeHTMLDetailsElement>; }
interface HTMLHeadElement{ interface ddeHTMLDialogElement extends HTMLDialogElement{ append: ddeAppend<ddeHTMLDialogElement>; }
/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */ interface ddeHTMLDivElement extends HTMLDivElement{ append: ddeAppend<ddeHTMLDivElement>; }
append: ddeAppend<HTMLHeadElement>; interface ddeHTMLDListElement extends HTMLDListElement{ append: ddeAppend<ddeHTMLDListElement>; }
} interface ddeHTMLEmbedElement extends HTMLEmbedElement{ append: ddeAppend<ddeHTMLEmbedElement>; }
interface HTMLHRElement{ interface ddeHTMLFieldSetElement extends HTMLFieldSetElement{ append: ddeAppend<ddeHTMLFieldSetElement>; }
/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */ interface ddeHTMLFormElement extends HTMLFormElement{ append: ddeAppend<ddeHTMLFormElement>; }
append: ddeAppend<HTMLHRElement>; interface ddeHTMLHeadingElement extends HTMLHeadingElement{ append: ddeAppend<ddeHTMLHeadingElement>; }
} interface ddeHTMLHeadElement extends HTMLHeadElement{ append: ddeAppend<ddeHTMLHeadElement>; }
interface HTMLHtmlElement{ interface ddeHTMLHRElement extends HTMLHRElement{ append: ddeAppend<ddeHTMLHRElement>; }
/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */ interface ddeHTMLHtmlElement extends HTMLHtmlElement{ append: ddeAppend<ddeHTMLHtmlElement>; }
append: ddeAppend<HTMLHtmlElement>; interface ddeHTMLIFrameElement extends HTMLIFrameElement{ append: ddeAppend<ddeHTMLIFrameElement>; }
} interface ddeHTMLImageElement extends HTMLImageElement{ append: ddeAppend<ddeHTMLImageElement>; }
interface HTMLIFrameElement{ interface ddeHTMLInputElement extends HTMLInputElement{ append: ddeAppend<ddeHTMLInputElement>; }
/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */ interface ddeHTMLLabelElement extends HTMLLabelElement{ append: ddeAppend<ddeHTMLLabelElement>; }
append: ddeAppend<HTMLIFrameElement>; interface ddeHTMLLegendElement extends HTMLLegendElement{ append: ddeAppend<ddeHTMLLegendElement>; }
} interface ddeHTMLLIElement extends HTMLLIElement{ append: ddeAppend<ddeHTMLLIElement>; }
interface HTMLImageElement{ interface ddeHTMLLinkElement extends HTMLLinkElement{ append: ddeAppend<ddeHTMLLinkElement>; }
/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */ interface ddeHTMLMapElement extends HTMLMapElement{ append: ddeAppend<ddeHTMLMapElement>; }
append: ddeAppend<HTMLImageElement>; interface ddeHTMLMenuElement extends HTMLMenuElement{ append: ddeAppend<ddeHTMLMenuElement>; }
} interface ddeHTMLMetaElement extends HTMLMetaElement{ append: ddeAppend<ddeHTMLMetaElement>; }
interface HTMLInputElement{ interface ddeHTMLMeterElement extends HTMLMeterElement{ append: ddeAppend<ddeHTMLMeterElement>; }
/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */ interface ddeHTMLObjectElement extends HTMLObjectElement{ append: ddeAppend<ddeHTMLObjectElement>; }
append: ddeAppend<HTMLInputElement>; interface ddeHTMLOListElement extends HTMLOListElement{ append: ddeAppend<ddeHTMLOListElement>; }
} interface ddeHTMLOptGroupElement extends HTMLOptGroupElement{ append: ddeAppend<ddeHTMLOptGroupElement>; }
interface HTMLLabelElement{ interface ddeHTMLOptionElement extends HTMLOptionElement{ append: ddeAppend<ddeHTMLOptionElement>; }
/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */ interface ddeHTMLOutputElement extends HTMLOutputElement{ append: ddeAppend<ddeHTMLOutputElement>; }
append: ddeAppend<HTMLLabelElement>; interface ddeHTMLParagraphElement extends HTMLParagraphElement{ append: ddeAppend<ddeHTMLParagraphElement>; }
} interface ddeHTMLPictureElement extends HTMLPictureElement{ append: ddeAppend<ddeHTMLPictureElement>; }
interface HTMLLegendElement{ interface ddeHTMLPreElement extends HTMLPreElement{ append: ddeAppend<ddeHTMLPreElement>; }
/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */ interface ddeHTMLProgressElement extends HTMLProgressElement{ append: ddeAppend<ddeHTMLProgressElement>; }
append: ddeAppend<HTMLLegendElement>; interface ddeHTMLScriptElement extends HTMLScriptElement{ append: ddeAppend<ddeHTMLScriptElement>; }
} interface ddeHTMLSelectElement extends HTMLSelectElement{ append: ddeAppend<ddeHTMLSelectElement>; }
interface HTMLLIElement{ interface ddeHTMLSlotElement extends HTMLSlotElement{ append: ddeAppend<ddeHTMLSlotElement>; }
/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */ interface ddeHTMLSourceElement extends HTMLSourceElement{ append: ddeAppend<ddeHTMLSourceElement>; }
append: ddeAppend<HTMLLIElement>; interface ddeHTMLSpanElement extends HTMLSpanElement{ append: ddeAppend<ddeHTMLSpanElement>; }
} interface ddeHTMLStyleElement extends HTMLStyleElement{ append: ddeAppend<ddeHTMLStyleElement>; }
interface HTMLLinkElement{ interface ddeHTMLTableElement extends HTMLTableElement{ append: ddeAppend<ddeHTMLTableElement>; }
/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */ interface ddeHTMLTableSectionElement extends HTMLTableSectionElement{ append: ddeAppend<ddeHTMLTableSectionElement>; }
append: ddeAppend<HTMLLinkElement>; interface ddeHTMLTableCellElement extends HTMLTableCellElement{ append: ddeAppend<ddeHTMLTableCellElement>; }
} interface ddeHTMLTemplateElement extends HTMLTemplateElement{ append: ddeAppend<ddeHTMLTemplateElement>; }
interface HTMLMapElement{ interface ddeHTMLTextAreaElement extends HTMLTextAreaElement{ append: ddeAppend<ddeHTMLTextAreaElement>; }
/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */ interface ddeHTMLTableCellElement extends HTMLTableCellElement{ append: ddeAppend<ddeHTMLTableCellElement>; }
append: ddeAppend<HTMLMapElement>; interface ddeHTMLTimeElement extends HTMLTimeElement{ append: ddeAppend<ddeHTMLTimeElement>; }
} interface ddeHTMLTitleElement extends HTMLTitleElement{ append: ddeAppend<ddeHTMLTitleElement>; }
interface HTMLMenuElement{ interface ddeHTMLTableRowElement extends HTMLTableRowElement{ append: ddeAppend<ddeHTMLTableRowElement>; }
/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */ interface ddeHTMLTrackElement extends HTMLTrackElement{ append: ddeAppend<ddeHTMLTrackElement>; }
append: ddeAppend<HTMLMenuElement>; interface ddeHTMLUListElement extends HTMLUListElement{ append: ddeAppend<ddeHTMLUListElement>; }
} interface ddeHTMLVideoElement extends HTMLVideoElement{ append: ddeAppend<ddeHTMLVideoElement>; }
interface HTMLMetaElement{
/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */ interface ddeSVGElementTagNameMap {
append: ddeAppend<HTMLMetaElement>; "a": ddeSVGAElement;
} "animate": ddeSVGAnimateElement;
interface HTMLMeterElement{ "animateMotion": ddeSVGAnimateMotionElement;
/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */ "animateTransform": ddeSVGAnimateTransformElement;
append: ddeAppend<HTMLMeterElement>; "circle": ddeSVGCircleElement;
} "clipPath": ddeSVGClipPathElement;
interface HTMLObjectElement{ "defs": ddeSVGDefsElement;
/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */ "desc": ddeSVGDescElement;
append: ddeAppend<HTMLObjectElement>; "ellipse": ddeSVGEllipseElement;
} "feBlend": ddeSVGFEBlendElement;
interface HTMLOListElement{ "feColorMatrix": ddeSVGFEColorMatrixElement;
/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */ "feComponentTransfer": ddeSVGFEComponentTransferElement;
append: ddeAppend<HTMLOListElement>; "feComposite": ddeSVGFECompositeElement;
} "feConvolveMatrix": ddeSVGFEConvolveMatrixElement;
interface HTMLOptGroupElement{ "feDiffuseLighting": ddeSVGFEDiffuseLightingElement;
/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */ "feDisplacementMap": ddeSVGFEDisplacementMapElement;
append: ddeAppend<HTMLOptGroupElement>; "feDistantLight": ddeSVGFEDistantLightElement;
} "feDropShadow": ddeSVGFEDropShadowElement;
interface HTMLOptionElement{ "feFlood": ddeSVGFEFloodElement;
/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */ "feFuncA": ddeSVGFEFuncAElement;
append: ddeAppend<HTMLOptionElement>; "feFuncB": ddeSVGFEFuncBElement;
} "feFuncG": ddeSVGFEFuncGElement;
interface HTMLOutputElement{ "feFuncR": ddeSVGFEFuncRElement;
/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */ "feGaussianBlur": ddeSVGFEGaussianBlurElement;
append: ddeAppend<HTMLOutputElement>; "feImage": ddeSVGFEImageElement;
} "feMerge": ddeSVGFEMergeElement;
interface HTMLParagraphElement{ "feMergeNode": ddeSVGFEMergeNodeElement;
/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */ "feMorphology": ddeSVGFEMorphologyElement;
append: ddeAppend<HTMLParagraphElement>; "feOffset": ddeSVGFEOffsetElement;
} "fePointLight": ddeSVGFEPointLightElement;
interface HTMLPictureElement{ "feSpecularLighting": ddeSVGFESpecularLightingElement;
/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */ "feSpotLight": ddeSVGFESpotLightElement;
append: ddeAppend<HTMLPictureElement>; "feTile": ddeSVGFETileElement;
} "feTurbulence": ddeSVGFETurbulenceElement;
interface HTMLPreElement{ "filter": ddeSVGFilterElement;
/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */ "foreignObject": ddeSVGForeignObjectElement;
append: ddeAppend<HTMLPreElement>; "g": ddeSVGGElement;
} "image": ddeSVGImageElement;
interface HTMLProgressElement{ "line": ddeSVGLineElement;
/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */ "linearGradient": ddeSVGLinearGradientElement;
append: ddeAppend<HTMLProgressElement>; "marker": ddeSVGMarkerElement;
} "mask": ddeSVGMaskElement;
interface HTMLScriptElement{ "metadata": ddeSVGMetadataElement;
/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */ "mpath": ddeSVGMPathElement;
append: ddeAppend<HTMLScriptElement>; "path": ddeSVGPathElement;
} "pattern": ddeSVGPatternElement;
interface HTMLSelectElement{ "polygon": ddeSVGPolygonElement;
/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */ "polyline": ddeSVGPolylineElement;
append: ddeAppend<HTMLSelectElement>; "radialGradient": ddeSVGRadialGradientElement;
} "rect": ddeSVGRectElement;
interface HTMLSlotElement{ "script": ddeSVGScriptElement;
/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */ "set": ddeSVGSetElement;
append: ddeAppend<HTMLSlotElement>; "stop": ddeSVGStopElement;
} "style": ddeSVGStyleElement;
interface HTMLSourceElement{ "svg": ddeSVGSVGElement;
/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */ "switch": ddeSVGSwitchElement;
append: ddeAppend<HTMLSourceElement>; "symbol": ddeSVGSymbolElement;
} "text": ddeSVGTextElement;
interface HTMLSpanElement{ "textPath": ddeSVGTextPathElement;
/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */ "title": ddeSVGTitleElement;
append: ddeAppend<HTMLSpanElement>; "tspan": ddeSVGTSpanElement;
} "use": ddeSVGUseElement;
interface HTMLStyleElement{ "view": ddeSVGViewElement;
/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */ }
append: ddeAppend<HTMLStyleElement>; interface ddeSVGAElement extends SVGAElement{ append: ddeAppend<ddeSVGAElement>; }
} interface ddeSVGAnimateElement extends SVGAnimateElement{ append: ddeAppend<ddeSVGAnimateElement>; }
interface HTMLTableElement{ interface ddeSVGAnimateMotionElement extends SVGAnimateMotionElement{ append: ddeAppend<ddeSVGAnimateMotionElement>; }
/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */ interface ddeSVGAnimateTransformElement extends SVGAnimateTransformElement{ append: ddeAppend<ddeSVGAnimateTransformElement>; }
append: ddeAppend<HTMLTableElement>; interface ddeSVGCircleElement extends SVGCircleElement{ append: ddeAppend<ddeSVGCircleElement>; }
} interface ddeSVGClipPathElement extends SVGClipPathElement{ append: ddeAppend<ddeSVGClipPathElement>; }
interface HTMLTableSectionElement{ interface ddeSVGDefsElement extends SVGDefsElement{ append: ddeAppend<ddeSVGDefsElement>; }
/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */ interface ddeSVGDescElement extends SVGDescElement{ append: ddeAppend<ddeSVGDescElement>; }
append: ddeAppend<HTMLTableSectionElement>; interface ddeSVGEllipseElement extends SVGEllipseElement{ append: ddeAppend<ddeSVGEllipseElement>; }
} interface ddeSVGFEBlendElement extends SVGFEBlendElement{ append: ddeAppend<ddeSVGFEBlendElement>; }
interface HTMLTableCellElement{ interface ddeSVGFEColorMatrixElement extends SVGFEColorMatrixElement{ append: ddeAppend<ddeSVGFEColorMatrixElement>; }
/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */ interface ddeSVGFEComponentTransferElement extends SVGFEComponentTransferElement{ append: ddeAppend<ddeSVGFEComponentTransferElement>; }
append: ddeAppend<HTMLTableCellElement>; interface ddeSVGFECompositeElement extends SVGFECompositeElement{ append: ddeAppend<ddeSVGFECompositeElement>; }
} interface ddeSVGFEConvolveMatrixElement extends SVGFEConvolveMatrixElement{ append: ddeAppend<ddeSVGFEConvolveMatrixElement>; }
interface HTMLTemplateElement{ interface ddeSVGFEDiffuseLightingElement extends SVGFEDiffuseLightingElement{ append: ddeAppend<ddeSVGFEDiffuseLightingElement>; }
/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */ interface ddeSVGFEDisplacementMapElement extends SVGFEDisplacementMapElement{ append: ddeAppend<ddeSVGFEDisplacementMapElement>; }
append: ddeAppend<HTMLTemplateElement>; interface ddeSVGFEDistantLightElement extends SVGFEDistantLightElement{ append: ddeAppend<ddeSVGFEDistantLightElement>; }
} interface ddeSVGFEDropShadowElement extends SVGFEDropShadowElement{ append: ddeAppend<ddeSVGFEDropShadowElement>; }
interface HTMLTextAreaElement{ interface ddeSVGFEFloodElement extends SVGFEFloodElement{ append: ddeAppend<ddeSVGFEFloodElement>; }
/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */ interface ddeSVGFEFuncAElement extends SVGFEFuncAElement{ append: ddeAppend<ddeSVGFEFuncAElement>; }
append: ddeAppend<HTMLTextAreaElement>; interface ddeSVGFEFuncBElement extends SVGFEFuncBElement{ append: ddeAppend<ddeSVGFEFuncBElement>; }
} interface ddeSVGFEFuncGElement extends SVGFEFuncGElement{ append: ddeAppend<ddeSVGFEFuncGElement>; }
interface HTMLTableCellElement{ interface ddeSVGFEFuncRElement extends SVGFEFuncRElement{ append: ddeAppend<ddeSVGFEFuncRElement>; }
/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */ interface ddeSVGFEGaussianBlurElement extends SVGFEGaussianBlurElement{ append: ddeAppend<ddeSVGFEGaussianBlurElement>; }
append: ddeAppend<HTMLTableCellElement>; interface ddeSVGFEImageElement extends SVGFEImageElement{ append: ddeAppend<ddeSVGFEImageElement>; }
} interface ddeSVGFEMergeElement extends SVGFEMergeElement{ append: ddeAppend<ddeSVGFEMergeElement>; }
interface HTMLTimeElement{ interface ddeSVGFEMergeNodeElement extends SVGFEMergeNodeElement{ append: ddeAppend<ddeSVGFEMergeNodeElement>; }
/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */ interface ddeSVGFEMorphologyElement extends SVGFEMorphologyElement{ append: ddeAppend<ddeSVGFEMorphologyElement>; }
append: ddeAppend<HTMLTimeElement>; interface ddeSVGFEOffsetElement extends SVGFEOffsetElement{ append: ddeAppend<ddeSVGFEOffsetElement>; }
} interface ddeSVGFEPointLightElement extends SVGFEPointLightElement{ append: ddeAppend<ddeSVGFEPointLightElement>; }
interface HTMLTitleElement{ interface ddeSVGFESpecularLightingElement extends SVGFESpecularLightingElement{ append: ddeAppend<ddeSVGFESpecularLightingElement>; }
/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */ interface ddeSVGFESpotLightElement extends SVGFESpotLightElement{ append: ddeAppend<ddeSVGFESpotLightElement>; }
append: ddeAppend<HTMLTitleElement>; interface ddeSVGFETileElement extends SVGFETileElement{ append: ddeAppend<ddeSVGFETileElement>; }
} interface ddeSVGFETurbulenceElement extends SVGFETurbulenceElement{ append: ddeAppend<ddeSVGFETurbulenceElement>; }
interface HTMLTableRowElement{ interface ddeSVGFilterElement extends SVGFilterElement{ append: ddeAppend<ddeSVGFilterElement>; }
/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */ interface ddeSVGForeignObjectElement extends SVGForeignObjectElement{ append: ddeAppend<ddeSVGForeignObjectElement>; }
append: ddeAppend<HTMLTableRowElement>; interface ddeSVGGElement extends SVGGElement{ append: ddeAppend<ddeSVGGElement>; }
} interface ddeSVGImageElement extends SVGImageElement{ append: ddeAppend<ddeSVGImageElement>; }
interface HTMLTrackElement{ interface ddeSVGLineElement extends SVGLineElement{ append: ddeAppend<ddeSVGLineElement>; }
/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */ interface ddeSVGLinearGradientElement extends SVGLinearGradientElement{ append: ddeAppend<ddeSVGLinearGradientElement>; }
append: ddeAppend<HTMLTrackElement>; interface ddeSVGMarkerElement extends SVGMarkerElement{ append: ddeAppend<ddeSVGMarkerElement>; }
} interface ddeSVGMaskElement extends SVGMaskElement{ append: ddeAppend<ddeSVGMaskElement>; }
interface HTMLUListElement{ interface ddeSVGMetadataElement extends SVGMetadataElement{ append: ddeAppend<ddeSVGMetadataElement>; }
/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */ interface ddeSVGMPathElement extends SVGMPathElement{ append: ddeAppend<ddeSVGMPathElement>; }
append: ddeAppend<HTMLUListElement>; interface ddeSVGPathElement extends SVGPathElement{ append: ddeAppend<ddeSVGPathElement>; }
} interface ddeSVGPatternElement extends SVGPatternElement{ append: ddeAppend<ddeSVGPatternElement>; }
interface HTMLVideoElement{ interface ddeSVGPolygonElement extends SVGPolygonElement{ append: ddeAppend<ddeSVGPolygonElement>; }
/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */ interface ddeSVGPolylineElement extends SVGPolylineElement{ append: ddeAppend<ddeSVGPolylineElement>; }
append: ddeAppend<HTMLVideoElement>; interface ddeSVGRadialGradientElement extends SVGRadialGradientElement{ append: ddeAppend<ddeSVGRadialGradientElement>; }
} interface ddeSVGRectElement extends SVGRectElement{ append: ddeAppend<ddeSVGRectElement>; }
interface DocumentFragment{ interface ddeSVGScriptElement extends SVGScriptElement{ append: ddeAppend<ddeSVGScriptElement>; }
/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */ interface ddeSVGSetElement extends SVGSetElement{ append: ddeAppend<ddeSVGSetElement>; }
append: ddeAppend<DocumentFragment>; interface ddeSVGStopElement extends SVGStopElement{ append: ddeAppend<ddeSVGStopElement>; }
} interface ddeSVGStyleElement extends SVGStyleElement{ append: ddeAppend<ddeSVGStyleElement>; }
interface SVGElement{ interface ddeSVGSVGElement extends SVGSVGElement{ append: ddeAppend<ddeSVGSVGElement>; }
/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */ interface ddeSVGSwitchElement extends SVGSwitchElement{ append: ddeAppend<ddeSVGSwitchElement>; }
append: ddeAppend<SVGElement>; interface ddeSVGSymbolElement extends SVGSymbolElement{ append: ddeAppend<ddeSVGSymbolElement>; }
} interface ddeSVGTextElement extends SVGTextElement{ append: ddeAppend<ddeSVGTextElement>; }
interface ddeSVGTextPathElement extends SVGTextPathElement{ append: ddeAppend<ddeSVGTextPathElement>; }
interface ddeSVGTitleElement extends SVGTitleElement{ append: ddeAppend<ddeSVGTitleElement>; }
interface ddeSVGTSpanElement extends SVGTSpanElement{ append: ddeAppend<ddeSVGTSpanElement>; }
interface ddeSVGUseElement extends SVGUseElement{ append: ddeAppend<ddeSVGUseElement>; }
interface ddeSVGViewElement extends SVGViewElement{ append: ddeAppend<ddeSVGViewElement>; }
} }

2
package.json
View File

@ -58,7 +58,7 @@
"size-limit": [ "size-limit": [
{ {
"path": "./index.js", "path": "./index.js",
"limit": "8.5 kB", "limit": "9 kB",
"gzip": false "gzip": false
}, },
{ {

31
src/dom.js
View File

@ -66,6 +66,37 @@ export function createElement(tag, attributes, ...addons){
scoped= 2; scoped= 2;
return el; return el;
} }
/** @param {HTMLElement} element */
export function simulateSlots(element){
const _default= Symbol.for("default");
const slots= Array.from(element.querySelectorAll("slot"))
.reduce((out, curr)=> Reflect.set(out, curr.name || _default, curr) && out, {});
const has_d= Reflect.has(slots, _default);
element.append= new Proxy(element.append, {
apply(_1, _2, els){
if(!els.length) return element;
const d= document.createDocumentFragment();
for(const el of els){
if(!el || !el.slot){ if(has_d) d.appendChild(el); continue; }
const name= el.slot;
const slot= slots[name];
elementAttribute(el, "remove", "slot");
if(!slot) continue;
slot.replaceWith(el);
Reflect.deleteProperty(slots, name);
}
if(has_d){
slots[_default].replaceWith(d);
Reflect.deleteProperty(slots, _default);
}
Object.values(slots)
.forEach(slot=> slot.replaceWith(createElement().append(...Array.from(slot.childNodes))));
return element;
}
});
return element;
}
/** /**
* @param { { type: "component", name: string, host: "this" | "parentElement" } | { type: "reactive" | "later" } } attrs * @param { { type: "component", name: string, host: "this" | "parentElement" } | { type: "reactive" | "later" } } attrs
* @param {boolean} [is_open=false] * @param {boolean} [is_open=false]