solarite 0.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/build/build.bat +3 -0
- package/build/build.js +139 -0
- package/build/lib/rollup.min.js +11 -0
- package/build/lib/source-map.min.js +1 -0
- package/build/lib/terser.min.js +1 -0
- package/dist/Solarite-debug.js +4143 -0
- package/dist/Solarite.js +3740 -0
- package/dist/Solarite.min.js +4 -0
- package/docs/index.md +423 -0
- package/docs/js/Playground.js +184 -0
- package/docs/js/codemirror/codemirror6.js +32036 -0
- package/docs/js/codemirror/themeSolarIce.js +312 -0
- package/docs/js/documentation.js +32 -0
- package/docs/js/ui/CodeEditor.js +840 -0
- package/docs/js/ui/DarkToggle.js +52 -0
- package/docs/js/ui/FlexResizer.js +142 -0
- package/docs/js/util/Draggable2.js +151 -0
- package/docs/js/util/Errors.js +9 -0
- package/docs/js/util/Html.js +147 -0
- package/docs/js/util/Icons.js +623 -0
- package/docs/js/util/Input.js +253 -0
- package/docs/js/util/Util.js +88 -0
- package/docs/js/util/delve.js +43 -0
- package/docs/media/FiraCode400.woff2 +0 -0
- package/docs/media/cabin-latin-700.woff2 +0 -0
- package/docs/media/documentation.css +93 -0
- package/docs/media/eternium.css +1123 -0
- package/docs/media/solarite-machine.webp +0 -0
- package/index.html +325 -0
- package/package.json +33 -0
- package/readme.md +3 -0
- package/src/solarite/ExprPath.js +554 -0
- package/src/solarite/MultiValueMap.js +65 -0
- package/src/solarite/NodeGroup.js +706 -0
- package/src/solarite/NodeGroupManager.js +582 -0
- package/src/solarite/Shell.js +307 -0
- package/src/solarite/Solarite.js +19 -0
- package/src/solarite/Template.js +85 -0
- package/src/solarite/Util.js +264 -0
- package/src/solarite/createSolarite.js +267 -0
- package/src/solarite/getArg.js +99 -0
- package/src/solarite/hash.js +101 -0
- package/src/solarite/r.js +143 -0
- package/src/solarite/udomdiff.js +233 -0
- package/src/solarite/watch.js +302 -0
- package/src/solarite/watch2.js +439 -0
- package/src/unused/FastLookupArray.js +54 -0
- package/src/unused/Hashes.js +339 -0
- package/src/unused/InUse.test.js +92 -0
- package/src/unused/InUseMap.js +98 -0
- package/src/unused/LinkedList.js +117 -0
- package/src/unused/LinkedList.test.js +115 -0
- package/src/unused/Perf.js +47 -0
- package/src/unused/Template.js +108 -0
- package/src/util/Errors.js +9 -0
- package/src/util/Util.js +88 -0
- package/src/util/delve.js +43 -0
- package/tests/Benchmark.test.js +319 -0
- package/tests/NodeGroup.test.js +115 -0
- package/tests/Shell.test.js +75 -0
- package/tests/Solarite.test.js +2896 -0
- package/tests/Testimony.js +602 -0
- package/tests/index.html +75 -0
package/index.html
ADDED
|
@@ -0,0 +1,325 @@
|
|
|
1
|
+
<!doctype html>
|
|
2
|
+
<html>
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset='UTF-8'><meta name='viewport' content='width=device-width initial-scale=1'>
|
|
5
|
+
<script src="docs/js/ui/DarkToggle.js"></script><script type="module" src="docs/js/documentation.js"></script><link rel="stylesheet" href="docs/media/documentation.css"><link rel="stylesheet" href="/docs/media/eternium.css">
|
|
6
|
+
<style type='text/css'>html {overflow-x: initial !important;}:root { --bg-color:#ffffff; --text-color:#333333; --select-text-bg-color:#B5D6FC; --select-text-font-color:auto; --monospace:"Lucida Console",Consolas,"Courier",monospace; --title-bar-height:20px; }
|
|
7
|
+
.mac-os-11 { --title-bar-height:28px; }
|
|
8
|
+
html { font-size: 14px; background-color: var(--bg-color); color: var(--text-color); font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; }
|
|
9
|
+
h1, h2, h3, h4, h5 { white-space: pre-wrap; }
|
|
10
|
+
body { margin: 0px; padding: 0px; height: auto; inset: 0px; font-size: 1rem; line-height: 1.42857; overflow-x: hidden; background: inherit; }
|
|
11
|
+
iframe { margin: auto; }
|
|
12
|
+
a.url { word-break: break-all; }
|
|
13
|
+
a:active, a:hover { outline: 0px; }
|
|
14
|
+
.in-text-selection, ::selection { text-shadow: none; background: var(--select-text-bg-color); color: var(--select-text-font-color); }
|
|
15
|
+
#write { margin: 0px auto; height: auto; width: inherit; word-break: normal; overflow-wrap: break-word; position: relative; white-space: normal; overflow-x: visible; padding-top: 36px; }
|
|
16
|
+
#write.first-line-indent p { text-indent: 2em; }
|
|
17
|
+
#write.first-line-indent li p, #write.first-line-indent p * { text-indent: 0px; }
|
|
18
|
+
#write.first-line-indent li { margin-left: 2em; }
|
|
19
|
+
.for-image #write { padding-left: 8px; padding-right: 8px; }
|
|
20
|
+
body.typora-export { padding-left: 30px; padding-right: 30px; }
|
|
21
|
+
.typora-export .footnote-line, .typora-export li, .typora-export p { white-space: pre-wrap; }
|
|
22
|
+
.typora-export .task-list-item input { pointer-events: none; }
|
|
23
|
+
@media screen and (max-width: 500px) {
|
|
24
|
+
body.typora-export { padding-left: 0px; padding-right: 0px; }
|
|
25
|
+
#write { padding-left: 20px; padding-right: 20px; }
|
|
26
|
+
}
|
|
27
|
+
#write li > figure:last-child { margin-bottom: 0.5rem; }
|
|
28
|
+
#write ol, #write ul { position: relative; }
|
|
29
|
+
img { max-width: 100%; vertical-align: middle; image-orientation: from-image; }
|
|
30
|
+
button, input, select, textarea { color: inherit; font: inherit; }
|
|
31
|
+
input[type="checkbox"], input[type="radio"] { line-height: normal; padding: 0px; }
|
|
32
|
+
*, ::after, ::before { box-sizing: border-box; }
|
|
33
|
+
#write h1, #write h2, #write h3, #write h4, #write h5, #write h6, #write p, #write pre { width: inherit; }
|
|
34
|
+
#write h1, #write h2, #write h3, #write h4, #write h5, #write h6, #write p { position: relative; }
|
|
35
|
+
p { line-height: inherit; }
|
|
36
|
+
h1, h2, h3, h4, h5, h6 { break-after: avoid-page; break-inside: avoid; orphans: 4; }
|
|
37
|
+
p { orphans: 4; }
|
|
38
|
+
h1 { font-size: 2rem; }
|
|
39
|
+
h2 { font-size: 1.8rem; }
|
|
40
|
+
h3 { font-size: 1.6rem; }
|
|
41
|
+
h4 { font-size: 1.4rem; }
|
|
42
|
+
h5 { font-size: 1.2rem; }
|
|
43
|
+
h6 { font-size: 1rem; }
|
|
44
|
+
.md-math-block, .md-rawblock, h1, h2, h3, h4, h5, h6, p { margin-top: 1rem; margin-bottom: 1rem; }
|
|
45
|
+
.hidden { display: none; }
|
|
46
|
+
.md-blockmeta { color: rgb(204, 204, 204); font-weight: 700; font-style: italic; }
|
|
47
|
+
a { cursor: pointer; }
|
|
48
|
+
sup.md-footnote { padding: 2px 4px; background-color: rgba(238, 238, 238, 0.7); color: rgb(85, 85, 85); border-radius: 4px; cursor: pointer; }
|
|
49
|
+
sup.md-footnote a, sup.md-footnote a:hover { color: inherit; text-transform: inherit; text-decoration: inherit; }
|
|
50
|
+
#write input[type="checkbox"] { cursor: pointer; width: inherit; height: inherit; }
|
|
51
|
+
figure { overflow-x: auto; margin: 1.2em 0px; max-width: calc(100% + 16px); padding: 0px; }
|
|
52
|
+
figure > table { margin: 0px; }
|
|
53
|
+
thead, tr { break-inside: avoid; break-after: auto; }
|
|
54
|
+
thead { display: table-header-group; }
|
|
55
|
+
table { border-collapse: collapse; border-spacing: 0px; width: 100%; overflow: auto; break-inside: auto; text-align: left; }
|
|
56
|
+
table.md-table td { min-width: 32px; }
|
|
57
|
+
.CodeMirror-gutters { border-right: 0px; background-color: inherit; }
|
|
58
|
+
.CodeMirror-linenumber { user-select: none; }
|
|
59
|
+
.CodeMirror { text-align: left; }
|
|
60
|
+
.CodeMirror-placeholder { opacity: 0.3; }
|
|
61
|
+
.CodeMirror pre { padding: 0px 4px; }
|
|
62
|
+
.CodeMirror-lines { padding: 0px; }
|
|
63
|
+
div.hr:focus { cursor: none; }
|
|
64
|
+
#write pre { white-space: pre-wrap; }
|
|
65
|
+
#write.fences-no-line-wrapping pre { white-space: pre; }
|
|
66
|
+
#write pre.ty-contain-cm { white-space: normal; }
|
|
67
|
+
.CodeMirror-gutters { margin-right: 4px; }
|
|
68
|
+
.md-fences { font-size: 0.9rem; display: block; break-inside: avoid; text-align: left; overflow: visible; white-space: pre; background: inherit; position: relative !important; }
|
|
69
|
+
.md-fences-adv-panel { width: 100%; margin-top: 10px; text-align: center; padding-top: 0px; padding-bottom: 8px; overflow-x: auto; }
|
|
70
|
+
#write .md-fences.mock-cm { white-space: pre-wrap; }
|
|
71
|
+
.md-fences.md-fences-with-lineno { padding-left: 0px; }
|
|
72
|
+
#write.fences-no-line-wrapping .md-fences.mock-cm { white-space: pre; overflow-x: auto; }
|
|
73
|
+
.md-fences.mock-cm.md-fences-with-lineno { padding-left: 8px; }
|
|
74
|
+
.CodeMirror-line, twitterwidget { break-inside: avoid; }
|
|
75
|
+
svg { break-inside: avoid; }
|
|
76
|
+
.footnotes { opacity: 0.8; font-size: 0.9rem; margin-top: 1em; margin-bottom: 1em; }
|
|
77
|
+
.footnotes + .footnotes { margin-top: 0px; }
|
|
78
|
+
.md-reset { margin: 0px; padding: 0px; border: 0px; outline: 0px; vertical-align: top; background: 0px 0px; text-decoration: none; text-shadow: none; float: none; position: static; width: auto; height: auto; white-space: nowrap; cursor: inherit; -webkit-tap-highlight-color: transparent; line-height: normal; font-weight: 400; text-align: left; box-sizing: content-box; direction: ltr; }
|
|
79
|
+
li div { padding-top: 0px; }
|
|
80
|
+
blockquote { margin: 1rem 0px; }
|
|
81
|
+
li .mathjax-block, li p { margin: 0.5rem 0px; }
|
|
82
|
+
li blockquote { margin: 1rem 0px; }
|
|
83
|
+
li { margin: 0px; position: relative; }
|
|
84
|
+
blockquote > :last-child { margin-bottom: 0px; }
|
|
85
|
+
blockquote > :first-child, li > :first-child { margin-top: 0px; }
|
|
86
|
+
.footnotes-area { color: rgb(136, 136, 136); margin-top: 0.714rem; padding-bottom: 0.143rem; white-space: normal; }
|
|
87
|
+
#write .footnote-line { white-space: pre-wrap; }
|
|
88
|
+
@media print {
|
|
89
|
+
body, html { border: 1px solid transparent; height: 99%; break-after: avoid; break-before: avoid; font-variant-ligatures: no-common-ligatures; }
|
|
90
|
+
#write { margin-top: 0px; border-color: transparent !important; padding-top: 0px !important; padding-bottom: 0px !important; }
|
|
91
|
+
.typora-export * { -webkit-print-color-adjust: exact; }
|
|
92
|
+
.typora-export #write { break-after: avoid; }
|
|
93
|
+
.typora-export #write::after { height: 0px; }
|
|
94
|
+
.is-mac table { break-inside: avoid; }
|
|
95
|
+
#write > p:nth-child(1) { margin-top: 0px; }
|
|
96
|
+
.typora-export-show-outline .typora-export-sidebar { display: none; }
|
|
97
|
+
figure { overflow-x: visible; }
|
|
98
|
+
}
|
|
99
|
+
.footnote-line { margin-top: 0.714em; font-size: 0.7em; }
|
|
100
|
+
a img, img a { cursor: pointer; }
|
|
101
|
+
pre.md-meta-block { font-size: 0.8rem; min-height: 0.8rem; white-space: pre-wrap; background: rgb(204, 204, 204); display: block; overflow-x: hidden; }
|
|
102
|
+
p > .md-image:only-child:not(.md-img-error) img, p > img:only-child { display: block; margin: auto; }
|
|
103
|
+
#write.first-line-indent p > .md-image:only-child:not(.md-img-error) img { left: -2em; position: relative; }
|
|
104
|
+
p > .md-image:only-child { display: inline-block; width: 100%; }
|
|
105
|
+
#write .MathJax_Display { margin: 0.8em 0px 0px; }
|
|
106
|
+
.md-math-block { width: 100%; }
|
|
107
|
+
.md-math-block:not(:empty)::after { display: none; }
|
|
108
|
+
.MathJax_ref { fill: currentcolor; }
|
|
109
|
+
[contenteditable="true"]:active, [contenteditable="true"]:focus, [contenteditable="false"]:active, [contenteditable="false"]:focus { outline: 0px; box-shadow: none; }
|
|
110
|
+
.md-task-list-item { position: relative; list-style-type: none; }
|
|
111
|
+
.task-list-item.md-task-list-item { padding-left: 0px; }
|
|
112
|
+
.md-task-list-item > input { position: absolute; top: 0px; left: 0px; margin-left: -1.2em; margin-top: calc(1em - 10px); border: none; }
|
|
113
|
+
.math { font-size: 1rem; }
|
|
114
|
+
.md-toc { min-height: 3.58rem; position: relative; font-size: 0.9rem; border-radius: 10px; }
|
|
115
|
+
.md-toc-content { position: relative; margin-left: 0px; }
|
|
116
|
+
.md-toc-content::after, .md-toc::after { display: none; }
|
|
117
|
+
.md-toc-item { display: block; color: rgb(65, 131, 196); }
|
|
118
|
+
.md-toc-item a { text-decoration: none; }
|
|
119
|
+
.md-toc-inner:hover { text-decoration: underline; }
|
|
120
|
+
.md-toc-inner { display: inline-block; cursor: pointer; }
|
|
121
|
+
.md-toc-h1 .md-toc-inner { margin-left: 0px; font-weight: 700; }
|
|
122
|
+
.md-toc-h2 .md-toc-inner { margin-left: 2em; }
|
|
123
|
+
.md-toc-h3 .md-toc-inner { margin-left: 4em; }
|
|
124
|
+
.md-toc-h4 .md-toc-inner { margin-left: 6em; }
|
|
125
|
+
.md-toc-h5 .md-toc-inner { margin-left: 8em; }
|
|
126
|
+
.md-toc-h6 .md-toc-inner { margin-left: 10em; }
|
|
127
|
+
@media screen and (max-width: 48em) {
|
|
128
|
+
.md-toc-h3 .md-toc-inner { margin-left: 3.5em; }
|
|
129
|
+
.md-toc-h4 .md-toc-inner { margin-left: 5em; }
|
|
130
|
+
.md-toc-h5 .md-toc-inner { margin-left: 6.5em; }
|
|
131
|
+
.md-toc-h6 .md-toc-inner { margin-left: 8em; }
|
|
132
|
+
}
|
|
133
|
+
a.md-toc-inner { font-size: inherit; font-style: inherit; font-weight: inherit; line-height: inherit; }
|
|
134
|
+
.footnote-line a:not(.reversefootnote) { color: inherit; }
|
|
135
|
+
.reversefootnote { font-family: ui-monospace, sans-serif; }
|
|
136
|
+
.md-attr { display: none; }
|
|
137
|
+
.md-fn-count::after { content: "."; }
|
|
138
|
+
code, pre, samp, tt { font-family: var(--monospace); }
|
|
139
|
+
kbd { margin: 0px 0.1em; padding: 0.1em 0.6em; font-size: 0.8em; color: rgb(36, 39, 41); background: rgb(255, 255, 255); border: 1px solid rgb(173, 179, 185); border-radius: 3px; box-shadow: rgba(12, 13, 14, 0.2) 0px 1px 0px, rgb(255, 255, 255) 0px 0px 0px 2px inset; white-space: nowrap; vertical-align: middle; }
|
|
140
|
+
.md-comment { color: rgb(162, 127, 3); opacity: 0.6; font-family: var(--monospace); }
|
|
141
|
+
code { text-align: left; vertical-align: initial; }
|
|
142
|
+
a.md-print-anchor { white-space: pre !important; border-width: initial !important; border-style: none !important; border-color: initial !important; display: inline-block !important; position: absolute !important; width: 1px !important; right: 0px !important; outline: 0px !important; background: 0px 0px !important; text-decoration: initial !important; text-shadow: initial !important; }
|
|
143
|
+
.os-windows.monocolor-emoji .md-emoji { font-family: "Segoe UI Symbol", sans-serif; }
|
|
144
|
+
.md-diagram-panel > svg { max-width: 100%; }
|
|
145
|
+
[lang="flow"] svg, [lang="mermaid"] svg { max-width: 100%; height: auto; }
|
|
146
|
+
[lang="mermaid"] .node text { font-size: 1rem; }
|
|
147
|
+
table tr th { border-bottom: 0px; }
|
|
148
|
+
video { max-width: 100%; display: block; margin: 0px auto; }
|
|
149
|
+
iframe { max-width: 100%; width: 100%; border: none; }
|
|
150
|
+
.highlight td, .highlight tr { border: 0px; }
|
|
151
|
+
mark { background: rgb(255, 255, 0); color: rgb(0, 0, 0); }
|
|
152
|
+
.md-html-inline .md-plain, .md-html-inline strong, mark .md-inline-math, mark strong { color: inherit; }
|
|
153
|
+
.md-expand mark .md-meta { opacity: 0.3 !important; }
|
|
154
|
+
mark .md-meta { color: rgb(0, 0, 0); }
|
|
155
|
+
@media print {
|
|
156
|
+
.typora-export h1, .typora-export h2, .typora-export h3, .typora-export h4, .typora-export h5, .typora-export h6 { break-inside: avoid; }
|
|
157
|
+
}
|
|
158
|
+
.md-diagram-panel .messageText { stroke: none !important; }
|
|
159
|
+
.md-diagram-panel .start-state { fill: var(--node-fill); }
|
|
160
|
+
.md-diagram-panel .edgeLabel rect { opacity: 1 !important; }
|
|
161
|
+
.md-fences.md-fences-math { font-size: 1em; }
|
|
162
|
+
.md-fences-advanced:not(.md-focus) { padding: 0px; white-space: nowrap; border: 0px; }
|
|
163
|
+
.md-fences-advanced:not(.md-focus) { background: inherit; }
|
|
164
|
+
.typora-export-show-outline .typora-export-content { max-width: 1440px; margin: auto; display: flex; flex-direction: row; }
|
|
165
|
+
.typora-export-sidebar { width: 300px; font-size: 0.8rem; margin-top: 80px; margin-right: 18px; }
|
|
166
|
+
.typora-export-show-outline #write { --webkit-flex:2; flex: 2 1 0%; }
|
|
167
|
+
.typora-export-sidebar .outline-content { position: fixed; top: 0px; max-height: 100%; overflow: hidden auto; padding-bottom: 30px; padding-top: 60px; width: 300px; }
|
|
168
|
+
@media screen and (max-width: 1024px) {
|
|
169
|
+
.typora-export-sidebar, .typora-export-sidebar .outline-content { width: 240px; }
|
|
170
|
+
}
|
|
171
|
+
@media screen and (max-width: 800px) {
|
|
172
|
+
.typora-export-sidebar { display: none; }
|
|
173
|
+
}
|
|
174
|
+
.outline-content li, .outline-content ul { margin-left: 0px; margin-right: 0px; padding-left: 0px; padding-right: 0px; list-style: none; overflow-wrap: anywhere; }
|
|
175
|
+
.outline-content ul { margin-top: 0px; margin-bottom: 0px; }
|
|
176
|
+
.outline-content strong { font-weight: 400; }
|
|
177
|
+
.outline-expander { width: 1rem; height: 1.42857rem; position: relative; display: table-cell; vertical-align: middle; cursor: pointer; padding-left: 4px; }
|
|
178
|
+
.outline-expander::before { content: ""; position: relative; font-family: Ionicons; display: inline-block; font-size: 8px; vertical-align: middle; }
|
|
179
|
+
.outline-item { padding-top: 3px; padding-bottom: 3px; cursor: pointer; }
|
|
180
|
+
.outline-expander:hover::before { content: ""; }
|
|
181
|
+
.outline-h1 > .outline-item { padding-left: 0px; }
|
|
182
|
+
.outline-h2 > .outline-item { padding-left: 1em; }
|
|
183
|
+
.outline-h3 > .outline-item { padding-left: 2em; }
|
|
184
|
+
.outline-h4 > .outline-item { padding-left: 3em; }
|
|
185
|
+
.outline-h5 > .outline-item { padding-left: 4em; }
|
|
186
|
+
.outline-h6 > .outline-item { padding-left: 5em; }
|
|
187
|
+
.outline-label { cursor: pointer; display: table-cell; vertical-align: middle; text-decoration: none; color: inherit; }
|
|
188
|
+
.outline-label:hover { text-decoration: underline; }
|
|
189
|
+
.outline-item:hover { border-color: rgb(245, 245, 245); background-color: var(--item-hover-bg-color); }
|
|
190
|
+
.outline-item:hover { margin-left: -28px; margin-right: -28px; border-left: 28px solid transparent; border-right: 28px solid transparent; }
|
|
191
|
+
.outline-item-single .outline-expander::before, .outline-item-single .outline-expander:hover::before { display: none; }
|
|
192
|
+
.outline-item-open > .outline-item > .outline-expander::before { content: ""; }
|
|
193
|
+
.outline-children { display: none; }
|
|
194
|
+
.info-panel-tab-wrapper { display: none; }
|
|
195
|
+
.outline-item-open > .outline-children { display: block; }
|
|
196
|
+
.typora-export .outline-item { padding-top: 1px; padding-bottom: 1px; }
|
|
197
|
+
.typora-export .outline-item:hover { margin-right: -8px; border-right: 8px solid transparent; }
|
|
198
|
+
.typora-export .outline-expander::before { content: "+"; font-family: inherit; top: -1px; }
|
|
199
|
+
.typora-export .outline-expander:hover::before, .typora-export .outline-item-open > .outline-item > .outline-expander::before { content: "−"; }
|
|
200
|
+
.typora-export-collapse-outline .outline-children { display: none; }
|
|
201
|
+
.typora-export-collapse-outline .outline-item-open > .outline-children, .typora-export-no-collapse-outline .outline-children { display: block; }
|
|
202
|
+
.typora-export-no-collapse-outline .outline-expander::before { content: "" !important; }
|
|
203
|
+
.typora-export-show-outline .outline-item-active > .outline-item .outline-label { font-weight: 700; }
|
|
204
|
+
.md-inline-math-container mjx-container { zoom: 0.95; }
|
|
205
|
+
mjx-container { break-inside: avoid; }
|
|
206
|
+
|
|
207
|
+
|
|
208
|
+
.CodeMirror { height: auto; }
|
|
209
|
+
.CodeMirror.cm-s-inner { background: inherit; }
|
|
210
|
+
.CodeMirror-scroll { overflow: auto hidden; z-index: 3; }
|
|
211
|
+
.CodeMirror-gutter-filler, .CodeMirror-scrollbar-filler { background-color: rgb(255, 255, 255); }
|
|
212
|
+
.CodeMirror-gutters { border-right: 1px solid rgb(221, 221, 221); background: inherit; white-space: nowrap; }
|
|
213
|
+
.CodeMirror-linenumber { padding: 0px 3px 0px 5px; text-align: right; color: rgb(153, 153, 153); }
|
|
214
|
+
.cm-s-inner .cm-keyword { color: rgb(119, 0, 136); }
|
|
215
|
+
.cm-s-inner .cm-atom, .cm-s-inner.cm-atom { color: rgb(34, 17, 153); }
|
|
216
|
+
.cm-s-inner .cm-number { color: rgb(17, 102, 68); }
|
|
217
|
+
.cm-s-inner .cm-def { color: rgb(0, 0, 255); }
|
|
218
|
+
.cm-s-inner .cm-variable { color: rgb(0, 0, 0); }
|
|
219
|
+
.cm-s-inner .cm-variable-2 { color: rgb(0, 85, 170); }
|
|
220
|
+
.cm-s-inner .cm-variable-3 { color: rgb(0, 136, 85); }
|
|
221
|
+
.cm-s-inner .cm-string { color: rgb(170, 17, 17); }
|
|
222
|
+
.cm-s-inner .cm-property { color: rgb(0, 0, 0); }
|
|
223
|
+
.cm-s-inner .cm-operator { color: rgb(152, 26, 26); }
|
|
224
|
+
.cm-s-inner .cm-comment, .cm-s-inner.cm-comment { color: rgb(170, 85, 0); }
|
|
225
|
+
.cm-s-inner .cm-string-2 { color: rgb(255, 85, 0); }
|
|
226
|
+
.cm-s-inner .cm-meta { color: rgb(85, 85, 85); }
|
|
227
|
+
.cm-s-inner .cm-qualifier { color: rgb(85, 85, 85); }
|
|
228
|
+
.cm-s-inner .cm-builtin { color: rgb(51, 0, 170); }
|
|
229
|
+
.cm-s-inner .cm-bracket { color: rgb(153, 153, 119); }
|
|
230
|
+
.cm-s-inner .cm-tag { color: rgb(17, 119, 0); }
|
|
231
|
+
.cm-s-inner .cm-attribute { color: rgb(0, 0, 204); }
|
|
232
|
+
.cm-s-inner .cm-header, .cm-s-inner.cm-header { color: rgb(0, 0, 255); }
|
|
233
|
+
.cm-s-inner .cm-quote, .cm-s-inner.cm-quote { color: rgb(0, 153, 0); }
|
|
234
|
+
.cm-s-inner .cm-hr, .cm-s-inner.cm-hr { color: rgb(153, 153, 153); }
|
|
235
|
+
.cm-s-inner .cm-link, .cm-s-inner.cm-link { color: rgb(0, 0, 204); }
|
|
236
|
+
.cm-negative { color: rgb(221, 68, 68); }
|
|
237
|
+
.cm-positive { color: rgb(34, 153, 34); }
|
|
238
|
+
.cm-header, .cm-strong { font-weight: 700; }
|
|
239
|
+
.cm-del { text-decoration: line-through; }
|
|
240
|
+
.cm-em { font-style: italic; }
|
|
241
|
+
.cm-link { text-decoration: underline; }
|
|
242
|
+
.cm-error { color: red; }
|
|
243
|
+
.cm-invalidchar { color: red; }
|
|
244
|
+
.cm-constant { color: rgb(38, 139, 210); }
|
|
245
|
+
.cm-defined { color: rgb(181, 137, 0); }
|
|
246
|
+
div.CodeMirror span.CodeMirror-matchingbracket { color: rgb(0, 255, 0); }
|
|
247
|
+
div.CodeMirror span.CodeMirror-nonmatchingbracket { color: rgb(255, 34, 34); }
|
|
248
|
+
.cm-s-inner .CodeMirror-activeline-background { background: inherit; }
|
|
249
|
+
.CodeMirror { position: relative; overflow: hidden; }
|
|
250
|
+
.CodeMirror-scroll { height: 100%; outline: 0px; position: relative; box-sizing: content-box; background: inherit; }
|
|
251
|
+
.CodeMirror-sizer { position: relative; }
|
|
252
|
+
.CodeMirror-gutter-filler, .CodeMirror-hscrollbar, .CodeMirror-scrollbar-filler, .CodeMirror-vscrollbar { position: absolute; z-index: 6; display: none; outline: 0px; }
|
|
253
|
+
.CodeMirror-vscrollbar { right: 0px; top: 0px; overflow: hidden; }
|
|
254
|
+
.CodeMirror-hscrollbar { bottom: 0px; left: 0px; overflow: auto hidden; }
|
|
255
|
+
.CodeMirror-scrollbar-filler { right: 0px; bottom: 0px; }
|
|
256
|
+
.CodeMirror-gutter-filler { left: 0px; bottom: 0px; }
|
|
257
|
+
.CodeMirror-gutters { position: absolute; left: 0px; top: 0px; padding-bottom: 10px; z-index: 3; overflow-y: hidden; }
|
|
258
|
+
.CodeMirror-gutter { white-space: normal; height: 100%; box-sizing: content-box; padding-bottom: 30px; margin-bottom: -32px; display: inline-block; }
|
|
259
|
+
.CodeMirror-gutter-wrapper { position: absolute; z-index: 4; background: 0px 0px !important; border: none !important; }
|
|
260
|
+
.CodeMirror-gutter-background { position: absolute; top: 0px; bottom: 0px; z-index: 4; }
|
|
261
|
+
.CodeMirror-gutter-elt { position: absolute; cursor: default; z-index: 4; }
|
|
262
|
+
.CodeMirror-lines { cursor: text; }
|
|
263
|
+
.CodeMirror pre { border-radius: 0px; border-width: 0px; background: 0px 0px; font-family: inherit; font-size: inherit; margin: 0px; white-space: pre; overflow-wrap: normal; color: inherit; z-index: 2; position: relative; overflow: visible; }
|
|
264
|
+
.CodeMirror-wrap pre { overflow-wrap: break-word; white-space: pre-wrap; word-break: normal; }
|
|
265
|
+
.CodeMirror-code pre { border-right: 30px solid transparent; width: fit-content; }
|
|
266
|
+
.CodeMirror-wrap .CodeMirror-code pre { border-right: none; width: auto; }
|
|
267
|
+
.CodeMirror-linebackground { position: absolute; inset: 0px; z-index: 0; }
|
|
268
|
+
.CodeMirror-linewidget { position: relative; z-index: 2; overflow: auto; }
|
|
269
|
+
.CodeMirror-wrap .CodeMirror-scroll { overflow-x: hidden; }
|
|
270
|
+
.CodeMirror-measure { position: absolute; width: 100%; height: 0px; overflow: hidden; visibility: hidden; }
|
|
271
|
+
.CodeMirror-measure pre { position: static; }
|
|
272
|
+
.CodeMirror div.CodeMirror-cursor { position: absolute; visibility: hidden; border-right: none; width: 0px; }
|
|
273
|
+
.CodeMirror div.CodeMirror-cursor { visibility: hidden; }
|
|
274
|
+
.CodeMirror-focused div.CodeMirror-cursor { visibility: inherit; }
|
|
275
|
+
.cm-searching { background: rgba(255, 255, 0, 0.4); }
|
|
276
|
+
span.cm-underlined { text-decoration: underline; }
|
|
277
|
+
span.cm-strikethrough { text-decoration: line-through; }
|
|
278
|
+
.cm-tw-syntaxerror { color: rgb(255, 255, 255); background-color: rgb(153, 0, 0); }
|
|
279
|
+
.cm-tw-deleted { text-decoration: line-through; }
|
|
280
|
+
.cm-tw-header5 { font-weight: 700; }
|
|
281
|
+
.cm-tw-listitem:first-child { padding-left: 10px; }
|
|
282
|
+
.cm-tw-box { border-style: solid; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-color: inherit; border-top-width: 0px !important; }
|
|
283
|
+
.cm-tw-underline { text-decoration: underline; }
|
|
284
|
+
@media print {
|
|
285
|
+
.CodeMirror div.CodeMirror-cursor { visibility: hidden; }
|
|
286
|
+
}
|
|
287
|
+
|
|
288
|
+
|
|
289
|
+
:root {
|
|
290
|
+
--side-bar-bg-color: #fafafa;
|
|
291
|
+
--control-text-color: #777;
|
|
292
|
+
}
|
|
293
|
+
|
|
294
|
+
|
|
295
|
+
</style><title>Solarite Documentation</title>
|
|
296
|
+
</head>
|
|
297
|
+
<body class='typora-export os-windows typora-export-show-outline typora-export-no-collapse-outline'><div class='typora-export-content'>
|
|
298
|
+
<div class="typora-export-sidebar"><div class="outline-content"><li class="outline-item-wrapper outline-h1"><div class="outline-item"><span class="outline-expander"></span><a class="outline-label" href="#solarite-docs">Solarite Docs</a></div><ul class="outline-children"><li class="outline-item-wrapper outline-h2"><div class="outline-item"><span class="outline-expander"></span><a class="outline-label" href="#features">Features</a></div><ul class="outline-children"></ul></li><li class="outline-item-wrapper outline-h2"><div class="outline-item"><span class="outline-expander"></span><a class="outline-label" href="#using">Using</a></div><ul class="outline-children"></ul></li><li class="outline-item-wrapper outline-h2"><div class="outline-item"><span class="outline-expander"></span><a class="outline-label" href="#examples">Examples</a></div><ul class="outline-children"></ul></li><li class="outline-item-wrapper outline-h2"><div class="outline-item"><span class="outline-expander"></span><a class="outline-label" href="#concepts">Concepts</a></div><ul class="outline-children"><li class="outline-item-wrapper outline-h3"><div class="outline-item"><span class="outline-expander"></span><a class="outline-label" href="#creating-web-components">Creating Web Components</a></div><ul class="outline-children"></ul></li><li class="outline-item-wrapper outline-h3"><div class="outline-item"><span class="outline-expander"></span><a class="outline-label" href="#the-render-function-r-and-thishtml">The render() function, r, and this.html</a></div><ul class="outline-children"></ul></li><li class="outline-item-wrapper outline-h3"><div class="outline-item"><span class="outline-expander"></span><a class="outline-label" href="#inheriting-from-existing-dom-elements">Inheriting from existing DOM elements.</a></div><ul class="outline-children"></ul></li><li class="outline-item-wrapper outline-h3"><div class="outline-item"><span class="outline-expander"></span><a class="outline-label" href="#loops">Loops</a></div><ul class="outline-children"></ul></li><li class="outline-item-wrapper outline-h3"><div class="outline-item"><span class="outline-expander"></span><a class="outline-label" href="#attributes">Attributes</a></div><ul class="outline-children"></ul></li><li class="outline-item-wrapper outline-h3"><div class="outline-item"><span class="outline-expander"></span><a class="outline-label" href="#events">Events</a></div><ul class="outline-children"></ul></li><li class="outline-item-wrapper outline-h3"><div class="outline-item"><span class="outline-expander"></span><a class="outline-label" href="#two-way-binding">Two-Way Binding</a></div><ul class="outline-children"></ul></li><li class="outline-item-wrapper outline-h3"><div class="outline-item"><span class="outline-expander"></span><a class="outline-label" href="#ids">Ids</a></div><ul class="outline-children"></ul></li><li class="outline-item-wrapper outline-h3"><div class="outline-item"><span class="outline-expander"></span><a class="outline-label" href="#scoped-styles">Scoped Styles</a></div><ul class="outline-children"></ul></li><li class="outline-item-wrapper outline-h3"><div class="outline-item"><span class="outline-expander"></span><a class="outline-label" href="#sub-components">Sub Components</a></div><ul class="outline-children"></ul></li><li class="outline-item-wrapper outline-h3"><div class="outline-item"><span class="outline-expander"></span><a class="outline-label" href="#slots">Slots</a></div><ul class="outline-children"></ul></li><li class="outline-item-wrapper outline-h3"><div class="outline-item"><span class="outline-expander"></span><a class="outline-label" href="#the-r-function">The r() function</a></div><ul class="outline-children"></ul></li><li class="outline-item-wrapper outline-h3"><div class="outline-item"><span class="outline-expander"></span><a class="outline-label" href="#classless-elements">Classless Elements</a></div><ul class="outline-children"></ul></li><li class="outline-item-wrapper outline-h3"><div class="outline-item"><span class="outline-expander"></span><a class="outline-label" href="#watches-experimental">Watches (Experimental)</a></div><ul class="outline-children"></ul></li></ul></li><li class="outline-item-wrapper outline-h2"><div class="outline-item"><span class="outline-expander"></span><a class="outline-label" href="#reference">Reference</a></div><ul class="outline-children"></ul></li><li class="outline-item-wrapper outline-h2"><div class="outline-item"><span class="outline-expander"></span><a class="outline-label" href="#how-it-works">How it works</a></div><ul class="outline-children"></ul></li><li class="outline-item-wrapper outline-h2"><div class="outline-item"><span class="outline-expander"></span><a class="outline-label" href="#differences-from-other-libraries">Differences from other Libraries</a></div><ul class="outline-children"><li class="outline-item-wrapper outline-h3"><div class="outline-item"><span class="outline-expander"></span><a class="outline-label" href="#react">React</a></div><ul class="outline-children"></ul></li><li class="outline-item-wrapper outline-h3"><div class="outline-item"><span class="outline-expander"></span><a class="outline-label" href="#litjs">Lit.js</a></div><ul class="outline-children"></ul></li><li class="outline-item-wrapper outline-h3"><div class="outline-item"><span class="outline-expander"></span><a class="outline-label" href="#solidjs">Solid.js</a></div><ul class="outline-children"></ul></li></ul></li></ul></li></div></div><div id='write' class=''><!-- To create documentation: (1) Open in Typora. (2) Select the GitHub theme. (3) Export as html with styles to index.html. --><h1 id='solarite-docs'><span>Solarite Docs</span></h1><p><span>Solarite is a small (10KB min+gzip), fast, compilation-free JavaScript web component library that follows modern web standards.</span></p><pre class="md-fences md-end-block ty-contain-cm modeLoaded md-focus" spellcheck="false" lang="javascript" style="break-inside: unset;"><div class="CodeMirror cm-s-inner cm-s-null-scroll CodeMirror-wrap CodeMirror-focused" lang="javascript"><div style="overflow: hidden; position: relative; width: 3px; height: 0px; top: 691.711px; left: 638.156px;"><textarea autocorrect="off" autocapitalize="off" spellcheck="false" tabindex="0" style="position: absolute; bottom: -1em; padding: 0px; width: 1000px; height: 1em; outline: none;"></textarea></div><div class="CodeMirror-scrollbar-filler" cm-not-content="true"></div><div class="CodeMirror-gutter-filler" cm-not-content="true"></div><div class="CodeMirror-scroll" tabindex="-1"><div class="CodeMirror-sizer" style="margin-left: 0px; margin-bottom: 0px; border-right-width: 0px; padding-right: 0px; padding-bottom: 0px;"><div style="position: relative; top: 0px;"><div class="CodeMirror-lines" role="presentation"><div role="presentation" style="position: relative; outline: none;"><div class="CodeMirror-measure"><pre>x</pre></div><div class="CodeMirror-measure"></div><div style="position: relative; z-index: 1;"></div><div class="CodeMirror-code CodeMirror-crosshair" role="presentation" style=""><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-comment">// Type here to edit this code!</span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-keyword">import</span> {<span class="cm-def">Solarite</span>, <span class="cm-def">r</span>} <span class="cm-keyword">from</span> <span class="cm-string">'/src/solarite/Solarite.js'</span>;</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span cm-text="" cm-zwsp="">
|
|
299
|
+
</span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-keyword">class</span> <span class="cm-def">ShoppingList</span> <span class="cm-keyword">extends</span> <span class="cm-variable">Solarite</span> {</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-property">constructor</span>(<span class="cm-def">items</span><span class="cm-operator">=</span>[]) {</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-keyword">super</span>();</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-keyword">this</span>.<span class="cm-property">items</span> <span class="cm-operator">=</span> <span class="cm-variable-2">items</span>;</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text=" "> </span>}</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span cm-text="" cm-zwsp="">
|
|
300
|
+
</span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-property">addItem</span>() {</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-keyword">this</span>.<span class="cm-property">items</span>.<span class="cm-property">push</span>({<span class="cm-property">name</span>: <span class="cm-string">''</span>, <span class="cm-property">qty</span>: <span class="cm-number">0</span>});</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-keyword">this</span>.<span class="cm-property">render</span>();</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text=" "> </span>}</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span cm-text="" cm-zwsp="">
|
|
301
|
+
</span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-property">removeItem</span>(<span class="cm-def">item</span>) {</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-keyword">this</span>.<span class="cm-property">items</span>.<span class="cm-property">splice</span>(<span class="cm-keyword">this</span>.<span class="cm-property">items</span>.<span class="cm-property">indexOf</span>(<span class="cm-variable-2">item</span>), <span class="cm-number">1</span>);</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-keyword">this</span>.<span class="cm-property">render</span>();</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text=" "> </span>}</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span cm-text="" cm-zwsp="">
|
|
302
|
+
</span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-property">render</span>() {</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-keyword">this</span>.<span class="cm-property">html</span> <span class="cm-operator">=</span> <span class="cm-variable">r</span><span class="cm-string-2">`</span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-string-2"><shopping-list></span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-string-2"><style></span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-string-2">/* TODO */</span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-string-2"></style></span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-string-2"><button onclick=${</span><span class="cm-keyword">this</span>.<span class="cm-property">addItem</span><span class="cm-string-2">}>Add Item</button></span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-string-2">${</span><span class="cm-keyword">this</span>.<span class="cm-property">items</span>.<span class="cm-property">map</span>(<span class="cm-def">item</span> <span class="cm-operator">=></span> <span class="cm-variable">r</span><span class="cm-string-2">`</span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-string-2"><div style="display: flex; flex-direction: row"></span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-string-2"><input value=${</span><span class="cm-variable-2">item</span>.<span class="cm-property">name</span><span class="cm-string-2">}</span> <span class="cm-string-2">oninput=${</span>[<span class="cm-variable-2">item</span>, <span class="cm-string">'name'</span>]<span class="cm-string-2">}</span> <span class="cm-string-2">placeholder="Name"></span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-string-2"><input value=${</span><span class="cm-variable-2">item</span>.<span class="cm-property">qty</span><span class="cm-string-2">}</span> <span class="cm-string-2">oninput=${</span>[<span class="cm-variable-2">item</span>, <span class="cm-string">'qty'</span>]<span class="cm-string-2">}</span> <span class="cm-string-2">style="width: 50px"></span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-string-2"><button onclick=${</span>[<span class="cm-keyword">this</span>.<span class="cm-property">removeItem</span>, <span class="cm-variable-2">item</span>]<span class="cm-string-2">}>x</button></span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" class="cm-tab-wrap-hack" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-string-2"></div><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-tab" role="presentation" cm-text=" "> </span> </span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-string-2">`</span>)<span class="cm-string-2">}</span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-string-2"><pre>items = ${</span>() <span class="cm-operator">=></span> <span class="cm-variable">JSON</span>.<span class="cm-property">stringify</span>(<span class="cm-keyword">this</span>.<span class="cm-property">items</span>, <span class="cm-atom">null</span>, <span class="cm-number">4</span>)<span class="cm-string-2">}</pre></span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-string-2"></shopping-list>`</span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text=" "> </span>}</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;">}</span></pre><div class="CodeMirror-activeline" style="position: relative;"><div class="CodeMirror-activeline-background CodeMirror-linebackground"></div><div class="CodeMirror-gutter-background CodeMirror-activeline-gutter" style="left: 0px; width: 0px;"></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-variable">document</span>.<span class="cm-property">body</span>.<span class="cm-property">append</span>(<span class="cm-keyword">new</span> <span class="cm-variable">ShoppingList</span>()); <span class="cm-comment">// adds a child named <shopping-list></span></span></pre></div></div></div></div></div></div><div style="position: absolute; height: 0px; width: 1px; border-bottom: 0px solid transparent; top: 702px;"></div><div class="CodeMirror-gutters" style="display: none; height: 702px;"></div></div></div></pre><p><mark><span>TODO Does it re-render all Items on update?</span></mark><span> </span></p><h2 id='features'><span>Features</span></h2><p><mark><span>TODO: Show benchmark</span></mark></p><ul><li><p><span>No custom build steps and no dependencies. Not even Node.js. Just </span><code>import</code><span> Solarite.js or Solarite.min.js.</span></p></li><li><p><span>Creates native HTML Elements and Web Components which can be used anywhere in your document and alongside other libraries.</span></p></li><li><p><span>No need to set up state. Instead, use any regular variables or data structures in html templates.</span></p></li><li><p><span>Minimal updates on render</span></p></li><li><p><span>Local (scoped) styles</span></p></li><li><p><span>Two-way form element binding.</span></p></li><li><p><span>Optional shadow DOM (coming soon)</span></p></li><li><p><span>Optional JSX support (coming soon)</span></p></li><li><p><span>MIT license. Free for commercial use. No attribution needed.</span></p></li></ul><h2 id='using'><span>Using</span></h2><p><span>Import one of these pre-bundled es6 modules into your project:</span></p><ul><li><p><a href='https://cdn.jsdelivr.net/gh/Vorticode/Solarite/dist/Solarite.js'><span>RedComponent.js</span></a><span> - 76KB</span></p></li><li><p><a href='https://cdn.jsdelivr.net/gh/Vorticode/Solarite/dist/Solarite.js'><span>RedComponent.min.js</span></a><span> - 21KB / 7KB gzipped</span></p></li></ul><p><mark><span>TODO: NPM</span></mark></p><h2 id='examples'><span>Examples</span></h2><h2 id='concepts'><span>Concepts</span></h2><h3 id='creating-web-components'><span>Creating Web Components</span></h3><p><span>In this minimal example, we make a new class called </span><code>MyComponent</code><span> and provide a </span><code>render()</code><span> function to set its html.</span></p><p><span>All browsers require custom web component names to have a dash in the middle. Red Component looks at the case of the class name and converts it to a name with dashes. If it can't find at least one place to put a dash, it will append </span><code>-element</code><span> to the end.</span></p><pre class="md-fences md-end-block ty-contain-cm modeLoaded" spellcheck="false" lang="javascript"><div class="CodeMirror cm-s-inner cm-s-null-scroll CodeMirror-wrap" lang="javascript"><div style="overflow: hidden; position: relative; width: 3px; height: 0px; top: 6.41406px; left: 8px;"><textarea autocorrect="off" autocapitalize="off" spellcheck="false" tabindex="0" style="position: absolute; bottom: -1em; padding: 0px; width: 1000px; height: 1em; outline: none;"></textarea></div><div class="CodeMirror-scrollbar-filler" cm-not-content="true"></div><div class="CodeMirror-gutter-filler" cm-not-content="true"></div><div class="CodeMirror-scroll" tabindex="-1"><div class="CodeMirror-sizer" style="margin-left: 0px; margin-bottom: 0px; border-right-width: 0px; padding-right: 0px; padding-bottom: 0px;"><div style="position: relative; top: 0px;"><div class="CodeMirror-lines" role="presentation"><div role="presentation" style="position: relative; outline: none;"><div class="CodeMirror-measure"><pre><span>xxxxxxxxxx</span></pre></div><div class="CodeMirror-measure"></div><div style="position: relative; z-index: 1;"></div><div class="CodeMirror-code" role="presentation" style=""><div class="CodeMirror-activeline" style="position: relative;"><div class="CodeMirror-activeline-background CodeMirror-linebackground"></div><div class="CodeMirror-gutter-background CodeMirror-activeline-gutter" style="left: 0px; width: 0px;"></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-keyword">import</span> {<span class="cm-def">Solarite</span>, <span class="cm-def">r</span>} <span class="cm-keyword">from</span> <span class="cm-string">'../dist/Solarite.js'</span>;</span></pre></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span cm-text="" cm-zwsp="">
|
|
303
|
+
</span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-keyword">class</span> <span class="cm-def">MyComponent</span> <span class="cm-keyword">extends</span> <span class="cm-variable">Solarite</span> {</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-property">name</span> <span class="cm-operator">=</span> <span class="cm-string">'Red Component'</span>;</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-property">render</span>() { </span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-keyword">this</span>.<span class="cm-property">html</span> <span class="cm-operator">=</span> <span class="cm-variable">r</span><span class="cm-string-2">`<my-component>Hello <b>${</span><span class="cm-keyword">this</span>.<span class="cm-property">name</span><span class="cm-string-2">}!<b></my-component>`</span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text=" "> </span>}</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;">}</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span cm-text="" cm-zwsp="">
|
|
304
|
+
</span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-variable">document</span>.<span class="cm-property">body</span>.<span class="cm-property">append</span>(<span class="cm-keyword">new</span> <span class="cm-variable">MyComponent</span>());</span></pre></div></div></div></div></div><div style="position: absolute; height: 0px; width: 1px; border-bottom: 0px solid transparent; top: 172px;"></div><div class="CodeMirror-gutters" style="display: none; height: 172px;"></div></div></div></pre><p><span>A JetBrains IDE like </span><a href='https://www.jetbrains.com/webstorm/'><span>WebStorm</span></a><span>, </span><a href='https://www.jetbrains.com/phpstorm/'><span>PhpStorm</span></a><span>, or </span><a href='https://www.jetbrains.com/idea/'><span>IDEA</span></a><span> will syntax highlight the html template strings.</span></p><p><span>Note that the template strings use the </span><code>r</code><span> prefix. This </span><code>r</code><span> parses the html into a data structure that Red Component can use.</span></p><p><span>Alternatively, instead of instantiating the element in JavaScript, we could can instantiate the element directly from html. This only works if we first call </span><code>MyComponent.define()</code><span> so so that our element's tag name is mapped to our class: </span></p><pre class="md-fences md-end-block ty-contain-cm modeLoaded" spellcheck="false" lang="html2"><div class="CodeMirror cm-s-inner cm-s-null-scroll CodeMirror-wrap" lang="html2"><div style="overflow: hidden; position: relative; width: 3px; height: 0px; top: 6.41406px; left: 8px;"><textarea autocorrect="off" autocapitalize="off" spellcheck="false" tabindex="0" style="position: absolute; bottom: -1em; padding: 0px; width: 1000px; height: 1em; outline: none;"></textarea></div><div class="CodeMirror-scrollbar-filler" cm-not-content="true"></div><div class="CodeMirror-gutter-filler" cm-not-content="true"></div><div class="CodeMirror-scroll" tabindex="-1"><div class="CodeMirror-sizer" style="margin-left: 0px; margin-bottom: 0px; border-right-width: 0px; padding-right: 0px; padding-bottom: 0px;"><div style="position: relative; top: 0px;"><div class="CodeMirror-lines" role="presentation"><div role="presentation" style="position: relative; outline: none;"><div class="CodeMirror-measure"><pre><span>xxxxxxxxxx</span></pre></div><div class="CodeMirror-measure"></div><div style="position: relative; z-index: 1;"></div><div class="CodeMirror-code" role="presentation" style=""><div class="CodeMirror-activeline" style="position: relative;"><div class="CodeMirror-activeline-background CodeMirror-linebackground"></div><div class="CodeMirror-gutter-background CodeMirror-activeline-gutter" style="left: 0px; width: 0px;"></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><script> </span></pre></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text=" "> </span>// ... </span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text=" "> </span>// document.body.append(new MyComponent());</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text=" "> </span>MyComponent.define()</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"></script></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span cm-text="" cm-zwsp="">
|
|
305
|
+
</span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><my-component></my-component></span></pre></div></div></div></div></div><div style="position: absolute; height: 0px; width: 1px; border-bottom: 0px solid transparent; top: 121px;"></div><div class="CodeMirror-gutters" style="display: none; height: 121px;"></div></div></div></pre><p><span>Internally, the </span><code>define()</code><span> function calculates the tag name from the class name and then calls the built-in </span><a href='https://developer.mozilla.org/en-US/docs/Web/API/CustomElementRegistry/define'><span>customElements.define()</span></a><span>.</span></p><p><span>If you want the component to have a tag name that's different than the name derived from the class name, you can pass a different name to </span><code>define()</code><span>:</span></p><pre class="md-fences md-end-block ty-contain-cm modeLoaded" spellcheck="false" lang="javascript2"><div class="CodeMirror cm-s-inner cm-s-null-scroll CodeMirror-wrap" lang="javascript2"><div style="overflow: hidden; position: relative; width: 3px; height: 0px; top: 6.41406px; left: 8px;"><textarea autocorrect="off" autocapitalize="off" spellcheck="false" tabindex="0" style="position: absolute; bottom: -1em; padding: 0px; width: 1000px; height: 1em; outline: none;"></textarea></div><div class="CodeMirror-scrollbar-filler" cm-not-content="true"></div><div class="CodeMirror-gutter-filler" cm-not-content="true"></div><div class="CodeMirror-scroll" tabindex="-1"><div class="CodeMirror-sizer" style="margin-left: 0px; margin-bottom: 0px; border-right-width: 0px; padding-right: 0px; padding-bottom: 0px;"><div style="position: relative; top: 0px;"><div class="CodeMirror-lines" role="presentation"><div role="presentation" style="position: relative; outline: none;"><div class="CodeMirror-measure"><pre><span>xxxxxxxxxx</span></pre></div><div class="CodeMirror-measure"></div><div style="position: relative; z-index: 1;"></div><div class="CodeMirror-code" role="presentation"><div class="CodeMirror-activeline" style="position: relative;"><div class="CodeMirror-activeline-background CodeMirror-linebackground"></div><div class="CodeMirror-gutter-background CodeMirror-activeline-gutter" style="left: 0px; width: 0px;"></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;">MyComponent.define('my-awesome-component')</span></pre></div></div></div></div></div></div><div style="position: absolute; height: 0px; width: 1px; border-bottom: 0px solid transparent; top: 17px;"></div><div class="CodeMirror-gutters" style="display: none; height: 17px;"></div></div></div></pre><h3 id='the-render-function-r-and-thishtml'><span>The render() function, r, and this.html</span></h3><p><span>The </span><code>r</code><span> function, when used as part of a template literal, converts the html and embedded expressions into a data structure. When that data structure is assigned to </span><code>this.html</code><span>, it updates the content of the web component. You can think of this like assigning to the browser's built-in </span><code>this.outerHTML</code><span> property, except in this case instead of replacing all of the content, only the changed elements are replaced, which is much faster.</span></p><p><span>The render() function is called automatically when an element is added to the DOM via </span><a href='https://developer.mozilla.org/en-US/docs/Web/API/Web_components#connectedcallback'><span>connectedCallback()</span></a><span>.</span></p><p><span>Unlike other frameworks Red Component does not re-render automatically when data changes, so you should call the render() function manually as needed. This is a deliberate design choice to reduce "magic," since in some cases you may want to update internal data without rendering.</span></p><p> </p><p><span>Wrapping the web component's html in its tag name is optional. You could instead just assign the html for the child elements to </span><code>this.html</code><span>. But then you will have to set any attributes on your web component some other way.</span></p><pre class="md-fences md-end-block ty-contain-cm modeLoaded" spellcheck="false" lang="javascript" style="break-inside: unset;"><div class="CodeMirror cm-s-inner cm-s-null-scroll CodeMirror-wrap" lang="javascript"><div style="overflow: hidden; position: relative; width: 3px; height: 0px; top: 6.41406px; left: 8px;"><textarea autocorrect="off" autocapitalize="off" spellcheck="false" tabindex="0" style="position: absolute; bottom: -1em; padding: 0px; width: 1000px; height: 1em; outline: none;"></textarea></div><div class="CodeMirror-scrollbar-filler" cm-not-content="true"></div><div class="CodeMirror-gutter-filler" cm-not-content="true"></div><div class="CodeMirror-scroll" tabindex="-1"><div class="CodeMirror-sizer" style="margin-left: 0px; margin-bottom: 0px; border-right-width: 0px; padding-right: 0px; padding-bottom: 0px;"><div style="position: relative; top: 0px;"><div class="CodeMirror-lines" role="presentation"><div role="presentation" style="position: relative; outline: none;"><div class="CodeMirror-measure"><pre><span>xxxxxxxxxx</span></pre></div><div class="CodeMirror-measure"></div><div style="position: relative; z-index: 1;"></div><div class="CodeMirror-code" role="presentation" style=""><div class="CodeMirror-activeline" style="position: relative;"><div class="CodeMirror-activeline-background CodeMirror-linebackground"></div><div class="CodeMirror-gutter-background CodeMirror-activeline-gutter" style="left: 0px; width: 0px;"></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-keyword">import</span> {<span class="cm-def">Solarite</span>, <span class="cm-def">r</span>} <span class="cm-keyword">from</span> <span class="cm-string">'../dist/Solarite.js'</span>;</span></pre></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span cm-text="" cm-zwsp="">
|
|
306
|
+
</span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-keyword">class</span> <span class="cm-def">MyComponent</span> <span class="cm-keyword">extends</span> <span class="cm-variable">Solarite</span> {</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-property">name</span> <span class="cm-operator">=</span> <span class="cm-string">'Solarite'</span>;</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-property">render</span>() { </span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-comment">// With optional element tags:</span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-comment">// this.html = r`<my-component>Hello <b>${this.name}!<b></my-component>`</span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" class="cm-tab-wrap-hack" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-tab" role="presentation" cm-text=" "> </span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-comment">// Without optional element tags:</span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-keyword">this</span>.<span class="cm-property">html</span> <span class="cm-operator">=</span> <span class="cm-variable">r</span><span class="cm-string-2">`Hello <b>${</span><span class="cm-keyword">this</span>.<span class="cm-property">name</span><span class="cm-string-2">}!<b>`</span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text=" "> </span>}</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;">}</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span cm-text="" cm-zwsp="">
|
|
307
|
+
</span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-variable">document</span>.<span class="cm-property">body</span>.<span class="cm-property">append</span>(<span class="cm-keyword">new</span> <span class="cm-variable">MyComponent</span>());</span></pre></div></div></div></div></div><div style="position: absolute; height: 0px; width: 1px; border-bottom: 0px solid transparent; top: 244px;"></div><div class="CodeMirror-gutters" style="display: none; height: 244px;"></div></div></div></pre><p><span>If you do provide the outer tag, its name must exactly match the "dashes" version of the class name, or a custom name if you pass one to </span><code>define()</code><span>.</span></p><h3 id='inheriting-from-existing-dom-elements'><span>Inheriting from existing DOM elements.</span></h3><p><span>Suppose you want to use a custom component for each </span><code><tr></code><span> in a </span><code><table></code><span>. Html won't allow you to put just any element as a child of table or tbody. In this case you can make your web component inherit from the browser's built in </span><code><tr></code><span> element:</span></p><pre class="md-fences md-end-block ty-contain-cm modeLoaded" spellcheck="false" lang="javascript" style="break-inside: unset;"><div class="CodeMirror cm-s-inner cm-s-null-scroll CodeMirror-wrap" lang="javascript"><div style="overflow: hidden; position: relative; width: 3px; height: 0px; top: 6.41406px; left: 8px;"><textarea autocorrect="off" autocapitalize="off" spellcheck="false" tabindex="0" style="position: absolute; bottom: -1em; padding: 0px; width: 1000px; height: 1em; outline: none;"></textarea></div><div class="CodeMirror-scrollbar-filler" cm-not-content="true"></div><div class="CodeMirror-gutter-filler" cm-not-content="true"></div><div class="CodeMirror-scroll" tabindex="-1"><div class="CodeMirror-sizer" style="margin-left: 0px; margin-bottom: 0px; border-right-width: 0px; padding-right: 0px; padding-bottom: 0px;"><div style="position: relative; top: 0px;"><div class="CodeMirror-lines" role="presentation"><div role="presentation" style="position: relative; outline: none;"><div class="CodeMirror-measure"><pre><span>xxxxxxxxxx</span></pre></div><div class="CodeMirror-measure"></div><div style="position: relative; z-index: 1;"></div><div class="CodeMirror-code" role="presentation" style=""><div class="CodeMirror-activeline" style="position: relative;"><div class="CodeMirror-activeline-background CodeMirror-linebackground"></div><div class="CodeMirror-gutter-background CodeMirror-activeline-gutter" style="left: 0px; width: 0px;"></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-keyword">import</span> {<span class="cm-def">Solarite</span>, <span class="cm-def">r</span>} <span class="cm-keyword">from</span> <span class="cm-string">'../dist/Solarite.js'</span>;</span></pre></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span cm-text="" cm-zwsp="">
|
|
308
|
+
</span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-keyword">class</span> <span class="cm-def">LineItem</span> <span class="cm-keyword">extends</span> <span class="cm-variable">Solarite</span>(<span class="cm-string">'tr'</span>) {</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-property">constructor</span>(<span class="cm-def">user</span>) {</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-keyword">super</span>();</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-keyword">this</span>.<span class="cm-property">user</span> <span class="cm-operator">=</span> <span class="cm-variable-2">user</span>;</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text=" "> </span>}</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-tab" role="presentation" cm-text=" "> </span> </span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-property">render</span>() { </span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-keyword">this</span>.<span class="cm-property">html</span> <span class="cm-operator">=</span> <span class="cm-variable">r</span><span class="cm-string-2">`</span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" class="cm-tab-wrap-hack" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-string-2"><tr><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-tab" role="presentation" cm-text=" "> </span> </span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-string-2"><td>${</span><span class="cm-keyword">this</span>.<span class="cm-property">user</span>.<span class="cm-property">name</span><span class="cm-string-2">}</td></span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-string-2"><td>${</span><span class="cm-keyword">this</span>.<span class="cm-property">user</span>.<span class="cm-property">email</span><span class="cm-string-2">}</td></span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-string-2"></tr>`</span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text=" "> </span>}</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;">}</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-variable">LineItem</span>.<span class="cm-property">define</span>();</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span cm-text="" cm-zwsp="">
|
|
309
|
+
</span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-keyword">let</span> <span class="cm-def">table</span> <span class="cm-operator">=</span> <span class="cm-variable">document</span>.<span class="cm-property">createElement</span>(<span class="cm-string">'table'</span>)</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-keyword">for</span> (<span class="cm-keyword">let</span> <span class="cm-def">i</span><span class="cm-operator">=</span><span class="cm-number">0</span>; <span class="cm-variable-2">i</span><span class="cm-operator"><</span><span class="cm-number">10</span>; <span class="cm-variable-2">i</span><span class="cm-operator">++</span>) {</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-keyword">let</span> <span class="cm-def">user</span> <span class="cm-operator">=</span> {<span class="cm-property">name</span>: <span class="cm-string">'User '</span> <span class="cm-operator">+</span> <span class="cm-variable-2">i</span>, <span class="cm-property">email</span>: <span class="cm-string">'user'</span><span class="cm-operator">+</span><span class="cm-variable-2">i</span><span class="cm-operator">+</span><span class="cm-string">'@example.com'</span>};</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-variable">table</span>.<span class="cm-property">append</span>(<span class="cm-keyword">new</span> <span class="cm-variable">LineItem</span>(<span class="cm-variable-2">user</span>));</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;">}</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-variable">document</span>.<span class="cm-property">body</span>.<span class="cm-property">append</span>(<span class="cm-variable">table</span>)</span></pre></div></div></div></div></div><div style="position: absolute; height: 0px; width: 1px; border-bottom: 0px solid transparent; top: 418px;"></div><div class="CodeMirror-gutters" style="display: none; height: 418px;"></div></div></div></pre><h3 id='loops'><span>Loops</span></h3><p><span>Just as in some of the examples above, loops can be written with the build-in </span><a href='https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map'><span>Array.map()</span></a><span> function:</span></p><pre class="md-fences md-end-block ty-contain-cm modeLoaded" spellcheck="false" lang="javascript" style="break-inside: unset;"><div class="CodeMirror cm-s-inner cm-s-null-scroll CodeMirror-wrap" lang="javascript"><div style="overflow: hidden; position: relative; width: 3px; height: 0px; top: 6.41406px; left: 8px;"><textarea autocorrect="off" autocapitalize="off" spellcheck="false" tabindex="0" style="position: absolute; bottom: -1em; padding: 0px; width: 1000px; height: 1em; outline: none;"></textarea></div><div class="CodeMirror-scrollbar-filler" cm-not-content="true"></div><div class="CodeMirror-gutter-filler" cm-not-content="true"></div><div class="CodeMirror-scroll" tabindex="-1"><div class="CodeMirror-sizer" style="margin-left: 0px; margin-bottom: 0px; border-right-width: 0px; padding-right: 0px; padding-bottom: 0px;"><div style="position: relative; top: 0px;"><div class="CodeMirror-lines" role="presentation"><div role="presentation" style="position: relative; outline: none;"><div class="CodeMirror-measure"><pre><span>xxxxxxxxxx</span></pre></div><div class="CodeMirror-measure"></div><div style="position: relative; z-index: 1;"></div><div class="CodeMirror-code" role="presentation" style=""><div class="CodeMirror-activeline" style="position: relative;"><div class="CodeMirror-activeline-background CodeMirror-linebackground"></div><div class="CodeMirror-gutter-background CodeMirror-activeline-gutter" style="left: 0px; width: 0px;"></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-keyword">import</span> {<span class="cm-def">Solarite</span>, <span class="cm-def">r</span>} <span class="cm-keyword">from</span> <span class="cm-string">'../dist/Solarite.js'</span>;</span></pre></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span cm-text="" cm-zwsp="">
|
|
310
|
+
</span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-keyword">class</span> <span class="cm-def">TodoList</span> <span class="cm-keyword">extends</span> <span class="cm-variable">Solarite</span> {</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-property">render</span>() { </span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-keyword">this</span>.<span class="cm-property">html</span> <span class="cm-operator">=</span> <span class="cm-variable">r</span><span class="cm-string-2">`</span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-string-2"><todo-list></span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-string-2">${</span><span class="cm-keyword">this</span>.<span class="cm-property">items</span>.<span class="cm-property">map</span>(<span class="cm-def">item</span> <span class="cm-operator">=></span> </span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-variable">r</span><span class="cm-string-2">`${</span><span class="cm-variable-2">item</span><span class="cm-string-2">}<br>`</span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-tab" role="presentation" cm-text=" "> </span>)<span class="cm-string-2">}</span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-string-2"></todo-list>`</span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text=" "> </span>}</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;">}</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span cm-text="" cm-zwsp="">
|
|
311
|
+
</span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-keyword">let</span> <span class="cm-def">list</span> <span class="cm-operator">=</span> <span class="cm-keyword">new</span> <span class="cm-variable">TodoList</span>();</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-variable">list</span>.<span class="cm-property">items</span> <span class="cm-operator">=</span> [<span class="cm-string">'one'</span>, <span class="cm-string">'two'</span>, <span class="cm-string">'three'</span>];</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-variable">document</span>.<span class="cm-property">body</span>.<span class="cm-property">append</span>(<span class="cm-variable">list</span>); <span class="cm-comment">// calls render() if it hasn't been called already.</span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span cm-text="" cm-zwsp="">
|
|
312
|
+
</span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-variable">list</span>.<span class="cm-property">items</span>[<span class="cm-number">1</span>] <span class="cm-operator">=</span> <span class="cm-string">'2'</span>;</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-variable">list</span>.<span class="cm-property">render</span>();</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span cm-text="" cm-zwsp="">
|
|
313
|
+
</span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-variable">list</span>.<span class="cm-property">items</span>.<span class="cm-property">splice</span>(<span class="cm-number">1</span>, <span class="cm-number">0</span>, <span class="cm-string">'two and a half'</span>);</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-variable">list</span>.<span class="cm-property">render</span>();</span></pre></div></div></div></div></div><div style="position: absolute; height: 0px; width: 1px; border-bottom: 0px solid transparent; top: 378px;"></div><div class="CodeMirror-gutters" style="display: none; height: 378px;"></div></div></div></pre><p><span>Note that nested template literals must also have the </span><code>r</code><span> prefix. Otherwise they'll be rendered as escaped text instead of HTML elements.</span></p><p><span>When we change an element or add another element to the </span><code>items</code><span> list, calling </span><code>render()</code><span> only redraws the changed or new element. The other list items are not modified.</span></p><h3 id='attributes'><span>Attributes</span></h3><p><span>Attributes can be specified by inserting expressions inside a tag. An expression can be part or all of an attribute value, or a string specifying multiple whole attributes. For example:</span></p><pre class="md-fences md-end-block ty-contain-cm modeLoaded" spellcheck="false" lang="javascript" style="break-inside: unset;"><div class="CodeMirror cm-s-inner cm-s-null-scroll CodeMirror-wrap" lang="javascript"><div style="overflow: hidden; position: relative; width: 3px; height: 0px; top: 6.41406px; left: 8px;"><textarea autocorrect="off" autocapitalize="off" spellcheck="false" tabindex="0" style="position: absolute; bottom: -1em; padding: 0px; width: 1000px; height: 1em; outline: none;"></textarea></div><div class="CodeMirror-scrollbar-filler" cm-not-content="true"></div><div class="CodeMirror-gutter-filler" cm-not-content="true"></div><div class="CodeMirror-scroll" tabindex="-1"><div class="CodeMirror-sizer" style="margin-left: 0px; margin-bottom: 0px; border-right-width: 0px; padding-right: 0px; padding-bottom: 0px;"><div style="position: relative; top: 0px;"><div class="CodeMirror-lines" role="presentation"><div role="presentation" style="position: relative; outline: none;"><div class="CodeMirror-measure"><pre><span>xxxxxxxxxx</span></pre></div><div class="CodeMirror-measure"></div><div style="position: relative; z-index: 1;"></div><div class="CodeMirror-code" role="presentation" style=""><div class="CodeMirror-activeline" style="position: relative;"><div class="CodeMirror-activeline-background CodeMirror-linebackground"></div><div class="CodeMirror-gutter-background CodeMirror-activeline-gutter" style="left: 0px; width: 0px;"></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-keyword">import</span> {<span class="cm-def">Solarite</span>, <span class="cm-def">r</span>} <span class="cm-keyword">from</span> <span class="cm-string">'../dist/Solarite.js'</span>;</span></pre></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span cm-text="" cm-zwsp="">
|
|
314
|
+
</span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-keyword">let</span> <span class="cm-def">style</span> <span class="cm-operator">=</span> <span class="cm-string">'width: 100px; height: 40px; background: orange'</span>;</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-keyword">let</span> <span class="cm-def">isEditable</span> <span class="cm-operator">=</span> <span class="cm-atom">true</span>;</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-keyword">let</span> <span class="cm-def">height</span> <span class="cm-operator">=</span> <span class="cm-number">40</span>;</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span cm-text="" cm-zwsp="">
|
|
315
|
+
</span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-keyword">class</span> <span class="cm-def">AttributeDemo</span> <span class="cm-keyword">extends</span> <span class="cm-variable">Solarite</span> {</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-property">render</span>() { </span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-keyword">this</span>.<span class="cm-property">html</span> <span class="cm-operator">=</span> <span class="cm-variable">r</span><span class="cm-string-2">`</span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-string-2"><attribute-demo class="big"></span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" class="cm-tab-wrap-hack" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-tab" role="presentation" cm-text=" "> </span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-string-2"><div style=${</span><span class="cm-variable">style</span><span class="cm-string-2">}>Look at me</div></span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span cm-text="" cm-zwsp="">
|
|
316
|
+
</span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-string-2"><div style="${</span><span class="cm-string">'width: 100px'</span><span class="cm-string-2">}; height: ${</span><span class="cm-variable">height</span><span class="cm-string-2">}px; background: gray">Look at me</div></span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" class="cm-tab-wrap-hack" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-tab" role="presentation" cm-text=" "> </span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-string-2"><div style="width: 100px; height: 40px; background: red" ${</span><span class="cm-string">'title="I have a title"'</span><span class="cm-string-2">}>Hover me</div></span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span cm-text="" cm-zwsp="">
|
|
317
|
+
</span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-string-2"><div style="width: 100px; height: 40px; background: brown" contenteditable=${</span><span class="cm-variable">isEditable</span><span class="cm-string-2">}</span> <span class="cm-string-2">>Edit me</div></span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-string-2"></attribute-demo>`</span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text=" "> </span>}</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;">}</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-variable">document</span>.<span class="cm-property">body</span>.<span class="cm-property">append</span>(<span class="cm-keyword">new</span> <span class="cm-variable">AttributeDemo</span>());</span></pre></div></div></div></div></div><div style="position: absolute; height: 0px; width: 1px; border-bottom: 0px solid transparent; top: 432px;"></div><div class="CodeMirror-gutters" style="display: none; height: 432px;"></div></div></div></pre><p><span>Expressions can also toggle the presence of an attribute. In the last div above, if </span><code>isEditable</code><span> is false, null, or undefined, the contenteditable attribute will be removed.</span></p><p><span>Note that attributes can also be assigned to the root element, such as </span><code>class="big"</code><span> on the </span><code><attribute-demo></code><span> tag above.</span></p><h3 id='events'><span>Events</span></h3><p><span>Listen for events by assigning a function expression to any event attribute. Or by passing an array where the first item is a function and subsequent items are arguments to that function.</span></p><pre class="md-fences md-end-block ty-contain-cm modeLoaded" spellcheck="false" lang="javascript" style="break-inside: unset;"><div class="CodeMirror cm-s-inner cm-s-null-scroll CodeMirror-wrap" lang="javascript"><div style="overflow: hidden; position: relative; width: 3px; height: 0px; top: 6.41406px; left: 8px;"><textarea autocorrect="off" autocapitalize="off" spellcheck="false" tabindex="0" style="position: absolute; bottom: -1em; padding: 0px; width: 1000px; height: 1em; outline: none;"></textarea></div><div class="CodeMirror-scrollbar-filler" cm-not-content="true"></div><div class="CodeMirror-gutter-filler" cm-not-content="true"></div><div class="CodeMirror-scroll" tabindex="-1"><div class="CodeMirror-sizer" style="margin-left: 0px; margin-bottom: 0px; border-right-width: 0px; padding-right: 0px; padding-bottom: 0px;"><div style="position: relative; top: 0px;"><div class="CodeMirror-lines" role="presentation"><div role="presentation" style="position: relative; outline: none;"><div class="CodeMirror-measure"><pre><span>xxxxxxxxxx</span></pre></div><div class="CodeMirror-measure"></div><div style="position: relative; z-index: 1;"></div><div class="CodeMirror-code" role="presentation" style=""><div class="CodeMirror-activeline" style="position: relative;"><div class="CodeMirror-activeline-background CodeMirror-linebackground"></div><div class="CodeMirror-gutter-background CodeMirror-activeline-gutter" style="left: 0px; width: 0px;"></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-keyword">import</span> {<span class="cm-def">Solarite</span>, <span class="cm-def">r</span>} <span class="cm-keyword">from</span> <span class="cm-string">'../dist/Solarite.js'</span>;</span></pre></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span cm-text="" cm-zwsp="">
|
|
318
|
+
</span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-keyword">class</span> <span class="cm-def">EventDemo</span> <span class="cm-keyword">extends</span> <span class="cm-variable">Solarite</span> {</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> <span class="cm-property">showMessage</span>(<span class="cm-def">message</span>) {</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> <span class="cm-variable">alert</span>(<span class="cm-variable-2">message</span>);</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> }</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> </span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-property">render</span>() { </span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-keyword">this</span>.<span class="cm-property">html</span> <span class="cm-operator">=</span> <span class="cm-variable">r</span><span class="cm-string-2">`</span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-string-2"><event-demo></span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-string-2"><div onclick=${</span>()<span class="cm-operator">=></span><span class="cm-variable">alert</span>(<span class="cm-string">'I was clicked!'</span>)<span class="cm-string-2">}>Click me</div></span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-string-2"><div onclick=${</span>[<span class="cm-keyword">this</span>.<span class="cm-property">showMessage</span>, <span class="cm-string">'I too was clicked!'</span>]<span class="cm-string-2">}>Click me</div></span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-string-2"></event-demo>`</span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text=" "> </span>}</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;">}</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-variable">document</span>.<span class="cm-property">body</span>.<span class="cm-property">append</span>(<span class="cm-keyword">new</span> <span class="cm-variable">EventDemo</span>());</span></pre></div></div></div></div></div><div style="position: absolute; height: 0px; width: 1px; border-bottom: 0px solid transparent; top: 276px;"></div><div class="CodeMirror-gutters" style="display: none; height: 276px;"></div></div></div></pre><p><span>Event binding with an array containing a function and its arguments is slightly faster, since when render() is called, Red Component can see that the function hasn't changed, and it doesn't need to be unbound and rebound. But the performance difference is negligible in most cases.</span></p><p><span>Make sure to put your events inside </span><code>${...}</code><span> expressions, because classic events can't reference variables in the current scope.</span></p><h3 id='two-way-binding'><span>Two-Way Binding</span></h3><p><mark><span>TODO: This demo should use auto-rendering</span></mark></p><p><span>Form elements can update the properties that provide their values if an event attribute such as </span><code>oninput</code><span> is assigned the path to a property to update:</span></p><pre class="md-fences md-end-block ty-contain-cm modeLoaded" spellcheck="false" lang="javascript" style="break-inside: unset;"><div class="CodeMirror cm-s-inner cm-s-null-scroll CodeMirror-wrap" lang="javascript"><div style="overflow: hidden; position: relative; width: 3px; height: 0px; top: 6.41406px; left: 8px;"><textarea autocorrect="off" autocapitalize="off" spellcheck="false" tabindex="0" style="position: absolute; bottom: -1em; padding: 0px; width: 1000px; height: 1em; outline: none;"></textarea></div><div class="CodeMirror-scrollbar-filler" cm-not-content="true"></div><div class="CodeMirror-gutter-filler" cm-not-content="true"></div><div class="CodeMirror-scroll" tabindex="-1"><div class="CodeMirror-sizer" style="margin-left: 0px; margin-bottom: 0px; border-right-width: 0px; padding-right: 0px; padding-bottom: 0px;"><div style="position: relative; top: 0px;"><div class="CodeMirror-lines" role="presentation"><div role="presentation" style="position: relative; outline: none;"><div class="CodeMirror-measure"><pre><span>xxxxxxxxxx</span></pre></div><div class="CodeMirror-measure"></div><div style="position: relative; z-index: 1;"></div><div class="CodeMirror-code" role="presentation" style=""><div class="CodeMirror-activeline" style="position: relative;"><div class="CodeMirror-activeline-background CodeMirror-linebackground"></div><div class="CodeMirror-gutter-background CodeMirror-activeline-gutter" style="left: 0px; width: 0px;"></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-keyword">import</span> {<span class="cm-def">Solarite</span>, <span class="cm-def">r</span>} <span class="cm-keyword">from</span> <span class="cm-string">'../dist/Solarite.js'</span>;</span></pre></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span cm-text="" cm-zwsp="">
|
|
319
|
+
</span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-keyword">class</span> <span class="cm-def">BindingDemo</span> <span class="cm-keyword">extends</span> <span class="cm-variable">Solarite</span> {</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> </span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-property">constructor</span>() {</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-keyword">super</span>();</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> <span class="cm-keyword">this</span>.<span class="cm-property">count</span> <span class="cm-operator">=</span> <span class="cm-number">0</span>;</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> <span class="cm-comment">// autoRender(this, 'count');</span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> }</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> </span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-property">render</span>() { </span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-keyword">this</span>.<span class="cm-property">html</span> <span class="cm-operator">=</span> <span class="cm-variable">r</span><span class="cm-string-2">`</span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-string-2"><binding-demo></span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-string-2"><input type="number" value=${</span><span class="cm-keyword">this</span>.<span class="cm-property">count</span><span class="cm-string-2">}</span> <span class="cm-string-2">oninput=${</span>[<span class="cm-keyword">this</span>, <span class="cm-string">'count'</span>]<span class="cm-string-2">}></span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-string-2"><pre>count is ${</span><span class="cm-keyword">this</span>.<span class="cm-property">count</span><span class="cm-string-2">}</pre></span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-string-2"><button onclick=${</span>()<span class="cm-operator">=></span><span class="cm-keyword">this</span>.<span class="cm-property">count</span><span class="cm-operator">=</span><span class="cm-number">0</span><span class="cm-string-2">}>Reset</button></span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-string-2"></binding-demo>`</span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text=" "> </span>}</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;">}</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-variable">document</span>.<span class="cm-property">body</span>.<span class="cm-property">append</span>(<span class="cm-keyword">new</span> <span class="cm-variable">BindingDemo</span>());</span></pre></div></div></div></div></div><div style="position: absolute; height: 0px; width: 1px; border-bottom: 0px solid transparent; top: 347px;"></div><div class="CodeMirror-gutters" style="display: none; height: 347px;"></div></div></div></pre><p><span>In addition to </span><code><input></code><span>, </span><code><select></code><span> and </span><code><textarea></code><span> can also use the </span><code>value</code><span> attribute to set their value on render. Likewise so can any custom web components that define a </span><code>value</code><span> property.</span></p><h3 id='ids'><span>Ids</span></h3><p><span>Any element in the html with an </span><code>id</code><span> or </span><code>data-id</code><span> attribute is automatically bound to a property with the same name on the root element. But this only happens after </span><code>render()</code><span> is first called:</span></p><pre class="md-fences md-end-block ty-contain-cm modeLoaded" spellcheck="false" lang="javascript" style="break-inside: unset;"><div class="CodeMirror cm-s-inner cm-s-null-scroll CodeMirror-wrap" lang="javascript"><div style="overflow: hidden; position: relative; width: 3px; height: 0px; top: 6.41406px; left: 8px;"><textarea autocorrect="off" autocapitalize="off" spellcheck="false" tabindex="0" style="position: absolute; bottom: -1em; padding: 0px; width: 1000px; height: 1em; outline: none;"></textarea></div><div class="CodeMirror-scrollbar-filler" cm-not-content="true"></div><div class="CodeMirror-gutter-filler" cm-not-content="true"></div><div class="CodeMirror-scroll" tabindex="-1"><div class="CodeMirror-sizer" style="margin-left: 0px; margin-bottom: 0px; border-right-width: 0px; padding-right: 0px; padding-bottom: 0px;"><div style="position: relative; top: 0px;"><div class="CodeMirror-lines" role="presentation"><div role="presentation" style="position: relative; outline: none;"><div class="CodeMirror-measure"><pre><span>xxxxxxxxxx</span></pre></div><div class="CodeMirror-measure"></div><div style="position: relative; z-index: 1;"></div><div class="CodeMirror-code" role="presentation" style=""><div class="CodeMirror-activeline" style="position: relative;"><div class="CodeMirror-activeline-background CodeMirror-linebackground"></div><div class="CodeMirror-gutter-background CodeMirror-activeline-gutter" style="left: 0px; width: 0px;"></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-keyword">import</span> {<span class="cm-def">Solarite</span>, <span class="cm-def">r</span>} <span class="cm-keyword">from</span> <span class="cm-string">'../dist/Solarite.js'</span>;</span></pre></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span cm-text="" cm-zwsp="">
|
|
320
|
+
</span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-keyword">class</span> <span class="cm-def">RaceTeam</span> <span class="cm-keyword">extends</span> <span class="cm-variable">Solarite</span> {</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> <span class="cm-property">constructor</span>() {</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> <span class="cm-keyword">super</span>();</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> </span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> <span class="cm-comment">// Id's are not set until render() is first called.</span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> <span class="cm-keyword">this</span>.<span class="cm-property">render</span>();</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> </span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> <span class="cm-comment">// No need to render() again since we're changing the DOM manually.</span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> <span class="cm-keyword">this</span>.<span class="cm-property">driver</span>.<span class="cm-property">value</span> <span class="cm-operator">=</span> <span class="cm-string">'Mario'</span>; </span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> }</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> </span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-property">render</span>() { <span class="cm-keyword">this</span>.<span class="cm-property">html</span> <span class="cm-operator">=</span> <span class="cm-variable">r</span><span class="cm-string-2">`</span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-string-2"><race-team></span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> <span class="cm-string-2"><input id="driver" value="Vermin Supreme"></span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> <span class="cm-string-2"><div data-id="car">Cutlas Supreme</div></span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> <span class="cm-string-2"><div data-id="instructor.name">Lightning McQueen</div></span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> <span class="cm-string-2"></race-team>`</span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text=" "> </span>}</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;">}</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-keyword">let</span> <span class="cm-def">rt</span> <span class="cm-operator">=</span> <span class="cm-keyword">new</span> <span class="cm-variable">RaceTeam</span>();</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-variable">document</span>.<span class="cm-property">body</span>.<span class="cm-property">append</span>(<span class="cm-variable">rt</span>);</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-variable">rt</span>.<span class="cm-property">car</span>.<span class="cm-property">style</span>.<span class="cm-property">border</span> <span class="cm-operator">=</span> <span class="cm-string">'1px solid green'</span>;</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span cm-text="" cm-zwsp="">
|
|
321
|
+
</span></span></pre></div></div></div></div></div><div style="position: absolute; height: 0px; width: 1px; border-bottom: 0px solid transparent; top: 424px;"></div><div class="CodeMirror-gutters" style="display: none; height: 424px;"></div></div></div></pre><p><span>Ids that match built-in HTMLElement attribute names such as </span><code>title</code><span> or </span><code>disabled</code><span> are not allowed.</span></p><h3 id='scoped-styles'><span>Scoped Styles</span></h3><p><span>Html with </span><code>style</code><span> elements will be rewritten so that the </span><code>:host</code><span> selector applies to the root element. This allows an element to specify styles that will apply only to itself and its children, while still inheriting styles from the rest of the document.</span></p><p><span>These local, "scoped" styles are implemented by:</span></p><ol start='' ><li><p><span>Adding a </span><code>data-style</code><span> attribute to the root element with a unique, incrementing id value.</span></p></li><li><p><span>Replacing any </span><code>:host</code><span> selectors inside the style with </span><code>element-name[data-style="1"]</code><span>. For example the </span><code>:host</code><span> selector below becomes </span><code>fancy-text[data-style="1"]</code><span>.</span></p></li></ol><pre class="md-fences md-end-block ty-contain-cm modeLoaded" spellcheck="false" lang="javascript" style="break-inside: unset;"><div class="CodeMirror cm-s-inner cm-s-null-scroll CodeMirror-wrap" lang="javascript"><div style="overflow: hidden; position: relative; width: 3px; height: 0px; top: 6.41406px; left: 8px;"><textarea autocorrect="off" autocapitalize="off" spellcheck="false" tabindex="0" style="position: absolute; bottom: -1em; padding: 0px; width: 1000px; height: 1em; outline: none;"></textarea></div><div class="CodeMirror-scrollbar-filler" cm-not-content="true"></div><div class="CodeMirror-gutter-filler" cm-not-content="true"></div><div class="CodeMirror-scroll" tabindex="-1"><div class="CodeMirror-sizer" style="margin-left: 0px; margin-bottom: 0px; border-right-width: 0px; padding-right: 0px; padding-bottom: 0px;"><div style="position: relative; top: 0px;"><div class="CodeMirror-lines" role="presentation"><div role="presentation" style="position: relative; outline: none;"><div class="CodeMirror-measure"><pre><span>xxxxxxxxxx</span></pre></div><div class="CodeMirror-measure"></div><div style="position: relative; z-index: 1;"></div><div class="CodeMirror-code" role="presentation" style=""><div class="CodeMirror-activeline" style="position: relative;"><div class="CodeMirror-activeline-background CodeMirror-linebackground"></div><div class="CodeMirror-gutter-background CodeMirror-activeline-gutter" style="left: 0px; width: 0px;"></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-keyword">import</span> {<span class="cm-def">Solarite</span>, <span class="cm-def">r</span>} <span class="cm-keyword">from</span> <span class="cm-string">'../dist/Solarite.js'</span>;</span></pre></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span cm-text="" cm-zwsp="">
|
|
322
|
+
</span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-keyword">class</span> <span class="cm-def">FancyText</span> <span class="cm-keyword">extends</span> <span class="cm-variable">Solarite</span> {</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-property">render</span>() { </span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> <span class="cm-keyword">return</span> <span class="cm-variable">r</span><span class="cm-string-2">`</span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> <span class="cm-string-2"><fancy-text></span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> <span class="cm-string-2"><style></span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> <span class="cm-string-2">:host { border: 10px dashed red } /* style for <fancy-text> */</span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> <span class="cm-string-2">:host p { text-shadow: 0 0 5px orange } </span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> <span class="cm-string-2"></style></span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> <span class="cm-string-2"><p>I have a red border and shadow!</p></span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> <span class="cm-string-2"></fancy-text>`</span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text=" "> </span>}</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;">}</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-variable">document</span>.<span class="cm-property">body</span>.<span class="cm-property">append</span>(<span class="cm-keyword">new</span> <span class="cm-variable">FancyText</span>());</span></pre></div></div></div></div></div><div style="position: absolute; height: 0px; width: 1px; border-bottom: 0px solid transparent; top: 254px;"></div><div class="CodeMirror-gutters" style="display: none; height: 254px;"></div></div></div></pre><p><span>Note that if shadown-dom is used, the element will not rewrite the </span><code>:host</code><span> selector in styles, as browsers natively support the </span><code>:host</code><span> selector when inside shadow DOM.</span></p><h3 id='sub-components'><span>Sub Components</span></h3><p><span>And constructors</span></p><p><span>Calling render() on a parent component will call it on sub-components too.</span></p><h3 id='slots'><span>Slots</span></h3><h3 id='the-r-function'><span>The r() function</span></h3><h3 id='classless-elements'><span>Classless Elements</span></h3><h3 id='watches-experimental'><span>Watches (Experimental)</span></h3><h2 id='reference'><span>Reference</span></h2><h2 id='how-it-works'><span>How it works</span></h2><p><span>Suppose you're looping over an array of 100 objects and printing them to a list or table. Something like this:</span></p><pre class="md-fences md-end-block ty-contain-cm modeLoaded" spellcheck="false" lang="html2"><div class="CodeMirror cm-s-inner cm-s-null-scroll CodeMirror-wrap" lang="html2"><div style="overflow: hidden; position: relative; width: 3px; height: 0px; top: 6.41406px; left: 8px;"><textarea autocorrect="off" autocapitalize="off" spellcheck="false" tabindex="0" style="position: absolute; bottom: -1em; padding: 0px; width: 1000px; height: 1em; outline: none;"></textarea></div><div class="CodeMirror-scrollbar-filler" cm-not-content="true"></div><div class="CodeMirror-gutter-filler" cm-not-content="true"></div><div class="CodeMirror-scroll" tabindex="-1"><div class="CodeMirror-sizer" style="margin-left: 0px; margin-bottom: 0px; border-right-width: 0px; padding-right: 0px; padding-bottom: 0px;"><div style="position: relative; top: 0px;"><div class="CodeMirror-lines" role="presentation"><div role="presentation" style="position: relative; outline: none;"><div class="CodeMirror-measure"><pre><span>xxxxxxxxxx</span></pre></div><div class="CodeMirror-measure"></div><div style="position: relative; z-index: 1;"></div><div class="CodeMirror-code" role="presentation" style=""><div class="CodeMirror-activeline" style="position: relative;"><div class="CodeMirror-activeline-background CodeMirror-linebackground"></div><div class="CodeMirror-gutter-background CodeMirror-activeline-gutter" style="left: 0px; width: 0px;"></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> <ul></span></pre></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text=" "> </span> ${tasks().map((task, index) => (</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text=" "> </span> <li key={index} class={task.completed ? "completed" : ""}></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-tab" role="presentation" cm-text=" "> </span> <input</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-tab" role="presentation" cm-text=" "> </span>type="checkbox"</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-tab" role="presentation" cm-text=" "> </span>checked={task.completed}</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-tab" role="presentation" cm-text=" "> </span>onChange={() => toggleTask(index)}</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-tab" role="presentation" cm-text=" "> </span> /></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-tab" role="presentation" cm-text=" "> </span> {task.text}</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-tab" role="presentation" cm-text=" "> </span> <button onClick={() => deleteTask(index)}>Delete</button></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text=" "> </span> </li></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text=" "> </span> ))}</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"></ul></span></pre></div></div></div></div></div><div style="position: absolute; height: 0px; width: 1px; border-bottom: 0px solid transparent; top: 230px;"></div><div class="CodeMirror-gutters" style="display: none; height: 230px;"></div></div></div></pre><p><span>The code gets the array of raw strings created by tasks.map() using a template literal function. Then it creates a hash of each of those. Then it compares those hashes with the hashes from the last time rendering happened, and only update elements associated with the changed hashes.</span></p><h2 id='differences-from-other-libraries'><span>Differences from other Libraries</span></h2><h3 id='react'><span>React</span></h3><h3 id='litjs'><span>Lit.js</span></h3><h3 id='solidjs'><span>Solid.js</span></h3></div></div>
|
|
323
|
+
|
|
324
|
+
<script>(function(){function e(e,n,i){document.addEventListener(e,function(e){if(!e.defaultPrevented)for(var t=e.target;t&&t!=this;t=t.parentNode)if(t.matches(n)){!1===i.call(t,e)&&(e.preventDefault(),e.stopPropagation());break}},!1)}var t=document.body.parentElement,i=[],r=null,o=document.body.classList.contains("typora-export-collapse-outline");function a(){return t.scrollTop}e("click",".outline-expander",function(e){var t=this.closest(".outline-item-wrapper").classList;return t.contains("outline-item-open")?t.remove("outline-item-open"):t.add("outline-item-open"),u(),!1}),e("click",".outline-item",function(e){var t=this.querySelector(".outline-label");location.hash="#"+t.getAttribute("href"),o&&((t=this.closest(".outline-item-wrapper").classList).contains("outline-item-open")||t.add("outline-item-open"),d(),t.add("outline-item-active"))});function s(){var e=a();r=null;for(var t=0;t<i.length&&i[t][1]-e<60;t++)r=i[t]}function n(){c=setTimeout(function(){var n;i=[],n=a(),document.querySelector("#write").querySelectorAll("h1, h2, h3, h4, h5, h6").forEach(e=>{var t=e.getAttribute("id");i.push([t,n+e.getBoundingClientRect().y])}),s(),u()},300)}var l,c,d=function(){document.querySelectorAll(".outline-item-active").forEach(e=>e.classList.remove("outline-item-active")),document.querySelectorAll(".outline-item-single.outline-item-open").forEach(e=>e.classList.remove("outline-item-open"))},u=function(){if(r&&(d(),t=document.querySelector('.outline-label[href="#'+(CSS.escape?CSS.escape(r[0]):r[0])+'"]')))if(o){var e=t.closest(".outline-item-open>ul>.outline-item-wrapper");if(e)e.classList.add("outline-item-active");else{for(var t,n=(t=t.closest(".outline-item-wrapper")).parentElement.closest(".outline-item-wrapper");n;)n=(t=n).parentElement.closest(".outline-item-wrapper");t.classList.add("outline-item-active")}}else t.closest(".outline-item-wrapper").classList.add("outline-item-active")};window.addEventListener("scroll",function(e){l&&clearTimeout(l),l=setTimeout(function(){s(),u()},300)});window.addEventListener("resize",function(e){c&&clearTimeout(c),n()}),n()})();</script></body>
|
|
325
|
+
</html>
|