2024-11-22 10:20:59 +01:00
<!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@0.9" 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-signals" title = "Handling reactivity in UI via signals." > 4. Signals and reactivity< / a > < a href = "p05-scopes" title = "Organizing UI into components" > 5. Scopes and components< / a > < a href = "p06-customElement" title = "Using custom elements in combinantion with DDE" > 6. Web Components< / 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" > // use NPM or for example https://cdn.jsdelivr.net/gh/jaandrle/deka-dom-el/dist/esm.js
2023-11-24 17:02:16 +01:00
import { on, dispatchEvent } from "deka-dom-el";
2023-11-29 18:25:21 +01:00
/** @type {ddeElementAddon} */
2024-11-22 10:20:59 +01:00
< / 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 title = "MDN documentation page for elemetn.addEventListener" href = "https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener" > < 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 "./esm-with-signals.js";
2023-11-23 16:30:20 +01:00
const log= mark=> console.log.bind(console, mark);
const button= el("button", "Test click");
button.addEventListener("click", log("`addEventListener`"), { once: true });
on("click", log("`on`"), { once: true })(button);
document.body.append(
button
);
2024-11-22 10:20:59 +01:00
< / code > < / div > < script > F l e m s ( d o c u m e n t . g e t E l e m e n t B y I d ( " c o d e - e x a m p l e - 1 - 1 w m d d l o 8 3 w 6 8 " ) , J S O N . p a r s e ( " { \ " f i l e s \ " : [ { \ " n a m e \ " : \ " . j s \ " , \ " c o n t e n t \ " : \ " i m p o r t { e l , o n } f r o m \ \ \ " . / e s m - w i t h - s i g n a l s . j s \ \ \ " ; \ \ n c o n s t l o g = m a r k = > c o n s o l e . l o g . b i n d ( c o n s o l e , m a r k ) ; \ \ n \ \ n c o n s t b u t t o n = e l ( \ \ \ " b u t t o n \ \ \ " , \ \ \ " T e s t c l i c k \ \ \ " ) ; \ \ n b u t t o n . a d d E v e n t L i s t e n e r ( \ \ \ " c l i c k \ \ \ " , l o g ( \ \ \ " ` a d d E v e n t L i s t e n e r ` \ \ \ " ) , { o n c e : t r u e } ) ; \ \ n o n ( \ \ \ " c l i c k \ \ \ " , l o g ( \ \ \ " ` o n ` \ \ \ " ) , { o n c e : t r u e } ) ( b u t t o n ) ; \ \ n \ \ n d o c u m e n t . b o d y . a p p e n d ( \ \ n \ \ t b u t t o n \ \ n ) ; \ \ n \ " } , { \ " n a m e \ " : \ " e s m - w i t h - s i g n a l s . j s \ " , \ " c o n t e n t \ " : \ " / / s r c / s i g n a l s - c o m m o n . j s \ \ n v a r s i g n a l s _ g l o b a l = { \ \ n \ \ t i s S i g n a l ( a t t r i b u t e s ) { \ \ n \ \ t \ \ t r e t u r n f a l s e ; \ \ n \ \ t } , \ \ n \ \ t p r o c e s s R e a c t i v e A t t r i b u t e ( o b j , k e y , a t t r , s e t ) { \ \ n \ \ t \ \ t r e t u r n a t t r ; \ \ n \ \ t } \ \ n } ; \ \ n f u n c t i o n r e g i s t e r R e a c t i v i t y ( d e f , g l o b a l = t r u e ) { \ \ n \ \ t i f ( g l o b a l ) r e t u r n O b j e c t . a s s i g n ( s i g n a l s _ g l o b a l , d e f ) ; \ \ n \ \ t O b j e c t . s e t P r o t o t y p e O f ( d e f , s i g n a l s _ g l o b a l ) ; \ \ n \ \ t r e t u r n d e f ; \ \ n } \ \ n f u n c t i o n s i g n a l s ( _ t h i s ) { \ \ n \ \ t r e t u r n s i g n a l s _ g l o b a l . i s P r o t o t y p e O f ( _ t h i s ) & & _ t h i s ! = = s i g n a l s _ g l o b a l ? _ t h i s : s i g n a l s _ g l o b a l ; \ \ n } \ \ n \ \ n / / s r c / h e l p e r s . j s \ \ n v a r h a s O w n = ( . . . a ) = > O b j e c t . p r o t o t y p e . h a s O w n P r o p e r t y . c a l l ( . . . a ) ; \ \ n f u n c t i o n i s U n d e f ( v a l u e ) { \ \ n \ \ t r e t u r n t y p e o f v a l u e = = = \ \ \ " u n d e f i n e d \ \ \ " ; \ \ n } \ \ n f u n c t i o n t y p e O f ( v ) { \ \ n \ \ t c o n s t t = t y p e o f v ; \ \ n \ \ t i f ( t ! = = \ \ \ " o b j e c t \ \ \ " ) r e t u r n t ; \ \ n \ \ t i f ( v = = = n u l l ) r e t u r n \ \ \ " n u l l \ \ \ " ; \ \ n \ \ t r e t u r n O b j e c t . p r o t o t y p e . t o S t r i n g . c a l l ( v ) ; \ \ n } \ \ n f u n c t i o n o n A b o r t ( s i g n a l 2 , l i s t e n e r ) { \ \ n \ \ t i f ( ! s i g n a l 2 | | ! ( s i g n a l 2 i n s t a n c e o f A b o r t S i g n a l ) ) \ \ n \ \ t \ \ t r e t u r n t r u e ; \ \ n \ \ t i f ( s i g n a l 2 . a b o r t e d ) \ \ n \ \ t \ \ t r e t u r n ; \ \ n \ \ t s i g n a l 2 . a d d E v e n t L i s t e n e r ( \ \ \ " a b o r t \ \ \ " , l i s t e n e r ) ; \ \ n \ \ t r e t u r n f u n c t i o n c l e a n U p ( ) { \ \ n \ \ t \ \ t s i g n a l 2 . r e m o v e E v e n t L i s t e n e r ( \ \ \ " a b o r t \ \ \ " , l i s t e n e r ) ; \ \ n \ \ t } ; \ \ n } \ \ n f u n c t i o n o b s e r v e d A t t r i b u t e s ( i n s t a n c e , o b s e r v e d A t t r i b u t e 2 ) { \ \ n \ \ t c o n s t { o b s e r v e d A t t r i b u t e s : o b s e r v e d A t t r i b u t e s 3 = [ ] } = i n s t a n c e . c o n s t r u c t o r ; \ \ n \ \ t r e t u r n o b s e r v e d A t t r i b u t e s 3 . r e d u c e ( f u n c t i o n ( o u t , n a m e ) { \ \ n \ \ t \ \ t o u t [ k e b a b T o C a m e l ( n a m e ) ] = o b s e r v e d A t t r i b u t e 2 ( i n s t a n c e , n a m e ) ; \ \ n \ \ t \ \ t r e t u r n o u t ; \ \ n \ \ t } , { } ) ; \ \ n } \ \ n f u n c t i o n k e b a b T o C a m e l ( n a m e ) { \ \ n \ \ t r e t u r n n a m e . r e p l a c e ( / - . / g , ( x ) = > x [ 1 ] . t o U p p e r C a s e ( ) ) ; \ \ n } \ \ n \ \ n / / s r c / d o m - c o m m o n . j s \ \ n v a r e n v i r o m e n t = { \ \ n \ \ t s e t D e l e t e A t t r , \ \ n \ \ t s s r : \ \ \ " \ \ \ " , \ \ n \ \ t D : g l o b a l T h i s . d o c u m e n t , \ \ n \ \ t F : g l o b a l T h i s . D o c u m e n t F r a g m e n t , \ \ n \ \ t H : g l o b a l T h i s . H T M L E l e m e n t , \ \ n \ \ t S : g l o b a l T h i s . S V G E l e m e n t , \ \ n \ \ t M : g l o b a l T h i s . M u t a t i o n O b s e r v e r \ \ n } ; \ \ n f u n c t i o n s e t D e l e t e A t t r ( o b j , p r o p , v a l ) { \ \ n \ \ t R e f l e c t . s e t ( o b j , p r o p , v a l ) ; \ \ n \ \ t i f ( ! i s U n d e f ( v a l ) ) r e t u r n ; \ \ n \ \ t R e f l e c t . d e l e t e P r o p e r t y ( o b j , p r o p ) ; \ \ n \ \ t i f ( o b j i n s t a n c e o f e n v i r o m e n t . H & & o b j . g e t A t t r i b u t e ( p r o p ) = = = \ \ \ " u n d e f i n e d \ \ \ " ) \ \ n \ \ t \ \ t r e t u r n o b j . r e m o v e A t t r i b u t e ( p r o p ) ; \ \ n \ \ t i f ( R e f l e c t . g e t ( o b j , p r o p ) = = = \ \ \ " u n d e f i n e d \ \ \ " ) \ \ n \ \ t \ \ t r e t u r n R e f l e c t . s e t ( o b j , p r o p , \ \ \ " \ \ \ " ) ; \ \ n } \ \ n v a r k e y L T E = \ \ \ " _ _ d d e _ l i f e c y c l e s T o E v e n t s \ \ \ " ; \ \ n v a r e v c = \ \ \ " d d e : c o n n e c t e d \ \ \ " ; \ \ n v a r e v d = \ \ \ " d d e : d i s c o n n e c t e d \ \ \ " ; \ \ n v a r e v a = \ \ \ " d d e : a t t r i b u t e C h a n g e d \ \ \ " ; \ \ n \ \ n / / s r c / d o m . j s \ \ n v a r s c o p e s = [ { \ \ n \ \ t g e t s c o p e ( ) { \ \ n \ \ t \ \ t r e t u r n e n v i r o m e n t . D . b o d y ; \ \ n \ \ t } , \ \ n \ \ t h o s t : ( c ) = > c ? c ( e n v i r o m e n t . D . b o d y ) : e n v i r o m e n t . D . b o d y , \ \ n \ \ t p r e v e n t : t r u e \ \ n } ] ; \ \ n v a r s c o p e = { \ \ n \ \ t g e t c u r r e n t ( ) { \ \ n \ \ t \ \ t r e t u r n s c o p e s [ s c o p e s . l e n g t h - 1 ] ; \ \ n \ \ t } , \ \ n \ \ t g e t h o s t ( ) { \ \ n \ \ t \ \ t r e t u r n t h i s . c u r r e n t . h o s t ; \ \ n \ \ t } , \ \ n \ \ t p r e v e n t D e f a u l t ( ) { \ \ n \ \ t \ \ t c o n s t { c u r r e n t } = t h i s ; \ \ n \ \ t \ \ t c u r r e n t . p r e v e n t = t r u e ; \ \ n \ \ t \ \ t r e t u r n c u r r e n t ; \ \ n \ \ t } , \ \ n \ \ t g e t s t a t e ( ) { \ \ n \ \ t \ \ t r e t u r n [ . . . s c o p e s ] ; \ \ n \ \ t } , \ \ n \ \ t p u s h ( s = { } ) { \ \ n \ \ t \ \ t r e t u r n s c o p e s . p u s h ( O b j e c t . a s s i g n ( { } , t h i s . c u r r e n t , { p r e v e n t : f a l s e } , s ) ) ; \ \ n \ \ t } , \ \ n \ \ t p u s h R o o t ( ) { \ \ n \ \ t \ \ t r e t u r n s c o p e s . p u s h ( s c o p e s [ 0 ] ) ; \ \ n \ \ t } , \ \ n \ \ t p o p ( ) { \ \ n \ \ t \ \ t i f ( s c o p e s . l e n g t h = = = 1 ) r e t u r n ; \ \ n \ \ t \ \ t r e t u r n s c o p e s . p o p ( ) ; \ \ n \ \ t } \ \ n } ; \ \ n f u n c t i o n a p p e n d ( . . . e l s ) { \ \ n \ \ t t h i s . a p p e n d O r i g i n a l ( . . . e l s ) ; \ \ n \ \ t r e t u r n t h i s ; \ \ n } \ \ n f u n c t i o n c h a i n a b l e A p p e n d ( e l ) { \ \ n \ \ t i f ( e l . a p p e n d = = = a p p e n d ) r e t u r n e l ; \ \ n \ \ t e l . a p p e n d O r i g i n a l = e l . a p p e n d ; \ \ n \ \ t e l . a p p e n d = a p p e n d ; \ \ n \ \ t r e t u r n e l ; \ \ n } \ \ n v a r n a m e s p a c e ; \ \ n f u n c t i o n c r e a t e E l e m e n t ( t a g , a t t r i b u t e s , . . . a d d o n s ) { \ \ n \ \ t c o n s t s = s i g n a l s ( t h i s ) ; \ \ n \ \ t l e t s
2023-11-23 16:30:20 +01:00
const log= mark=> console.log.bind(console, mark);
const abort_controller= new AbortController();
const { signal }= abort_controller;
const button= el("button", "Test click");
button.addEventListener("click", log("`addEventListener`"), { signal });
on("click", log("`on`"), { signal })(button);
document.body.append(
button, " ", el("button", { textContent: "Off", onclick: ()=> abort_controller.abort() })
);
2024-11-22 10:20:59 +01:00
< / code > < / div > < script > F l e m s ( d o c u m e n t . g e t E l e m e n t B y I d ( " c o d e - e x a m p l e - 1 - 8 r 8 q a p p f 8 m o " ) , J S O N . p a r s e ( " { \ " f i l e s \ " : [ { \ " n a m e \ " : \ " . j s \ " , \ " c o n t e n t \ " : \ " i m p o r t { e l , o n } f r o m \ \ \ " . / e s m - w i t h - s i g n a l s . j s \ \ \ " ; \ \ n c o n s t l o g = m a r k = > c o n s o l e . l o g . b i n d ( c o n s o l e , m a r k ) ; \ \ n \ \ n c o n s t a b o r t _ c o n t r o l l e r = n e w A b o r t C o n t r o l l e r ( ) ; \ \ n c o n s t { s i g n a l } = a b o r t _ c o n t r o l l e r ; \ \ n \ \ n c o n s t b u t t o n = e l ( \ \ \ " b u t t o n \ \ \ " , \ \ \ " T e s t c l i c k \ \ \ " ) ; \ \ n b u t t o n . a d d E v e n t L i s t e n e r ( \ \ \ " c l i c k \ \ \ " , l o g ( \ \ \ " ` a d d E v e n t L i s t e n e r ` \ \ \ " ) , { s i g n a l } ) ; \ \ n o n ( \ \ \ " c l i c k \ \ \ " , l o g ( \ \ \ " ` o n ` \ \ \ " ) , { s i g n a l } ) ( b u t t o n ) ; \ \ n \ \ n d o c u m e n t . b o d y . a p p e n d ( \ \ n \ \ t b u t t o n , \ \ \ " \ \ \ " , e l ( \ \ \ " b u t t o n \ \ \ " , { t e x t C o n t e n t : \ \ \ " O f f \ \ \ " , o n c l i c k : ( ) = > a b o r t _ c o n t r o l l e r . a b o r t ( ) } ) \ \ n ) ; \ \ n \ " } , { \ " n a m e \ " : \ " e s m - w i t h - s i g n a l s . j s \ " , \ " c o n t e n t \ " : \ " / / s r c / s i g n a l s - c o m m o n . j s \ \ n v a r s i g n a l s _ g l o b a l = { \ \ n \ \ t i s S i g n a l ( a t t r i b u t e s ) { \ \ n \ \ t \ \ t r e t u r n f a l s e ; \ \ n \ \ t } , \ \ n \ \ t p r o c e s s R e a c t i v e A t t r i b u t e ( o b j , k e y , a t t r , s e t ) { \ \ n \ \ t \ \ t r e t u r n a t t r ; \ \ n \ \ t } \ \ n } ; \ \ n f u n c t i o n r e g i s t e r R e a c t i v i t y ( d e f , g l o b a l = t r u e ) { \ \ n \ \ t i f ( g l o b a l ) r e t u r n O b j e c t . a s s i g n ( s i g n a l s _ g l o b a l , d e f ) ; \ \ n \ \ t O b j e c t . s e t P r o t o t y p e O f ( d e f , s i g n a l s _ g l o b a l ) ; \ \ n \ \ t r e t u r n d e f ; \ \ n } \ \ n f u n c t i o n s i g n a l s ( _ t h i s ) { \ \ n \ \ t r e t u r n s i g n a l s _ g l o b a l . i s P r o t o t y p e O f ( _ t h i s ) & & _ t h i s ! = = s i g n a l s _ g l o b a l ? _ t h i s : s i g n a l s _ g l o b a l ; \ \ n } \ \ n \ \ n / / s r c / h e l p e r s . j s \ \ n v a r h a s O w n = ( . . . a ) = > O b j e c t . p r o t o t y p e . h a s O w n P r o p e r t y . c a l l ( . . . a ) ; \ \ n f u n c t i o n i s U n d e f ( v a l u e ) { \ \ n \ \ t r e t u r n t y p e o f v a l u e = = = \ \ \ " u n d e f i n e d \ \ \ " ; \ \ n } \ \ n f u n c t i o n t y p e O f ( v ) { \ \ n \ \ t c o n s t t = t y p e o f v ; \ \ n \ \ t i f ( t ! = = \ \ \ " o b j e c t \ \ \ " ) r e t u r n t ; \ \ n \ \ t i f ( v = = = n u l l ) r e t u r n \ \ \ " n u l l \ \ \ " ; \ \ n \ \ t r e t u r n O b j e c t . p r o t o t y p e . t o S t r i n g . c a l l ( v ) ; \ \ n } \ \ n f u n c t i o n o n A b o r t ( s i g n a l 2 , l i s t e n e r ) { \ \ n \ \ t i f ( ! s i g n a l 2 | | ! ( s i g n a l 2 i n s t a n c e o f A b o r t S i g n a l ) ) \ \ n \ \ t \ \ t r e t u r n t r u e ; \ \ n \ \ t i f ( s i g n a l 2 . a b o r t e d ) \ \ n \ \ t \ \ t r e t u r n ; \ \ n \ \ t s i g n a l 2 . a d d E v e n t L i s t e n e r ( \ \ \ " a b o r t \ \ \ " , l i s t e n e r ) ; \ \ n \ \ t r e t u r n f u n c t i o n c l e a n U p ( ) { \ \ n \ \ t \ \ t s i g n a l 2 . r e m o v e E v e n t L i s t e n e r ( \ \ \ " a b o r t \ \ \ " , l i s t e n e r ) ; \ \ n \ \ t } ; \ \ n } \ \ n f u n c t i o n o b s e r v e d A t t r i b u t e s ( i n s t a n c e , o b s e r v e d A t t r i b u t e 2 ) { \ \ n \ \ t c o n s t { o b s e r v e d A t t r i b u t e s : o b s e r v e d A t t r i b u t e s 3 = [ ] } = i n s t a n c e . c o n s t r u c t o r ; \ \ n \ \ t r e t u r n o b s e r v e d A t t r i b u t e s 3 . r e d u c e ( f u n c t i o n ( o u t , n a m e ) { \ \ n \ \ t \ \ t o u t [ k e b a b T o C a m e l ( n a m e ) ] = o b s e r v e d A t t r i b u t e 2 ( i n s t a n c e , n a m e ) ; \ \ n \ \ t \ \ t r e t u r n o u t ; \ \ n \ \ t } , { } ) ; \ \ n } \ \ n f u n c t i o n k e b a b T o C a m e l ( n a m e ) { \ \ n \ \ t r e t u r n n a m e . r e p l a c e ( / - . / g , ( x ) = > x [ 1 ] . t o U p p e r C a s e ( ) ) ; \ \ n } \ \ n \ \ n / / s r c / d o m - c o m m o n . j s \ \ n v a r e n v i r o m e n t = { \ \ n \ \ t s e t D e l e t e A t t r , \ \ n \ \ t s s r : \ \ \ " \ \ \ " , \ \ n \ \ t D : g l o b a l T h i s . d o c u m e n t , \ \ n \ \ t F : g l o b a l T h i s . D o c u m e n t F r a g m e n t , \ \ n \ \ t H : g l o b a l T h i s . H T M L E l e m e n t , \ \ n \ \ t S : g l o b a l T h i s . S V G E l e m e n t , \ \ n \ \ t M : g l o b a l T h i s . M u t a t i o n O b s e r v e r \ \ n } ; \ \ n f u n c t i o n s e t D e l e t e A t t r ( o b j , p r o p , v a l ) { \ \ n \ \ t R e f l e c t . s e t ( o b j , p r o p , v a l ) ; \ \ n \ \ t i f ( ! i s U n d e f ( v a l ) ) r e t u r n ; \ \ n \ \ t R e f l e c t . d e l e t e P r o p e r t y ( o b j , p r o p ) ; \ \ n \ \ t i f ( o b j i n s t a n c e o f e n v i r o m e n t . H & & o b j . g e t A t t r i b u t e ( p r o p ) = = = \ \ \ " u n d e f i n e d \ \ \ " ) \ \ n \ \ t \ \ t r e t u r n o b j . r e m o v e A t t r i b u t e ( p r o p ) ; \ \ n \ \ t i f ( R e f l e c t . g e t ( o b j , p r o p ) = = = \ \ \ " u n d e f i n e d \ \ \ " ) \ \ n \ \ t \ \ t r e t u r n R e f l e c t . s e t ( o b j , p r o p , \ \ \ " \ \ \ " ) ; \ \ n } \ \ n v a r k e y L T E = \ \ \ " _ _ d d e _ l i f e c y c l e s T o E v e n t s \ \ \ " ; \ \ n v a r e v c = \ \ \ " d d e : c o n n e c t e d \ \ \ " ; \ \ n v a r e v d = \ \ \ " d d e : d i s c o n n e c t e d \ \ \ " ; \ \ n v a r e v a = \ \ \ " d d e : a t t r i b u t e C h a n g e d \ \ \ " ; \ \ n \ \ n / / s r c / d o m . j s \ \ n v a r s c o p e s = [ { \ \ n \ \ t g e t s c o p e ( ) { \ \ n \ \ t \ \ t r e t u r n e n v i r o m e n t . D . b o d y ; \ \ n \ \ t } , \ \ n \ \ t h o s t : ( c ) = > c ? c ( e n v i r o m e n t . D . b o d y ) : e n v i r o m e n t . D . b o d y , \ \ n \ \ t p r e v e n t : t r u e \ \ n } ] ; \ \ n v a r s c o p e = { \ \ n \ \ t g e t c u r r e n t ( ) { \ \ n \ \ t \ \ t r e t u r n s c o p e s [ s c o p e s . l e n g t h - 1 ] ; \ \ n \ \ t } , \ \ n \ \ t g e t h o s t ( ) { \ \ n \ \ t \ \ t r e t u r n t h i s . c u r r e n t . h o s t ; \ \ n \ \ t } , \ \ n \ \ t p r e v e n t D e f a u l t ( ) { \ \ n \ \ t \ \ t c o n s t { c u r r e n t } = t h i s ; \ \ n \ \ t \ \ t c u r r e n t . p r e v e n t = t r u e ; \ \ n \ \ t \ \ t r e t u r n c u r r e n t ; \ \ n \ \ t } , \ \ n \ \ t g e t s t a t e ( ) { \ \ n \ \ t \ \ t r e t u r n [ . . . s c o p e s ] ; \ \ n \ \ t } , \ \ n \ \ t p u s h ( s = { } ) { \ \ n \ \ t \ \ t r e t u r n s c o p e s . p u s h ( O b j e c t . a s s i g n ( { } , t h i s . c u r r e n t , { p r e v e n t : f a l s e } , s ) ) ; \ \ n \ \ t } , \ \ n \ \ t p u s h R o o t ( ) { \ \ n \ \ t \ \ t r e t u r n s c o p e s . p u s h ( s c o p e s [ 0 ] ) ; \ \ n \ \ t } , \ \ n \ \ t p o p ( ) { \ \ n \ \ t \ \ t i f ( s c o p e s . l e n g t h = = = 1 ) r e t u r n ; \ \ n \ \ t \ \ t r e t u r n s c o p e s . p o p ( ) ; \ \ n \ \ t } \ \ n } ; \ \ n f u n c t i o n a p p e n d ( . . . e l s ) { \ \ n \ \ t t h i s . a p p e n d O r i g i n a l ( . . . e l s ) ; \ \ n \ \ t r e t u r n t h i s ; \ \ n } \ \ n f u n c t i o n c h a i n a b l e A p p e n d ( e l ) { \ \ n \ \ t i f ( e l . a p p e n d = = = a p p e n d ) r e t u r n e l ; \ \ n \ \ t e l . a p p
2023-11-23 16:30:20 +01:00
const abort_controller= new AbortController();
const { signal }= abort_controller;
/** @type {ddeElementAddon< HTMLButtonElement> } */
const onclickOff= on("click", ()=> abort_controller.abort(), { signal });
/** @type {(ref?: HTMLOutputElement)=> HTMLOutputElement | null} */
const ref= (store=> ref=> ref ? (store= ref) : store)(null);
document.body.append(
el("button", "Test `on`",
on("click", console.log, { signal }),
on("click", update, { signal }),
on("mouseup", update, { signal })),
" ",
el("button", "Off", onclickOff),
el("output", { style: { display: "block", whiteSpace: "pre" } }, ref)
);
/** @param {MouseEvent} event @this {HTMLButtonElement} */
function update(event){
ref().append(
event.type,
"\n"
);
}
2024-11-22 10:20:59 +01:00
< / code > < / div > < script > F l e m s ( d o c u m e n t . g e t E l e m e n t B y I d ( " c o d e - e x a m p l e - 1 - 6 j t s n x f q z m 4 " ) , J S O N . p a r s e ( " { \ " f i l e s \ " : [ { \ " n a m e \ " : \ " . j s \ " , \ " c o n t e n t \ " : \ " i m p o r t { e l , o n } f r o m \ \ \ " . / e s m - w i t h - s i g n a l s . j s \ \ \ " ; \ \ n c o n s t a b o r t _ c o n t r o l l e r = n e w A b o r t C o n t r o l l e r ( ) ; \ \ n c o n s t { s i g n a l } = a b o r t _ c o n t r o l l e r ; \ \ n / * * @ t y p e { d d e E l e m e n t A d d o n < H T M L B u t t o n E l e m e n t > } * / \ \ n c o n s t o n c l i c k O f f = o n ( \ \ \ " c l i c k \ \ \ " , ( ) = > a b o r t _ c o n t r o l l e r . a b o r t ( ) , { s i g n a l } ) ; \ \ n / * * @ t y p e { ( r e f ? : H T M L O u t p u t E l e m e n t ) = > H T M L O u t p u t E l e m e n t | n u l l } * / \ \ n c o n s t r e f = ( s t o r e = > r e f = > r e f ? ( s t o r e = r e f ) : s t o r e ) ( n u l l ) ; \ \ n \ \ n d o c u m e n t . b o d y . a p p e n d ( \ \ n \ \ t e l ( \ \ \ " b u t t o n \ \ \ " , \ \ \ " T e s t ` o n ` \ \ \ " , \ \ n \ \ t \ \ t o n ( \ \ \ " c l i c k \ \ \ " , c o n s o l e . l o g , { s i g n a l } ) , \ \ n \ \ t \ \ t o n ( \ \ \ " c l i c k \ \ \ " , u p d a t e , { s i g n a l } ) , \ \ n \ \ t \ \ t o n ( \ \ \ " m o u s e u p \ \ \ " , u p d a t e , { s i g n a l } ) ) , \ \ n \ \ t \ \ \ " \ \ \ " , \ \ n \ \ t e l ( \ \ \ " b u t t o n \ \ \ " , \ \ \ " O f f \ \ \ " , o n c l i c k O f f ) , \ \ n \ \ t e l ( \ \ \ " o u t p u t \ \ \ " , { s t y l e : { d i s p l a y : \ \ \ " b l o c k \ \ \ " , w h i t e S p a c e : \ \ \ " p r e \ \ \ " } } , r e f ) \ \ n ) ; \ \ n / * * @ p a r a m { M o u s e E v e n t } e v e n t @ t h i s { H T M L B u t t o n E l e m e n t } * / \ \ n f u n c t i o n u p d a t e ( e v e n t ) { \ \ n \ \ t r e f ( ) . a p p e n d ( \ \ n \ \ t \ \ t e v e n t . t y p e , \ \ n \ \ t \ \ t \ \ \ " \ \ \ \ n \ \ \ " \ \ n \ \ t ) ; \ \ n } \ \ n \ " } , { \ " n a m e \ " : \ " e s m - w i t h - s i g n a l s . j s \ " , \ " c o n t e n t \ " : \ " / / s r c / s i g n a l s - c o m m o n . j s \ \ n v a r s i g n a l s _ g l o b a l = { \ \ n \ \ t i s S i g n a l ( a t t r i b u t e s ) { \ \ n \ \ t \ \ t r e t u r n f a l s e ; \ \ n \ \ t } , \ \ n \ \ t p r o c e s s R e a c t i v e A t t r i b u t e ( o b j , k e y , a t t r , s e t ) { \ \ n \ \ t \ \ t r e t u r n a t t r ; \ \ n \ \ t } \ \ n } ; \ \ n f u n c t i o n r e g i s t e r R e a c t i v i t y ( d e f , g l o b a l = t r u e ) { \ \ n \ \ t i f ( g l o b a l ) r e t u r n O b j e c t . a s s i g n ( s i g n a l s _ g l o b a l , d e f ) ; \ \ n \ \ t O b j e c t . s e t P r o t o t y p e O f ( d e f , s i g n a l s _ g l o b a l ) ; \ \ n \ \ t r e t u r n d e f ; \ \ n } \ \ n f u n c t i o n s i g n a l s ( _ t h i s ) { \ \ n \ \ t r e t u r n s i g n a l s _ g l o b a l . i s P r o t o t y p e O f ( _ t h i s ) & & _ t h i s ! = = s i g n a l s _ g l o b a l ? _ t h i s : s i g n a l s _ g l o b a l ; \ \ n } \ \ n \ \ n / / s r c / h e l p e r s . j s \ \ n v a r h a s O w n = ( . . . a ) = > O b j e c t . p r o t o t y p e . h a s O w n P r o p e r t y . c a l l ( . . . a ) ; \ \ n f u n c t i o n i s U n d e f ( v a l u e ) { \ \ n \ \ t r e t u r n t y p e o f v a l u e = = = \ \ \ " u n d e f i n e d \ \ \ " ; \ \ n } \ \ n f u n c t i o n t y p e O f ( v ) { \ \ n \ \ t c o n s t t = t y p e o f v ; \ \ n \ \ t i f ( t ! = = \ \ \ " o b j e c t \ \ \ " ) r e t u r n t ; \ \ n \ \ t i f ( v = = = n u l l ) r e t u r n \ \ \ " n u l l \ \ \ " ; \ \ n \ \ t r e t u r n O b j e c t . p r o t o t y p e . t o S t r i n g . c a l l ( v ) ; \ \ n } \ \ n f u n c t i o n o n A b o r t ( s i g n a l 2 , l i s t e n e r ) { \ \ n \ \ t i f ( ! s i g n a l 2 | | ! ( s i g n a l 2 i n s t a n c e o f A b o r t S i g n a l ) ) \ \ n \ \ t \ \ t r e t u r n t r u e ; \ \ n \ \ t i f ( s i g n a l 2 . a b o r t e d ) \ \ n \ \ t \ \ t r e t u r n ; \ \ n \ \ t s i g n a l 2 . a d d E v e n t L i s t e n e r ( \ \ \ " a b o r t \ \ \ " , l i s t e n e r ) ; \ \ n \ \ t r e t u r n f u n c t i o n c l e a n U p ( ) { \ \ n \ \ t \ \ t s i g n a l 2 . r e m o v e E v e n t L i s t e n e r ( \ \ \ " a b o r t \ \ \ " , l i s t e n e r ) ; \ \ n \ \ t } ; \ \ n } \ \ n f u n c t i o n o b s e r v e d A t t r i b u t e s ( i n s t a n c e , o b s e r v e d A t t r i b u t e 2 ) { \ \ n \ \ t c o n s t { o b s e r v e d A t t r i b u t e s : o b s e r v e d A t t r i b u t e s 3 = [ ] } = i n s t a n c e . c o n s t r u c t o r ; \ \ n \ \ t r e t u r n o b s e r v e d A t t r i b u t e s 3 . r e d u c e ( f u n c t i o n ( o u t , n a m e ) { \ \ n \ \ t \ \ t o u t [ k e b a b T o C a m e l ( n a m e ) ] = o b s e r v e d A t t r i b u t e 2 ( i n s t a n c e , n a m e ) ; \ \ n \ \ t \ \ t r e t u r n o u t ; \ \ n \ \ t } , { } ) ; \ \ n } \ \ n f u n c t i o n k e b a b T o C a m e l ( n a m e ) { \ \ n \ \ t r e t u r n n a m e . r e p l a c e ( / - . / g , ( x ) = > x [ 1 ] . t o U p p e r C a s e ( ) ) ; \ \ n } \ \ n \ \ n / / s r c / d o m - c o m m o n . j s \ \ n v a r e n v i r o m e n t = { \ \ n \ \ t s e t D e l e t e A t t r , \ \ n \ \ t s s r : \ \ \ " \ \ \ " , \ \ n \ \ t D : g l o b a l T h i s . d o c u m e n t , \ \ n \ \ t F : g l o b a l T h i s . D o c u m e n t F r a g m e n t , \ \ n \ \ t H : g l o b a l T h i s . H T M L E l e m e n t , \ \ n \ \ t S : g l o b a l T h i s . S V G E l e m e n t , \ \ n \ \ t M : g l o b a l T h i s . M u t a t i o n O b s e r v e r \ \ n } ; \ \ n f u n c t i o n s e t D e l e t e A t t r ( o b j , p r o p , v a l ) { \ \ n \ \ t R e f l e c t . s e t ( o b j , p r o p , v a l ) ; \ \ n \ \ t i f ( ! i s U n d e f ( v a l ) ) r e t u r n ; \ \ n \ \ t R e f l e c t . d e l e t e P r o p e r t y ( o b j , p r o p ) ; \ \ n \ \ t i f ( o b j i n s t a n c e o f e n v i r o m e n t . H & & o b j . g e t A t t r i b u t e ( p r o p ) = = = \ \ \ " u n d e f i n e d \ \ \ " ) \ \ n \ \ t \ \ t r e t u r n o b j . r e m o v e A t t r i b u t e ( p r o p ) ; \ \ n \ \ t i f ( R e f l e c t . g e t ( o b j , p r o p ) = = = \ \ \ " u n d e f i n e d \ \ \ " ) \ \ n \ \ t \ \ t r e t u r n R e f l e c t . s e t ( o b j , p r o p , \ \ \ " \ \ \ " ) ; \ \ n } \ \ n v a r k e y L T E = \ \ \ " _ _ d d e _ l i f e c y c l e s T o E v e n t s \ \ \ " ; \ \ n v a r e v c = \ \ \ " d d e : c o n n e c t e d \ \ \ " ; \ \ n v a r e v d = \ \ \ " d d e : d i s c o n n e c t e d \ \ \ " ; \ \ n v a r e v a = \ \ \ " d d e : a t t r i b u t e C h a n g e d \ \ \ " ; \ \ n \ \ n / / s r c / d o m . j s \ \ n v a r s c o p e s = [ { \ \ n \ \ t g e t s c o p e ( ) { \ \ n \ \ t \ \ t r e t u r n e n v i r o m e n t . D . b o d y ; \ \ n \ \ t } , \ \ n \ \ t h o s t : ( c ) = > c ? c ( e n v i r o m e n t . D . b o d y ) : e n v i r o m e n t . D . b o d y , \ \ n \ \ t p r e v e n t : t r u e \ \ n } ] ; \ \ n v a r s c o p e = { \ \ n \ \ t g e t c u r r e n t ( ) { \ \ n \ \ t \ \ t r e t u r n s c o p e s [ s c o p e s . l e n g t h - 1 ] ; \ \ n \ \ t } , \ \ n \ \ t g e t h o s t ( ) { \ \ n \ \ t \ \ t r e t u r n t h i s . c u r r e n t . h o s t ; \ \ n \ \ t } , \ \ n \ \ t p r e v e n t D e f a u l t ( ) { \ \ n \ \ t \ \ t c o n s t { c u r r e n t } = t h i s ; \ \ n \ \ t \ \ t c u r r e n t . p r e v e n t = t r u e ; \ \ n \ \ t \ \ t r e t u r n c u r r e n t ; \ \ n \ \ t } , \ \ n \ \ t g e t s t a t e ( ) { \ \ n \ \ t \ \ t r e t u r n [ . . . s c o p e s ] ; \ \ n \ \ t } , \ \ n \ \ t p u s h ( s = { } ) { \ \ n \ \ t \ \ t r e t u r n s c o p
2023-11-23 16:30:20 +01:00
const paragraph= el("p", "See live-cycle events in console.",
el=> log({ type: "dde:created", detail: el }),
on.connected(log),
on.disconnected(log),
on.attributeChanged(log));
document.body.append(
paragraph,
el("button", "Update attribute", on("click", ()=> paragraph.setAttribute("test", Math.random().toString()))),
" ",
el("button", "Remove", on("click", ()=> paragraph.remove()))
);
/** @param {Partial< CustomEvent> } event */
function log({ type, detail }){
console.log({ _this: this, type, detail });
}
2024-11-22 10:20:59 +01:00
< / code > < / div > < script > F l e m s ( d o c u m e n t . g e t E l e m e n t B y I d ( " c o d e - e x a m p l e - 1 - 3 5 h j j p 3 e 4 j s " ) , J S O N . p a r s e ( " { \ " f i l e s \ " : [ { \ " n a m e \ " : \ " . j s \ " , \ " c o n t e n t \ " : \ " i m p o r t { e l , o n } f r o m \ \ \ " . / e s m - w i t h - s i g n a l s . j s \ \ \ " ; \ \ n c o n s t p a r a g r a p h = e l ( \ \ \ " p \ \ \ " , \ \ \ " S e e l i v e - c y c l e e v e n t s i n c o n s o l e . \ \ \ " , \ \ n \ \ t e l = > l o g ( { t y p e : \ \ \ " d d e : c r e a t e d \ \ \ " , d e t a i l : e l } ) , \ \ n \ \ t o n . c o n n e c t e d ( l o g ) , \ \ n \ \ t o n . d i s c o n n e c t e d ( l o g ) , \ \ n \ \ t o n . a t t r i b u t e C h a n g e d ( l o g ) ) ; \ \ n \ \ n d o c u m e n t . b o d y . a p p e n d ( \ \ n \ \ t p a r a g r a p h , \ \ n \ \ t e l ( \ \ \ " b u t t o n \ \ \ " , \ \ \ " U p d a t e a t t r i b u t e \ \ \ " , o n ( \ \ \ " c l i c k \ \ \ " , ( ) = > p a r a g r a p h . s e t A t t r i b u t e ( \ \ \ " t e s t \ \ \ " , M a t h . r a n d o m ( ) . t o S t r i n g ( ) ) ) ) , \ \ n \ \ t \ \ \ " \ \ \ " , \ \ n \ \ t e l ( \ \ \ " b u t t o n \ \ \ " , \ \ \ " R e m o v e \ \ \ " , o n ( \ \ \ " c l i c k \ \ \ " , ( ) = > p a r a g r a p h . r e m o v e ( ) ) ) \ \ n ) ; \ \ n \ \ n / * * @ p a r a m { P a r t i a l < C u s t o m E v e n t > } e v e n t * / \ \ n f u n c t i o n l o g ( { t y p e , d e t a i l } ) { \ \ n \ \ t c o n s o l e . l o g ( { _ t h i s : t h i s , t y p e , d e t a i l } ) ; \ \ n } \ \ n \ " } , { \ " n a m e \ " : \ " e s m - w i t h - s i g n a l s . j s \ " , \ " c o n t e n t \ " : \ " / / s r c / s i g n a l s - c o m m o n . j s \ \ n v a r s i g n a l s _ g l o b a l = { \ \ n \ \ t i s S i g n a l ( a t t r i b u t e s ) { \ \ n \ \ t \ \ t r e t u r n f a l s e ; \ \ n \ \ t } , \ \ n \ \ t p r o c e s s R e a c t i v e A t t r i b u t e ( o b j , k e y , a t t r , s e t ) { \ \ n \ \ t \ \ t r e t u r n a t t r ; \ \ n \ \ t } \ \ n } ; \ \ n f u n c t i o n r e g i s t e r R e a c t i v i t y ( d e f , g l o b a l = t r u e ) { \ \ n \ \ t i f ( g l o b a l ) r e t u r n O b j e c t . a s s i g n ( s i g n a l s _ g l o b a l , d e f ) ; \ \ n \ \ t O b j e c t . s e t P r o t o t y p e O f ( d e f , s i g n a l s _ g l o b a l ) ; \ \ n \ \ t r e t u r n d e f ; \ \ n } \ \ n f u n c t i o n s i g n a l s ( _ t h i s ) { \ \ n \ \ t r e t u r n s i g n a l s _ g l o b a l . i s P r o t o t y p e O f ( _ t h i s ) & & _ t h i s ! = = s i g n a l s _ g l o b a l ? _ t h i s : s i g n a l s _ g l o b a l ; \ \ n } \ \ n \ \ n / / s r c / h e l p e r s . j s \ \ n v a r h a s O w n = ( . . . a ) = > O b j e c t . p r o t o t y p e . h a s O w n P r o p e r t y . c a l l ( . . . a ) ; \ \ n f u n c t i o n i s U n d e f ( v a l u e ) { \ \ n \ \ t r e t u r n t y p e o f v a l u e = = = \ \ \ " u n d e f i n e d \ \ \ " ; \ \ n } \ \ n f u n c t i o n t y p e O f ( v ) { \ \ n \ \ t c o n s t t = t y p e o f v ; \ \ n \ \ t i f ( t ! = = \ \ \ " o b j e c t \ \ \ " ) r e t u r n t ; \ \ n \ \ t i f ( v = = = n u l l ) r e t u r n \ \ \ " n u l l \ \ \ " ; \ \ n \ \ t r e t u r n O b j e c t . p r o t o t y p e . t o S t r i n g . c a l l ( v ) ; \ \ n } \ \ n f u n c t i o n o n A b o r t ( s i g n a l 2 , l i s t e n e r ) { \ \ n \ \ t i f ( ! s i g n a l 2 | | ! ( s i g n a l 2 i n s t a n c e o f A b o r t S i g n a l ) ) \ \ n \ \ t \ \ t r e t u r n t r u e ; \ \ n \ \ t i f ( s i g n a l 2 . a b o r t e d ) \ \ n \ \ t \ \ t r e t u r n ; \ \ n \ \ t s i g n a l 2 . a d d E v e n t L i s t e n e r ( \ \ \ " a b o r t \ \ \ " , l i s t e n e r ) ; \ \ n \ \ t r e t u r n f u n c t i o n c l e a n U p ( ) { \ \ n \ \ t \ \ t s i g n a l 2 . r e m o v e E v e n t L i s t e n e r ( \ \ \ " a b o r t \ \ \ " , l i s t e n e r ) ; \ \ n \ \ t } ; \ \ n } \ \ n f u n c t i o n o b s e r v e d A t t r i b u t e s ( i n s t a n c e , o b s e r v e d A t t r i b u t e 2 ) { \ \ n \ \ t c o n s t { o b s e r v e d A t t r i b u t e s : o b s e r v e d A t t r i b u t e s 3 = [ ] } = i n s t a n c e . c o n s t r u c t o r ; \ \ n \ \ t r e t u r n o b s e r v e d A t t r i b u t e s 3 . r e d u c e ( f u n c t i o n ( o u t , n a m e ) { \ \ n \ \ t \ \ t o u t [ k e b a b T o C a m e l ( n a m e ) ] = o b s e r v e d A t t r i b u t e 2 ( i n s t a n c e , n a m e ) ; \ \ n \ \ t \ \ t r e t u r n o u t ; \ \ n \ \ t } , { } ) ; \ \ n } \ \ n f u n c t i o n k e b a b T o C a m e l ( n a m e ) { \ \ n \ \ t r e t u r n n a m e . r e p l a c e ( / - . / g , ( x ) = > x [ 1 ] . t o U p p e r C a s e ( ) ) ; \ \ n } \ \ n \ \ n / / s r c / d o m - c o m m o n . j s \ \ n v a r e n v i r o m e n t = { \ \ n \ \ t s e t D e l e t e A t t r , \ \ n \ \ t s s r : \ \ \ " \ \ \ " , \ \ n \ \ t D : g l o b a l T h i s . d o c u m e n t , \ \ n \ \ t F : g l o b a l T h i s . D o c u m e n t F r a g m e n t , \ \ n \ \ t H : g l o b a l T h i s . H T M L E l e m e n t , \ \ n \ \ t S : g l o b a l T h i s . S V G E l e m e n t , \ \ n \ \ t M : g l o b a l T h i s . M u t a t i o n O b s e r v e r \ \ n } ; \ \ n f u n c t i o n s e t D e l e t e A t t r ( o b j , p r o p , v a l ) { \ \ n \ \ t R e f l e c t . s e t ( o b j , p r o p , v a l ) ; \ \ n \ \ t i f ( ! i s U n d e f ( v a l ) ) r e t u r n ; \ \ n \ \ t R e f l e c t . d e l e t e P r o p e r t y ( o b j , p r o p ) ; \ \ n \ \ t i f ( o b j i n s t a n c e o f e n v i r o m e n t . H & & o b j . g e t A t t r i b u t e ( p r o p ) = = = \ \ \ " u n d e f i n e d \ \ \ " ) \ \ n \ \ t \ \ t r e t u r n o b j . r e m o v e A t t r i b u t e ( p r o p ) ; \ \ n \ \ t i f ( R e f l e c t . g e t ( o b j , p r o p ) = = = \ \ \ " u n d e f i n e d \ \ \ " ) \ \ n \ \ t \ \ t r e t u r n R e f l e c t . s e t ( o b j , p r o p , \ \ \ " \ \ \ " ) ; \ \ n } \ \ n v a r k e y L T E = \ \ \ " _ _ d d e _ l i f e c y c l e s T o E v e n t s \ \ \ " ; \ \ n v a r e v c = \ \ \ " d d e : c o n n e c t e d \ \ \ " ; \ \ n v a r e v d = \ \ \ " d d e : d i s c o n n e c t e d \ \ \ " ; \ \ n v a r e v a = \ \ \ " d d e : a t t r i b u t e C h a n g e d \ \ \ " ; \ \ n \ \ n / / s r c / d o m . j s \ \ n v a r s c o p e s = [ { \ \ n \ \ t g e t s c o p e ( ) { \ \ n \ \ t \ \ t r e t u r n e n v i r o m e n t . D . b o d y ; \ \ n \ \ t } , \ \ n \ \ t h o s t : ( c ) = > c ? c ( e n v i r o m e n t . D . b o d y ) : e n v i r o m e n t . D . b o d y , \ \ n \ \ t p r e v e n t : t r u e \ \ n } ] ; \ \ n v a r s c o p e = { \ \ n \ \ t g e t c u r r e n t ( ) { \ \ n \ \ t \ \ t r e t u r n s c o p e s [ s c o p e s . l e n g t h - 1 ] ; \ \ n \ \ t } , \ \ n \ \ t g e t h o s t ( ) { \ \ n \ \ t \ \ t r e t u r n t h i s . c u r r e n t . h o s t ; \ \ n \ \ t } , \ \ n \ \ t p r e v e n t D e f a u l t ( ) { \ \ n \ \ t \ \ t c o n s t { c u r r e n t } = t h i s ; \ \ n \ \ t \ \ t c u r r e n t . p r e v e n t = t r u e ; \ \ n \ \ t \ \ t r e t u r n c u r r e n t ; \ \ n \ \ t } , \ \ n \ \ t g e t s t a t e ( ) { \ \ n \ \ t \ \ t r e t u r n [ . . . s c o p e s ] ; \ \ n \ \ t } , \ \ n \ \ t p u s h ( s = { } ) { \ \ n \ \ t \ \ t r e t u r n s c o p e s . p u s h ( O b j e c t . a s s i g n ( { } , t h i s . c u r r e n t , { p r e v e n t : f a l s e } , s ) ) ; \ \ n \ \ t } , \ \ n \ \ t p u s h R o o t ( ) { \ \ n \ \ t \ \ t r e t u r n s c o p e s . p u s h ( s c o p e s [ 0 ] ) ; \ \ n \ \ t } , \ \ n \ \ t p o p ( ) { \ \ n \ \ t \ \ t i f ( s c o p e s . l e n g t h = = = 1 ) r e t u r n ; \ \ n \ \ t \ \ t r e t u r n s c o p e s . p o p ( ) ; \ \ n \ \ t } \ \ n } ; \ \ n f u n c t i o n a p p e n d ( . . . e l s )
2023-11-23 16:30:20 +01:00
document.body.append(
el("p", "Listenning to `test` event.", on("test", console.log)).append(
el("br"),
el("button", "native", on("click", native)),
" ",
el("button", "dde", on("click", dde)),
" ",
el("button", "dde with options", on("click", ddeOptions))
)
);
function native(){
this.dispatchEvent(
new CustomEvent("test",
{ bubbles: true, detail: "hi" }
)
);
}
function dde(){
dispatchEvent("test")(this.parentElement, "hi");
}
function ddeOptions(){
dispatchEvent("test", { bubbles: true })(this, "hi");
}
2024-11-22 10:20:59 +01:00
< / code > < / div > < script > F l e m s ( d o c u m e n t . g e t E l e m e n t B y I d ( " c o d e - e x a m p l e - 2 - b 6 a 1 h b r x h 7 s " ) , J S O N . p a r s e ( " { \ " f i l e s \ " : [ { \ " n a m e \ " : \ " . j s \ " , \ " c o n t e n t \ " : \ " i m p o r t { e l , o n , d i s p a t c h E v e n t } f r o m \ \ \ " . / e s m - w i t h - s i g n a l s . j s \ \ \ " ; \ \ n d o c u m e n t . b o d y . a p p e n d ( \ \ n \ \ t e l ( \ \ \ " p \ \ \ " , \ \ \ " L i s t e n n i n g t o ` t e s t ` e v e n t . \ \ \ " , o n ( \ \ \ " t e s t \ \ \ " , c o n s o l e . l o g ) ) . a p p e n d ( \ \ n \ \ t \ \ t e l ( \ \ \ " b r \ \ \ " ) , \ \ n \ \ t \ \ t e l ( \ \ \ " b u t t o n \ \ \ " , \ \ \ " n a t i v e \ \ \ " , o n ( \ \ \ " c l i c k \ \ \ " , n a t i v e ) ) , \ \ n \ \ t \ \ t \ \ \ " \ \ \ " , \ \ n \ \ t \ \ t e l ( \ \ \ " b u t t o n \ \ \ " , \ \ \ " d d e \ \ \ " , o n ( \ \ \ " c l i c k \ \ \ " , d d e ) ) , \ \ n \ \ t \ \ t \ \ \ " \ \ \ " , \ \ n \ \ t \ \ t e l ( \ \ \ " b u t t o n \ \ \ " , \ \ \ " d d e w i t h o p t i o n s \ \ \ " , o n ( \ \ \ " c l i c k \ \ \ " , d d e O p t i o n s ) ) \ \ n \ \ t ) \ \ n ) ; \ \ n f u n c t i o n n a t i v e ( ) { \ \ n \ \ t t h i s . d i s p a t c h E v e n t ( \ \ n \ \ t \ \ t n e w C u s t o m E v e n t ( \ \ \ " t e s t \ \ \ " , \ \ n \ \ t \ \ t \ \ t { b u b b l e s : t r u e , d e t a i l : \ \ \ " h i \ \ \ " } \ \ n \ \ t \ \ t ) \ \ n \ \ t ) ; \ \ n } \ \ n f u n c t i o n d d e ( ) { \ \ n \ \ t d i s p a t c h E v e n t ( \ \ \ " t e s t \ \ \ " ) ( t h i s . p a r e n t E l e m e n t , \ \ \ " h i \ \ \ " ) ; \ \ n } \ \ n f u n c t i o n d d e O p t i o n s ( ) { \ \ n \ \ t d i s p a t c h E v e n t ( \ \ \ " t e s t \ \ \ " , { b u b b l e s : t r u e } ) ( t h i s , \ \ \ " h i \ \ \ " ) ; \ \ n } \ \ n \ " } , { \ " n a m e \ " : \ " e s m - w i t h - s i g n a l s . j s \ " , \ " c o n t e n t \ " : \ " / / s r c / s i g n a l s - c o m m o n . j s \ \ n v a r s i g n a l s _ g l o b a l = { \ \ n \ \ t i s S i g n a l ( a t t r i b u t e s ) { \ \ n \ \ t \ \ t r e t u r n f a l s e ; \ \ n \ \ t } , \ \ n \ \ t p r o c e s s R e a c t i v e A t t r i b u t e ( o b j , k e y , a t t r , s e t ) { \ \ n \ \ t \ \ t r e t u r n a t t r ; \ \ n \ \ t } \ \ n } ; \ \ n f u n c t i o n r e g i s t e r R e a c t i v i t y ( d e f , g l o b a l = t r u e ) { \ \ n \ \ t i f ( g l o b a l ) r e t u r n O b j e c t . a s s i g n ( s i g n a l s _ g l o b a l , d e f ) ; \ \ n \ \ t O b j e c t . s e t P r o t o t y p e O f ( d e f , s i g n a l s _ g l o b a l ) ; \ \ n \ \ t r e t u r n d e f ; \ \ n } \ \ n f u n c t i o n s i g n a l s ( _ t h i s ) { \ \ n \ \ t r e t u r n s i g n a l s _ g l o b a l . i s P r o t o t y p e O f ( _ t h i s ) & & _ t h i s ! = = s i g n a l s _ g l o b a l ? _ t h i s : s i g n a l s _ g l o b a l ; \ \ n } \ \ n \ \ n / / s r c / h e l p e r s . j s \ \ n v a r h a s O w n = ( . . . a ) = > O b j e c t . p r o t o t y p e . h a s O w n P r o p e r t y . c a l l ( . . . a ) ; \ \ n f u n c t i o n i s U n d e f ( v a l u e ) { \ \ n \ \ t r e t u r n t y p e o f v a l u e = = = \ \ \ " u n d e f i n e d \ \ \ " ; \ \ n } \ \ n f u n c t i o n t y p e O f ( v ) { \ \ n \ \ t c o n s t t = t y p e o f v ; \ \ n \ \ t i f ( t ! = = \ \ \ " o b j e c t \ \ \ " ) r e t u r n t ; \ \ n \ \ t i f ( v = = = n u l l ) r e t u r n \ \ \ " n u l l \ \ \ " ; \ \ n \ \ t r e t u r n O b j e c t . p r o t o t y p e . t o S t r i n g . c a l l ( v ) ; \ \ n } \ \ n f u n c t i o n o n A b o r t ( s i g n a l 2 , l i s t e n e r ) { \ \ n \ \ t i f ( ! s i g n a l 2 | | ! ( s i g n a l 2 i n s t a n c e o f A b o r t S i g n a l ) ) \ \ n \ \ t \ \ t r e t u r n t r u e ; \ \ n \ \ t i f ( s i g n a l 2 . a b o r t e d ) \ \ n \ \ t \ \ t r e t u r n ; \ \ n \ \ t s i g n a l 2 . a d d E v e n t L i s t e n e r ( \ \ \ " a b o r t \ \ \ " , l i s t e n e r ) ; \ \ n \ \ t r e t u r n f u n c t i o n c l e a n U p ( ) { \ \ n \ \ t \ \ t s i g n a l 2 . r e m o v e E v e n t L i s t e n e r ( \ \ \ " a b o r t \ \ \ " , l i s t e n e r ) ; \ \ n \ \ t } ; \ \ n } \ \ n f u n c t i o n o b s e r v e d A t t r i b u t e s ( i n s t a n c e , o b s e r v e d A t t r i b u t e 2 ) { \ \ n \ \ t c o n s t { o b s e r v e d A t t r i b u t e s : o b s e r v e d A t t r i b u t e s 3 = [ ] } = i n s t a n c e . c o n s t r u c t o r ; \ \ n \ \ t r e t u r n o b s e r v e d A t t r i b u t e s 3 . r e d u c e ( f u n c t i o n ( o u t , n a m e ) { \ \ n \ \ t \ \ t o u t [ k e b a b T o C a m e l ( n a m e ) ] = o b s e r v e d A t t r i b u t e 2 ( i n s t a n c e , n a m e ) ; \ \ n \ \ t \ \ t r e t u r n o u t ; \ \ n \ \ t } , { } ) ; \ \ n } \ \ n f u n c t i o n k e b a b T o C a m e l ( n a m e ) { \ \ n \ \ t r e t u r n n a m e . r e p l a c e ( / - . / g , ( x ) = > x [ 1 ] . t o U p p e r C a s e ( ) ) ; \ \ n } \ \ n \ \ n / / s r c / d o m - c o m m o n . j s \ \ n v a r e n v i r o m e n t = { \ \ n \ \ t s e t D e l e t e A t t r , \ \ n \ \ t s s r : \ \ \ " \ \ \ " , \ \ n \ \ t D : g l o b a l T h i s . d o c u m e n t , \ \ n \ \ t F : g l o b a l T h i s . D o c u m e n t F r a g m e n t , \ \ n \ \ t H : g l o b a l T h i s . H T M L E l e m e n t , \ \ n \ \ t S : g l o b a l T h i s . S V G E l e m e n t , \ \ n \ \ t M : g l o b a l T h i s . M u t a t i o n O b s e r v e r \ \ n } ; \ \ n f u n c t i o n s e t D e l e t e A t t r ( o b j , p r o p , v a l ) { \ \ n \ \ t R e f l e c t . s e t ( o b j , p r o p , v a l ) ; \ \ n \ \ t i f ( ! i s U n d e f ( v a l ) ) r e t u r n ; \ \ n \ \ t R e f l e c t . d e l e t e P r o p e r t y ( o b j , p r o p ) ; \ \ n \ \ t i f ( o b j i n s t a n c e o f e n v i r o m e n t . H & & o b j . g e t A t t r i b u t e ( p r o p ) = = = \ \ \ " u n d e f i n e d \ \ \ " ) \ \ n \ \ t \ \ t r e t u r n o b j . r e m o v e A t t r i b u t e ( p r o p ) ; \ \ n \ \ t i f ( R e f l e c t . g e t ( o b j , p r o p ) = = = \ \ \ " u n d e f i n e d \ \ \ " ) \ \ n \ \ t \ \ t r e t u r n R e f l e c t . s e t ( o b j , p r o p , \ \ \ " \ \ \ " ) ; \ \ n } \ \ n v a r k e y L T E = \ \ \ " _ _ d d e _ l i f e c y c l e s T o E v e n t s \ \ \ " ; \ \ n v a r e v c = \ \ \ " d d e : c o n n e c t e d \ \ \ " ; \ \ n v a r e v d = \ \ \ " d d e : d i s c o n n e c t e d \ \ \ " ; \ \ n v a r e v a = \ \ \ " d d e : a t t r i b u t e C h a n g e d \ \ \ " ; \ \ n \ \ n / / s r c / d o m . j s \ \ n v a r s c o p e s = [ { \ \ n \ \ t g e t s c o p e ( ) { \ \ n \ \ t \ \ t r e t u r n e n v i r o m e n t . D . b o d y ; \ \ n \ \ t } , \ \ n \ \ t h o s t : ( c ) = > c ? c ( e n v i r o m e n t . D . b o d y ) : e n v i r o m e n t . D . b o d y , \ \ n \ \ t p r e v e n t : t r u e \ \ n } ] ; \ \ n v a r s c o p e = { \ \ n \ \ t g e t c u r r e n t ( ) { \ \ n \ \ t \ \ t r e t u r n s c o p e s [ s c o p e s . l e n g t h - 1 ] ; \ \ n \ \ t } , \ \ n \ \ t g e t h o s t ( ) { \ \ n \ \ t \ \ t r e t u r n t h i s . c u r r e n t . h o s t ; \ \ n \ \ t } , \ \ n \ \ t p r e v e n t D e f a u l t ( ) { \ \ n \ \ t \ \ t c o n s t { c u r r e n t } = t h i s ; \ \ n \ \ t \ \ t c u r r e n t . p r e v e n t = t r u e ; \ \ n \ \ t \ \ t r e t u r n c u r r e n t ; \ \ n \ \ t } , \ \ n \ \ t g e t s t a t e ( ) { \ \ n \ \ t \ \ t r e t u r n [ . . . s c o p e s ] ; \ \ n \ \ t } , \ \ n \ \ t p u s h ( s = { } ) { \ \ n \ \ t \ \ t r e t u r n s c o p e s . p u s h ( O b j e c t . a s s i g n ( { } , t h i s . c u r r e n t , { p r e v e n t : f a l s e } , s ) ) ; \ \ n \ \ t } , \ \ n \ \ t p u s h R o o t ( ) { \ \ n \ \ t \ \ t r e t u r n s c o p e s . p u s h ( s c o p e s [ 0
