2024-01-31 15:41:43 +01:00
<!DOCTYPE html> < html > < head > < meta charset = "utf-8" > < meta name = "viewport" content = "width=device-width, initial-scale=1" > < meta name = "description" content = "Handling reactivity in UI via observables." > < title > `deka-dom-el` — Observables and reactivity< / title > <!-- <dde:mark type="component" name="metaAuthor" host="this" ssr/> --> < meta name = "author" content = "Jan Andrle" > < link type = "text/plain" rel = "author" href = "https://jaandrle.github.io/humans.txt" > < meta name = "generator" content = "deka-dom-el" > <!-- <dde:mark type="component" name="metaTwitter" host="this" ssr/> --> < meta name = "twitter:card" content = "summary_large_image" > < meta name = "twitter:url" content = "https://github.com/jaandrle/deka-dom-el" > < meta name = "twitter:title" content = "deka-dom-el" > < meta name = "twitter:description" content = "A low-code library that simplifies the creation of native DOM elements/components using small wrappers and tweaks." > < meta name = "twitter:creator" content = "@jaandrle" > <!-- <dde:mark type="component" name="metaFacebook" host="this" ssr/> --> < meta name = "og:url" content = "https://github.com/jaandrle/deka-dom-el" > < meta name = "og:title" content = "deka-dom-el" > < meta name = "og:description" content = "A low-code library that simplifies the creation of native DOM elements/components using small wrappers and tweaks." > < meta name = "og:creator" content = "@jaandrle" > < script src = "https://cdn.jsdelivr.net/npm/shiki@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` — Observables and reactivity< / h1 > < p > Handling reactivity in UI via observables.< / p > < / header > < nav > < a href = "https://github.com/jaandrle/deka-dom-el" > < svg class = "icon" viewBox = "0 0 32 32" > <!-- <dde:mark type="component" name="iconGitHub" host="parentElement" ssr/> --> < path d = "M 16,0.395c -8.836,0 -16,7.163 -16,16c 0,7.069 4.585,13.067 10.942,15.182c 0.8,0.148 1.094,-0.347 1.094,-0.77c 0,-0.381 -0.015,-1.642 -0.022,-2.979c -4.452,0.968 -5.391,-1.888 -5.391,-1.888c -0.728,-1.849 -1.776,-2.341 -1.776,-2.341c -1.452,-0.993 0.11,-0.973 0.11,-0.973c 1.606,0.113 2.452,1.649 2.452,1.649c 1.427,2.446 3.743,1.739 4.656,1.33c 0.143,-1.034 0.558,-1.74 1.016,-2.14c -3.554,-0.404 -7.29,-1.777 -7.29,-7.907c 0,-1.747 0.625,-3.174 1.649,-4.295c -0.166,-0.403 -0.714,-2.03 0.155,-4.234c 0,0 1.344,-0.43 4.401,1.64c 1.276,-0.355 2.645,-0.532 4.005,-0.539c 1.359,0.006 2.729,0.184 4.008,0.539c 3.054,-2.07 4.395,-1.64 4.395,-1.64c 0.871,2.204 0.323,3.831 0.157,4.234c 1.026,1.12 1.647,2.548 1.647,4.295c 0,6.145 -3.743,7.498 -7.306,7.895c 0.574,0.497 1.085,1.47 1.085,2.963c 0,2.141 -0.019,3.864 -0.019,4.391c 0,0.426 0.288,0.925 1.099,0.768c 6.354,-2.118 10.933,-8.113 10.933,-15.18c 0,-8.837 -7.164,-16 -16,-16Z" > < / path > < / svg > GitHub< / a > < a href = "./" title = "Introducing a library." > 1. Introduction< / a > < a href = "p02-elements" title = "Basic concepts of elements modifications and creations." > 2. Elements< / a > < a href = "p03-events" title = "Using not only events in UI declaratively." > 3. Events and Addons< / a > < a href = "p04-observables" title = "Handling reactivity in UI via observables." class = "current" > 4. Observables and reactivity< / a > < 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 > Using observables to manage reactivity< / h2 > < p > How a program responds to variable data or user interactions is one of the fundamental problems of programming. If we desire to solve the issue in a declarative manner, observables may be a viable approach.< / p > < div class = "code" data-js = "todo" > <!-- <dde:mark type="component" name="code" host="parentElement" ssr/> --> < code class = "language-js" > // use NPM or for example https://cdn.jsdelivr.net/gh/jaandrle/deka-
2023-11-29 18:25:21 +01:00
import { O, observable } from "deka-dom-el/observables";
O===observable
/** @type {ddeObservable} */
/** @type {ddeAction} */
/** @type {ddeActions} */
2024-05-17 22:13:16 +02:00
< / code > < / div > < h3 id = "h-introducing-observables" > <!-- <dde:mark type="component" name="h3" host="parentElement" ssr/> --> < a href = "#h-introducing-observables" tabindex = "-1" > #< / a > Introducing observables< / h3 > < p > Using observables, we split program logic into the three parts. Firstly (α variable (constant) representing reactive value. Somewhere later, we can register (β) a logic reacting to the observable value changes. Similarly, in a remaining part (γ < / p > <!-- <dde:mark type="component" name="example" host="this" ssr/> --> < div id = "code-example-1-v1fw44pkzuo" class = "example" > <!-- <dde:mark type="component" name="code" host="parentElement" ssr/> --> < code class = "language-js" > import { O } from "./esm-with-observables.js";
2023-11-24 20:41:04 +01:00
// α reactive value
const observable= O(0);
// β — just reacts on observable changes
O.on(observable, console.log);
// γ
2023-11-29 18:25:21 +01:00
const update= ()=> observable(observable()+1);
update();
const interval= 5*1000;
setTimeout(clearInterval, 10*interval,
setInterval(update, interval));
2024-05-17 22:13:16 +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 - v 1 f w 4 4 p k z u 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 { O } f r o m \ \ \ " . / e s m - w i t h - o b s e r v a b l e s . j s \ \ \ " ; \ \ n / / α — ` o b s e r v a b l e ` r e p r e s e n t s a r e a c t i v e v a l u e \ \ n c o n s t o b s e r v a b l e = O ( 0 ) ; \ \ n / / β — j u s t r e a c t s o n o b s e r v a b l e c h a n g e s \ \ n O . o n ( o b s e r v a b l e , c o n s o l e . l o g ) ; \ \ n / / γ — j u s t u p d a t e s t h e v a l u e \ \ n c o n s t u p d a t e = ( ) = > o b s e r v a b l e ( o b s e r v a b l e ( ) + 1 ) ; \ \ n \ \ n u p d a t e ( ) ; \ \ n c o n s t i n t e r v a l = 5 * 1 0 0 0 ; \ \ n s e t T i m e o u t ( c l e a r I n t e r v a l , 1 0 * i n t e r v a l , \ \ n \ \ t s e t I n t e r v a l ( u p d a t e , i n t e r v a l ) ) ; \ \ n \ " } , { \ " n a m e \ " : \ " e s m - w i t h - o b s e r v a b l e s . j s \ " , \ " c o n t e n t \ " : \ " / / s r c / o b s e r v a b l e s - c o m m o n . j s \ \ n v a r k = { \ \ n \ \ t i s O b s e r v a b l e ( 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 A ( 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 ) , ! ! A ( 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 \ \ \ " , y = \ \ \ " d d e : c o n n e c t e d \ \ \ " , S = \ \ \ " d d e : d i s c o n n e c t e d \ \ \ " , P = \ \ \ " 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 _ = [ { \ \ 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 _ [ _ . 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 [ . . . _ ] ; \ \ n \ \ t } , \ \ n \ \ t p u s h ( t = { } ) { \ \ n \ \ t \ \ t r e t u r n _ . 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 _ . p u s h ( _ [ 0 ] ) ; \ \ n \ \ t } , \ \ n \ \ t p o p ( ) { \ \ n \ \ t \ \ t i f ( _ . l e n g t h ! = = 1 ) \ \ n \ \ t \ \ t \ \ t r e t u r n _ . 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 M ( t , e , . . . n ) { \ \ n \ \ t l e t r = W ( t h i s ) , o = 0 , c , s ; \ \ n \ \ t s w i t c h ( ( O b j e c t ( e ) ! = = e | | r . i s O b s e r v a b l e ( 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 : ( . . . g ) = > g . l e n g t h ? ( o = = = 1 ? n . u n s h i f t ( . . . g ) : g . f o r E a c h ( ( l ) = > l ( s ) ) , v o i d 0 ) : s } ) , 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 = M . 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 & & ( s = 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 = j . 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 \
2023-11-24 20:41:04 +01:00
const observable= O(0);
// computation pattern
const double= O(()=> 2*observable());
const ac= new AbortController();
O.on(observable, v=> console.log("observable", v), { signal: ac.signal });
O.on(double, v=> console.log("double", v), { signal: ac.signal });
observable(observable()+1);
2023-11-29 18:25:21 +01:00
const interval= 5 * 1000;
2023-11-24 20:41:04 +01:00
const id= setInterval(()=> observable(observable()+1), interval);
ac.signal.addEventListener("abort",
()=> setTimeout(()=> clearInterval(id), 2*interval));
setTimeout(()=> ac.abort(), 3*interval)
2024-05-17 22:13:16 +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 t i 9 y n a d h w 5 c " ) , 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 { O } f r o m \ \ \ " . / e s m - w i t h - o b s e r v a b l e s . j s \ \ \ " ; \ \ n c o n s t o b s e r v a b l e = O ( 0 ) ; \ \ n / / c o m p u t a t i o n p a t t e r n \ \ n c o n s t d o u b l e = O ( ( ) = > 2 * o b s e r v a b l e ( ) ) ; \ \ n \ \ n c o n s t a c = n e w A b o r t C o n t r o l l e r ( ) ; \ \ n O . o n ( o b s e r v a b l e , v = > c o n s o l e . l o g ( \ \ \ " o b s e r v a b l e \ \ \ " , v ) , { s i g n a l : a c . s i g n a l } ) ; \ \ n O . o n ( d o u b l e , v = > c o n s o l e . l o g ( \ \ \ " d o u b l e \ \ \ " , v ) , { s i g n a l : a c . s i g n a l } ) ; \ \ n \ \ n o b s e r v a b l e ( o b s e r v a b l e ( ) + 1 ) ; \ \ n c o n s t i n t e r v a l = 5 * 1 0 0 0 ; \ \ n c o n s t i d = s e t I n t e r v a l ( ( ) = > o b s e r v a b l e ( o b s e r v a b l e ( ) + 1 ) , i n t e r v a l ) ; \ \ n a c . s i g n a l . a d d E v e n t L i s t e n e r ( \ \ \ " a b o r t \ \ \ " , \ \ n \ \ t ( ) = > s e t T i m e o u t ( ( ) = > c l e a r I n t e r v a l ( i d ) , 2 * i n t e r v a l ) ) ; \ \ n \ \ n s e t T i m e o u t ( ( ) = > a c . a b o r t ( ) , 3 * i n t e r v a l ) \ \ n \ " } , { \ " n a m e \ " : \ " e s m - w i t h - o b s e r v a b l e s . j s \ " , \ " c o n t e n t \ " : \ " / / s r c / o b s e r v a b l e s - c o m m o n . j s \ \ n v a r k = { \ \ n \ \ t i s O b s e r v a b l e ( 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 A ( 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 ) , ! ! A ( 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 \ \ \ " , y = \ \ \ " d d e : c o n n e c t e d \ \ \ " , S = \ \ \ " d d e : d i s c o n n e c t e d \ \ \ " , P = \ \ \ " 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 _ = [ { \ \ 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 _ [ _ . 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 [ . . . _ ] ; \ \ n \ \ t } , \ \ n \ \ t p u s h ( t = { } ) { \ \ n \ \ t \ \ t r e t u r n _ . 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 _ . p u s h ( _ [ 0 ] ) ; \ \ n \ \ t } , \ \ n \ \ t p o p ( ) { \ \ n \ \ t \ \ t i f ( _ . l e n g t h ! = = 1 ) \ \ n \ \ t \ \ t \ \ t r e t u r n _ . 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 M ( t , e , . . . n ) { \ \ n \ \ t l e t r = W ( t h i s ) , o = 0 , c , s ; \ \ n \ \ t s w i t c h ( ( O b j e c t ( e ) ! = = e | | r . i s O b s e r v a b l e ( 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 : ( . . . g ) = > g . l e n g t h ? ( o = = = 1 ? n . u n s h i f t ( . . . g ) : g . f o r E a c h ( ( l ) = > l ( s ) ) , v o i d 0 ) : s } ) , 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 = M . 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 \
2023-11-29 18:25:21 +01:00
const observable= O(0, {
increaseOnlyOdd(add){
console.info(add);
if(add%2 === 0) return this.stopPropagation();
this.value+= add;
}
});
O.on(observable, console.log);
const oninterval= ()=>
O.action(observable, "increaseOnlyOdd", Math.floor(Math.random()*100));
const interval= 5*1000;
setTimeout(
clearInterval,
10*interval,
setInterval(oninterval, interval)
);
2024-05-17 22:13:16 +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 - n y 8 1 g 2 q u n 6 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 { O } f r o m \ \ \ " . / e s m - w i t h - o b s e r v a b l e s . j s \ \ \ " ; \ \ n c o n s t o b s e r v a b l e = O ( 0 , { \ \ n \ \ t i n c r e a s e O n l y O d d ( a d d ) { \ \ n \ \ t \ \ t c o n s o l e . i n f o ( a d d ) ; \ \ n \ \ t \ \ t i f ( a d d % 2 = = = 0 ) r e t u r n t h i s . s t o p P r o p a g a t i o n ( ) ; \ \ n \ \ t \ \ t t h i s . v a l u e + = a d d ; \ \ n \ \ t } \ \ n } ) ; \ \ n O . o n ( o b s e r v a b l e , c o n s o l e . l o g ) ; \ \ n c o n s t o n i n t e r v a l = ( ) = > \ \ n \ \ t O . a c t i o n ( o b s e r v a b l e , \ \ \ " i n c r e a s e O n l y O d d \ \ \ " , M a t h . f l o o r ( M a t h . r a n d o m ( ) * 1 0 0 ) ) ; \ \ n \ \ n c o n s t i n t e r v a l = 5 * 1 0 0 0 ; \ \ n s e t T i m e o u t ( \ \ n \ \ t c l e a r I n t e r v a l , \ \ n \ \ t 1 0 * i n t e r v a l , \ \ n \ \ t s e t I n t e r v a l ( o n i n t e r v a l , i n t e r v a l ) \ \ n ) ; \ \ n \ " } , { \ " n a m e \ " : \ " e s m - w i t h - o b s e r v a b l e s . j s \ " , \ " c o n t e n t \ " : \ " / / s r c / o b s e r v a b l e s - c o m m o n . j s \ \ n v a r k = { \ \ n \ \ t i s O b s e r v a b l e ( 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 A ( 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 ) , ! ! A ( 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 \ \ \ " , y = \ \ \ " d d e : c o n n e c t e d \ \ \ " , S = \ \ \ " d d e : d i s c o n n e c t e d \ \ \ " , P = \ \ \ " 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 _ = [ { \ \ 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 _ [ _ . 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 [ . . . _ ] ; \ \ n \ \ t } , \ \ n \ \ t p u s h ( t = { } ) { \ \ n \ \ t \ \ t r e t u r n _ . 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 _ . p u s h ( _ [ 0 ] ) ; \ \ n \ \ t } , \ \ n \ \ t p o p ( ) { \ \ n \ \ t \ \ t i f ( _ . l e n g t h ! = = 1 ) \ \ n \ \ t \ \ t \ \ t r e t u r n _ . 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 M ( t , e , . . . n ) { \ \ n \ \ t l e t r = W ( t h i s ) , o = 0 , c , s ; \ \ n \ \ t s w i t c h ( ( O b j e c t ( e ) ! = = e | | r . i s O b s e r v a b l e ( 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 : ( . . . g ) = > g . l e n g t h ? ( o = = = 1 ? n . u n s h i f t ( . . . g ) : g . f o r E a c h ( ( l ) = > l ( s ) ) , v o i d 0 ) : s } ) , 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 = M . 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 & & ( s = 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 \ \
2023-11-29 18:25:21 +01:00
const todos= O([], {
push(item){
this.value.push(O(item));
},
pop(){
const removed= this.value.pop();
if(removed) O.clear(removed);
},
[O.symbols.onclear](){ // this covers `O.clear(todos)`
O.clear(...this.value);
}
});
2024-05-17 22:13:16 +02:00
import { el, on } from "./esm-with-observables.js";
2023-11-29 18:25:21 +01:00
/** @type {ddeElementAddon< HTMLFormElement> } */
const onsubmit= on("submit", function(event){
event.preventDefault();
const data= new FormData(this);
switch (data.get("op")){
case "A"/*dd*/:
O.action(todos, "push", data.get("todo"));
break;
case "E"/*dit*/: {
const last= todos().at(-1);
if(!last) break;
last(data.get("todo"));
break;
}
case "R"/*emove*/:
O.action(todos, "pop");
break;
}
});
document.body.append(
el("ul").append(
O.el(todos, todos=>
todos.map(textContent=> el("li", textContent)))
),
el("form", null, onsubmit).append(
el("input", { type: "text", name: "todo", placeholder: "Todo’
el(radio, { textContent: "Add", checked: true }),
el(radio, { textContent: "Edit last" }),
el(radio, { textContent: "Remove" }),
el("button", "Submit")
)
);
document.head.append(
el("style", "form{ display: flex; flex-flow: column nowrap; }")
);
function radio({ textContent, checked= false }){
return el("label").append(
el("input", { type: "radio", name: "op", value: textContent[0], checked }),
" ",textContent
)
}
2024-05-17 22:13:16 +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 - i h a n c 6 k 9 v 9 c " ) , 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 { O } f r o m \ \ \ " . / e s m - w i t h - o b s e r v a b l e s . j s \ \ \ " ; \ \ n c o n s t t o d o s = O ( [ ] , { \ \ n \ \ t p u s h ( i t e m ) { \ \ n \ \ t \ \ t t h i s . v a l u e . p u s h ( O ( i t e m ) ) ; \ \ n \ \ t } , \ \ n \ \ t p o p ( ) { \ \ n \ \ t \ \ t c o n s t r e m o v e d = t h i s . v a l u e . p o p ( ) ; \ \ n \ \ t \ \ t i f ( r e m o v e d ) O . c l e a r ( r e m o v e d ) ; \ \ n \ \ t } , \ \ n \ \ t [ O . s y m b o l s . o n c l e a r ] ( ) { / / t h i s c o v e r s ` O . c l e a r ( t o d o s ) ` \ \ n \ \ t \ \ t O . c l e a r ( . . . t h i s . v a l u e ) ; \ \ n \ \ t } \ \ n } ) ; \ \ n \ \ n i m p o r t { e l , o n } f r o m \ \ \ " . / e s m - w i t h - o b s e r v a b l e s . j s \ \ \ " ; \ \ n / * * @ t y p e { d d e E l e m e n t A d d o n < H T M L F o r m E l e m e n t > } * / \ \ n c o n s t o n s u b m i t = o n ( \ \ \ " s u b m i t \ \ \ " , f u n c t i o n ( e v e n t ) { \ \ n \ \ t e v e n t . p r e v e n t D e f a u l t ( ) ; \ \ n \ \ t c o n s t d a t a = n e w F o r m D a t a ( t h i s ) ; \ \ n \ \ t s w i t c h ( d a t a . g e t ( \ \ \ " o p \ \ \ " ) ) { \ \ n \ \ t \ \ t c a s e \ \ \ " A \ \ \ " / * d d * / : \ \ n \ \ t \ \ t \ \ t O . a c t i o n ( t o d o s , \ \ \ " p u s h \ \ \ " , d a t a . g e t ( \ \ \ " t o d o \ \ \ " ) ) ; \ \ n \ \ t \ \ t \ \ t b r e a k ; \ \ n \ \ t \ \ t c a s e \ \ \ " E \ \ \ " / * d i t * / : { \ \ n \ \ t \ \ t \ \ t c o n s t l a s t = t o d o s ( ) . a t ( - 1 ) ; \ \ n \ \ t \ \ t \ \ t i f ( ! l a s t ) b r e a k ; \ \ n \ \ t \ \ t \ \ t l a s t ( d a t a . g e t ( \ \ \ " t o d o \ \ \ " ) ) ; \ \ n \ \ t \ \ t \ \ t b r e a k ; \ \ n \ \ t \ \ t } \ \ n \ \ t \ \ t c a s e \ \ \ " R \ \ \ " / * e m o v e * / : \ \ n \ \ t \ \ t \ \ t O . a c t i o n ( t o d o s , \ \ \ " p o p \ \ \ " ) ; \ \ n \ \ t \ \ t \ \ t b r e a k ; \ \ n \ \ t } \ \ n } ) ; \ \ n d o c u m e n t . b o d y . a p p e n d ( \ \ n \ \ t e l ( \ \ \ " u l \ \ \ " ) . a p p e n d ( \ \ n \ \ t \ \ t O . e l ( t o d o s , t o d o s = > \ \ n \ \ t \ \ t \ \ t t o d o s . m a p ( t e x t C o n t e n t = > e l ( \ \ \ " l i \ \ \ " , t e x t C o n t e n t ) ) ) \ \ n \ \ t ) , \ \ n \ \ t e l ( \ \ \ " f o r m \ \ \ " , n u l l , o n s u b m i t ) . a p p e n d ( \ \ n \ \ t \ \ t e l ( \ \ \ " i n p u t \ \ \ " , { t y p e : \ \ \ " t e x t \ \ \ " , n a m e : \ \ \ " t o d o \ \ \ " , p l a c e h o l d e r : \ \ \ " T o d o ’ s t e x t \ \ \ " } ) , \ \ n \ \ t \ \ t e l ( r a d i o , { t e x t C o n t e n t : \ \ \ " A d d \ \ \ " , c h e c k e d : t r u e } ) , \ \ n \ \ t \ \ t e l ( r a d i o , { t e x t C o n t e n t : \ \ \ " E d i t l a s t \ \ \ " } ) , \ \ n \ \ t \ \ t e l ( r a d i o , { t e x t C o n t e n t : \ \ \ " R e m o v e \ \ \ " } ) , \ \ n \ \ t \ \ t e l ( \ \ \ " b u t t o n \ \ \ " , \ \ \ " S u b m i t \ \ \ " ) \ \ n \ \ t ) \ \ n ) ; \ \ n d o c u m e n t . h e a d . a p p e n d ( \ \ n \ \ t e l ( \ \ \ " s t y l e \ \ \ " , \ \ \ " f o r m { d i s p l a y : f l e x ; f l e x - f l o w : c o l u m n n o w r a p ; } \ \ \ " ) \ \ n ) ; \ \ n f u n c t i o n r a d i o ( { t e x t C o n t e n t , c h e c k e d = f a l s e } ) { \ \ n \ \ t r e t u r n e l ( \ \ \ " l a b e l \ \ \ " ) . a p p e n d ( \ \ n \ \ t \ \ t e l ( \ \ \ " i n p u t \ \ \ " , { t y p e : \ \ \ " r a d i o \ \ \ " , n a m e : \ \ \ " o p \ \ \ " , v a l u e : t e x t C o n t e n t [ 0 ] , c h e c k e d } ) , \ \ n \ \ t \ \ t \ \ \ " \ \ \ " , t e x t C o n t e n t \ \ n \ \ t ) \ \ n } \ \ n \ " } , { \ " n a m e \ " : \ " e s m - w i t h - o b s e r v a b l e s . j s \ " , \ " c o n t e n t \ " : \ " / / s r c / o b s e r v a b l e s - c o m m o n . j s \ \ n v a r k = { \ \ n \ \ t i s O b s e r v a b l e ( 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 A ( 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 ) , ! ! A ( 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 \ \ \ " , y = \ \ \ " d d e : c o n n e c t e d \ \ \ " , S = \ \ \ " d d e : d i s c o n n e c t e d \ \ \ " , P = \ \ \ " 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 _ = [ { \ \ 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 _ [ _ . l e n g
2023-11-29 18:25:21 +01:00
const count= O(0);
2024-05-17 22:13:16 +02:00
import { el } from "./esm-with-observables.js";
2023-11-29 18:25:21 +01:00
document.body.append(
el("p", O(()=> "Currently: "+count())),
el("p", { classList: { red: O(()=> count()%2) }, dataset: { count }, textContent: "Attributes example" })
);
document.head.append(
el("style", ".red { color: red; }")
);
const interval= 5 * 1000;
setTimeout(clearInterval, 10*interval,
setInterval(()=> count(count()+1), interval));
2024-05-17 22:13:16 +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 - e h c q 4 0 v 0 h 5 k " ) , 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 { O } f r o m \ \ \ " . / e s m - w i t h - o b s e r v a b l e s . j s \ \ \ " ; \ \ n c o n s t c o u n t = O ( 0 ) ; \ \ n \ \ n i m p o r t { e l } f r o m \ \ \ " . / e s m - w i t h - o b s e r v a b l e 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 \ \ \ " , O ( ( ) = > \ \ \ " C u r r e n t l y : \ \ \ " + c o u n t ( ) ) ) , \ \ n \ \ t e l ( \ \ \ " p \ \ \ " , { c l a s s L i s t : { r e d : O ( ( ) = > c o u n t ( ) % 2 ) } , d a t a s e t : { c o u n t } , t e x t C o n t e n t : \ \ \ " A t t r i b u t e s e x a m p l e \ \ \ " } ) \ \ n ) ; \ \ n d o c u m e n t . h e a d . a p p e n d ( \ \ n \ \ t e l ( \ \ \ " s t y l e \ \ \ " , \ \ \ " . r e d { c o l o r : r e d ; } \ \ \ " ) \ \ n ) ; \ \ n \ \ n c o n s t i n t e r v a l = 5 * 1 0 0 0 ; \ \ n s e t T i m e o u t ( c l e a r I n t e r v a l , 1 0 * i n t e r v a l , \ \ n \ \ t s e t I n t e r v a l ( ( ) = > c o u n t ( c o u n t ( ) + 1 ) , i n t e r v a l ) ) ; \ \ n \ " } , { \ " n a m e \ " : \ " e s m - w i t h - o b s e r v a b l e s . j s \ " , \ " c o n t e n t \ " : \ " / / s r c / o b s e r v a b l e s - c o m m o n . j s \ \ n v a r k = { \ \ n \ \ t i s O b s e r v a b l e ( 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 A ( 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 ) , ! ! A ( 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 \ \ \ " , y = \ \ \ " d d e : c o n n e c t e d \ \ \ " , S = \ \ \ " d d e : d i s c o n n e c t e d \ \ \ " , P = \ \ \ " 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 _ = [ { \ \ 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 _ [ _ . 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 [ . . . _ ] ; \ \ n \ \ t } , \ \ n \ \ t p u s h ( t = { } ) { \ \ n \ \ t \ \ t r e t u r n _ . 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 _ . p u s h ( _ [ 0 ] ) ; \ \ n \ \ t } , \ \ n \ \ t p o p ( ) { \ \ n \ \ t \ \ t i f ( _ . l e n g t h ! = = 1 ) \ \ n \ \ t \ \ t \ \ t r e t u r n _ . 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 M ( t , e , . . . n ) { \ \ n \ \ t l e t r = W ( t h i s ) , o = 0 , c , s ; \ \ n \ \ t s w i t c h ( ( O b j e c t ( e ) ! = = e | | r . i s O b s e r v a b l e ( 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 : ( . . . g ) = > g . l e n g t h ? ( o = = = 1 ? n . u n s h i f t ( . . . g ) : g . f o r E a c h ( ( l ) = > l ( s ) ) , v o i d 0 ) : s } ) , 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 = M . 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 & & ( s = h ) ; \ \ n \ \ t \ \ t \ \ t b
2023-11-29 18:25:21 +01:00
const count= O(0, {
add(){ this.value= this.value + Math.round(Math.random()*10); }
});
const numbers= O([ count() ], {
push(next){ this.value.push(next); }
});
2024-05-17 22:13:16 +02:00
import { el } from "./esm-with-observables.js";
2023-11-29 18:25:21 +01:00
document.body.append(
O.el(count, count=> count%2
? el("p", "Last number is odd.")
: el()
),
el("p", "Lucky numbers:"),
el("ul").append(
O.el(numbers, numbers=> numbers.toReversed()
.map(n=> el("li", n)))
)
);
const interval= 5*1000;
setTimeout(clearInterval, 10*interval, setInterval(function(){
O.action(count, "add");
O.action(numbers, "push", count());
}, interval));
2024-05-17 22:13:16 +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 - 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 { O } f r o m \ \ \ " . / e s m - w i t h - o b s e r v a b l e s . j s \ \ \ " ; \ \ n c o n s t c o u n t = O ( 0 , { \ \ n \ \ t a d d ( ) { t h i s . v a l u e = t h i s . v a l u e + M a t h . r o u n d ( M a t h . r a n d o m ( ) * 1 0 ) ; } \ \ n } ) ; \ \ n c o n s t n u m b e r s = O ( [ c o u n t ( ) ] , { \ \ n \ \ t p u s h ( n e x t ) { t h i s . v a l u e . p u s h ( n e x t ) ; } \ \ n } ) ; \ \ n \ \ n i m p o r t { e l } f r o m \ \ \ " . / e s m - w i t h - o b s e r v a b l e s . j s \ \ \ " ; \ \ n d o c u m e n t . b o d y . a p p e n d ( \ \ n \ \ t O . e l ( c o u n t , c o u n t = > c o u n t % 2 \ \ n \ \ t \ \ t ? e l ( \ \ \ " p \ \ \ " , \ \ \ " L a s t n u m b e r i s o d d . \ \ \ " ) \ \ n \ \ t \ \ t : e l ( ) \ \ n \ \ t ) , \ \ n \ \ t e l ( \ \ \ " p \ \ \ " , \ \ \ " L u c k y n u m b e r s : \ \ \ " ) , \ \ n \ \ t e l ( \ \ \ " u l \ \ \ " ) . a p p e n d ( \ \ n \ \ t \ \ t O . e l ( n u m b e r s , n u m b e r s = > n u m b e r s . t o R e v e r s e d ( ) \ \ n \ \ t \ \ t \ \ t . m a p ( n = > e l ( \ \ \ " l i \ \ \ " , n ) ) ) \ \ n \ \ t ) \ \ n ) ; \ \ n \ \ n c o n s t i n t e r v a l = 5 * 1 0 0 0 ; \ \ n s e t T i m e o u t ( c l e a r I n t e r v a l , 1 0 * i n t e r v a l , s e t I n t e r v a l ( f u n c t i o n ( ) { \ \ n \ \ t O . a c t i o n ( c o u n t , \ \ \ " a d d \ \ \ " ) ; \ \ n \ \ t O . a c t i o n ( n u m b e r s , \ \ \ " p u s h \ \ \ " , c o u n t ( ) ) ; \ \ n } , i n t e r v a l ) ) ; \ \ n \ " } , { \ " n a m e \ " : \ " e s m - w i t h - o b s e r v a b l e s . j s \ " , \ " c o n t e n t \ " : \ " / / s r c / o b s e r v a b l e s - c o m m o n . j s \ \ n v a r k = { \ \ n \ \ t i s O b s e r v a b l e ( 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 A ( 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 ) , ! ! A ( 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 \ \ \ " , y = \ \ \ " d d e : c o n n e c t e d \ \ \ " , S = \ \ \ " d d e : d i s c o n n e c t e d \ \ \ " , P = \ \ \ " 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 _ = [ { \ \ 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 _ [ _ . 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 [ . . . _ ] ; \ \ n \ \ t } , \ \ n \ \ t p u s h ( t = { } ) { \ \ n \ \ t \ \ t r e t u r n _ . 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 _ . p u s h ( _ [ 0 ] ) ; \ \ n \ \ t } , \ \ n \ \ t p o p ( ) { \ \ n \ \ t \ \ t i f ( _ . l e n g t h ! = = 1 ) \ \ n \ \ t \ \ t \ \ t r e t u r n _ . 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 M ( t , e , . . . n ) { \ \ n \ \ t l e t r = W ( t h i s ) , o = 0 , c , s ; \ \ n \ \ t s w i t c h ( ( O b j e c t ( e ) ! = = e | | r . i s O b s e r v a b l e ( 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 : ( . . . g ) = > g . l e n g t h ? ( o = = = 1 ? n . u n s h i f t ( . . . g ) : g . f o r E a c h ( ( l ) = > l ( s ) ) , v o i d 0 ) : s } ) , 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 \ \ \
