jaandrle/deka-dom-el
1
0
Fork 0
mirror of https://github.com/jaandrle/deka-dom-el synced 2025-11-03 22:59:16 +01:00
Code Packages Releases Activity

🔨 ElementExtender → ElementModifier

Browse Source
This commit is contained in:
Jan Andrle
2023-11-07 17:30:15 +01:00
parent 2c844a0ca9
commit 3866b29436
2 changed files with 14 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
index.d.ts vendored
View File

@@ -1,6 +1,6 @@
declare global { declare global {
type ddeComponentAttributes= Record<any, any> | undefined | string; type ddeComponentAttributes= Record<any, any> | undefined | string;
type ddeElementExtender<El extends HTMLElement | SVGElement | Comment | DocumentFragment>= (element: El)=> El; type ddeElementModifier<El extends HTMLElement | SVGElement | Comment | DocumentFragment>= (element: El)=> El;
} }
type ElementTagNameMap= HTMLElementTagNameMap & { // & SVGElementTagNameMap type ElementTagNameMap= HTMLElementTagNameMap & { // & SVGElementTagNameMap
'#text': Text '#text': Text
@@ -41,7 +41,7 @@ export function assign<El extends Element>(element: El, ...attrs_array: Partial<
export function el<TAG extends keyof ElementTagNameMap>( export function el<TAG extends keyof ElementTagNameMap>(
tag_name: TAG, tag_name: TAG,
attrs?: Partial<ElementAttributes<ElementTagNameMap[TAG]>>, attrs?: Partial<ElementAttributes<ElementTagNameMap[TAG]>>,
...extenders: ddeElementExtender<ElementTagNameMap[TAG]>[] ...modifiers: ddeElementModifier<ElementTagNameMap[TAG]>[]
): ElementTagNameMap[TAG] ): ElementTagNameMap[TAG]
export function el<T>( export function el<T>(
tag_name?: "<>", tag_name?: "<>",
@@ -52,36 +52,36 @@ export function el<
C extends (attr: A)=> Element | DocumentFragment>( C extends (attr: A)=> Element | DocumentFragment>(
fComponent: C, fComponent: C,
attrs?: A, attrs?: A,
...extenders: ddeElementExtender<ReturnType<C>>[] ...modifiers: ddeElementModifier<ReturnType<C>>[]
): ReturnType<C> ): ReturnType<C>
export function el( export function el(
tag_name: string, tag_name: string,
attrs?: Record<string, any>, attrs?: Record<string, any>,
...extenders: ddeElementExtender<HTMLElement | SVGElement>[] ...modifiers: ddeElementModifier<HTMLElement | SVGElement>[]
): HTMLElement ): HTMLElement
export function dispatchEvent(element: HTMLElement, name: keyof DocumentEventMap): void; export function dispatchEvent(element: HTMLElement, name: keyof DocumentEventMap): void;
export function dispatchEvent(element: HTMLElement, name: string, data: any): void; export function dispatchEvent(element: HTMLElement, name: string, data: any): void;
interface On{ interface On{
< <
EE extends ddeElementExtender<Element>, EE extends ddeElementModifier<Element>,
El extends ( EE extends ddeElementExtender<infer El> ? El : never ), El extends ( EE extends ddeElementModifier<infer El> ? El : never ),
Event extends keyof DocumentEventMap>( Event extends keyof DocumentEventMap>(
type: Event, type: Event,
listener: (this: El, ev: DocumentEventMap[Event]) => any, listener: (this: El, ev: DocumentEventMap[Event]) => any,
options?: AddEventListenerOptions options?: AddEventListenerOptions
) : EE; ) : EE;
connected< connected<
EE extends ddeElementExtender<Element>, EE extends ddeElementModifier<Element>,
El extends ( EE extends ddeElementExtender<infer El> ? El : never ) El extends ( EE extends ddeElementModifier<infer El> ? El : never )
>( >(
listener: (el: El) => any, listener: (el: El) => any,
options?: AddEventListenerOptions options?: AddEventListenerOptions
) : EE; ) : EE;
disconnected< disconnected<
EE extends ddeElementExtender<Element>, EE extends ddeElementModifier<Element>,
El extends ( EE extends ddeElementExtender<infer El> ? El : never ) El extends ( EE extends ddeElementModifier<infer El> ? El : never )
>( >(
listener: (el: El) => any, listener: (el: El) => any,
options?: AddEventListenerOptions options?: AddEventListenerOptions
@@ -91,7 +91,7 @@ export const on: On;
export const scope: { export const scope: {
namespace: string, namespace: string,
host: ddeElementExtender<any>, host: ddeElementModifier<any>,
elNamespace: (ns: string)=> ({ append(...els: (HTMLElement | SVGElement)[]): HTMLElement | SVGElement | DocumentFragment }) elNamespace: (ns: string)=> ({ append(...els: (HTMLElement | SVGElement)[]): HTMLElement | SVGElement | DocumentFragment })
}; };

6
src/dom.js
View File

@@ -39,7 +39,7 @@ export const scope= {
}, },
pop(){ return scopes.pop(); }, pop(){ return scopes.pop(); },
}; };
export function createElement(tag, attributes, ...connect){ export function createElement(tag, attributes, ...modifiers){
const s= signals(this); const s= signals(this);
const { namespace }= scope; const { namespace }= scope;
let scoped= 0; let scoped= 0;
@@ -50,7 +50,7 @@ export function createElement(tag, attributes, ...connect){
switch(true){ switch(true){
case typeof tag==="function": { case typeof tag==="function": {
scoped= 1; scoped= 1;
scope.push({ scope: tag, host: c=> c ? (scoped===1 ? connect.unshift(c) : c(el_host), undefined) : el_host }); scope.push({ scope: tag, host: c=> c ? (scoped===1 ? modifiers.unshift(c) : c(el_host), undefined) : el_host });
el= tag(attributes || undefined); el= tag(attributes || undefined);
const is_fragment= el instanceof DocumentFragment; const is_fragment= el instanceof DocumentFragment;
const el_mark= document.createComment(`<dde:mark type="component" name="${tag.name}" host="${is_fragment ? "this" : "parentElement"}"/>`); const el_mark= document.createComment(`<dde:mark type="component" name="${tag.name}" host="${is_fragment ? "this" : "parentElement"}"/>`);
@@ -64,7 +64,7 @@ export function createElement(tag, attributes, ...connect){
case !el: el= assign.call(this, document.createElement(tag), attributes); case !el: el= assign.call(this, document.createElement(tag), attributes);
} }
if(!el_host) el_host= el; if(!el_host) el_host= el;
connect.forEach(c=> c(el_host)); modifiers.forEach(c=> c(el_host));
if(scoped) scope.pop(); if(scoped) scope.pop();
scoped= 2; scoped= 2;
return el; return el;