Skip to content
This repository has been archived by the owner on Oct 19, 2023. It is now read-only.

Latest commit

 

History

History
136 lines (91 loc) · 3 KB

dom.component_mainOut.md

File metadata and controls

136 lines (91 loc) · 3 KB
Raw

$dom.component / $dom / component_mainOut

Interface: component_mainOut<elOut>

$dom.component_mainOut

Type parameters

Name Type
elOut extends T_DOM_HETNM[keyof T_DOM_HETNM] = HTMLElement

Hierarchy

Table of contents

Methods

Methods

destroy

▸ destroy(): void

Method remove element form live DOM and returns null

let c= $dom.component("DIV", null);
c.mount(document.body, "replaceContent");
c= c.share.destroy();
//=> c===null AND <body></body>

Returns

void

isStatic

▸ isStatic(): boolean

Methods returns if it was onupdate used

Returns

boolean

mount

▸ mount(el, type?): elOut

Add element to live DOM

Parameters

Name Type Description
el HTMLElement Element where to places this component
type? "replace" | "after" | "before" | "replaceContent" | "childFirst" | "childLast" Default childLast

Returns

elOut

update

▸ update(data): boolean

Method updates all registered varibles by keys onupdates and calls follower functions

// SIMPLE example
const data_A= { a: "A" };
const data_A_update= { a: "AAA" };
const c= $dom.component("UL", null);
	   c.add("LI", null)
			.onupdate(data_A, ({ a })=>({ textContent: a }));//`{ a }` add listener for "a"
c.mount(document.body);
c.update(data_A_update);
// EXAMPLE WITH `mapUpdate`
const data_B= { a: { b: "A" }};
const data_B_update= { a: { b: "AAA" }};
const c= $dom.component("UL", null, { mapUpdate: d=>({ a: d.a.b }) });
	   c.add("LI", null)
			.onupdate(data_B, ({ a })=>({ textContent: a }));
c.mount(document.body);
c.update(data_B_update);

Parameters

Name Type Description
data object Updates internal storage (via Object.assign – no deep copy!)

Returns

boolean

▸ update(map): boolean

Method updates all registered varibles by keys onupdates and calls follower functions

// EXAMPLE WITH FUNCTION AS ARGUMENT OF `update`
const c= $dom.component("UL", null, { mapUpdate: d=>({ a: d.a.b }) });
	   c.add("LI", null)
			.onupdate({ a: 1 }, ({ a })=>({ textContent: a }));
c.mount(document.body);
c.update(({ a })=> { a: ++a });

Parameters

Name Type Description
map (data: object) => object Function takes as parameter previous internal storage and returns updated one (internally used Object.assign – no deep copy!)

Returns

boolean