2024-05-22 21:43:49 +02: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. Custom elements< / 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-05-22 21:43:49 +02: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 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 "./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-05-22 21:43:49 +02: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 k = { \ \ n \ \ t i s S i g n a l ( t ) { \ \ n \ \ t \ \ t r e t u r n ! 1 ; \ \ 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 ( t , e , n , r ) { \ \ n \ \ t \ \ t r e t u r n n ; \ \ n \ \ t } \ \ n } ; \ \ n f u n c t i o n B ( t , e = ! 0 ) { \ \ n \ \ t r e t u r n e ? O b j e c t . a s s i g n ( k , t ) : ( O b j e c t . s e t P r o t o t y p e O f ( t , k ) , t ) ; \ \ n } \ \ n f u n c t i o n W ( t ) { \ \ n \ \ t r e t u r n k . i s P r o t o t y p e O f ( t ) & & t ! = = k ? t : k ; \ \ n } \ \ n \ \ n / / s r c / h e l p e r s . j s \ \ n v a r T = ( . . . t ) = > 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 ( . . . t ) ; \ \ n f u n c t i o n S ( t ) { \ \ n \ \ t r e t u r n t y p e o f t > \ \ \ " u \ \ \ " ; \ \ n } \ \ n f u n c t i o n X ( t ) { \ \ n \ \ t l e t e = t y p e o f t ; \ \ n \ \ t r e t u r n e ! = = \ \ \ " o b j e c t \ \ \ " ? e : t = = = n u l l ? \ \ \ " n u l l \ \ \ " : 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 ( t ) ; \ \ n } \ \ n f u n c t i o n q ( t , e ) { \ \ n \ \ t i f ( ! t | | ! ( t 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 ! 0 ; \ \ n \ \ t i f ( ! t . a b o r t e d ) \ \ n \ \ t \ \ t r e t u r n t . a d d E v e n t L i s t e n e r ( \ \ \ " a b o r t \ \ \ " , e ) , f u n c t i o n ( ) { \ \ n \ \ t \ \ t \ \ t t . r e m o v e E v e n t L i s t e n e r ( \ \ \ " a b o r t \ \ \ " , e ) ; \ \ n \ \ t \ \ t } ; \ \ n } \ \ n f u n c t i o n F ( t , e ) { \ \ n \ \ t l e t { o b s e r v e d A t t r i b u t e s : n = [ ] } = t . c o n s t r u c t o r ; \ \ n \ \ t r e t u r n n . r e d u c e ( f u n c t i o n ( r , o ) { \ \ n \ \ t \ \ t r e t u r n r [ p t ( o ) ] = e ( t , o ) , r ; \ \ n \ \ t } , { } ) ; \ \ n } \ \ n f u n c t i o n p t ( t ) { \ \ n \ \ t r e t u r n t . r e p l a c e ( / - . / g , ( e ) = > e [ 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 d = { \ \ n \ \ t s e t D e l e t e A t t r : l t , \ \ 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 l t ( t , e , n ) { \ \ n \ \ t i f ( R e f l e c t . s e t ( t , e , n ) , ! ! S ( n ) ) { \ \ n \ \ t \ \ t i f ( R e f l e c t . d e l e t e P r o p e r t y ( t , e ) , t i n s t a n c e o f d . H & & t . g e t A t t r i b u t e ( e ) = = = \ \ \ " u n d e f i n e d \ \ \ " ) \ \ n \ \ t \ \ t \ \ t r e t u r n t . r e m o v e A t t r i b u t e ( e ) ; \ \ n \ \ t \ \ t i f ( R e f l e c t . g e t ( t , e ) = = = \ \ \ " u n d e f i n e d \ \ \ " ) \ \ n \ \ t \ \ t \ \ t r e t u r n R e f l e c t . s e t ( t , e , \ \ \ " \ \ \ " ) ; \ \ n \ \ t } \ \ n } \ \ n v a r C = \ \ \ " _ _ d d e _ l i f e c y c l e s T o E v e n t s \ \ \ " , _ = \ \ \ " d d e : c o n n e c t e d \ \ \ " , O = \ \ \ " d d e : d i s c o n n e c t e d \ \ \ " , M = \ \ \ " 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 A = [ { \ \ n \ \ t g e t s c o p e ( ) { \ \ n \ \ t \ \ t r e t u r n d . D . b o d y ; \ \ n \ \ t } , \ \ n \ \ t h o s t : ( t ) = > t ? t ( d . D . b o d y ) : d . D . b o d y , \ \ n \ \ t p r e v e n t : ! 0 \ \ n } ] , m = { \ \ n \ \ t g e t c u r r e n t ( ) { \ \ n \ \ t \ \ t r e t u r n A [ A . 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 l e t { c u r r e n t : t } = t h i s ; \ \ n \ \ t \ \ t r e t u r n t . p r e v e n t = ! 0 , t ; \ \ n \ \ t } , \ \ n \ \ t g e t s t a t e ( ) { \ \ n \ \ t \ \ t r e t u r n [ . . . A ] ; \ \ n \ \ t } , \ \ n \ \ t p u s h ( t = { } ) { \ \ n \ \ t \ \ t r e t u r n A . 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 : ! 1 } , t ) ) ; \ \ n \ \ t } , \ \ n \ \ t p u s h R o o t ( ) { \ \ n \ \ t \ \ t r e t u r n A . p u s h ( A [ 0 ] ) ; \ \ n \ \ t } , \ \ n \ \ t p o p ( ) { \ \ n \ \ t \ \ t i f ( A . l e n g t h ! = = 1 ) \ \ n \ \ t \ \ t \ \ t r e t u r n A . p o p ( ) ; \ \ n \ \ t } \ \ n } ; \ \ n f u n c t i o n Y ( . . . t ) { \ \ n \ \ t r e t u r n t h i s . a p p e n d O r i g i n a l ( . . . t ) , t h i s ; \ \ n } \ \ n f u n c t i o n h t ( t ) { \ \ n \ \ t r e t u r n t . a p p e n d = = = Y | | ( t . a p p e n d O r i g i n a l = t . a p p e n d , t . a p p e n d = Y ) , t ; \ \ n } \ \ n v a r $ ; \ \ n f u n c t i o n j ( t , e , . . . n ) { \ \ n \ \ t l e t r = W ( t h i s ) , o = 0 , c , i ; \ \ n \ \ t s w i t c h ( ( O b j e c t ( e ) ! = = e | | r . i s S i g n a l ( e ) ) & & ( e = { t e x t C o n t e n t : e } ) , ! 0 ) { \ \ n \ \ t \ \ t c a s e t y p e o f t = = \ \ \ " f u n c t i o n \ \ \ " : { \ \ n \ \ t \ \ t \ \ t o = 1 , m . p u s h ( { s c o p e : t , h o s t : ( . . . v ) = > v . l e n g t h ? ( o = = = 1 ? n . u n s h i f t ( . . . v ) : v . f o r E a c h ( ( l ) = > l ( i ) ) , v o i d 0 ) : i } ) , c = t ( e | | v o i d 0 ) ; \ \ n \ \ t \ \ t \ \ t l e t a = c i n s t a n c e o f d . F ; \ \ n \ \ t \ \ t \ \ t i f ( c . n o d e N a m e = = = \ \ \ " # c o m m e n t \ \ \ " ) \ \ n \ \ t \ \ t \ \ t \ \ t b r e a k ; \ \ n \ \ t \ \ t \ \ t l e t h = j . m a r k ( { \ \ n \ \ t \ \ t \ \ t \ \ t t y p e : \ \ \ " c o m p o n e n t \ \ \ " , \ \ n \ \ t \ \ t \ \ t \ \ t n a m e : t . n a m e , \ \ n \ \ t \ \ t \ \ t \ \ t h o s t : a ? \ \ \ " t h i s \ \ \ " : \ \ \ " p a r e n t E l e m e n t \ \ \ " \ \ n \ \ t \ \ t \ \ t } ) ; \ \ n \ \ t \ \ t \ \ t c . p r e p e n d ( h ) , a & & ( i = h ) ; \ \ n \ \ t \ \ t \ \ t b r e a k ; \ \ n \ \ t \ \ t } \ \ n \ \ t \ \ t c a s e t = = = \ \ \ " # t e x t \ \ \ " : \ \ n \ \ t \ \ t \ \ t c = P . c a l l ( t h i s , d . D . c r e a t e T e x t N o d e ( \ \ \ " \ \ \ " ) , e ) ; \ \ n \ \ t \ \ t \ \ t b r e a k ; \ \ n \ \ t \ \ t c a s e ( t = = = \ \ \ " < > \ \ \ " | | ! t ) : \ \ n \ \ t \ \ t \ \ t c = P . c a l l ( t h i s , d
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-05-22 21:43:49 +02: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 k = { \ \ n \ \ t i s S i g n a l ( t ) { \ \ n \ \ t \ \ t r e t u r n ! 1 ; \ \ 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 ( t , e , n , r ) { \ \ n \ \ t \ \ t r e t u r n n ; \ \ n \ \ t } \ \ n } ; \ \ n f u n c t i o n B ( t , e = ! 0 ) { \ \ n \ \ t r e t u r n e ? O b j e c t . a s s i g n ( k , t ) : ( O b j e c t . s e t P r o t o t y p e O f ( t , k ) , t ) ; \ \ n } \ \ n f u n c t i o n W ( t ) { \ \ n \ \ t r e t u r n k . i s P r o t o t y p e O f ( t ) & & t ! = = k ? t : k ; \ \ n } \ \ n \ \ n / / s r c / h e l p e r s . j s \ \ n v a r T = ( . . . t ) = > 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 ( . . . t ) ; \ \ n f u n c t i o n S ( t ) { \ \ n \ \ t r e t u r n t y p e o f t > \ \ \ " u \ \ \ " ; \ \ n } \ \ n f u n c t i o n X ( t ) { \ \ n \ \ t l e t e = t y p e o f t ; \ \ n \ \ t r e t u r n e ! = = \ \ \ " o b j e c t \ \ \ " ? e : t = = = n u l l ? \ \ \ " n u l l \ \ \ " : 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 ( t ) ; \ \ n } \ \ n f u n c t i o n q ( t , e ) { \ \ n \ \ t i f ( ! t | | ! ( t 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 ! 0 ; \ \ n \ \ t i f ( ! t . a b o r t e d ) \ \ n \ \ t \ \ t r e t u r n t . a d d E v e n t L i s t e n e r ( \ \ \ " a b o r t \ \ \ " , e ) , f u n c t i o n ( ) { \ \ n \ \ t \ \ t \ \ t t . r e m o v e E v e n t L i s t e n e r ( \ \ \ " a b o r t \ \ \ " , e ) ; \ \ n \ \ t \ \ t } ; \ \ n } \ \ n f u n c t i o n F ( t , e ) { \ \ n \ \ t l e t { o b s e r v e d A t t r i b u t e s : n = [ ] } = t . c o n s t r u c t o r ; \ \ n \ \ t r e t u r n n . r e d u c e ( f u n c t i o n ( r , o ) { \ \ n \ \ t \ \ t r e t u r n r [ p t ( o ) ] = e ( t , o ) , r ; \ \ n \ \ t } , { } ) ; \ \ n } \ \ n f u n c t i o n p t ( t ) { \ \ n \ \ t r e t u r n t . r e p l a c e ( / - . / g , ( e ) = > e [ 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 d = { \ \ n \ \ t s e t D e l e t e A t t r : l t , \ \ 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 l t ( t , e , n ) { \ \ n \ \ t i f ( R e f l e c t . s e t ( t , e , n ) , ! ! S ( n ) ) { \ \ n \ \ t \ \ t i f ( R e f l e c t . d e l e t e P r o p e r t y ( t , e ) , t i n s t a n c e o f d . H & & t . g e t A t t r i b u t e ( e ) = = = \ \ \ " u n d e f i n e d \ \ \ " ) \ \ n \ \ t \ \ t \ \ t r e t u r n t . r e m o v e A t t r i b u t e ( e ) ; \ \ n \ \ t \ \ t i f ( R e f l e c t . g e t ( t , e ) = = = \ \ \ " u n d e f i n e d \ \ \ " ) \ \ n \ \ t \ \ t \ \ t r e t u r n R e f l e c t . s e t ( t , e , \ \ \ " \ \ \ " ) ; \ \ n \ \ t } \ \ n } \ \ n v a r C = \ \ \ " _ _ d d e _ l i f e c y c l e s T o E v e n t s \ \ \ " , _ = \ \ \ " d d e : c o n n e c t e d \ \ \ " , O = \ \ \ " d d e : d i s c o n n e c t e d \ \ \ " , M = \ \ \ " 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 A = [ { \ \ n \ \ t g e t s c o p e ( ) { \ \ n \ \ t \ \ t r e t u r n d . D . b o d y ; \ \ n \ \ t } , \ \ n \ \ t h o s t : ( t ) = > t ? t ( d . D . b o d y ) : d . D . b o d y , \ \ n \ \ t p r e v e n t : ! 0 \ \ n } ] , m = { \ \ n \ \ t g e t c u r r e n t ( ) { \ \ n \ \ t \ \ t r e t u r n A [ A . 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 l e t { c u r r e n t : t } = t h i s ; \ \ n \ \ t \ \ t r e t u r n t . p r e v e n t = ! 0 , t ; \ \ n \ \ t } , \ \ n \ \ t g e t s t a t e ( ) { \ \ n \ \ t \ \ t r e t u r n [ . . . A ] ; \ \ n \ \ t } , \ \ n \ \ t p u s h ( t = { } ) { \ \ n \ \ t \ \ t r e t u r n A . 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 : ! 1 } , t ) ) ; \ \ n \ \ t } , \ \ n \ \ t p u s h R o o t ( ) { \ \ n \ \ t \ \ t r e t u r n A . p u s h ( A [ 0 ] ) ; \ \ n \ \ t } , \ \ n \ \ t p o p ( ) { \ \ n \ \ t \ \ t i f ( A . l e n g t h ! = = 1 ) \ \ n \ \ t \ \ t \ \ t r e t u r n A . p o p ( ) ; \ \ n \ \ t } \ \ n } ; \ \ n f u n c t i o n Y ( . . . t ) { \ \ n \ \ t r e t u r n t h i s . a p p e n d O r i g i n a l ( . . . t ) , t h i s ; \ \ n } \ \ n f u n c t i o n h t ( t ) { \ \ n \ \ t r e t u r n t . a p p e n d = = = Y | | ( t . a p p e n d O r i g i n a l = t . a p p e n d , t . a p p e n d = Y ) , t ; \ \ n } \ \ n v a r $ ; \ \ n f u n c t i o n j ( t , e , . . . n ) { \ \ n \ \ t l e t r = W ( t h i s ) , o = 0 , c , i ; \ \ n \ \ t s w i t c h ( ( O b j e c t ( e ) ! = = e | | r . i s S i g n a l ( e ) ) & & ( e = { t e x t C o n t e n t : e } ) , ! 0 ) { \ \ n \ \ t \ \ t c a s e t y p e o f t = = \ \ \ " f u n c t i o n \ \ \ " : { \ \ n \ \ t \ \ t \ \ t o = 1 , m . p u s h ( { s c o p e : t , h o s t : ( . . . v ) = > v . l e n g t h ? ( o = = = 1 ? n . u n s h i f t ( . . . v ) : v . f o r E a c h ( ( l ) = > l ( i ) ) , v o i d 0 ) : i } ) , c = t ( e | | v o i d 0 ) ; \ \ n \ \ t \ \ t \ \ t l e t a = c i n s t a n c e o f d . F ; \ \ n \ \ t \ \ t \ \ t i f ( c . n o d e N a m e = = = \ \ \ " # c o m m e n t \ \ \ " ) \ \ n \ \ t \ \ t \ \ t \ \ t b r e a k ; \ \ n \ \ t \ \ t \ \ t l e t h = j . m a r k ( { \ \ n \ \ t \ \ t \ \ t \ \ t t y p e : \ \ \ " c o m p o n e n t \ \ \ " , \ \ n \ \ t \ \ t \ \ t \ \ t n a m e : t . n a m e , \ \ n \ \ t \ \ t \ \ t \ \ t h o s t : a ? \ \ \ " t h i s \ \ \ " : \ \ \ " p a r e n t E l e m e n t \ \ \ " \ \ n \ \ t \ \ t \ \ t } ) ; \ \ n \ \ t \ \ t \ \ t c . p r e p e n d ( h ) , a & & ( i = h ) ; \ \ n \ \ t \ \ t \ \ t b r e a k ; \ \ n \ \ t \ \ t } \
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-05-22 21:43:49 +02: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 k = { \ \ n \ \ t i s S i g n a l ( t ) { \ \ n \ \ t \ \ t r e t u r n ! 1 ; \ \ 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 ( t , e , n , r ) { \ \ n \ \ t \ \ t r e t u r n n ; \ \ n \ \ t } \ \ n } ; \ \ n f u n c t i o n B ( t , e = ! 0 ) { \ \ n \ \ t r e t u r n e ? O b j e c t . a s s i g n ( k , t ) : ( O b j e c t . s e t P r o t o t y p e O f ( t , k ) , t ) ; \ \ n } \ \ n f u n c t i o n W ( t ) { \ \ n \ \ t r e t u r n k . i s P r o t o t y p e O f ( t ) & & t ! = = k ? t : k ; \ \ n } \ \ n \ \ n / / s r c / h e l p e r s . j s \ \ n v a r T = ( . . . t ) = > 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 ( . . . t ) ; \ \ n f u n c t i o n S ( t ) { \ \ n \ \ t r e t u r n t y p e o f t > \ \ \ " u \ \ \ " ; \ \ n } \ \ n f u n c t i o n X ( t ) { \ \ n \ \ t l e t e = t y p e o f t ; \ \ n \ \ t r e t u r n e ! = = \ \ \ " o b j e c t \ \ \ " ? e : t = = = n u l l ? \ \ \ " n u l l \ \ \ " : 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 ( t ) ; \ \ n } \ \ n f u n c t i o n q ( t , e ) { \ \ n \ \ t i f ( ! t | | ! ( t 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 ! 0 ; \ \ n \ \ t i f ( ! t . a b o r t e d ) \ \ n \ \ t \ \ t r e t u r n t . a d d E v e n t L i s t e n e r ( \ \ \ " a b o r t \ \ \ " , e ) , f u n c t i o n ( ) { \ \ n \ \ t \ \ t \ \ t t . r e m o v e E v e n t L i s t e n e r ( \ \ \ " a b o r t \ \ \ " , e ) ; \ \ n \ \ t \ \ t } ; \ \ n } \ \ n f u n c t i o n F ( t , e ) { \ \ n \ \ t l e t { o b s e r v e d A t t r i b u t e s : n = [ ] } = t . c o n s t r u c t o r ; \ \ n \ \ t r e t u r n n . r e d u c e ( f u n c t i o n ( r , o ) { \ \ n \ \ t \ \ t r e t u r n r [ p t ( o ) ] = e ( t , o ) , r ; \ \ n \ \ t } , { } ) ; \ \ n } \ \ n f u n c t i o n p t ( t ) { \ \ n \ \ t r e t u r n t . r e p l a c e ( / - . / g , ( e ) = > e [ 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 d = { \ \ n \ \ t s e t D e l e t e A t t r : l t , \ \ 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 l t ( t , e , n ) { \ \ n \ \ t i f ( R e f l e c t . s e t ( t , e , n ) , ! ! S ( n ) ) { \ \ n \ \ t \ \ t i f ( R e f l e c t . d e l e t e P r o p e r t y ( t , e ) , t i n s t a n c e o f d . H & & t . g e t A t t r i b u t e ( e ) = = = \ \ \ " u n d e f i n e d \ \ \ " ) \ \ n \ \ t \ \ t \ \ t r e t u r n t . r e m o v e A t t r i b u t e ( e ) ; \ \ n \ \ t \ \ t i f ( R e f l e c t . g e t ( t , e ) = = = \ \ \ " u n d e f i n e d \ \ \ " ) \ \ n \ \ t \ \ t \ \ t r e t u r n R e f l e c t . s e t ( t , e , \ \ \ " \ \ \ " ) ; \ \ n \ \ t } \ \ n } \ \ n v a r C = \ \ \ " _ _ d d e _ l i f e c y c l e s T o E v e n t s \ \ \ " , _ = \ \ \ " d d e : c o n n e c t e d \ \ \ " , O = \ \ \ " d d e : d i s c o n n e c t e d \ \ \ " , M = \ \ \ " 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 A = [ { \ \ n \ \ t g e t s c o p e ( ) { \ \ n \ \ t \ \ t r e t u r n d . D . b o d y ; \ \ n \ \ t } , \ \ n \ \ t h o s t : ( t ) = > t ? t ( d . D . b o d y ) : d . D . b o d y , \ \ n \ \ t p r e v e n t : ! 0 \ \ n } ] , m = { \ \ n \ \ t g e t c u r r e n t ( ) { \ \ n \ \ t \ \ t r e t u r n A [ A . 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 l e t { c u r r e n t : t } = t h i s ; \ \ n \ \ t \ \ t r e t u r n t . p r e v e n t = ! 0 , t ; \ \ n \ \ t } , \ \ n \ \ t g e t s t a t e ( ) { \ \ n \ \ t \ \ t r e t u r n [ . . . A ] ; \ \ n \ \ t } , \ \ n \ \ t p u s h ( t = { } ) { \ \ n \ \ t \ \ t r e t u r n A . 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 : ! 1 } , t ) ) ; \ \ n \ \ t } , \ \ n \ \ t p u s h R o o t ( ) { \ \ n \ \ t \ \ t r e t u r n A . p u s h ( A [ 0 ] ) ; \ \ n \ \ t } , \ \ n \ \ t p o p ( ) { \ \ n \ \ t \ \ t i f ( A . l e n g t h ! = = 1 ) \ \ n \ \ t \ \ t \ \ t r e t u r n A . p o p ( ) ; \ \ n \ \ t } \ \ n } ; \ \ n f u n c t i o n Y ( . . . t ) { \ \ n \ \ t r e t u r n t h i s . a p p e n d O r i g i n a l ( . . . t ) , t h i s ; \ \ n } \ \ n f u n c t i o n h t ( t ) { \ \ n \ \ t r e t u r n t . a p p e n d = = = Y | | ( t . a p p e n d O r i g i n a l = t . a p p e n d , t . a p p e n d = Y ) , t ; \ \ n } \ \ n v a r $ ; \ \ n f u n c t i o n j ( t , e , . . . n ) { \ \ n \ \ t l e t r = W ( t h i s ) , o = 0 , c , i ; \ \ n \ \ t s w i t c h ( ( O b j e c t ( e ) ! = = e | | r . i s S i g n a l ( e ) ) & & ( e = { t e x t C o n t e n t : e } ) , ! 0 ) { \ \ n \ \ t \ \ t c a s e t y p e o f t = = \ \ \ " f u n c t i o n \ \ \ " : { \ \ n \ \ t \ \ t \ \ t o = 1 , m . p u s h ( { s c o p e : t , h o s t : ( . . . v ) = > v . l e n g t h ? ( o = = = 1 ? n . u n s h i f t ( . . . v ) : v
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-05-23 22:18:19 +02: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 k = { \ \ n \ \ t i s S i g n a l ( t ) { \ \ n \ \ t \ \ t r e t u r n ! 1 ; \ \ 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 ( t , e , n , r ) { \ \ n \ \ t \ \ t r e t u r n n ; \ \ n \ \ t } \ \ n } ; \ \ n f u n c t i o n B ( t , e = ! 0 ) { \ \ n \ \ t r e t u r n e ? O b j e c t . a s s i g n ( k , t ) : ( O b j e c t . s e t P r o t o t y p e O f ( t , k ) , t ) ; \ \ n } \ \ n f u n c t i o n W ( t ) { \ \ n \ \ t r e t u r n k . i s P r o t o t y p e O f ( t ) & & t ! = = k ? t : k ; \ \ n } \ \ n \ \ n / / s r c / h e l p e r s . j s \ \ n v a r T = ( . . . t ) = > 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 ( . . . t ) ; \ \ n f u n c t i o n S ( t ) { \ \ n \ \ t r e t u r n t y p e o f t > \ \ \ " u \ \ \ " ; \ \ n } \ \ n f u n c t i o n X ( t ) { \ \ n \ \ t l e t e = t y p e o f t ; \ \ n \ \ t r e t u r n e ! = = \ \ \ " o b j e c t \ \ \ " ? e : t = = = n u l l ? \ \ \ " n u l l \ \ \ " : 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 ( t ) ; \ \ n } \ \ n f u n c t i o n q ( t , e ) { \ \ n \ \ t i f ( ! t | | ! ( t 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 ! 0 ; \ \ n \ \ t i f ( ! t . a b o r t e d ) \ \ n \ \ t \ \ t r e t u r n t . a d d E v e n t L i s t e n e r ( \ \ \ " a b o r t \ \ \ " , e ) , f u n c t i o n ( ) { \ \ n \ \ t \ \ t \ \ t t . r e m o v e E v e n t L i s t e n e r ( \ \ \ " a b o r t \ \ \ " , e ) ; \ \ n \ \ t \ \ t } ; \ \ n } \ \ n f u n c t i o n F ( t , e ) { \ \ n \ \ t l e t { o b s e r v e d A t t r i b u t e s : n = [ ] } = t . c o n s t r u c t o r ; \ \ n \ \ t r e t u r n n . r e d u c e ( f u n c t i o n ( r , o ) { \ \ n \ \ t \ \ t r e t u r n r [ p t ( o ) ] = e ( t , o ) , r ; \ \ n \ \ t } , { } ) ; \ \ n } \ \ n f u n c t i o n p t ( t ) { \ \ n \ \ t r e t u r n t . r e p l a c e ( / - . / g , ( e ) = > e [ 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 d = { \ \ n \ \ t s e t D e l e t e A t t r : l t , \ \ 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 l t ( t , e , n ) { \ \ n \ \ t i f ( R e f l e c t . s e t ( t , e , n ) , ! ! S ( n ) ) { \ \ n \ \ t \ \ t i f ( R e f l e c t . d e l e t e P r o p e r t y ( t , e ) , t i n s t a n c e o f d . H & & t . g e t A t t r i b u t e ( e ) = = = \ \ \ " u n d e f i n e d \ \ \ " ) \ \ n \ \ t \ \ t \ \ t r e t u r n t . r e m o v e A t t r i b u t e ( e ) ; \ \ n \ \ t \ \ t i f ( R e f l e c t . g e t ( t , e ) = = = \ \ \ " u n d e f i n e d \ \ \ " ) \ \ n \ \ t \ \ t \ \ t r e t u r n R e f l e c t . s e t ( t , e , \ \ \ " \ \ \ " ) ; \ \ n \ \ t } \ \ n } \ \ n v a r C = \ \ \ " _ _ d d e _ l i f e c y c l e s T o E v e n t s \ \ \ " , _ = \ \ \ " d d e : c o n n e c t e d \ \ \ " , O = \ \ \ " d d e : d i s c o n n e c t e d \ \ \ " , M = \ \ \ " 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 A = [ { \ \ n \ \ t g e t s c o p e ( ) { \ \ n \ \ t \ \ t r e t u r n d . D . b o d y ; \ \ n \ \ t } , \ \ n \ \ t h o s t : ( t ) = > t ? t ( d . D . b o d y ) : d . D . b o d y , \ \ n \ \ t p r e v e n t : ! 0 \ \ n } ] , m = { \ \ n \ \ t g e t c u r r e n t ( ) { \ \ n \ \ t \ \ t r e t u r n A [ A . 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 l e t { c u r r e n t : t } = t h i s ; \ \ n \ \ t \ \ t r e t u r n t . p r e v e n t = ! 0 , t ; \ \ n \ \ t } , \ \ n \ \ t g e t s t a t e ( ) { \ \ n \ \ t \ \ t r e t u r n [ . . . A ] ; \ \ n \ \ t } , \ \ n \ \ t p u s h ( t = { } ) { \ \ n \ \ t \ \ t r e t u r n A . 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 : ! 1 } , t ) ) ; \ \ n \ \ t } , \ \ n \ \ t p u s h R o o t ( ) { \ \ n \ \ t \ \ t r e t u r n A . p u s h ( A [ 0 ] ) ; \ \ n \ \ t } , \ \ n \ \ t p o p ( ) { \ \ n \ \ t \ \ t i f ( A . l e n g t h ! = = 1 ) \ \ n \ \ t \ \ t \ \ t r e t u r n A . p o p ( ) ; \ \ n \ \ t } \ \ n } ; \ \ n f u n c t i o n Y ( . . . t ) { \ \ n \ \ t r e t u r n t h i s . a p p e n d O r i g i n a l ( . . . t ) , t h i s ; \ \ n } \ \ n f u n c t i o n h t ( t ) { \ \ n \ \ t r e t u r n t . a p p e n d = = = Y | | ( t . a p p e n d O r i g i n a l = t . a p p e n d , t . a p p e n d = Y ) , t ; \ \ n } \ \ n v a r $ ; \ \ n f u n c t i o n j ( t , e , . . . n ) { \ \ n \ \ t l e t r = W ( t h i s ) , o = 0 , c , i ; \ \ n \ \ t s w i t c h ( ( O b j e c t ( e ) ! = = e | | r . i s S i g n a l ( e ) ) & & ( e = { t e x t C o n t e n t : e } ) , ! 0 ) { \ \ n \ \ t \ \ t c a s e t y p e o f t = = \ \ \ " f u n c t i o n \ \ \ " : { \ \ n \ \ t \ \ t \ \ t o = 1 , m . p u s h ( { s c o p e : t , h o s t : ( . . . v ) = > v . l e n g t h ? ( o = = = 1 ? n . u n s h i f t ( . . . v ) : v . f o r E a c h ( ( l ) = > l ( i ) ) , v o i d 0 ) : i } ) , c = t ( e | | v o i d 0 ) ; \ \ n \ \ t \ \ t \ \ t l e t a = c i n s t a n c e o f d . F ; \ \ n \ \ t \ \ t \ \ t i f ( c . n o d e N a m e = = = \ \ \ " # c o m m e n t \ \ \ " ) \ \ n \ \ t \ \ t \ \ t \ \ t b r e a k ; \ \ n \ \ t \ \ t \ \ t l e t h = j . m a r k ( { \ \ n \ \ t \ \ t \ \ t \ \ t t y p e : \ \ \ " c o m p o n e n t \ \ \ " , \ \ n \ \ t \ \ t \ \ t \ \ t n a m e : t . n a m e
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-05-22 21:43:49 +02: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 k = { \ \ n \ \ t i s S i g n a l ( t ) { \ \ n \ \ t \ \ t r e t u r n ! 1 ; \ \ 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 ( t , e , n , r ) { \ \ n \ \ t \ \ t r e t u r n n ; \ \ n \ \ t } \ \ n } ; \ \ n f u n c t i o n B ( t , e = ! 0 ) { \ \ n \ \ t r e t u r n e ? O b j e c t . a s s i g n ( k , t ) : ( O b j e c t . s e t P r o t o t y p e O f ( t , k ) , t ) ; \ \ n } \ \ n f u n c t i o n W ( t ) { \ \ n \ \ t r e t u r n k . i s P r o t o t y p e O f ( t ) & & t ! = = k ? t : k ; \ \ n } \ \ n \ \ n / / s r c / h e l p e r s . j s \ \ n v a r T = ( . . . t ) = > 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 ( . . . t ) ; \ \ n f u n c t i o n S ( t ) { \ \ n \ \ t r e t u r n t y p e o f t > \ \ \ " u \ \ \ " ; \ \ n } \ \ n f u n c t i o n X ( t ) { \ \ n \ \ t l e t e = t y p e o f t ; \ \ n \ \ t r e t u r n e ! = = \ \ \ " o b j e c t \ \ \ " ? e : t = = = n u l l ? \ \ \ " n u l l \ \ \ " : 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 ( t ) ; \ \ n } \ \ n f u n c t i o n q ( t , e ) { \ \ n \ \ t i f ( ! t | | ! ( t 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 ! 0 ; \ \ n \ \ t i f ( ! t . a b o r t e d ) \ \ n \ \ t \ \ t r e t u r n t . a d d E v e n t L i s t e n e r ( \ \ \ " a b o r t \ \ \ " , e ) , f u n c t i o n ( ) { \ \ n \ \ t \ \ t \ \ t t . r e m o v e E v e n t L i s t e n e r ( \ \ \ " a b o r t \ \ \ " , e ) ; \ \ n \ \ t \ \ t } ; \ \ n } \ \ n f u n c t i o n F ( t , e ) { \ \ n \ \ t l e t { o b s e r v e d A t t r i b u t e s : n = [ ] } = t . c o n s t r u c t o r ; \ \ n \ \ t r e t u r n n . r e d u c e ( f u n c t i o n ( r , o ) { \ \ n \ \ t \ \ t r e t u r n r [ p t ( o ) ] = e ( t , o ) , r ; \ \ n \ \ t } , { } ) ; \ \ n } \ \ n f u n c t i o n p t ( t ) { \ \ n \ \ t r e t u r n t . r e p l a c e ( / - . / g , ( e ) = > e [ 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 d = { \ \ n \ \ t s e t D e l e t e A t t r : l t , \ \ 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 l t ( t , e , n ) { \ \ n \ \ t i f ( R e f l e c t . s e t ( t , e , n ) , ! ! S ( n ) ) { \ \ n \ \ t \ \ t i f ( R e f l e c t . d e l e t e P r o p e r t y ( t , e ) , t i n s t a n c e o f d . H & & t . g e t A t t r i b u t e ( e ) = = = \ \ \ " u n d e f i n e d \ \ \ " ) \ \ n \ \ t \ \ t \ \ t r e t u r n t . r e m o v e A t t r i b u t e ( e ) ; \ \ n \ \ t \ \ t i f ( R e f l e c t . g e t ( t , e ) = = = \ \ \ " u n d e f i n e d \ \ \ " ) \ \ n \ \ t \ \ t \ \ t r e t u r n R e f l e c t . s e t ( t , e , \ \ \ " \ \ \ " ) ; \ \ n \ \ t } \ \ n } \ \ n v a r C = \ \ \ " _ _ d d e _ l i f e c y c l e s T o E v e n t s \ \ \ " , _ = \ \ \ " d d e : c o n n e c t e d \ \ \ " , O = \ \ \ " d d e : d i s c o n n e c t e d \ \ \ " , M = \ \ \ " 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 A = [ { \ \ n \ \ t g e t s c o p e ( ) { \ \ n \ \ t \ \ t r e t u r n d . D . b o d y ; \ \ n \ \ t } , \ \ n \ \ t h o s t : ( t ) = > t ? t ( d . D . b o d y ) : d . D . b o d y , \ \ n \ \ t p r e v e n t : ! 0 \ \ n } ] , m = { \ \ n \ \ t g e t c u r r e n t ( ) { \ \ n \ \ t \ \ t r e t u r n A [ A . 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 l e t { c u r r e n t : t } = t h i s ; \ \ n \ \ t \ \ t r e t u r n t . p r e v e n t = ! 0 , t ; \ \ n \ \ t } , \ \ n \ \ t g e t s t a t e ( ) { \ \ n \ \ t \ \ t r e t u r n [ . . . A ] ; \ \ n \ \ t } , \ \ n \ \ t p u s h ( t = { } ) { \ \ n \ \ t \ \ t r e t u r n A . 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 : ! 1 } , t ) ) ; \ \ n \ \ t } , \ \ n \ \ t p u s h R o o t ( ) { \ \ n \ \ t \ \ t r e t u r n A . p u s h ( A [ 0 ] ) ; \ \ n \ \ t } , \ \ n \ \ t p o p ( ) { \ \ n \ \ t \ \ t i f ( A . l e n g t h ! = = 1 ) \ \ n \ \ t \ \ t \ \ t r e t u r n A . p o p ( ) ; \ \ n \ \ t } \ \ n } ; \ \ n f u n c t i o n Y ( . . . t ) { \ \ n \ \ t r e t u r n t h i s . a p p e n d O r i g i n a l ( . . . t ) , t h i s ; \ \ n } \ \ n f u n c t i o n h t ( t ) { \ \ n \ \ t r e t u r n t . a p p e n d = = = Y | | ( t . a p p e n d O r i g i n a l = t . a p p e n d , t . a p p e n d = Y ) , t ; \ \ n } \ \ n v a r $ ; \ \ n f u n c t i o n j ( t , e , . . . n ) { \ \ n \ \ t l e t r = W ( t h i s ) , o = 0 , c , i ; \ \ n \ \ t s w i t c h ( ( O b j e c t ( e ) ! = = e | | r . i s S i g n a l ( e ) ) & & ( e = { t e x t C o n t e n t : e } ) , ! 0 ) { \ \ n \ \ t \ \ t c a s e t y p e o f t = = \ \ \ " f u n c t i o n \ \ \ " : { \ \ n \ \ t \ \ t \ \ t o = 1 , m . p u s h ( { s c o p e : t , h o s t : ( . . . v ) = > v . l e n g t h ? ( o = = = 1 ? n . u n s h i f t ( . . . v ) : v . f o r E a c h ( ( l ) = > l ( i ) ) , v o i d 0 ) : i } ) , c = t ( e | | v o i d 0 ) ; \ \ n \ \ t \ \ t \ \ t l e t a = c i n s t a n c e o f d . F ; \ \ n \ \ t \ \ t \ \ t i f ( c . n o d e N a m e = = =
