mirror of
https://github.com/jaandrle/deka-dom-el
synced 2024-11-23 00:59:38 +01:00
Compare commits
5 Commits
6a293d75a6
...
420defe4a2
| Author | SHA1 | Date | |
|---|---|---|---|
420defe4a2
|
|||
|
3bbcb0eff7
|
|||
|
58b73dcbc7
|
|||
|
fc4037f3eb
|
|||
|
fb02635d24
|
10
README.md
10
README.md
@ -23,7 +23,7 @@ document.body.append(
|
||||
|
||||
);
|
||||
function component({ textContent, className }){
|
||||
const value= S("onchange");
|
||||
const value= O("onchange");
|
||||
|
||||
return el().append(
|
||||
el("p", { textContent, className }),
|
||||
@ -35,8 +35,8 @@ function component({ textContent, className }){
|
||||
}
|
||||
```
|
||||
# Deka DOM Elements
|
||||
Creating reactive elements, components and Web components using [IDL](https://developer.mozilla.org/en-US/docs/Glossary/IDL)/JavaScript DOM API and signals
|
||||
([Signals — whats going on behind the scenes | by Ryan Hoffnan | ITNEXT](https://itnext.io/signals-whats-going-on-behind-the-scenes-ec858589ea63) or [The Evolution of Signals in JavaScript - DEV Community](https://dev.to/this-is-learning/the-evolution-of-signals-in-javascript-8ob)).
|
||||
Creating reactive elements, components and Web components using [IDL](https://developer.mozilla.org/en-US/docs/Glossary/IDL)/JavaScript DOM API and signals/observables
|
||||
([Signals — whats going on behind the scenes | by Ryan Hoffnan | ITNEXT](https://itnext.io/signals-whats-going-on-behind-the-scenes-ec858589ea63), [The Evolution of Signals in JavaScript - DEV Community](https://dev.to/this-is-learning/the-evolution-of-signals-in-javascript-8ob) or [Observer pattern - Wikipedia](https://en.wikipedia.org/wiki/Observer_pattern)).
|
||||
|
||||
## Inspiration and suggested alternatives
|
||||
- my previous library (mostly used internaly): [jaandrle/dollar_dom_component: Functional DOM components without JSX and virtual DOM.](https://github.com/jaandrle/dollar_dom_component)
|
||||
@ -53,13 +53,13 @@ Another goal is to proceed in the best spirit of functional programming. This in
|
||||
pure JavaScript (DOM API) and gradually adding auxiliary functions, ranging from “minor” improvements
|
||||
to the capability of writing complete declarative reactive UI templates.
|
||||
|
||||
As a result, any “internal” function (`assign`, `classListDeclarative`, `on`, `dispatchEvent`, …, `S`, …)
|
||||
As a result, any “internal” function (`assign`, `classListDeclarative`, `on`, `dispatchEvent`, …, `O`, …)
|
||||
can be used independently, although they are primarily designed for use in combination. This can also,
|
||||
hopefully, help in integrating the library into existing projects.
|
||||
|
||||
To balance these requirements, numerous compromises have been made. To summarize:
|
||||
- [ ] Library size: 10–15kB minified (the original goal was a maximum of 10kB)
|
||||
- [x] Optional use of *signals* with the ability to register *your own signals implementation*
|
||||
- [x] Optional use of *observables* with the ability to register *your own signals/observables implementation*
|
||||
- [x] *No build step required*
|
||||
- [x] Preference for a *declarative/functional* approach
|
||||
- [x] Focus on zero/minimal dependencies
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
#!/usr/bin/env -S npx nodejsscript
|
||||
import { bundle as bundleDTS } from "dts-bundler";
|
||||
const files= [ "index", "index-with-signals" ];
|
||||
const files= [ "index", "index-with-observables" ];
|
||||
const filesOut= (file, mark= "esm")=> "dist/"+file.replace("index", mark);
|
||||
const css= echo.css`
|
||||
.info{ color: gray; }
|
||||
|
||||
27
dist/dde-with-observables.js
vendored
Normal file
27
dist/dde-with-observables.js
vendored
Normal file
File diff suppressed because one or more lines are too long
25
dist/dde-with-signals.js
vendored
25
dist/dde-with-signals.js
vendored
File diff suppressed because one or more lines are too long
27
dist/dde.js
vendored
27
dist/dde.js
vendored
File diff suppressed because one or more lines are too long
510
dist/esm-with-observables.d.ts
vendored
Normal file
510
dist/esm-with-observables.d.ts
vendored
Normal file
@ -0,0 +1,510 @@
|
||||
type CustomElementTagNameMap= { '#text': Text, '#comment': Comment }
|
||||
declare global {
|
||||
interface ddePublicElementTagNameMap{
|
||||
}
|
||||
}
|
||||
type SupportedElement=
|
||||
HTMLElementTagNameMap[keyof HTMLElementTagNameMap]
|
||||
| SVGElementTagNameMap[keyof SVGElementTagNameMap]
|
||||
| MathMLElementTagNameMap[keyof MathMLElementTagNameMap]
|
||||
| CustomElementTagNameMap[keyof CustomElementTagNameMap]
|
||||
| ddePublicElementTagNameMap[keyof ddePublicElementTagNameMap];
|
||||
declare global {
|
||||
type ddeComponentAttributes= Record<any, any> | undefined;
|
||||
type ddeElementAddon<El extends SupportedElement | DocumentFragment>= (element: El)=> El | void;
|
||||
}
|
||||
type PascalCase=
|
||||
`${Capitalize<string>}${string}`;
|
||||
type AttrsModified= {
|
||||
/**
|
||||
* Use string like in HTML (internally uses `*.setAttribute("style", *)`), or object representation (like DOM API).
|
||||
*/
|
||||
style: string | Partial<CSSStyleDeclaration>
|
||||
/**
|
||||
* Provide option to add/remove/toggle CSS clasess (index of object) using 1/0/-1. In fact `el.classList.toggle(class_name)` for `-1` and `el.classList.toggle(class_name, Boolean(...))` for others.
|
||||
*/
|
||||
classList: Record<string,-1|0|1|boolean>,
|
||||
/**
|
||||
* By default simiral to `className`, but also supports `string[]`
|
||||
* */
|
||||
className: string | (string|boolean|undefined)[];
|
||||
/**
|
||||
* Sets `aria-*` simiraly to `dataset`
|
||||
* */
|
||||
ariaset: Record<string,string>,
|
||||
} & Record<`=${string}` | `data${PascalCase}` | `aria${PascalCase}`, string> & Record<`.${string}`, any>
|
||||
/**
|
||||
* Just element attributtes
|
||||
*
|
||||
* In most cases, you can use native propertie such as [MDN WEB/API/Element](https://developer.mozilla.org/en-US/docs/Web/API/Element) and so on (e.g. [`Text`](https://developer.mozilla.org/en-US/docs/Web/API/Text)).
|
||||
*
|
||||
* There is added support for `data[A-Z].*`/`aria[A-Z].*` to be converted to the kebab-case alternatives.
|
||||
* @private
|
||||
*/
|
||||
type ElementAttributes<T extends SupportedElement>= Omit<T,keyof AttrsModified> & AttrsModified;
|
||||
export function classListDeclarative<El extends SupportedElement>(element: El, classList: AttrsModified["classList"]): 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]
|
||||
|
||||
type ExtendedHTMLElementTagNameMap= ddeHTMLElementTagNameMap & CustomElementTagNameMap & ddePublicElementTagNameMap
|
||||
export function el<TAG extends keyof ExtendedHTMLElementTagNameMap>(
|
||||
tag_name: TAG,
|
||||
attrs?: string | Partial<ElementAttributes<ExtendedHTMLElementTagNameMap[TAG]>>,
|
||||
...addons: ddeElementAddon<ExtendedHTMLElementTagNameMap[TAG]>[]
|
||||
): ExtendedHTMLElementTagNameMap[TAG]
|
||||
export function el<T>(
|
||||
tag_name?: "<>",
|
||||
): ddeDocumentFragment
|
||||
|
||||
export function el<
|
||||
A extends ddeComponentAttributes,
|
||||
C extends (attr: Partial<A>)=> SupportedElement | DocumentFragment>(
|
||||
fComponent: C,
|
||||
attrs?: A | string,
|
||||
...addons: ddeElementAddon<ReturnType<C>>[]
|
||||
): ReturnType<C>
|
||||
|
||||
export function el(
|
||||
tag_name: string,
|
||||
attrs?: string | Record<string, any>,
|
||||
...addons: ddeElementAddon<HTMLElement>[]
|
||||
): ddeHTMLElement
|
||||
|
||||
export function elNS(
|
||||
namespace: "http://www.w3.org/2000/svg"
|
||||
): <TAG, EL extends ( TAG extends keyof ddeSVGElementTagNameMap ? ddeSVGElementTagNameMap[TAG] : ddeSVGElement ), KEYS extends keyof EL & { d: string }>(
|
||||
tag_name: TAG,
|
||||
attrs?: string | Partial<{ [key in KEYS]: EL[key] | string | number | boolean }>,
|
||||
...addons: ddeElementAddon<EL>[]
|
||||
)=> EL
|
||||
export function elNS(
|
||||
namespace: "http://www.w3.org/1998/Math/MathML"
|
||||
): <TAG extends keyof MathMLElementTagNameMap, KEYS extends keyof MathMLElementTagNameMap[TAG] & { d: string }>(
|
||||
tag_name: TAG,
|
||||
attrs?: string | Partial<{ [key in KEYS]: MathMLElementTagNameMap[TAG][key] | string | number | boolean }>,
|
||||
...addons: ddeElementAddon<MathMLElementTagNameMap[TAG]>[]
|
||||
)=> ddeMathMLElement
|
||||
export function elNS(
|
||||
namespace: string
|
||||
): (
|
||||
tag_name: string,
|
||||
attrs?: string | Record<string, any>,
|
||||
...addons: ddeElementAddon<SupportedElement>[]
|
||||
)=> SupportedElement
|
||||
|
||||
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):
|
||||
(element: SupportedElement, data?: any)=> void;
|
||||
export function dispatchEvent(name: keyof DocumentEventMap | string, options: EventInit | null, element: SupportedElement | (()=> SupportedElement)):
|
||||
(data?: any)=> void;
|
||||
interface On{
|
||||
/** Listens to the DOM event. See {@link Document.addEventListener} */
|
||||
<
|
||||
EE extends ddeElementAddon<SupportedElement>,
|
||||
El extends ( EE extends ddeElementAddon<infer El> ? El : never ),
|
||||
Event extends keyof DocumentEventMap>(
|
||||
type: Event,
|
||||
listener: (this: El, ev: DocumentEventMap[Event]) => any,
|
||||
options?: AddEventListenerOptions
|
||||
) : EE;
|
||||
<
|
||||
EE extends ddeElementAddon<SupportedElement>,
|
||||
El extends ( EE extends ddeElementAddon<infer El> ? El : never )>(
|
||||
type: string,
|
||||
listener: (this: El, ev: Event | CustomEvent ) => any,
|
||||
options?: AddEventListenerOptions
|
||||
) : EE;
|
||||
/** Listens to the element is connected to the live DOM. In case of custom elements uses [`connectedCallback`](https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_custom_elements#custom_element_lifecycle_callbacks), or {@link MutationObserver} else where */
|
||||
connected<
|
||||
EE extends ddeElementAddon<SupportedElement>,
|
||||
El extends ( EE extends ddeElementAddon<infer El> ? El : never )
|
||||
>(
|
||||
listener: (this: El, event: CustomEvent<void>) => any,
|
||||
options?: AddEventListenerOptions
|
||||
) : EE;
|
||||
/** Listens to the element is disconnected from the live DOM. In case of custom elements uses [`disconnectedCallback`](https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_custom_elements#custom_element_lifecycle_callbacks), or {@link MutationObserver} else where */
|
||||
disconnected<
|
||||
EE extends ddeElementAddon<SupportedElement>,
|
||||
El extends ( EE extends ddeElementAddon<infer El> ? El : never )
|
||||
>(
|
||||
listener: (this: El, event: CustomEvent<void>) => any,
|
||||
options?: AddEventListenerOptions
|
||||
) : EE;
|
||||
/** Listens to the element attribute changes. In case of custom elements uses [`attributeChangedCallback`](https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_custom_elements#custom_element_lifecycle_callbacks), or {@link MutationObserver} else where */
|
||||
attributeChanged<
|
||||
EE extends ddeElementAddon<SupportedElement>,
|
||||
El extends ( EE extends ddeElementAddon<infer El> ? El : never )
|
||||
>(
|
||||
listener: (this: El, event: CustomEvent<[ string, string ]>) => any,
|
||||
options?: AddEventListenerOptions
|
||||
) : EE;
|
||||
}
|
||||
export const on: On;
|
||||
|
||||
type Scope= { scope: Node | Function | Object, host: ddeElementAddon<any>, custom_element: false | HTMLElement, prevent: boolean }
|
||||
/** Current scope created last time the `el(Function)` was invoke. (Or {@link scope.push}) */
|
||||
export const scope: {
|
||||
current: Scope,
|
||||
/** Stops all automatizations. E. g. signals used as attributes in current scope
|
||||
* registers removing these listeners (and clean signal if no other listeners are detected)
|
||||
* on `disconnected` event. */
|
||||
preventDefault<T extends boolean>(prevent: T): T,
|
||||
/**
|
||||
* This represents reference to the current host element — `scope.host()`.
|
||||
* It can be also used to register Addon(s) (functions to be called when component is initized)
|
||||
* — `scope.host(on.connected(console.log))`.
|
||||
* */
|
||||
host: (...addons: ddeElementAddon<any>[])=> HTMLElement,
|
||||
|
||||
state: Scope[],
|
||||
/** Adds new child scope. All attributes are inherited by default. */
|
||||
push(scope: Partial<Scope>): ReturnType<Array<Scope>["push"]>,
|
||||
/** Adds root scope as a child of the current scope. */
|
||||
pushRoot(): ReturnType<Array<Scope>["push"]>,
|
||||
/** Removes last/current child scope. */
|
||||
pop(): ReturnType<Array<Scope>["pop"]>,
|
||||
};
|
||||
|
||||
/* TypeScript MEH // TODO for SVG */
|
||||
type ddeAppend<el>= (...nodes: (Node | string)[])=> el;
|
||||
declare global{
|
||||
interface ddeDocumentFragment extends DocumentFragment{ append: ddeAppend<ddeDocumentFragment>; }
|
||||
interface ddeHTMLElement extends HTMLElement{ append: ddeAppend<ddeHTMLElement>; }
|
||||
interface ddeSVGElement extends SVGElement{ append: ddeAppend<ddeSVGElement>; }
|
||||
interface ddeMathMLElement extends MathMLElement{ append: ddeAppend<ddeMathMLElement>; }
|
||||
|
||||
interface ddeHTMLElementTagNameMap {
|
||||
"a": ddeHTMLAnchorElement;
|
||||
"area": ddeHTMLAreaElement;
|
||||
"audio": ddeHTMLAudioElement;
|
||||
"base": ddeHTMLBaseElement;
|
||||
"blockquote": ddeHTMLQuoteElement;
|
||||
"body": ddeHTMLBodyElement;
|
||||
"br": ddeHTMLBRElement;
|
||||
"button": ddeHTMLButtonElement;
|
||||
"canvas": ddeHTMLCanvasElement;
|
||||
"caption": ddeHTMLTableCaptionElement;
|
||||
"col": ddeHTMLTableColElement;
|
||||
"colgroup": ddeHTMLTableColElement;
|
||||
"data": ddeHTMLDataElement;
|
||||
"datalist": ddeHTMLDataListElement;
|
||||
"del": ddeHTMLModElement;
|
||||
"details": ddeHTMLDetailsElement;
|
||||
"dialog": ddeHTMLDialogElement;
|
||||
"div": ddeHTMLDivElement;
|
||||
"dl": ddeHTMLDListElement;
|
||||
"embed": ddeHTMLEmbedElement;
|
||||
"fieldset": ddeHTMLFieldSetElement;
|
||||
"form": ddeHTMLFormElement;
|
||||
"h1": ddeHTMLHeadingElement;
|
||||
"h2": ddeHTMLHeadingElement;
|
||||
"h3": ddeHTMLHeadingElement;
|
||||
"h4": ddeHTMLHeadingElement;
|
||||
"h5": ddeHTMLHeadingElement;
|
||||
"h6": ddeHTMLHeadingElement;
|
||||
"head": ddeHTMLHeadElement;
|
||||
"hr": ddeHTMLHRElement;
|
||||
"html": ddeHTMLHtmlElement;
|
||||
"iframe": ddeHTMLIFrameElement;
|
||||
"img": ddeHTMLImageElement;
|
||||
"input": ddeHTMLInputElement;
|
||||
"ins": ddeHTMLModElement;
|
||||
"label": ddeHTMLLabelElement;
|
||||
"legend": ddeHTMLLegendElement;
|
||||
"li": ddeHTMLLIElement;
|
||||
"link": ddeHTMLLinkElement;
|
||||
"map": ddeHTMLMapElement;
|
||||
"menu": ddeHTMLMenuElement;
|
||||
"meta": ddeHTMLMetaElement;
|
||||
"meter": ddeHTMLMeterElement;
|
||||
"object": ddeHTMLObjectElement;
|
||||
"ol": ddeHTMLOListElement;
|
||||
"optgroup": ddeHTMLOptGroupElement;
|
||||
"option": ddeHTMLOptionElement;
|
||||
"output": ddeHTMLOutputElement;
|
||||
"p": ddeHTMLParagraphElement;
|
||||
"picture": ddeHTMLPictureElement;
|
||||
"pre": ddeHTMLPreElement;
|
||||
"progress": ddeHTMLProgressElement;
|
||||
"q": ddeHTMLQuoteElement;
|
||||
"script": ddeHTMLScriptElement;
|
||||
"select": ddeHTMLSelectElement;
|
||||
"slot": ddeHTMLSlotElement;
|
||||
"source": ddeHTMLSourceElement;
|
||||
"span": ddeHTMLSpanElement;
|
||||
"style": ddeHTMLStyleElement;
|
||||
"table": ddeHTMLTableElement;
|
||||
"tbody": ddeHTMLTableSectionElement;
|
||||
"td": ddeHTMLTableCellElement;
|
||||
"template": ddeHTMLTemplateElement;
|
||||
"textarea": ddeHTMLTextAreaElement;
|
||||
"tfoot": ddeHTMLTableSectionElement;
|
||||
"th": ddeHTMLTableCellElement;
|
||||
"thead": ddeHTMLTableSectionElement;
|
||||
"time": ddeHTMLTimeElement;
|
||||
"title": ddeHTMLTitleElement;
|
||||
"tr": ddeHTMLTableRowElement;
|
||||
"track": ddeHTMLTrackElement;
|
||||
"ul": ddeHTMLUListElement;
|
||||
"video": ddeHTMLVideoElement;
|
||||
}
|
||||
interface ddeHTMLAnchorElement extends HTMLAnchorElement{ append: ddeAppend<ddeHTMLAnchorElement>; }
|
||||
interface ddeHTMLAreaElement extends HTMLAreaElement{ append: ddeAppend<ddeHTMLAreaElement>; }
|
||||
interface ddeHTMLAudioElement extends HTMLAudioElement{ append: ddeAppend<ddeHTMLAudioElement>; }
|
||||
interface ddeHTMLBaseElement extends HTMLBaseElement{ append: ddeAppend<ddeHTMLBaseElement>; }
|
||||
interface ddeHTMLQuoteElement extends HTMLQuoteElement{ append: ddeAppend<ddeHTMLQuoteElement>; }
|
||||
interface ddeHTMLBodyElement extends HTMLBodyElement{ append: ddeAppend<ddeHTMLBodyElement>; }
|
||||
interface ddeHTMLBRElement extends HTMLBRElement{ append: ddeAppend<ddeHTMLBRElement>; }
|
||||
interface ddeHTMLButtonElement extends HTMLButtonElement{ append: ddeAppend<ddeHTMLButtonElement>; }
|
||||
interface ddeHTMLCanvasElement extends HTMLCanvasElement{ append: ddeAppend<ddeHTMLCanvasElement>; }
|
||||
interface ddeHTMLTableCaptionElement extends HTMLTableCaptionElement{ append: ddeAppend<ddeHTMLTableCaptionElement>; }
|
||||
interface ddeHTMLTableColElement extends HTMLTableColElement{ append: ddeAppend<ddeHTMLTableColElement>; }
|
||||
interface ddeHTMLTableColElement extends HTMLTableColElement{ append: ddeAppend<ddeHTMLTableColElement>; }
|
||||
interface ddeHTMLDataElement extends HTMLDataElement{ append: ddeAppend<ddeHTMLDataElement>; }
|
||||
interface ddeHTMLDataListElement extends HTMLDataListElement{ append: ddeAppend<ddeHTMLDataListElement>; }
|
||||
interface ddeHTMLModElement extends HTMLModElement{ append: ddeAppend<ddeHTMLModElement>; }
|
||||
interface ddeHTMLDetailsElement extends HTMLDetailsElement{ append: ddeAppend<ddeHTMLDetailsElement>; }
|
||||
interface ddeHTMLDialogElement extends HTMLDialogElement{ append: ddeAppend<ddeHTMLDialogElement>; }
|
||||
interface ddeHTMLDivElement extends HTMLDivElement{ append: ddeAppend<ddeHTMLDivElement>; }
|
||||
interface ddeHTMLDListElement extends HTMLDListElement{ append: ddeAppend<ddeHTMLDListElement>; }
|
||||
interface ddeHTMLEmbedElement extends HTMLEmbedElement{ append: ddeAppend<ddeHTMLEmbedElement>; }
|
||||
interface ddeHTMLFieldSetElement extends HTMLFieldSetElement{ append: ddeAppend<ddeHTMLFieldSetElement>; }
|
||||
interface ddeHTMLFormElement extends HTMLFormElement{ append: ddeAppend<ddeHTMLFormElement>; }
|
||||
interface ddeHTMLHeadingElement extends HTMLHeadingElement{ append: ddeAppend<ddeHTMLHeadingElement>; }
|
||||
interface ddeHTMLHeadElement extends HTMLHeadElement{ append: ddeAppend<ddeHTMLHeadElement>; }
|
||||
interface ddeHTMLHRElement extends HTMLHRElement{ append: ddeAppend<ddeHTMLHRElement>; }
|
||||
interface ddeHTMLHtmlElement extends HTMLHtmlElement{ append: ddeAppend<ddeHTMLHtmlElement>; }
|
||||
interface ddeHTMLIFrameElement extends HTMLIFrameElement{ append: ddeAppend<ddeHTMLIFrameElement>; }
|
||||
interface ddeHTMLImageElement extends HTMLImageElement{ append: ddeAppend<ddeHTMLImageElement>; }
|
||||
interface ddeHTMLInputElement extends HTMLInputElement{ append: ddeAppend<ddeHTMLInputElement>; }
|
||||
interface ddeHTMLLabelElement extends HTMLLabelElement{ append: ddeAppend<ddeHTMLLabelElement>; }
|
||||
interface ddeHTMLLegendElement extends HTMLLegendElement{ append: ddeAppend<ddeHTMLLegendElement>; }
|
||||
interface ddeHTMLLIElement extends HTMLLIElement{ append: ddeAppend<ddeHTMLLIElement>; }
|
||||
interface ddeHTMLLinkElement extends HTMLLinkElement{ append: ddeAppend<ddeHTMLLinkElement>; }
|
||||
interface ddeHTMLMapElement extends HTMLMapElement{ append: ddeAppend<ddeHTMLMapElement>; }
|
||||
interface ddeHTMLMenuElement extends HTMLMenuElement{ append: ddeAppend<ddeHTMLMenuElement>; }
|
||||
interface ddeHTMLMetaElement extends HTMLMetaElement{ append: ddeAppend<ddeHTMLMetaElement>; }
|
||||
interface ddeHTMLMeterElement extends HTMLMeterElement{ append: ddeAppend<ddeHTMLMeterElement>; }
|
||||
interface ddeHTMLObjectElement extends HTMLObjectElement{ append: ddeAppend<ddeHTMLObjectElement>; }
|
||||
interface ddeHTMLOListElement extends HTMLOListElement{ append: ddeAppend<ddeHTMLOListElement>; }
|
||||
interface ddeHTMLOptGroupElement extends HTMLOptGroupElement{ append: ddeAppend<ddeHTMLOptGroupElement>; }
|
||||
interface ddeHTMLOptionElement extends HTMLOptionElement{ append: ddeAppend<ddeHTMLOptionElement>; }
|
||||
interface ddeHTMLOutputElement extends HTMLOutputElement{ append: ddeAppend<ddeHTMLOutputElement>; }
|
||||
interface ddeHTMLParagraphElement extends HTMLParagraphElement{ append: ddeAppend<ddeHTMLParagraphElement>; }
|
||||
interface ddeHTMLPictureElement extends HTMLPictureElement{ append: ddeAppend<ddeHTMLPictureElement>; }
|
||||
interface ddeHTMLPreElement extends HTMLPreElement{ append: ddeAppend<ddeHTMLPreElement>; }
|
||||
interface ddeHTMLProgressElement extends HTMLProgressElement{ append: ddeAppend<ddeHTMLProgressElement>; }
|
||||
interface ddeHTMLScriptElement extends HTMLScriptElement{ append: ddeAppend<ddeHTMLScriptElement>; }
|
||||
interface ddeHTMLSelectElement extends HTMLSelectElement{ append: ddeAppend<ddeHTMLSelectElement>; }
|
||||
interface ddeHTMLSlotElement extends HTMLSlotElement{ append: ddeAppend<ddeHTMLSlotElement>; }
|
||||
interface ddeHTMLSourceElement extends HTMLSourceElement{ append: ddeAppend<ddeHTMLSourceElement>; }
|
||||
interface ddeHTMLSpanElement extends HTMLSpanElement{ append: ddeAppend<ddeHTMLSpanElement>; }
|
||||
interface ddeHTMLStyleElement extends HTMLStyleElement{ append: ddeAppend<ddeHTMLStyleElement>; }
|
||||
interface ddeHTMLTableElement extends HTMLTableElement{ append: ddeAppend<ddeHTMLTableElement>; }
|
||||
interface ddeHTMLTableSectionElement extends HTMLTableSectionElement{ append: ddeAppend<ddeHTMLTableSectionElement>; }
|
||||
interface ddeHTMLTableCellElement extends HTMLTableCellElement{ append: ddeAppend<ddeHTMLTableCellElement>; }
|
||||
interface ddeHTMLTemplateElement extends HTMLTemplateElement{ append: ddeAppend<ddeHTMLTemplateElement>; }
|
||||
interface ddeHTMLTextAreaElement extends HTMLTextAreaElement{ append: ddeAppend<ddeHTMLTextAreaElement>; }
|
||||
interface ddeHTMLTableCellElement extends HTMLTableCellElement{ append: ddeAppend<ddeHTMLTableCellElement>; }
|
||||
interface ddeHTMLTimeElement extends HTMLTimeElement{ append: ddeAppend<ddeHTMLTimeElement>; }
|
||||
interface ddeHTMLTitleElement extends HTMLTitleElement{ append: ddeAppend<ddeHTMLTitleElement>; }
|
||||
interface ddeHTMLTableRowElement extends HTMLTableRowElement{ append: ddeAppend<ddeHTMLTableRowElement>; }
|
||||
interface ddeHTMLTrackElement extends HTMLTrackElement{ append: ddeAppend<ddeHTMLTrackElement>; }
|
||||
interface ddeHTMLUListElement extends HTMLUListElement{ append: ddeAppend<ddeHTMLUListElement>; }
|
||||
interface ddeHTMLVideoElement extends HTMLVideoElement{ append: ddeAppend<ddeHTMLVideoElement>; }
|
||||
|
||||
interface ddeSVGElementTagNameMap {
|
||||
"a": ddeSVGAElement;
|
||||
"animate": ddeSVGAnimateElement;
|
||||
"animateMotion": ddeSVGAnimateMotionElement;
|
||||
"animateTransform": ddeSVGAnimateTransformElement;
|
||||
"circle": ddeSVGCircleElement;
|
||||
"clipPath": ddeSVGClipPathElement;
|
||||
"defs": ddeSVGDefsElement;
|
||||
"desc": ddeSVGDescElement;
|
||||
"ellipse": ddeSVGEllipseElement;
|
||||
"feBlend": ddeSVGFEBlendElement;
|
||||
"feColorMatrix": ddeSVGFEColorMatrixElement;
|
||||
"feComponentTransfer": ddeSVGFEComponentTransferElement;
|
||||
"feComposite": ddeSVGFECompositeElement;
|
||||
"feConvolveMatrix": ddeSVGFEConvolveMatrixElement;
|
||||
"feDiffuseLighting": ddeSVGFEDiffuseLightingElement;
|
||||
"feDisplacementMap": ddeSVGFEDisplacementMapElement;
|
||||
"feDistantLight": ddeSVGFEDistantLightElement;
|
||||
"feDropShadow": ddeSVGFEDropShadowElement;
|
||||
"feFlood": ddeSVGFEFloodElement;
|
||||
"feFuncA": ddeSVGFEFuncAElement;
|
||||
"feFuncB": ddeSVGFEFuncBElement;
|
||||
"feFuncG": ddeSVGFEFuncGElement;
|
||||
"feFuncR": ddeSVGFEFuncRElement;
|
||||
"feGaussianBlur": ddeSVGFEGaussianBlurElement;
|
||||
"feImage": ddeSVGFEImageElement;
|
||||
"feMerge": ddeSVGFEMergeElement;
|
||||
"feMergeNode": ddeSVGFEMergeNodeElement;
|
||||
"feMorphology": ddeSVGFEMorphologyElement;
|
||||
"feOffset": ddeSVGFEOffsetElement;
|
||||
"fePointLight": ddeSVGFEPointLightElement;
|
||||
"feSpecularLighting": ddeSVGFESpecularLightingElement;
|
||||
"feSpotLight": ddeSVGFESpotLightElement;
|
||||
"feTile": ddeSVGFETileElement;
|
||||
"feTurbulence": ddeSVGFETurbulenceElement;
|
||||
"filter": ddeSVGFilterElement;
|
||||
"foreignObject": ddeSVGForeignObjectElement;
|
||||
"g": ddeSVGGElement;
|
||||
"image": ddeSVGImageElement;
|
||||
"line": ddeSVGLineElement;
|
||||
"linearGradient": ddeSVGLinearGradientElement;
|
||||
"marker": ddeSVGMarkerElement;
|
||||
"mask": ddeSVGMaskElement;
|
||||
"metadata": ddeSVGMetadataElement;
|
||||
"mpath": ddeSVGMPathElement;
|
||||
"path": ddeSVGPathElement;
|
||||
"pattern": ddeSVGPatternElement;
|
||||
"polygon": ddeSVGPolygonElement;
|
||||
"polyline": ddeSVGPolylineElement;
|
||||
"radialGradient": ddeSVGRadialGradientElement;
|
||||
"rect": ddeSVGRectElement;
|
||||
"script": ddeSVGScriptElement;
|
||||
"set": ddeSVGSetElement;
|
||||
"stop": ddeSVGStopElement;
|
||||
"style": ddeSVGStyleElement;
|
||||
"svg": ddeSVGSVGElement;
|
||||
"switch": ddeSVGSwitchElement;
|
||||
"symbol": ddeSVGSymbolElement;
|
||||
"text": ddeSVGTextElement;
|
||||
"textPath": ddeSVGTextPathElement;
|
||||
"title": ddeSVGTitleElement;
|
||||
"tspan": ddeSVGTSpanElement;
|
||||
"use": ddeSVGUseElement;
|
||||
"view": ddeSVGViewElement;
|
||||
}
|
||||
interface ddeSVGAElement extends SVGAElement{ append: ddeAppend<ddeSVGAElement>; }
|
||||
interface ddeSVGAnimateElement extends SVGAnimateElement{ append: ddeAppend<ddeSVGAnimateElement>; }
|
||||
interface ddeSVGAnimateMotionElement extends SVGAnimateMotionElement{ append: ddeAppend<ddeSVGAnimateMotionElement>; }
|
||||
interface ddeSVGAnimateTransformElement extends SVGAnimateTransformElement{ append: ddeAppend<ddeSVGAnimateTransformElement>; }
|
||||
interface ddeSVGCircleElement extends SVGCircleElement{ append: ddeAppend<ddeSVGCircleElement>; }
|
||||
interface ddeSVGClipPathElement extends SVGClipPathElement{ append: ddeAppend<ddeSVGClipPathElement>; }
|
||||
interface ddeSVGDefsElement extends SVGDefsElement{ append: ddeAppend<ddeSVGDefsElement>; }
|
||||
interface ddeSVGDescElement extends SVGDescElement{ append: ddeAppend<ddeSVGDescElement>; }
|
||||
interface ddeSVGEllipseElement extends SVGEllipseElement{ append: ddeAppend<ddeSVGEllipseElement>; }
|
||||
interface ddeSVGFEBlendElement extends SVGFEBlendElement{ append: ddeAppend<ddeSVGFEBlendElement>; }
|
||||
interface ddeSVGFEColorMatrixElement extends SVGFEColorMatrixElement{ append: ddeAppend<ddeSVGFEColorMatrixElement>; }
|
||||
interface ddeSVGFEComponentTransferElement extends SVGFEComponentTransferElement{ append: ddeAppend<ddeSVGFEComponentTransferElement>; }
|
||||
interface ddeSVGFECompositeElement extends SVGFECompositeElement{ append: ddeAppend<ddeSVGFECompositeElement>; }
|
||||
interface ddeSVGFEConvolveMatrixElement extends SVGFEConvolveMatrixElement{ append: ddeAppend<ddeSVGFEConvolveMatrixElement>; }
|
||||
interface ddeSVGFEDiffuseLightingElement extends SVGFEDiffuseLightingElement{ append: ddeAppend<ddeSVGFEDiffuseLightingElement>; }
|
||||
interface ddeSVGFEDisplacementMapElement extends SVGFEDisplacementMapElement{ append: ddeAppend<ddeSVGFEDisplacementMapElement>; }
|
||||
interface ddeSVGFEDistantLightElement extends SVGFEDistantLightElement{ append: ddeAppend<ddeSVGFEDistantLightElement>; }
|
||||
interface ddeSVGFEDropShadowElement extends SVGFEDropShadowElement{ append: ddeAppend<ddeSVGFEDropShadowElement>; }
|
||||
interface ddeSVGFEFloodElement extends SVGFEFloodElement{ append: ddeAppend<ddeSVGFEFloodElement>; }
|
||||
interface ddeSVGFEFuncAElement extends SVGFEFuncAElement{ append: ddeAppend<ddeSVGFEFuncAElement>; }
|
||||
interface ddeSVGFEFuncBElement extends SVGFEFuncBElement{ append: ddeAppend<ddeSVGFEFuncBElement>; }
|
||||
interface ddeSVGFEFuncGElement extends SVGFEFuncGElement{ append: ddeAppend<ddeSVGFEFuncGElement>; }
|
||||
interface ddeSVGFEFuncRElement extends SVGFEFuncRElement{ append: ddeAppend<ddeSVGFEFuncRElement>; }
|
||||
interface ddeSVGFEGaussianBlurElement extends SVGFEGaussianBlurElement{ append: ddeAppend<ddeSVGFEGaussianBlurElement>; }
|
||||
interface ddeSVGFEImageElement extends SVGFEImageElement{ append: ddeAppend<ddeSVGFEImageElement>; }
|
||||
interface ddeSVGFEMergeElement extends SVGFEMergeElement{ append: ddeAppend<ddeSVGFEMergeElement>; }
|
||||
interface ddeSVGFEMergeNodeElement extends SVGFEMergeNodeElement{ append: ddeAppend<ddeSVGFEMergeNodeElement>; }
|
||||
interface ddeSVGFEMorphologyElement extends SVGFEMorphologyElement{ append: ddeAppend<ddeSVGFEMorphologyElement>; }
|
||||
interface ddeSVGFEOffsetElement extends SVGFEOffsetElement{ append: ddeAppend<ddeSVGFEOffsetElement>; }
|
||||
interface ddeSVGFEPointLightElement extends SVGFEPointLightElement{ append: ddeAppend<ddeSVGFEPointLightElement>; }
|
||||
interface ddeSVGFESpecularLightingElement extends SVGFESpecularLightingElement{ append: ddeAppend<ddeSVGFESpecularLightingElement>; }
|
||||
interface ddeSVGFESpotLightElement extends SVGFESpotLightElement{ append: ddeAppend<ddeSVGFESpotLightElement>; }
|
||||
interface ddeSVGFETileElement extends SVGFETileElement{ append: ddeAppend<ddeSVGFETileElement>; }
|
||||
interface ddeSVGFETurbulenceElement extends SVGFETurbulenceElement{ append: ddeAppend<ddeSVGFETurbulenceElement>; }
|
||||
interface ddeSVGFilterElement extends SVGFilterElement{ append: ddeAppend<ddeSVGFilterElement>; }
|
||||
interface ddeSVGForeignObjectElement extends SVGForeignObjectElement{ append: ddeAppend<ddeSVGForeignObjectElement>; }
|
||||
interface ddeSVGGElement extends SVGGElement{ append: ddeAppend<ddeSVGGElement>; }
|
||||
interface ddeSVGImageElement extends SVGImageElement{ append: ddeAppend<ddeSVGImageElement>; }
|
||||
interface ddeSVGLineElement extends SVGLineElement{ append: ddeAppend<ddeSVGLineElement>; }
|
||||
interface ddeSVGLinearGradientElement extends SVGLinearGradientElement{ append: ddeAppend<ddeSVGLinearGradientElement>; }
|
||||
interface ddeSVGMarkerElement extends SVGMarkerElement{ append: ddeAppend<ddeSVGMarkerElement>; }
|
||||
interface ddeSVGMaskElement extends SVGMaskElement{ append: ddeAppend<ddeSVGMaskElement>; }
|
||||
interface ddeSVGMetadataElement extends SVGMetadataElement{ append: ddeAppend<ddeSVGMetadataElement>; }
|
||||
interface ddeSVGMPathElement extends SVGMPathElement{ append: ddeAppend<ddeSVGMPathElement>; }
|
||||
interface ddeSVGPathElement extends SVGPathElement{ append: ddeAppend<ddeSVGPathElement>; }
|
||||
interface ddeSVGPatternElement extends SVGPatternElement{ append: ddeAppend<ddeSVGPatternElement>; }
|
||||
interface ddeSVGPolygonElement extends SVGPolygonElement{ append: ddeAppend<ddeSVGPolygonElement>; }
|
||||
interface ddeSVGPolylineElement extends SVGPolylineElement{ append: ddeAppend<ddeSVGPolylineElement>; }
|
||||
interface ddeSVGRadialGradientElement extends SVGRadialGradientElement{ append: ddeAppend<ddeSVGRadialGradientElement>; }
|
||||
interface ddeSVGRectElement extends SVGRectElement{ append: ddeAppend<ddeSVGRectElement>; }
|
||||
interface ddeSVGScriptElement extends SVGScriptElement{ append: ddeAppend<ddeSVGScriptElement>; }
|
||||
interface ddeSVGSetElement extends SVGSetElement{ append: ddeAppend<ddeSVGSetElement>; }
|
||||
interface ddeSVGStopElement extends SVGStopElement{ append: ddeAppend<ddeSVGStopElement>; }
|
||||
interface ddeSVGStyleElement extends SVGStyleElement{ append: ddeAppend<ddeSVGStyleElement>; }
|
||||
interface ddeSVGSVGElement extends SVGSVGElement{ append: ddeAppend<ddeSVGSVGElement>; }
|
||||
interface ddeSVGSwitchElement extends SVGSwitchElement{ append: ddeAppend<ddeSVGSwitchElement>; }
|
||||
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 Observable<V, A>= (set?: V)=> V & A;
|
||||
type Action<V>= (this: { value: V }, ...a: any[])=> typeof observable._ | void;
|
||||
type SymbolOnclear= Symbol;
|
||||
type SymbolObservable= Symbol;
|
||||
type Actions<V>= Record<string, Action<V>>;
|
||||
interface observable{
|
||||
_: Symbol
|
||||
/**
|
||||
* Simple example:
|
||||
* ```js
|
||||
* const hello= S("Hello Observable");
|
||||
* ```
|
||||
* …simple todo observable:
|
||||
* ```js
|
||||
* const todos= S([], {
|
||||
* add(v){ this.value.push(S(v)); },
|
||||
* remove(i){ this.value.splice(i, 1); },
|
||||
* [S.symbols.onclear](){ S.clear(...this.value); },
|
||||
* });
|
||||
* ```
|
||||
* …computed observable:
|
||||
* ```js
|
||||
* const name= S("Jan");
|
||||
* const surname= S("Andrle");
|
||||
* const fullname= S(()=> name()+" "+surname());
|
||||
* ```
|
||||
* @param value Initial observable value. Or function computing value from other observables.
|
||||
* @param actions Use to define actions on the observable. Such as add item to the array.
|
||||
* There is also a reserved function `S.symbol.onclear` which is called when the observable is cleared
|
||||
* by `S.clear`.
|
||||
* */
|
||||
<V, A extends Actions<V>>(value: V, actions?: A): Observable<V, A>;
|
||||
/**
|
||||
* Computations observable. This creates a observable which is computed from other observables.
|
||||
* */
|
||||
<V>(computation: ()=> V): Observable<V, {}>
|
||||
action<S extends Observable<any, Actions<any>>, A extends (S extends Observable<any, infer A> ? A : never), N extends keyof A>(
|
||||
observable: S,
|
||||
name: N,
|
||||
...params: A[N] extends (...args: infer P)=> any ? P : never
|
||||
): void;
|
||||
clear(...observables: Observable<any, any>[]): void;
|
||||
on<T>(observable: Observable<T, any>, onchange: (a: T)=> void, options?: AddEventListenerOptions): void;
|
||||
symbols: {
|
||||
observable: SymbolObservable;
|
||||
onclear: SymbolOnclear;
|
||||
}
|
||||
/**
|
||||
* Reactive element, which is rendered based on the given observable.
|
||||
* ```js
|
||||
* S.el(observable, value=> value ? el("b", "True") : el("i", "False"));
|
||||
* S.el(listS, list=> list.map(li=> el("li", li)));
|
||||
* ```
|
||||
* */
|
||||
el<S extends any>(observable: Observable<S, any>, el: (v: S)=> Element | Element[]): DocumentFragment;
|
||||
|
||||
attribute(name: string, initial?: string): Observable<string, {}>;
|
||||
}
|
||||
export const observable: observable;
|
||||
export const O: observable;
|
||||
declare global {
|
||||
type ddeObservable<T, A= {}>= Observable<T, A>;
|
||||
type ddeActions<V>= Actions<V>
|
||||
}
|
||||
4
dist/esm-with-observables.js
vendored
Normal file
4
dist/esm-with-observables.js
vendored
Normal file
File diff suppressed because one or more lines are too long
530
dist/esm-with-signals.d.ts
vendored
530
dist/esm-with-signals.d.ts
vendored
@ -1,530 +0,0 @@
|
||||
type CustomElementTagNameMap= { '#text': Text, '#comment': Comment }
|
||||
declare global {
|
||||
interface ddePublicElementTagNameMap{
|
||||
}
|
||||
}
|
||||
type SupportedElement=
|
||||
HTMLElementTagNameMap[keyof HTMLElementTagNameMap]
|
||||
| SVGElementTagNameMap[keyof SVGElementTagNameMap]
|
||||
| MathMLElementTagNameMap[keyof MathMLElementTagNameMap]
|
||||
| CustomElementTagNameMap[keyof CustomElementTagNameMap]
|
||||
| ddePublicElementTagNameMap[keyof ddePublicElementTagNameMap];
|
||||
declare global {
|
||||
type ddeComponentAttributes= Record<any, any> | undefined;
|
||||
type ddeElementAddon<El extends SupportedElement | DocumentFragment>= (element: El)=> El | void;
|
||||
}
|
||||
type PascalCase=
|
||||
`${Capitalize<string>}${string}`;
|
||||
type AttrsModified= {
|
||||
/**
|
||||
* Use string like in HTML (internally uses `*.setAttribute("style", *)`), or object representation (like DOM API).
|
||||
*/
|
||||
style: string | Partial<CSSStyleDeclaration>
|
||||
/**
|
||||
* Provide option to add/remove/toggle CSS clasess (index of object) using 1/0/-1. In fact `el.classList.toggle(class_name)` for `-1` and `el.classList.toggle(class_name, Boolean(...))` for others.
|
||||
*/
|
||||
classList: Record<string,-1|0|1|boolean>,
|
||||
/**
|
||||
* By default simiral to `className`, but also supports `string[]`
|
||||
* */
|
||||
className: string | (string|boolean|undefined)[];
|
||||
/**
|
||||
* Sets `aria-*` simiraly to `dataset`
|
||||
* */
|
||||
ariaset: Record<string,string>,
|
||||
} & Record<`=${string}` | `data${PascalCase}` | `aria${PascalCase}`, string> & Record<`.${string}`, any>
|
||||
/**
|
||||
* Just element attributtes
|
||||
*
|
||||
* In most cases, you can use native propertie such as [MDN WEB/API/Element](https://developer.mozilla.org/en-US/docs/Web/API/Element) and so on (e.g. [`Text`](https://developer.mozilla.org/en-US/docs/Web/API/Text)).
|
||||
*
|
||||
* There is added support for `data[A-Z].*`/`aria[A-Z].*` to be converted to the kebab-case alternatives.
|
||||
* @private
|
||||
*/
|
||||
type ElementAttributes<T extends SupportedElement>= Omit<T,keyof AttrsModified> & AttrsModified;
|
||||
export function classListDeclarative<El extends SupportedElement>(element: El, classList: AttrsModified["classList"]): 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]
|
||||
|
||||
type ExtendedHTMLElementTagNameMap= HTMLElementTagNameMap & CustomElementTagNameMap & ddePublicElementTagNameMap
|
||||
export function el<TAG extends keyof ExtendedHTMLElementTagNameMap>(
|
||||
tag_name: TAG,
|
||||
attrs?: string | Partial<ElementAttributes<ExtendedHTMLElementTagNameMap[TAG]>>,
|
||||
...addons: ddeElementAddon<ExtendedHTMLElementTagNameMap[TAG]>[]
|
||||
): ExtendedHTMLElementTagNameMap[TAG]
|
||||
export function el<T>(
|
||||
tag_name?: "<>",
|
||||
): DocumentFragment
|
||||
|
||||
export function el<
|
||||
A extends ddeComponentAttributes,
|
||||
C extends (attr: Partial<A>)=> SupportedElement | DocumentFragment>(
|
||||
fComponent: C,
|
||||
attrs?: A | string,
|
||||
...addons: ddeElementAddon<ReturnType<C>>[]
|
||||
): ReturnType<C>
|
||||
|
||||
export function el(
|
||||
tag_name: string,
|
||||
attrs?: string | Record<string, any>,
|
||||
...addons: ddeElementAddon<HTMLElement>[]
|
||||
): HTMLElement
|
||||
|
||||
export function elNS(
|
||||
namespace: "http://www.w3.org/2000/svg"
|
||||
): <TAG extends keyof SVGElementTagNameMap, KEYS extends keyof SVGElementTagNameMap[TAG] & { d: string }>(
|
||||
tag_name: TAG,
|
||||
attrs?: string | Partial<{ [key in KEYS]: SVGElementTagNameMap[TAG][key] | string | number | boolean }>,
|
||||
...addons: ddeElementAddon<SVGElementTagNameMap[TAG]>[]
|
||||
)=> SVGElementTagNameMap[TAG]
|
||||
export function elNS(
|
||||
namespace: "http://www.w3.org/1998/Math/MathML"
|
||||
): <TAG extends keyof MathMLElementTagNameMap, KEYS extends keyof MathMLElementTagNameMap[TAG] & { d: string }>(
|
||||
tag_name: TAG,
|
||||
attrs?: string | Partial<{ [key in KEYS]: MathMLElementTagNameMap[TAG][key] | string | number | boolean }>,
|
||||
...addons: ddeElementAddon<MathMLElementTagNameMap[TAG]>[]
|
||||
)=> MathMLElementTagNameMap[TAG]
|
||||
export function elNS(
|
||||
namespace: string
|
||||
): (
|
||||
tag_name: string,
|
||||
attrs?: string | Record<string, any>,
|
||||
...addons: ddeElementAddon<SupportedElement>[]
|
||||
)=> SupportedElement
|
||||
|
||||
export function chainableAppend<EL extends SupportedElement>(el: EL): EL;
|
||||
|
||||
export function dispatchEvent(name: keyof DocumentEventMap | string, options?: EventInit):
|
||||
(element: SupportedElement, data?: any)=> void;
|
||||
export function dispatchEvent(name: keyof DocumentEventMap | string, options: EventInit | null, element: SupportedElement | (()=> SupportedElement)):
|
||||
(data?: any)=> void;
|
||||
interface On{
|
||||
/** Listens to the DOM event. See {@link Document.addEventListener} */
|
||||
<
|
||||
EE extends ddeElementAddon<SupportedElement>,
|
||||
El extends ( EE extends ddeElementAddon<infer El> ? El : never ),
|
||||
Event extends keyof DocumentEventMap>(
|
||||
type: Event,
|
||||
listener: (this: El, ev: DocumentEventMap[Event]) => any,
|
||||
options?: AddEventListenerOptions
|
||||
) : EE;
|
||||
<
|
||||
EE extends ddeElementAddon<SupportedElement>,
|
||||
El extends ( EE extends ddeElementAddon<infer El> ? El : never )>(
|
||||
type: string,
|
||||
listener: (this: El, ev: Event | CustomEvent ) => any,
|
||||
options?: AddEventListenerOptions
|
||||
) : EE;
|
||||
/** Listens to the element is connected to the live DOM. In case of custom elements uses [`connectedCallback`](https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_custom_elements#custom_element_lifecycle_callbacks), or {@link MutationObserver} else where */
|
||||
connected<
|
||||
EE extends ddeElementAddon<SupportedElement>,
|
||||
El extends ( EE extends ddeElementAddon<infer El> ? El : never )
|
||||
>(
|
||||
listener: (this: El, event: CustomEvent<void>) => any,
|
||||
options?: AddEventListenerOptions
|
||||
) : EE;
|
||||
/** Listens to the element is disconnected from the live DOM. In case of custom elements uses [`disconnectedCallback`](https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_custom_elements#custom_element_lifecycle_callbacks), or {@link MutationObserver} else where */
|
||||
disconnected<
|
||||
EE extends ddeElementAddon<SupportedElement>,
|
||||
El extends ( EE extends ddeElementAddon<infer El> ? El : never )
|
||||
>(
|
||||
listener: (this: El, event: CustomEvent<void>) => any,
|
||||
options?: AddEventListenerOptions
|
||||
) : EE;
|
||||
/** Listens to the element attribute changes. In case of custom elements uses [`attributeChangedCallback`](https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_custom_elements#custom_element_lifecycle_callbacks), or {@link MutationObserver} else where */
|
||||
attributeChanged<
|
||||
EE extends ddeElementAddon<SupportedElement>,
|
||||
El extends ( EE extends ddeElementAddon<infer El> ? El : never )
|
||||
>(
|
||||
listener: (this: El, event: CustomEvent<[ string, string ]>) => any,
|
||||
options?: AddEventListenerOptions
|
||||
) : EE;
|
||||
}
|
||||
export const on: On;
|
||||
|
||||
type Scope= { scope: Node | Function | Object, host: ddeElementAddon<any>, custom_element: false | HTMLElement, prevent: boolean }
|
||||
/** Current scope created last time the `el(Function)` was invoke. (Or {@link scope.push}) */
|
||||
export const scope: {
|
||||
current: Scope,
|
||||
/** Stops all automatizations. E. g. signals used as attributes in current scope
|
||||
* registers removing these listeners (and clean signal if no other listeners are detected)
|
||||
* on `disconnected` event. */
|
||||
preventDefault<T extends boolean>(prevent: T): T,
|
||||
/**
|
||||
* This represents reference to the current host element — `scope.host()`.
|
||||
* It can be also used to register Addon (function to be called when component is initized)
|
||||
* — `scope.host(on.connected(console.log))`.
|
||||
* */
|
||||
host: ddeElementAddon<any>,
|
||||
|
||||
state: Scope[],
|
||||
/** Adds new child scope. All attributes are inherited by default. */
|
||||
push(scope: Partial<Scope>): ReturnType<Array<Scope>["push"]>,
|
||||
/** Adds root scope as a child of the current scope. */
|
||||
pushRoot(): ReturnType<Array<Scope>["push"]>,
|
||||
/** Removes last/current child scope. */
|
||||
pop(): ReturnType<Array<Scope>["pop"]>,
|
||||
};
|
||||
|
||||
/*
|
||||
* 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;
|
||||
declare global{
|
||||
interface HTMLAnchorElement{
|
||||
/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */
|
||||
append: ddeAppend<HTMLAnchorElement>;
|
||||
}
|
||||
interface HTMLElement{
|
||||
/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */
|
||||
append: ddeAppend<HTMLElement>;
|
||||
}
|
||||
interface HTMLAreaElement{
|
||||
/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */
|
||||
append: ddeAppend<HTMLAreaElement>;
|
||||
}
|
||||
interface HTMLAudioElement{
|
||||
/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */
|
||||
append: ddeAppend<HTMLAudioElement>;
|
||||
}
|
||||
interface HTMLBaseElement{
|
||||
/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */
|
||||
append: ddeAppend<HTMLBaseElement>;
|
||||
}
|
||||
interface HTMLQuoteElement{
|
||||
/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */
|
||||
append: ddeAppend<HTMLQuoteElement>;
|
||||
}
|
||||
interface HTMLBodyElement{
|
||||
/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */
|
||||
append: ddeAppend<HTMLBodyElement>;
|
||||
}
|
||||
interface HTMLBRElement{
|
||||
/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */
|
||||
append: ddeAppend<HTMLBRElement>;
|
||||
}
|
||||
interface HTMLButtonElement{
|
||||
/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */
|
||||
append: ddeAppend<HTMLButtonElement>;
|
||||
}
|
||||
interface HTMLCanvasElement{
|
||||
/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */
|
||||
append: ddeAppend<HTMLCanvasElement>;
|
||||
}
|
||||
interface HTMLTableCaptionElement{
|
||||
/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */
|
||||
append: ddeAppend<HTMLTableCaptionElement>;
|
||||
}
|
||||
interface HTMLTableColElement{
|
||||
/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */
|
||||
append: ddeAppend<HTMLTableColElement>;
|
||||
}
|
||||
interface HTMLTableColElement{
|
||||
/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */
|
||||
append: ddeAppend<HTMLTableColElement>;
|
||||
}
|
||||
interface HTMLDataElement{
|
||||
/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */
|
||||
append: ddeAppend<HTMLDataElement>;
|
||||
}
|
||||
interface HTMLDataListElement{
|
||||
/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */
|
||||
append: ddeAppend<HTMLDataListElement>;
|
||||
}
|
||||
interface HTMLModElement{
|
||||
/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */
|
||||
append: ddeAppend<HTMLModElement>;
|
||||
}
|
||||
interface HTMLDetailsElement{
|
||||
/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */
|
||||
append: ddeAppend<HTMLDetailsElement>;
|
||||
}
|
||||
interface HTMLDialogElement{
|
||||
/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */
|
||||
append: ddeAppend<HTMLDialogElement>;
|
||||
}
|
||||
interface HTMLDivElement{
|
||||
/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */
|
||||
append: ddeAppend<HTMLDivElement>;
|
||||
}
|
||||
interface HTMLDListElement{
|
||||
/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */
|
||||
append: ddeAppend<HTMLDListElement>;
|
||||
}
|
||||
interface HTMLEmbedElement{
|
||||
/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */
|
||||
append: ddeAppend<HTMLEmbedElement>;
|
||||
}
|
||||
interface HTMLFieldSetElement{
|
||||
/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */
|
||||
append: ddeAppend<HTMLFieldSetElement>;
|
||||
}
|
||||
interface HTMLFormElement{
|
||||
/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */
|
||||
append: ddeAppend<HTMLFormElement>;
|
||||
}
|
||||
interface HTMLHeadingElement{
|
||||
/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */
|
||||
append: ddeAppend<HTMLHeadingElement>;
|
||||
}
|
||||
interface HTMLHeadElement{
|
||||
/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */
|
||||
append: ddeAppend<HTMLHeadElement>;
|
||||
}
|
||||
interface HTMLHRElement{
|
||||
/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */
|
||||
append: ddeAppend<HTMLHRElement>;
|
||||
}
|
||||
interface HTMLHtmlElement{
|
||||
/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */
|
||||
append: ddeAppend<HTMLHtmlElement>;
|
||||
}
|
||||
interface HTMLIFrameElement{
|
||||
/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */
|
||||
append: ddeAppend<HTMLIFrameElement>;
|
||||
}
|
||||
interface HTMLImageElement{
|
||||
/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */
|
||||
append: ddeAppend<HTMLImageElement>;
|
||||
}
|
||||
interface HTMLInputElement{
|
||||
/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */
|
||||
append: ddeAppend<HTMLInputElement>;
|
||||
}
|
||||
interface HTMLLabelElement{
|
||||
/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */
|
||||
append: ddeAppend<HTMLLabelElement>;
|
||||
}
|
||||
interface HTMLLegendElement{
|
||||
/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */
|
||||
append: ddeAppend<HTMLLegendElement>;
|
||||
}
|
||||
interface HTMLLIElement{
|
||||
/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */
|
||||
append: ddeAppend<HTMLLIElement>;
|
||||
}
|
||||
interface HTMLLinkElement{
|
||||
/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */
|
||||
append: ddeAppend<HTMLLinkElement>;
|
||||
}
|
||||
interface HTMLMapElement{
|
||||
/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */
|
||||
append: ddeAppend<HTMLMapElement>;
|
||||
}
|
||||
interface HTMLMenuElement{
|
||||
/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */
|
||||
append: ddeAppend<HTMLMenuElement>;
|
||||
}
|
||||
interface HTMLMetaElement{
|
||||
/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */
|
||||
append: ddeAppend<HTMLMetaElement>;
|
||||
}
|
||||
interface HTMLMeterElement{
|
||||
/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */
|
||||
append: ddeAppend<HTMLMeterElement>;
|
||||
}
|
||||
interface HTMLObjectElement{
|
||||
/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */
|
||||
append: ddeAppend<HTMLObjectElement>;
|
||||
}
|
||||
interface HTMLOListElement{
|
||||
/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */
|
||||
append: ddeAppend<HTMLOListElement>;
|
||||
}
|
||||
interface HTMLOptGroupElement{
|
||||
/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */
|
||||
append: ddeAppend<HTMLOptGroupElement>;
|
||||
}
|
||||
interface HTMLOptionElement{
|
||||
/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */
|
||||
append: ddeAppend<HTMLOptionElement>;
|
||||
}
|
||||
interface HTMLOutputElement{
|
||||
/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */
|
||||
append: ddeAppend<HTMLOutputElement>;
|
||||
}
|
||||
interface HTMLParagraphElement{
|
||||
/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */
|
||||
append: ddeAppend<HTMLParagraphElement>;
|
||||
}
|
||||
interface HTMLPictureElement{
|
||||
/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */
|
||||
append: ddeAppend<HTMLPictureElement>;
|
||||
}
|
||||
interface HTMLPreElement{
|
||||
/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */
|
||||
append: ddeAppend<HTMLPreElement>;
|
||||
}
|
||||
interface HTMLProgressElement{
|
||||
/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */
|
||||
append: ddeAppend<HTMLProgressElement>;
|
||||
}
|
||||
interface HTMLScriptElement{
|
||||
/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */
|
||||
append: ddeAppend<HTMLScriptElement>;
|
||||
}
|
||||
interface HTMLSelectElement{
|
||||
/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */
|
||||
append: ddeAppend<HTMLSelectElement>;
|
||||
}
|
||||
interface HTMLSlotElement{
|
||||
/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */
|
||||
append: ddeAppend<HTMLSlotElement>;
|
||||
}
|
||||
interface HTMLSourceElement{
|
||||
/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */
|
||||
append: ddeAppend<HTMLSourceElement>;
|
||||
}
|
||||
interface HTMLSpanElement{
|
||||
/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */
|
||||
append: ddeAppend<HTMLSpanElement>;
|
||||
}
|
||||
interface HTMLStyleElement{
|
||||
/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */
|
||||
append: ddeAppend<HTMLStyleElement>;
|
||||
}
|
||||
interface HTMLTableElement{
|
||||
/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */
|
||||
append: ddeAppend<HTMLTableElement>;
|
||||
}
|
||||
interface HTMLTableSectionElement{
|
||||
/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */
|
||||
append: ddeAppend<HTMLTableSectionElement>;
|
||||
}
|
||||
interface HTMLTableCellElement{
|
||||
/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */
|
||||
append: ddeAppend<HTMLTableCellElement>;
|
||||
}
|
||||
interface HTMLTemplateElement{
|
||||
/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */
|
||||
append: ddeAppend<HTMLTemplateElement>;
|
||||
}
|
||||
interface HTMLTextAreaElement{
|
||||
/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */
|
||||
append: ddeAppend<HTMLTextAreaElement>;
|
||||
}
|
||||
interface HTMLTableCellElement{
|
||||
/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */
|
||||
append: ddeAppend<HTMLTableCellElement>;
|
||||
}
|
||||
interface HTMLTimeElement{
|
||||
/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */
|
||||
append: ddeAppend<HTMLTimeElement>;
|
||||
}
|
||||
interface HTMLTitleElement{
|
||||
/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */
|
||||
append: ddeAppend<HTMLTitleElement>;
|
||||
}
|
||||
interface HTMLTableRowElement{
|
||||
/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */
|
||||
append: ddeAppend<HTMLTableRowElement>;
|
||||
}
|
||||
interface HTMLTrackElement{
|
||||
/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */
|
||||
append: ddeAppend<HTMLTrackElement>;
|
||||
}
|
||||
interface HTMLUListElement{
|
||||
/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */
|
||||
append: ddeAppend<HTMLUListElement>;
|
||||
}
|
||||
interface HTMLVideoElement{
|
||||
/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */
|
||||
append: ddeAppend<HTMLVideoElement>;
|
||||
}
|
||||
interface DocumentFragment{
|
||||
/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */
|
||||
append: ddeAppend<DocumentFragment>;
|
||||
}
|
||||
interface SVGElement{
|
||||
/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */
|
||||
append: ddeAppend<SVGElement>;
|
||||
}
|
||||
}
|
||||
export type Signal<V, A>= (set?: V)=> V & A;
|
||||
type Action<V>= (this: { value: V }, ...a: any[])=> typeof S._ | void;
|
||||
type SymbolOnclear= Symbol;
|
||||
type SymbolSignal= Symbol;
|
||||
type Actions<V>= Record<string, Action<V>>;
|
||||
interface S {
|
||||
_: Symbol
|
||||
/**
|
||||
* Simple example:
|
||||
* ```js
|
||||
* const hello= S("Hello Signal");
|
||||
* ```
|
||||
* …simple todo signal:
|
||||
* ```js
|
||||
* const todos= S([], {
|
||||
* add(v){ this.value.push(S(v)); },
|
||||
* remove(i){ this.value.splice(i, 1); },
|
||||
* [S.symbols.onclear](){ S.clear(...this.value); },
|
||||
* });
|
||||
* ```
|
||||
* …computed signal:
|
||||
* ```js
|
||||
* const name= S("Jan");
|
||||
* const surname= S("Andrle");
|
||||
* const fullname= S(()=> name()+" "+surname());
|
||||
* ```
|
||||
* @param value Initial signal value. Or function computing value from other signals.
|
||||
* @param actions Use to define actions on the signal. Such as add item to the array.
|
||||
* There is also a reserved function `S.symbol.onclear` which is called when the signal is cleared
|
||||
* by `S.clear`.
|
||||
* */
|
||||
<V, A extends Actions<V>>(value: V, actions?: A): Signal<V, A>;
|
||||
/**
|
||||
* Computations signal. This creates a signal which is computed from other signals.
|
||||
* */
|
||||
<V>(computation: ()=> V): Signal<V, {}>
|
||||
action<S extends Signal<any, Actions<any>>, A extends (S extends Signal<any, infer A> ? A : never), N extends keyof A>(
|
||||
signal: S,
|
||||
name: N,
|
||||
...params: A[N] extends (...args: infer P)=> any ? P : never
|
||||
): void;
|
||||
clear(...signals: Signal<any, any>[]): void;
|
||||
on<T>(signal: Signal<T, any>, onchange: (a: T)=> void, options?: AddEventListenerOptions): void;
|
||||
symbols: {
|
||||
signal: SymbolSignal;
|
||||
onclear: SymbolOnclear;
|
||||
}
|
||||
/**
|
||||
* Reactive element, which is rendered based on the given signal.
|
||||
* ```js
|
||||
* S.el(signal, value=> value ? el("b", "True") : el("i", "False"));
|
||||
* S.el(listS, list=> list.map(li=> el("li", li)));
|
||||
* ```
|
||||
* */
|
||||
el<S extends any>(signal: Signal<S, any>, el: (v: S)=> Element | Element[]): DocumentFragment;
|
||||
|
||||
attribute(name: string, initial?: string): Signal<string, {}>;
|
||||
}
|
||||
export const S: S;
|
||||
declare global {
|
||||
type ddeSignal<T, A= {}>= Signal<T, A>;
|
||||
type ddeActions<V>= Actions<V>
|
||||
}
|
||||
4
dist/esm-with-signals.js
vendored
4
dist/esm-with-signals.js
vendored
File diff suppressed because one or more lines are too long
591
dist/esm.d.ts
vendored
591
dist/esm.d.ts
vendored
@ -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 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>(
|
||||
tag_name: TAG,
|
||||
attrs?: string | Partial<ElementAttributes<ExtendedHTMLElementTagNameMap[TAG]>>,
|
||||
@ -54,7 +54,7 @@ export function el<TAG extends keyof ExtendedHTMLElementTagNameMap>(
|
||||
): ExtendedHTMLElementTagNameMap[TAG]
|
||||
export function el<T>(
|
||||
tag_name?: "<>",
|
||||
): DocumentFragment
|
||||
): ddeDocumentFragment
|
||||
|
||||
export function el<
|
||||
A extends ddeComponentAttributes,
|
||||
@ -68,22 +68,22 @@ export function el(
|
||||
tag_name: string,
|
||||
attrs?: string | Record<string, any>,
|
||||
...addons: ddeElementAddon<HTMLElement>[]
|
||||
): HTMLElement
|
||||
): ddeHTMLElement
|
||||
|
||||
export function elNS(
|
||||
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,
|
||||
attrs?: string | Partial<{ [key in KEYS]: SVGElementTagNameMap[TAG][key] | string | number | boolean }>,
|
||||
...addons: ddeElementAddon<SVGElementTagNameMap[TAG]>[]
|
||||
)=> SVGElementTagNameMap[TAG]
|
||||
attrs?: string | Partial<{ [key in KEYS]: EL[key] | string | number | boolean }>,
|
||||
...addons: ddeElementAddon<EL>[]
|
||||
)=> EL
|
||||
export function elNS(
|
||||
namespace: "http://www.w3.org/1998/Math/MathML"
|
||||
): <TAG extends keyof MathMLElementTagNameMap, KEYS extends keyof MathMLElementTagNameMap[TAG] & { d: string }>(
|
||||
tag_name: TAG,
|
||||
attrs?: string | Partial<{ [key in KEYS]: MathMLElementTagNameMap[TAG][key] | string | number | boolean }>,
|
||||
...addons: ddeElementAddon<MathMLElementTagNameMap[TAG]>[]
|
||||
)=> MathMLElementTagNameMap[TAG]
|
||||
)=> ddeMathMLElement
|
||||
export function elNS(
|
||||
namespace: string
|
||||
): (
|
||||
@ -93,6 +93,7 @@ export function elNS(
|
||||
)=> SupportedElement
|
||||
|
||||
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):
|
||||
(element: SupportedElement, data?: any)=> void;
|
||||
@ -152,10 +153,10 @@ export const scope: {
|
||||
preventDefault<T extends boolean>(prevent: T): T,
|
||||
/**
|
||||
* This represents reference to the current host element — `scope.host()`.
|
||||
* It can be also used to register Addon (function to be called when component is initized)
|
||||
* It can be also used to register Addon(s) (functions to be called when component is initized)
|
||||
* — `scope.host(on.connected(console.log))`.
|
||||
* */
|
||||
host: ddeElementAddon<any>,
|
||||
host: (...addons: ddeElementAddon<any>[])=> HTMLElement,
|
||||
|
||||
state: Scope[],
|
||||
/** Adds new child scope. All attributes are inherited by default. */
|
||||
@ -166,302 +167,280 @@ export const scope: {
|
||||
pop(): ReturnType<Array<Scope>["pop"]>,
|
||||
};
|
||||
|
||||
/*
|
||||
* 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
|
||||
* */
|
||||
/* TypeScript MEH // TODO for SVG */
|
||||
type ddeAppend<el>= (...nodes: (Node | string)[])=> el;
|
||||
declare global{
|
||||
interface HTMLAnchorElement{
|
||||
/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */
|
||||
append: ddeAppend<HTMLAnchorElement>;
|
||||
}
|
||||
interface HTMLElement{
|
||||
/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */
|
||||
append: ddeAppend<HTMLElement>;
|
||||
}
|
||||
interface HTMLAreaElement{
|
||||
/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */
|
||||
append: ddeAppend<HTMLAreaElement>;
|
||||
}
|
||||
interface HTMLAudioElement{
|
||||
/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */
|
||||
append: ddeAppend<HTMLAudioElement>;
|
||||
}
|
||||
interface HTMLBaseElement{
|
||||
/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */
|
||||
append: ddeAppend<HTMLBaseElement>;
|
||||
}
|
||||
interface HTMLQuoteElement{
|
||||
/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */
|
||||
append: ddeAppend<HTMLQuoteElement>;
|
||||
}
|
||||
interface HTMLBodyElement{
|
||||
/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */
|
||||
append: ddeAppend<HTMLBodyElement>;
|
||||
}
|
||||
interface HTMLBRElement{
|
||||
/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */
|
||||
append: ddeAppend<HTMLBRElement>;
|
||||
}
|
||||
interface HTMLButtonElement{
|
||||
/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */
|
||||
append: ddeAppend<HTMLButtonElement>;
|
||||
}
|
||||
interface HTMLCanvasElement{
|
||||
/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */
|
||||
append: ddeAppend<HTMLCanvasElement>;
|
||||
}
|
||||
interface HTMLTableCaptionElement{
|
||||
/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */
|
||||
append: ddeAppend<HTMLTableCaptionElement>;
|
||||
}
|
||||
interface HTMLTableColElement{
|
||||
/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */
|
||||
append: ddeAppend<HTMLTableColElement>;
|
||||
}
|
||||
interface HTMLTableColElement{
|
||||
/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */
|
||||
append: ddeAppend<HTMLTableColElement>;
|
||||
}
|
||||
interface HTMLDataElement{
|
||||
/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */
|
||||
append: ddeAppend<HTMLDataElement>;
|
||||
}
|
||||
interface HTMLDataListElement{
|
||||
/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */
|
||||
append: ddeAppend<HTMLDataListElement>;
|
||||
}
|
||||
interface HTMLModElement{
|
||||
/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */
|
||||
append: ddeAppend<HTMLModElement>;
|
||||
}
|
||||
interface HTMLDetailsElement{
|
||||
/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */
|
||||
append: ddeAppend<HTMLDetailsElement>;
|
||||
}
|
||||
interface HTMLDialogElement{
|
||||
/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */
|
||||
append: ddeAppend<HTMLDialogElement>;
|
||||
}
|
||||
interface HTMLDivElement{
|
||||
/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */
|
||||
append: ddeAppend<HTMLDivElement>;
|
||||
}
|
||||
interface HTMLDListElement{
|
||||
/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */
|
||||
append: ddeAppend<HTMLDListElement>;
|
||||
}
|
||||
interface HTMLEmbedElement{
|
||||
/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */
|
||||
append: ddeAppend<HTMLEmbedElement>;
|
||||
}
|
||||
interface HTMLFieldSetElement{
|
||||
/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */
|
||||
append: ddeAppend<HTMLFieldSetElement>;
|
||||
}
|
||||
interface HTMLFormElement{
|
||||
/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */
|
||||
append: ddeAppend<HTMLFormElement>;
|
||||
}
|
||||
interface HTMLHeadingElement{
|
||||
/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */
|
||||
append: ddeAppend<HTMLHeadingElement>;
|
||||
}
|
||||
interface HTMLHeadElement{
|
||||
/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */
|
||||
append: ddeAppend<HTMLHeadElement>;
|
||||
}
|
||||
interface HTMLHRElement{
|
||||
/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */
|
||||
append: ddeAppend<HTMLHRElement>;
|
||||
}
|
||||
interface HTMLHtmlElement{
|
||||
/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */
|
||||
append: ddeAppend<HTMLHtmlElement>;
|
||||
}
|
||||
interface HTMLIFrameElement{
|
||||
/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */
|
||||
append: ddeAppend<HTMLIFrameElement>;
|
||||
}
|
||||
interface HTMLImageElement{
|
||||
/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */
|
||||
append: ddeAppend<HTMLImageElement>;
|
||||
}
|
||||
interface HTMLInputElement{
|
||||
/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */
|
||||
append: ddeAppend<HTMLInputElement>;
|
||||
}
|
||||
interface HTMLLabelElement{
|
||||
/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */
|
||||
append: ddeAppend<HTMLLabelElement>;
|
||||
}
|
||||
interface HTMLLegendElement{
|
||||
/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */
|
||||
append: ddeAppend<HTMLLegendElement>;
|
||||
}
|
||||
interface HTMLLIElement{
|
||||
/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */
|
||||
append: ddeAppend<HTMLLIElement>;
|
||||
}
|
||||
interface HTMLLinkElement{
|
||||
/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */
|
||||
append: ddeAppend<HTMLLinkElement>;
|
||||
}
|
||||
interface HTMLMapElement{
|
||||
/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */
|
||||
append: ddeAppend<HTMLMapElement>;
|
||||
}
|
||||
interface HTMLMenuElement{
|
||||
/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */
|
||||
append: ddeAppend<HTMLMenuElement>;
|
||||
}
|
||||
interface HTMLMetaElement{
|
||||
/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */
|
||||
append: ddeAppend<HTMLMetaElement>;
|
||||
}
|
||||
interface HTMLMeterElement{
|
||||
/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */
|
||||
append: ddeAppend<HTMLMeterElement>;
|
||||
}
|
||||
interface HTMLObjectElement{
|
||||
/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */
|
||||
append: ddeAppend<HTMLObjectElement>;
|
||||
}
|
||||
interface HTMLOListElement{
|
||||
/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */
|
||||
append: ddeAppend<HTMLOListElement>;
|
||||
}
|
||||
interface HTMLOptGroupElement{
|
||||
/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */
|
||||
append: ddeAppend<HTMLOptGroupElement>;
|
||||
}
|
||||
interface HTMLOptionElement{
|
||||
/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */
|
||||
append: ddeAppend<HTMLOptionElement>;
|
||||
}
|
||||
interface HTMLOutputElement{
|
||||
/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */
|
||||
append: ddeAppend<HTMLOutputElement>;
|
||||
}
|
||||
interface HTMLParagraphElement{
|
||||
/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */
|
||||
append: ddeAppend<HTMLParagraphElement>;
|
||||
}
|
||||
interface HTMLPictureElement{
|
||||
/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */
|
||||
append: ddeAppend<HTMLPictureElement>;
|
||||
}
|
||||
interface HTMLPreElement{
|
||||
/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */
|
||||
append: ddeAppend<HTMLPreElement>;
|
||||
}
|
||||
interface HTMLProgressElement{
|
||||
/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */
|
||||
append: ddeAppend<HTMLProgressElement>;
|
||||
}
|
||||
interface HTMLScriptElement{
|
||||
/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */
|
||||
append: ddeAppend<HTMLScriptElement>;
|
||||
}
|
||||
interface HTMLSelectElement{
|
||||
/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */
|
||||
append: ddeAppend<HTMLSelectElement>;
|
||||
}
|
||||
interface HTMLSlotElement{
|
||||
/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */
|
||||
append: ddeAppend<HTMLSlotElement>;
|
||||
}
|
||||
interface HTMLSourceElement{
|
||||
/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */
|
||||
append: ddeAppend<HTMLSourceElement>;
|
||||
}
|
||||
interface HTMLSpanElement{
|
||||
/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */
|
||||
append: ddeAppend<HTMLSpanElement>;
|
||||
}
|
||||
interface HTMLStyleElement{
|
||||
/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */
|
||||
append: ddeAppend<HTMLStyleElement>;
|
||||
}
|
||||
interface HTMLTableElement{
|
||||
/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */
|
||||
append: ddeAppend<HTMLTableElement>;
|
||||
}
|
||||
interface HTMLTableSectionElement{
|
||||
/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */
|
||||
append: ddeAppend<HTMLTableSectionElement>;
|
||||
}
|
||||
interface HTMLTableCellElement{
|
||||
/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */
|
||||
append: ddeAppend<HTMLTableCellElement>;
|
||||
}
|
||||
interface HTMLTemplateElement{
|
||||
/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */
|
||||
append: ddeAppend<HTMLTemplateElement>;
|
||||
}
|
||||
interface HTMLTextAreaElement{
|
||||
/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */
|
||||
append: ddeAppend<HTMLTextAreaElement>;
|
||||
}
|
||||
interface HTMLTableCellElement{
|
||||
/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */
|
||||
append: ddeAppend<HTMLTableCellElement>;
|
||||
}
|
||||
interface HTMLTimeElement{
|
||||
/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */
|
||||
append: ddeAppend<HTMLTimeElement>;
|
||||
}
|
||||
interface HTMLTitleElement{
|
||||
/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */
|
||||
append: ddeAppend<HTMLTitleElement>;
|
||||
}
|
||||
interface HTMLTableRowElement{
|
||||
/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */
|
||||
append: ddeAppend<HTMLTableRowElement>;
|
||||
}
|
||||
interface HTMLTrackElement{
|
||||
/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */
|
||||
append: ddeAppend<HTMLTrackElement>;
|
||||
}
|
||||
interface HTMLUListElement{
|
||||
/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */
|
||||
append: ddeAppend<HTMLUListElement>;
|
||||
}
|
||||
interface HTMLVideoElement{
|
||||
/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */
|
||||
append: ddeAppend<HTMLVideoElement>;
|
||||
}
|
||||
interface DocumentFragment{
|
||||
/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */
|
||||
append: ddeAppend<DocumentFragment>;
|
||||
}
|
||||
interface SVGElement{
|
||||
/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */
|
||||
append: ddeAppend<SVGElement>;
|
||||
}
|
||||
interface ddeDocumentFragment extends DocumentFragment{ append: ddeAppend<ddeDocumentFragment>; }
|
||||
interface ddeHTMLElement extends HTMLElement{ append: ddeAppend<ddeHTMLElement>; }
|
||||
interface ddeSVGElement extends SVGElement{ append: ddeAppend<ddeSVGElement>; }
|
||||
interface ddeMathMLElement extends MathMLElement{ append: ddeAppend<ddeMathMLElement>; }
|
||||
|
||||
interface ddeHTMLElementTagNameMap {
|
||||
"a": ddeHTMLAnchorElement;
|
||||
"area": ddeHTMLAreaElement;
|
||||
"audio": ddeHTMLAudioElement;
|
||||
"base": ddeHTMLBaseElement;
|
||||
"blockquote": ddeHTMLQuoteElement;
|
||||
"body": ddeHTMLBodyElement;
|
||||
"br": ddeHTMLBRElement;
|
||||
"button": ddeHTMLButtonElement;
|
||||
"canvas": ddeHTMLCanvasElement;
|
||||
"caption": ddeHTMLTableCaptionElement;
|
||||
"col": ddeHTMLTableColElement;
|
||||
"colgroup": ddeHTMLTableColElement;
|
||||
"data": ddeHTMLDataElement;
|
||||
"datalist": ddeHTMLDataListElement;
|
||||
"del": ddeHTMLModElement;
|
||||
"details": ddeHTMLDetailsElement;
|
||||
"dialog": ddeHTMLDialogElement;
|
||||
"div": ddeHTMLDivElement;
|
||||
"dl": ddeHTMLDListElement;
|
||||
"embed": ddeHTMLEmbedElement;
|
||||
"fieldset": ddeHTMLFieldSetElement;
|
||||
"form": ddeHTMLFormElement;
|
||||
"h1": ddeHTMLHeadingElement;
|
||||
"h2": ddeHTMLHeadingElement;
|
||||
"h3": ddeHTMLHeadingElement;
|
||||
"h4": ddeHTMLHeadingElement;
|
||||
"h5": ddeHTMLHeadingElement;
|
||||
"h6": ddeHTMLHeadingElement;
|
||||
"head": ddeHTMLHeadElement;
|
||||
"hr": ddeHTMLHRElement;
|
||||
"html": ddeHTMLHtmlElement;
|
||||
"iframe": ddeHTMLIFrameElement;
|
||||
"img": ddeHTMLImageElement;
|
||||
"input": ddeHTMLInputElement;
|
||||
"ins": ddeHTMLModElement;
|
||||
"label": ddeHTMLLabelElement;
|
||||
"legend": ddeHTMLLegendElement;
|
||||
"li": ddeHTMLLIElement;
|
||||
"link": ddeHTMLLinkElement;
|
||||
"map": ddeHTMLMapElement;
|
||||
"menu": ddeHTMLMenuElement;
|
||||
"meta": ddeHTMLMetaElement;
|
||||
"meter": ddeHTMLMeterElement;
|
||||
"object": ddeHTMLObjectElement;
|
||||
"ol": ddeHTMLOListElement;
|
||||
"optgroup": ddeHTMLOptGroupElement;
|
||||
"option": ddeHTMLOptionElement;
|
||||
"output": ddeHTMLOutputElement;
|
||||
"p": ddeHTMLParagraphElement;
|
||||
"picture": ddeHTMLPictureElement;
|
||||
"pre": ddeHTMLPreElement;
|
||||
"progress": ddeHTMLProgressElement;
|
||||
"q": ddeHTMLQuoteElement;
|
||||
"script": ddeHTMLScriptElement;
|
||||
"select": ddeHTMLSelectElement;
|
||||
"slot": ddeHTMLSlotElement;
|
||||
"source": ddeHTMLSourceElement;
|
||||
"span": ddeHTMLSpanElement;
|
||||
"style": ddeHTMLStyleElement;
|
||||
"table": ddeHTMLTableElement;
|
||||
"tbody": ddeHTMLTableSectionElement;
|
||||
"td": ddeHTMLTableCellElement;
|
||||
"template": ddeHTMLTemplateElement;
|
||||
"textarea": ddeHTMLTextAreaElement;
|
||||
"tfoot": ddeHTMLTableSectionElement;
|
||||
"th": ddeHTMLTableCellElement;
|
||||
"thead": ddeHTMLTableSectionElement;
|
||||
"time": ddeHTMLTimeElement;
|
||||
"title": ddeHTMLTitleElement;
|
||||
"tr": ddeHTMLTableRowElement;
|
||||
"track": ddeHTMLTrackElement;
|
||||
"ul": ddeHTMLUListElement;
|
||||
"video": ddeHTMLVideoElement;
|
||||
}
|
||||
interface ddeHTMLAnchorElement extends HTMLAnchorElement{ append: ddeAppend<ddeHTMLAnchorElement>; }
|
||||
interface ddeHTMLAreaElement extends HTMLAreaElement{ append: ddeAppend<ddeHTMLAreaElement>; }
|
||||
interface ddeHTMLAudioElement extends HTMLAudioElement{ append: ddeAppend<ddeHTMLAudioElement>; }
|
||||
interface ddeHTMLBaseElement extends HTMLBaseElement{ append: ddeAppend<ddeHTMLBaseElement>; }
|
||||
interface ddeHTMLQuoteElement extends HTMLQuoteElement{ append: ddeAppend<ddeHTMLQuoteElement>; }
|
||||
interface ddeHTMLBodyElement extends HTMLBodyElement{ append: ddeAppend<ddeHTMLBodyElement>; }
|
||||
interface ddeHTMLBRElement extends HTMLBRElement{ append: ddeAppend<ddeHTMLBRElement>; }
|
||||
interface ddeHTMLButtonElement extends HTMLButtonElement{ append: ddeAppend<ddeHTMLButtonElement>; }
|
||||
interface ddeHTMLCanvasElement extends HTMLCanvasElement{ append: ddeAppend<ddeHTMLCanvasElement>; }
|
||||
interface ddeHTMLTableCaptionElement extends HTMLTableCaptionElement{ append: ddeAppend<ddeHTMLTableCaptionElement>; }
|
||||
interface ddeHTMLTableColElement extends HTMLTableColElement{ append: ddeAppend<ddeHTMLTableColElement>; }
|
||||
interface ddeHTMLTableColElement extends HTMLTableColElement{ append: ddeAppend<ddeHTMLTableColElement>; }
|
||||
interface ddeHTMLDataElement extends HTMLDataElement{ append: ddeAppend<ddeHTMLDataElement>; }
|
||||
interface ddeHTMLDataListElement extends HTMLDataListElement{ append: ddeAppend<ddeHTMLDataListElement>; }
|
||||
interface ddeHTMLModElement extends HTMLModElement{ append: ddeAppend<ddeHTMLModElement>; }
|
||||
interface ddeHTMLDetailsElement extends HTMLDetailsElement{ append: ddeAppend<ddeHTMLDetailsElement>; }
|
||||
interface ddeHTMLDialogElement extends HTMLDialogElement{ append: ddeAppend<ddeHTMLDialogElement>; }
|
||||
interface ddeHTMLDivElement extends HTMLDivElement{ append: ddeAppend<ddeHTMLDivElement>; }
|
||||
interface ddeHTMLDListElement extends HTMLDListElement{ append: ddeAppend<ddeHTMLDListElement>; }
|
||||
interface ddeHTMLEmbedElement extends HTMLEmbedElement{ append: ddeAppend<ddeHTMLEmbedElement>; }
|
||||
interface ddeHTMLFieldSetElement extends HTMLFieldSetElement{ append: ddeAppend<ddeHTMLFieldSetElement>; }
|
||||
interface ddeHTMLFormElement extends HTMLFormElement{ append: ddeAppend<ddeHTMLFormElement>; }
|
||||
interface ddeHTMLHeadingElement extends HTMLHeadingElement{ append: ddeAppend<ddeHTMLHeadingElement>; }
|
||||
interface ddeHTMLHeadElement extends HTMLHeadElement{ append: ddeAppend<ddeHTMLHeadElement>; }
|
||||
interface ddeHTMLHRElement extends HTMLHRElement{ append: ddeAppend<ddeHTMLHRElement>; }
|
||||
interface ddeHTMLHtmlElement extends HTMLHtmlElement{ append: ddeAppend<ddeHTMLHtmlElement>; }
|
||||
interface ddeHTMLIFrameElement extends HTMLIFrameElement{ append: ddeAppend<ddeHTMLIFrameElement>; }
|
||||
interface ddeHTMLImageElement extends HTMLImageElement{ append: ddeAppend<ddeHTMLImageElement>; }
|
||||
interface ddeHTMLInputElement extends HTMLInputElement{ append: ddeAppend<ddeHTMLInputElement>; }
|
||||
interface ddeHTMLLabelElement extends HTMLLabelElement{ append: ddeAppend<ddeHTMLLabelElement>; }
|
||||
interface ddeHTMLLegendElement extends HTMLLegendElement{ append: ddeAppend<ddeHTMLLegendElement>; }
|
||||
interface ddeHTMLLIElement extends HTMLLIElement{ append: ddeAppend<ddeHTMLLIElement>; }
|
||||
interface ddeHTMLLinkElement extends HTMLLinkElement{ append: ddeAppend<ddeHTMLLinkElement>; }
|
||||
interface ddeHTMLMapElement extends HTMLMapElement{ append: ddeAppend<ddeHTMLMapElement>; }
|
||||
interface ddeHTMLMenuElement extends HTMLMenuElement{ append: ddeAppend<ddeHTMLMenuElement>; }
|
||||
interface ddeHTMLMetaElement extends HTMLMetaElement{ append: ddeAppend<ddeHTMLMetaElement>; }
|
||||
interface ddeHTMLMeterElement extends HTMLMeterElement{ append: ddeAppend<ddeHTMLMeterElement>; }
|
||||
interface ddeHTMLObjectElement extends HTMLObjectElement{ append: ddeAppend<ddeHTMLObjectElement>; }
|
||||
interface ddeHTMLOListElement extends HTMLOListElement{ append: ddeAppend<ddeHTMLOListElement>; }
|
||||
interface ddeHTMLOptGroupElement extends HTMLOptGroupElement{ append: ddeAppend<ddeHTMLOptGroupElement>; }
|
||||
interface ddeHTMLOptionElement extends HTMLOptionElement{ append: ddeAppend<ddeHTMLOptionElement>; }
|
||||
interface ddeHTMLOutputElement extends HTMLOutputElement{ append: ddeAppend<ddeHTMLOutputElement>; }
|
||||
interface ddeHTMLParagraphElement extends HTMLParagraphElement{ append: ddeAppend<ddeHTMLParagraphElement>; }
|
||||
interface ddeHTMLPictureElement extends HTMLPictureElement{ append: ddeAppend<ddeHTMLPictureElement>; }
|
||||
interface ddeHTMLPreElement extends HTMLPreElement{ append: ddeAppend<ddeHTMLPreElement>; }
|
||||
interface ddeHTMLProgressElement extends HTMLProgressElement{ append: ddeAppend<ddeHTMLProgressElement>; }
|
||||
interface ddeHTMLScriptElement extends HTMLScriptElement{ append: ddeAppend<ddeHTMLScriptElement>; }
|
||||
interface ddeHTMLSelectElement extends HTMLSelectElement{ append: ddeAppend<ddeHTMLSelectElement>; }
|
||||
interface ddeHTMLSlotElement extends HTMLSlotElement{ append: ddeAppend<ddeHTMLSlotElement>; }
|
||||
interface ddeHTMLSourceElement extends HTMLSourceElement{ append: ddeAppend<ddeHTMLSourceElement>; }
|
||||
interface ddeHTMLSpanElement extends HTMLSpanElement{ append: ddeAppend<ddeHTMLSpanElement>; }
|
||||
interface ddeHTMLStyleElement extends HTMLStyleElement{ append: ddeAppend<ddeHTMLStyleElement>; }
|
||||
interface ddeHTMLTableElement extends HTMLTableElement{ append: ddeAppend<ddeHTMLTableElement>; }
|
||||
interface ddeHTMLTableSectionElement extends HTMLTableSectionElement{ append: ddeAppend<ddeHTMLTableSectionElement>; }
|
||||
interface ddeHTMLTableCellElement extends HTMLTableCellElement{ append: ddeAppend<ddeHTMLTableCellElement>; }
|
||||
interface ddeHTMLTemplateElement extends HTMLTemplateElement{ append: ddeAppend<ddeHTMLTemplateElement>; }
|
||||
interface ddeHTMLTextAreaElement extends HTMLTextAreaElement{ append: ddeAppend<ddeHTMLTextAreaElement>; }
|
||||
interface ddeHTMLTableCellElement extends HTMLTableCellElement{ append: ddeAppend<ddeHTMLTableCellElement>; }
|
||||
interface ddeHTMLTimeElement extends HTMLTimeElement{ append: ddeAppend<ddeHTMLTimeElement>; }
|
||||
interface ddeHTMLTitleElement extends HTMLTitleElement{ append: ddeAppend<ddeHTMLTitleElement>; }
|
||||
interface ddeHTMLTableRowElement extends HTMLTableRowElement{ append: ddeAppend<ddeHTMLTableRowElement>; }
|
||||
interface ddeHTMLTrackElement extends HTMLTrackElement{ append: ddeAppend<ddeHTMLTrackElement>; }
|
||||
interface ddeHTMLUListElement extends HTMLUListElement{ append: ddeAppend<ddeHTMLUListElement>; }
|
||||
interface ddeHTMLVideoElement extends HTMLVideoElement{ append: ddeAppend<ddeHTMLVideoElement>; }
|
||||
|
||||
interface ddeSVGElementTagNameMap {
|
||||
"a": ddeSVGAElement;
|
||||
"animate": ddeSVGAnimateElement;
|
||||
"animateMotion": ddeSVGAnimateMotionElement;
|
||||
"animateTransform": ddeSVGAnimateTransformElement;
|
||||
"circle": ddeSVGCircleElement;
|
||||
"clipPath": ddeSVGClipPathElement;
|
||||
"defs": ddeSVGDefsElement;
|
||||
"desc": ddeSVGDescElement;
|
||||
"ellipse": ddeSVGEllipseElement;
|
||||
"feBlend": ddeSVGFEBlendElement;
|
||||
"feColorMatrix": ddeSVGFEColorMatrixElement;
|
||||
"feComponentTransfer": ddeSVGFEComponentTransferElement;
|
||||
"feComposite": ddeSVGFECompositeElement;
|
||||
"feConvolveMatrix": ddeSVGFEConvolveMatrixElement;
|
||||
"feDiffuseLighting": ddeSVGFEDiffuseLightingElement;
|
||||
"feDisplacementMap": ddeSVGFEDisplacementMapElement;
|
||||
"feDistantLight": ddeSVGFEDistantLightElement;
|
||||
"feDropShadow": ddeSVGFEDropShadowElement;
|
||||
"feFlood": ddeSVGFEFloodElement;
|
||||
"feFuncA": ddeSVGFEFuncAElement;
|
||||
"feFuncB": ddeSVGFEFuncBElement;
|
||||
"feFuncG": ddeSVGFEFuncGElement;
|
||||
"feFuncR": ddeSVGFEFuncRElement;
|
||||
"feGaussianBlur": ddeSVGFEGaussianBlurElement;
|
||||
"feImage": ddeSVGFEImageElement;
|
||||
"feMerge": ddeSVGFEMergeElement;
|
||||
"feMergeNode": ddeSVGFEMergeNodeElement;
|
||||
"feMorphology": ddeSVGFEMorphologyElement;
|
||||
"feOffset": ddeSVGFEOffsetElement;
|
||||
"fePointLight": ddeSVGFEPointLightElement;
|
||||
"feSpecularLighting": ddeSVGFESpecularLightingElement;
|
||||
"feSpotLight": ddeSVGFESpotLightElement;
|
||||
"feTile": ddeSVGFETileElement;
|
||||
"feTurbulence": ddeSVGFETurbulenceElement;
|
||||
"filter": ddeSVGFilterElement;
|
||||
"foreignObject": ddeSVGForeignObjectElement;
|
||||
"g": ddeSVGGElement;
|
||||
"image": ddeSVGImageElement;
|
||||
"line": ddeSVGLineElement;
|
||||
"linearGradient": ddeSVGLinearGradientElement;
|
||||
"marker": ddeSVGMarkerElement;
|
||||
"mask": ddeSVGMaskElement;
|
||||
"metadata": ddeSVGMetadataElement;
|
||||
"mpath": ddeSVGMPathElement;
|
||||
"path": ddeSVGPathElement;
|
||||
"pattern": ddeSVGPatternElement;
|
||||
"polygon": ddeSVGPolygonElement;
|
||||
"polyline": ddeSVGPolylineElement;
|
||||
"radialGradient": ddeSVGRadialGradientElement;
|
||||
"rect": ddeSVGRectElement;
|
||||
"script": ddeSVGScriptElement;
|
||||
"set": ddeSVGSetElement;
|
||||
"stop": ddeSVGStopElement;
|
||||
"style": ddeSVGStyleElement;
|
||||
"svg": ddeSVGSVGElement;
|
||||
"switch": ddeSVGSwitchElement;
|
||||
"symbol": ddeSVGSymbolElement;
|
||||
"text": ddeSVGTextElement;
|
||||
"textPath": ddeSVGTextPathElement;
|
||||
"title": ddeSVGTitleElement;
|
||||
"tspan": ddeSVGTSpanElement;
|
||||
"use": ddeSVGUseElement;
|
||||
"view": ddeSVGViewElement;
|
||||
}
|
||||
interface ddeSVGAElement extends SVGAElement{ append: ddeAppend<ddeSVGAElement>; }
|
||||
interface ddeSVGAnimateElement extends SVGAnimateElement{ append: ddeAppend<ddeSVGAnimateElement>; }
|
||||
interface ddeSVGAnimateMotionElement extends SVGAnimateMotionElement{ append: ddeAppend<ddeSVGAnimateMotionElement>; }
|
||||
interface ddeSVGAnimateTransformElement extends SVGAnimateTransformElement{ append: ddeAppend<ddeSVGAnimateTransformElement>; }
|
||||
interface ddeSVGCircleElement extends SVGCircleElement{ append: ddeAppend<ddeSVGCircleElement>; }
|
||||
interface ddeSVGClipPathElement extends SVGClipPathElement{ append: ddeAppend<ddeSVGClipPathElement>; }
|
||||
interface ddeSVGDefsElement extends SVGDefsElement{ append: ddeAppend<ddeSVGDefsElement>; }
|
||||
interface ddeSVGDescElement extends SVGDescElement{ append: ddeAppend<ddeSVGDescElement>; }
|
||||
interface ddeSVGEllipseElement extends SVGEllipseElement{ append: ddeAppend<ddeSVGEllipseElement>; }
|
||||
interface ddeSVGFEBlendElement extends SVGFEBlendElement{ append: ddeAppend<ddeSVGFEBlendElement>; }
|
||||
interface ddeSVGFEColorMatrixElement extends SVGFEColorMatrixElement{ append: ddeAppend<ddeSVGFEColorMatrixElement>; }
|
||||
interface ddeSVGFEComponentTransferElement extends SVGFEComponentTransferElement{ append: ddeAppend<ddeSVGFEComponentTransferElement>; }
|
||||
interface ddeSVGFECompositeElement extends SVGFECompositeElement{ append: ddeAppend<ddeSVGFECompositeElement>; }
|
||||
interface ddeSVGFEConvolveMatrixElement extends SVGFEConvolveMatrixElement{ append: ddeAppend<ddeSVGFEConvolveMatrixElement>; }
|
||||
interface ddeSVGFEDiffuseLightingElement extends SVGFEDiffuseLightingElement{ append: ddeAppend<ddeSVGFEDiffuseLightingElement>; }
|
||||
interface ddeSVGFEDisplacementMapElement extends SVGFEDisplacementMapElement{ append: ddeAppend<ddeSVGFEDisplacementMapElement>; }
|
||||
interface ddeSVGFEDistantLightElement extends SVGFEDistantLightElement{ append: ddeAppend<ddeSVGFEDistantLightElement>; }
|
||||
interface ddeSVGFEDropShadowElement extends SVGFEDropShadowElement{ append: ddeAppend<ddeSVGFEDropShadowElement>; }
|
||||
interface ddeSVGFEFloodElement extends SVGFEFloodElement{ append: ddeAppend<ddeSVGFEFloodElement>; }
|
||||
interface ddeSVGFEFuncAElement extends SVGFEFuncAElement{ append: ddeAppend<ddeSVGFEFuncAElement>; }
|
||||
interface ddeSVGFEFuncBElement extends SVGFEFuncBElement{ append: ddeAppend<ddeSVGFEFuncBElement>; }
|
||||
interface ddeSVGFEFuncGElement extends SVGFEFuncGElement{ append: ddeAppend<ddeSVGFEFuncGElement>; }
|
||||
interface ddeSVGFEFuncRElement extends SVGFEFuncRElement{ append: ddeAppend<ddeSVGFEFuncRElement>; }
|
||||
interface ddeSVGFEGaussianBlurElement extends SVGFEGaussianBlurElement{ append: ddeAppend<ddeSVGFEGaussianBlurElement>; }
|
||||
interface ddeSVGFEImageElement extends SVGFEImageElement{ append: ddeAppend<ddeSVGFEImageElement>; }
|
||||
interface ddeSVGFEMergeElement extends SVGFEMergeElement{ append: ddeAppend<ddeSVGFEMergeElement>; }
|
||||
interface ddeSVGFEMergeNodeElement extends SVGFEMergeNodeElement{ append: ddeAppend<ddeSVGFEMergeNodeElement>; }
|
||||
interface ddeSVGFEMorphologyElement extends SVGFEMorphologyElement{ append: ddeAppend<ddeSVGFEMorphologyElement>; }
|
||||
interface ddeSVGFEOffsetElement extends SVGFEOffsetElement{ append: ddeAppend<ddeSVGFEOffsetElement>; }
|
||||
interface ddeSVGFEPointLightElement extends SVGFEPointLightElement{ append: ddeAppend<ddeSVGFEPointLightElement>; }
|
||||
interface ddeSVGFESpecularLightingElement extends SVGFESpecularLightingElement{ append: ddeAppend<ddeSVGFESpecularLightingElement>; }
|
||||
interface ddeSVGFESpotLightElement extends SVGFESpotLightElement{ append: ddeAppend<ddeSVGFESpotLightElement>; }
|
||||
interface ddeSVGFETileElement extends SVGFETileElement{ append: ddeAppend<ddeSVGFETileElement>; }
|
||||
interface ddeSVGFETurbulenceElement extends SVGFETurbulenceElement{ append: ddeAppend<ddeSVGFETurbulenceElement>; }
|
||||
interface ddeSVGFilterElement extends SVGFilterElement{ append: ddeAppend<ddeSVGFilterElement>; }
|
||||
interface ddeSVGForeignObjectElement extends SVGForeignObjectElement{ append: ddeAppend<ddeSVGForeignObjectElement>; }
|
||||
interface ddeSVGGElement extends SVGGElement{ append: ddeAppend<ddeSVGGElement>; }
|
||||
interface ddeSVGImageElement extends SVGImageElement{ append: ddeAppend<ddeSVGImageElement>; }
|
||||
interface ddeSVGLineElement extends SVGLineElement{ append: ddeAppend<ddeSVGLineElement>; }
|
||||
interface ddeSVGLinearGradientElement extends SVGLinearGradientElement{ append: ddeAppend<ddeSVGLinearGradientElement>; }
|
||||
interface ddeSVGMarkerElement extends SVGMarkerElement{ append: ddeAppend<ddeSVGMarkerElement>; }
|
||||
interface ddeSVGMaskElement extends SVGMaskElement{ append: ddeAppend<ddeSVGMaskElement>; }
|
||||
interface ddeSVGMetadataElement extends SVGMetadataElement{ append: ddeAppend<ddeSVGMetadataElement>; }
|
||||
interface ddeSVGMPathElement extends SVGMPathElement{ append: ddeAppend<ddeSVGMPathElement>; }
|
||||
interface ddeSVGPathElement extends SVGPathElement{ append: ddeAppend<ddeSVGPathElement>; }
|
||||
interface ddeSVGPatternElement extends SVGPatternElement{ append: ddeAppend<ddeSVGPatternElement>; }
|
||||
interface ddeSVGPolygonElement extends SVGPolygonElement{ append: ddeAppend<ddeSVGPolygonElement>; }
|
||||
interface ddeSVGPolylineElement extends SVGPolylineElement{ append: ddeAppend<ddeSVGPolylineElement>; }
|
||||
interface ddeSVGRadialGradientElement extends SVGRadialGradientElement{ append: ddeAppend<ddeSVGRadialGradientElement>; }
|
||||
interface ddeSVGRectElement extends SVGRectElement{ append: ddeAppend<ddeSVGRectElement>; }
|
||||
interface ddeSVGScriptElement extends SVGScriptElement{ append: ddeAppend<ddeSVGScriptElement>; }
|
||||
interface ddeSVGSetElement extends SVGSetElement{ append: ddeAppend<ddeSVGSetElement>; }
|
||||
interface ddeSVGStopElement extends SVGStopElement{ append: ddeAppend<ddeSVGStopElement>; }
|
||||
interface ddeSVGStyleElement extends SVGStyleElement{ append: ddeAppend<ddeSVGStyleElement>; }
|
||||
interface ddeSVGSVGElement extends SVGSVGElement{ append: ddeAppend<ddeSVGSVGElement>; }
|
||||
interface ddeSVGSwitchElement extends SVGSwitchElement{ append: ddeAppend<ddeSVGSwitchElement>; }
|
||||
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
2
dist/esm.js
vendored
File diff suppressed because one or more lines are too long
@ -119,6 +119,19 @@ main > *{
|
||||
font-size: .9rem;
|
||||
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{
|
||||
--shiki-color-text: #e9eded;
|
||||
--shiki-color-background: #212121;
|
||||
@ -132,6 +145,7 @@ main > *{
|
||||
--shiki-token-punctuation: var(--code);
|
||||
--shiki-token-link: #EE0000;
|
||||
white-space: pre;
|
||||
overflow: scroll;
|
||||
}
|
||||
.code[data-js=todo]{
|
||||
border: 1px solid var(--border);
|
||||
@ -152,16 +166,6 @@ main > *{
|
||||
background: #212121 !important;
|
||||
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;
|
||||
.notice h3{
|
||||
margin-top: 0;
|
||||
}
|
||||
@ -1,9 +1,9 @@
|
||||
<!DOCTYPE html><html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><meta name="description" content="Introducing a 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 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 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 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";
|
||||
const clicks= S(0);
|
||||
<!DOCTYPE html><html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><meta name="description" content="Introducing a 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 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 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-observables" title="Handling reactivity in UI via observables.">4. Observables 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 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 observables (<code>O</code>) and how them incorporate to UI templates.</p><p>Now we will clarify how the observables 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-observables.js";
|
||||
import { O } from "https://cdn.jsdelivr.net/gh/jaandrle/deka-dom-el/dist/esm-with-observables.js";
|
||||
const clicks= O(0);
|
||||
document.body.append(
|
||||
el().append(
|
||||
el("p", S(()=>
|
||||
el("p", O(()=>
|
||||
"Hello World "+"🎉".repeat(clicks())
|
||||
)),
|
||||
el("button", {
|
||||
@ -13,4 +13,4 @@ document.body.append(
|
||||
})
|
||||
)
|
||||
);
|
||||
</code></div><script>Flems(document.getElementById("code-example-1-exquzbx4inc"), JSON.parse("{\"files\":[{\"name\":\".js\",\"content\":\"import { el } from \\\"https://cdn.jsdelivr.net/gh/jaandrle/deka-dom-el/dist/esm-with-signals.js\\\";\\nimport { S } from \\\"https://cdn.jsdelivr.net/gh/jaandrle/deka-dom-el/dist/esm-with-signals.js\\\";\\nconst clicks= S(0);\\ndocument.body.append(\\n\\tel().append(\\n\\t\\tel(\\\"p\\\", S(()=>\\n\\t\\t\\t\\\"Hello World \\\"+\\\"🎉\\\".repeat(clicks())\\n\\t\\t)),\\n\\t\\tel(\\\"button\\\", {\\n\\t\\t\\ttype: \\\"button\\\",\\n\\t\\t\\tonclick: ()=> clicks(clicks()+1),\\n\\t\\t\\ttextContent: \\\"Fire\\\"\\n\\t\\t})\\n\\t)\\n);\\n\"}],\"toolbar\":false}"));</script><div class="prevNext"><!--<dde:mark type="component" name="prevNext" host="parentElement" ssr/>--><!--<dde:mark type="component" name="pageLink" host="this" ssr/>--><a rel="next" href="p02-elements" title="Basic concepts of elements modifications and creations."><!--<dde:mark type="component" name="pageLink" host="parentElement" ssr/>-->(next) Elements</a></div></main></body></html>
|
||||
</code></div><script>Flems(document.getElementById("code-example-1-exquzbx4inc"), JSON.parse("{\"files\":[{\"name\":\".js\",\"content\":\"import { el } from \\\"https://cdn.jsdelivr.net/gh/jaandrle/deka-dom-el/dist/esm-with-observables.js\\\";\\nimport { O } from \\\"https://cdn.jsdelivr.net/gh/jaandrle/deka-dom-el/dist/esm-with-observables.js\\\";\\nconst clicks= O(0);\\ndocument.body.append(\\n\\tel().append(\\n\\t\\tel(\\\"p\\\", O(()=>\\n\\t\\t\\t\\\"Hello World \\\"+\\\"🎉\\\".repeat(clicks())\\n\\t\\t)),\\n\\t\\tel(\\\"button\\\", {\\n\\t\\t\\ttype: \\\"button\\\",\\n\\t\\t\\tonclick: ()=> clicks(clicks()+1),\\n\\t\\t\\ttextContent: \\\"Fire\\\"\\n\\t\\t})\\n\\t)\\n);\\n\"}],\"toolbar\":false}"));</script><div class="prevNext"><!--<dde:mark type="component" name="prevNext" host="parentElement" ssr/>--><!--<dde:mark type="component" name="pageLink" host="this" ssr/>--><a rel="next" href="p02-elements" title="Basic concepts of elements modifications and creations."><!--<dde:mark type="component" name="pageLink" host="parentElement" ssr/>-->(next) Elements</a></div></main></body></html>
|
||||
@ -1,4 +1,14 @@
|
||||
<!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 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 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://cdn.jsdelivr.net/npm/shiki" defer=""></script><script type="module" src="code.js.js"></script><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 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-observables" title="Handling reactivity in UI via observables.">4. Observables 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><div class="code" data-js="todo"><!--<dde:mark type="component" name="code" host="parentElement" ssr/>--><code class="language-js">// when NPM
|
||||
import { assign, el, elNS } from "deka-dom-el";
|
||||
// https://cdn.jsdelivr.net/gh/jaandrle/deka-dom-el/dist/esm.js
|
||||
|
||||
// “internal” utils
|
||||
import {
|
||||
assignAttribute,
|
||||
classListDeclarative,
|
||||
chainableAppend
|
||||
} from "deka-dom-el";
|
||||
</code></div><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 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")
|
||||
);
|
||||
console.log(
|
||||
@ -12,7 +22,7 @@ document.body.append(
|
||||
{ textContent: "Element’s text content.", style: "color: coral;" }
|
||||
)
|
||||
);
|
||||
</code></div><script>Flems(document.getElementById("code-example-1-nkz9lcdhykg"), JSON.parse("{\"files\":[{\"name\":\".js\",\"content\":\"document.body.append(\\n\\tdocument.createElement(\\\"div\\\")\\n);\\nconsole.log(\\n\\t\\\"Emty div is generated inside <body>:\\\",\\n\\tdocument.body.innerHTML.includes(\\\"<div></div>\\\")\\n);\\n\\ndocument.body.append(\\n\\tObject.assign(\\n\\t\\tdocument.createElement(\\\"p\\\"),\\n\\t\\t{ textContent: \\\"Element’s text content.\\\", style: \\\"color: coral;\\\" }\\n\\t)\\n);\\n\"}],\"toolbar\":false}"));</script><p>To make this easier, you can use the <code>el</code> function. Internally in basic examples, it is wrapper around <code>assign(document.createElement(…), { … })</code>.</p><!--<dde:mark type="component" name="example" host="this" ssr/>--><div id="code-example-1-13lyjukvr0yk" class="example"><!--<dde:mark type="component" name="code" host="parentElement" ssr/>--><code class="language-js">import { el, assign } from "https://cdn.jsdelivr.net/gh/jaandrle/deka-dom-el/dist/esm-with-signals.js";
|
||||
</code></div><script>Flems(document.getElementById("code-example-1-nkz9lcdhykg"), JSON.parse("{\"files\":[{\"name\":\".js\",\"content\":\"document.body.append(\\n\\tdocument.createElement(\\\"div\\\")\\n);\\nconsole.log(\\n\\t\\\"Emty div is generated inside <body>:\\\",\\n\\tdocument.body.innerHTML.includes(\\\"<div></div>\\\")\\n);\\n\\ndocument.body.append(\\n\\tObject.assign(\\n\\t\\tdocument.createElement(\\\"p\\\"),\\n\\t\\t{ textContent: \\\"Element’s text content.\\\", style: \\\"color: coral;\\\" }\\n\\t)\\n);\\n\"}],\"toolbar\":false}"));</script><p>To make this easier, you can use the <code>el</code> function. Internally in basic examples, it is wrapper around <code>assign(document.createElement(…), { … })</code>.</p><!--<dde:mark type="component" name="example" host="this" ssr/>--><div id="code-example-1-13lyjukvr0yk" class="example"><!--<dde:mark type="component" name="code" host="parentElement" ssr/>--><code class="language-js">import { el, assign } from "https://cdn.jsdelivr.net/gh/jaandrle/deka-dom-el/dist/esm-with-observables.js";
|
||||
const color= "lightcoral";
|
||||
document.body.append(
|
||||
el("p", { textContent: "Hello (first time)", style: { color } })
|
||||
@ -23,7 +33,7 @@ document.body.append(
|
||||
{ textContent: "Hello (second time)", style: { color } }
|
||||
)
|
||||
);
|
||||
</code></div><script>Flems(document.getElementById("code-example-1-13lyjukvr0yk"), JSON.parse("{\"files\":[{\"name\":\".js\",\"content\":\"import { el, assign } from \\\"https://cdn.jsdelivr.net/gh/jaandrle/deka-dom-el/dist/esm-with-signals.js\\\";\\nconst color= \\\"lightcoral\\\";\\ndocument.body.append(\\n\\tel(\\\"p\\\", { textContent: \\\"Hello (first time)\\\", style: { color } })\\n);\\ndocument.body.append(\\n\\tassign(\\n\\t\\tdocument.createElement(\\\"p\\\"),\\n\\t\\t{ textContent: \\\"Hello (second time)\\\", style: { color } }\\n\\t)\\n);\\n\"}],\"toolbar\":false}"));</script><p>The <code>assign</code> function provides improved behaviour of <code>Object.assign()</code>. You can declaratively sets any IDL and attribute of the given element. Function prefers IDL and fallback to the <code>element.setAttribute</code> if there is no writable property in the element prototype.</p><p>You can study all JavaScript elements interfaces to the corresponding HTML elements. All HTML elements inherits from <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement">HTMLElement</a>. To see all available IDLs for example for paragraphs, see <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLParagraphElement">HTMLParagraphElement</a>. Moreover, the <code>assign</code> provides a way to sets declaratively some convenient properties:</p><ul><li>It is possible to sets <code>data-*</code>/<code>aria-*</code> attributes using object notation.</li><li>In opposite, it is also possible to sets <code>data-*</code>/<code>aria-*</code> attribute using camelCase notation.</li><li>You can use string or object as a value for <code>style</code> property.</li><li><code>className</code> (IDL – preffered)/<code>class</code> are ways to add CSS class to the element. You can use string (similarly to <code>class="…"</code> syntax in HTML) or array of strings. This is handy to concat conditional classes.</li><li>Use <code>classList</code> to toggle specific classes. This will be handy later when the reactivity via signals is beeing introduced.</li><li>The <code>assign</code> also accepts the <code>undefined</code> as a value for any property to remove it from the element declaratively. Also for some IDL the corresponding attribute is removed as it can be confusing. <em>For example, natievly the element’s <code>id</code> is removed by setting the IDL to an empty string.</em></li><li>You can use <code>=</code> or <code>.</code> to force processing given key as attribute/property of the element.</li></ul><p>For processing, the <code>assign</code> internally uses <code>assignAttribute</code> and <code>classListDeclarative</code>.</p><!--<dde:mark type="component" name="example" host="this" ssr/>--><div id="code-example-1-iro9ncxa4bc" class="example"><!--<dde:mark type="component" name="code" host="parentElement" ssr/>--><code class="language-js">import { assign, assignAttribute, classListDeclarative } from "https://cdn.jsdelivr.net/gh/jaandrle/deka-dom-el/dist/esm-with-signals.js";
|
||||
</code></div><script>Flems(document.getElementById("code-example-1-13lyjukvr0yk"), JSON.parse("{\"files\":[{\"name\":\".js\",\"content\":\"import { el, assign } from \\\"https://cdn.jsdelivr.net/gh/jaandrle/deka-dom-el/dist/esm-with-observables.js\\\";\\nconst color= \\\"lightcoral\\\";\\ndocument.body.append(\\n\\tel(\\\"p\\\", { textContent: \\\"Hello (first time)\\\", style: { color } })\\n);\\ndocument.body.append(\\n\\tassign(\\n\\t\\tdocument.createElement(\\\"p\\\"),\\n\\t\\t{ textContent: \\\"Hello (second time)\\\", style: { color } }\\n\\t)\\n);\\n\"}],\"toolbar\":false}"));</script><p>The <code>assign</code> function provides improved behaviour of <code>Object.assign()</code>. You can declaratively sets any IDL and attribute of the given element. Function prefers IDL and fallback to the <code>element.setAttribute</code> if there is no writable property in the element prototype.</p><p>You can study all JavaScript elements interfaces to the corresponding HTML elements. All HTML elements inherits from <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement">HTMLElement</a>. To see all available IDLs for example for paragraphs, see <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLParagraphElement">HTMLParagraphElement</a>. Moreover, the <code>assign</code> provides a way to sets declaratively some convenient properties:</p><ul><li>It is possible to sets <code>data-*</code>/<code>aria-*</code> attributes using object notation.</li><li>In opposite, it is also possible to sets <code>data-*</code>/<code>aria-*</code> attribute using camelCase notation.</li><li>You can use string or object as a value for <code>style</code> property.</li><li><code>className</code> (IDL – preffered)/<code>class</code> are ways to add CSS class to the element. You can use string (similarly to <code>class="…"</code> syntax in HTML) or array of strings. This is handy to concat conditional classes.</li><li>Use <code>classList</code> to toggle specific classes. This will be handy later when the reactivity via observables is beeing introduced.</li><li>The <code>assign</code> also accepts the <code>undefined</code> as a value for any property to remove it from the element declaratively. Also for some IDL the corresponding attribute is removed as it can be confusing. <em>For example, natievly the element’s <code>id</code> is removed by setting the IDL to an empty string.</em></li><li>You can use <code>=</code> or <code>.</code> to force processing given key as attribute/property of the element.</li></ul><p>For processing, the <code>assign</code> internally uses <code>assignAttribute</code> and <code>classListDeclarative</code>.</p><!--<dde:mark type="component" name="example" host="this" ssr/>--><div id="code-example-1-iro9ncxa4bc" class="example"><!--<dde:mark type="component" name="code" host="parentElement" ssr/>--><code class="language-js">import { assign, assignAttribute, classListDeclarative } from "https://cdn.jsdelivr.net/gh/jaandrle/deka-dom-el/dist/esm-with-observables.js";
|
||||
const paragraph= document.createElement("p");
|
||||
|
||||
assignAttribute(paragraph, "textContent", "Hello, world!");
|
||||
@ -56,7 +66,7 @@ console.log("paragraph.something=", paragraph.something);
|
||||
document.body.append(
|
||||
paragraph
|
||||
);
|
||||
</code></div><script>Flems(document.getElementById("code-example-1-iro9ncxa4bc"), JSON.parse("{\"files\":[{\"name\":\".js\",\"content\":\"import { assign, assignAttribute, classListDeclarative } from \\\"https://cdn.jsdelivr.net/gh/jaandrle/deka-dom-el/dist/esm-with-signals.js\\\";\\nconst paragraph= document.createElement(\\\"p\\\");\\n\\nassignAttribute(paragraph, \\\"textContent\\\", \\\"Hello, world!\\\");\\n\\nassignAttribute(paragraph, \\\"style\\\", \\\"color: red; font-weight: bold;\\\");\\nassignAttribute(paragraph, \\\"style\\\", { color: \\\"navy\\\" });\\n\\nassignAttribute(paragraph, \\\"dataTest1\\\", \\\"v1\\\");\\nassignAttribute(paragraph, \\\"dataset\\\", { test2: \\\"v2\\\" });\\n\\nassign(paragraph, { //textContent and style see above\\n\\tariaLabel: \\\"v1\\\", //data* see above\\n\\tariaset: { role: \\\"none\\\" }, // dataset see above\\n\\t\\\"=onclick\\\": \\\"console.log(event)\\\",\\n\\tonmouseout: console.info,\\n\\t\\\".something\\\": \\\"something\\\",\\n\\tclassList: {} //see below\\n});\\n\\nclassListDeclarative(paragraph, {\\n\\tclassAdd: true,\\n\\tclassRemove: false,\\n\\tclassAdd1: 1,\\n\\tclassRemove1: 0,\\n\\tclassToggle: -1\\n});\\n\\nconsole.log(paragraph.outerHTML);\\nconsole.log(\\\"paragraph.something=\\\", paragraph.something);\\ndocument.body.append(\\n\\tparagraph\\n);\\n\"}],\"toolbar\":false}"));</script><h3 id="h-native-javascript-templating"><!--<dde:mark type="component" name="h3" host="parentElement" ssr/>--><a href="#h-native-javascript-templating" tabindex="-1">#</a> Native JavaScript templating</h3><p>By default, the native JS has no good way to define HTML template using DOM API:</p><!--<dde:mark type="component" name="example" host="this" ssr/>--><div id="code-example-1-b6a1hbrxh7s" class="example"><!--<dde:mark type="component" name="code" host="parentElement" ssr/>--><code class="language-js">document.body.append(
|
||||
</code></div><script>Flems(document.getElementById("code-example-1-iro9ncxa4bc"), JSON.parse("{\"files\":[{\"name\":\".js\",\"content\":\"import { assign, assignAttribute, classListDeclarative } from \\\"https://cdn.jsdelivr.net/gh/jaandrle/deka-dom-el/dist/esm-with-observables.js\\\";\\nconst paragraph= document.createElement(\\\"p\\\");\\n\\nassignAttribute(paragraph, \\\"textContent\\\", \\\"Hello, world!\\\");\\n\\nassignAttribute(paragraph, \\\"style\\\", \\\"color: red; font-weight: bold;\\\");\\nassignAttribute(paragraph, \\\"style\\\", { color: \\\"navy\\\" });\\n\\nassignAttribute(paragraph, \\\"dataTest1\\\", \\\"v1\\\");\\nassignAttribute(paragraph, \\\"dataset\\\", { test2: \\\"v2\\\" });\\n\\nassign(paragraph, { //textContent and style see above\\n\\tariaLabel: \\\"v1\\\", //data* see above\\n\\tariaset: { role: \\\"none\\\" }, // dataset see above\\n\\t\\\"=onclick\\\": \\\"console.log(event)\\\",\\n\\tonmouseout: console.info,\\n\\t\\\".something\\\": \\\"something\\\",\\n\\tclassList: {} //see below\\n});\\n\\nclassListDeclarative(paragraph, {\\n\\tclassAdd: true,\\n\\tclassRemove: false,\\n\\tclassAdd1: 1,\\n\\tclassRemove1: 0,\\n\\tclassToggle: -1\\n});\\n\\nconsole.log(paragraph.outerHTML);\\nconsole.log(\\\"paragraph.something=\\\", paragraph.something);\\ndocument.body.append(\\n\\tparagraph\\n);\\n\"}],\"toolbar\":false}"));</script><h3 id="h-native-javascript-templating"><!--<dde:mark type="component" name="h3" host="parentElement" ssr/>--><a href="#h-native-javascript-templating" tabindex="-1">#</a> Native JavaScript templating</h3><p>By default, the native JS has no good way to define HTML template using DOM API:</p><!--<dde:mark type="component" name="example" host="this" ssr/>--><div id="code-example-1-b6a1hbrxh7s" class="example"><!--<dde:mark type="component" name="code" host="parentElement" ssr/>--><code class="language-js">document.body.append(
|
||||
document.createElement("div"),
|
||||
document.createElement("span"),
|
||||
document.createElement("main")
|
||||
@ -67,7 +77,7 @@ const template= document.createElement("main").append(
|
||||
document.createElement("span"),
|
||||
);
|
||||
console.log(typeof template==="undefined");
|
||||
</code></div><script>Flems(document.getElementById("code-example-1-b6a1hbrxh7s"), JSON.parse("{\"files\":[{\"name\":\".js\",\"content\":\"document.body.append(\\n\\tdocument.createElement(\\\"div\\\"),\\n\\tdocument.createElement(\\\"span\\\"),\\n\\tdocument.createElement(\\\"main\\\")\\n);\\nconsole.log(document.body.innerHTML.includes(\\\"<div></div><span></span><main></main>\\\"));\\nconst template= document.createElement(\\\"main\\\").append(\\n\\tdocument.createElement(\\\"div\\\"),\\n\\tdocument.createElement(\\\"span\\\"),\\n);\\nconsole.log(typeof template===\\\"undefined\\\");\\n\"}],\"toolbar\":false}"));</script><p>This library therefore overwrites the <code>append</code> method of created elements to always return parent element.</p><!--<dde:mark type="component" name="example" host="this" ssr/>--><div id="code-example-2-iro9ncxa4bc" 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";
|
||||
</code></div><script>Flems(document.getElementById("code-example-1-b6a1hbrxh7s"), JSON.parse("{\"files\":[{\"name\":\".js\",\"content\":\"document.body.append(\\n\\tdocument.createElement(\\\"div\\\"),\\n\\tdocument.createElement(\\\"span\\\"),\\n\\tdocument.createElement(\\\"main\\\")\\n);\\nconsole.log(document.body.innerHTML.includes(\\\"<div></div><span></span><main></main>\\\"));\\nconst template= document.createElement(\\\"main\\\").append(\\n\\tdocument.createElement(\\\"div\\\"),\\n\\tdocument.createElement(\\\"span\\\"),\\n);\\nconsole.log(typeof template===\\\"undefined\\\");\\n\"}],\"toolbar\":false}"));</script><p>This library therefore overwrites the <code>append</code> method of created elements to always return parent element.</p><!--<dde:mark type="component" name="example" host="this" ssr/>--><div id="code-example-2-iro9ncxa4bc" 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-observables.js";
|
||||
document.head.append(
|
||||
el("style").append(
|
||||
"tr, td{ border: 1px solid red; padding: 1em; }",
|
||||
@ -92,7 +102,7 @@ document.body.append(
|
||||
)
|
||||
);
|
||||
|
||||
import { chainableAppend } from "https://cdn.jsdelivr.net/gh/jaandrle/deka-dom-el/dist/esm-with-signals.js";
|
||||
import { chainableAppend } from "https://cdn.jsdelivr.net/gh/jaandrle/deka-dom-el/dist/esm-with-observables.js";
|
||||
/** @param {keyof HTMLElementTagNameMap} tag */
|
||||
const createElement= tag=> chainableAppend(document.createElement(tag));
|
||||
document.body.append(
|
||||
@ -102,7 +112,7 @@ document.body.append(
|
||||
)
|
||||
)
|
||||
);
|
||||
</code></div><script>Flems(document.getElementById("code-example-2-iro9ncxa4bc"), JSON.parse("{\"files\":[{\"name\":\".js\",\"content\":\"import { el } from \\\"https://cdn.jsdelivr.net/gh/jaandrle/deka-dom-el/dist/esm-with-signals.js\\\";\\ndocument.head.append(\\n\\tel(\\\"style\\\").append(\\n\\t\\t\\\"tr, td{ border: 1px solid red; padding: 1em; }\\\",\\n\\t\\t\\\"table{ border-collapse: collapse; }\\\"\\n\\t)\\n);\\ndocument.body.append(\\n\\tel(\\\"p\\\", \\\"Example of a complex template. Using for example nesting lists:\\\"),\\n\\tel(\\\"ul\\\").append(\\n\\t\\tel(\\\"li\\\", \\\"List item 1\\\"),\\n\\t\\tel(\\\"li\\\").append(\\n\\t\\t\\tel(\\\"ul\\\").append(\\n\\t\\t\\t\\tel(\\\"li\\\", \\\"Nested list item 1\\\"),\\n\\t\\t\\t)\\n\\t\\t)\\n\\t),\\n\\tel(\\\"table\\\").append(\\n\\t\\tel(\\\"tr\\\").append(\\n\\t\\t\\tel(\\\"td\\\", \\\"Row 1 – Col 1\\\"),\\n\\t\\t\\tel(\\\"td\\\", \\\"Row 1 – Col 2\\\")\\n\\t\\t)\\n\\t)\\n);\\n\\nimport { chainableAppend } from \\\"https://cdn.jsdelivr.net/gh/jaandrle/deka-dom-el/dist/esm-with-signals.js\\\";\\n/** @param {keyof HTMLElementTagNameMap} tag */\\nconst createElement= tag=> chainableAppend(document.createElement(tag));\\ndocument.body.append(\\n\\tcreateElement(\\\"p\\\").append(\\n\\t\\tcreateElement(\\\"em\\\").append(\\n\\t\\t\\t\\\"You can also use `chainableAppend`!\\\"\\n\\t\\t)\\n\\t)\\n);\\n\"}],\"toolbar\":false}"));</script><h3 id="h-basic-state-less-components"><!--<dde:mark type="component" name="h3" host="parentElement" ssr/>--><a href="#h-basic-state-less-components" tabindex="-1">#</a> Basic (state-less) components</h3><p>You can use functions for encapsulation (repeating) logic. The <code>el</code> accepts function as first argument. In that case, the function should return dom elements and the second argument for <code>el</code> is argument for given element.</p><!--<dde:mark type="component" name="example" host="this" ssr/>--><div id="code-example-1-320zz4y072o" 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";
|
||||
</code></div><script>Flems(document.getElementById("code-example-2-iro9ncxa4bc"), JSON.parse("{\"files\":[{\"name\":\".js\",\"content\":\"import { el } from \\\"https://cdn.jsdelivr.net/gh/jaandrle/deka-dom-el/dist/esm-with-observables.js\\\";\\ndocument.head.append(\\n\\tel(\\\"style\\\").append(\\n\\t\\t\\\"tr, td{ border: 1px solid red; padding: 1em; }\\\",\\n\\t\\t\\\"table{ border-collapse: collapse; }\\\"\\n\\t)\\n);\\ndocument.body.append(\\n\\tel(\\\"p\\\", \\\"Example of a complex template. Using for example nesting lists:\\\"),\\n\\tel(\\\"ul\\\").append(\\n\\t\\tel(\\\"li\\\", \\\"List item 1\\\"),\\n\\t\\tel(\\\"li\\\").append(\\n\\t\\t\\tel(\\\"ul\\\").append(\\n\\t\\t\\t\\tel(\\\"li\\\", \\\"Nested list item 1\\\"),\\n\\t\\t\\t)\\n\\t\\t)\\n\\t),\\n\\tel(\\\"table\\\").append(\\n\\t\\tel(\\\"tr\\\").append(\\n\\t\\t\\tel(\\\"td\\\", \\\"Row 1 – Col 1\\\"),\\n\\t\\t\\tel(\\\"td\\\", \\\"Row 1 – Col 2\\\")\\n\\t\\t)\\n\\t)\\n);\\n\\nimport { chainableAppend } from \\\"https://cdn.jsdelivr.net/gh/jaandrle/deka-dom-el/dist/esm-with-observables.js\\\";\\n/** @param {keyof HTMLElementTagNameMap} tag */\\nconst createElement= tag=> chainableAppend(document.createElement(tag));\\ndocument.body.append(\\n\\tcreateElement(\\\"p\\\").append(\\n\\t\\tcreateElement(\\\"em\\\").append(\\n\\t\\t\\t\\\"You can also use `chainableAppend`!\\\"\\n\\t\\t)\\n\\t)\\n);\\n\"}],\"toolbar\":false}"));</script><h3 id="h-basic-state-less-components"><!--<dde:mark type="component" name="h3" host="parentElement" ssr/>--><a href="#h-basic-state-less-components" tabindex="-1">#</a> Basic (state-less) components</h3><p>You can use functions for encapsulation (repeating) logic. The <code>el</code> accepts function as first argument. In that case, the function should return dom elements and the second argument for <code>el</code> is argument for given element.</p><!--<dde:mark type="component" name="example" host="this" ssr/>--><div id="code-example-1-320zz4y072o" 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-observables.js";
|
||||
document.head.append(
|
||||
el("style").append(
|
||||
".class1{ font-weight: bold; }",
|
||||
@ -119,7 +129,7 @@ function component({ className, textContent }){
|
||||
el("p", textContent)
|
||||
);
|
||||
}
|
||||
</code></div><script>Flems(document.getElementById("code-example-1-320zz4y072o"), JSON.parse("{\"files\":[{\"name\":\".js\",\"content\":\"import { el } from \\\"https://cdn.jsdelivr.net/gh/jaandrle/deka-dom-el/dist/esm-with-signals.js\\\";\\ndocument.head.append(\\n\\tel(\\\"style\\\").append(\\n\\t\\t\\\".class1{ font-weight: bold; }\\\",\\n\\t\\t\\\".class2{ color: purple; }\\\"\\n\\t)\\n);\\ndocument.body.append(\\n\\tel(component, { className: \\\"class2\\\", textContent: \\\"Hello World!\\\" }),\\n\\tcomponent({ className: \\\"class2\\\", textContent: \\\"Hello World!\\\" })\\n);\\n\\nfunction component({ className, textContent }){\\n\\treturn el(\\\"div\\\", { className: [ \\\"class1\\\", className ] }).append(\\n\\t\\tel(\\\"p\\\", textContent)\\n\\t);\\n}\\n\"}],\"toolbar\":false}"));</script><p>As you can see, in case of state-less/basic components there is no difference between calling component function directly or using <code>el</code> function.</p><p class="notice">It is nice to use similar naming convention as native DOM API. This allows us to use <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment" title="Destructuring assignment | MDN">the destructuring assignment syntax</a> and keep track of the native API (things are best remembered through regular use).</p><h3 id="h-creating-non-html-elements"><!--<dde:mark type="component" name="h3" host="parentElement" ssr/>--><a href="#h-creating-non-html-elements" tabindex="-1">#</a> Creating non-HTML elements</h3><p>Similarly to the native DOM API (<a href="https://developer.mozilla.org/en-US/docs/Web/API/Document/createElementNS" title="MDN"><code>document.createElementNS</code></a>) for non-HTML elements we need to tell JavaScript which kind of the element to create. We can use the <code>elNS</code> function:</p><!--<dde:mark type="component" name="example" host="this" ssr/>--><div id="code-example-1-bcjydb50gdc" class="example"><!--<dde:mark type="component" name="code" host="parentElement" ssr/>--><code class="language-js">import { elNS, assign } from "https://cdn.jsdelivr.net/gh/jaandrle/deka-dom-el/dist/esm-with-signals.js";
|
||||
</code></div><script>Flems(document.getElementById("code-example-1-320zz4y072o"), JSON.parse("{\"files\":[{\"name\":\".js\",\"content\":\"import { el } from \\\"https://cdn.jsdelivr.net/gh/jaandrle/deka-dom-el/dist/esm-with-observables.js\\\";\\ndocument.head.append(\\n\\tel(\\\"style\\\").append(\\n\\t\\t\\\".class1{ font-weight: bold; }\\\",\\n\\t\\t\\\".class2{ color: purple; }\\\"\\n\\t)\\n);\\ndocument.body.append(\\n\\tel(component, { className: \\\"class2\\\", textContent: \\\"Hello World!\\\" }),\\n\\tcomponent({ className: \\\"class2\\\", textContent: \\\"Hello World!\\\" })\\n);\\n\\nfunction component({ className, textContent }){\\n\\treturn el(\\\"div\\\", { className: [ \\\"class1\\\", className ] }).append(\\n\\t\\tel(\\\"p\\\", textContent)\\n\\t);\\n}\\n\"}],\"toolbar\":false}"));</script><p>As you can see, in case of state-less/basic components there is no difference between calling component function directly or using <code>el</code> function.</p><p class="notice">It is nice to use similar naming convention as native DOM API. This allows us to use <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment" title="Destructuring assignment | MDN">the destructuring assignment syntax</a> and keep track of the native API (things are best remembered through regular use).</p><h3 id="h-creating-non-html-elements"><!--<dde:mark type="component" name="h3" host="parentElement" ssr/>--><a href="#h-creating-non-html-elements" tabindex="-1">#</a> Creating non-HTML elements</h3><p>Similarly to the native DOM API (<a href="https://developer.mozilla.org/en-US/docs/Web/API/Document/createElementNS" title="MDN"><code>document.createElementNS</code></a>) for non-HTML elements we need to tell JavaScript which kind of the element to create. We can use the <code>elNS</code> function:</p><!--<dde:mark type="component" name="example" host="this" ssr/>--><div id="code-example-1-bcjydb50gdc" class="example"><!--<dde:mark type="component" name="code" host="parentElement" ssr/>--><code class="language-js">import { elNS, assign } from "https://cdn.jsdelivr.net/gh/jaandrle/deka-dom-el/dist/esm-with-observables.js";
|
||||
const elSVG= elNS("http://www.w3.org/2000/svg");
|
||||
const elMath= elNS("http://www.w3.org/1998/Math/MathML");
|
||||
document.body.append(
|
||||
@ -130,4 +140,4 @@ document.body.append(
|
||||
console.log(
|
||||
document.body.innerHTML.includes("<svg></svg><math></math>")
|
||||
)
|
||||
</code></div><script>Flems(document.getElementById("code-example-1-bcjydb50gdc"), JSON.parse("{\"files\":[{\"name\":\".js\",\"content\":\"import { elNS, assign } from \\\"https://cdn.jsdelivr.net/gh/jaandrle/deka-dom-el/dist/esm-with-signals.js\\\";\\nconst elSVG= elNS(\\\"http://www.w3.org/2000/svg\\\");\\nconst elMath= elNS(\\\"http://www.w3.org/1998/Math/MathML\\\");\\ndocument.body.append(\\n\\telSVG(\\\"svg\\\"), // see https://developer.mozilla.org/en-US/docs/Web/SVG and https://developer.mozilla.org/en-US/docs/Web/API/SVGElement\\n\\telMath(\\\"math\\\") // see https://developer.mozilla.org/en-US/docs/Web/MathML and https://developer.mozilla.org/en-US/docs/Web/MathML/Global_attributes\\n);\\n\\nconsole.log(\\n\\tdocument.body.innerHTML.includes(\\\"<svg></svg><math></math>\\\")\\n)\\n\"}],\"toolbar\":false}"));</script><div class="notice"><p>Mnemonic</p><ul><li><code>assign(<element>, ...<idl-objects>): <element></code> — assign properties to the element</li><li><code>el(<tag-name>, <primitive>)[.append(...)]: <element-from-tag-name></code> — simple element containing only text</li><li><code>el(<tag-name>, <idl-object>)[.append(...)]: <element-from-tag-name></code> — element with more properties</li><li><code>el(<function>, <function-argument(s)>)[.append(...)]: <element-returned-by-function></code> — using component represented by function</li><li><code>el(<...>, <...>, ...<addons>)</code> — see following page</li><li><code>elNS(<namespace>)(<as-el-see-above>)[.append(...)]: <element-based-on-arguments></code> — typically SVG elements</li></ul></div><div class="prevNext"><!--<dde:mark type="component" name="prevNext" host="parentElement" ssr/>--><a rel="prev" href="./" title="Introducing a library."><!--<dde:mark type="component" name="pageLink" host="parentElement" ssr/>-->Introduction (previous)</a><a rel="next" href="p03-events" title="Using not only events in UI declaratively."><!--<dde:mark type="component" name="pageLink" host="parentElement" ssr/>-->(next) Events and Addons</a></div></main></body></html>
|
||||
</code></div><script>Flems(document.getElementById("code-example-1-bcjydb50gdc"), JSON.parse("{\"files\":[{\"name\":\".js\",\"content\":\"import { elNS, assign } from \\\"https://cdn.jsdelivr.net/gh/jaandrle/deka-dom-el/dist/esm-with-observables.js\\\";\\nconst elSVG= elNS(\\\"http://www.w3.org/2000/svg\\\");\\nconst elMath= elNS(\\\"http://www.w3.org/1998/Math/MathML\\\");\\ndocument.body.append(\\n\\telSVG(\\\"svg\\\"), // see https://developer.mozilla.org/en-US/docs/Web/SVG and https://developer.mozilla.org/en-US/docs/Web/API/SVGElement\\n\\telMath(\\\"math\\\") // see https://developer.mozilla.org/en-US/docs/Web/MathML and https://developer.mozilla.org/en-US/docs/Web/MathML/Global_attributes\\n);\\n\\nconsole.log(\\n\\tdocument.body.innerHTML.includes(\\\"<svg></svg><math></math>\\\")\\n)\\n\"}],\"toolbar\":false}"));</script><div class="notice"><!--<dde:mark type="component" name="mnemonicUl" host="parentElement" ssr/>--><h3 id="h-mnemonic"><!--<dde:mark type="component" name="h3" host="parentElement" ssr/>--><a href="#h-mnemonic" tabindex="-1">#</a> Mnemonic</h3><ul><li><code>assign(<element>, ...<idl-objects>): <element></code> — assign properties to the element</li><li><code>el(<tag-name>, <primitive>)[.append(...)]: <element-from-tag-name></code> — simple element containing only text</li><li><code>el(<tag-name>, <idl-object>)[.append(...)]: <element-from-tag-name></code> — element with more properties</li><li><code>el(<function>, <function-argument(s)>)[.append(...)]: <element-returned-by-function></code> — using component represented by function</li><li><code>el(<...>, <...>, ...<addons>)</code> — see following page</li><li><code>elNS(<namespace>)(<as-el-see-above>)[.append(...)]: <element-based-on-arguments></code> — typically SVG elements</li></ul></div><div class="prevNext"><!--<dde:mark type="component" name="prevNext" host="parentElement" ssr/>--><a rel="prev" href="./" title="Introducing a library."><!--<dde:mark type="component" name="pageLink" host="parentElement" ssr/>-->Introduction (previous)</a><a rel="next" href="p03-events" title="Using not only events in UI declaratively."><!--<dde:mark type="component" name="pageLink" host="parentElement" ssr/>-->(next) Events and Addons</a></div></main></body></html>
|
||||
@ -1,4 +1,11 @@
|
||||
<!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 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://cdn.jsdelivr.net/npm/shiki" defer=""></script><script type="module" src="code.js.js"></script><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 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-observables" title="Handling reactivity in UI via observables.">4. Observables 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><div class="code" data-js="todo"><!--<dde:mark type="component" name="code" host="parentElement" ssr/>--><code class="language-js">// when NPM
|
||||
import { on, dispatchEvent } from "deka-dom-el";
|
||||
// https://cdn.jsdelivr.net/gh/jaandrle/deka-dom-el/dist/esm.js
|
||||
|
||||
/**
|
||||
* @type {ddeElementAddon}
|
||||
* */
|
||||
</code></div><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-observables.js";
|
||||
const log= mark=> console.log.bind(console, mark);
|
||||
|
||||
const button= el("button", "Test click");
|
||||
@ -8,7 +15,7 @@ on("click", log("`on`"), { once: true })(button);
|
||||
document.body.append(
|
||||
button
|
||||
);
|
||||
</code></div><script>Flems(document.getElementById("code-example-1-1wmddlo83w68"), JSON.parse("{\"files\":[{\"name\":\".js\",\"content\":\"import { el, on } from \\\"https://cdn.jsdelivr.net/gh/jaandrle/deka-dom-el/dist/esm-with-signals.js\\\";\\nconst log= mark=> console.log.bind(console, mark);\\n\\nconst button= el(\\\"button\\\", \\\"Test click\\\");\\nbutton.addEventListener(\\\"click\\\", log(\\\"`addEventListener`\\\"), { once: true });\\non(\\\"click\\\", log(\\\"`on`\\\"), { once: true })(button);\\n\\ndocument.body.append(\\n\\tbutton\\n);\\n\"}],\"toolbar\":false}"));</script><p>…this is actually one of the two differences. The another one is that <code>on</code> accepts only object as the <code>options</code> (but it is still optional).</p><p class="notice">The other difference is that there is <strong>no</strong> <code>off</code> function. You can remove listener declaratively using <a href="https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener#signal" title="part of addEventListener on MDN">AbortSignal</a>:</p><!--<dde:mark type="component" name="example" host="this" ssr/>--><div id="code-example-1-8r8qappf8mo" 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";
|
||||
</code></div><script>Flems(document.getElementById("code-example-1-1wmddlo83w68"), JSON.parse("{\"files\":[{\"name\":\".js\",\"content\":\"import { el, on } from \\\"https://cdn.jsdelivr.net/gh/jaandrle/deka-dom-el/dist/esm-with-observables.js\\\";\\nconst log= mark=> console.log.bind(console, mark);\\n\\nconst button= el(\\\"button\\\", \\\"Test click\\\");\\nbutton.addEventListener(\\\"click\\\", log(\\\"`addEventListener`\\\"), { once: true });\\non(\\\"click\\\", log(\\\"`on`\\\"), { once: true })(button);\\n\\ndocument.body.append(\\n\\tbutton\\n);\\n\"}],\"toolbar\":false}"));</script><p>…this is actually one of the two differences. The another one is that <code>on</code> accepts only object as the <code>options</code> (but it is still optional).</p><p class="notice">The other difference is that there is <strong>no</strong> <code>off</code> function. You can remove listener declaratively using <a href="https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener#signal" title="part of addEventListener on MDN">AbortSignal</a>:</p><!--<dde:mark type="component" name="example" host="this" ssr/>--><div id="code-example-1-8r8qappf8mo" 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-observables.js";
|
||||
const log= mark=> console.log.bind(console, mark);
|
||||
|
||||
const abort_controller= new AbortController();
|
||||
@ -21,7 +28,7 @@ on("click", log("`on`"), { signal })(button);
|
||||
document.body.append(
|
||||
button, " ", el("button", { textContent: "Off", onclick: ()=> abort_controller.abort() })
|
||||
);
|
||||
</code></div><script>Flems(document.getElementById("code-example-1-8r8qappf8mo"), JSON.parse("{\"files\":[{\"name\":\".js\",\"content\":\"import { el, on } from \\\"https://cdn.jsdelivr.net/gh/jaandrle/deka-dom-el/dist/esm-with-signals.js\\\";\\nconst log= mark=> console.log.bind(console, mark);\\n\\nconst abort_controller= new AbortController();\\nconst { signal }= abort_controller;\\n\\nconst button= el(\\\"button\\\", \\\"Test click\\\");\\nbutton.addEventListener(\\\"click\\\", log(\\\"`addEventListener`\\\"), { signal });\\non(\\\"click\\\", log(\\\"`on`\\\"), { signal })(button);\\n\\ndocument.body.append(\\n\\tbutton, \\\" \\\", el(\\\"button\\\", { textContent: \\\"Off\\\", onclick: ()=> abort_controller.abort() })\\n);\\n\"}],\"toolbar\":false}"));</script><div class="notice"><p>So, there are (typically) three ways to handle events. You can use:</p><ul><li><code>el("button", { textContent: "click me", "=onclick": "console.log(event)" })</code></li><li><code>el("button", { textContent: "click me", onclick: console.log })</code></li><li><code>el("button", { textContent: "click me" }, on("click", console.log))</code></li></ul><p>In the first example we force to use HTML attribute (it corresponds to <code><button onclick="console.log(event)">click me</button></code>). <em>Side note: this can be useful in case of SSR.</em> To study difference, you can read a nice summary here: <a href="https://gist.github.com/WebReflection/b404c36f46371e3b1173bf5492acc944">GIST @WebReflection/web_events.md</a>.</p></div><h3 id="h-addons"><!--<dde:mark type="component" name="h3" host="parentElement" ssr/>--><a href="#h-addons" tabindex="-1">#</a> Addons</h3><p>From practical point of view, <em>Addons</em> are just functions that accept any html element as their first parameter. You can see that the <code>on(…)</code> fullfills this requirement.</p><p>You can use Addons as ≥3rd argument of <code>el</code> function. This way is possible to extends you templates by additional (3rd party) functionalities. But for now mainly, you can add events listeners:</p><!--<dde:mark type="component" name="example" host="this" ssr/>--><div id="code-example-1-6jtsnxfqzm4" 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";
|
||||
</code></div><script>Flems(document.getElementById("code-example-1-8r8qappf8mo"), JSON.parse("{\"files\":[{\"name\":\".js\",\"content\":\"import { el, on } from \\\"https://cdn.jsdelivr.net/gh/jaandrle/deka-dom-el/dist/esm-with-observables.js\\\";\\nconst log= mark=> console.log.bind(console, mark);\\n\\nconst abort_controller= new AbortController();\\nconst { signal }= abort_controller;\\n\\nconst button= el(\\\"button\\\", \\\"Test click\\\");\\nbutton.addEventListener(\\\"click\\\", log(\\\"`addEventListener`\\\"), { signal });\\non(\\\"click\\\", log(\\\"`on`\\\"), { signal })(button);\\n\\ndocument.body.append(\\n\\tbutton, \\\" \\\", el(\\\"button\\\", { textContent: \\\"Off\\\", onclick: ()=> abort_controller.abort() })\\n);\\n\"}],\"toolbar\":false}"));</script><div class="notice"><p>So, there are (typically) three ways to handle events. You can use:</p><ul><li><code>el("button", { textContent: "click me", "=onclick": "console.log(event)" })</code></li><li><code>el("button", { textContent: "click me", onclick: console.log })</code></li><li><code>el("button", { textContent: "click me" }, on("click", console.log))</code></li></ul><p>In the first example we force to use HTML attribute (it corresponds to <code><button onclick="console.log(event)">click me</button></code>). <em>Side note: this can be useful in case of SSR.</em> To study difference, you can read a nice summary here: <a href="https://gist.github.com/WebReflection/b404c36f46371e3b1173bf5492acc944">GIST @WebReflection/web_events.md</a>.</p></div><h3 id="h-addons"><!--<dde:mark type="component" name="h3" host="parentElement" ssr/>--><a href="#h-addons" tabindex="-1">#</a> Addons</h3><p>From practical point of view, <em>Addons</em> are just functions that accept any html element as their first parameter. You can see that the <code>on(…)</code> fullfills this requirement.</p><p>You can use Addons as ≥3rd argument of <code>el</code> function. This way is possible to extends you templates by additional (3rd party) functionalities. But for now mainly, you can add events listeners:</p><!--<dde:mark type="component" name="example" host="this" ssr/>--><div id="code-example-1-6jtsnxfqzm4" 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-observables.js";
|
||||
const abort_controller= new AbortController();
|
||||
const { signal }= abort_controller;
|
||||
/** @type {ddeElementAddon<HTMLButtonElement>} */
|
||||
@ -45,7 +52,7 @@ function update(event){
|
||||
"\n"
|
||||
);
|
||||
}
|
||||
</code></div><script>Flems(document.getElementById("code-example-1-6jtsnxfqzm4"), JSON.parse("{\"files\":[{\"name\":\".js\",\"content\":\"import { el, on } from \\\"https://cdn.jsdelivr.net/gh/jaandrle/deka-dom-el/dist/esm-with-signals.js\\\";\\nconst abort_controller= new AbortController();\\nconst { signal }= abort_controller;\\n/** @type {ddeElementAddon<HTMLButtonElement>} */\\nconst onclickOff= on(\\\"click\\\", ()=> abort_controller.abort(), { signal });\\n/** @type {(ref?: HTMLOutputElement)=> HTMLOutputElement | null} */\\nconst ref= (store=> ref=> ref ? (store= ref) : store)(null);\\n\\ndocument.body.append(\\n\\tel(\\\"button\\\", \\\"Test `on`\\\",\\n\\t\\ton(\\\"click\\\", console.log, { signal }),\\n\\t\\ton(\\\"click\\\", update, { signal }),\\n\\t\\ton(\\\"mouseup\\\", update, { signal })),\\n\\t\\\" \\\",\\n\\tel(\\\"button\\\", \\\"Off\\\", onclickOff),\\n\\tel(\\\"output\\\", { style: { display: \\\"block\\\", whiteSpace: \\\"pre\\\" } }, ref)\\n);\\n/** @param {MouseEvent} event @this {HTMLButtonElement} */\\nfunction update(event){\\n\\tref().append(\\n\\t\\tevent.type,\\n\\t\\t\\\"\\\\n\\\"\\n\\t);\\n}\\n\"}],\"toolbar\":false}"));</script><p>As the example shows, you can also provide types in JSDoc+TypeScript by using global type <code>ddeElementAddon</code>. Also notice, you can use Addons to get element reference.</p><h3 id="h-life-cycle-events"><!--<dde:mark type="component" name="h3" host="parentElement" ssr/>--><a href="#h-life-cycle-events" tabindex="-1">#</a> Life-cycle events</h3><p>Addons are called immediately when the element is created, even it is not connected to live DOM yet. Therefore, you can understand the Addon to be “oncreate” event.</p><p>The library provide three additional live-cycle events corresponding to how they are named in a case of custom elements: <code>on.connected</code>, <code>on.disconnected</code> and <code>on.attributeChanged</code>.</p><!--<dde:mark type="component" name="example" host="this" ssr/>--><div id="code-example-1-35hjjp3e4js" 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";
|
||||
</code></div><script>Flems(document.getElementById("code-example-1-6jtsnxfqzm4"), JSON.parse("{\"files\":[{\"name\":\".js\",\"content\":\"import { el, on } from \\\"https://cdn.jsdelivr.net/gh/jaandrle/deka-dom-el/dist/esm-with-observables.js\\\";\\nconst abort_controller= new AbortController();\\nconst { signal }= abort_controller;\\n/** @type {ddeElementAddon<HTMLButtonElement>} */\\nconst onclickOff= on(\\\"click\\\", ()=> abort_controller.abort(), { signal });\\n/** @type {(ref?: HTMLOutputElement)=> HTMLOutputElement | null} */\\nconst ref= (store=> ref=> ref ? (store= ref) : store)(null);\\n\\ndocument.body.append(\\n\\tel(\\\"button\\\", \\\"Test `on`\\\",\\n\\t\\ton(\\\"click\\\", console.log, { signal }),\\n\\t\\ton(\\\"click\\\", update, { signal }),\\n\\t\\ton(\\\"mouseup\\\", update, { signal })),\\n\\t\\\" \\\",\\n\\tel(\\\"button\\\", \\\"Off\\\", onclickOff),\\n\\tel(\\\"output\\\", { style: { display: \\\"block\\\", whiteSpace: \\\"pre\\\" } }, ref)\\n);\\n/** @param {MouseEvent} event @this {HTMLButtonElement} */\\nfunction update(event){\\n\\tref().append(\\n\\t\\tevent.type,\\n\\t\\t\\\"\\\\n\\\"\\n\\t);\\n}\\n\"}],\"toolbar\":false}"));</script><p>As the example shows, you can also provide types in JSDoc+TypeScript by using global type <code>ddeElementAddon</code>. Also notice, you can use Addons to get element reference.</p><h3 id="h-life-cycle-events"><!--<dde:mark type="component" name="h3" host="parentElement" ssr/>--><a href="#h-life-cycle-events" tabindex="-1">#</a> Life-cycle events</h3><p>Addons are called immediately when the element is created, even it is not connected to live DOM yet. Therefore, you can understand the Addon to be “oncreate” event.</p><p>The library provide three additional live-cycle events corresponding to how they are named in a case of custom elements: <code>on.connected</code>, <code>on.disconnected</code> and <code>on.attributeChanged</code>.</p><!--<dde:mark type="component" name="example" host="this" ssr/>--><div id="code-example-1-35hjjp3e4js" 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-observables.js";
|
||||
const paragraph= el("p", "See live-cycle events in console.",
|
||||
el=> log({ type: "dde:created", detail: el }),
|
||||
on.connected(log),
|
||||
@ -63,7 +70,7 @@ document.body.append(
|
||||
function log({ type, detail }){
|
||||
console.log({ _this: this, type, detail });
|
||||
}
|
||||
</code></div><script>Flems(document.getElementById("code-example-1-35hjjp3e4js"), JSON.parse("{\"files\":[{\"name\":\".js\",\"content\":\"import { el, on } from \\\"https://cdn.jsdelivr.net/gh/jaandrle/deka-dom-el/dist/esm-with-signals.js\\\";\\nconst paragraph= el(\\\"p\\\", \\\"See live-cycle events in console.\\\",\\n\\tel=> log({ type: \\\"dde:created\\\", detail: el }),\\n\\ton.connected(log),\\n\\ton.disconnected(log),\\n\\ton.attributeChanged(log));\\n\\ndocument.body.append(\\n\\tparagraph,\\n\\tel(\\\"button\\\", \\\"Update attribute\\\", on(\\\"click\\\", ()=> paragraph.setAttribute(\\\"test\\\", Math.random().toString()))),\\n\\t\\\" \\\",\\n\\tel(\\\"button\\\", \\\"Remove\\\", on(\\\"click\\\", ()=> paragraph.remove()))\\n);\\n\\n/** @param {Partial<CustomEvent>} event */\\nfunction log({ type, detail }){\\n\\tconsole.log({ _this: this, type, detail });\\n}\\n\"}],\"toolbar\":false}"));</script><p>For Custom elements, we will later introduce a way to replace <code>*Callback</code> syntax with <code>dde:*</code> events. The <code>on.*</code> functions then listen to the appropriate Custom Elements events (see <a href="https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_custom_elements#custom_element_lifecycle_callbacks">Custom element lifecycle callbacks | MDN</a>).</p><p>But, in case of regular elemnets the <a href="https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver"><code>MutationObserver</code> | MDN</a> is internaly used to track these events. Therefore, there are some drawbacks:</p><ul><li>To proper listener registration, you need to use <code>on.*</code> not `on("dde:*", …)`!</li><li>Use sparingly! Internally, library must loop of all registered events and fires event properly. <strong>It is good practice to use the fact that if an element is removed, its children are also removed!</strong> In this spirit, we will introduce later the <strong>host</strong> syntax to register clean up procedures when the component is removed from the app.</li></ul><h3 id="h-final-notes"><!--<dde:mark type="component" name="h3" host="parentElement" ssr/>--><a href="#h-final-notes" tabindex="-1">#</a> Final notes</h3><p>The library also provides a method to dispatch the events.</p><!--<dde:mark type="component" name="example" host="this" ssr/>--><div id="code-example-2-b6a1hbrxh7s" class="example"><!--<dde:mark type="component" name="code" host="parentElement" ssr/>--><code class="language-js">import { el, on, dispatchEvent } from "https://cdn.jsdelivr.net/gh/jaandrle/deka-dom-el/dist/esm-with-signals.js";
|
||||
</code></div><script>Flems(document.getElementById("code-example-1-35hjjp3e4js"), JSON.parse("{\"files\":[{\"name\":\".js\",\"content\":\"import { el, on } from \\\"https://cdn.jsdelivr.net/gh/jaandrle/deka-dom-el/dist/esm-with-observables.js\\\";\\nconst paragraph= el(\\\"p\\\", \\\"See live-cycle events in console.\\\",\\n\\tel=> log({ type: \\\"dde:created\\\", detail: el }),\\n\\ton.connected(log),\\n\\ton.disconnected(log),\\n\\ton.attributeChanged(log));\\n\\ndocument.body.append(\\n\\tparagraph,\\n\\tel(\\\"button\\\", \\\"Update attribute\\\", on(\\\"click\\\", ()=> paragraph.setAttribute(\\\"test\\\", Math.random().toString()))),\\n\\t\\\" \\\",\\n\\tel(\\\"button\\\", \\\"Remove\\\", on(\\\"click\\\", ()=> paragraph.remove()))\\n);\\n\\n/** @param {Partial<CustomEvent>} event */\\nfunction log({ type, detail }){\\n\\tconsole.log({ _this: this, type, detail });\\n}\\n\"}],\"toolbar\":false}"));</script><p>For Custom elements, we will later introduce a way to replace <code>*Callback</code> syntax with <code>dde:*</code> events. The <code>on.*</code> functions then listen to the appropriate Custom Elements events (see <a href="https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_custom_elements#custom_element_lifecycle_callbacks">Custom element lifecycle callbacks | MDN</a>).</p><p>But, in case of regular elemnets the <a href="https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver"><code>MutationObserver</code> | MDN</a> is internaly used to track these events. Therefore, there are some drawbacks:</p><ul><li>To proper listener registration, you need to use <code>on.*</code> not `on("dde:*", …)`!</li><li>Use sparingly! Internally, library must loop of all registered events and fires event properly. <strong>It is good practice to use the fact that if an element is removed, its children are also removed!</strong> In this spirit, we will introduce later the <strong>host</strong> syntax to register clean up procedures when the component is removed from the app.</li></ul><h3 id="h-final-notes"><!--<dde:mark type="component" name="h3" host="parentElement" ssr/>--><a href="#h-final-notes" tabindex="-1">#</a> Final notes</h3><p>The library also provides a method to dispatch the events.</p><!--<dde:mark type="component" name="example" host="this" ssr/>--><div id="code-example-2-b6a1hbrxh7s" class="example"><!--<dde:mark type="component" name="code" host="parentElement" ssr/>--><code class="language-js">import { el, on, dispatchEvent } from "https://cdn.jsdelivr.net/gh/jaandrle/deka-dom-el/dist/esm-with-observables.js";
|
||||
document.body.append(
|
||||
el("p", "Listenning to `test` event.", on("test", console.log)).append(
|
||||
el("br"),
|
||||
@ -87,4 +94,4 @@ function dde(){
|
||||
function ddeOptions(){
|
||||
dispatchEvent("test", { bubbles: true })(this, "hi");
|
||||
}
|
||||
</code></div><script>Flems(document.getElementById("code-example-2-b6a1hbrxh7s"), JSON.parse("{\"files\":[{\"name\":\".js\",\"content\":\"import { el, on, dispatchEvent } from \\\"https://cdn.jsdelivr.net/gh/jaandrle/deka-dom-el/dist/esm-with-signals.js\\\";\\ndocument.body.append(\\n\\tel(\\\"p\\\", \\\"Listenning to `test` event.\\\", on(\\\"test\\\", console.log)).append(\\n\\t\\tel(\\\"br\\\"),\\n\\t\\tel(\\\"button\\\", \\\"native\\\", on(\\\"click\\\", native)),\\n\\t\\t\\\" \\\",\\n\\t\\tel(\\\"button\\\", \\\"dde\\\", on(\\\"click\\\", dde)),\\n\\t\\t\\\" \\\",\\n\\t\\tel(\\\"button\\\", \\\"dde with options\\\", on(\\\"click\\\", ddeOptions))\\n\\t)\\n);\\nfunction native(){\\n\\tthis.dispatchEvent(\\n\\t\\tnew CustomEvent(\\\"test\\\",\\n\\t\\t\\t{ bubbles: true, detail: \\\"hi\\\" }\\n\\t\\t)\\n\\t);\\n}\\nfunction dde(){\\n\\tdispatchEvent(\\\"test\\\")(this.parentElement, \\\"hi\\\");\\n}\\nfunction ddeOptions(){\\n\\tdispatchEvent(\\\"test\\\", { bubbles: true })(this, \\\"hi\\\");\\n}\\n\"}],\"toolbar\":false}"));</script><div class="notice"><p>Mnemonic</p><ul><li><code>on(<event>, <listener>[, <options>])(<element>)</code> — just <code><element>.addEventListener(<event>, <listener>[, <options>])</code></li><li><code>on.<live-cycle>(<event>, <listener>[, <options>])(<element>)</code> — corresponds to custom elemnets callbacks <code><live-cycle>Callback(...){...}</code>. To connect to custom element see following page, else it is simulated by MutationObserver.</li><li><code>dispatchEvent(<event>[, <options>])(element)</code> — just <code><element>.dispatchEvent(new Event(<event>[, <options>]))</code></li><li><code>dispatchEvent(<event>[, <options>])(element, detail)</code> — just <code><element>.dispatchEvent(new CustomEvent(<event>, { detail, ...<options> }))</code></li></ul></div><div class="prevNext"><!--<dde:mark type="component" name="prevNext" host="parentElement" ssr/>--><a rel="prev" href="p02-elements" title="Basic concepts of elements modifications and creations."><!--<dde:mark type="component" name="pageLink" host="parentElement" ssr/>-->Elements (previous)</a><a rel="next" href="p04-signals" title="Handling reactivity in UI via signals."><!--<dde:mark type="component" name="pageLink" host="parentElement" ssr/>-->(next) Signals and reactivity</a></div></main></body></html>
|
||||
</code></div><script>Flems(document.getElementById("code-example-2-b6a1hbrxh7s"), JSON.parse("{\"files\":[{\"name\":\".js\",\"content\":\"import { el, on, dispatchEvent } from \\\"https://cdn.jsdelivr.net/gh/jaandrle/deka-dom-el/dist/esm-with-observables.js\\\";\\ndocument.body.append(\\n\\tel(\\\"p\\\", \\\"Listenning to `test` event.\\\", on(\\\"test\\\", console.log)).append(\\n\\t\\tel(\\\"br\\\"),\\n\\t\\tel(\\\"button\\\", \\\"native\\\", on(\\\"click\\\", native)),\\n\\t\\t\\\" \\\",\\n\\t\\tel(\\\"button\\\", \\\"dde\\\", on(\\\"click\\\", dde)),\\n\\t\\t\\\" \\\",\\n\\t\\tel(\\\"button\\\", \\\"dde with options\\\", on(\\\"click\\\", ddeOptions))\\n\\t)\\n);\\nfunction native(){\\n\\tthis.dispatchEvent(\\n\\t\\tnew CustomEvent(\\\"test\\\",\\n\\t\\t\\t{ bubbles: true, detail: \\\"hi\\\" }\\n\\t\\t)\\n\\t);\\n}\\nfunction dde(){\\n\\tdispatchEvent(\\\"test\\\")(this.parentElement, \\\"hi\\\");\\n}\\nfunction ddeOptions(){\\n\\tdispatchEvent(\\\"test\\\", { bubbles: true })(this, \\\"hi\\\");\\n}\\n\"}],\"toolbar\":false}"));</script><div class="notice"><!--<dde:mark type="component" name="mnemonicUl" host="parentElement" ssr/>--><h3 id="h-mnemonic"><!--<dde:mark type="component" name="h3" host="parentElement" ssr/>--><a href="#h-mnemonic" tabindex="-1">#</a> Mnemonic</h3><ul><li><code>on(<event>, <listener>[, <options>])(<element>)</code> — just <code><element>.addEventListener(<event>, <listener>[, <options>])</code></li><li><code>on.<live-cycle>(<event>, <listener>[, <options>])(<element>)</code> — corresponds to custom elemnets callbacks <code><live-cycle>Callback(...){...}</code>. To connect to custom element see following page, else it is simulated by MutationObserver.</li><li><code>dispatchEvent(<event>[, <options>])(element)</code> — just <code><element>.dispatchEvent(new Event(<event>[, <options>]))</code></li><li><code>dispatchEvent(<event>[, <options>])(element, detail)</code> — just <code><element>.dispatchEvent(new CustomEvent(<event>, { detail, ...<options> }))</code></li></ul></div><div class="prevNext"><!--<dde:mark type="component" name="prevNext" host="parentElement" ssr/>--><a rel="prev" href="p02-elements" title="Basic concepts of elements modifications and creations."><!--<dde:mark type="component" name="pageLink" host="parentElement" ssr/>-->Elements (previous)</a><a rel="next" href="p04-observables" title="Handling reactivity in UI via observables."><!--<dde:mark type="component" name="pageLink" host="parentElement" ssr/>-->(next) Observables and reactivity</a></div></main></body></html>
|
||||
35
docs/p04-observables.html
Normal file
35
docs/p04-observables.html
Normal file
@ -0,0 +1,35 @@
|
||||
<!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 observables."><title>`deka-dom-el` — Observables 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://cdn.jsdelivr.net/npm/shiki" defer=""></script><script type="module" src="code.js.js"></script><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` — Observables and reactivity</h1><p>Handling reactivity in UI via observables.</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 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-observables" title="Handling reactivity in UI via observables." class="current">4. Observables and reactivity</a></nav><main><h2>Using observables 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, observables may be a viable approach.</p><div class="code" data-js="todo"><!--<dde:mark type="component" name="code" host="parentElement" ssr/>--><code class="language-js">// when NPM
|
||||
import { O } from "deka-dom-el/observables";
|
||||
// https://cdn.jsdelivr.net/gh/jaandrle/deka-dom-el/dist/esm-with-observables.js
|
||||
|
||||
/**
|
||||
* @type {ddeObservable}
|
||||
* */
|
||||
/**
|
||||
* @type {ddeActions}
|
||||
* */
|
||||
</code></div><h3 id="h-introducing-observables"><!--<dde:mark type="component" name="h3" host="parentElement" ssr/>--><a href="#h-introducing-observables" tabindex="-1">#</a> Introducing observables</h3><p>Using observables, we split program logic into the three parts. Firstly (α), we create a variable (constant) representing reactive value. Somewhere later, we can register (β) a logic reacting to the observable value changes. Similarly, in a remaining part (γ), we can update the observable value.</p><!--<dde:mark type="component" name="example" host="this" ssr/>--><div id="code-example-1-v1fw44pkzuo" class="example"><!--<dde:mark type="component" name="code" host="parentElement" ssr/>--><code class="language-js">import { O } from "https://cdn.jsdelivr.net/gh/jaandrle/deka-dom-el/dist/esm-with-observables.js";
|
||||
// α — `observable` represents a reactive value
|
||||
const observable= O(0);
|
||||
// β — just reacts on observable changes
|
||||
O.on(observable, console.log);
|
||||
// γ — just updates the value
|
||||
observable(observable()+1);
|
||||
setInterval(()=> observable(observable()+1), 5000);
|
||||
</code></div><script>Flems(document.getElementById("code-example-1-v1fw44pkzuo"), JSON.parse("{\"files\":[{\"name\":\".js\",\"content\":\"import { O } from \\\"https://cdn.jsdelivr.net/gh/jaandrle/deka-dom-el/dist/esm-with-observables.js\\\";\\n// α — `observable` represents a reactive value\\nconst observable= O(0);\\n// β — just reacts on observable changes\\nO.on(observable, console.log);\\n// γ — just updates the value\\nobservable(observable()+1);\\nsetInterval(()=> observable(observable()+1), 5000);\\n\"}],\"toolbar\":false}"));</script><p>All this is just an example of <a href="https://en.wikipedia.org/wiki/Event-driven_programming" title="Wikipedia: Event-driven programming">Event-driven programming</a> and <a href="https://en.wikipedia.org/wiki/Publish%E2%80%93subscribe_pattern" title="Wikipedia: Publish–subscribe pattern">Publish–subscribe pattern</a> (compare for example with <a href="https://www.npmjs.com/package/fpubsub" title="NPM package: fpubsub">fpubsub library</a>). All three parts can be in some manner independent and still connected to the same reactive entity.</p><p>Observables are implemented in the library as functions. To see current value of observable, just call it without any arguments <code>console.log(observable())</code>. To update the observable value, pass any argument <code>observable('a new value')</code>. For listenning the observable value changes, use <code>O.on(observable, console.log)</code>.</p><p>Similarly to the <code>on</code> function to register DOM events listener. You can use <code>AbortController</code>/<code>AbortSignal</code> to <em>off</em>/stop listenning. For representing “live” piece of code computation pattern:</p><!--<dde:mark type="component" name="example" host="this" ssr/>--><div id="code-example-1-1ti9ynadhw5c" class="example"><!--<dde:mark type="component" name="code" host="parentElement" ssr/>--><code class="language-js">import { O } from "https://cdn.jsdelivr.net/gh/jaandrle/deka-dom-el/dist/esm-with-observables.js";
|
||||
const observable= O(0);
|
||||
// computation pattern
|
||||
const double= O(()=> 2*observable());
|
||||
|
||||
const ac= new AbortController();
|
||||
O.on(observable, v=> console.log("observable", v), { signal: ac.signal });
|
||||
O.on(double, v=> console.log("double", v), { signal: ac.signal });
|
||||
|
||||
observable(observable()+1);
|
||||
const interval= 5000;
|
||||
const id= setInterval(()=> observable(observable()+1), interval);
|
||||
ac.signal.addEventListener("abort",
|
||||
()=> setTimeout(()=> clearInterval(id), 2*interval));
|
||||
|
||||
setTimeout(()=> ac.abort(), 3*interval)
|
||||
</code></div><script>Flems(document.getElementById("code-example-1-1ti9ynadhw5c"), JSON.parse("{\"files\":[{\"name\":\".js\",\"content\":\"import { O } from \\\"https://cdn.jsdelivr.net/gh/jaandrle/deka-dom-el/dist/esm-with-observables.js\\\";\\nconst observable= O(0);\\n// computation pattern\\nconst double= O(()=> 2*observable());\\n\\nconst ac= new AbortController();\\nO.on(observable, v=> console.log(\\\"observable\\\", v), { signal: ac.signal });\\nO.on(double, v=> console.log(\\\"double\\\", v), { signal: ac.signal });\\n\\nobservable(observable()+1);\\nconst interval= 5000;\\nconst id= setInterval(()=> observable(observable()+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"><!--<dde:mark type="component" name="mnemonicUl" host="parentElement" ssr/>--><h3 id="h-mnemonic"><!--<dde:mark type="component" name="h3" host="parentElement" ssr/>--><a href="#h-mnemonic" tabindex="-1">#</a> Mnemonic</h3><ul><li><code>O(<value>)</code> — observable: reactive value</li><li><code>O(()=> <computation>)</code> — observable: reactive value dependent on calculation using other observables</li><li><code>O.on(<observable>, <listener>[, <options>])</code> — listen to the observable value changes</li><li><code>O.clear(...<observables>)</code> — off and clear observables</li><li><code>O(<value>, <actions>)</code> — observable: pattern to create complex reactive objects/arrays</li><li><code>O.action(<observable>, <action-name>, ...<action-arguments>)</code> — invoke an action for given observable</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>
|
||||
@ -1,4 +1,14 @@
|
||||
<!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 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://cdn.jsdelivr.net/npm/shiki" defer=""></script><script type="module" src="code.js.js"></script><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 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><div class="code" data-js="todo"><!--<dde:mark type="component" name="code" host="parentElement" ssr/>--><code class="language-js">// when NPM
|
||||
import { S } from "deka-dom-el/signals";
|
||||
// https://cdn.jsdelivr.net/gh/jaandrle/deka-dom-el/dist/esm-with-signals.js
|
||||
|
||||
/**
|
||||
* @type {ddeSignal}
|
||||
* */
|
||||
/**
|
||||
* @type {ddeActions}
|
||||
* */
|
||||
</code></div><h3 id="h-introducing-signals"><!--<dde:mark type="component" name="h3" host="parentElement" ssr/>--><a href="#h-introducing-signals" tabindex="-1">#</a> Introducing signals</h3><p>Using signals, we split program logic into the three parts. Firstly (α), we create a variable (constant) representing reactive value. Somewhere later, we can register (β) a logic reacting to the signal value changes. Similarly, in a remaining part (γ), we can update the signal value.</p><!--<dde:mark type="component" name="example" host="this" ssr/>--><div id="code-example-1-1gy5flu0x85c" 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 reactive value
|
||||
const signal= S(0);
|
||||
// β — just reacts on signal changes
|
||||
@ -6,7 +16,7 @@ S.on(signal, console.log);
|
||||
// γ — just updates the value
|
||||
signal(signal()+1);
|
||||
setInterval(()=> signal(signal()+1), 5000);
|
||||
</code></div><script>Flems(document.getElementById("code-example-1-opc0krfvn3k"), JSON.parse("{\"files\":[{\"name\":\".js\",\"content\":\"import { S } from \\\"https://cdn.jsdelivr.net/gh/jaandrle/deka-dom-el/dist/esm-with-signals.js\\\";\\n// α — `signal` represents a reactive value\\nconst signal= S(0);\\n// β — just reacts on signal changes\\nS.on(signal, console.log);\\n// γ — just updates the value\\nsignal(signal()+1);\\nsetInterval(()=> signal(signal()+1), 5000);\\n\"}],\"toolbar\":false}"));</script><h3 id="h-introducing-signals"><!--<dde:mark type="component" name="h3" host="parentElement" ssr/>--><a href="#h-introducing-signals" tabindex="-1">#</a> Introducing signals</h3><p>Using signals, we split program logic into the three parts. Firstly (α), we create a variable (constant) representing reactive value. Somewhere later, we can register (β) a logic reacting to the signal value changes. Similarly, in a remaining part (γ), we can update the signal value.</p><p>All this is just an example of <a href="https://en.wikipedia.org/wiki/Event-driven_programming" title="Wikipedia: Event-driven programming">Event-driven programming</a> and <a href="https://en.wikipedia.org/wiki/Publish%E2%80%93subscribe_pattern" title="Wikipedia: Publish–subscribe pattern">Publish–subscribe pattern</a> (compare for example with <a href="https://www.npmjs.com/package/fpubsub" title="NPM package: fpubsub">fpubsub library</a>). All three parts can be in some manner independent and still connected to the same reactive entity.</p><p>Signals are implemented in the library as functions. To see current value of signal, just call it without any arguments <code>console.log(signal())</code>. To update the signal value, pass any argument <code>signal('a new value')</code>. For listenning the signal value changes, use <code>S.on(signal, console.log)</code>.</p><p>Similarly to the <code>on</code> function to register DOM events listener. You can use <code>AbortController</code>/<code>AbortSignal</code> to <em>off</em>/stop listenning. For representing “live” piece of code computation pattern:</p><!--<dde:mark type="component" name="example" host="this" ssr/>--><div id="code-example-1-e9cfsaeb64o" 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";
|
||||
</code></div><script>Flems(document.getElementById("code-example-1-1gy5flu0x85c"), JSON.parse("{\"files\":[{\"name\":\".js\",\"content\":\"import { S } from \\\"https://cdn.jsdelivr.net/gh/jaandrle/deka-dom-el/dist/esm-with-signals.js\\\";\\n// α — `signal` represents a reactive value\\nconst signal= S(0);\\n// β — just reacts on signal changes\\nS.on(signal, console.log);\\n// γ — just updates the value\\nsignal(signal()+1);\\nsetInterval(()=> signal(signal()+1), 5000);\\n\"}],\"toolbar\":false}"));</script><p>All this is just an example of <a href="https://en.wikipedia.org/wiki/Event-driven_programming" title="Wikipedia: Event-driven programming">Event-driven programming</a> and <a href="https://en.wikipedia.org/wiki/Publish%E2%80%93subscribe_pattern" title="Wikipedia: Publish–subscribe pattern">Publish–subscribe pattern</a> (compare for example with <a href="https://www.npmjs.com/package/fpubsub" title="NPM package: fpubsub">fpubsub library</a>). All three parts can be in some manner independent and still connected to the same reactive entity.</p><p>Signals are implemented in the library as functions. To see current value of signal, just call it without any arguments <code>console.log(signal())</code>. To update the signal value, pass any argument <code>signal('a new value')</code>. For listenning the signal value changes, use <code>S.on(signal, console.log)</code>.</p><p>Similarly to the <code>on</code> function to register DOM events listener. You can use <code>AbortController</code>/<code>AbortSignal</code> to <em>off</em>/stop listenning. For representing “live” piece of code computation pattern:</p><!--<dde:mark type="component" name="example" host="this" ssr/>--><div id="code-example-1-e9cfsaeb64o" 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";
|
||||
const signal= S(0);
|
||||
// computation pattern
|
||||
const double= S(()=> 2*signal());
|
||||
@ -22,4 +32,4 @@ ac.signal.addEventListener("abort",
|
||||
()=> setTimeout(()=> clearInterval(id), 2*interval));
|
||||
|
||||
setTimeout(()=> 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(<value>)</code> — signal: reactive value</li><li><code>S(()=> <computation>)</code> — signal: reactive value dependent on calculation using other signals</li><li><code>S.on(<signal>, <listener>[, <options>])</code> — listen to the signal value changes</li><li><code>S.clear(...<signals>)</code> — off and clear signals</li><li><code>S(<value>, <actions>)</code> — signal: pattern to create complex reactive objects/arrays</li><li><code>S.action(<signal>, <action-name>, ...<action-arguments>)</code> — invoke an 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"><!--<dde:mark type="component" name="mnemonicUl" host="parentElement" ssr/>--><h3 id="h-mnemonic"><!--<dde:mark type="component" name="h3" host="parentElement" ssr/>--><a href="#h-mnemonic" tabindex="-1">#</a> Mnemonic</h3><ul><li><code>S(<value>)</code> — signal: reactive value</li><li><code>S(()=> <computation>)</code> — signal: reactive value dependent on calculation using other signals</li><li><code>S.on(<signal>, <listener>[, <options>])</code> — listen to the signal value changes</li><li><code>S.clear(...<signals>)</code> — off and clear signals</li><li><code>S(<value>, <actions>)</code> — signal: pattern to create complex reactive objects/arrays</li><li><code>S.action(<signal>, <action-name>, ...<action-arguments>)</code> — invoke an 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>
|
||||
@ -14,6 +14,7 @@ ${host}{
|
||||
--shiki-token-punctuation: var(--code);
|
||||
--shiki-token-link: #EE0000;
|
||||
white-space: pre;
|
||||
overflow: scroll;
|
||||
}
|
||||
${host}[data-js=todo]{
|
||||
border: 1px solid var(--border);
|
||||
@ -30,11 +31,13 @@ import { el } from "deka-dom-el";
|
||||
* @param {object} attrs
|
||||
* @param {string} [attrs.id]
|
||||
* @param {string} [attrs.className]
|
||||
* @param {string} attrs.content Example code file path
|
||||
* @param {URL} [attrs.src] Example code file path
|
||||
* @param {string} [attrs.content] Example code
|
||||
* @param {"js"|"ts"|"html"|"css"} [attrs.language="js"] Language of the code
|
||||
* @param {string} [attrs.page_id] ID of the page, if setted it registers shiki
|
||||
* */
|
||||
export function code({ id, content, language= "js", className= "code", page_id }){
|
||||
export function code({ id, src, content, language= "js", className= host.slice(1), page_id }){
|
||||
if(src) content= s.cat(src);
|
||||
let dataJS;
|
||||
if(page_id){
|
||||
registerClientPart(page_id);
|
||||
|
||||
@ -26,7 +26,7 @@ import { relative } from "node:path";
|
||||
export function example({ src, language= "js", page_id }){
|
||||
registerClientPart(page_id);
|
||||
const content= s.cat(src).toString()
|
||||
.replaceAll(/ from "deka-dom-el(\/signals)?";/g, ' from "https://cdn.jsdelivr.net/gh/jaandrle/deka-dom-el/dist/esm-with-signals.js";');
|
||||
.replaceAll(/ from "deka-dom-el(\/observables)?";/g, ' from "https://cdn.jsdelivr.net/gh/jaandrle/deka-dom-el/dist/esm-with-observables.js";');
|
||||
const id= "code-example-"+generateCodeId(src);
|
||||
return el().append(
|
||||
el(code, { id, content, language, className: example.name }),
|
||||
|
||||
10
docs_src/components/examples/elements/intro.js
Normal file
10
docs_src/components/examples/elements/intro.js
Normal file
@ -0,0 +1,10 @@
|
||||
// when NPM
|
||||
import { assign, el, elNS } from "deka-dom-el";
|
||||
// https://cdn.jsdelivr.net/gh/jaandrle/deka-dom-el/dist/esm.js
|
||||
|
||||
// “internal” utils
|
||||
import {
|
||||
assignAttribute,
|
||||
classListDeclarative,
|
||||
chainableAppend
|
||||
} from "deka-dom-el";
|
||||
7
docs_src/components/examples/events/intro.js
Normal file
7
docs_src/components/examples/events/intro.js
Normal file
@ -0,0 +1,7 @@
|
||||
// when NPM
|
||||
import { on, dispatchEvent } from "deka-dom-el";
|
||||
// https://cdn.jsdelivr.net/gh/jaandrle/deka-dom-el/dist/esm.js
|
||||
|
||||
/**
|
||||
* @type {ddeElementAddon}
|
||||
* */
|
||||
@ -1,9 +1,9 @@
|
||||
import { el } from "deka-dom-el";
|
||||
import { S } from "deka-dom-el/signals";
|
||||
const clicks= S(0);
|
||||
import { O } from "deka-dom-el/observables";
|
||||
const clicks= O(0);
|
||||
document.body.append(
|
||||
el().append(
|
||||
el("p", S(()=>
|
||||
el("p", O(()=>
|
||||
"Hello World "+"🎉".repeat(clicks())
|
||||
)),
|
||||
el("button", {
|
||||
|
||||
@ -0,0 +1,16 @@
|
||||
import { O } from "deka-dom-el/observables";
|
||||
const observable= O(0);
|
||||
// computation pattern
|
||||
const double= O(()=> 2*observable());
|
||||
|
||||
const ac= new AbortController();
|
||||
O.on(observable, v=> console.log("observable", v), { signal: ac.signal });
|
||||
O.on(double, v=> console.log("double", v), { signal: ac.signal });
|
||||
|
||||
observable(observable()+1);
|
||||
const interval= 5000;
|
||||
const id= setInterval(()=> observable(observable()+1), interval);
|
||||
ac.signal.addEventListener("abort",
|
||||
()=> setTimeout(()=> clearInterval(id), 2*interval));
|
||||
|
||||
setTimeout(()=> ac.abort(), 3*interval)
|
||||
10
docs_src/components/examples/observables/intro.js
Normal file
10
docs_src/components/examples/observables/intro.js
Normal file
@ -0,0 +1,10 @@
|
||||
// when NPM
|
||||
import { O } from "deka-dom-el/observables";
|
||||
// https://cdn.jsdelivr.net/gh/jaandrle/deka-dom-el/dist/esm-with-observables.js
|
||||
|
||||
/**
|
||||
* @type {ddeObservable}
|
||||
* */
|
||||
/**
|
||||
* @type {ddeActions}
|
||||
* */
|
||||
8
docs_src/components/examples/observables/observables.js
Normal file
8
docs_src/components/examples/observables/observables.js
Normal file
@ -0,0 +1,8 @@
|
||||
import { O } from "deka-dom-el/observables";
|
||||
// α — `observable` represents a reactive value
|
||||
const observable= O(0);
|
||||
// β — just reacts on observable changes
|
||||
O.on(observable, console.log);
|
||||
// γ — just updates the value
|
||||
observable(observable()+1);
|
||||
setInterval(()=> observable(observable()+1), 5000);
|
||||
@ -1,16 +0,0 @@
|
||||
import { S } from "deka-dom-el/signals";
|
||||
const signal= S(0);
|
||||
// computation pattern
|
||||
const double= S(()=> 2*signal());
|
||||
|
||||
const ac= new AbortController();
|
||||
S.on(signal, v=> console.log("signal", v), { signal: ac.signal });
|
||||
S.on(double, v=> console.log("double", v), { signal: ac.signal });
|
||||
|
||||
signal(signal()+1);
|
||||
const interval= 5000;
|
||||
const id= setInterval(()=> signal(signal()+1), interval);
|
||||
ac.signal.addEventListener("abort",
|
||||
()=> setTimeout(()=> clearInterval(id), 2*interval));
|
||||
|
||||
setTimeout(()=> ac.abort(), 3*interval)
|
||||
@ -1,8 +0,0 @@
|
||||
import { S } from "deka-dom-el/signals";
|
||||
// α — `signal` represents a reactive value
|
||||
const signal= S(0);
|
||||
// β — just reacts on signal changes
|
||||
S.on(signal, console.log);
|
||||
// γ — just updates the value
|
||||
signal(signal()+1);
|
||||
setInterval(()=> signal(signal()+1), 5000);
|
||||
19
docs_src/components/mnemonicUl.html.js
Normal file
19
docs_src/components/mnemonicUl.html.js
Normal file
@ -0,0 +1,19 @@
|
||||
import { styles } from "../ssr.js";
|
||||
import { h3 } from "./pageUtils.html.js";
|
||||
const host= ".notice";
|
||||
styles.css`
|
||||
${host} h3{
|
||||
margin-top: 0;
|
||||
}
|
||||
`;
|
||||
import { el, simulateSlots } from "deka-dom-el";
|
||||
/** @param {Object} props @param {string} props.textContent */
|
||||
export function mnemonicUl({ textContent= "" }){
|
||||
if(textContent) textContent= " – "+textContent
|
||||
return simulateSlots(el("div", { className: "notice" }).append(
|
||||
el(h3, "Mnemonic"+textContent),
|
||||
el("ul").append(
|
||||
el("slot")
|
||||
)
|
||||
));
|
||||
}
|
||||
@ -1,43 +1,36 @@
|
||||
import "./global.css.js";
|
||||
import { simplePage } from "./layout/simplePage.html.js";
|
||||
|
||||
import { el } from "deka-dom-el";
|
||||
|
||||
import { header } from "./layout/head.html.js";
|
||||
import { example } from "./components/example.html.js";
|
||||
import { prevNext } from "./components/pageUtils.html.js";
|
||||
|
||||
/** @param {import("./types.d.ts").PageAttrs} attrs */
|
||||
export function page({ pkg, info }){
|
||||
const page_id= info.id;
|
||||
return el().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").append(
|
||||
"We start with creating and modifying a static elements and end up with UI templates.",
|
||||
" ",
|
||||
el("i").append(
|
||||
"From ", el("code", "document.createElement"), " to ", el("code", "el"), "."
|
||||
),
|
||||
" ",
|
||||
"Then we go through the native events system and the way to include it declaratively in UI templates.",
|
||||
" ",
|
||||
el("i").append(
|
||||
"From ", el("code", "element.addEventListener"), " to ", el("code", "on"), "."
|
||||
),
|
||||
return el(simplePage, { info, pkg }).append(
|
||||
el("p", "The library tries to provide pure JavaScript tool(s) to create reactive interfaces."),
|
||||
el("p").append(
|
||||
"We start with creating and modifying a static elements and end up with UI templates.",
|
||||
" ",
|
||||
el("i").append(
|
||||
"From ", el("code", "document.createElement"), " to ", el("code", "el"), "."
|
||||
),
|
||||
el("p").append(
|
||||
"Next step is providing interactivity not only for our UI templates.",
|
||||
" ",
|
||||
"We introduce signals (", el("code", "S"), ") and how them incorporate to UI templates.",
|
||||
" ",
|
||||
"Then we go through the native events system and the way to include it declaratively in UI templates.",
|
||||
" ",
|
||||
el("i").append(
|
||||
"From ", el("code", "element.addEventListener"), " to ", el("code", "on"), "."
|
||||
),
|
||||
el("p").append(
|
||||
"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 ",
|
||||
el("code", "scope"), "s. We will look at how they work in components represented ",
|
||||
"in JavaScript by functions."
|
||||
),
|
||||
el(example, { src: new URL("./components/examples/helloWorld.js", import.meta.url), page_id }),
|
||||
el(prevNext, info)
|
||||
)
|
||||
),
|
||||
el("p").append(
|
||||
"Next step is providing interactivity not only for our UI templates.",
|
||||
" ",
|
||||
"We introduce observables (", el("code", "O"), ") and how them incorporate to UI templates.",
|
||||
),
|
||||
el("p").append(
|
||||
"Now we will clarify how the observables are incorporated into our templates with regard ",
|
||||
"to application performance. This is not the only reason the library uses ",
|
||||
el("code", "scope"), "s. We will look at how they work in components represented ",
|
||||
"in JavaScript by functions."
|
||||
),
|
||||
el(example, { src: new URL("./components/examples/helloWorld.js", import.meta.url), page_id }),
|
||||
);
|
||||
}
|
||||
|
||||
16
docs_src/layout/simplePage.html.js
Normal file
16
docs_src/layout/simplePage.html.js
Normal 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)
|
||||
)
|
||||
));
|
||||
}
|
||||
@ -1,147 +1,140 @@
|
||||
import "./global.css.js";
|
||||
import { simplePage } from "./layout/simplePage.html.js";
|
||||
|
||||
import { el } from "deka-dom-el";
|
||||
|
||||
import { header } from "./layout/head.html.js";
|
||||
import { example } from "./components/example.html.js";
|
||||
import { h3, prevNext } from "./components/pageUtils.html.js";
|
||||
|
||||
import { h3 } from "./components/pageUtils.html.js";
|
||||
import { mnemonicUl } from "./components/mnemonicUl.html.js";
|
||||
import { code } from "./components/code.html.js";
|
||||
/** @param {string} url */
|
||||
const fileURL= url=> new URL(url, import.meta.url);
|
||||
|
||||
/** @param {import("./types.d.ts").PageAttrs} attrs */
|
||||
export function page({ pkg, info }){
|
||||
const page_id= info.id;
|
||||
return el().append(
|
||||
el(header, { info, pkg }),
|
||||
el("main").append(
|
||||
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."),
|
||||
return el(simplePage, { info, pkg }).append(
|
||||
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(h3, "Creating element(s) (with custom attributes)"),
|
||||
el("p").append(
|
||||
"You can create a native DOM element by using the ",
|
||||
el("a", { href: "https://developer.mozilla.org/en-US/docs/Web/API/Document/createElement", title: "MDN documentation for document.createElement()" }).append(
|
||||
el("code", "document.createElement()")
|
||||
), ". ",
|
||||
"It is also possible to provide a some attribute(s) declaratively using ", el("code", "Object.assign()"), ". ",
|
||||
"More precisely, this way you can sets some ",
|
||||
el("a", {
|
||||
href: "https://developer.mozilla.org/en-US/docs/Glossary/IDL",
|
||||
title: "MDN page about Interface Description Language"
|
||||
}).append(
|
||||
el("abbr", { textContent: "IDL", title: "Interface Description Language" })
|
||||
), " also known as a JavaScript property."
|
||||
el(code, { src: fileURL("./components/examples/elements/intro.js"), page_id }),
|
||||
|
||||
el(h3, "Creating element(s) (with custom attributes)"),
|
||||
el("p").append(
|
||||
"You can create a native DOM element by using the ",
|
||||
el("a", { href: "https://developer.mozilla.org/en-US/docs/Web/API/Document/createElement", title: "MDN documentation for document.createElement()" }).append(
|
||||
el("code", "document.createElement()")
|
||||
), ". ",
|
||||
"It is also possible to provide a some attribute(s) declaratively using ", el("code", "Object.assign()"), ". ",
|
||||
"More precisely, this way you can sets some ",
|
||||
el("a", {
|
||||
href: "https://developer.mozilla.org/en-US/docs/Glossary/IDL",
|
||||
title: "MDN page about Interface Description Language"
|
||||
}).append(
|
||||
el("abbr", { textContent: "IDL", title: "Interface Description Language" })
|
||||
), " also known as a JavaScript property."
|
||||
),
|
||||
el(example, { src: fileURL("./components/examples/elements/nativeCreateElement.js"), page_id }),
|
||||
el("p").append(
|
||||
"To make this easier, you can use the ", el("code", "el"), " function. ",
|
||||
"Internally in basic examples, it is wrapper around ", el("code", "assign(document.createElement(…), { … })"), "."
|
||||
),
|
||||
el(example, { src: fileURL("./components/examples/elements/dekaCreateElement.js"), page_id }),
|
||||
el("p").append(
|
||||
"The ", el("code", "assign"), " function provides improved behaviour of ", el("code", "Object.assign()"), ". ",
|
||||
"You can declaratively sets any IDL and attribute of the given element. ",
|
||||
"Function prefers IDL and fallback to the ", el("code", "element.setAttribute"), " if there is no writable property in the element prototype."
|
||||
),
|
||||
el("p").append(
|
||||
"You can study all JavaScript elements interfaces to the corresponding HTML elements. ",
|
||||
"All HTML elements inherits from ", el("a", { textContent: "HTMLElement", href: "https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement" }), ". ",
|
||||
"To see all available IDLs for example for paragraphs, see ", el("a", { textContent: "HTMLParagraphElement", href: "https://developer.mozilla.org/en-US/docs/Web/API/HTMLParagraphElement" }), ". ",
|
||||
"Moreover, the ", el("code", "assign"), " provides a way to sets declaratively some convenient properties:"
|
||||
),
|
||||
el("ul").append(
|
||||
el("li").append(
|
||||
"It is possible to sets ", el("code", "data-*"), "/", el("code", "aria-*"), " attributes using object notation."
|
||||
),
|
||||
el(example, { src: fileURL("./components/examples/elements/nativeCreateElement.js"), page_id }),
|
||||
el("p").append(
|
||||
"To make this easier, you can use the ", el("code", "el"), " function. ",
|
||||
"Internally in basic examples, it is wrapper around ", el("code", "assign(document.createElement(…), { … })"), "."
|
||||
el("li").append(
|
||||
"In opposite, it is also possible to sets ", el("code", "data-*"), "/", el("code", "aria-*"), " attribute using camelCase notation."
|
||||
),
|
||||
el(example, { src: fileURL("./components/examples/elements/dekaCreateElement.js"), page_id }),
|
||||
el("p").append(
|
||||
"The ", el("code", "assign"), " function provides improved behaviour of ", el("code", "Object.assign()"), ". ",
|
||||
"You can declaratively sets any IDL and attribute of the given element. ",
|
||||
"Function prefers IDL and fallback to the ", el("code", "element.setAttribute"), " if there is no writable property in the element prototype."
|
||||
el("li").append(
|
||||
"You can use string or object as a value for ", el("code", "style"), " property."
|
||||
),
|
||||
el("p").append(
|
||||
"You can study all JavaScript elements interfaces to the corresponding HTML elements. ",
|
||||
"All HTML elements inherits from ", el("a", { textContent: "HTMLElement", href: "https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement" }), ". ",
|
||||
"To see all available IDLs for example for paragraphs, see ", el("a", { textContent: "HTMLParagraphElement", href: "https://developer.mozilla.org/en-US/docs/Web/API/HTMLParagraphElement" }), ". ",
|
||||
"Moreover, the ", el("code", "assign"), " provides a way to sets declaratively some convenient properties:"
|
||||
el("li").append(
|
||||
el("code", "className"), " (IDL – preffered)/", el("code", "class"), " are ways to add CSS class to the element. ",
|
||||
"You can use string (similarly to ", el("code", "class=\"…\"") ," syntax in HTML) or array of strings. ",
|
||||
"This is handy to concat conditional classes."
|
||||
),
|
||||
el("ul").append(
|
||||
el("li").append(
|
||||
"It is possible to sets ", el("code", "data-*"), "/", el("code", "aria-*"), " attributes using object notation."
|
||||
),
|
||||
el("li").append(
|
||||
"In opposite, it is also possible to sets ", el("code", "data-*"), "/", el("code", "aria-*"), " attribute using camelCase notation."
|
||||
),
|
||||
el("li").append(
|
||||
"You can use string or object as a value for ", el("code", "style"), " property."
|
||||
),
|
||||
el("li").append(
|
||||
el("code", "className"), " (IDL – preffered)/", el("code", "class"), " are ways to add CSS class to the element. ",
|
||||
"You can use string (similarly to ", el("code", "class=\"…\"") ," syntax in HTML) or array of strings. ",
|
||||
"This is handy to concat conditional classes."
|
||||
),
|
||||
el("li").append(
|
||||
"Use ", el("code", "classList"), " to toggle specific classes. This will be handy later when the reactivity via signals is beeing introduced.",
|
||||
),
|
||||
el("li").append(
|
||||
"The ", el("code", "assign"), " also accepts the ", el("code", "undefined"), " as a value for any property to remove it from the element declaratively. ",
|
||||
"Also for some IDL the corresponding attribute is removed as it can be confusing. ",
|
||||
el("em").append(
|
||||
"For example, natievly the element’s ", el("code", "id"), " is removed by setting the IDL to an empty string."
|
||||
)
|
||||
),
|
||||
el("li").append(
|
||||
"You can use ", el("code", "="), " or ", el("code", "."), " to force processing given key as attribute/property of the element."
|
||||
el("li").append(
|
||||
"Use ", el("code", "classList"), " to toggle specific classes. This will be handy later when the reactivity via observables is beeing introduced.",
|
||||
),
|
||||
el("li").append(
|
||||
"The ", el("code", "assign"), " also accepts the ", el("code", "undefined"), " as a value for any property to remove it from the element declaratively. ",
|
||||
"Also for some IDL the corresponding attribute is removed as it can be confusing. ",
|
||||
el("em").append(
|
||||
"For example, natievly the element’s ", el("code", "id"), " is removed by setting the IDL to an empty string."
|
||||
)
|
||||
),
|
||||
el("p").append(
|
||||
"For processing, the ", el("code", "assign"), " internally uses ", el("code", "assignAttribute"), " and ", el("code", "classListDeclarative"), "."
|
||||
),
|
||||
el(example, { src: fileURL("./components/examples/elements/dekaAssign.js"), page_id }),
|
||||
el("li").append(
|
||||
"You can use ", el("code", "="), " or ", el("code", "."), " to force processing given key as attribute/property of the element."
|
||||
)
|
||||
),
|
||||
el("p").append(
|
||||
"For processing, the ", el("code", "assign"), " internally uses ", el("code", "assignAttribute"), " and ", el("code", "classListDeclarative"), "."
|
||||
),
|
||||
el(example, { src: fileURL("./components/examples/elements/dekaAssign.js"), page_id }),
|
||||
|
||||
el(h3, "Native JavaScript templating"),
|
||||
el("p", "By default, the native JS has no good way to define HTML template using DOM API:"),
|
||||
el(example, { src: fileURL("./components/examples/elements/nativeAppend.js"), page_id }),
|
||||
el("p").append(
|
||||
"This library therefore overwrites the ", el("code", "append"), " method of created elements to always return parent element."
|
||||
),
|
||||
el(example, { src: fileURL("./components/examples/elements/dekaAppend.js"), page_id }),
|
||||
el(h3, "Native JavaScript templating"),
|
||||
el("p", "By default, the native JS has no good way to define HTML template using DOM API:"),
|
||||
el(example, { src: fileURL("./components/examples/elements/nativeAppend.js"), page_id }),
|
||||
el("p").append(
|
||||
"This library therefore overwrites the ", el("code", "append"), " method of created elements to always return parent element."
|
||||
),
|
||||
el(example, { src: fileURL("./components/examples/elements/dekaAppend.js"), page_id }),
|
||||
|
||||
|
||||
el(h3, "Basic (state-less) components"),
|
||||
el("p").append(
|
||||
"You can use functions for encapsulation (repeating) logic. ",
|
||||
"The ", el("code", "el"), " accepts function as first argument. ",
|
||||
"In that case, the function should return dom elements and the second argument for ", el("code", "el"), " is argument for given element."
|
||||
),
|
||||
el(example, { src: fileURL("./components/examples/elements/dekaBasicComponent.js"), page_id }),
|
||||
el("p").append(
|
||||
"As you can see, in case of state-less/basic components there is no difference",
|
||||
" between calling component function directly or using ", el("code", "el"), " function.",
|
||||
),
|
||||
el("p", { className: "notice" }).append(
|
||||
"It is nice to use similar naming convention as native DOM API. ",
|
||||
"This allows us to use ", el("a", { textContent: "the destructuring assignment syntax", href: "https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment", title: "Destructuring assignment | MDN" }),
|
||||
" and keep track of the native API (things are best remembered through regular use).",
|
||||
),
|
||||
el(h3, "Basic (state-less) components"),
|
||||
el("p").append(
|
||||
"You can use functions for encapsulation (repeating) logic. ",
|
||||
"The ", el("code", "el"), " accepts function as first argument. ",
|
||||
"In that case, the function should return dom elements and the second argument for ", el("code", "el"), " is argument for given element."
|
||||
),
|
||||
el(example, { src: fileURL("./components/examples/elements/dekaBasicComponent.js"), page_id }),
|
||||
el("p").append(
|
||||
"As you can see, in case of state-less/basic components there is no difference",
|
||||
" between calling component function directly or using ", el("code", "el"), " function.",
|
||||
),
|
||||
el("p", { className: "notice" }).append(
|
||||
"It is nice to use similar naming convention as native DOM API. ",
|
||||
"This allows us to use ", el("a", { textContent: "the destructuring assignment syntax", href: "https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment", title: "Destructuring assignment | MDN" }),
|
||||
" and keep track of the native API (things are best remembered through regular use).",
|
||||
),
|
||||
|
||||
el(h3, "Creating non-HTML elements"),
|
||||
el("p").append(
|
||||
"Similarly to the native DOM API (", el("a", { href: "https://developer.mozilla.org/en-US/docs/Web/API/Document/createElementNS", title: "MDN" }).append(el("code", "document.createElementNS")), ") for non-HTML elements",
|
||||
" we need to tell JavaScript which kind of the element to create.",
|
||||
" We can use the ", el("code", "elNS"), " function:"
|
||||
),
|
||||
el(example, { src: fileURL("./components/examples/elements/dekaElNS.js"), page_id }),
|
||||
el(h3, "Creating non-HTML elements"),
|
||||
el("p").append(
|
||||
"Similarly to the native DOM API (", el("a", { href: "https://developer.mozilla.org/en-US/docs/Web/API/Document/createElementNS", title: "MDN" }).append(el("code", "document.createElementNS")), ") for non-HTML elements",
|
||||
" we need to tell JavaScript which kind of the element to create.",
|
||||
" We can use the ", el("code", "elNS"), " function:"
|
||||
),
|
||||
el(example, { src: fileURL("./components/examples/elements/dekaElNS.js"), page_id }),
|
||||
|
||||
el("div", { className: "notice" }).append(
|
||||
el("p", "Mnemonic"),
|
||||
el("ul").append(
|
||||
el("li").append(
|
||||
el("code", "assign(<element>, ...<idl-objects>): <element>"), " — assign properties to the element",
|
||||
),
|
||||
el("li").append(
|
||||
el("code", "el(<tag-name>, <primitive>)[.append(...)]: <element-from-tag-name>"), " — simple element containing only text",
|
||||
),
|
||||
el("li").append(
|
||||
el("code", "el(<tag-name>, <idl-object>)[.append(...)]: <element-from-tag-name>"), " — element with more properties",
|
||||
),
|
||||
el("li").append(
|
||||
el("code", "el(<function>, <function-argument(s)>)[.append(...)]: <element-returned-by-function>"), " — using component represented by function",
|
||||
),
|
||||
el("li").append(
|
||||
el("code", "el(<...>, <...>, ...<addons>)"), " — see following page"
|
||||
),
|
||||
el("li").append(
|
||||
el("code", "elNS(<namespace>)(<as-el-see-above>)[.append(...)]: <element-based-on-arguments>"), " — typically SVG elements",
|
||||
)
|
||||
)
|
||||
el(mnemonicUl).append(
|
||||
el("li").append(
|
||||
el("code", "assign(<element>, ...<idl-objects>): <element>"), " — assign properties to the element",
|
||||
),
|
||||
|
||||
el(prevNext, info)
|
||||
el("li").append(
|
||||
el("code", "el(<tag-name>, <primitive>)[.append(...)]: <element-from-tag-name>"), " — simple element containing only text",
|
||||
),
|
||||
el("li").append(
|
||||
el("code", "el(<tag-name>, <idl-object>)[.append(...)]: <element-from-tag-name>"), " — element with more properties",
|
||||
),
|
||||
el("li").append(
|
||||
el("code", "el(<function>, <function-argument(s)>)[.append(...)]: <element-returned-by-function>"), " — using component represented by function",
|
||||
),
|
||||
el("li").append(
|
||||
el("code", "el(<...>, <...>, ...<addons>)"), " — see following page"
|
||||
),
|
||||
el("li").append(
|
||||
el("code", "elNS(<namespace>)(<as-el-see-above>)[.append(...)]: <element-based-on-arguments>"), " — typically SVG elements",
|
||||
)
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
@ -1,139 +1,132 @@
|
||||
import "./global.css.js";
|
||||
import { simplePage } from "./layout/simplePage.html.js";
|
||||
|
||||
import { el } from "deka-dom-el";
|
||||
|
||||
import { header } from "./layout/head.html.js";
|
||||
import { example } from "./components/example.html.js";
|
||||
import { h3, prevNext } from "./components/pageUtils.html.js";
|
||||
|
||||
import { h3 } from "./components/pageUtils.html.js";
|
||||
import { mnemonicUl } from "./components/mnemonicUl.html.js";
|
||||
import { code } from "./components/code.html.js";
|
||||
/** @param {string} url */
|
||||
const fileURL= url=> new URL(url, import.meta.url);
|
||||
|
||||
/** @param {import("./types.d.ts").PageAttrs} attrs */
|
||||
export function page({ pkg, info }){
|
||||
const page_id= info.id;
|
||||
return el().append(
|
||||
el(header, { info, pkg }),
|
||||
el("main").append(
|
||||
el("h2", "Listenning to the native DOM events and other Addons"),
|
||||
el("p").append(
|
||||
"We quickly introduce helper to listening to the native DOM events.",
|
||||
" ",
|
||||
"And library syntax/pattern so-called ", el("em", "Addon"), " to",
|
||||
" incorporate not only this in UI templates declaratively."
|
||||
),
|
||||
return el(simplePage, { info, pkg }).append(
|
||||
el("h2", "Listenning to the native DOM events and other Addons"),
|
||||
el("p").append(
|
||||
"We quickly introduce helper to listening to the native DOM events.",
|
||||
" ",
|
||||
"And library syntax/pattern so-called ", el("em", "Addon"), " to",
|
||||
" incorporate not only this in UI templates declaratively."
|
||||
),
|
||||
|
||||
el(h3, "Events and listenners"),
|
||||
el("p").append(
|
||||
"In JavaScript you can listen to the native DOM events of the given element by using ",
|
||||
el("a", { href: "https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener", title: "addEventListener on MDN" }).append(
|
||||
el("code", "element.addEventListener(type, listener, options)")
|
||||
), ".",
|
||||
" ",
|
||||
"The library provides an alternative (", el("code", "on"), ") accepting the differen order",
|
||||
" of the arguments:"
|
||||
),
|
||||
el(example, { src: fileURL("./components/examples/events/compare.js"), page_id }),
|
||||
el("p").append(
|
||||
"…this is actually one of the two differences. The another one is that ", el("code", "on"),
|
||||
" accepts only object as the ", el("code", "options"), " (but it is still optional)."
|
||||
),
|
||||
el("p", { className: "notice" }).append(
|
||||
"The other difference is that there is ", el("strong", "no"), " ", el("code", "off"), " function.",
|
||||
" ",
|
||||
"You can remove listener declaratively using ", el("a", { textContent: "AbortSignal", href: "https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener#signal", title: "part of addEventListener on MDN" }),
|
||||
":"
|
||||
),
|
||||
el(example, { src: fileURL("./components/examples/events/abortSignal.js"), page_id }),
|
||||
el("div", { className: "notice" }).append(
|
||||
el("p", "So, there are (typically) three ways to handle events. You can use:"),
|
||||
el("ul").append(
|
||||
el("li").append( el("code", `el("button", { textContent: "click me", "=onclick": "console.log(event)" })`)),
|
||||
el("li").append( el("code", `el("button", { textContent: "click me", onclick: console.log })`)),
|
||||
el("li").append( el("code", `el("button", { textContent: "click me" }, on("click", console.log))`))
|
||||
),
|
||||
el("p").append(
|
||||
"In the first example we force to use HTML attribute (it corresponds to ", el("code", `<button onclick="console.log(event)">click me</button>`), ").",
|
||||
" ",
|
||||
el("em", "Side note: this can be useful in case of SSR."),
|
||||
" ",
|
||||
"To study difference, you can read a nice summary here: ", el("a", { href: "https://gist.github.com/WebReflection/b404c36f46371e3b1173bf5492acc944", textContent: "GIST @WebReflection/web_events.md" }), "."
|
||||
)
|
||||
),
|
||||
el(code, { src: fileURL("./components/examples/events/intro.js"), page_id }),
|
||||
|
||||
el(h3, "Addons"),
|
||||
el("p").append(
|
||||
"From practical point of view, ", el("em", "Addons"), " are just functions that accept any html element",
|
||||
" as their first parameter. You can see that the ", el("code", "on(…)"), " fullfills this requirement."
|
||||
),
|
||||
el("p").append(
|
||||
"You can use Addons as ≥3rd argument of ", el("code", "el"), " function. This way is possible to extends",
|
||||
" you templates by additional (3rd party) functionalities. But for now mainly, you can add events listeners:"
|
||||
),
|
||||
el(example, { src: fileURL("./components/examples/events/templateWithListeners.js"), page_id }),
|
||||
el("p").append(
|
||||
"As the example shows, you can also provide types in JSDoc+TypeScript by using global type ", el("code", "ddeElementAddon"), ".",
|
||||
" ",
|
||||
"Also notice, you can use Addons to get element reference.",
|
||||
),
|
||||
el(h3, "Life-cycle events"),
|
||||
el("p").append(
|
||||
"Addons are called immediately when the element is created, even it is not connected to live DOM yet.",
|
||||
" ",
|
||||
"Therefore, you can understand the Addon to be “oncreate” event."
|
||||
),
|
||||
el("p").append(
|
||||
"The library provide three additional live-cycle events corresponding to how they are named in",
|
||||
" a case of custom elements: ", el("code", "on.connected"), ", ", el("code", "on.disconnected"),
|
||||
" and ", el("code", "on.attributeChanged"), "."
|
||||
),
|
||||
el(example, { src: fileURL("./components/examples/events/live-cycle.js"), page_id }),
|
||||
el("p").append(
|
||||
"For Custom elements, we will later introduce a way to replace ", el("code", "*Callback"),
|
||||
" syntax with ", el("code", "dde:*"), " events. The ", el("code", "on.*"), " functions then",
|
||||
" listen to the appropriate Custom Elements events (see ", el("a", { textContent: "Custom element lifecycle callbacks | MDN", href: "https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_custom_elements#custom_element_lifecycle_callbacks" }), ")."
|
||||
),
|
||||
el("p").append(
|
||||
"But, in case of regular elemnets the ", el("a", { href: "https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver" }).append(el("code", "MutationObserver"), " | MDN"),
|
||||
" is internaly used to track these events. Therefore, there are some drawbacks:",
|
||||
),
|
||||
el(h3, "Events and listenners"),
|
||||
el("p").append(
|
||||
"In JavaScript you can listen to the native DOM events of the given element by using ",
|
||||
el("a", { href: "https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener", title: "addEventListener on MDN" }).append(
|
||||
el("code", "element.addEventListener(type, listener, options)")
|
||||
), ".",
|
||||
" ",
|
||||
"The library provides an alternative (", el("code", "on"), ") accepting the differen order",
|
||||
" of the arguments:"
|
||||
),
|
||||
el(example, { src: fileURL("./components/examples/events/compare.js"), page_id }),
|
||||
el("p").append(
|
||||
"…this is actually one of the two differences. The another one is that ", el("code", "on"),
|
||||
" accepts only object as the ", el("code", "options"), " (but it is still optional)."
|
||||
),
|
||||
el("p", { className: "notice" }).append(
|
||||
"The other difference is that there is ", el("strong", "no"), " ", el("code", "off"), " function.",
|
||||
" ",
|
||||
"You can remove listener declaratively using ", el("a", { textContent: "AbortSignal", href: "https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener#signal", title: "part of addEventListener on MDN" }),
|
||||
":"
|
||||
),
|
||||
el(example, { src: fileURL("./components/examples/events/abortSignal.js"), page_id }),
|
||||
el("div", { className: "notice" }).append(
|
||||
el("p", "So, there are (typically) three ways to handle events. You can use:"),
|
||||
el("ul").append(
|
||||
el("li").append(
|
||||
"To proper listener registration, you need to use ", el("code", "on.*"), " not `on(\"dde:*\", …)`!"
|
||||
),
|
||||
el("li").append(
|
||||
"Use sparingly! Internally, library must loop of all registered events and fires event properly.",
|
||||
" ",
|
||||
el("strong", "It is good practice to use the fact that if an element is removed, its children are also removed!"),
|
||||
" ",
|
||||
"In this spirit, we will introduce later the ", el("strong", "host"), " syntax to register",
|
||||
" clean up procedures when the component is removed from the app."
|
||||
),
|
||||
el("li").append( el("code", `el("button", { textContent: "click me", "=onclick": "console.log(event)" })`)),
|
||||
el("li").append( el("code", `el("button", { textContent: "click me", onclick: console.log })`)),
|
||||
el("li").append( el("code", `el("button", { textContent: "click me" }, on("click", console.log))`))
|
||||
),
|
||||
el("p").append(
|
||||
"In the first example we force to use HTML attribute (it corresponds to ", el("code", `<button onclick="console.log(event)">click me</button>`), ").",
|
||||
" ",
|
||||
el("em", "Side note: this can be useful in case of SSR."),
|
||||
" ",
|
||||
"To study difference, you can read a nice summary here: ", el("a", { href: "https://gist.github.com/WebReflection/b404c36f46371e3b1173bf5492acc944", textContent: "GIST @WebReflection/web_events.md" }), "."
|
||||
)
|
||||
),
|
||||
|
||||
el(h3, "Final notes"),
|
||||
el("p", "The library also provides a method to dispatch the events."),
|
||||
el(example, { src: fileURL("./components/examples/events/compareDispatch.js"), page_id }),
|
||||
|
||||
el("div", { className: "notice" }).append(
|
||||
el("p", "Mnemonic"),
|
||||
el("ul").append(
|
||||
el("li").append(
|
||||
el("code", "on(<event>, <listener>[, <options>])(<element>)"), " — just ", el("code", "<element>.addEventListener(<event>, <listener>[, <options>])")
|
||||
),
|
||||
el("li").append(
|
||||
el("code", "on.<live-cycle>(<event>, <listener>[, <options>])(<element>)"), " — corresponds to custom elemnets callbacks ", el("code", "<live-cycle>Callback(...){...}"),
|
||||
". To connect to custom element see following page, else it is simulated by MutationObserver."
|
||||
),
|
||||
el("li").append(
|
||||
el("code", "dispatchEvent(<event>[, <options>])(element)"), " — just ", el("code", "<element>.dispatchEvent(new Event(<event>[, <options>]))")
|
||||
),
|
||||
el("li").append(
|
||||
el("code", "dispatchEvent(<event>[, <options>])(element, detail)"), " — just ", el("code", "<element>.dispatchEvent(new CustomEvent(<event>, { detail, ...<options> }))")
|
||||
),
|
||||
)
|
||||
el(h3, "Addons"),
|
||||
el("p").append(
|
||||
"From practical point of view, ", el("em", "Addons"), " are just functions that accept any html element",
|
||||
" as their first parameter. You can see that the ", el("code", "on(…)"), " fullfills this requirement."
|
||||
),
|
||||
el("p").append(
|
||||
"You can use Addons as ≥3rd argument of ", el("code", "el"), " function. This way is possible to extends",
|
||||
" you templates by additional (3rd party) functionalities. But for now mainly, you can add events listeners:"
|
||||
),
|
||||
el(example, { src: fileURL("./components/examples/events/templateWithListeners.js"), page_id }),
|
||||
el("p").append(
|
||||
"As the example shows, you can also provide types in JSDoc+TypeScript by using global type ", el("code", "ddeElementAddon"), ".",
|
||||
" ",
|
||||
"Also notice, you can use Addons to get element reference.",
|
||||
),
|
||||
el(h3, "Life-cycle events"),
|
||||
el("p").append(
|
||||
"Addons are called immediately when the element is created, even it is not connected to live DOM yet.",
|
||||
" ",
|
||||
"Therefore, you can understand the Addon to be “oncreate” event."
|
||||
),
|
||||
el("p").append(
|
||||
"The library provide three additional live-cycle events corresponding to how they are named in",
|
||||
" a case of custom elements: ", el("code", "on.connected"), ", ", el("code", "on.disconnected"),
|
||||
" and ", el("code", "on.attributeChanged"), "."
|
||||
),
|
||||
el(example, { src: fileURL("./components/examples/events/live-cycle.js"), page_id }),
|
||||
el("p").append(
|
||||
"For Custom elements, we will later introduce a way to replace ", el("code", "*Callback"),
|
||||
" syntax with ", el("code", "dde:*"), " events. The ", el("code", "on.*"), " functions then",
|
||||
" listen to the appropriate Custom Elements events (see ", el("a", { textContent: "Custom element lifecycle callbacks | MDN", href: "https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_custom_elements#custom_element_lifecycle_callbacks" }), ")."
|
||||
),
|
||||
el("p").append(
|
||||
"But, in case of regular elemnets the ", el("a", { href: "https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver" }).append(el("code", "MutationObserver"), " | MDN"),
|
||||
" is internaly used to track these events. Therefore, there are some drawbacks:",
|
||||
),
|
||||
el("ul").append(
|
||||
el("li").append(
|
||||
"To proper listener registration, you need to use ", el("code", "on.*"), " not `on(\"dde:*\", …)`!"
|
||||
),
|
||||
el("li").append(
|
||||
"Use sparingly! Internally, library must loop of all registered events and fires event properly.",
|
||||
" ",
|
||||
el("strong", "It is good practice to use the fact that if an element is removed, its children are also removed!"),
|
||||
" ",
|
||||
"In this spirit, we will introduce later the ", el("strong", "host"), " syntax to register",
|
||||
" clean up procedures when the component is removed from the app."
|
||||
),
|
||||
),
|
||||
|
||||
el(prevNext, info)
|
||||
)
|
||||
el(h3, "Final notes"),
|
||||
el("p", "The library also provides a method to dispatch the events."),
|
||||
el(example, { src: fileURL("./components/examples/events/compareDispatch.js"), page_id }),
|
||||
|
||||
el(mnemonicUl).append(
|
||||
el("li").append(
|
||||
el("code", "on(<event>, <listener>[, <options>])(<element>)"), " — just ", el("code", "<element>.addEventListener(<event>, <listener>[, <options>])")
|
||||
),
|
||||
el("li").append(
|
||||
el("code", "on.<live-cycle>(<event>, <listener>[, <options>])(<element>)"), " — corresponds to custom elemnets callbacks ", el("code", "<live-cycle>Callback(...){...}"),
|
||||
". To connect to custom element see following page, else it is simulated by MutationObserver."
|
||||
),
|
||||
el("li").append(
|
||||
el("code", "dispatchEvent(<event>[, <options>])(element)"), " — just ", el("code", "<element>.dispatchEvent(new Event(<event>[, <options>]))")
|
||||
),
|
||||
el("li").append(
|
||||
el("code", "dispatchEvent(<event>[, <options>])(element, detail)"), " — just ", el("code", "<element>.dispatchEvent(new CustomEvent(<event>, { detail, ...<options> }))")
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
75
docs_src/p04-observables.html.js
Normal file
75
docs_src/p04-observables.html.js
Normal file
@ -0,0 +1,75 @@
|
||||
import { simplePage } from "./layout/simplePage.html.js";
|
||||
|
||||
import { el } from "deka-dom-el";
|
||||
import { example } from "./components/example.html.js";
|
||||
import { h3 } from "./components/pageUtils.html.js";
|
||||
import { mnemonicUl } from "./components/mnemonicUl.html.js";
|
||||
import { code } from "./components/code.html.js";
|
||||
/** @param {string} url */
|
||||
const fileURL= url=> new URL(url, import.meta.url);
|
||||
|
||||
/** @param {import("./types.d.ts").PageAttrs} attrs */
|
||||
export function page({ pkg, info }){
|
||||
const page_id= info.id;
|
||||
return el(simplePage, { info, pkg }).append(
|
||||
el("h2", "Using observables to manage reactivity"),
|
||||
el("p").append(
|
||||
"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,",
|
||||
" observables may be a viable approach.",
|
||||
),
|
||||
el(code, { src: fileURL("./components/examples/observables/intro.js"), page_id }),
|
||||
|
||||
el(h3, "Introducing observables"),
|
||||
el("p").append(
|
||||
"Using observables, we split program logic into the three parts.",
|
||||
" Firstly (α), we create a variable (constant) representing reactive",
|
||||
" value. Somewhere later, we can register (β) a logic reacting",
|
||||
" to the observable value changes. Similarly, in a remaining part (γ), we",
|
||||
" can update the observable value."
|
||||
),
|
||||
el(example, { src: fileURL("./components/examples/observables/observables.js"), page_id }),
|
||||
el("p").append(
|
||||
"All this is just an example of ",
|
||||
el("a", { textContent: "Event-driven programming", href: "https://en.wikipedia.org/wiki/Event-driven_programming", title: "Wikipedia: Event-driven programming" }),
|
||||
" and ",
|
||||
el("a", { textContent: "Publish–subscribe pattern", href: "https://en.wikipedia.org/wiki/Publish%E2%80%93subscribe_pattern", title: "Wikipedia: Publish–subscribe pattern" }),
|
||||
" (compare for example with ", el("a", { textContent: "fpubsub library", href: "https://www.npmjs.com/package/fpubsub", title: "NPM package: fpubsub" }), ").",
|
||||
" All three parts can be in some manner independent and still connected",
|
||||
" to the same reactive entity."
|
||||
),
|
||||
el("p").append(
|
||||
"Observables are implemented in the library as functions. To see current value",
|
||||
" of observable, just call it without any arguments ", el("code", "console.log(observable())"), ".",
|
||||
" To update the observable value, pass any argument ", el("code", "observable('a new value')"), ".",
|
||||
" For listenning the observable value changes, use ", el("code", "O.on(observable, console.log)"), "."
|
||||
),
|
||||
el("p").append(
|
||||
"Similarly to the ", el("code", "on"), " function to register DOM events listener.",
|
||||
" You can use ", el("code", "AbortController"), "/", el("code", "AbortSignal"), " to",
|
||||
" ", el("em", "off"), "/stop listenning. For representing “live” piece of code computation pattern:"
|
||||
),
|
||||
el(example, { src: fileURL("./components/examples/observables/computations-abort.js"), page_id }),
|
||||
el(mnemonicUl).append(
|
||||
el("li").append(
|
||||
el("code", "O(<value>)"), " — observable: reactive value",
|
||||
),
|
||||
el("li").append(
|
||||
el("code", "O(()=> <computation>)"), " — observable: reactive value dependent on calculation using other observables",
|
||||
),
|
||||
el("li").append(
|
||||
el("code", "O.on(<observable>, <listener>[, <options>])"), " — listen to the observable value changes",
|
||||
),
|
||||
el("li").append(
|
||||
el("code", "O.clear(...<observables>)"), " — off and clear observables",
|
||||
),
|
||||
el("li").append(
|
||||
el("code", "O(<value>, <actions>)"), " — observable: pattern to create complex reactive objects/arrays",
|
||||
),
|
||||
el("li").append(
|
||||
el("code", "O.action(<observable>, <action-name>, ...<action-arguments>)"), " — invoke an action for given observable"
|
||||
)
|
||||
),
|
||||
);
|
||||
}
|
||||
@ -1,80 +0,0 @@
|
||||
import "./global.css.js";
|
||||
import { el } from "deka-dom-el";
|
||||
|
||||
import { header } from "./layout/head.html.js";
|
||||
import { example } from "./components/example.html.js";
|
||||
import { h3, prevNext } from "./components/pageUtils.html.js";
|
||||
|
||||
/** @param {string} url */
|
||||
const fileURL= url=> new URL(url, import.meta.url);
|
||||
|
||||
/** @param {import("./types.d.ts").PageAttrs} attrs */
|
||||
export function page({ pkg, info }){
|
||||
const page_id= info.id;
|
||||
return el().append(
|
||||
el(header, { info, pkg }),
|
||||
el("main").append(
|
||||
el("h2", "Using signals to manage reactivity"),
|
||||
el("p").append(
|
||||
"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.",
|
||||
),
|
||||
el(example, { src: fileURL("./components/examples/signals/intro.js"), page_id }),
|
||||
|
||||
el(h3, "Introducing signals"),
|
||||
el("p").append(
|
||||
"Using signals, we split program logic into the three parts.",
|
||||
" Firstly (α), we create a variable (constant) representing reactive",
|
||||
" value. Somewhere later, we can register (β) a logic reacting",
|
||||
" to the signal value changes. Similarly, in a remaining part (γ), we",
|
||||
" can update the signal value."
|
||||
),
|
||||
el("p").append(
|
||||
"All this is just an example of ",
|
||||
el("a", { textContent: "Event-driven programming", href: "https://en.wikipedia.org/wiki/Event-driven_programming", title: "Wikipedia: Event-driven programming" }),
|
||||
" and ",
|
||||
el("a", { textContent: "Publish–subscribe pattern", href: "https://en.wikipedia.org/wiki/Publish%E2%80%93subscribe_pattern", title: "Wikipedia: Publish–subscribe pattern" }),
|
||||
" (compare for example with ", el("a", { textContent: "fpubsub library", href: "https://www.npmjs.com/package/fpubsub", title: "NPM package: fpubsub" }), ").",
|
||||
" All three parts can be in some manner independent and still connected",
|
||||
" to the same reactive entity."
|
||||
),
|
||||
el("p").append(
|
||||
"Signals are implemented in the library as functions. To see current value",
|
||||
" of signal, just call it without any arguments ", el("code", "console.log(signal())"), ".",
|
||||
" To update the signal value, pass any argument ", el("code", "signal('a new value')"), ".",
|
||||
" For listenning the signal value changes, use ", el("code", "S.on(signal, console.log)"), "."
|
||||
),
|
||||
el("p").append(
|
||||
"Similarly to the ", el("code", "on"), " function to register DOM events listener.",
|
||||
" You can use ", el("code", "AbortController"), "/", el("code", "AbortSignal"), " to",
|
||||
" ", el("em", "off"), "/stop listenning. For representing “live” piece of code computation pattern:"
|
||||
),
|
||||
el(example, { src: fileURL("./components/examples/signals/computations-abort.js"), page_id }),
|
||||
el("div", { className: "notice" }).append(
|
||||
el("p", "Mnemonic"),
|
||||
el("ul").append(
|
||||
el("li").append(
|
||||
el("code", "S(<value>)"), " — signal: reactive value",
|
||||
),
|
||||
el("li").append(
|
||||
el("code", "S(()=> <computation>)"), " — signal: reactive value dependent on calculation using other signals",
|
||||
),
|
||||
el("li").append(
|
||||
el("code", "S.on(<signal>, <listener>[, <options>])"), " — listen to the signal value changes",
|
||||
),
|
||||
el("li").append(
|
||||
el("code", "S.clear(...<signals>)"), " — off and clear signals",
|
||||
),
|
||||
el("li").append(
|
||||
el("code", "S(<value>, <actions>)"), " — signal: pattern to create complex reactive objects/arrays",
|
||||
),
|
||||
el("li").append(
|
||||
el("code", "S.action(<signal>, <action-name>, ...<action-arguments>)"), " — invoke an action for given signal"
|
||||
)
|
||||
)
|
||||
),
|
||||
)
|
||||
);
|
||||
}
|
||||
@ -6,7 +6,7 @@ export const pages= [
|
||||
{ id: "index", href: "./", title: "Introduction", description: "Introducing a library." },
|
||||
{ id: "p02-elements", href: "p02-elements", title: "Elements", description: "Basic concepts of elements modifications and creations." },
|
||||
{ id: "p03-events", href: "p03-events", title: "Events and Addons", description: "Using not only events in UI declaratively." },
|
||||
{ id: "p04-signals", href: "p04-signals", title: "Signals and reactivity", description: "Handling reactivity in UI via signals." },
|
||||
{ id: "p04-observables", href: "p04-observables", title: "Observables and reactivity", description: "Handling reactivity in UI via observables." },
|
||||
];
|
||||
/**
|
||||
* @typedef registerClientFile
|
||||
|
||||
1
docs_src/types.d.ts
vendored
1
docs_src/types.d.ts
vendored
@ -25,4 +25,5 @@ declare global{
|
||||
interface ddePublicElementTagNameMap{
|
||||
["custom-test"]: CustomHTMLTestElement;
|
||||
}
|
||||
function test(): ddeHTMLParagraphElement
|
||||
}
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import { style, el, elNS, on, S, scope } from '../exports.js';
|
||||
import { style, el, elNS, on, O, scope } from '../exports.js';
|
||||
const className= style.host(fullNameComponent).css`
|
||||
:host form{
|
||||
display: flex;
|
||||
@ -7,8 +7,8 @@ const className= style.host(fullNameComponent).css`
|
||||
`;
|
||||
export function fullNameComponent(){
|
||||
const labels= [ "Name", "Surname" ];
|
||||
const name= labels.map(_=> S(""));
|
||||
const full_name= S(()=>
|
||||
const name= labels.map(_=> O(""));
|
||||
const full_name= O(()=>
|
||||
name.map(l=> l()).filter(Boolean).join(" ") || "-");
|
||||
scope.host(
|
||||
on.connected(()=> console.log(fullNameComponent)),
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import { style, el, dispatchEvent, on, S, scope } from '../exports.js';
|
||||
import { style, el, dispatchEvent, on, O, scope } from '../exports.js';
|
||||
const className= style.host(todosComponent).css`
|
||||
:host{
|
||||
display: flex;
|
||||
@ -16,23 +16,23 @@ const className= style.host(todosComponent).css`
|
||||
`;
|
||||
/** @param {{ todos: string[] }} */
|
||||
export function todosComponent({ todos= [ "Task A" ] }= {}){
|
||||
const todosS= S(todos.map(t=> S(t)), {
|
||||
add(v){ this.value.push(S(v)); },
|
||||
remove(i){ S.clear(this.value.splice(i, 1)[0]); }
|
||||
const todosS= O(todos.map(t=> O(t)), {
|
||||
add(v){ this.value.push(O(v)); },
|
||||
remove(i){ O.clear(this.value.splice(i, 1)[0]); }
|
||||
});
|
||||
|
||||
const name= "todoName";
|
||||
const onsubmitAdd= on("submit", event=> {
|
||||
const el= event.target.elements[name];
|
||||
event.preventDefault();
|
||||
S.action(todosS, "add", el.value);
|
||||
O.action(todosS, "add", el.value);
|
||||
el.value= "";
|
||||
});
|
||||
const onremove= on("remove", event=>
|
||||
S.action(todosS, "remove", event.detail));
|
||||
O.action(todosS, "remove", event.detail));
|
||||
|
||||
const ul_todos= el("ul").append(
|
||||
S.el(todosS, ts=> ts
|
||||
O.el(todosS, ts=> ts
|
||||
.map((textContent, value)=>
|
||||
el(todoComponent, { textContent, value, className }, onremove))
|
||||
));
|
||||
@ -40,7 +40,7 @@ export function todosComponent({ todos= [ "Task A" ] }= {}){
|
||||
el("div").append(
|
||||
el("h2", "Todos:"),
|
||||
el("h3", "List of todos:"),
|
||||
S.el(todosS, ts=> !ts.length
|
||||
O.el(todosS, ts=> !ts.length
|
||||
? el("p", "No todos yet")
|
||||
: ul_todos),
|
||||
el("p", "Click to the text to edit it.")
|
||||
@ -54,7 +54,7 @@ export function todosComponent({ todos= [ "Task A" ] }= {}){
|
||||
),
|
||||
el("div").append(
|
||||
el("h3", "Output (JSON):"),
|
||||
el("output", S(()=> JSON.stringify(todosS, null, "\t")))
|
||||
el("output", O(()=> JSON.stringify(todosS, null, "\t")))
|
||||
)
|
||||
)
|
||||
}
|
||||
@ -69,13 +69,13 @@ function todoComponent({ textContent, value }){
|
||||
event.stopPropagation();
|
||||
dispatchEvent("remove")(host(), value);
|
||||
});
|
||||
const is_editable= S(false);
|
||||
const is_editable= O(false);
|
||||
const onedited= on("change", ev=> {
|
||||
textContent(ev.target.value);
|
||||
is_editable(false);
|
||||
});
|
||||
return el("li").append(
|
||||
S.el(is_editable, is=> is
|
||||
O.el(is_editable, is=> is
|
||||
? el("input", { value: textContent(), type: "text" }, onedited)
|
||||
: el("span", { textContent, onclick: is_editable.bind(null, true) }),
|
||||
),
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
import { el, on, scope } from "../../index.js";
|
||||
import { S } from "../../signals.js";
|
||||
import { O } from "../../observables.js";
|
||||
|
||||
/**
|
||||
* Compatible with `npx -y web-component-analyzer examples/components/webComponent.js`
|
||||
@ -24,8 +24,8 @@ export class CustomHTMLTestElement extends HTMLElement{
|
||||
on.attributeChanged(e=> console.log(e)),
|
||||
on.disconnected(()=> console.log(CustomHTMLTestElement))
|
||||
);
|
||||
const name= S.attribute("name");
|
||||
const preName= S.attribute("pre-name");
|
||||
const name= O.attribute("name");
|
||||
const preName= O.attribute("pre-name");
|
||||
|
||||
console.log({ name, test, preName});
|
||||
return el("p").append(
|
||||
|
||||
@ -1,10 +1,10 @@
|
||||
import * as dde_dom from "../index.js";
|
||||
export * from "../index.js";
|
||||
import * as dde_s from "../signals.js";
|
||||
export * from "../signals.js";
|
||||
import * as dde_s from "../observables.js";
|
||||
export * from "../observables.js";
|
||||
Object.assign(globalThis, dde_dom, dde_s);
|
||||
//import * as dde_dom from "../dist/esm-with-signals.js";
|
||||
//export * from "../dist/esm-with-signals.js";
|
||||
//import * as dde_dom from "../dist/esm-with-observables.js";
|
||||
//export * from "../dist/esm-with-observables.js";
|
||||
//Object.assign(globalThis, dde_dom);
|
||||
export const style= createStyle();
|
||||
|
||||
|
||||
2
index-with-observables.d.ts
vendored
Normal file
2
index-with-observables.d.ts
vendored
Normal file
@ -0,0 +1,2 @@
|
||||
export * from "./index";
|
||||
export * from "./observables";
|
||||
2
index-with-observables.js
Normal file
2
index-with-observables.js
Normal file
@ -0,0 +1,2 @@
|
||||
export * from "./index.js";
|
||||
export * from "./observables.js";
|
||||
2
index-with-signals.d.ts
vendored
2
index-with-signals.d.ts
vendored
@ -1,2 +0,0 @@
|
||||
export * from "./index";
|
||||
export * from "./signals";
|
||||
@ -1,2 +0,0 @@
|
||||
export * from "./index.js";
|
||||
export * from "./signals.js";
|
||||
586
index.d.ts
vendored
586
index.d.ts
vendored
@ -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 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>(
|
||||
tag_name: TAG,
|
||||
attrs?: string | Partial<ElementAttributes<ExtendedHTMLElementTagNameMap[TAG]>>,
|
||||
@ -53,7 +53,7 @@ export function el<TAG extends keyof ExtendedHTMLElementTagNameMap>(
|
||||
): ExtendedHTMLElementTagNameMap[TAG]
|
||||
export function el<T>(
|
||||
tag_name?: "<>",
|
||||
): DocumentFragment
|
||||
): ddeDocumentFragment
|
||||
|
||||
export function el<
|
||||
A extends ddeComponentAttributes,
|
||||
@ -67,22 +67,22 @@ export function el(
|
||||
tag_name: string,
|
||||
attrs?: string | Record<string, any>,
|
||||
...addons: ddeElementAddon<HTMLElement>[]
|
||||
): HTMLElement
|
||||
): ddeHTMLElement
|
||||
|
||||
export function elNS(
|
||||
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,
|
||||
attrs?: string | Partial<{ [key in KEYS]: SVGElementTagNameMap[TAG][key] | string | number | boolean }>,
|
||||
...addons: ddeElementAddon<SVGElementTagNameMap[TAG]>[]
|
||||
)=> SVGElementTagNameMap[TAG]
|
||||
attrs?: string | Partial<{ [key in KEYS]: EL[key] | string | number | boolean }>,
|
||||
...addons: ddeElementAddon<EL>[]
|
||||
)=> EL
|
||||
export function elNS(
|
||||
namespace: "http://www.w3.org/1998/Math/MathML"
|
||||
): <TAG extends keyof MathMLElementTagNameMap, KEYS extends keyof MathMLElementTagNameMap[TAG] & { d: string }>(
|
||||
tag_name: TAG,
|
||||
attrs?: string | Partial<{ [key in KEYS]: MathMLElementTagNameMap[TAG][key] | string | number | boolean }>,
|
||||
...addons: ddeElementAddon<MathMLElementTagNameMap[TAG]>[]
|
||||
)=> MathMLElementTagNameMap[TAG]
|
||||
)=> ddeMathMLElement
|
||||
export function elNS(
|
||||
namespace: string
|
||||
): (
|
||||
@ -92,6 +92,7 @@ export function elNS(
|
||||
)=> SupportedElement
|
||||
|
||||
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):
|
||||
(element: SupportedElement, data?: any)=> void;
|
||||
@ -151,10 +152,10 @@ export const scope: {
|
||||
preventDefault<T extends boolean>(prevent: T): T,
|
||||
/**
|
||||
* This represents reference to the current host element — `scope.host()`.
|
||||
* It can be also used to register Addon (function to be called when component is initized)
|
||||
* It can be also used to register Addon(s) (functions to be called when component is initized)
|
||||
* — `scope.host(on.connected(console.log))`.
|
||||
* */
|
||||
host: ddeElementAddon<any>,
|
||||
host: (...addons: ddeElementAddon<any>[])=> HTMLElement,
|
||||
|
||||
state: Scope[],
|
||||
/** Adds new child scope. All attributes are inherited by default. */
|
||||
@ -165,297 +166,280 @@ export const scope: {
|
||||
pop(): ReturnType<Array<Scope>["pop"]>,
|
||||
};
|
||||
|
||||
/*
|
||||
* 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
|
||||
* */
|
||||
/* TypeScript MEH // TODO for SVG */
|
||||
type ddeAppend<el>= (...nodes: (Node | string)[])=> el;
|
||||
declare global{
|
||||
interface HTMLAnchorElement{
|
||||
/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */
|
||||
append: ddeAppend<HTMLAnchorElement>;
|
||||
}
|
||||
interface HTMLElement{
|
||||
/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */
|
||||
append: ddeAppend<HTMLElement>;
|
||||
}
|
||||
interface HTMLAreaElement{
|
||||
/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */
|
||||
append: ddeAppend<HTMLAreaElement>;
|
||||
}
|
||||
interface HTMLAudioElement{
|
||||
/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */
|
||||
append: ddeAppend<HTMLAudioElement>;
|
||||
}
|
||||
interface HTMLBaseElement{
|
||||
/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */
|
||||
append: ddeAppend<HTMLBaseElement>;
|
||||
}
|
||||
interface HTMLQuoteElement{
|
||||
/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */
|
||||
append: ddeAppend<HTMLQuoteElement>;
|
||||
}
|
||||
interface HTMLBodyElement{
|
||||
/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */
|
||||
append: ddeAppend<HTMLBodyElement>;
|
||||
}
|
||||
interface HTMLBRElement{
|
||||
/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */
|
||||
append: ddeAppend<HTMLBRElement>;
|
||||
}
|
||||
interface HTMLButtonElement{
|
||||
/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */
|
||||
append: ddeAppend<HTMLButtonElement>;
|
||||
}
|
||||
interface HTMLCanvasElement{
|
||||
/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */
|
||||
append: ddeAppend<HTMLCanvasElement>;
|
||||
}
|
||||
interface HTMLTableCaptionElement{
|
||||
/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */
|
||||
append: ddeAppend<HTMLTableCaptionElement>;
|
||||
}
|
||||
interface HTMLTableColElement{
|
||||
/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */
|
||||
append: ddeAppend<HTMLTableColElement>;
|
||||
}
|
||||
interface HTMLTableColElement{
|
||||
/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */
|
||||
append: ddeAppend<HTMLTableColElement>;
|
||||
}
|
||||
interface HTMLDataElement{
|
||||
/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */
|
||||
append: ddeAppend<HTMLDataElement>;
|
||||
}
|
||||
interface HTMLDataListElement{
|
||||
/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */
|
||||
append: ddeAppend<HTMLDataListElement>;
|
||||
}
|
||||
interface HTMLModElement{
|
||||
/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */
|
||||
append: ddeAppend<HTMLModElement>;
|
||||
}
|
||||
interface HTMLDetailsElement{
|
||||
/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */
|
||||
append: ddeAppend<HTMLDetailsElement>;
|
||||
}
|
||||
interface HTMLDialogElement{
|
||||
/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */
|
||||
append: ddeAppend<HTMLDialogElement>;
|
||||
}
|
||||
interface HTMLDivElement{
|
||||
/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */
|
||||
append: ddeAppend<HTMLDivElement>;
|
||||
}
|
||||
interface HTMLDListElement{
|
||||
/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */
|
||||
append: ddeAppend<HTMLDListElement>;
|
||||
}
|
||||
interface HTMLEmbedElement{
|
||||
/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */
|
||||
append: ddeAppend<HTMLEmbedElement>;
|
||||
}
|
||||
interface HTMLFieldSetElement{
|
||||
/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */
|
||||
append: ddeAppend<HTMLFieldSetElement>;
|
||||
}
|
||||
interface HTMLFormElement{
|
||||
/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */
|
||||
append: ddeAppend<HTMLFormElement>;
|
||||
}
|
||||
interface HTMLHeadingElement{
|
||||
/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */
|
||||
append: ddeAppend<HTMLHeadingElement>;
|
||||
}
|
||||
interface HTMLHeadElement{
|
||||
/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */
|
||||
append: ddeAppend<HTMLHeadElement>;
|
||||
}
|
||||
interface HTMLHRElement{
|
||||
/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */
|
||||
append: ddeAppend<HTMLHRElement>;
|
||||
}
|
||||
interface HTMLHtmlElement{
|
||||
/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */
|
||||
append: ddeAppend<HTMLHtmlElement>;
|
||||
}
|
||||
interface HTMLIFrameElement{
|
||||
/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */
|
||||
append: ddeAppend<HTMLIFrameElement>;
|
||||
}
|
||||
interface HTMLImageElement{
|
||||
/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */
|
||||
append: ddeAppend<HTMLImageElement>;
|
||||
}
|
||||
interface HTMLInputElement{
|
||||
/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */
|
||||
append: ddeAppend<HTMLInputElement>;
|
||||
}
|
||||
interface HTMLLabelElement{
|
||||
/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */
|
||||
append: ddeAppend<HTMLLabelElement>;
|
||||
}
|
||||
interface HTMLLegendElement{
|
||||
/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */
|
||||
append: ddeAppend<HTMLLegendElement>;
|
||||
}
|
||||
interface HTMLLIElement{
|
||||
/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */
|
||||
append: ddeAppend<HTMLLIElement>;
|
||||
}
|
||||
interface HTMLLinkElement{
|
||||
/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */
|
||||
append: ddeAppend<HTMLLinkElement>;
|
||||
}
|
||||
interface HTMLMapElement{
|
||||
/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */
|
||||
append: ddeAppend<HTMLMapElement>;
|
||||
}
|
||||
interface HTMLMenuElement{
|
||||
/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */
|
||||
append: ddeAppend<HTMLMenuElement>;
|
||||
}
|
||||
interface HTMLMetaElement{
|
||||
/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */
|
||||
append: ddeAppend<HTMLMetaElement>;
|
||||
}
|
||||
interface HTMLMeterElement{
|
||||
/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */
|
||||
append: ddeAppend<HTMLMeterElement>;
|
||||
}
|
||||
interface HTMLObjectElement{
|
||||
/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */
|
||||
append: ddeAppend<HTMLObjectElement>;
|
||||
}
|
||||
interface HTMLOListElement{
|
||||
/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */
|
||||
append: ddeAppend<HTMLOListElement>;
|
||||
}
|
||||
interface HTMLOptGroupElement{
|
||||
/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */
|
||||
append: ddeAppend<HTMLOptGroupElement>;
|
||||
}
|
||||
interface HTMLOptionElement{
|
||||
/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */
|
||||
append: ddeAppend<HTMLOptionElement>;
|
||||
}
|
||||
interface HTMLOutputElement{
|
||||
/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */
|
||||
append: ddeAppend<HTMLOutputElement>;
|
||||
}
|
||||
interface HTMLParagraphElement{
|
||||
/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */
|
||||
append: ddeAppend<HTMLParagraphElement>;
|
||||
}
|
||||
interface HTMLPictureElement{
|
||||
/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */
|
||||
append: ddeAppend<HTMLPictureElement>;
|
||||
}
|
||||
interface HTMLPreElement{
|
||||
/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */
|
||||
append: ddeAppend<HTMLPreElement>;
|
||||
}
|
||||
interface HTMLProgressElement{
|
||||
/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */
|
||||
append: ddeAppend<HTMLProgressElement>;
|
||||
}
|
||||
interface HTMLScriptElement{
|
||||
/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */
|
||||
append: ddeAppend<HTMLScriptElement>;
|
||||
}
|
||||
interface HTMLSelectElement{
|
||||
/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */
|
||||
append: ddeAppend<HTMLSelectElement>;
|
||||
}
|
||||
interface HTMLSlotElement{
|
||||
/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */
|
||||
append: ddeAppend<HTMLSlotElement>;
|
||||
}
|
||||
interface HTMLSourceElement{
|
||||
/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */
|
||||
append: ddeAppend<HTMLSourceElement>;
|
||||
}
|
||||
interface HTMLSpanElement{
|
||||
/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */
|
||||
append: ddeAppend<HTMLSpanElement>;
|
||||
}
|
||||
interface HTMLStyleElement{
|
||||
/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */
|
||||
append: ddeAppend<HTMLStyleElement>;
|
||||
}
|
||||
interface HTMLTableElement{
|
||||
/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */
|
||||
append: ddeAppend<HTMLTableElement>;
|
||||
}
|
||||
interface HTMLTableSectionElement{
|
||||
/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */
|
||||
append: ddeAppend<HTMLTableSectionElement>;
|
||||
}
|
||||
interface HTMLTableCellElement{
|
||||
/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */
|
||||
append: ddeAppend<HTMLTableCellElement>;
|
||||
}
|
||||
interface HTMLTemplateElement{
|
||||
/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */
|
||||
append: ddeAppend<HTMLTemplateElement>;
|
||||
}
|
||||
interface HTMLTextAreaElement{
|
||||
/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */
|
||||
append: ddeAppend<HTMLTextAreaElement>;
|
||||
}
|
||||
interface HTMLTableCellElement{
|
||||
/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */
|
||||
append: ddeAppend<HTMLTableCellElement>;
|
||||
}
|
||||
interface HTMLTimeElement{
|
||||
/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */
|
||||
append: ddeAppend<HTMLTimeElement>;
|
||||
}
|
||||
interface HTMLTitleElement{
|
||||
/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */
|
||||
append: ddeAppend<HTMLTitleElement>;
|
||||
}
|
||||
interface HTMLTableRowElement{
|
||||
/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */
|
||||
append: ddeAppend<HTMLTableRowElement>;
|
||||
}
|
||||
interface HTMLTrackElement{
|
||||
/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */
|
||||
append: ddeAppend<HTMLTrackElement>;
|
||||
}
|
||||
interface HTMLUListElement{
|
||||
/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */
|
||||
append: ddeAppend<HTMLUListElement>;
|
||||
}
|
||||
interface HTMLVideoElement{
|
||||
/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */
|
||||
append: ddeAppend<HTMLVideoElement>;
|
||||
}
|
||||
interface DocumentFragment{
|
||||
/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */
|
||||
append: ddeAppend<DocumentFragment>;
|
||||
}
|
||||
interface SVGElement{
|
||||
/** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */
|
||||
append: ddeAppend<SVGElement>;
|
||||
}
|
||||
interface ddeDocumentFragment extends DocumentFragment{ append: ddeAppend<ddeDocumentFragment>; }
|
||||
interface ddeHTMLElement extends HTMLElement{ append: ddeAppend<ddeHTMLElement>; }
|
||||
interface ddeSVGElement extends SVGElement{ append: ddeAppend<ddeSVGElement>; }
|
||||
interface ddeMathMLElement extends MathMLElement{ append: ddeAppend<ddeMathMLElement>; }
|
||||
|
||||
interface ddeHTMLElementTagNameMap {
|
||||
"a": ddeHTMLAnchorElement;
|
||||
"area": ddeHTMLAreaElement;
|
||||
"audio": ddeHTMLAudioElement;
|
||||
"base": ddeHTMLBaseElement;
|
||||
"blockquote": ddeHTMLQuoteElement;
|
||||
"body": ddeHTMLBodyElement;
|
||||
"br": ddeHTMLBRElement;
|
||||
"button": ddeHTMLButtonElement;
|
||||
"canvas": ddeHTMLCanvasElement;
|
||||
"caption": ddeHTMLTableCaptionElement;
|
||||
"col": ddeHTMLTableColElement;
|
||||
"colgroup": ddeHTMLTableColElement;
|
||||
"data": ddeHTMLDataElement;
|
||||
"datalist": ddeHTMLDataListElement;
|
||||
"del": ddeHTMLModElement;
|
||||
"details": ddeHTMLDetailsElement;
|
||||
"dialog": ddeHTMLDialogElement;
|
||||
"div": ddeHTMLDivElement;
|
||||
"dl": ddeHTMLDListElement;
|
||||
"embed": ddeHTMLEmbedElement;
|
||||
"fieldset": ddeHTMLFieldSetElement;
|
||||
"form": ddeHTMLFormElement;
|
||||
"h1": ddeHTMLHeadingElement;
|
||||
"h2": ddeHTMLHeadingElement;
|
||||
"h3": ddeHTMLHeadingElement;
|
||||
"h4": ddeHTMLHeadingElement;
|
||||
"h5": ddeHTMLHeadingElement;
|
||||
"h6": ddeHTMLHeadingElement;
|
||||
"head": ddeHTMLHeadElement;
|
||||
"hr": ddeHTMLHRElement;
|
||||
"html": ddeHTMLHtmlElement;
|
||||
"iframe": ddeHTMLIFrameElement;
|
||||
"img": ddeHTMLImageElement;
|
||||
"input": ddeHTMLInputElement;
|
||||
"ins": ddeHTMLModElement;
|
||||
"label": ddeHTMLLabelElement;
|
||||
"legend": ddeHTMLLegendElement;
|
||||
"li": ddeHTMLLIElement;
|
||||
"link": ddeHTMLLinkElement;
|
||||
"map": ddeHTMLMapElement;
|
||||
"menu": ddeHTMLMenuElement;
|
||||
"meta": ddeHTMLMetaElement;
|
||||
"meter": ddeHTMLMeterElement;
|
||||
"object": ddeHTMLObjectElement;
|
||||
"ol": ddeHTMLOListElement;
|
||||
"optgroup": ddeHTMLOptGroupElement;
|
||||
"option": ddeHTMLOptionElement;
|
||||
"output": ddeHTMLOutputElement;
|
||||
"p": ddeHTMLParagraphElement;
|
||||
"picture": ddeHTMLPictureElement;
|
||||
"pre": ddeHTMLPreElement;
|
||||
"progress": ddeHTMLProgressElement;
|
||||
"q": ddeHTMLQuoteElement;
|
||||
"script": ddeHTMLScriptElement;
|
||||
"select": ddeHTMLSelectElement;
|
||||
"slot": ddeHTMLSlotElement;
|
||||
"source": ddeHTMLSourceElement;
|
||||
"span": ddeHTMLSpanElement;
|
||||
"style": ddeHTMLStyleElement;
|
||||
"table": ddeHTMLTableElement;
|
||||
"tbody": ddeHTMLTableSectionElement;
|
||||
"td": ddeHTMLTableCellElement;
|
||||
"template": ddeHTMLTemplateElement;
|
||||
"textarea": ddeHTMLTextAreaElement;
|
||||
"tfoot": ddeHTMLTableSectionElement;
|
||||
"th": ddeHTMLTableCellElement;
|
||||
"thead": ddeHTMLTableSectionElement;
|
||||
"time": ddeHTMLTimeElement;
|
||||
"title": ddeHTMLTitleElement;
|
||||
"tr": ddeHTMLTableRowElement;
|
||||
"track": ddeHTMLTrackElement;
|
||||
"ul": ddeHTMLUListElement;
|
||||
"video": ddeHTMLVideoElement;
|
||||
}
|
||||
interface ddeHTMLAnchorElement extends HTMLAnchorElement{ append: ddeAppend<ddeHTMLAnchorElement>; }
|
||||
interface ddeHTMLAreaElement extends HTMLAreaElement{ append: ddeAppend<ddeHTMLAreaElement>; }
|
||||
interface ddeHTMLAudioElement extends HTMLAudioElement{ append: ddeAppend<ddeHTMLAudioElement>; }
|
||||
interface ddeHTMLBaseElement extends HTMLBaseElement{ append: ddeAppend<ddeHTMLBaseElement>; }
|
||||
interface ddeHTMLQuoteElement extends HTMLQuoteElement{ append: ddeAppend<ddeHTMLQuoteElement>; }
|
||||
interface ddeHTMLBodyElement extends HTMLBodyElement{ append: ddeAppend<ddeHTMLBodyElement>; }
|
||||
interface ddeHTMLBRElement extends HTMLBRElement{ append: ddeAppend<ddeHTMLBRElement>; }
|
||||
interface ddeHTMLButtonElement extends HTMLButtonElement{ append: ddeAppend<ddeHTMLButtonElement>; }
|
||||
interface ddeHTMLCanvasElement extends HTMLCanvasElement{ append: ddeAppend<ddeHTMLCanvasElement>; }
|
||||
interface ddeHTMLTableCaptionElement extends HTMLTableCaptionElement{ append: ddeAppend<ddeHTMLTableCaptionElement>; }
|
||||
interface ddeHTMLTableColElement extends HTMLTableColElement{ append: ddeAppend<ddeHTMLTableColElement>; }
|
||||
interface ddeHTMLTableColElement extends HTMLTableColElement{ append: ddeAppend<ddeHTMLTableColElement>; }
|
||||
interface ddeHTMLDataElement extends HTMLDataElement{ append: ddeAppend<ddeHTMLDataElement>; }
|
||||
interface ddeHTMLDataListElement extends HTMLDataListElement{ append: ddeAppend<ddeHTMLDataListElement>; }
|
||||
interface ddeHTMLModElement extends HTMLModElement{ append: ddeAppend<ddeHTMLModElement>; }
|
||||
interface ddeHTMLDetailsElement extends HTMLDetailsElement{ append: ddeAppend<ddeHTMLDetailsElement>; }
|
||||
interface ddeHTMLDialogElement extends HTMLDialogElement{ append: ddeAppend<ddeHTMLDialogElement>; }
|
||||
interface ddeHTMLDivElement extends HTMLDivElement{ append: ddeAppend<ddeHTMLDivElement>; }
|
||||
interface ddeHTMLDListElement extends HTMLDListElement{ append: ddeAppend<ddeHTMLDListElement>; }
|
||||
interface ddeHTMLEmbedElement extends HTMLEmbedElement{ append: ddeAppend<ddeHTMLEmbedElement>; }
|
||||
interface ddeHTMLFieldSetElement extends HTMLFieldSetElement{ append: ddeAppend<ddeHTMLFieldSetElement>; }
|
||||
interface ddeHTMLFormElement extends HTMLFormElement{ append: ddeAppend<ddeHTMLFormElement>; }
|
||||
interface ddeHTMLHeadingElement extends HTMLHeadingElement{ append: ddeAppend<ddeHTMLHeadingElement>; }
|
||||
interface ddeHTMLHeadElement extends HTMLHeadElement{ append: ddeAppend<ddeHTMLHeadElement>; }
|
||||
interface ddeHTMLHRElement extends HTMLHRElement{ append: ddeAppend<ddeHTMLHRElement>; }
|
||||
interface ddeHTMLHtmlElement extends HTMLHtmlElement{ append: ddeAppend<ddeHTMLHtmlElement>; }
|
||||
interface ddeHTMLIFrameElement extends HTMLIFrameElement{ append: ddeAppend<ddeHTMLIFrameElement>; }
|
||||
interface ddeHTMLImageElement extends HTMLImageElement{ append: ddeAppend<ddeHTMLImageElement>; }
|
||||
interface ddeHTMLInputElement extends HTMLInputElement{ append: ddeAppend<ddeHTMLInputElement>; }
|
||||
interface ddeHTMLLabelElement extends HTMLLabelElement{ append: ddeAppend<ddeHTMLLabelElement>; }
|
||||
interface ddeHTMLLegendElement extends HTMLLegendElement{ append: ddeAppend<ddeHTMLLegendElement>; }
|
||||
interface ddeHTMLLIElement extends HTMLLIElement{ append: ddeAppend<ddeHTMLLIElement>; }
|
||||
interface ddeHTMLLinkElement extends HTMLLinkElement{ append: ddeAppend<ddeHTMLLinkElement>; }
|
||||
interface ddeHTMLMapElement extends HTMLMapElement{ append: ddeAppend<ddeHTMLMapElement>; }
|
||||
interface ddeHTMLMenuElement extends HTMLMenuElement{ append: ddeAppend<ddeHTMLMenuElement>; }
|
||||
interface ddeHTMLMetaElement extends HTMLMetaElement{ append: ddeAppend<ddeHTMLMetaElement>; }
|
||||
interface ddeHTMLMeterElement extends HTMLMeterElement{ append: ddeAppend<ddeHTMLMeterElement>; }
|
||||
interface ddeHTMLObjectElement extends HTMLObjectElement{ append: ddeAppend<ddeHTMLObjectElement>; }
|
||||
interface ddeHTMLOListElement extends HTMLOListElement{ append: ddeAppend<ddeHTMLOListElement>; }
|
||||
interface ddeHTMLOptGroupElement extends HTMLOptGroupElement{ append: ddeAppend<ddeHTMLOptGroupElement>; }
|
||||
interface ddeHTMLOptionElement extends HTMLOptionElement{ append: ddeAppend<ddeHTMLOptionElement>; }
|
||||
interface ddeHTMLOutputElement extends HTMLOutputElement{ append: ddeAppend<ddeHTMLOutputElement>; }
|
||||
interface ddeHTMLParagraphElement extends HTMLParagraphElement{ append: ddeAppend<ddeHTMLParagraphElement>; }
|
||||
interface ddeHTMLPictureElement extends HTMLPictureElement{ append: ddeAppend<ddeHTMLPictureElement>; }
|
||||
interface ddeHTMLPreElement extends HTMLPreElement{ append: ddeAppend<ddeHTMLPreElement>; }
|
||||
interface ddeHTMLProgressElement extends HTMLProgressElement{ append: ddeAppend<ddeHTMLProgressElement>; }
|
||||
interface ddeHTMLScriptElement extends HTMLScriptElement{ append: ddeAppend<ddeHTMLScriptElement>; }
|
||||
interface ddeHTMLSelectElement extends HTMLSelectElement{ append: ddeAppend<ddeHTMLSelectElement>; }
|
||||
interface ddeHTMLSlotElement extends HTMLSlotElement{ append: ddeAppend<ddeHTMLSlotElement>; }
|
||||
interface ddeHTMLSourceElement extends HTMLSourceElement{ append: ddeAppend<ddeHTMLSourceElement>; }
|
||||
interface ddeHTMLSpanElement extends HTMLSpanElement{ append: ddeAppend<ddeHTMLSpanElement>; }
|
||||
interface ddeHTMLStyleElement extends HTMLStyleElement{ append: ddeAppend<ddeHTMLStyleElement>; }
|
||||
interface ddeHTMLTableElement extends HTMLTableElement{ append: ddeAppend<ddeHTMLTableElement>; }
|
||||
interface ddeHTMLTableSectionElement extends HTMLTableSectionElement{ append: ddeAppend<ddeHTMLTableSectionElement>; }
|
||||
interface ddeHTMLTableCellElement extends HTMLTableCellElement{ append: ddeAppend<ddeHTMLTableCellElement>; }
|
||||
interface ddeHTMLTemplateElement extends HTMLTemplateElement{ append: ddeAppend<ddeHTMLTemplateElement>; }
|
||||
interface ddeHTMLTextAreaElement extends HTMLTextAreaElement{ append: ddeAppend<ddeHTMLTextAreaElement>; }
|
||||
interface ddeHTMLTableCellElement extends HTMLTableCellElement{ append: ddeAppend<ddeHTMLTableCellElement>; }
|
||||
interface ddeHTMLTimeElement extends HTMLTimeElement{ append: ddeAppend<ddeHTMLTimeElement>; }
|
||||
interface ddeHTMLTitleElement extends HTMLTitleElement{ append: ddeAppend<ddeHTMLTitleElement>; }
|
||||
interface ddeHTMLTableRowElement extends HTMLTableRowElement{ append: ddeAppend<ddeHTMLTableRowElement>; }
|
||||
interface ddeHTMLTrackElement extends HTMLTrackElement{ append: ddeAppend<ddeHTMLTrackElement>; }
|
||||
interface ddeHTMLUListElement extends HTMLUListElement{ append: ddeAppend<ddeHTMLUListElement>; }
|
||||
interface ddeHTMLVideoElement extends HTMLVideoElement{ append: ddeAppend<ddeHTMLVideoElement>; }
|
||||
|
||||
interface ddeSVGElementTagNameMap {
|
||||
"a": ddeSVGAElement;
|
||||
"animate": ddeSVGAnimateElement;
|
||||
"animateMotion": ddeSVGAnimateMotionElement;
|
||||
"animateTransform": ddeSVGAnimateTransformElement;
|
||||
"circle": ddeSVGCircleElement;
|
||||
"clipPath": ddeSVGClipPathElement;
|
||||
"defs": ddeSVGDefsElement;
|
||||
"desc": ddeSVGDescElement;
|
||||
"ellipse": ddeSVGEllipseElement;
|
||||
"feBlend": ddeSVGFEBlendElement;
|
||||
"feColorMatrix": ddeSVGFEColorMatrixElement;
|
||||
"feComponentTransfer": ddeSVGFEComponentTransferElement;
|
||||
"feComposite": ddeSVGFECompositeElement;
|
||||
"feConvolveMatrix": ddeSVGFEConvolveMatrixElement;
|
||||
"feDiffuseLighting": ddeSVGFEDiffuseLightingElement;
|
||||
"feDisplacementMap": ddeSVGFEDisplacementMapElement;
|
||||
"feDistantLight": ddeSVGFEDistantLightElement;
|
||||
"feDropShadow": ddeSVGFEDropShadowElement;
|
||||
"feFlood": ddeSVGFEFloodElement;
|
||||
"feFuncA": ddeSVGFEFuncAElement;
|
||||
"feFuncB": ddeSVGFEFuncBElement;
|
||||
"feFuncG": ddeSVGFEFuncGElement;
|
||||
"feFuncR": ddeSVGFEFuncRElement;
|
||||
"feGaussianBlur": ddeSVGFEGaussianBlurElement;
|
||||
"feImage": ddeSVGFEImageElement;
|
||||
"feMerge": ddeSVGFEMergeElement;
|
||||
"feMergeNode": ddeSVGFEMergeNodeElement;
|
||||
"feMorphology": ddeSVGFEMorphologyElement;
|
||||
"feOffset": ddeSVGFEOffsetElement;
|
||||
"fePointLight": ddeSVGFEPointLightElement;
|
||||
"feSpecularLighting": ddeSVGFESpecularLightingElement;
|
||||
"feSpotLight": ddeSVGFESpotLightElement;
|
||||
"feTile": ddeSVGFETileElement;
|
||||
"feTurbulence": ddeSVGFETurbulenceElement;
|
||||
"filter": ddeSVGFilterElement;
|
||||
"foreignObject": ddeSVGForeignObjectElement;
|
||||
"g": ddeSVGGElement;
|
||||
"image": ddeSVGImageElement;
|
||||
"line": ddeSVGLineElement;
|
||||
"linearGradient": ddeSVGLinearGradientElement;
|
||||
"marker": ddeSVGMarkerElement;
|
||||
"mask": ddeSVGMaskElement;
|
||||
"metadata": ddeSVGMetadataElement;
|
||||
"mpath": ddeSVGMPathElement;
|
||||
"path": ddeSVGPathElement;
|
||||
"pattern": ddeSVGPatternElement;
|
||||
"polygon": ddeSVGPolygonElement;
|
||||
"polyline": ddeSVGPolylineElement;
|
||||
"radialGradient": ddeSVGRadialGradientElement;
|
||||
"rect": ddeSVGRectElement;
|
||||
"script": ddeSVGScriptElement;
|
||||
"set": ddeSVGSetElement;
|
||||
"stop": ddeSVGStopElement;
|
||||
"style": ddeSVGStyleElement;
|
||||
"svg": ddeSVGSVGElement;
|
||||
"switch": ddeSVGSwitchElement;
|
||||
"symbol": ddeSVGSymbolElement;
|
||||
"text": ddeSVGTextElement;
|
||||
"textPath": ddeSVGTextPathElement;
|
||||
"title": ddeSVGTitleElement;
|
||||
"tspan": ddeSVGTSpanElement;
|
||||
"use": ddeSVGUseElement;
|
||||
"view": ddeSVGViewElement;
|
||||
}
|
||||
interface ddeSVGAElement extends SVGAElement{ append: ddeAppend<ddeSVGAElement>; }
|
||||
interface ddeSVGAnimateElement extends SVGAnimateElement{ append: ddeAppend<ddeSVGAnimateElement>; }
|
||||
interface ddeSVGAnimateMotionElement extends SVGAnimateMotionElement{ append: ddeAppend<ddeSVGAnimateMotionElement>; }
|
||||
interface ddeSVGAnimateTransformElement extends SVGAnimateTransformElement{ append: ddeAppend<ddeSVGAnimateTransformElement>; }
|
||||
interface ddeSVGCircleElement extends SVGCircleElement{ append: ddeAppend<ddeSVGCircleElement>; }
|
||||
interface ddeSVGClipPathElement extends SVGClipPathElement{ append: ddeAppend<ddeSVGClipPathElement>; }
|
||||
interface ddeSVGDefsElement extends SVGDefsElement{ append: ddeAppend<ddeSVGDefsElement>; }
|
||||
interface ddeSVGDescElement extends SVGDescElement{ append: ddeAppend<ddeSVGDescElement>; }
|
||||
interface ddeSVGEllipseElement extends SVGEllipseElement{ append: ddeAppend<ddeSVGEllipseElement>; }
|
||||
interface ddeSVGFEBlendElement extends SVGFEBlendElement{ append: ddeAppend<ddeSVGFEBlendElement>; }
|
||||
interface ddeSVGFEColorMatrixElement extends SVGFEColorMatrixElement{ append: ddeAppend<ddeSVGFEColorMatrixElement>; }
|
||||
interface ddeSVGFEComponentTransferElement extends SVGFEComponentTransferElement{ append: ddeAppend<ddeSVGFEComponentTransferElement>; }
|
||||
interface ddeSVGFECompositeElement extends SVGFECompositeElement{ append: ddeAppend<ddeSVGFECompositeElement>; }
|
||||
interface ddeSVGFEConvolveMatrixElement extends SVGFEConvolveMatrixElement{ append: ddeAppend<ddeSVGFEConvolveMatrixElement>; }
|
||||
interface ddeSVGFEDiffuseLightingElement extends SVGFEDiffuseLightingElement{ append: ddeAppend<ddeSVGFEDiffuseLightingElement>; }
|
||||
interface ddeSVGFEDisplacementMapElement extends SVGFEDisplacementMapElement{ append: ddeAppend<ddeSVGFEDisplacementMapElement>; }
|
||||
interface ddeSVGFEDistantLightElement extends SVGFEDistantLightElement{ append: ddeAppend<ddeSVGFEDistantLightElement>; }
|
||||
interface ddeSVGFEDropShadowElement extends SVGFEDropShadowElement{ append: ddeAppend<ddeSVGFEDropShadowElement>; }
|
||||
interface ddeSVGFEFloodElement extends SVGFEFloodElement{ append: ddeAppend<ddeSVGFEFloodElement>; }
|
||||
interface ddeSVGFEFuncAElement extends SVGFEFuncAElement{ append: ddeAppend<ddeSVGFEFuncAElement>; }
|
||||
interface ddeSVGFEFuncBElement extends SVGFEFuncBElement{ append: ddeAppend<ddeSVGFEFuncBElement>; }
|
||||
interface ddeSVGFEFuncGElement extends SVGFEFuncGElement{ append: ddeAppend<ddeSVGFEFuncGElement>; }
|
||||
interface ddeSVGFEFuncRElement extends SVGFEFuncRElement{ append: ddeAppend<ddeSVGFEFuncRElement>; }
|
||||
interface ddeSVGFEGaussianBlurElement extends SVGFEGaussianBlurElement{ append: ddeAppend<ddeSVGFEGaussianBlurElement>; }
|
||||
interface ddeSVGFEImageElement extends SVGFEImageElement{ append: ddeAppend<ddeSVGFEImageElement>; }
|
||||
interface ddeSVGFEMergeElement extends SVGFEMergeElement{ append: ddeAppend<ddeSVGFEMergeElement>; }
|
||||
interface ddeSVGFEMergeNodeElement extends SVGFEMergeNodeElement{ append: ddeAppend<ddeSVGFEMergeNodeElement>; }
|
||||
interface ddeSVGFEMorphologyElement extends SVGFEMorphologyElement{ append: ddeAppend<ddeSVGFEMorphologyElement>; }
|
||||
interface ddeSVGFEOffsetElement extends SVGFEOffsetElement{ append: ddeAppend<ddeSVGFEOffsetElement>; }
|
||||
interface ddeSVGFEPointLightElement extends SVGFEPointLightElement{ append: ddeAppend<ddeSVGFEPointLightElement>; }
|
||||
interface ddeSVGFESpecularLightingElement extends SVGFESpecularLightingElement{ append: ddeAppend<ddeSVGFESpecularLightingElement>; }
|
||||
interface ddeSVGFESpotLightElement extends SVGFESpotLightElement{ append: ddeAppend<ddeSVGFESpotLightElement>; }
|
||||
interface ddeSVGFETileElement extends SVGFETileElement{ append: ddeAppend<ddeSVGFETileElement>; }
|
||||
interface ddeSVGFETurbulenceElement extends SVGFETurbulenceElement{ append: ddeAppend<ddeSVGFETurbulenceElement>; }
|
||||
interface ddeSVGFilterElement extends SVGFilterElement{ append: ddeAppend<ddeSVGFilterElement>; }
|
||||
interface ddeSVGForeignObjectElement extends SVGForeignObjectElement{ append: ddeAppend<ddeSVGForeignObjectElement>; }
|
||||
interface ddeSVGGElement extends SVGGElement{ append: ddeAppend<ddeSVGGElement>; }
|
||||
interface ddeSVGImageElement extends SVGImageElement{ append: ddeAppend<ddeSVGImageElement>; }
|
||||
interface ddeSVGLineElement extends SVGLineElement{ append: ddeAppend<ddeSVGLineElement>; }
|
||||
interface ddeSVGLinearGradientElement extends SVGLinearGradientElement{ append: ddeAppend<ddeSVGLinearGradientElement>; }
|
||||
interface ddeSVGMarkerElement extends SVGMarkerElement{ append: ddeAppend<ddeSVGMarkerElement>; }
|
||||
interface ddeSVGMaskElement extends SVGMaskElement{ append: ddeAppend<ddeSVGMaskElement>; }
|
||||
interface ddeSVGMetadataElement extends SVGMetadataElement{ append: ddeAppend<ddeSVGMetadataElement>; }
|
||||
interface ddeSVGMPathElement extends SVGMPathElement{ append: ddeAppend<ddeSVGMPathElement>; }
|
||||
interface ddeSVGPathElement extends SVGPathElement{ append: ddeAppend<ddeSVGPathElement>; }
|
||||
interface ddeSVGPatternElement extends SVGPatternElement{ append: ddeAppend<ddeSVGPatternElement>; }
|
||||
interface ddeSVGPolygonElement extends SVGPolygonElement{ append: ddeAppend<ddeSVGPolygonElement>; }
|
||||
interface ddeSVGPolylineElement extends SVGPolylineElement{ append: ddeAppend<ddeSVGPolylineElement>; }
|
||||
interface ddeSVGRadialGradientElement extends SVGRadialGradientElement{ append: ddeAppend<ddeSVGRadialGradientElement>; }
|
||||
interface ddeSVGRectElement extends SVGRectElement{ append: ddeAppend<ddeSVGRectElement>; }
|
||||
interface ddeSVGScriptElement extends SVGScriptElement{ append: ddeAppend<ddeSVGScriptElement>; }
|
||||
interface ddeSVGSetElement extends SVGSetElement{ append: ddeAppend<ddeSVGSetElement>; }
|
||||
interface ddeSVGStopElement extends SVGStopElement{ append: ddeAppend<ddeSVGStopElement>; }
|
||||
interface ddeSVGStyleElement extends SVGStyleElement{ append: ddeAppend<ddeSVGStyleElement>; }
|
||||
interface ddeSVGSVGElement extends SVGSVGElement{ append: ddeAppend<ddeSVGSVGElement>; }
|
||||
interface ddeSVGSwitchElement extends SVGSwitchElement{ append: ddeAppend<ddeSVGSwitchElement>; }
|
||||
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>; }
|
||||
}
|
||||
|
||||
64
observables.d.ts
vendored
Normal file
64
observables.d.ts
vendored
Normal file
@ -0,0 +1,64 @@
|
||||
export type Observable<V, A>= (set?: V)=> V & A;
|
||||
type Action<V>= (this: { value: V }, ...a: any[])=> typeof observable._ | void;
|
||||
type SymbolOnclear= Symbol;
|
||||
type SymbolObservable= Symbol;
|
||||
type Actions<V>= Record<string, Action<V>>;
|
||||
interface observable{
|
||||
_: Symbol
|
||||
/**
|
||||
* Simple example:
|
||||
* ```js
|
||||
* const hello= S("Hello Observable");
|
||||
* ```
|
||||
* …simple todo observable:
|
||||
* ```js
|
||||
* const todos= S([], {
|
||||
* add(v){ this.value.push(S(v)); },
|
||||
* remove(i){ this.value.splice(i, 1); },
|
||||
* [S.symbols.onclear](){ S.clear(...this.value); },
|
||||
* });
|
||||
* ```
|
||||
* …computed observable:
|
||||
* ```js
|
||||
* const name= S("Jan");
|
||||
* const surname= S("Andrle");
|
||||
* const fullname= S(()=> name()+" "+surname());
|
||||
* ```
|
||||
* @param value Initial observable value. Or function computing value from other observables.
|
||||
* @param actions Use to define actions on the observable. Such as add item to the array.
|
||||
* There is also a reserved function `S.symbol.onclear` which is called when the observable is cleared
|
||||
* by `S.clear`.
|
||||
* */
|
||||
<V, A extends Actions<V>>(value: V, actions?: A): Observable<V, A>;
|
||||
/**
|
||||
* Computations observable. This creates a observable which is computed from other observables.
|
||||
* */
|
||||
<V>(computation: ()=> V): Observable<V, {}>
|
||||
action<S extends Observable<any, Actions<any>>, A extends (S extends Observable<any, infer A> ? A : never), N extends keyof A>(
|
||||
observable: S,
|
||||
name: N,
|
||||
...params: A[N] extends (...args: infer P)=> any ? P : never
|
||||
): void;
|
||||
clear(...observables: Observable<any, any>[]): void;
|
||||
on<T>(observable: Observable<T, any>, onchange: (a: T)=> void, options?: AddEventListenerOptions): void;
|
||||
symbols: {
|
||||
observable: SymbolObservable;
|
||||
onclear: SymbolOnclear;
|
||||
}
|
||||
/**
|
||||
* Reactive element, which is rendered based on the given observable.
|
||||
* ```js
|
||||
* S.el(observable, value=> value ? el("b", "True") : el("i", "False"));
|
||||
* S.el(listS, list=> list.map(li=> el("li", li)));
|
||||
* ```
|
||||
* */
|
||||
el<S extends any>(observable: Observable<S, any>, el: (v: S)=> Element | Element[]): DocumentFragment;
|
||||
|
||||
attribute(name: string, initial?: string): Observable<string, {}>;
|
||||
}
|
||||
export const observable: observable;
|
||||
export const O: observable;
|
||||
declare global {
|
||||
type ddeObservable<T, A= {}>= Observable<T, A>;
|
||||
type ddeActions<V>= Actions<V>
|
||||
}
|
||||
4
observables.js
Normal file
4
observables.js
Normal file
@ -0,0 +1,4 @@
|
||||
export { observable, O, isObservable } from "./src/observables-lib.js";
|
||||
import { observables_config } from "./src/observables-lib.js";
|
||||
import { registerReactivity } from "./src/observables-common.js";
|
||||
registerReactivity(observables_config);
|
||||
18
package.json
18
package.json
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "deka-dom-el",
|
||||
"version": "0.7.1",
|
||||
"version": "0.7.2",
|
||||
"description": "A low-code library that simplifies the creation of native DOM elements/components using small wrappers and tweaks.",
|
||||
"author": "Jan Andrle <andrle.jan@centrum.cz>",
|
||||
"license": "MIT",
|
||||
@ -24,13 +24,13 @@
|
||||
"import": "./jsdom.js",
|
||||
"types": "./jsdom.d.ts"
|
||||
},
|
||||
"./signals": {
|
||||
"import": "./signals.js",
|
||||
"types": "./signals.d.ts"
|
||||
"./observables": {
|
||||
"import": "./observables.js",
|
||||
"types": "./observables.d.ts"
|
||||
},
|
||||
"./src/signals-lib": {
|
||||
"import": "./src/signals-lib.js",
|
||||
"types": "./src/signals.d.ts"
|
||||
"./src/observables-lib": {
|
||||
"import": "./src/observables-lib.js",
|
||||
"types": "./src/observables.d.ts"
|
||||
}
|
||||
},
|
||||
"files": [
|
||||
@ -58,11 +58,11 @@
|
||||
"size-limit": [
|
||||
{
|
||||
"path": "./index.js",
|
||||
"limit": "8.5 kB",
|
||||
"limit": "9 kB",
|
||||
"gzip": false
|
||||
},
|
||||
{
|
||||
"path": "./signals.js",
|
||||
"path": "./observables.js",
|
||||
"limit": "11.5 kB",
|
||||
"gzip": false
|
||||
},
|
||||
|
||||
63
signals.d.ts
vendored
63
signals.d.ts
vendored
@ -1,63 +0,0 @@
|
||||
export type Signal<V, A>= (set?: V)=> V & A;
|
||||
type Action<V>= (this: { value: V }, ...a: any[])=> typeof S._ | void;
|
||||
type SymbolOnclear= Symbol;
|
||||
type SymbolSignal= Symbol;
|
||||
type Actions<V>= Record<string, Action<V>>;
|
||||
interface S {
|
||||
_: Symbol
|
||||
/**
|
||||
* Simple example:
|
||||
* ```js
|
||||
* const hello= S("Hello Signal");
|
||||
* ```
|
||||
* …simple todo signal:
|
||||
* ```js
|
||||
* const todos= S([], {
|
||||
* add(v){ this.value.push(S(v)); },
|
||||
* remove(i){ this.value.splice(i, 1); },
|
||||
* [S.symbols.onclear](){ S.clear(...this.value); },
|
||||
* });
|
||||
* ```
|
||||
* …computed signal:
|
||||
* ```js
|
||||
* const name= S("Jan");
|
||||
* const surname= S("Andrle");
|
||||
* const fullname= S(()=> name()+" "+surname());
|
||||
* ```
|
||||
* @param value Initial signal value. Or function computing value from other signals.
|
||||
* @param actions Use to define actions on the signal. Such as add item to the array.
|
||||
* There is also a reserved function `S.symbol.onclear` which is called when the signal is cleared
|
||||
* by `S.clear`.
|
||||
* */
|
||||
<V, A extends Actions<V>>(value: V, actions?: A): Signal<V, A>;
|
||||
/**
|
||||
* Computations signal. This creates a signal which is computed from other signals.
|
||||
* */
|
||||
<V>(computation: ()=> V): Signal<V, {}>
|
||||
action<S extends Signal<any, Actions<any>>, A extends (S extends Signal<any, infer A> ? A : never), N extends keyof A>(
|
||||
signal: S,
|
||||
name: N,
|
||||
...params: A[N] extends (...args: infer P)=> any ? P : never
|
||||
): void;
|
||||
clear(...signals: Signal<any, any>[]): void;
|
||||
on<T>(signal: Signal<T, any>, onchange: (a: T)=> void, options?: AddEventListenerOptions): void;
|
||||
symbols: {
|
||||
signal: SymbolSignal;
|
||||
onclear: SymbolOnclear;
|
||||
}
|
||||
/**
|
||||
* Reactive element, which is rendered based on the given signal.
|
||||
* ```js
|
||||
* S.el(signal, value=> value ? el("b", "True") : el("i", "False"));
|
||||
* S.el(listS, list=> list.map(li=> el("li", li)));
|
||||
* ```
|
||||
* */
|
||||
el<S extends any>(signal: Signal<S, any>, el: (v: S)=> Element | Element[]): DocumentFragment;
|
||||
|
||||
attribute(name: string, initial?: string): Signal<string, {}>;
|
||||
}
|
||||
export const S: S;
|
||||
declare global {
|
||||
type ddeSignal<T, A= {}>= Signal<T, A>;
|
||||
type ddeActions<V>= Actions<V>
|
||||
}
|
||||
@ -1,4 +0,0 @@
|
||||
export { S, isSignal } from "./src/signals-lib.js";
|
||||
import { signals_config } from "./src/signals-lib.js";
|
||||
import { registerReactivity } from "./src/signals-common.js";
|
||||
registerReactivity(signals_config);
|
||||
41
src/dom.js
41
src/dom.js
@ -1,4 +1,4 @@
|
||||
import { signals } from "./signals-common.js";
|
||||
import { observables } from "./observables-common.js";
|
||||
import { enviroment } from './dom-common.js';
|
||||
|
||||
/** @type {{ scope: object, prevent: boolean, host: function }[]} */
|
||||
@ -32,11 +32,11 @@ export function chainableAppend(el){ if(el.append===append) return el; el.append
|
||||
let namespace;
|
||||
export function createElement(tag, attributes, ...addons){
|
||||
/* jshint maxcomplexity: 15 */
|
||||
const s= signals(this);
|
||||
const s= observables(this);
|
||||
let scoped= 0;
|
||||
let el, el_host;
|
||||
//TODO Array.isArray(tag) ⇒ set key (cache els)
|
||||
if(Object(attributes)!==attributes || s.isSignal(attributes))
|
||||
if(Object(attributes)!==attributes || s.isObservable(attributes))
|
||||
attributes= { textContent: attributes };
|
||||
switch(true){
|
||||
case typeof tag==="function": {
|
||||
@ -66,6 +66,37 @@ export function createElement(tag, attributes, ...addons){
|
||||
scoped= 2;
|
||||
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 {boolean} [is_open=false]
|
||||
@ -137,11 +168,11 @@ function assignContext(element, _this){
|
||||
if(assign_context.has(element)) return assign_context.get(element);
|
||||
const is_svg= element instanceof SVGElement;
|
||||
const setRemoveAttr= (is_svg ? setRemoveNS : setRemove).bind(null, element, "Attribute");
|
||||
const s= signals(_this);
|
||||
const s= observables(_this);
|
||||
return { setRemoveAttr, s };
|
||||
}
|
||||
export function classListDeclarative(element, toggle){
|
||||
const s= signals(this);
|
||||
const s= observables(this);
|
||||
forEachEntries(s, toggle,
|
||||
(class_name, val)=>
|
||||
element.classList.toggle(class_name, val===-1 ? undefined : Boolean(val)));
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
export { registerReactivity } from './signals-common.js';
|
||||
export { registerReactivity } from './observables-common.js';
|
||||
|
||||
export function dispatchEvent(name, options, host){
|
||||
if(!options) options= {};
|
||||
|
||||
13
src/observables-common.js
Normal file
13
src/observables-common.js
Normal file
@ -0,0 +1,13 @@
|
||||
export const observables_global= {
|
||||
isObservable(attributes){ return false; },
|
||||
processReactiveAttribute(obj, key, attr, set){ return attr; },
|
||||
};
|
||||
export function registerReactivity(def, global= true){
|
||||
if(global) return Object.assign(observables_global, def);
|
||||
Object.setPrototypeOf(def, observables_global);
|
||||
return def;
|
||||
}
|
||||
/** @param {unknown} _this @returns {typeof observables_global} */
|
||||
export function observables(_this){
|
||||
return observables_global.isPrototypeOf(_this) && _this!==observables_global ? _this : observables_global;
|
||||
}
|
||||
@ -1,25 +1,25 @@
|
||||
export const mark= Symbol.for("Signal");
|
||||
export const mark= Symbol.for("observable");
|
||||
|
||||
export function isSignal(candidate){
|
||||
export function isObservable(candidate){
|
||||
try{ return Reflect.has(candidate, mark); }
|
||||
catch(e){ return false; }
|
||||
}
|
||||
/** @type {function[]} */
|
||||
const stack_watch= [];
|
||||
/**
|
||||
* ### `WeakMap<function, Set<ddeSignal<any, any>>>`
|
||||
* The `Set` is in the form of `[ source, ...depended signals (DSs) ]`.
|
||||
* ### `WeakMap<function, Set<ddeObservable<any, any>>>`
|
||||
* The `Set` is in the form of `[ source, ...depended observables (DSs) ]`.
|
||||
* When the DS is cleaned (`S.clear`) it is removed from DSs,
|
||||
* if remains only one (`source`) it is cleared too.
|
||||
* ### `WeakMap<object, function>`
|
||||
* This is used for revesed deps, the `function` is also key for `deps`.
|
||||
* @type {WeakMap<function|object,Set<ddeSignal<any, any>>|function>}
|
||||
* @type {WeakMap<function|object,Set<ddeObservable<any, any>>|function>}
|
||||
* */
|
||||
const deps= new WeakMap();
|
||||
export function S(value, actions){
|
||||
export function observable(value, actions){
|
||||
if(typeof value!=="function")
|
||||
return create(value, actions);
|
||||
if(isSignal(value)) return value;
|
||||
if(isObservable(value)) return value;
|
||||
|
||||
const out= create();
|
||||
const contextReWatch= function(){
|
||||
@ -32,9 +32,9 @@ export function S(value, actions){
|
||||
|
||||
if(!deps_old.length) return;
|
||||
const deps_curr= deps.get(contextReWatch);
|
||||
for (const dep_signal of deps_old){
|
||||
if(deps_curr.has(dep_signal)) continue;
|
||||
removeSignalListener(dep_signal, contextReWatch);
|
||||
for (const dep_observable of deps_old){
|
||||
if(deps_curr.has(dep_observable)) continue;
|
||||
removeObservableListener(dep_observable, contextReWatch);
|
||||
}
|
||||
};
|
||||
deps.set(out[mark], contextReWatch);
|
||||
@ -42,44 +42,45 @@ export function S(value, actions){
|
||||
contextReWatch();
|
||||
return out;
|
||||
}
|
||||
S.action= function(signal, name, ...a){
|
||||
const s= signal[mark], { actions }= s;
|
||||
export { observable as O };
|
||||
observable.action= function(o, name, ...a){
|
||||
const s= o[mark], { actions }= s;
|
||||
if(!actions || !Reflect.has(actions, name))
|
||||
throw new Error(`'${signal}' has no action with name '${name}'!`);
|
||||
throw new Error(`'${o}' has no action with name '${name}'!`);
|
||||
actions[name].apply(s, a);
|
||||
if(s.skip) return Reflect.deleteProperty(s, "skip");
|
||||
s.listeners.forEach(l=> l(s.value));
|
||||
};
|
||||
S.on= function on(signals, listener, options= {}){
|
||||
observable.on= function on(o, listener, options= {}){
|
||||
const { signal: as }= options;
|
||||
if(as && as.aborted) return;
|
||||
if(Array.isArray(signals)) return signals.forEach(s=> on(s, listener, options));
|
||||
addSignalListener(signals, listener);
|
||||
if(as) as.addEventListener("abort", ()=> removeSignalListener(signals, listener));
|
||||
//TODO cleanup when signal removed
|
||||
if(Array.isArray(o)) return o.forEach(s=> on(s, listener, options));
|
||||
addObservableListener(o, listener);
|
||||
if(as) as.addEventListener("abort", ()=> removeObservableListener(o, listener));
|
||||
//TODO cleanup when observable removed
|
||||
};
|
||||
S.symbols= {
|
||||
signal: mark,
|
||||
onclear: Symbol.for("Signal.onclear")
|
||||
observable.symbols= {
|
||||
observable: mark,
|
||||
onclear: Symbol.for("Observable.onclear")
|
||||
};
|
||||
S.clear= function(...signals){
|
||||
for(const signal of signals){
|
||||
Reflect.deleteProperty(signal, "toJSON");
|
||||
const s= signal[mark];
|
||||
observable.clear= function(...observables){
|
||||
for(const o of observables){
|
||||
Reflect.deleteProperty(o, "toJSON");
|
||||
const s= o[mark];
|
||||
s.onclear.forEach(f=> f.call(s));
|
||||
clearListDeps(signal, s);
|
||||
Reflect.deleteProperty(signal, mark);
|
||||
clearListDeps(o, s);
|
||||
Reflect.deleteProperty(o, mark);
|
||||
}
|
||||
function clearListDeps(signal, s){
|
||||
function clearListDeps(o, s){
|
||||
s.listeners.forEach(l=> {
|
||||
s.listeners.delete(l);
|
||||
if(!deps.has(l)) return;
|
||||
|
||||
const ls= deps.get(l);
|
||||
ls.delete(signal);
|
||||
ls.delete(o);
|
||||
if(ls.size>1) return;
|
||||
|
||||
S.clear(...ls);
|
||||
o.clear(...ls);
|
||||
deps.delete(l);
|
||||
});
|
||||
}
|
||||
@ -87,7 +88,7 @@ S.clear= function(...signals){
|
||||
const key_reactive= "__dde_reactive";
|
||||
import { el, elementAttribute } from "./dom.js";
|
||||
import { scope } from "./dom.js";
|
||||
S.el= function(signal, map){
|
||||
observable.el= function(o, map){
|
||||
const mark_start= el.mark({ type: "reactive" }, false);
|
||||
const mark_end= mark_start.end;
|
||||
const out= document.createDocumentFragment();
|
||||
@ -95,7 +96,7 @@ S.el= function(signal, map){
|
||||
const { current }= scope;
|
||||
const reRenderReactiveElement= v=> {
|
||||
if(!mark_start.parentNode || !mark_end.parentNode)
|
||||
return removeSignalListener(signal, reRenderReactiveElement);
|
||||
return removeObservableListener(o, reRenderReactiveElement);
|
||||
scope.push(current);
|
||||
let els= map(v);
|
||||
scope.pop();
|
||||
@ -106,16 +107,16 @@ S.el= function(signal, map){
|
||||
el_r.remove();
|
||||
mark_start.after(...els);
|
||||
};
|
||||
addSignalListener(signal, reRenderReactiveElement);
|
||||
removeSignalsFromElements(signal, reRenderReactiveElement, mark_start, map);
|
||||
reRenderReactiveElement(signal());
|
||||
addObservableListener(o, reRenderReactiveElement);
|
||||
removeObservablesFromElements(o, reRenderReactiveElement, mark_start, map);
|
||||
reRenderReactiveElement(o());
|
||||
return out;
|
||||
};
|
||||
import { on } from "./events.js";
|
||||
const key_attributes= "__dde_attributes";
|
||||
S.attribute= function(name, initial= null){
|
||||
observable.attribute= function(name, initial= null){
|
||||
//TODO host=element & reuse existing
|
||||
const out= S(initial);
|
||||
const out= observable(initial);
|
||||
let element;
|
||||
scope.host(el=> {
|
||||
element= el;
|
||||
@ -127,17 +128,17 @@ S.attribute= function(name, initial= null){
|
||||
return;
|
||||
}
|
||||
element[key_attributes]= { [name]: out };
|
||||
on.attributeChanged(function attributeChangeToSignal({ detail }){
|
||||
/*! This maps attributes to signals (`S.attribute`).
|
||||
on.attributeChanged(function attributeChangeToObservable({ detail }){
|
||||
/*! This maps attributes to observables (`S.attribute`).
|
||||
* Investigate `__dde_attributes` key of the element.*/
|
||||
const [ name, value ]= detail;
|
||||
const curr= element[key_attributes][name];
|
||||
if(curr) return curr(value);
|
||||
})(element);
|
||||
on.disconnected(function(){
|
||||
/*! This removes all signals mapped to attributes (`S.attribute`).
|
||||
/*! This removes all observables mapped to attributes (`S.attribute`).
|
||||
* Investigate `__dde_attributes` key of the element.*/
|
||||
S.clear(...Object.values(element[key_attributes]));
|
||||
observable.clear(...Object.values(element[key_attributes]));
|
||||
})(element);
|
||||
});
|
||||
return new Proxy(out, {
|
||||
@ -150,17 +151,17 @@ S.attribute= function(name, initial= null){
|
||||
};
|
||||
|
||||
import { typeOf } from './helpers.js';
|
||||
export const signals_config= {
|
||||
isSignal,
|
||||
export const observables_config= {
|
||||
isObservable,
|
||||
processReactiveAttribute(element, key, attrs, set){
|
||||
if(!isSignal(attrs)) return attrs;
|
||||
if(!isObservable(attrs)) return attrs;
|
||||
const l= attr=> set(key, attr);
|
||||
addSignalListener(attrs, l);
|
||||
removeSignalsFromElements(attrs, l, element, key);
|
||||
addObservableListener(attrs, l);
|
||||
removeObservablesFromElements(attrs, l, element, key);
|
||||
return attrs();
|
||||
}
|
||||
};
|
||||
function removeSignalsFromElements(signal, listener, ...notes){
|
||||
function removeObservablesFromElements(o, listener, ...notes){
|
||||
const { current }= scope;
|
||||
if(current.prevent) return;
|
||||
current.host(function(element){
|
||||
@ -168,28 +169,28 @@ function removeSignalsFromElements(signal, listener, ...notes){
|
||||
element[key_reactive]= [];
|
||||
on.disconnected(()=>
|
||||
/*!
|
||||
* Clears all signals listeners added in the current scope/host (`S.el`, `assign`, …?).
|
||||
* Clears all Observables listeners added in the current scope/host (`S.el`, `assign`, …?).
|
||||
* You can investigate the `__dde_reactive` key of the element.
|
||||
* */
|
||||
element[key_reactive].forEach(([ [ signal, listener ] ])=>
|
||||
removeSignalListener(signal, listener, signal[mark]?.host() === element))
|
||||
element[key_reactive].forEach(([ [ o, listener ] ])=>
|
||||
removeObservableListener(o, listener, o[mark]?.host() === element))
|
||||
)(element);
|
||||
}
|
||||
element[key_reactive].push([ [ signal, listener ], ...notes ]);
|
||||
element[key_reactive].push([ [ o, listener ], ...notes ]);
|
||||
});
|
||||
}
|
||||
|
||||
function create(value, actions){
|
||||
const signal= (...value)=>
|
||||
value.length ? write(signal, ...value) : read(signal);
|
||||
return toSignal(signal, value, actions);
|
||||
const o= (...value)=>
|
||||
value.length ? write(o, ...value) : read(o);
|
||||
return toObservable(o, value, actions);
|
||||
}
|
||||
const protoSigal= Object.assign(Object.create(null), {
|
||||
stopPropagation(){
|
||||
this.skip= true;
|
||||
}
|
||||
});
|
||||
class SignalDefined extends Error{
|
||||
class ObservableDefined extends Error{
|
||||
constructor(){
|
||||
super();
|
||||
const [ curr, ...rest ]= this.stack.split("\n");
|
||||
@ -197,64 +198,64 @@ class SignalDefined extends Error{
|
||||
this.stack= rest.find(l=> !l.includes(curr_file));
|
||||
}
|
||||
}
|
||||
function toSignal(signal, value, actions){
|
||||
function toObservable(o, value, actions){
|
||||
const onclear= [];
|
||||
if(typeOf(actions)!=="[object Object]")
|
||||
actions= {};
|
||||
const { onclear: ocs }= S.symbols;
|
||||
const { onclear: ocs }= observable.symbols;
|
||||
if(actions[ocs]){
|
||||
onclear.push(actions[ocs]);
|
||||
Reflect.deleteProperty(actions, ocs);
|
||||
}
|
||||
const { host }= scope;
|
||||
Reflect.defineProperty(signal, mark, {
|
||||
Reflect.defineProperty(o, mark, {
|
||||
value: {
|
||||
value, actions, onclear, host,
|
||||
listeners: new Set(),
|
||||
defined: new SignalDefined()
|
||||
defined: new ObservableDefined()
|
||||
},
|
||||
enumerable: false,
|
||||
writable: false,
|
||||
configurable: true
|
||||
});
|
||||
signal.toJSON= ()=> signal();
|
||||
Object.setPrototypeOf(signal[mark], protoSigal);
|
||||
return signal;
|
||||
o.toJSON= ()=> o();
|
||||
Object.setPrototypeOf(o[mark], protoSigal);
|
||||
return o;
|
||||
}
|
||||
function currentContext(){
|
||||
return stack_watch[stack_watch.length - 1];
|
||||
}
|
||||
function read(signal){
|
||||
if(!signal[mark]) return;
|
||||
const { value, listeners }= signal[mark];
|
||||
function read(o){
|
||||
if(!o[mark]) return;
|
||||
const { value, listeners }= o[mark];
|
||||
const context= currentContext();
|
||||
if(context) listeners.add(context);
|
||||
if(deps.has(context)) deps.get(context).add(signal);
|
||||
if(deps.has(context)) deps.get(context).add(o);
|
||||
return value;
|
||||
}
|
||||
function write(signal, value, force){
|
||||
if(!signal[mark]) return;
|
||||
const s= signal[mark];
|
||||
function write(o, value, force){
|
||||
if(!o[mark]) return;
|
||||
const s= o[mark];
|
||||
if(!force && s.value===value) return;
|
||||
s.value= value;
|
||||
s.listeners.forEach(l=> l(value));
|
||||
return value;
|
||||
}
|
||||
|
||||
function addSignalListener(signal, listener){
|
||||
if(!signal[mark]) return;
|
||||
return signal[mark].listeners.add(listener);
|
||||
function addObservableListener(o, listener){
|
||||
if(!o[mark]) return;
|
||||
return o[mark].listeners.add(listener);
|
||||
}
|
||||
function removeSignalListener(signal, listener, clear_when_empty){
|
||||
const s= signal[mark];
|
||||
function removeObservableListener(o, listener, clear_when_empty){
|
||||
const s= o[mark];
|
||||
if(!s) return;
|
||||
const out= s.listeners.delete(listener);
|
||||
if(clear_when_empty && !s.listeners.size){
|
||||
S.clear(signal);
|
||||
o.clear(o);
|
||||
if(!deps.has(s)) return out;
|
||||
const c= deps.get(s);
|
||||
if(!deps.has(c)) return out;
|
||||
deps.get(c).forEach(sig=> removeSignalListener(sig, c, true));
|
||||
deps.get(c).forEach(sig=> removeObservableListener(sig, c, true));
|
||||
}
|
||||
return out;
|
||||
}
|
||||
@ -1,13 +0,0 @@
|
||||
export const signals_global= {
|
||||
isSignal(attributes){ return false; },
|
||||
processReactiveAttribute(obj, key, attr, set){ return attr; },
|
||||
};
|
||||
export function registerReactivity(def, global= true){
|
||||
if(global) return Object.assign(signals_global, def);
|
||||
Object.setPrototypeOf(def, signals_global);
|
||||
return def;
|
||||
}
|
||||
/** @param {unknown} _this @returns {typeof signals_global} */
|
||||
export function signals(_this){
|
||||
return signals_global.isPrototypeOf(_this) && _this!==signals_global ? _this : signals_global;
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user