-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
10149 lines (9971 loc) · 783 KB
/
index.html
File metadata and controls
10149 lines (9971 loc) · 783 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
873
874
875
876
877
878
879
880
881
882
883
884
885
886
887
888
889
890
891
892
893
894
895
896
897
898
899
900
901
902
903
904
905
906
907
908
909
910
911
912
913
914
915
916
917
918
919
920
921
922
923
924
925
926
927
928
929
930
931
932
933
934
935
936
937
938
939
940
941
942
943
944
945
946
947
948
949
950
951
952
953
954
955
956
957
958
959
960
961
962
963
964
965
966
967
968
969
970
971
972
973
974
975
976
977
978
979
980
981
982
983
984
985
986
987
988
989
990
991
992
993
994
995
996
997
998
999
1000
<!doctype html><html lang="en"><head><title>elt documentation</title><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/><link rel="stylesheet" href="./normalize.css"/><link rel="stylesheet" href="./main.css"/><!-- If --><!-- /If --><!-- Display more head --></head><body><div class="st-row"><div id="sidebar" class="flex-column"><div id="searchdiv"><input id="search" class="st-search" placeholder="search..."/></div><div id="toc" class="st-toc flex-absolute-grow"><a class="toc-entry toc-nest-1" href="#_doc0"><b>1. </b> What is ELT</a><a class="toc-entry toc-nest-2" href="#_doc1"><b>1.1. </b> Why use it</a><a class="toc-entry toc-nest-2" href="#_doc2"><b>1.2. </b> In a Nutshell</a><a class="toc-entry toc-nest-1" href="#_doc3"><b>2. </b> Getting started</a><a class="toc-entry toc-nest-2" href="#_doc4"><b>2.1. </b> About this documentation</a><a class="toc-entry toc-nest-2" href="#_doc5"><b>2.2. </b> Installation</a><a class="toc-entry toc-nest-2" href="#_doc6"><b>2.3. </b> Using it with a module loader</a><a class="toc-entry toc-nest-2" href="#_doc7"><b>2.4. </b> Using it as an umd module</a><a class="toc-entry toc-nest-1" href="#_doc8"><b>3. </b> Elt primer</a><a class="toc-entry toc-nest-2" href="#_doc9"><b>3.1. </b> Creating nodes</a><a class="toc-entry toc-nest-3" href="#_doc10"><b>3.1.1. </b> Using TSX</a><a class="toc-entry toc-nest-3" href="#_doc11"><b>3.1.2. </b> Creating nodes without tsx</a><a class="toc-entry toc-nest-2" href="#_doc12"><b>3.2. </b> Adding children</a><a class="toc-entry toc-nest-2" href="#_doc13"><b>3.3. </b> Attributes</a><a class="toc-entry toc-nest-2" href="#_doc14"><b>3.4. </b> Classes and Styles</a><a class="toc-entry toc-nest-2" href="#_doc15"><b>3.5. </b> Dynamicity through Observables and Verbs</a><a class="toc-entry toc-nest-2" href="#_doc16"><b>3.6. </b> Node Decorators</a><a class="toc-entry toc-nest-2" href="#_doc17"><b>3.7. </b> Observables</a><a class="toc-entry toc-nest-3" href="#_doc18"><b>3.7.1. </b> Transformations</a><a class="toc-entry toc-nest-3" href="#_doc19"><b>3.7.2. </b> Combining</a><a class="toc-entry toc-nest-2" href="#_doc20"><b>3.8. </b> Mixins</a><a class="toc-entry toc-nest-2" href="#_doc21"><b>3.9. </b> Components</a><a class="toc-entry toc-nest-3" href="#_doc22"><b>3.9.1. </b> Component Functions</a><a class="toc-entry toc-nest-3" href="#_doc23"><b>3.9.2. </b> Component class</a><a class="toc-entry toc-nest-3" href="#_doc24"><b>3.9.3. </b> <code>class</code>, <code>style</code> and <code>id</code></a><a class="toc-entry toc-nest-3" href="#_doc25"><b>3.9.4. </b> Components and other Mixins or Decorators</a><h3>Dom</h3><div><a class="st-kind-function" href="#$bind.boolean"><b>$bind.boolean()</b></a></div><div><a class="st-kind-function" href="#$bind.contenteditable"><b>$bind.contenteditable()</b></a></div><div><a class="st-kind-function" href="#$bind.date"><b>$bind.date()</b></a></div><div><a class="st-kind-function" href="#$bind.number"><b>$bind.number()</b></a></div><div><a class="st-kind-function" href="#$bind.selected_index"><b>$bind.selected_index()</b></a></div><div><a class="st-kind-function" href="#$bind.string"><b>$bind.string()</b></a></div><div><a class="st-kind-function" href="#$class"><b>$class()</b></a></div><div><a class="st-kind-function" href="#$click"><b>$click()</b></a></div><div><a class="st-kind-function" href="#$id"><b>$id()</b></a></div><div><a class="st-kind-function" href="#$init"><b>$init()</b></a></div><div><a class="st-kind-function" href="#$inserted"><b>$inserted()</b></a></div><div><a class="st-kind-function" href="#$observe"><b>$observe()</b></a></div><div><a class="st-kind-function" href="#$on"><b>$on()</b></a></div><div><a class="st-kind-function" href="#$removed"><b>$removed()</b></a></div><div><a class="st-kind-function" href="#$scrollable"><b>$scrollable()</b></a></div><div><a class="st-kind-function" href="#$style"><b>$style()</b></a></div><div><a class="st-kind-function" href="#$title"><b>$title()</b></a></div><div><a class="st-kind-interface" href="#Attrs"><b>Attrs</b></a></div><div><a class="st-kind-typealias" href="#AttrsNodeType"><b>AttrsNodeType</b></a></div><div><a class="st-kind-class" href="#CommentContainer"><b>CommentContainer</b></a></div><div><a class="st-kind-class" href="#Component"><b>Component</b></a></div><div><a class="st-kind-function" href="#Fragment"><b>Fragment()</b></a></div><div><a class="st-kind-function" href="#If"><b>If()</b></a></div><div><a class="st-kind-typealias" href="#Insertable"><b>Insertable</b></a></div><div><a class="st-kind-class" href="#Mixin"><b>Mixin</b></a></div><div><a class="st-kind-typealias" href="#Renderable"><b>Renderable</b></a></div><div><a class="st-kind-function" href="#Repeat"><b>Repeat()</b></a></div><div><a class="st-kind-function" href="#RepeatScroll"><b>RepeatScroll()</b></a></div><div><a class="st-kind-function" href="#Switch"><b>Switch()</b></a></div><div><a class="st-kind-function" href="#e"><b>e()</b></a></div><div><a class="st-kind-var" href="#e.sym_render"><b>e.sym_render</b></a></div><div><a class="st-kind-function" href="#setup_mutation_observer"><b>setup_mutation_observer()</b></a></div><h3>App</h3><div><a class="st-kind-class" href="#App"><b>App</b></a></div><div><a class="st-kind-function" href="#App.DisplayApp"><b>App.DisplayApp()</b></a></div><div><a class="st-kind-class" href="#App.Service"><b>App.Service</b></a></div><div><a class="st-kind-function" href="#App.view"><b>App.view()</b></a></div><h3>Low level dom</h3><div><a class="st-kind-function" href="#Display"><b>Display()</b></a></div><div><a class="st-kind-function" href="#append_child_and_init"><b>append_child_and_init()</b></a></div><div><a class="st-kind-function" href="#insert_before_and_init"><b>insert_before_and_init()</b></a></div><div><a class="st-kind-function" href="#node_add_event_listener"><b>node_add_event_listener()</b></a></div><div><a class="st-kind-function" href="#node_add_observer"><b>node_add_observer()</b></a></div><div><a class="st-kind-function" href="#node_is_inited"><b>node_is_inited()</b></a></div><div><a class="st-kind-function" href="#node_is_inserted"><b>node_is_inserted()</b></a></div><div><a class="st-kind-function" href="#node_is_observing"><b>node_is_observing()</b></a></div><div><a class="st-kind-function" href="#node_observe"><b>node_observe()</b></a></div><div><a class="st-kind-function" href="#node_observe_attribute"><b>node_observe_attribute()</b></a></div><div><a class="st-kind-function" href="#node_observe_class"><b>node_observe_class()</b></a></div><div><a class="st-kind-function" href="#node_observe_style"><b>node_observe_style()</b></a></div><div><a class="st-kind-function" href="#node_off"><b>node_off()</b></a></div><div><a class="st-kind-function" href="#node_on"><b>node_on()</b></a></div><div><a class="st-kind-function" href="#node_remove_after"><b>node_remove_after()</b></a></div><div><a class="st-kind-function" href="#node_unobserve"><b>node_unobserve()</b></a></div><div><a class="st-kind-function" href="#remove_node"><b>remove_node()</b></a></div><div><a class="st-kind-var" href="#sym_init"><b>sym_init</b></a></div><div><a class="st-kind-var" href="#sym_inserted"><b>sym_inserted</b></a></div><div><a class="st-kind-var" href="#sym_mixins"><b>sym_mixins</b></a></div><div><a class="st-kind-var" href="#sym_mount_status"><b>sym_mount_status</b></a></div><div><a class="st-kind-var" href="#sym_observers"><b>sym_observers</b></a></div><div><a class="st-kind-var" href="#sym_removed"><b>sym_removed</b></a></div><h3>Observable</h3><div><a class="st-kind-function" href="#o"><b>o()</b></a></div><div><a class="st-kind-class" href="#o.Observable"><b>o.Observable</b></a></div><div><a class="st-kind-typealias" href="#o.ObservedType"><b>o.ObservedType</b></a></div><div><a class="st-kind-class" href="#o.Observer"><b>o.Observer</b></a></div><div><a class="st-kind-class" href="#o.ObserverHolder"><b>o.ObserverHolder</b></a></div><div><a class="st-kind-typealias" href="#o.RO"><b>o.RO</b></a></div><div><a class="st-kind-interface" href="#o.ReadonlyObservable"><b>o.ReadonlyObservable</b></a></div><div><a class="st-kind-function" href="#o.and"><b>o.and()</b></a></div><div><a class="st-kind-function" href="#o.assign"><b>o.assign()</b></a></div><div><a class="st-kind-function" href="#o.clone"><b>o.clone()</b></a></div><div><a class="st-kind-function" href="#o.combine"><b>o.combine()</b></a></div><div><a class="st-kind-function" href="#o.debounce"><b>o.debounce()</b></a></div><div><a class="st-kind-function" href="#o.exclusive_lock"><b>o.exclusive_lock()</b></a></div><div><a class="st-kind-function" href="#o.get"><b>o.get()</b></a></div><div><a class="st-kind-function" href="#o.isReadonlyObservable"><b>o.isReadonlyObservable()</b></a></div><div><a class="st-kind-function" href="#o.join"><b>o.join()</b></a></div><div><a class="st-kind-function" href="#o.merge"><b>o.merge()</b></a></div><div><a class="st-kind-function" href="#o.or"><b>o.or()</b></a></div><div><a class="st-kind-function" href="#o.p"><b>o.p()</b></a></div><div><a class="st-kind-function" href="#o.prop"><b>o.prop()</b></a></div><div><a class="st-kind-function" href="#o.tf"><b>o.tf()</b></a></div><div><a class="st-kind-function" href="#o.throttle"><b>o.throttle()</b></a></div><div><a class="st-kind-function" href="#o.transaction"><b>o.transaction()</b></a></div><div><a class="st-kind-function" href="#o.tuple"><b>o.tuple()</b></a></div><div><a class="st-kind-function" href="#tf.array_filter"><b>tf.array_filter()</b></a></div><div><a class="st-kind-function" href="#tf.array_group_by"><b>tf.array_group_by()</b></a></div><div><a class="st-kind-function" href="#tf.array_sort"><b>tf.array_sort()</b></a></div><div><a class="st-kind-function" href="#tf.array_sort_by"><b>tf.array_sort_by()</b></a></div><div><a class="st-kind-function" href="#tf.array_transform"><b>tf.array_transform()</b></a></div><div><a class="st-kind-function" href="#tf.differs"><b>tf.differs()</b></a></div><div><a class="st-kind-function" href="#tf.entries"><b>tf.entries()</b></a></div><div><a class="st-kind-function" href="#tf.equals"><b>tf.equals()</b></a></div><div><a class="st-kind-function" href="#tf.map_entries"><b>tf.map_entries()</b></a></div><div><a class="st-kind-function" href="#tf.set_has"><b>tf.set_has()</b></a></div></div></div><div class="st-docmain"><h1 id="_doc0">What is ELT</h1>
<p>ELT is a <a href="https://typescriptlang.org">typescript</a> library for building user interfaces in a web environment. It is not meant to build websites ; its purpose is to write applications.</p>
<p>Weighing less than 15kb minified and gziped, it is meant as an alternative to React, Angular and the likes. Unlike several of them, it does <em>not</em> make use of any kind of virtual DOM. Instead, it provides the developper with an <a href="#o.Observable"><code>Observable</code></a> class and a few easy to use hooks on the node life cycle to react to their presence in the document. It also provides a <a href="#Mixin"><code>Mixin</code></a> class for those cases when writing extensible code is required.</p>
<p>It makes use of fairly modern standards, such as <code>Map</code>, <code>Set</code>, <code>Symbol</code> and <code>WeakMap</code>. As such, it probably won't run on IE without using polyfills. In general, support is limited to less than two years old browser versions.</p>
<p>While it is of course usable with plain javascript, its real intended audience is <a href="https://www.typescriptlang.org/">Typescript</a> users.</p>
<p>It is built with three objectives in mind :</p>
<ul>
<li>Writing and reading code using it <strong>must</strong> be pleasant</li>
<li>All overheads induced by its use <strong>should</strong> be kept as low as possible</li>
<li>Everything <strong>must</strong> be typed correctly. This library <strong>must</strong> be refactoring-friendly.</li>
</ul>
<p>Join the <a href="https://discord.gg/A8tKA7q">discord</a> for questions or use the tags <code>#typescript</code> and <code>#elt</code> on stack overflow, go to the <a href="https://github.com/elementjs/elt">repository</a> to file issues.</p>
<h2 id="_doc1">Why use it</h2>
<ul>
<li>
<p><strong>You use typescript</strong> and don't want a javascript library that use patterns that the typing system doesn't always gracefully support. Everything is Element was built with <em>type inference</em> in mind. The <a href="#o.Observable"><code>Observable</code></a> ecosystem tries hard to keep that valuable typing information without getting in your way and have you type everything by hand.</p>
</li>
<li>
<p><strong>You are strict about typing</strong> and do not like to cheat with <code>any</code>. The recommended way to enjoy this library is with <code>"strict": true</code> in your <code>tsconfig.json</code>.</p>
</li>
<li>
<p><strong>You like the Observer pattern</strong> but you're afraid your app is going to leak as this pattern is prone to do. Element solves this elegantly by tying the observing to the presence of a Node in the DOM, removing the need to un-register observers that would otherwise leak. See <a href="#node_observe"><code>node_observe</code></a> and <a href="#$observe"><code>$observe()</code></a>. Also, the <a href="#o.Observable"><code>Observables</code></a> are <strong>buffed</strong> ; they can be transformed and combined, which makes for very fun data pipelines.</p>
</li>
<li>
<p><strong>You like to manipulate the DOM directly</strong>. In ELT, all the <code><jsx>code</jsx></code> return DOM Elements that can be manipulated with vanilla javascript. In general, the library makes use of standards and tries as much as possible not to deviate from them.</p>
</li>
<li>
<p><strong>You like expliciteness</strong>. The "moving parts" of your application should be identifiable just by scanning the source code visually ; the Observables and Verbs are a clear giveaway of what parts of your application are subject to change. Also, every symbol you use should be reachable with the go-to definition of your code editor ; html string templates are just plain evil.</p>
</li>
<li>
<p><strong>You're tired of packages with dozens of dependencies</strong>. Element has none. It uses plain, vanilla JS, and doesn't shy away from reimplementing simple algorithms instead of polluting your node_modules, all the while trying to provide enough batteries to not have to import dozens of packages to get work done.</p>
</li>
</ul>
<h2 id="_doc2">In a Nutshell</h2>
<p>ELT offers the following concepts to get this done :</p>
<ul>
<li>
<p>For binding data to the document in an MVVM manner, there is an <a href="#o.Observable"><code>Observable</code></a> class, which is essentially a wrapper around an immutable object that informs <a href="#o.Observer"><code>Observer</code></a>s whenever its value is changed. Observables can also be combined together or transformed to get new observables whose value change whenever their base Observable change.</p>
</li>
<li>
<p>Since observing an observable makes them keeps a reference to their observers in the memory, observers have to be deregistered properly when they're not used anymore. To alleviate the burden on the programmer and avoid forgetting to stop the observers -- and thus create memory leaks, ELT associates observing with nodes and whether they're in the document or not. See <a href="#$observe"><code>$observe()</code></a>, <a href="#node_observe"><code>node_observe()</code></a> and <a href="#Mixin.observe"><code>Mixin.observe()</code></a>.</p>
</li>
<li>
<p>Since the DOM does not offer a simple way to know <em>when</em> a node is added or removed from the document other than using a <code>MutationObserver</code>, ELT offers a way to react to these events by setting up the observer itself and registering callbacks directly on the <code>Node</code>s. See <a href="#$inserted"><code>$inserted()</code></a>, <a href="#$removed"><code>$removed()</code></a>, but also <a href="#$init"><code>$init()</code></a>.</p>
</li>
<li>
<p>Instead of creating components that change what they render based on the values of Observables, such as an hypothetical <code><If condition={...}></code>, ELT uses "verbs" ; functions whose name starts with an <strong>upper-case</strong> letter. While a component-based approach would work perfectly, the "verb" approach is more explicit about where dynamicity is happening in the code. See <a href="#If"><code>If()</code></a>, <a href="#Repeat"><code>Repeat</code></a>, <a href="#RepeatScroll"><code>RepeatScroll</code></a> and <a href="#Switch"><code>Switch</code></a>.</p>
</li>
<li>
<p>To avoid declaring a boatload of variables to modify nodes that are being created, ELT defines <a href="#Decorator">"decorators"</a> which are callback functions that can be added as children of a node. See all the <code>$</code> prefixed functions followed by a <strong>lower-case</strong> letter. Their naming scheme was thought to differenciate them from function calls that actually <em>create</em> Nodes.</p>
</li>
<li>
<p>While most of the time it is simpler to use Function components and bind on <code>Node</code>s directly with decorators, it is sometimes preferable to adopt an object oriented approach. For those cases, there is the <a href="#Mixin"><code>Mixin</code></a> class, or even the <a href="#Component"><code>Component</code></a> class.</p>
</li>
<li>
<p>At last, ELT offers a simple way to build applications with the <a href="#App"><code>App</code></a> class and friends. While it is not mandatory to use it to get things done, it's small enough to not add much weight to the library, and convenient enough to build complex applications to justify its inclusion in the core library and not become "yet another package".</p>
</li>
</ul>
<h1 id="_doc3">Getting started</h1>
<h2 id="_doc4">About this documentation</h2>
<p>All the examples should be runnable, testable and modifiable.</p>
<p>The documentation is set up to use the <code>E()</code> version of <code>e()</code>. They're the same, but ELT infects the global namespace and adds <code>E()</code> on <code>window</code> to make it more convenient (only if <code>E</code> did not exist before, of course). This saves <code>import</code> statements and hopefully makes for a less cluttered documentation.</p>
<p>Also, <a href="#setup_setup_mutation_observer"><code>setup_mutation_observer</code></a> is called automatically in the examples to reduce verbosity.</p>
<h2 id="_doc5">Installation</h2>
<p>First, install elt in your project</p>
<pre class='language-bash'><code><span class="token function">npm</span> <span class="token function">install</span> elt
<span class="token comment"># Alternatively</span>
<span class="token function">yarn</span> <span class="token function">add</span> elt
</code></pre>
<p>In your <code>tsconfig.json</code>, you will need to add the following :</p>
<pre class='language-json'><code> <span class="token property">"strict"</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> <span class="token comment">// not needed, but strongly advised</span>
<span class="token property">"lib"</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">"es6"</span><span class="token punctuation">,</span> <span class="token string">"dom"</span><span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token comment">// elt uses some es6 specific classes, and of course a lot of the DOM api</span>
<span class="token property">"jsx"</span><span class="token operator">:</span> <span class="token string">"react"</span><span class="token punctuation">,</span>
<span class="token property">"jsxNamespace"</span><span class="token operator">:</span> <span class="token string">"E"</span><span class="token punctuation">,</span> <span class="token comment">// alternatively </span><span class="token property">"jsxNamespace"</span><span class="token operator">:</span> <span class="token string">"e"</span><span class="token punctuation">,</span> but you then have to
<span class="token comment">// `import { e } from 'elt'` in all your .tsx files.</span>
</code></pre>
<blockquote>
<p><strong>Note</strong>: You can also use <code>"jsxFactory": "E"</code> instead of <code>jsxNamespace</code>, but to use fragments, you have to <code>import { Fragment } from 'elt'</code> and then use the <code><Fragment></Fragment></code> construct instead of <code><></></code>. You may of course rename it to something terser, such as <code>import { Fragment as $ }</code> and <code><$></$></code>. The plus side of this approach is that typescript will only generate <code>E()</code> calls instead of <code>E.createElement()</code>, resulting in smaller, easier to read compiled code.</p>
</blockquote>
<p>At last, you need to setup the <a href="https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver"><code>MutationObserver</code></a> which will call the life-cycle callbacks used extensively by elt. This has to be done only once <em>per document</em>, see <a href="#setup_mutation_observer"><code>setup_mutation_observer</code></a></p>
<pre class='language-jsx'><code><span class="token keyword">import</span> <span class="token punctuation">{</span> setup_mutation_observer <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'elt'</span>
<span class="token function">setup_mutation_observer</span><span class="token punctuation">(</span>document<span class="token punctuation">)</span>
<span class="token comment">// you</span>
</code></pre>
<h2 id="_doc6">Using it with a module loader</h2>
<p>You can use the library through import statements. It is perfectly fine to use with webpack, rollup or parcel, although as of now no effort was put to make elt (tree-shakable)[https://webpack.js.org/guides/tree-shaking/].</p>
<pre class='language-tsx'><code><span class="token keyword">import</span> <span class="token punctuation">{</span> o<span class="token punctuation">,</span> $bind<span class="token punctuation">,</span> setup_mutation_observer <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'elt'</span>
<span class="token function">setup_mutation_observer</span><span class="token punctuation">(</span>document<span class="token punctuation">)</span>
<span class="token keyword">const</span> o_says <span class="token operator">=</span> <span class="token function">o</span><span class="token punctuation">(</span><span class="token string">'hello world'</span><span class="token punctuation">)</span>
document<span class="token punctuation">.</span>body<span class="token punctuation">.</span><span class="token function">appendChild</span><span class="token punctuation">(</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span><span class="token plain-text">
</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span><span class="token punctuation">></span></span><span class="token punctuation">{</span>$bind<span class="token punctuation">.</span><span class="token function">string</span><span class="token punctuation">(</span>o_says<span class="token punctuation">)</span><span class="token punctuation">}</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>input</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span><span class="token plain-text">
</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span><span class="token plain-text">Element says </span><span class="token punctuation">{</span>o_says<span class="token punctuation">}</span><span class="token plain-text"> !</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span><span class="token plain-text">
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span><span class="token punctuation">)</span>
</code></pre>
<h2 id="_doc7">Using it as an umd module</h2>
<p>ELT supports being used as an umd module in a regular <code><script></code> import, in which case its global name is elt.</p>
<pre class='language-jsx'><code><span class="token keyword">const</span> <span class="token punctuation">{</span> o<span class="token punctuation">,</span> $bind<span class="token punctuation">,</span> setup_mutation_observer <span class="token punctuation">}</span> <span class="token operator">=</span> elt
<span class="token function">setup_mutation_observer</span><span class="token punctuation">(</span>document<span class="token punctuation">)</span>
<span class="token comment">// ... profit !</span>
</code></pre>
<h1 id="_doc8">Elt primer</h1>
<h2 id="_doc9">Creating nodes</h2>
<h3 id="_doc10">Using TSX</h3>
<p>Use TSX (the typescript version of JSX) to build your interfaces. The result of a TSX expression is alwas a DOM <code>Node</code>.
This means that the result of a tsx expression (or a <code>e()</code> call) is directly insertable into the document.</p>
<pre class='language-jsx'><code><span class="token comment">// You can write that.</span>
<span class="token keyword">import</span> <span class="token punctuation">{</span> setup_mutation_observer <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'elt'</span>
<span class="token function">setup_mutation_observer</span><span class="token punctuation">(</span>document<span class="token punctuation">)</span>
document<span class="token punctuation">.</span>body<span class="token punctuation">.</span><span class="token function">appendChild</span><span class="token punctuation">(</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">'</span>some-class<span class="token punctuation">'</span></span><span class="token punctuation">></span></span><span class="token plain-text">Hello</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span><span class="token punctuation">)</span>
</code></pre>
<p>Typescript's TSX is awesome. Unfortunately, as of today (version 3.8), its system still considers a TSX element as the type defined as the <code>JSX.Element</code> type, which is why as far as the type system is concerned, <code>var div = <div/></code> will always have the type <code>Node</code>.</p>
<pre class='language-tsx'><code><span class="token comment">// This is correct, as ELT will create an HTMLDivElement, but unfortunately, typescript won't allow it.</span>
<span class="token keyword">var</span> div<span class="token operator">:</span> HTMLDivElement <span class="token operator">=</span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">/></span></span>
<span class="token comment">// This works</span>
<span class="token keyword">var</span> div <span class="token operator">=</span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">/></span></span> <span class="token keyword">as</span> HTMLDivElement
<span class="token comment">// But so does this, which is incorrect</span>
<span class="token keyword">var</span> div <span class="token operator">=</span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span><span class="token punctuation">/></span></span> <span class="token keyword">as</span> HTMLDivElement <span class="token comment">// this should be HTMLInputElement</span>
<span class="token comment">// when using the as keyword, Typescript allows a cast as a subtype without complaining.</span>
</code></pre>
<h3 id="_doc11">Creating nodes without tsx</h3>
<p>It is possible to use <code>E()</code> (or <code>e()</code>) directly ; they use the correct types. The <code>e</code> function is made to be a target for tsx code generation, but its signature is a tad more flexible. Check its documentation for more informations.</p>
<pre class='language-tsx'><code><span class="token keyword">var</span> div <span class="token operator">=</span> <span class="token constant">E</span><span class="token punctuation">(</span><span class="token string">'div'</span><span class="token punctuation">)</span> <span class="token comment">// div is infered as HTMLDivElement, hurray !</span>
<span class="token keyword">var</span> div2 <span class="token operator">=</span> <span class="token constant">E</span><span class="token punctuation">(</span><span class="token string">'div'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span><span class="token keyword">class</span><span class="token operator">:</span> <span class="token string">'my-class'</span><span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token string">'Some text content'</span><span class="token punctuation">)</span>
</code></pre>
<p>ELT provides a few helper functions to work without tsx without too much pain ;</p>
<pre class='language-tsx'><code><span class="token keyword">import</span> <span class="token punctuation">{</span> o<span class="token punctuation">,</span> $bind <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'elt'</span>
<span class="token keyword">var</span> o_contents <span class="token operator">=</span> <span class="token function">o</span><span class="token punctuation">(</span><span class="token string">''</span><span class="token punctuation">)</span>
document<span class="token punctuation">.</span>body<span class="token punctuation">.</span><span class="token function">appendChild</span><span class="token punctuation">(</span>
<span class="token constant">E</span><span class="token punctuation">.</span><span class="token constant">DIV</span><span class="token punctuation">(</span>
<span class="token constant">E</span><span class="token punctuation">.</span><span class="token constant">SPAN</span><span class="token punctuation">(</span><span class="token string">'span contents !'</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
<span class="token constant">E</span><span class="token punctuation">.</span><span class="token constant">INPUT</span><span class="token punctuation">(</span>$bind<span class="token punctuation">.</span><span class="token function">string</span><span class="token punctuation">(</span>o_contents<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
o_contents
<span class="token punctuation">)</span>
<span class="token punctuation">)</span>
</code></pre>
<h2 id="_doc12">Adding children</h2>
<p>Nodes can of course have children. ELT defines a <a href="#Renderable"><code>Renderable</code></a> type which defines which types can safely rendered as a child to a node.</p>
<p>You may thus add variables of type :</p>
<ul>
<li><code>string</code>, which will be rendered as is</li>
<li><code>number</code>, which will be converted using <code>.toString()</code></li>
<li><code>null</code> and <code>undefined</code>, which render nothing</li>
<li><code>Node</code>, which will be added as-is</li>
<li>An array of all of them. Arrays may be nested ; ELT will traverse through them and flatten them when rendering.</li>
<li>Finally, an <a href="#o.Observable"><code>Observable</code></a> of all the previously mentionned types, which will then update the DOM whenever its value change.</li>
</ul>
<p>This means that for any Observable that should be rendered into the dom, it first has to be converted to one of these types to appear.</p>
<pre class='language-tsx'><code><span class="token keyword">import</span> <span class="token punctuation">{</span> o <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'elt'</span>
<span class="token comment">// A small exemple which works</span>
<span class="token keyword">const</span> o_txt <span class="token operator">=</span> <span class="token function">o</span><span class="token punctuation">(</span><span class="token string">'some text'</span><span class="token punctuation">)</span>
<span class="token keyword">const</span> o_date <span class="token operator">=</span> <span class="token function">o</span><span class="token punctuation">(</span><span class="token keyword">new</span> <span class="token class-name">Date</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span>
<span class="token keyword">const</span> date_format <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Intl<span class="token punctuation">.</span>DateTimeFormat</span><span class="token punctuation">(</span><span class="token string">'fr'</span><span class="token punctuation">)</span>
document<span class="token punctuation">.</span>body<span class="token punctuation">.</span><span class="token function">appendChild</span><span class="token punctuation">(</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span><span class="token plain-text">
</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>span</span><span class="token punctuation">></span></span><span class="token punctuation">{</span>o_txt<span class="token punctuation">}</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span><span class="token punctuation">></span></span><span class="token plain-text">
</span><span class="token punctuation">{</span><span class="token number">1234</span><span class="token punctuation">}</span><span class="token plain-text">
</span><span class="token punctuation">{</span><span class="token punctuation">[</span><span class="token string">'hello'</span><span class="token punctuation">,</span> <span class="token string">'world'</span><span class="token punctuation">,</span> <span class="token punctuation">[</span><span class="token string">'hows'</span><span class="token punctuation">,</span> <span class="token string">'it'</span><span class="token punctuation">,</span> <span class="token string">'going?'</span><span class="token punctuation">]</span><span class="token punctuation">]</span><span class="token punctuation">}</span><span class="token plain-text">
</span><span class="token punctuation">{</span><span class="token keyword">null</span><span class="token punctuation">}</span><span class="token plain-text">
</span><span class="token punctuation">{</span><span class="token comment">/* here, o_date is transformed (tf) to another observable that holds a string, which can then be rendered. */</span><span class="token punctuation">}</span><span class="token plain-text">
</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span><span class="token punctuation">{</span>o_date<span class="token punctuation">.</span><span class="token function">tf</span><span class="token punctuation">(</span><span class="token parameter">d</span> <span class="token operator">=></span> date_format<span class="token punctuation">.</span><span class="token function">format</span><span class="token punctuation">(</span>d<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">}</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span><span class="token plain-text">
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span><span class="token punctuation">)</span>
</code></pre>
<p>The non-jsx version works by adding children as arguments.</p>
<pre class='language-tsx'><code><span class="token keyword">import</span> <span class="token punctuation">{</span> o <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'elt'</span>
<span class="token keyword">const</span> o_txt <span class="token operator">=</span> <span class="token function">o</span><span class="token punctuation">(</span><span class="token string">'observable'</span><span class="token punctuation">)</span>
<span class="token keyword">const</span> o_date <span class="token operator">=</span> <span class="token function">o</span><span class="token punctuation">(</span><span class="token keyword">new</span> <span class="token class-name">Date</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span>
<span class="token keyword">const</span> date_format <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Intl<span class="token punctuation">.</span>DateTimeFormat</span><span class="token punctuation">(</span><span class="token string">'fr'</span><span class="token punctuation">)</span>
document<span class="token punctuation">.</span>body<span class="token punctuation">.</span><span class="token function">appendChild</span><span class="token punctuation">(</span><span class="token constant">E</span><span class="token punctuation">.</span><span class="token constant">DIV</span><span class="token punctuation">(</span>
<span class="token constant">E</span><span class="token punctuation">.</span><span class="token constant">SPAN</span><span class="token punctuation">(</span>o_txt<span class="token punctuation">)</span><span class="token punctuation">,</span>
<span class="token number">1234</span><span class="token punctuation">,</span>
<span class="token punctuation">[</span><span class="token string">'hello'</span><span class="token punctuation">,</span> <span class="token string">'world'</span><span class="token punctuation">,</span> <span class="token punctuation">[</span><span class="token string">'hows'</span><span class="token punctuation">,</span> <span class="token string">'it'</span><span class="token punctuation">,</span> <span class="token string">'going?'</span><span class="token punctuation">]</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
<span class="token keyword">null</span><span class="token punctuation">,</span>
<span class="token constant">E</span><span class="token punctuation">.</span><span class="token constant">DIV</span><span class="token punctuation">(</span>o_date<span class="token punctuation">.</span><span class="token function">tf</span><span class="token punctuation">(</span><span class="token parameter">d</span> <span class="token operator">=></span> date_format<span class="token punctuation">.</span><span class="token function">format</span><span class="token punctuation">(</span>d<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">)</span>
<span class="token punctuation">)</span><span class="token punctuation">)</span>
</code></pre>
<h2 id="_doc13">Attributes</h2>
<p>All attributes on <code>HTMLElement</code> can have observables passed as value, in which case the attribute is updated as the observable changes.
If the observable is boolean, then the value of the attribute will be <code>''</code>.</p>
<pre class='language-tsx'><code><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">contenteditable</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>o_boolean<span class="token punctuation">}</span></span><span class="token punctuation">/></span></span>
</code></pre>
<h2 id="_doc14">Classes and Styles</h2>
<p><code>class</code> and <code>style</code> on elements can receive <code>Observable</code> as well as regular values.</p>
<p><code>class</code> can be a <code>o.RO<string></code> or an object of class definitions, where the properties are the class name and their values the potentially observable condition that will determine if the class is attributed. On top of that, class can receive an array of the two former to build complex classes.</p>
<pre class='language-tsx'><code><span class="token keyword">import</span> <span class="token punctuation">{</span> o <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'elt'</span>
<span class="token keyword">const</span> o_class <span class="token operator">=</span> <span class="token function">o</span><span class="token punctuation">(</span><span class="token string">'class2'</span><span class="token punctuation">)</span>
<span class="token keyword">const</span> o_bool <span class="token operator">=</span> <span class="token function">o</span><span class="token punctuation">(</span><span class="token boolean">true</span><span class="token punctuation">)</span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">[</span><span class="token string">'class1'</span><span class="token punctuation">,</span> o_class<span class="token punctuation">,</span> <span class="token punctuation">{</span>class3<span class="token operator">:</span> o_bool<span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">}</span></span><span class="token punctuation">/></span></span>
<span class="token comment">// -> <div class='class1 class2 class3'/></span>
<span class="token comment">// ... some later code runs the following :</span>
o_bool<span class="token punctuation">.</span><span class="token keyword">set</span><span class="token punctuation">(</span><span class="token boolean">false</span><span class="token punctuation">)</span>
<span class="token comment">// -> <div class='class1 class2'/></span>
o_class<span class="token punctuation">.</span><span class="token keyword">set</span><span class="token punctuation">(</span><span class="token string">'another-class'</span><span class="token punctuation">)</span>
<span class="token comment">// -> <div class='class1 another-class'></span>
</code></pre>
<p>The <code>style</code> attribute does not accept text. Since it is considered good practice to not use this attribute, only its object form is supported for those cases where you can't do without.</p>
<pre class='language-jsx'><code><span class="token keyword">const</span> o_width <span class="token operator">=</span> <span class="token function">o</span><span class="token punctuation">(</span><span class="token string">'432px'</span><span class="token punctuation">)</span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Elt</span></span> <span class="token attr-name">style</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span> <span class="token punctuation">{</span>width<span class="token operator">:</span> o_width<span class="token punctuation">}</span> <span class="token punctuation">}</span></span><span class="token punctuation">></span></span><span class="token plain-text">
</span></code></pre>
<h2 id="_doc15">Dynamicity through Observables and Verbs</h2>
<p>Verbs are simply functions whose name is a verb (hence the name), that usually start with an uppercase letter to add a visual emphasis on their presence.
The reason they're named "verbs" is to emphasise the fact they represent dynamicity, things that change.</p>
<p>While they could have been implemented as Components, the choice was deliberately made to make them regular function calls to insist on the fact that they're not just some html component that will sit in the document once rendered.</p>
<p>They usually work in concert with Observables to control the presence of nodes in the document.</p>
<p>For instance, <a href="#If"><code>If</code></a> will render its then arm only if the given observable is truthy, and the else otherwise.</p>
<p><a href="#Repeat"><code>Repeat</code></a> repeats the contents of an array, with an optional separator. <a href="#RepeatScroll"><code>RepeatScroll</code></a> does the same, but stops rendering elements once they overflow past the bottom of the <a href="#$scrollable"><code>$scrollable</code></a> block they're in.</p>
<h2 id="_doc16">Node Decorators</h2>
<p>Decorators are a handy way of playing with a node without having to assign it to a variable first.</p>
<p>As the <a href="#Renderable"><code>Renderable</code></a> type controls what types can safely be appended to a node, the <a href="#Insertable"><code>Insertable</code></a> type controls what can be put as a child, without necessarily mean that it will have a visual representation.</p>
<p>Decorators are part of <a href="#Insertable"><code>Insertable</code></a>, and are simply functions that take the current node as an argument.</p>
<pre class='language-tsx'><code>document<span class="token punctuation">.</span>body<span class="token punctuation">.</span><span class="token function">appendChild</span><span class="token punctuation">(</span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span><span class="token plain-text">
</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span><span class="token punctuation">></span></span><span class="token plain-text">
</span><span class="token punctuation">{</span><span class="token parameter">inp</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
<span class="token comment">// here, inp is of type HTMLInputElement</span>
inp<span class="token punctuation">.</span>value <span class="token operator">=</span> <span class="token string">'some value'</span>
<span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token plain-text">
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>input</span><span class="token punctuation">></span></span><span class="token plain-text">
</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span><span class="token plain-text">
This div is all uppercase
</span><span class="token punctuation">{</span><span class="token parameter">div</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
div<span class="token punctuation">.</span>style<span class="token punctuation">.</span>textTransform <span class="token operator">=</span> <span class="token string">'uppercase'</span>
<span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token plain-text">
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span><span class="token plain-text">
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
<span class="token punctuation">)</span>
</code></pre>
<blockquote>
<p><strong>Note</strong>: The above warning about <jsx></jsx> returning Node and having to be cast to their correct type does not affect the functionnality of decorators.
Declaring a function in a child will work with the type inferer ;</p>
</blockquote>
<p>Decorators may return any <a href="#Insertable"><code>Insertable</code></a>, even if it is another decorator.</p>
<p>See the existing decorators to see what they can do.</p>
<h2 id="_doc17">Observables</h2>
<p>Observables are the mechanism through which we achieve MVVM. They are not RxJS's Observable (see <code>src/observable.ts</code>).</p>
<p>Basically, an <code>Observable</code> holds a value. You can retrieve it with <code>.get()</code> or modify it with <code>.set()</code>.</p>
<pre class='language-tsx'><code><span class="token keyword">import</span> <span class="token punctuation">{</span> o <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'elt'</span>
<span class="token keyword">const</span> o_bool <span class="token operator">=</span> <span class="token function">o</span><span class="token punctuation">(</span><span class="token boolean">true</span><span class="token punctuation">)</span>
o_bool<span class="token punctuation">.</span><span class="token keyword">get</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token comment">// true</span>
o_bool<span class="token punctuation">.</span><span class="token keyword">set</span><span class="token punctuation">(</span><span class="token boolean">false</span><span class="token punctuation">)</span>
o_bool<span class="token punctuation">.</span><span class="token keyword">get</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token comment">// false</span>
</code></pre>
<h3 id="_doc18">Transformations</h3>
<p>They can be transformed, and these transformations can be bidirectional.</p>
<pre class='language-tsx'><code><span class="token keyword">import</span> <span class="token punctuation">{</span> o<span class="token punctuation">,</span> $click <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'elt'</span>
<span class="token keyword">const</span> o_obj <span class="token operator">=</span> <span class="token function">o</span><span class="token punctuation">(</span><span class="token punctuation">{</span>a<span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span> b<span class="token operator">:</span> <span class="token string">'hello'</span><span class="token punctuation">}</span><span class="token punctuation">)</span>
<span class="token keyword">const</span> o_a <span class="token operator">=</span> o_obj<span class="token punctuation">.</span><span class="token function">p</span><span class="token punctuation">(</span><span class="token string">'a'</span><span class="token punctuation">)</span> <span class="token comment">// o_a is a new Observable that watches the 'a' property. Its type is o.Observable<number></span>
o_a<span class="token punctuation">.</span><span class="token keyword">set</span><span class="token punctuation">(</span><span class="token number">3</span><span class="token punctuation">)</span>
<span class="token keyword">const</span> o_tf <span class="token operator">=</span> o_a<span class="token punctuation">.</span><span class="token function">tf</span><span class="token punctuation">(</span><span class="token punctuation">{</span><span class="token function-variable function">transform</span><span class="token operator">:</span> <span class="token parameter">val</span> <span class="token operator">=></span> val <span class="token operator">*</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token function-variable function">revert</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token parameter">nval<span class="token operator">:</span> <span class="token builtin">number</span></span><span class="token punctuation">)</span> <span class="token operator">=></span> nval <span class="token operator">/</span> <span class="token number">2</span><span class="token punctuation">}</span><span class="token punctuation">)</span>
o_tf<span class="token punctuation">.</span><span class="token keyword">get</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token comment">// 6</span>
o_tf<span class="token punctuation">.</span><span class="token keyword">set</span><span class="token punctuation">(</span><span class="token number">8</span><span class="token punctuation">)</span> <span class="token comment">// o_a is now 4, and o_obj is {a: 4, b: '!!!'}</span>
<span class="token comment">// A transform can also be unidirectionnal</span>
<span class="token keyword">const</span> o_tf2 <span class="token operator">=</span> o_a<span class="token punctuation">.</span><span class="token function">tf</span><span class="token punctuation">(</span><span class="token parameter">val</span> <span class="token operator">=></span> val <span class="token operator">*</span> <span class="token number">3</span><span class="token punctuation">)</span>
o_tf2<span class="token punctuation">.</span><span class="token keyword">get</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token comment">// 9</span>
<span class="token comment">// But then, the resulting observable is read only !</span>
o_tf2<span class="token punctuation">.</span><span class="token keyword">set</span><span class="token punctuation">(</span><span class="token number">3</span><span class="token punctuation">)</span> <span class="token comment">// Compile error ! Runtime error too !</span>
document<span class="token punctuation">.</span>body<span class="token punctuation">.</span><span class="token function">appendChild</span><span class="token punctuation">(</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span><span class="token plain-text">
</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span><span class="token plain-text">
o_obj is: </span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>code</span><span class="token punctuation">></span></span><span class="token punctuation">{</span>o_obj<span class="token punctuation">.</span><span class="token function">tf</span><span class="token punctuation">(</span><span class="token parameter">value</span> <span class="token operator">=></span> <span class="token constant">JSON</span><span class="token punctuation">.</span><span class="token function">stringify</span><span class="token punctuation">(</span>value<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">}</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>code</span><span class="token punctuation">></span></span><span class="token plain-text"> and o_a is: </span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>code</span><span class="token punctuation">></span></span><span class="token punctuation">{</span>o_a<span class="token punctuation">}</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>code</span><span class="token punctuation">></span></span><span class="token plain-text">
</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>button</span><span class="token punctuation">></span></span><span class="token punctuation">{</span><span class="token function">$click</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> o_a<span class="token punctuation">.</span><span class="token keyword">set</span><span class="token punctuation">(</span><span class="token number">3</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">}</span><span class="token plain-text">
Set o_a
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>button</span><span class="token punctuation">></span></span><span class="token plain-text">
</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>button</span><span class="token punctuation">></span></span><span class="token plain-text">
</span><span class="token punctuation">{</span><span class="token function">$click</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> o_obj<span class="token punctuation">.</span><span class="token function">p</span><span class="token punctuation">(</span><span class="token string">'b'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token keyword">set</span><span class="token punctuation">(</span><span class="token string">'!!!'</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">}</span><span class="token plain-text">
Set o_b
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>button</span><span class="token punctuation">></span></span><span class="token plain-text">
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span><span class="token plain-text">
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span><span class="token punctuation">)</span>
</code></pre>
<p>The value in an observable is <strong>immutable</strong>. Whenever a modifying method is called, the object inside it is cloned.</p>
<pre class='language-tsx'><code><span class="token keyword">import</span> <span class="token punctuation">{</span> o <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'elt'</span>
<span class="token keyword">const</span> o_obj <span class="token operator">=</span> <span class="token function">o</span><span class="token punctuation">(</span><span class="token punctuation">{</span>a<span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span> b<span class="token operator">:</span> <span class="token string">'b'</span><span class="token punctuation">}</span><span class="token punctuation">)</span>
<span class="token keyword">const</span> prev <span class="token operator">=</span> o_obj<span class="token punctuation">.</span><span class="token keyword">get</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
o_obj<span class="token punctuation">.</span><span class="token function">p</span><span class="token punctuation">(</span><span class="token string">'b'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token keyword">set</span><span class="token punctuation">(</span><span class="token string">'something else'</span><span class="token punctuation">)</span>
document<span class="token punctuation">.</span>body<span class="token punctuation">.</span><span class="token function">appendChild</span><span class="token punctuation">(</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>span</span><span class="token punctuation">></span></span><span class="token punctuation">{</span>prev <span class="token operator">===</span> o_obj<span class="token punctuation">.</span><span class="token keyword">get</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">?</span> <span class="token string">'true'</span> <span class="token operator">:</span> <span class="token string">'false'</span><span class="token punctuation">}</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span><span class="token punctuation">></span></span><span class="token punctuation">)</span>
</code></pre>
<p>They can do a <strong>lot</strong> more than these very simple transformations. Check the Observable documentation.</p>
<h3 id="_doc19">Combining</h3>
<p>Two or more observables can be joined together to make a new observable that will update when any of its constituents change. See <a href="#o.combine"><code>o.combine</code></a>, <a href="#o.join"><code>o.join</code></a> and <a href="#o.merge"><code>o.merge</code></a>.</p>
<p>A notable case is the <code>.p()</code> method on Observable, which creates a new Observable based on the property of another ; the property itself can be an Observable. If the base object or the property change, the resulting observable is updated.</p>
<pre class='language-tsx'><code><span class="token keyword">import</span> <span class="token punctuation">{</span> o<span class="token punctuation">,</span> Fragment <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'elt'</span>
<span class="token keyword">type</span> SomeType <span class="token operator">=</span> <span class="token punctuation">{</span>a<span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">,</span> b<span class="token operator">:</span> <span class="token builtin">number</span><span class="token punctuation">}</span>
<span class="token keyword">const</span> o_obj <span class="token operator">=</span> <span class="token function">o</span><span class="token punctuation">(</span><span class="token punctuation">{</span>a<span class="token operator">:</span> <span class="token string">'string !'</span><span class="token punctuation">,</span> b<span class="token operator">:</span> <span class="token number">2</span><span class="token punctuation">}</span> <span class="token keyword">as</span> SomeType<span class="token punctuation">)</span>
<span class="token keyword">const</span> o_key <span class="token operator">=</span> <span class="token function">o</span><span class="token punctuation">(</span><span class="token string">'a'</span> <span class="token keyword">as</span> <span class="token keyword">keyof</span> SomeType<span class="token punctuation">)</span>
<span class="token keyword">const</span> o_prop <span class="token operator">=</span> o_obj<span class="token punctuation">.</span><span class="token function">p</span><span class="token punctuation">(</span>o_key<span class="token punctuation">)</span>
o_key<span class="token punctuation">.</span><span class="token keyword">set</span><span class="token punctuation">(</span><span class="token string">'b'</span><span class="token punctuation">)</span> <span class="token comment">// o_prop now has 2 as a value</span>
<span class="token comment">// o_prop now has 3</span>
document<span class="token punctuation">.</span>body<span class="token punctuation">.</span><span class="token function">appendChild</span><span class="token punctuation">(</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Fragment</span></span><span class="token punctuation">></span></span><span class="token plain-text">
</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span><span class="token plain-text">o_obj: </span><span class="token punctuation">{</span>o_obj<span class="token punctuation">.</span><span class="token function">tf</span><span class="token punctuation">(</span><span class="token parameter">v</span> <span class="token operator">=></span> <span class="token constant">JSON</span><span class="token punctuation">.</span><span class="token function">stringify</span><span class="token punctuation">(</span>v<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">}</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span><span class="token plain-text">
</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span><span class="token plain-text">o_prop: </span><span class="token punctuation">{</span>o_prop<span class="token punctuation">}</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span><span class="token plain-text">
</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span><span class="token plain-text">
</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">DemoBtn</span></span> <span class="token attr-name">do</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> o_key<span class="token punctuation">.</span><span class="token keyword">set</span><span class="token punctuation">(</span><span class="token string">'a'</span><span class="token punctuation">)</span><span class="token punctuation">}</span></span><span class="token punctuation">/></span></span><span class="token plain-text">
</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">DemoBtn</span></span> <span class="token attr-name">do</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> o_key<span class="token punctuation">.</span><span class="token keyword">set</span><span class="token punctuation">(</span><span class="token string">'b'</span><span class="token punctuation">)</span><span class="token punctuation">}</span></span><span class="token punctuation">/></span></span><span class="token plain-text">
</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">DemoBtn</span></span> <span class="token attr-name">do</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> o_obj<span class="token punctuation">.</span><span class="token keyword">set</span><span class="token punctuation">(</span><span class="token punctuation">{</span>a<span class="token operator">:</span> <span class="token string">'world'</span><span class="token punctuation">,</span> b<span class="token operator">:</span> <span class="token number">3</span><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">}</span></span><span class="token punctuation">/></span></span><span class="token plain-text">
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span><span class="token plain-text">
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">Fragment</span></span><span class="token punctuation">></span></span><span class="token punctuation">)</span>
</code></pre>
<h2 id="_doc20">Mixins</h2>
<p>A <a href="#Mixin"><code>Mixin</code></a> is an object that is tied to a node. Just like decorators, they are part of the <a href="#Insertable"><code>Insertable</code></a> type, which means that the way to add them to a <code>Node</code> is simply to put them somewhere in their children.</p>
<p>They serve as the basis for the <code>Component</code> class below, and have a few convenient methods, such as <code>.observe()</code> and <code>.listen()</code>, and have a way of defining <code>init()</code>, <code>inserted()</code> and <code>removed()</code> that work like their decorator counterparts.</p>
<p>Aside from creating components with the <code>Component</code> class, their utility resides in the fact they allow a developper to write extensible classes and to encapsulate code neatly when the component has a complex and lengthy implementation.</p>
<pre class='language-tsx'><code><span class="token keyword">import</span> <span class="token punctuation">{</span> Mixin <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'elt'</span>
<span class="token comment">// This mixin can be added on just any node.</span>
<span class="token keyword">class</span> <span class="token class-name">MyMixin</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">N</span></span> <span class="token attr-name">extends</span> <span class="token attr-name">Node</span><span class="token punctuation">></span></span><span class="token plain-text"> extends Mixin</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">N</span></span><span class="token punctuation">></span></span><span class="token plain-text"> </span><span class="token punctuation">{</span>
<span class="token function">inserted</span><span class="token punctuation">(</span><span class="token parameter">node<span class="token operator">:</span> <span class="token constant">N</span></span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token builtin">console</span><span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">I was inserted on</span><span class="token template-punctuation string">`</span></span><span class="token punctuation">,</span> parent<span class="token punctuation">)</span>
<span class="token punctuation">}</span>
<span class="token function">removed</span><span class="token punctuation">(</span><span class="token parameter">node<span class="token operator">:</span> <span class="token constant">N</span><span class="token punctuation">,</span> parent<span class="token operator">:</span> Node</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token builtin">console</span><span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">I was removed from the document</span><span class="token template-punctuation string">`</span></span><span class="token punctuation">)</span>
<span class="token builtin">console</span><span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">My parent was</span><span class="token template-punctuation string">`</span></span><span class="token punctuation">,</span> parent<span class="token punctuation">)</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token plain-text">
document.body.appendChild(</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span><span class="token punctuation">{</span><span class="token keyword">new</span> <span class="token class-name">MyMixin</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">}</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span><span class="token plain-text">)
</span></code></pre>
<h2 id="_doc21">Components</h2>
<p>Use components when you want to reuse dom structures without hassle.</p>
<p>There are two ways of building components ; as a simple function or as a class.</p>
<h3 id="_doc22">Component Functions</h3>
<p>A component function takes two arguments and return a Node.</p>
<p>The first argument is always an <a href="#Attrs"><code>Attrs</code></a> type, with the returned node type as a template argument. The second argument is always <a href="#Renderable">`Renderable[]</a> and are the children that are to be added to this component.</p>
<p>The <code>attrs</code> argument represents what attributes can be set on the component. In simple cases, it is enough to give the arguments with the <code>&</code> operator.</p>
<pre class='language-tsx'><code><span class="token keyword">import</span> <span class="token punctuation">{</span> Attrs<span class="token punctuation">,</span> Renderable <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'elt'</span>
<span class="token keyword">function</span> <span class="token function">MyComponent</span><span class="token punctuation">(</span>attrs<span class="token operator">:</span> Attrs<span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">HTMLDivElement</span></span><span class="token punctuation">></span></span><span class="token plain-text"> & </span><span class="token punctuation">{</span>title<span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">}</span><span class="token plain-text">, children: Renderable[]) </span><span class="token punctuation">{</span>
<span class="token keyword">return</span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span><span class="token plain-text">
</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h1</span><span class="token punctuation">></span></span><span class="token punctuation">{</span>attrs<span class="token punctuation">.</span>title<span class="token punctuation">}</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h1</span><span class="token punctuation">></span></span><span class="token plain-text">
</span><span class="token punctuation">{</span><span class="token comment">/* children will be inserted in the body div. */</span><span class="token punctuation">}</span><span class="token plain-text">
</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">'</span>body<span class="token punctuation">'</span></span><span class="token punctuation">></span></span><span class="token punctuation">{</span>children<span class="token punctuation">}</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span><span class="token plain-text">
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> <span class="token keyword">as</span> HTMLDivElement
<span class="token punctuation">}</span><span class="token plain-text">
document.body.appendChild(</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">MyComponent</span></span> <span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">'</span>Some title<span class="token punctuation">'</span></span><span class="token punctuation">></span></span><span class="token plain-text">
Content </span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>span</span><span class="token punctuation">></span></span><span class="token plain-text">that will be</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span><span class="token punctuation">></span></span><span class="token plain-text"> appended.
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">MyComponent</span></span><span class="token punctuation">></span></span><span class="token plain-text">)
</span></code></pre>
<p>If the attributes are complex, then it is advisable to define an interface.</p>
<pre class='language-tsx'><code><span class="token keyword">import</span> <span class="token punctuation">{</span> Attrs <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'elt'</span>
<span class="token keyword">interface</span> <span class="token class-name">MyComponentAttrs</span> <span class="token keyword">extends</span> <span class="token class-name">Attrs</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">HTMLDivElement</span></span><span class="token punctuation">></span></span><span class="token plain-text"> </span><span class="token punctuation">{</span>
title<span class="token operator">:</span> <span class="token builtin">string</span>
more_content<span class="token operator">?</span><span class="token operator">:</span> Renderable
<span class="token punctuation">}</span><span class="token plain-text">
function MyComponent(attrs: MyComponentAttrs, children: Renderable[]) </span><span class="token punctuation">{</span>
<span class="token comment">/// ...</span>
<span class="token punctuation">}</span><span class="token plain-text">
</span></code></pre>
<h3 id="_doc23">Component class</h3>
<p>A component is a subclass of <code>Mixin</code>. A custom Component must define a <code>.render()</code> method that returns the node type specified in its <code>Attrs</code> type and takes renderables as its only argument.</p>
<p>By default, the attributes are accessible as <code>this.attrs</code> in the component methods.</p>
<pre class='language-tsx'><code><span class="token keyword">class</span> <span class="token class-name">MyComponent</span> <span class="token keyword">extends</span> <span class="token class-name">Component</span><span class="token operator"><</span>Attrs<span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">HTMLDivElement</span></span><span class="token punctuation">></span></span><span class="token plain-text"> & </span><span class="token punctuation">{</span>title<span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">}</span><span class="token plain-text">> </span><span class="token punctuation">{</span>
<span class="token function">render</span><span class="token punctuation">(</span><span class="token parameter">children<span class="token operator">:</span> Renderable<span class="token punctuation">[</span><span class="token punctuation">]</span></span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">return</span> <span class="token constant">E</span><span class="token punctuation">.</span><span class="token constant">DIV</span><span class="token punctuation">(</span>
<span class="token constant">E</span><span class="token punctuation">.</span><span class="token constant">H1</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>attrs<span class="token punctuation">.</span>title<span class="token punctuation">)</span><span class="token punctuation">,</span>
<span class="token constant">E</span><span class="token punctuation">.</span><span class="token constant">DIV</span><span class="token punctuation">(</span>$<span class="token keyword">class</span><span class="token punctuation">(</span><span class="token string">'body'</span><span class="token punctuation">)</span><span class="token punctuation">,</span> children<span class="token punctuation">)</span>
<span class="token punctuation">)</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token plain-text">
</span></code></pre>
<h3 id="_doc24"><code>class</code>, <code>style</code> and <code>id</code></h3>
<p>Since these three attributes are ubiquitous on just any element type, they are handled separately.</p>
<p>They're still passed along the <code>attrs</code> objects given to the components, but they don't have to be handled. They're applied automatically to the root node returned by the component.</p>
<pre class='language-tsx'><code><span class="token keyword">const</span> o_cls <span class="token operator">=</span> <span class="token function">o</span><span class="token punctuation">(</span><span class="token string">'some_class'</span><span class="token punctuation">)</span>
<span class="token comment">// this is valid and works on any component</span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">MyComponent</span></span> <span class="token attr-name">class</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>o_cls<span class="token punctuation">}</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">'</span>some-id<span class="token punctuation">'</span></span> <span class="token attr-name">style</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>width<span class="token operator">:</span> <span class="token string">'350px'</span><span class="token punctuation">}</span><span class="token punctuation">}</span></span><span class="token punctuation">/></span></span>
</code></pre>
<h3 id="_doc25">Components and other Mixins or Decorators</h3>
<p>Decorators and Mixins can be added to components ; the node they act upon is always the root node returned by the component, as is specified in their <code>Attrs</code> definition.</p>
<pre class='language-tsx'><code><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">MyComponent</span></span><span class="token punctuation">></span></span><span class="token plain-text">
</span><span class="token punctuation">{</span><span class="token function">$click</span><span class="token punctuation">(</span><span class="token parameter">ev</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
<span class="token builtin">console</span><span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'the component was clicked on !'</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">}</span><span class="token plain-text">
</span><span class="token punctuation">{</span>$<span class="token keyword">class</span><span class="token punctuation">(</span><span class="token string">'another_class'</span><span class="token punctuation">,</span> o_observable_classname<span class="token punctuation">)</span><span class="token punctuation">}</span><span class="token plain-text">
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">MyComponent</span></span><span class="token punctuation">></span></span>
</code></pre>
<h1>API Documentation</h1><div class="st-block" id="$bind.boolean" data-categories="dom,toc" data-tags="code,category"><div class="st-name st-kind-function"><!-- If --><span class="st-kind">function</span><!-- /If --><b>$bind.boolean</b><!-- If --><!-- /If -->(obs): <span class="st-type">(<!-- Repeat --><span class=""><b>node</b>: <a href="#HTMLInputElement">HTMLInputElement<!-- If --><!-- /If --></a></span><!-- end repeat -->) => <span>void</span></span><!-- If --><!-- /If --><!-- Repeat --><!-- end repeat --><!-- If -->
<!-- /If --><!-- Repeat -->
<span class=""><b>obs</b>: <a href="#o.Observable">o.Observable<!-- If --><<!-- Repeat --><span>boolean</span><!-- end repeat -->><!-- /If --></a></span><!-- end repeat --></div><div class="st-doc"><p>Bind bidirectionnally a boolean observable to an input. Will only work if the input's type
is "radio" or "checkbox".</p>
<pre class='language-tsx'><code><span class="token keyword">import</span> <span class="token punctuation">{</span> o<span class="token punctuation">,</span> $bind<span class="token punctuation">,</span> Fragment <span class="token keyword">as</span> $ <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'elt'</span>
<span class="token keyword">const</span> o_bool <span class="token operator">=</span> <span class="token function">o</span><span class="token punctuation">(</span><span class="token boolean">false</span><span class="token punctuation">)</span>
document<span class="token punctuation">.</span>body<span class="token punctuation">.</span><span class="token function">appendChild</span><span class="token punctuation">(</span><span class="token operator"><</span>$<span class="token operator">></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>checkbox<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token plain-text">
</span><span class="token punctuation">{</span>$bind<span class="token punctuation">.</span><span class="token function">boolean</span><span class="token punctuation">(</span>o_bool<span class="token punctuation">)</span><span class="token punctuation">}</span><span class="token plain-text">
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>input</span><span class="token punctuation">></span></span> <span class="token operator">-</span> <span class="token punctuation">{</span>o_bool<span class="token punctuation">.</span><span class="token function">tf</span><span class="token punctuation">(</span><span class="token parameter">b</span> <span class="token operator">=></span> b <span class="token operator">?</span> <span class="token string">'true'</span> <span class="token operator">:</span> <span class="token string">'false'</span><span class="token punctuation">)</span><span class="token punctuation">}</span>
<span class="token operator"><</span><span class="token operator">/</span>$<span class="token operator">></span><span class="token punctuation">)</span>
</code></pre>
</div></div><div class="st-block" id="$bind.contenteditable" data-categories="dom,toc" data-tags="code,category"><div class="st-name st-kind-function"><!-- If --><span class="st-kind">function</span><!-- /If --><b>$bind.contenteditable</b><!-- If --><!-- /If -->(obs, as_html?): <span class="st-type">(<!-- Repeat --><span class=""><b>node</b>: <a href="#HTMLElement">HTMLElement<!-- If --><!-- /If --></a></span><!-- end repeat -->) => <span>void</span></span><!-- If --><!-- /If --><!-- Repeat --><!-- end repeat --><!-- If -->
<!-- /If --><!-- Repeat -->
<span class=""><b>obs</b>: <a href="#o.Observable">o.Observable<!-- If --><<!-- Repeat --><span>string</span><!-- end repeat -->><!-- /If --></a></span>
<span class="optional"><b>as_html</b>?: <span>boolean</span></span><!-- end repeat --></div><div class="st-doc"><p>Bind a string observable to an html element which is contenteditable.</p>
<pre class='language-tsx'><code><span class="token keyword">import</span> <span class="token punctuation">{</span> o<span class="token punctuation">,</span> $bind<span class="token punctuation">,</span> Fragment <span class="token keyword">as</span> $ <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'elt'</span>
<span class="token keyword">const</span> o_contents <span class="token operator">=</span> <span class="token function">o</span><span class="token punctuation">(</span><span class="token string">'Hello <b>World</b> !'</span><span class="token punctuation">)</span>
document<span class="token punctuation">.</span>body<span class="token punctuation">.</span><span class="token function">appendChild</span><span class="token punctuation">(</span><span class="token operator"><</span>$<span class="token operator">></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">contenteditable</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">'</span>true<span class="token punctuation">'</span></span><span class="token punctuation">></span></span><span class="token plain-text">
</span><span class="token punctuation">{</span>$bind<span class="token punctuation">.</span><span class="token function">contenteditable</span><span class="token punctuation">(</span>o_contents<span class="token punctuation">,</span> <span class="token boolean">true</span><span class="token punctuation">)</span><span class="token punctuation">}</span><span class="token plain-text">
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>pre</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>code</span> <span class="token attr-name">style</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>whiteSpace<span class="token operator">:</span> <span class="token string">'pre-wrap'</span><span class="token punctuation">}</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span><span class="token punctuation">{</span>o_contents<span class="token punctuation">}</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>code</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>pre</span><span class="token punctuation">></span></span>
<span class="token operator"><</span><span class="token operator">/</span>$<span class="token operator">></span><span class="token punctuation">)</span>
</code></pre>
</div></div><div class="st-block" id="$bind.date" data-categories="dom,toc" data-tags="code,category"><div class="st-name st-kind-function"><!-- If --><span class="st-kind">function</span><!-- /If --><b>$bind.date</b><!-- If --><!-- /If -->(obs): <span class="st-type">(<!-- Repeat --><span class=""><b>node</b>: <a href="#HTMLInputElement">HTMLInputElement<!-- If --><!-- /If --></a></span><!-- end repeat -->) => <span>void</span></span><!-- If --><!-- /If --><!-- Repeat --><!-- end repeat --><!-- If -->
<!-- /If --><!-- Repeat -->
<span class=""><b>obs</b>: <a href="#o.Observable">o.Observable<!-- If --><<!-- Repeat --><span class="st-type"><!-- Repeat --><a href="#Date">Date<!-- If --><!-- /If --></a> | <span>null</span><!-- end repeat --></span><!-- end repeat -->><!-- /If --></a></span><!-- end repeat --></div><div class="st-doc"><p>Bind bidirectionnally a <code>Date | null</code> observable to an <code>input</code>. Will only work on inputs
type <code>"date"</code> <code>"datetime"</code> <code>"datetime-local"</code>.</p>
<pre class='language-tsx'><code><span class="token keyword">import</span> <span class="token punctuation">{</span> o<span class="token punctuation">,</span> $bind<span class="token punctuation">,</span> Fragment <span class="token keyword">as</span> $ <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'elt'</span>
<span class="token keyword">const</span> o_date <span class="token operator">=</span> <span class="token function">o</span><span class="token punctuation">(</span><span class="token keyword">null</span> <span class="token keyword">as</span> Date <span class="token operator">|</span> <span class="token keyword">null</span><span class="token punctuation">)</span>
<span class="token keyword">const</span> dtf <span class="token operator">=</span> Intl<span class="token punctuation">.</span><span class="token function">DateTimeFormat</span><span class="token punctuation">(</span><span class="token string">'fr'</span><span class="token punctuation">)</span>
document<span class="token punctuation">.</span>body<span class="token punctuation">.</span><span class="token function">appendChild</span><span class="token punctuation">(</span><span class="token operator"><</span>$<span class="token operator">></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>date<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token plain-text">
</span><span class="token punctuation">{</span>$bind<span class="token punctuation">.</span><span class="token function">date</span><span class="token punctuation">(</span>o_date<span class="token punctuation">)</span><span class="token punctuation">}</span><span class="token plain-text">
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>input</span><span class="token punctuation">></span></span> <span class="token operator">-</span> <span class="token punctuation">{</span>o_date<span class="token punctuation">.</span><span class="token function">tf</span><span class="token punctuation">(</span><span class="token parameter">d</span> <span class="token operator">=></span> d <span class="token operator">?</span> dtf<span class="token punctuation">.</span><span class="token function">format</span><span class="token punctuation">(</span>d<span class="token punctuation">)</span> <span class="token operator">:</span> <span class="token string">'null'</span><span class="token punctuation">)</span><span class="token punctuation">}</span>
<span class="token operator"><</span><span class="token operator">/</span>$<span class="token operator">></span><span class="token punctuation">)</span>
</code></pre>
</div></div><div class="st-block" id="$bind.number" data-categories="dom,toc" data-tags="code,category"><div class="st-name st-kind-function"><!-- If --><span class="st-kind">function</span><!-- /If --><b>$bind.number</b><!-- If --><!-- /If -->(obs): <span class="st-type">(<!-- Repeat --><span class=""><b>node</b>: <a href="#HTMLInputElement">HTMLInputElement<!-- If --><!-- /If --></a></span><!-- end repeat -->) => <span>void</span></span><!-- If --><!-- /If --><!-- Repeat --><!-- end repeat --><!-- If -->
<!-- /If --><!-- Repeat -->
<span class=""><b>obs</b>: <a href="#o.Observable">o.Observable<!-- If --><<!-- Repeat --><span>number</span><!-- end repeat -->><!-- /If --></a></span><!-- end repeat --></div><div class="st-doc"><p>Bind a number observable to an <input type="number"/>. Most likely won't work on anything else
and will set the value to <code>NaN</code>.</p>
<pre class='language-tsx'><code><span class="token keyword">import</span> <span class="token punctuation">{</span> o<span class="token punctuation">,</span> $bind<span class="token punctuation">,</span> Fragment <span class="token keyword">as</span> $ <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'elt'</span>
<span class="token keyword">const</span> o_number <span class="token operator">=</span> <span class="token function">o</span><span class="token punctuation">(</span><span class="token number">1</span><span class="token punctuation">)</span>
document<span class="token punctuation">.</span>body<span class="token punctuation">.</span><span class="token function">appendChild</span><span class="token punctuation">(</span><span class="token operator"><</span>$<span class="token operator">></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>number<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token plain-text">
</span><span class="token punctuation">{</span>$bind<span class="token punctuation">.</span><span class="token function">number</span><span class="token punctuation">(</span>o_number<span class="token punctuation">)</span><span class="token punctuation">}</span><span class="token plain-text">
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>input</span><span class="token punctuation">></span></span> <span class="token operator">/</span> <span class="token punctuation">{</span>o_number<span class="token punctuation">}</span>
<span class="token operator"><</span><span class="token operator">/</span>$<span class="token operator">></span><span class="token punctuation">)</span>
</code></pre>
</div></div><div class="st-block" id="$bind.selected_index" data-categories="dom,toc" data-tags="code,category"><div class="st-name st-kind-function"><!-- If --><span class="st-kind">function</span><!-- /If --><b>$bind.selected_index</b><!-- If --><!-- /If -->(obs): <span class="st-type">(<!-- Repeat --><span class=""><b>node</b>: <a href="#HTMLSelectElement">HTMLSelectElement<!-- If --><!-- /If --></a></span><!-- end repeat -->) => <span>void</span></span><!-- If --><!-- /If --><!-- Repeat --><!-- end repeat --><!-- If -->
<!-- /If --><!-- Repeat -->
<span class=""><b>obs</b>: <a href="#o.Observable">o.Observable<!-- If --><<!-- Repeat --><span>number</span><!-- end repeat -->><!-- /If --></a></span><!-- end repeat --></div><div class="st-doc"><p>Bind a number observable to the selected index of a select element</p>
<pre class='language-tsx'><code><span class="token keyword">import</span> <span class="token punctuation">{</span> o<span class="token punctuation">,</span> $bind<span class="token punctuation">,</span> Fragment <span class="token keyword">as</span> $ <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'elt'</span>
<span class="token keyword">const</span> o_selected <span class="token operator">=</span> <span class="token function">o</span><span class="token punctuation">(</span><span class="token operator">-</span><span class="token number">1</span><span class="token punctuation">)</span>
document<span class="token punctuation">.</span>body<span class="token punctuation">.</span><span class="token function">appendChild</span><span class="token punctuation">(</span><span class="token operator"><</span>$<span class="token operator">></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>select</span><span class="token punctuation">></span></span><span class="token plain-text">
</span><span class="token punctuation">{</span>$bind<span class="token punctuation">.</span><span class="token function">selected_index</span><span class="token punctuation">(</span>o_selected<span class="token punctuation">)</span><span class="token punctuation">}</span><span class="token plain-text">
</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</span><span class="token punctuation">></span></span><span class="token plain-text">one</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span><span class="token plain-text">
</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</span><span class="token punctuation">></span></span><span class="token plain-text">two</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span><span class="token plain-text">
</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</span><span class="token punctuation">></span></span><span class="token plain-text">three</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span><span class="token plain-text">
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>select</span><span class="token punctuation">></span></span> <span class="token operator">/</span> <span class="token punctuation">{</span>o_selected<span class="token punctuation">}</span>
<span class="token operator"><</span><span class="token operator">/</span>$<span class="token operator">></span><span class="token punctuation">)</span>
</code></pre>
</div></div><div class="st-block" id="$bind.string" data-categories="dom,toc" data-tags="code,category"><div class="st-name st-kind-function"><!-- If --><span class="st-kind">function</span><!-- /If --><b>$bind.string</b><!-- If --><!-- /If -->(obs): <span class="st-type">(<!-- Repeat --><span class=""><b>node</b>: <span class="st-type"><!-- Repeat --><a href="#HTMLInputElement">HTMLInputElement<!-- If --><!-- /If --></a> | <a href="#HTMLTextAreaElement">HTMLTextAreaElement<!-- If --><!-- /If --></a><!-- end repeat --></span></span><!-- end repeat -->) => <span>void</span></span><!-- If --><!-- /If --><!-- Repeat --><!-- end repeat --><!-- If -->
<!-- /If --><!-- Repeat -->
<span class=""><b>obs</b>: <a href="#o.Observable">o.Observable<!-- If --><<!-- Repeat --><span>string</span><!-- end repeat -->><!-- /If --></a></span><!-- end repeat --></div><div class="st-doc"><p>Bind an observable to an input's value.</p>
<pre class='language-tsx'><code><span class="token keyword">import</span> <span class="token punctuation">{</span> o<span class="token punctuation">,</span> $bind<span class="token punctuation">,</span> Fragment <span class="token keyword">as</span> $ <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'elt'</span>
<span class="token keyword">const</span> o_string <span class="token operator">=</span> <span class="token function">o</span><span class="token punctuation">(</span><span class="token string">'stuff'</span><span class="token punctuation">)</span>
document<span class="token punctuation">.</span>body<span class="token punctuation">.</span><span class="token function">appendChild</span><span class="token punctuation">(</span><span class="token operator"><</span>$<span class="token operator">></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>text<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token plain-text">
</span><span class="token punctuation">{</span>$bind<span class="token punctuation">.</span><span class="token function">string</span><span class="token punctuation">(</span>o_string<span class="token punctuation">)</span><span class="token punctuation">}</span><span class="token plain-text">
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>input</span><span class="token punctuation">></span></span> <span class="token operator">/</span> <span class="token punctuation">{</span>o_string<span class="token punctuation">}</span>
<span class="token operator"><</span><span class="token operator">/</span>$<span class="token operator">></span><span class="token punctuation">)</span>
</code></pre>
</div></div><div class="st-block" id="$class" data-categories="dom,toc" data-tags="code,category"><div class="st-name st-kind-function"><!-- If --><span class="st-kind">function</span><!-- /If --><b>$class</b><!-- If --><<!-- Repeat -->N<!-- end repeat -->><!-- /If -->(…clss?): <span>(node: N) => void</span><!-- If -->
<!-- /If --><!-- Repeat -->
<span><b>N</b><!-- If --> extends <a href="#Element">Element<!-- If --><!-- /If --></a><!-- /If --></span><!-- end repeat --><!-- If -->
<!-- /If --><!-- Repeat -->
<span class="optional"><b>...clss</b>?: <span><a href="#ClassDefinition">ClassDefinition<!-- If --><!-- /If --></a>[]</span></span><!-- end repeat --></div><div class="st-doc"><p>Observe one or several class definition, where a class definition is either</p>
<ul>
<li>A <code>o.RO<string></code></li>
<li>An object which keys are class names and values are <code>o.RO<any></code> and whose truthiness
determine the inclusion of the class on the target element.</li>
</ul>
<p>The <code>class={}</code> attribute on all nodes works exactly the same as <code>$class</code>.</p>
<pre class='language-tsx'><code><span class="token keyword">import</span> <span class="token punctuation">{</span> $<span class="token keyword">class</span><span class="token punctuation">,</span> o<span class="token punctuation">,</span> Fragment <span class="token keyword">as</span> $<span class="token punctuation">,</span> $bind <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'elt'</span>
<span class="token keyword">const</span> o_cls <span class="token operator">=</span> <span class="token function">o</span><span class="token punctuation">(</span><span class="token string">'class2'</span><span class="token punctuation">)</span>
<span class="token keyword">const</span> o_bool <span class="token operator">=</span> <span class="token function">o</span><span class="token punctuation">(</span><span class="token boolean">false</span><span class="token punctuation">)</span>
document<span class="token punctuation">.</span>body<span class="token punctuation">.</span><span class="token function">appendChild</span><span class="token punctuation">(</span><span class="token operator"><</span>$<span class="token operator">></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>style</span><span class="token punctuation">></span></span><span class="token plain-text">
{`.class1 {
text-decoration: underline;
}
.class2 {
background: #f99;
}
.class3 {
font-weight: bold;
}
.class4 {
background: #99f;
}
`}
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>style</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">'</span>class3<span class="token punctuation">'</span></span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>checkbox<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token plain-text">
</span><span class="token punctuation">{</span>$bind<span class="token punctuation">.</span><span class="token function">boolean</span><span class="token punctuation">(</span>o_bool<span class="token punctuation">)</span><span class="token punctuation">}</span><span class="token plain-text">
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>input</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>label</span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">'</span>class3<span class="token punctuation">'</span></span><span class="token punctuation">></span></span><span class="token plain-text">Class 3</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span>
<span class="token punctuation">{</span><span class="token string">' / '</span><span class="token punctuation">}</span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">'</span>text<span class="token punctuation">'</span></span><span class="token punctuation">></span></span><span class="token plain-text">
</span><span class="token punctuation">{</span>$bind<span class="token punctuation">.</span><span class="token function">string</span><span class="token punctuation">(</span>o_cls<span class="token punctuation">)</span><span class="token punctuation">}</span><span class="token plain-text">
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>input</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span><span class="token plain-text">
</span><span class="token punctuation">{</span>$<span class="token keyword">class</span><span class="token punctuation">(</span><span class="token string">'class1'</span><span class="token punctuation">,</span> o_cls<span class="token punctuation">,</span> <span class="token punctuation">{</span>class3<span class="token operator">:</span> o_bool<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">}</span><span class="token plain-text">
content 1
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span><span class="token plain-text">$class and class= are equivalent</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">[</span><span class="token string">'class1'</span><span class="token punctuation">,</span> o_cls<span class="token punctuation">,</span> <span class="token punctuation">{</span>class3<span class="token operator">:</span> o_bool<span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span><span class="token plain-text">
content 2
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
<span class="token punctuation">{</span><span class="token constant">E</span><span class="token punctuation">.</span><span class="token constant">DIV</span><span class="token punctuation">(</span>
$<span class="token keyword">class</span><span class="token punctuation">(</span><span class="token string">'class1'</span><span class="token punctuation">,</span> o_cls<span class="token punctuation">,</span> <span class="token punctuation">{</span>class3<span class="token operator">:</span> o_bool<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
<span class="token string">'content 3'</span>
<span class="token punctuation">)</span><span class="token punctuation">}</span>
<span class="token operator"><</span><span class="token operator">/</span>$<span class="token operator">></span><span class="token punctuation">)</span>
</code></pre>
</div></div><div class="st-block" id="$click" data-categories="dom,toc" data-tags="category"><div class="st-name st-kind-function"><!-- If --><span class="st-kind">function</span><!-- /If --><b>$click</b><!-- If --><<!-- Repeat -->N<!-- end repeat -->><!-- /If -->(cbk, capture?): <span class="st-type">(<!-- Repeat --><span class=""><b>node</b>: <a href="#N">N<!-- If --><!-- /If --></a></span><!-- end repeat -->) => <span>void</span></span><!-- If -->
<!-- /If --><!-- Repeat -->
<span><b>N</b><!-- If --> extends <span class="st-type"><!-- Repeat --><a href="#HTMLElement">HTMLElement<!-- If --><!-- /If --></a> | <a href="#SVGElement">SVGElement<!-- If --><!-- /If --></a><!-- end repeat --></span><!-- /If --></span><!-- end repeat --><!-- If -->
<!-- /If --><!-- Repeat -->
<span class=""><b>cbk</b>: <a href="#Listener">Listener<!-- If --><<!-- Repeat --><a href="#MouseEvent">MouseEvent<!-- If --><!-- /If --></a>, <a href="#N">N<!-- If --><!-- /If --></a><!-- end repeat -->><!-- /If --></a></span>
<span class="optional"><b>capture</b>?: <span>boolean</span></span><!-- end repeat --></div><div class="st-doc"><p>Add a callback on the click event, or touchend if we are on a mobile
device.</p>
</div></div><div class="st-block" id="$id" data-categories="dom,toc" data-tags="code,category"><div class="st-name st-kind-function"><!-- If --><span class="st-kind">function</span><!-- /If --><b>$id</b><!-- If --><<!-- Repeat -->N<!-- end repeat -->><!-- /If -->(id): <span>(node: N) => void</span><!-- If -->
<!-- /If --><!-- Repeat -->
<span><b>N</b><!-- If --> extends <a href="#Element">Element<!-- If --><!-- /If --></a><!-- /If --></span><!-- end repeat --><!-- If -->
<!-- /If --><!-- Repeat -->
<span class=""><b>id</b>: <a href="#o.RO">o.RO<!-- If --><<!-- Repeat --><span>string</span><!-- end repeat -->><!-- /If --></a></span><!-- end repeat --></div><div class="st-doc"><p>Update a node's id with a potentially observable value.</p>
<pre class='language-tsx'><code><span class="token keyword">import</span> <span class="token punctuation">{</span> $id<span class="token punctuation">,</span> Attrs <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'elt'</span>
<span class="token keyword">export</span> <span class="token keyword">function</span> <span class="token function">MyComponent</span><span class="token punctuation">(</span>a<span class="token operator">:</span> Attrs<span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">HTMLDivElement</span></span><span class="token punctuation">></span></span><span class="token plain-text">) </span><span class="token punctuation">{</span>
<span class="token keyword">return</span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span><span class="token plain-text">Hello, world.</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
<span class="token punctuation">}</span><span class="token plain-text">
</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">MyComponent</span></span><span class="token punctuation">></span></span><span class="token punctuation">{</span><span class="token function">$id</span><span class="token punctuation">(</span><span class="token string">'some-id'</span><span class="token punctuation">)</span><span class="token punctuation">}</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">MyComponent</span></span><span class="token punctuation">></span></span><span class="token plain-text">
</span></code></pre>
<blockquote>
<p><strong>Note</strong>: You can use the <code>id</code> attribute on any element, be them Components or regular nodes, as it is forwarded.</p>
</blockquote>
</div></div><div class="st-block" id="$init" data-categories="dom,toc" data-tags="code,category"><div class="st-name st-kind-function"><!-- If --><span class="st-kind">function</span><!-- /If --><b>$init</b><!-- If --><<!-- Repeat -->N<!-- end repeat -->><!-- /If -->(fn): <a href="#Decorator">Decorator<!-- If --><<!-- Repeat --><a href="#N">N<!-- If --><!-- /If --></a><!-- end repeat -->><!-- /If --></a><!-- If -->
<!-- /If --><!-- Repeat -->
<span><b>N</b><!-- If --> extends <a href="#Node">Node<!-- If --><!-- /If --></a><!-- /If --></span><!-- end repeat --><!-- If -->
<!-- /If --><!-- Repeat -->
<span class=""><b>fn</b>: <span class="st-type">(<!-- Repeat --><span class=""><b>node</b>: <a href="#N">N<!-- If --><!-- /If --></a></span><!-- end repeat -->) => <span>void</span></span></span><!-- end repeat --></div><div class="st-doc"><p>Run code soon after the <code>node</code> was created, when it has a <code>parent</code>. Beware, the <code>parent</code> in
init <strong>is probably not the parent it will have in the document</strong>.</p>
<p>To avoid layout trashing (aka reflow) and needless repaints,
ELT tries to do most of the work in <code>DocumentFragment</code> or while the nodes are still in memory.</p>
<p>When calling <a href="#e"><code>e()</code></a> (or <code>E()</code>), whenever a node appends a child to itself, <code>e</code> calls its
<code>$init</code> callbacks <strong>and start the node's observers</strong>. It does so because some verbs, like <code>If</code>
will only update their content when observing their condition, not before. Since <code>If</code> uses enclosing
comments to find out what it has to replace, it needs to have access to its parent to manipulate its
siblings, hence this particular way of proceeding.</p>
<p>Afterwards, <a href="#$inserted"><code>$inserted()</code></a> and <a href="#$removed"><code>$removed()</code></a> both start and stop observers, respectively. The first
time around, since <a href="#$init"><code>$init()</code></a> already started them, <a href="#$inserted"><code>$inserted()</code></a> will only run its callbacks and
leave the observers to do their jobs.</p>
<pre class='language-tsx'><code><span class="token keyword">import</span> <span class="token punctuation">{</span> o<span class="token punctuation">,</span> $init<span class="token punctuation">,</span> $inserted<span class="token punctuation">,</span> $removed<span class="token punctuation">,</span> Fragment <span class="token keyword">as</span> $<span class="token punctuation">,</span> If<span class="token punctuation">,</span> $click <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'elt'</span>
<span class="token keyword">var</span> the_div <span class="token operator">=</span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span><span class="token plain-text">
</span><span class="token punctuation">{</span><span class="token function">$init</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token builtin">console</span><span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'init'</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">}</span><span class="token plain-text">
</span><span class="token punctuation">{</span><span class="token function">$inserted</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token builtin">console</span><span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'inserted'</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">}</span><span class="token plain-text">
</span><span class="token punctuation">{</span><span class="token function">$removed</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token builtin">console</span><span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'removed'</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">}</span><span class="token plain-text">
I AM HERE.
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
<span class="token keyword">var</span> o_is_inside <span class="token operator">=</span> <span class="token function">o</span><span class="token punctuation">(</span><span class="token boolean">false</span><span class="token punctuation">)</span>
<span class="token comment">// here, we reuse the_div and are not recreating it all the time.</span>
<span class="token comment">// notice in the console how init was only called once.</span>
document<span class="token punctuation">.</span>body<span class="token punctuation">.</span><span class="token function">appendChild</span><span class="token punctuation">(</span><span class="token operator"><</span>$<span class="token operator">></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>button</span><span class="token punctuation">></span></span><span class="token plain-text">
</span><span class="token punctuation">{</span><span class="token function">$click</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> o_is_inside<span class="token punctuation">.</span><span class="token function">mutate</span><span class="token punctuation">(</span><span class="token parameter">b</span> <span class="token operator">=></span> <span class="token operator">!</span>b<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">}</span><span class="token plain-text">
Toggle the div
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>button</span><span class="token punctuation">></span></span>
<span class="token punctuation">{</span><span class="token function">If</span><span class="token punctuation">(</span>o_is_inside<span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> the_div<span class="token punctuation">)</span><span class="token punctuation">}</span>
<span class="token operator"><</span><span class="token operator">/</span>$<span class="token operator">></span><span class="token punctuation">)</span>
</code></pre>
</div></div><div class="st-block" id="$inserted" data-categories="dom,toc" data-tags="category"><div class="st-name st-kind-function"><!-- If --><span class="st-kind">function</span><!-- /If --><b>$inserted</b><!-- If --><<!-- Repeat -->N<!-- end repeat -->><!-- /If -->(fn): <span>(node: N) => void</span><!-- If -->
<!-- /If --><!-- Repeat -->
<span><b>N</b><!-- If --> extends <a href="#Node">Node<!-- If --><!-- /If --></a><!-- /If --></span><!-- end repeat --><!-- If -->
<!-- /If --><!-- Repeat -->
<span class=""><b>fn</b>: <span class="st-type">(<!-- Repeat --><span class=""><b>node</b>: <a href="#N">N<!-- If --><!-- /If --></a></span>, <span class=""><b>parent</b>: <a href="#Node">Node<!-- If --><!-- /If --></a></span><!-- end repeat -->) => <span>void</span></span></span><!-- end repeat --></div><div class="st-doc"><p>Call the <code>fn</code> callback when the decorated <code>node</code> is inserted into the DOM with
itself as first argument and its parent as the second.</p>
<p>See <a href="#$init"><code>$init()</code></a> for examples.</p>
</div></div><div class="st-block" id="$observe" data-categories="dom,toc" data-tags="code,category"><div class="st-name st-kind-function"><!-- If --><span class="st-kind">function</span><!-- /If --><b>$observe</b><!-- If --><<!-- Repeat -->N, T<!-- end repeat -->><!-- /If -->(a, cbk, obs_cbk?): <span>(node: N) => void</span><!-- If -->
<!-- /If --><!-- Repeat -->
<span><b>N</b><!-- If --> extends <a href="#Node">Node<!-- If --><!-- /If --></a><!-- /If --></span><!-- end repeat --><!-- If -->
<!-- /If --><!-- Repeat -->
<span class=""><b>a</b>: <a href="#o.RO">o.RO<!-- If --><<!-- Repeat --><a href="#T">T<!-- If --><!-- /If --></a><!-- end repeat -->><!-- /If --></a></span>
<span class=""><b>cbk</b>: <span class="st-type">(<!-- Repeat --><span class=""><b>newval</b>: <a href="#T">T<!-- If --><!-- /If --></a></span>, <span class=""><b>old_val</b>: <span class="st-type"><!-- Repeat --><a href="#T">T<!-- If --><!-- /If --></a> | <a href="#o.NoValue">o.NoValue<!-- If --><!-- /If --></a><!-- end repeat --></span></span>, <span class=""><b>node</b>: <a href="#N">N<!-- If --><!-- /If --></a></span><!-- end repeat -->) => <span>void</span></span></span>
<span class="optional"><b>obs_cbk</b>?: <span class="st-type">(<!-- Repeat --><span class=""><b>observer</b>: <a href="#o.Observer">o.Observer<!-- If --><<!-- Repeat --><a href="#T">T<!-- If --><!-- /If --></a><!-- end repeat -->><!-- /If --></a></span><!-- end repeat -->) => <span>void</span></span></span><!-- end repeat --></div><div class="st-doc"><p>Observe an observable and tie the observation to the node this is added to.
<code>cbk</code> receives the new value as well as the old, but also the node</p>
<pre class='language-tsx'><code><span class="token keyword">import</span> <span class="token punctuation">{</span> $observe<span class="token punctuation">,</span> o<span class="token punctuation">,</span> $click <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'elt'</span>
<span class="token keyword">const</span> o_count <span class="token operator">=</span> <span class="token function">o</span><span class="token punctuation">(</span><span class="token number">1</span><span class="token punctuation">)</span>
document<span class="token punctuation">.</span>body<span class="token punctuation">.</span><span class="token function">appendChild</span><span class="token punctuation">(</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span><span class="token plain-text">
Counting </span><span class="token punctuation">{</span>o_count<span class="token punctuation">}</span><span class="token plain-text">
</span><span class="token punctuation">{</span><span class="token function">$click</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> o_count<span class="token punctuation">.</span><span class="token function">mutate</span><span class="token punctuation">(</span><span class="token parameter">c</span> <span class="token operator">=></span> c <span class="token operator">+</span> <span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">}</span><span class="token plain-text">
</span><span class="token punctuation">{</span><span class="token function">$observe</span><span class="token punctuation">(</span>o_count<span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token parameter">cnt<span class="token punctuation">,</span> old<span class="token punctuation">,</span> node</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
<span class="token keyword">if</span> <span class="token punctuation">(</span>old <span class="token operator">!==</span> o<span class="token punctuation">.</span>NoValue<span class="token punctuation">)</span>
<span class="token builtin">console</span><span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">count is now </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>cnt<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">, it was </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>old<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string"> before. We are observing from node</span><span class="token template-punctuation string">`</span></span><span class="token punctuation">,</span> node<span class="token punctuation">)</span>
<span class="token keyword">else</span> <span class="token punctuation">{</span>
<span class="token builtin">console</span><span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">count starts at </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>cnt<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">. We are observing from node</span><span class="token template-punctuation string">`</span></span><span class="token punctuation">,</span> node<span class="token punctuation">)</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">}</span><span class="token plain-text">
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span><span class="token punctuation">)</span>
</code></pre>
</div></div><div class="st-block" id="$on" data-categories="dom,toc" data-tags="code,category"><div class="st-name st-kind-function"><!-- If --><span class="st-kind">function</span><!-- /If --><b>$on</b><!-- If --><<!-- Repeat -->N, K<!-- end repeat -->><!-- /If -->(name, listener, useCapture?): <a href="#Decorator">Decorator<!-- If --><<!-- Repeat --><a href="#N">N<!-- If --><!-- /If --></a><!-- end repeat -->><!-- /If --></a><!-- If -->
<!-- /If --><!-- Repeat -->
<span><b>N</b><!-- If --> extends <a href="#Element">Element<!-- If --><!-- /If --></a><!-- /If --></span>
<span><b>K</b><!-- If --> extends <span><span>(<span>typeof DocumentEventMap</span>)</span>[]</span><!-- /If --></span><!-- end repeat --><!-- If -->
<!-- /If --><!-- Repeat -->
<span class=""><b>name</b>: <a href="#K">K<!-- If --><!-- /If --></a></span>
<span class=""><b>listener</b>: <a href="#Listener">Listener<!-- If --><<!-- Repeat --><span><a href="#DocumentEventMap">DocumentEventMap<!-- If --><!-- /If --></a>[<span><a href="#K">K<!-- If --><!-- /If --></a>[<span>number</span>]</span>]</span>, <a href="#N">N<!-- If --><!-- /If --></a><!-- end repeat -->><!-- /If --></a></span>
<span class="optional"><b>useCapture</b>?: <span>boolean</span></span><!-- end repeat --></div><div class="st-name st-kind-function"><!-- If --><span class="st-kind">function</span><!-- /If --><b>$on</b><!-- If --><<!-- Repeat -->N, K<!-- end repeat -->><!-- /If -->(event, listener, useCapture?): <a href="#Decorator">Decorator<!-- If --><<!-- Repeat --><a href="#N">N<!-- If --><!-- /If --></a><!-- end repeat -->><!-- /If --></a><!-- If -->
<!-- /If --><!-- Repeat -->
<span><b>N</b><!-- If --> extends <a href="#Element">Element<!-- If --><!-- /If --></a><!-- /If --></span>
<span><b>K</b><!-- If --> extends <span>typeof DocumentEventMap</span><!-- /If --></span><!-- end repeat --><!-- If -->
<!-- /If --><!-- Repeat -->
<span class=""><b>event</b>: <a href="#K">K<!-- If --><!-- /If --></a></span>
<span class=""><b>listener</b>: <a href="#Listener">Listener<!-- If --><<!-- Repeat --><span><a href="#DocumentEventMap">DocumentEventMap<!-- If --><!-- /If --></a>[<a href="#K">K<!-- If --><!-- /If --></a>]</span>, <a href="#N">N<!-- If --><!-- /If --></a><!-- end repeat -->><!-- /If --></a></span>
<span class="optional"><b>useCapture</b>?: <span>boolean</span></span><!-- end repeat --></div><div class="st-name st-kind-function"><!-- If --><span class="st-kind">function</span><!-- /If --><b>$on</b><!-- If --><<!-- Repeat -->N<!-- end repeat -->><!-- /If -->(event, listener, useCapture?): <a href="#Decorator">Decorator<!-- If --><<!-- Repeat --><a href="#N">N<!-- If --><!-- /If --></a><!-- end repeat -->><!-- /If --></a><!-- If -->
<!-- /If --><!-- Repeat -->
<span><b>N</b><!-- If --> extends <a href="#Element">Element<!-- If --><!-- /If --></a><!-- /If --></span><!-- end repeat --><!-- If -->
<!-- /If --><!-- Repeat -->
<span class=""><b>event</b>: <span class="st-type"><!-- Repeat --><span>string</span> | <span><span>string</span>[]</span><!-- end repeat --></span></span>
<span class=""><b>listener</b>: <a href="#Listener">Listener<!-- If --><<!-- Repeat --><a href="#Event">Event<!-- If --><!-- /If --></a>, <a href="#N">N<!-- If --><!-- /If --></a><!-- end repeat -->><!-- /If --></a></span>
<span class="optional"><b>useCapture</b>?: <span>boolean</span></span><!-- end repeat --></div><div class="st-doc"><p>Use to bind to an event directly in the jsx phase.</p>
<p>For convenience, the resulting event object is typed as the original events coupled
with <code>{ currentTarget: N }</code>, where N is the node type the event is being registered on.</p>
<pre class='language-tsx'><code><span class="token keyword">import</span> <span class="token punctuation">{</span> $on <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'elt'</span>
document<span class="token punctuation">.</span>body<span class="token punctuation">.</span><span class="token function">appendChild</span><span class="token punctuation">(</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span><span class="token plain-text">
</span><span class="token punctuation">{</span><span class="token function">$on</span><span class="token punctuation">(</span><span class="token string">'click'</span><span class="token punctuation">,</span> <span class="token parameter">ev</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
<span class="token keyword">if</span> <span class="token punctuation">(</span>ev<span class="token punctuation">.</span>target <span class="token operator">===</span> ev<span class="token punctuation">.</span>currentTarget<span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token builtin">console</span><span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">The current div was clicked on, not a child.</span><span class="token template-punctuation string">`</span></span><span class="token punctuation">)</span>
<span class="token builtin">console</span><span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">In this function, ev.currentTarget is typed as HTMLDivElement</span><span class="token template-punctuation string">`</span></span><span class="token punctuation">)</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">}</span><span class="token plain-text">
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span><span class="token punctuation">)</span>
</code></pre>
</div></div><div class="st-block" id="$removed" data-categories="dom,toc" data-tags="category"><div class="st-name st-kind-function"><!-- If --><span class="st-kind">function</span><!-- /If --><b>$removed</b><!-- If --><<!-- Repeat -->N<!-- end repeat -->><!-- /If -->(fn): <span>(node: N) => void</span><!-- If -->
<!-- /If --><!-- Repeat -->
<span><b>N</b><!-- If --> extends <a href="#Node">Node<!-- If --><!-- /If --></a><!-- /If --></span><!-- end repeat --><!-- If -->
<!-- /If --><!-- Repeat -->
<span class=""><b>fn</b>: <span class="st-type">(<!-- Repeat --><span class=""><b>node</b>: <a href="#N">N<!-- If --><!-- /If --></a></span>, <span class=""><b>parent</b>: <a href="#Node">Node<!-- If --><!-- /If --></a></span><!-- end repeat -->) => <span>void</span></span></span><!-- end repeat --></div><div class="st-doc"><p>Run a callback when the node is removed from its holding document, with <code>node</code>
as the node being removed and <code>parent</code> with its previous parent.</p>
<p>See <a href="#$init"><code>$init()</code></a> for examples.</p>
</div></div><div class="st-block" id="$scrollable" data-categories="dom,toc" data-tags="category"><div class="st-name st-kind-function"><!-- If --><span class="st-kind">function</span><!-- /If --><b>$scrollable</b><!-- If --><!-- /If -->(node): <span>void</span><!-- If --><!-- /If --><!-- Repeat --><!-- end repeat --><!-- If -->
<!-- /If --><!-- Repeat -->
<span class=""><b>node</b>: <a href="#HTMLElement">HTMLElement<!-- If --><!-- /If --></a></span><!-- end repeat --></div><div class="st-doc"><p>Setup scroll so that touchstart and touchmove events don't
trigger the ugly scroll band on mobile devices.</p>
<p>Calling this functions makes anything not marked scrollable as non-scrollable.</p>
</div></div><div class="st-block" id="$style" data-categories="dom,toc" data-tags="code,category"><div class="st-name st-kind-function"><!-- If --><span class="st-kind">function</span><!-- /If --><b>$style</b><!-- If --><<!-- Repeat -->N<!-- end repeat -->><!-- /If -->(…styles?): <span>(node: N) => void</span><!-- If -->
<!-- /If --><!-- Repeat -->
<span><b>N</b><!-- If --> extends <span class="st-type"><!-- Repeat --><a href="#HTMLElement">HTMLElement<!-- If --><!-- /If --></a> | <a href="#SVGElement">SVGElement<!-- If --><!-- /If --></a><!-- end repeat --></span><!-- /If --></span><!-- end repeat --><!-- If -->
<!-- /If --><!-- Repeat -->
<span class="optional"><b>...styles</b>?: <span><a href="#StyleDefinition">StyleDefinition<!-- If --><!-- /If --></a>[]</span></span><!-- end repeat --></div><div class="st-doc"><p>Update a node's style with potentially observable varlues</p>
<pre class='language-tsx'><code><span class="token keyword">import</span> <span class="token punctuation">{</span> o<span class="token punctuation">,</span> $style <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'elt'</span>
<span class="token keyword">const</span> o_width <span class="token operator">=</span> <span class="token function">o</span><span class="token punctuation">(</span><span class="token string">'321px'</span><span class="token punctuation">)</span>
<span class="token constant">E</span><span class="token punctuation">.</span><span class="token constant">DIV</span><span class="token punctuation">(</span>
<span class="token function">$style</span><span class="token punctuation">(</span><span class="token punctuation">{</span>width<span class="token operator">:</span> o_width<span class="token punctuation">,</span> flex<span class="token operator">:</span> <span class="token string">'1'</span><span class="token punctuation">}</span><span class="token punctuation">)</span>
<span class="token punctuation">)</span>
</code></pre>
</div></div><div class="st-block" id="$title" data-categories="dom,toc" data-tags="code,category"><div class="st-name st-kind-function"><!-- If --><span class="st-kind">function</span><!-- /If --><b>$title</b><!-- If --><<!-- Repeat -->N<!-- end repeat -->><!-- /If -->(title): <span>(node: N) => void</span><!-- If -->
<!-- /If --><!-- Repeat -->
<span><b>N</b><!-- If --> extends <a href="#HTMLElement">HTMLElement<!-- If --><!-- /If --></a><!-- /If --></span><!-- end repeat --><!-- If -->
<!-- /If --><!-- Repeat -->
<span class=""><b>title</b>: <a href="#o.RO">o.RO<!-- If --><<!-- Repeat --><span>string</span><!-- end repeat -->><!-- /If --></a></span><!-- end repeat --></div><div class="st-doc"><p>Update a node's title with a potentially observable value.
Used mostly when dealing with components since their base node attributes are no longer available.</p>
<pre class='language-tsx'><code><span class="token keyword">import</span> <span class="token punctuation">{</span> $title<span class="token punctuation">,</span> Attrs <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'elt'</span>
<span class="token keyword">function</span> <span class="token function">MyComponent</span><span class="token punctuation">(</span>a<span class="token operator">:</span> Attrs<span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">HTMLDivElement</span></span><span class="token punctuation">></span></span><span class="token plain-text">) </span><span class="token punctuation">{</span>
<span class="token keyword">return</span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span><span class="token plain-text">Hello, world.</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
<span class="token punctuation">}</span><span class="token plain-text">
document.body.appendChild(
</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">MyComponent</span></span><span class="token punctuation">></span></span><span class="token punctuation">{</span><span class="token function">$title</span><span class="token punctuation">(</span><span class="token string">'Some title ! It generally appears on hover.'</span><span class="token punctuation">)</span><span class="token punctuation">}</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">MyComponent</span></span><span class="token punctuation">></span></span><span class="token plain-text">
)
document.body.appendChild(
E.DIV($title('hello there !'))
)
</span></code></pre>
</div></div><div class="st-block" id="App" data-categories="app,toc" data-tags="category"><div class="st-name st-kind-class"><!-- If --><span class="st-kind">class</span><!-- /If --><b>App</b><!-- If --><!-- /If --> <!-- If -->extends <!-- Repeat --><span><a href="#Mixin">Mixin</a><<!-- Repeat --><span><a href="#Comment">Comment</a></span><!-- end repeat -->></span><!-- end repeat --><!-- /If --> <!-- If --><!-- /If --></div><div class="st-doc"><p>An App is a collection of services that altogether form an application.
These services contain code, data and views that produce DOM elements.</p>
<p>Use <a href="#App.DisplayApp"><code>App.DisplayApp()</code></a> to instanciate an App and <a href="#App#DisplayChildApp"><code>App#DisplayChildApp</code></a> for child apps.</p>
<p>An <code>App</code> needs to be provided a view name (see <a href="#App.view"><code>App.view()</code></a>) which will be the main
view that the <code>App</code> displays, and one or several service classes (not objects), that are
to be "activated", which means they will be instanciated and serve as the base services
that will be searched for the main view to render it. As Services can require other services,
and those services also can define views, <code>App</code> will look in them as well for the main view
and will stop at the first one it finds.</p>
<p>Services are singletons ; once required, any subsequent <a href="#Service#require"><code>Service#require</code></a> on a same service
class will return the same instance (not always true for child apps).</p>
<p>During the life of the application, the list of activated services can change using <a href="#App#activate"><code>App#activate</code></a>,
in which case the views will be reevaluated using the same "first one that has it" rule.</p>
<p>As the activated services change, so do their requirements. Services that were instanciated
but are not required anymore are thus removed. See <a href="#Service#deinit"><code>Service#deinit</code></a>.</p>
<p><strong>Why the app class</strong></p>
<p>While <a href="#Component"><code>Component</code></a>s and their functional counterparts are a nice way of displaying data and
somewhat handling some simple states, they should never perform network calls or in general even be <em>aware</em> of any kind of network,
or query <code>localStorage</code>, or do anything other than just do what it was meant to do ; create
DOM Nodes to render some data, and signal the program that some user interaction has taken place.</p>
<p>More precisely ; Components should not deal with anything that has side effects.</p>
<p>The <code>App</code> class and its <a href="#App.Service"><code>App.Service</code></a> friend are a proposal to separate pure presentation from <em>business logic</em>.
Services can still have a visual role, but it is more about <em>layout</em> than display. They don't even have
to do anything visual ; a Service could for instance handle network calls exclusively for instance.</p>
<p>The idea is that an <code>App</code> is created <em>by composition</em> ; it is the sum of its services, and they can change
during its life time.</p>
<p>In a way, Services are <em>modules</em>, except they are loaded and unloaded dynamically as the application
is used. They also encapsulate state neatly, and it is perfectly possible to have several <code>Apps</code> on the
same page that never share data, or several that do using "child" apps.</p>
</div><div class="st-nest"><div class="st-block" id="App#DisplayChildApp" data-categories="" data-tags="code"><div class="st-name st-kind-function"><!-- If --><span class="st-kind">method</span><!-- /If --><b>DisplayChildApp</b><!-- If --><!-- /If -->(view_name, …services?): <span><a href="#Comment">Comment</a></span><!-- If --><!-- /If --><!-- Repeat --><!-- end repeat --><!-- If -->
<!-- /If --><!-- Repeat -->
<span class=""><b>view_name</b>: <span class="st-type"><!-- Repeat --><span>string</span> | <a href="#Symbol">Symbol<!-- If --><!-- /If --></a><!-- end repeat --></span></span>
<span class="optional"><b>...services</b>?: <span><span class="st-type">{ <!-- Repeat --><!-- end repeat --> <!-- Repeat --><!-- end repeat --> }</span>[]</span></span><!-- end repeat --></div><div class="st-doc"><p>Display an App that depends on this one, displaying <code>view_name</code> as its main view
and activating the service classes passed in <code>services</code>.</p>
<p>Services in the child app that require other services will query the parent <a href="#App"><code>App</code></a> first. If the
parent does not have the service, then the child app is queried. If the service does not exist, the
child app instanciates its own version.</p>
<p>Activated services through <code>this.app.activate</code> in a child app are instanciated even if they already exist
in the parent app.</p>
<pre class='language-tsx'><code><span class="token keyword">import</span> <span class="token punctuation">{</span> App<span class="token punctuation">,</span> $click<span class="token punctuation">,</span> o <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'elt'</span>
<span class="token keyword">class</span> <span class="token class-name">Required</span> <span class="token keyword">extends</span> <span class="token class-name">App<span class="token punctuation">.</span>Service</span> <span class="token punctuation">{</span>
o_req <span class="token operator">=</span> <span class="token function">o</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span>
<span class="token keyword">class</span> <span class="token class-name">Required2</span> <span class="token keyword">extends</span> <span class="token class-name">App<span class="token punctuation">.</span>Service</span> <span class="token punctuation">{</span>
<span class="token comment">// Required2 will be a true singleton.</span>
unique_across_all_apps <span class="token operator">=</span> <span class="token boolean">true</span>
o_req2 <span class="token operator">=</span> <span class="token function">o</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span>
<span class="token keyword">class</span> <span class="token class-name">SubService</span> <span class="token keyword">extends</span> <span class="token class-name">App<span class="token punctuation">.</span>Service</span> <span class="token punctuation">{</span>
req <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token keyword">require</span><span class="token punctuation">(</span>Required<span class="token punctuation">)</span>
req2 <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token keyword">require</span><span class="token punctuation">(</span>Required2<span class="token punctuation">)</span>
o_own <span class="token operator">=</span> <span class="token function">o</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">)</span>
@App<span class="token punctuation">.</span>view
<span class="token function">Main2</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">return</span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span><span class="token plain-text">
</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>button</span><span class="token punctuation">></span></span><span class="token plain-text">
</span><span class="token punctuation">{</span><span class="token function">$click</span><span class="token punctuation">(</span><span class="token parameter">_</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
<span class="token keyword">this</span><span class="token punctuation">.</span>req<span class="token punctuation">.</span>o_req<span class="token punctuation">.</span><span class="token function">mutate</span><span class="token punctuation">(</span><span class="token parameter">r</span> <span class="token operator">=></span> r <span class="token operator">+</span> <span class="token number">1</span><span class="token punctuation">)</span>
<span class="token keyword">this</span><span class="token punctuation">.</span>req2<span class="token punctuation">.</span>o_req2<span class="token punctuation">.</span><span class="token function">mutate</span><span class="token punctuation">(</span><span class="token parameter">r</span> <span class="token operator">=></span> r <span class="token operator">+</span> <span class="token number">1</span><span class="token punctuation">)</span>
<span class="token keyword">this</span><span class="token punctuation">.</span>o_own<span class="token punctuation">.</span><span class="token function">mutate</span><span class="token punctuation">(</span><span class="token parameter">o</span> <span class="token operator">=></span> o <span class="token operator">+</span> <span class="token number">1</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">}</span><span class="token plain-text">
req: </span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>req<span class="token punctuation">.</span>o_req<span class="token punctuation">}</span><span class="token plain-text">, own: </span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>o_own<span class="token punctuation">}</span><span class="token plain-text">, 2: </span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>req2<span class="token punctuation">.</span>o_req2<span class="token punctuation">}</span><span class="token plain-text">
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>button</span><span class="token punctuation">></span></span><span class="token plain-text">
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span>
<span class="token keyword">class</span> <span class="token class-name">InitService</span> <span class="token keyword">extends</span> <span class="token class-name">App<span class="token punctuation">.</span>Service</span> <span class="token punctuation">{</span>
<span class="token comment">// If the following line is uncommented, then the child apps will resolve</span>
<span class="token comment">// to this dependency and won't try to instanciate their own</span>
<span class="token comment">// req = this.require(Required)</span>
@App<span class="token punctuation">.</span>view
<span class="token function">Main</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">return</span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span><span class="token plain-text">
</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>app<span class="token punctuation">.</span><span class="token function">DisplayChildApp</span><span class="token punctuation">(</span><span class="token string">'Main2'</span><span class="token punctuation">,</span> SubService<span class="token punctuation">)</span><span class="token punctuation">}</span><span class="token plain-text">
</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>app<span class="token punctuation">.</span><span class="token function">DisplayChildApp</span><span class="token punctuation">(</span><span class="token string">'Main2'</span><span class="token punctuation">,</span> SubService<span class="token punctuation">)</span><span class="token punctuation">}</span><span class="token plain-text">
</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>app<span class="token punctuation">.</span><span class="token function">DisplayChildApp</span><span class="token punctuation">(</span><span class="token string">'Main2'</span><span class="token punctuation">,</span> SubService<span class="token punctuation">)</span><span class="token punctuation">}</span><span class="token plain-text">
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span>
document<span class="token punctuation">.</span>body<span class="token punctuation">.</span><span class="token function">appendChild</span><span class="token punctuation">(</span>App<span class="token punctuation">.</span><span class="token function">DisplayApp</span><span class="token punctuation">(</span><span class="token string">'Main'</span><span class="token punctuation">,</span> InitService<span class="token punctuation">)</span><span class="token punctuation">)</span>
</code></pre>
</div></div><div class="st-block" id="App#activate" data-categories="" data-tags=""><div class="st-name st-kind-function"><!-- If --><span class="st-kind">method</span><!-- /If --><b>activate</b><!-- If --><!-- /If -->(…new_services?): <span>void</span><!-- If --><!-- /If --><!-- Repeat --><!-- end repeat --><!-- If -->
<!-- /If --><!-- Repeat -->
<span class="optional"><b>...new_services</b>?: <span><span class="st-type">{ <!-- Repeat --><!-- end repeat --> <!-- Repeat --><!-- end repeat --> }</span>[]</span></span><!-- end repeat --></div><div class="st-doc"><p>Activate services to change the application's state.</p>
<p>See <a href="#App.view"><code>App.view()</code></a> for an example.</p>
</div></div><div class="st-block" id="App#display" data-categories="" data-tags="code"><div class="st-name st-kind-function"><!-- If --><span class="st-kind">method</span><!-- /If --><b>display</b><!-- If --><!-- /If -->(view_name): <span><a href="#Comment">Comment</a></span><!-- If --><!-- /If --><!-- Repeat --><!-- end repeat --><!-- If -->
<!-- /If --><!-- Repeat -->
<span class=""><b>view_name</b>: <span class="st-type"><!-- Repeat --><span>string</span> | <a href="#Symbol">Symbol<!-- If --><!-- /If --></a><!-- end repeat --></span></span><!-- end repeat --></div><div class="st-doc"><p>Display the specified <code>view_name</code>.</p>
<pre class='language-tsx'><code><span class="token keyword">import</span> <span class="token punctuation">{</span> App <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'elt'</span>
<span class="token keyword">class</span> <span class="token class-name">Service1</span> <span class="token keyword">extends</span> <span class="token class-name">App<span class="token punctuation">.</span>Service</span> <span class="token punctuation">{</span>
@App<span class="token punctuation">.</span>view
<span class="token function">Content</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">return</span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span><span class="token plain-text">
Service 1
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span>
<span class="token keyword">class</span> <span class="token class-name">Service2</span> <span class="token keyword">extends</span> <span class="token class-name">App<span class="token punctuation">.</span>Service</span> <span class="token punctuation">{</span>
@App<span class="token punctuation">.</span>view
<span class="token function">Content</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">return</span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span><span class="token plain-text">Service 2</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span>
<span class="token keyword">class</span> <span class="token class-name">RootService</span> <span class="token keyword">extends</span> <span class="token class-name">App<span class="token punctuation">.</span>Service</span> <span class="token punctuation">{</span>
<span class="token comment">// try inverting the require</span>
bl1 <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token keyword">require</span><span class="token punctuation">(</span>Service1<span class="token punctuation">)</span>
bl2 <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token keyword">require</span><span class="token punctuation">(</span>Service2<span class="token punctuation">)</span>
@App<span class="token punctuation">.</span>view
<span class="token function">Main</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">return</span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>app<span class="token punctuation">.</span><span class="token function">display</span><span class="token punctuation">(</span><span class="token string">'Content'</span><span class="token punctuation">)</span><span class="token punctuation">}</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span>
document<span class="token punctuation">.</span>body<span class="token punctuation">.</span><span class="token function">appendChild</span><span class="token punctuation">(</span>App<span class="token punctuation">.</span><span class="token function">DisplayApp</span><span class="token punctuation">(</span><span class="token string">'Main'</span><span class="token punctuation">,</span> RootService<span class="token punctuation">)</span><span class="token punctuation">)</span>
</code></pre>
</div></div><div class="st-block" id="App#o_active_services" data-categories="" data-tags=""><div class="st-kind-var"><div class="st-name"><span class="st-kind"></span><span class=""><b>o_active_services</b>: <span><a href="#o.Observable">Observable</a><<!-- Repeat --><span><a href="#Set">Set</a><<!-- Repeat --><span><a href="#App.Service">Service</a></span><!-- end repeat -->></span><!-- end repeat -->></span></span></div></div><div class="st-doc"><p>The currently active services, ie. the services that were specifically
given to <a href="##App.DisplayApp"><code>#App.DisplayApp</code></a> or <a href="#App#activate"><code>App#activate</code></a></p>
</div></div></div></div><div class="st-block" id="App.DisplayApp" data-categories="app,toc" data-tags="code,category"><div class="st-name st-kind-function"><!-- If --><span class="st-kind">function</span><!-- /If --><b>App.DisplayApp</b><!-- If --><!-- /If -->(main_view, …services?): <span><a href="#Comment">Comment</a></span><!-- If --><!-- /If --><!-- Repeat --><!-- end repeat --><!-- If -->
<!-- /If --><!-- Repeat -->
<span class=""><b>main_view</b>: <span>string</span></span>
<span class="optional"><b>...services</b>?: <span><span>(<span class="st-type">{ <!-- Repeat --><!-- end repeat --> <!-- Repeat --><!-- end repeat --> }</span>)</span>[]</span></span><!-- end repeat --></div><div class="st-doc"><p>Display an application with the specified <code>#App.Service</code>s as activated services, displaying
the <code>main_view</code> view.</p>
<p>The app will look for the first service that implements the asked view in the requirement chain. See <a href="#App.view"><code>App.view()</code></a> for details.</p>
<pre class='language-tsx'><code><span class="token keyword">import</span> <span class="token punctuation">{</span> App<span class="token punctuation">,</span> o<span class="token punctuation">,</span> $bind<span class="token punctuation">,</span> $click <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'elt'</span>
<span class="token keyword">class</span> <span class="token class-name">AppMain</span> <span class="token keyword">extends</span> <span class="token class-name">App<span class="token punctuation">.</span>Service</span> <span class="token punctuation">{</span>
@App<span class="token punctuation">.</span>view
<span class="token function">Main</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">return</span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span><span class="token plain-text">Logged in !</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span>
<span class="token keyword">class</span> <span class="token class-name">LoginService</span> <span class="token keyword">extends</span> <span class="token class-name">App<span class="token punctuation">.</span>Service</span> <span class="token punctuation">{</span>
@App<span class="token punctuation">.</span>view
<span class="token function">Main</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">const</span> o_user <span class="token operator">=</span> <span class="token function">o</span><span class="token punctuation">(</span><span class="token string">'user'</span><span class="token punctuation">)</span>
<span class="token keyword">return</span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span><span class="token plain-text">
</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">'</span>username<span class="token punctuation">'</span></span><span class="token punctuation">></span></span><span class="token plain-text">
</span><span class="token punctuation">{</span>$bind<span class="token punctuation">.</span><span class="token function">string</span><span class="token punctuation">(</span>o_user<span class="token punctuation">)</span><span class="token punctuation">}</span><span class="token plain-text">
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>input</span><span class="token punctuation">></span></span><span class="token plain-text">
</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>button</span><span class="token punctuation">></span></span><span class="token plain-text">
Login
</span><span class="token punctuation">{</span><span class="token function">$click</span><span class="token punctuation">(</span><span class="token parameter">_</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
<span class="token comment">// validate the login or display an error.</span>
<span class="token comment">// if the credentials are correct, we can change the current active service.</span>
<span class="token keyword">this</span><span class="token punctuation">.</span>app<span class="token punctuation">.</span><span class="token function">activate</span><span class="token punctuation">(</span>AppMain<span class="token punctuation">)</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">}</span><span class="token plain-text">
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>button</span><span class="token punctuation">></span></span><span class="token plain-text">
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span>
document<span class="token punctuation">.</span>body<span class="token punctuation">.</span><span class="token function">appendChild</span><span class="token punctuation">(</span>
<span class="token comment">// We display the Main view from the first activated service that has it.</span>
App<span class="token punctuation">.</span><span class="token function">DisplayApp</span><span class="token punctuation">(</span><span class="token string">'Main'</span><span class="token punctuation">,</span> LoginService<span class="token punctuation">)</span>
<span class="token punctuation">)</span>
</code></pre>
</div></div><div class="st-block" id="App.Service" data-categories="app,toc" data-tags="category"><div class="st-name st-kind-class"><!-- If --><span class="st-kind">class</span><!-- /If --><b>App.Service</b><!-- If --><!-- /If --> <!-- If -->extends <!-- Repeat --><span><a href="#o.ObserverHolder">ObserverHolder</a></span><!-- end repeat --><!-- /If --> <!-- If --><!-- /If --></div><div class="st-doc"><p>A base class to make application services.</p>
<p>A service defines views through <code>this.view</code> and reacts to</p>
<p>An ObserverHolder, Services can use <code>this.observe</code> to watch <code>#o.Observable</code>s and will
only actively watch them as long as they're either <em>activated</em> or in the <em>requirements</em> of
an activated service.</p>
<p>Services are meant to be used by <em>composition</em>, and not through extension.
Do not subclass a subclass of Service unless its state is the exact same type.</p>
</div><div class="st-nest"><div class="st-block" id="App.Service#constructor" data-categories="" data-tags=""><div class="st-name st-kind-function"><!-- If --><!-- /If --><b>constructor</b><!-- If --><!-- /If -->(app): <span><a href="#App.Service">Service</a></span><!-- If --><!-- /If --><!-- Repeat --><!-- end repeat --><!-- If -->
<!-- /If --><!-- Repeat -->
<span class=""><b>app</b>: <a href="#App">App<!-- If --><!-- /If --></a></span><!-- end repeat --></div><div class="st-doc"><p>A service is not meant to be instanciated by hand. Also, classes that subclass <a href="#Service"><code>Service</code></a>
should never have any other arguments than just an <a href="#App"><code>App</code></a> instance.</p>
</div></div><div class="st-block" id="App.Service#activated" data-categories="" data-tags=""><div class="st-name st-kind-function"><!-- If --><span class="st-kind">method</span><!-- /If --><b>async activated</b><!-- If --><!-- /If -->(): <a href="#Promise">Promise<!-- If --><<!-- Repeat --><span>void</span><!-- end repeat -->><!-- /If --></a><!-- If --><!-- /If --><!-- Repeat --><!-- end repeat --><!-- If --><!-- /If --><!-- Repeat --><!-- end repeat --></div><div class="st-doc"><p>Extend this method to run code whenever the service is <em>activated</em> directly (ie: passed as an
argument to the <code>app.activate()</code> method).</p>
</div></div><div class="st-block" id="App.Service#deinit" data-categories="" data-tags=""><div class="st-name st-kind-function"><!-- If --><span class="st-kind">method</span><!-- /If --><b>async deinit</b><!-- If --><!-- /If -->(): <a href="#Promise">Promise<!-- If --><<!-- Repeat --><span>void</span><!-- end repeat -->><!-- /If --></a><!-- If --><!-- /If --><!-- Repeat --><!-- end repeat --><!-- If --><!-- /If --><!-- Repeat --><!-- end repeat --></div><div class="st-doc"><p>Extend this method to run code whenever this service is removed from the app.</p>
<p>A service is said to be removed from the app if it is not required by any other service.</p>
</div></div><div class="st-block" id="App.Service#init" data-categories="" data-tags=""><div class="st-name st-kind-function"><!-- If --><span class="st-kind">method</span><!-- /If --><b>async init</b><!-- If --><!-- /If -->(): <a href="#Promise">Promise<!-- If --><<!-- Repeat --><span>void</span><!-- end repeat -->><!-- /If --></a><!-- If --><!-- /If --><!-- Repeat --><!-- end repeat --><!-- If --><!-- /If --><!-- Repeat --><!-- end repeat --></div><div class="st-doc"><p>Extend this method to run code whenever after the <code>init()</code> methods
of the its requirements have returned. If it had no requirements, then this method is
run shortly after the Service's instanciation.</p>
<p>The <code>init</code> chain is started on <a href="#App#activate"><code>App#activate</code></a>. However, the views start displaying immediately,
which means that in all likelyhood, <code>init()</code> for a service will terminate <strong>after</strong> the DOM
from the views was inserted.</p>
<p>If you need to run code <strong>before</strong> the views are displayed, overload the <code>constructor</code>.</p>
</div></div><div class="st-block" id="App.Service#require" data-categories="" data-tags=""><div class="st-name st-kind-function"><!-- If --><span class="st-kind">method</span><!-- /If --><b>require</b><!-- If --><<!-- Repeat -->B<!-- end repeat -->><!-- /If -->(service_def): <a href="#B">B<!-- If --><!-- /If --></a><!-- If -->
<!-- /If --><!-- Repeat -->
<span><b>B</b><!-- If --> extends <a href="#App.Service">Service<!-- If --><!-- /If --></a><!-- /If --></span><!-- end repeat --><!-- If -->
<!-- /If --><!-- Repeat -->
<span class=""><b>service_def</b>: <span>new () => <a href="#B">B<!-- If --><!-- /If --></a></span></span><!-- end repeat --></div><div class="st-doc"><p>Require another service for this service to use.</p>
<p>If the requested service does not already exist within this <a href="#App"><code>App</code></a>, instanciate it.</p>
<p>See <a href="#App#DisplayChildApp"><code>App#DisplayChildApp</code></a> and <a href="#App.view"><code>App.view()</code></a> for examples.</p>
</div></div><div class="st-block" id="App.Service#init_promise" data-categories="" data-tags=""><div class="st-kind-var"><div class="st-name"><span class="st-kind"></span><span class=""><b>init_promise</b>: <span><!-- Repeat --><span>null</span> | <span><a href="#Promise">Promise</a><<!-- Repeat --><span>void</span><!-- end repeat -->></span><!-- end repeat --></span></span></div></div><div class="st-doc"><p>A promise that is resolved once the service's <code>init()</code> has been called.
Used</p>
</div></div><div class="st-block" id="App.Service#persistent" data-categories="" data-tags=""><div class="st-kind-var"><div class="st-name"><span class="st-kind"></span><span class=""><b>persistent</b>: <span>boolean</span></span></div></div><div class="st-doc"><p>Set this property to <code>true</code> if the service should stay instanciated even if it is
not required anymore.</p>
<p>See <a href="#App.view"><code>App.view()</code></a> for an example.</p>
</div></div><div class="st-block" id="App.Service#unique_across_all_apps" data-categories="" data-tags=""><div class="st-kind-var"><div class="st-name"><span class="st-kind"></span><span class=""><b>unique_across_all_apps</b>: <span>boolean</span></span></div></div><div class="st-doc"><p>Set to <code>true</code> if this service should be instanciated only once across this app and
its child apps.</p>
<p>See <a href="#App.DisplayChildApp"><code>App.DisplayChildApp</code></a> for an example.</p>
</div></div></div></div><div class="st-block" id="App.view" data-categories="app,toc" data-tags="category,code"><div class="st-name st-kind-function"><!-- If --><span class="st-kind">function</span><!-- /If --><b>App.view</b><!-- If --><<!-- Repeat -->T<!-- end repeat -->><!-- /If -->(object, key, desc): <span>void</span><!-- If -->
<!-- /If --><!-- Repeat -->
<span><b>T</b><!-- If --> extends <a href="#Renderable">Renderable<!-- If --><!-- /If --></a><!-- /If --></span><!-- end repeat --><!-- If -->
<!-- /If --><!-- Repeat -->
<span class=""><b>object</b>: <a href="#App.Service">Service<!-- If --><!-- /If --></a></span>
<span class=""><b>key</b>: <span class="st-type"><!-- Repeat --><span>string</span> | <a href="#Symbol">Symbol<!-- If --><!-- /If --></a><!-- end repeat --></span></span>
<span class=""><b>desc</b>: <a href="#TypedPropertyDescriptor">TypedPropertyDescriptor<!-- If --><<!-- Repeat --><span class="st-type">(<!-- Repeat --><!-- end repeat -->) => <a href="#T">T<!-- If --><!-- /If --></a></span><!-- end repeat -->><!-- /If --></a></span><!-- end repeat --></div><div class="st-doc"><p>This is a method decorator. It marks a method of a service as a view that can be displayed with <a href="#App.DisplayApp"><code>App.DisplayApp()</code></a>
or <a href="#App.Service#display"><code>App.Service#display</code></a>.</p>
<p>Views are always a function with no arguments that return a Renderable.</p>
<p>Starting with the activated services, and going up the <a href="#Service.require"><code>Service.require</code></a> calls, <a href="#App"><code>App</code></a>
uses the first view that matches the name it's looking for and uses it to display its
contents.</p>
<pre class='language-tsx'><code><span class="token keyword">import</span> <span class="token punctuation">{</span> App<span class="token punctuation">,</span> $click<span class="token punctuation">,</span> o<span class="token punctuation">,</span> If <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'elt'</span>
<span class="token keyword">class</span> <span class="token class-name">TheApp</span> <span class="token keyword">extends</span> <span class="token class-name">App<span class="token punctuation">.</span>Service</span> <span class="token punctuation">{</span>
o_was_logged <span class="token operator">=</span> <span class="token function">o</span><span class="token punctuation">(</span><span class="token boolean">false</span><span class="token punctuation">)</span>
@App<span class="token punctuation">.</span>view
<span class="token function">Main</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">return</span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span><span class="token plain-text">
</span><span class="token punctuation">{</span><span class="token function">If</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>o_was_logged<span class="token punctuation">,</span>
<span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">We were already logged</span><span class="token template-punctuation string">`</span></span><span class="token punctuation">,</span>
<span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">We've logged into the App !</span><span class="token template-punctuation string">`</span></span>
<span class="token punctuation">)</span><span class="token punctuation">}</span><span class="token plain-text">
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span>
<span class="token keyword">class</span> <span class="token class-name">AuthService</span> <span class="token keyword">extends</span> <span class="token class-name">App<span class="token punctuation">.</span>Service</span> <span class="token punctuation">{</span>
<span class="token keyword">async</span> <span class="token function">checkIfLogged</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token comment">// try setting this to true</span>
<span class="token keyword">return</span> <span class="token boolean">false</span> <span class="token comment">// this could be a call to a REST backend</span>
<span class="token punctuation">}</span>
@App<span class="token punctuation">.</span>view
<span class="token function">Main</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">return</span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span><span class="token plain-text">
Some login form.</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span><span class="token punctuation">/></span></span><span class="token plain-text">
</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>button</span><span class="token punctuation">></span></span><span class="token plain-text">
</span><span class="token punctuation">{</span><span class="token function">$click</span><span class="token punctuation">(</span><span class="token parameter">_</span> <span class="token operator">=></span> <span class="token keyword">this</span><span class="token punctuation">.</span>app<span class="token punctuation">.</span><span class="token function">activate</span><span class="token punctuation">(</span>TheApp<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">}</span><span class="token plain-text">
Login
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>button</span><span class="token punctuation">></span></span><span class="token plain-text">
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span>
<span class="token keyword">class</span> <span class="token class-name">InitService</span> <span class="token keyword">extends</span> <span class="token class-name">App<span class="token punctuation">.</span>Service</span> <span class="token punctuation">{</span>
<span class="token comment">// Try inverting the requires</span>
auth <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token keyword">require</span><span class="token punctuation">(</span>AuthService<span class="token punctuation">)</span>
theapp <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token keyword">require</span><span class="token punctuation">(</span>TheApp<span class="token punctuation">)</span>
<span class="token keyword">async</span> <span class="token function">init</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token keyword">await</span> <span class="token keyword">this</span><span class="token punctuation">.</span>auth<span class="token punctuation">.</span><span class="token function">checkIfLogged</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">this</span><span class="token punctuation">.</span>theapp<span class="token punctuation">.</span>o_was_logged<span class="token punctuation">.</span><span class="token keyword">set</span><span class="token punctuation">(</span><span class="token boolean">true</span><span class="token punctuation">)</span>
<span class="token keyword">this</span><span class="token punctuation">.</span>app<span class="token punctuation">.</span><span class="token function">activate</span><span class="token punctuation">(</span>TheApp<span class="token punctuation">)</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span>
document<span class="token punctuation">.</span>body<span class="token punctuation">.</span><span class="token function">appendChild</span><span class="token punctuation">(</span>App<span class="token punctuation">.</span><span class="token function">DisplayApp</span><span class="token punctuation">(</span><span class="token string">'Main'</span><span class="token punctuation">,</span> InitService<span class="token punctuation">)</span><span class="token punctuation">)</span>
</code></pre>
</div></div><div class="st-block" id="Attrs" data-categories="dom,toc" data-tags="code,category"><div class="st-name st-kind-interface"><!-- If --><span class="st-kind">interface</span><!-- /If --><b>Attrs</b><!-- If --><<!-- Repeat --><span><b>N</b><!-- If --> extends <a href="#Node">Node<!-- If --><!-- /If --></a><!-- /If --></span><!-- end repeat -->><!-- /If --><!-- If --> extends <!-- Repeat --><span><a href="#EmptyAttributes">EmptyAttributes</a><<!-- Repeat --><span>N</span><!-- end repeat -->></span><!-- end repeat --><!-- /If --></div><div class="st-doc"><p>Basic attributes used on all HTML nodes, which can be reused when making components
to benefit from the class / style / id... attributes defined here.</p>
<p>Attrs <strong>must</strong> always specify the returned node type as its type argument.</p>
<pre class='language-tsx'><code><span class="token keyword">import</span> <span class="token punctuation">{</span> Attrs <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'elt'</span>
<span class="token keyword">function</span> <span class="token function">MyComponent</span><span class="token punctuation">(</span>a<span class="token operator">:</span> Attrs<span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">HTMLDivElement</span></span><span class="token punctuation">></span></span><span class="token plain-text"> & </span><span class="token punctuation">{</span>some_attribute<span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">}</span><span class="token plain-text">, ch: DocumentFragment) </span><span class="token punctuation">{</span>
<span class="token keyword">return</span> <span class="token constant">E</span><span class="token punctuation">.</span><span class="token constant">DIV</span><span class="token punctuation">(</span>ch<span class="token punctuation">,</span> a<span class="token punctuation">.</span>some_attribute<span class="token punctuation">)</span>
<span class="token punctuation">}</span><span class="token plain-text">
// With Attrs, all the basic elements are available.
document.body.appendChild(</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">MyComponent</span></span>
<span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">'</span>some_id<span class="token punctuation">'</span></span>
<span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">'</span>css_class_1<span class="token punctuation">'</span></span>
<span class="token attr-name">some_attribute</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">'</span>World !<span class="token punctuation">'</span></span>
<span class="token punctuation">></span></span><span class="token plain-text">Hello </span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">MyComponent</span></span><span class="token punctuation">></span></span><span class="token plain-text">)
</span></code></pre>
<p>This type should be used as first argument to all components definitions.</p>
</div><div class="st-nest"><div class="st-block" id="Attrs#class" data-categories="" data-tags=""><div class="st-kind-var"><div class="st-name"><span class="st-kind"></span><span class=""><b>class?</b>: <span class="st-type"><!-- Repeat --><a href="#ClassDefinition">ClassDefinition<!-- If --><!-- /If --></a> | <span><a href="#ClassDefinition">ClassDefinition<!-- If --><!-- /If --></a>[]</span><!-- end repeat --></span></span></div></div><div class="st-doc"><p>Class definition(s), see <a href="#$class"><code>$class()</code></a> for possible uses</p>