calendar

26.4 KB

1. // The View walker — realm-neutral: the same code renders HTML on the server and
2. // (compiled to JS) creates or claims DOM in the browser. It walks a TREE, the
3. // syntax of a View member reflected into plain hybrids by the server (see
4. // server.hl `tree()`), against an INSTANCE whose members supply the values.
5. //
6. // Tree node shapes:
7. // { k = 'el' tag key path = [ keys… ] site attrs = [ { name text } | { name member } ] children = [ … ] }
8. // `site` is `file:line:col` of the literal — the id its class is minted under
9. // `tag` is what the DOM gets (a custom key kebab-cased), `key` the source key
10. // { k = 'text' text }
11. // { k = 'member' name } an ordered entry naming a member of the class — a SITE
12. // { k = 'field' name path } `p.title`: a path off a member or a `for` row variable
13. // { k = 'for' row list body } `for (row of list) { … }`, body rendered per entry
14. // { k = 'if' cond then other } `if (cond) { … } else { … }`
15. // { k = 'on' event } a DOM event the owning literal handles (its inline `on`)
16. // { k = 'component' cls key path bindings ons } `Child { count = count on done(v) { … } }`:
17. // a composed component — its own mount renders here
18. // { k = 'other' tag } a construct this round does not render yet (if / for / on)
19. //
20. // `ctx` rides through every call: `ctx.slot` is the HTML a shell's `slot` member
21. // stands for (null when rendering a page alone), `ctx.kids` the child mounts of
22. // the instance being rendered, keyed by the component node's path joined with
23. // '/'. A component node renders ITS mount: its own instance, its own kids.
25. // THE HTML ELEMENTS. An entry whose key is one of these is that element; any other
26. // key is a CUSTOM element and is written kebab-case (`postsList` → `<posts-list>`),
27. // which is also what a Style rule of that name selects. This list is what §4 calls
28. // "the compiler's own View element list": one list, so a tag rule in a styles file
29. // and a tag in a View can never disagree.
30. static tags = [
31. 'a' 'abbr' 'address' 'article' 'aside' 'audio' 'b' 'bdi' 'bdo' 'blockquote' 'body' 'br' 'button'
32. 'canvas' 'caption' 'cite' 'code' 'col' 'colgroup' 'data' 'datalist' 'dd' 'del' 'details' 'dfn'
33. 'dialog' 'div' 'dl' 'dt' 'em' 'embed' 'fieldset' 'figcaption' 'figure' 'footer' 'form'
34. 'h1' 'h2' 'h3' 'h4' 'h5' 'h6' 'head' 'header' 'hgroup' 'hr' 'html' 'i' 'iframe' 'img' 'input'
35. 'ins' 'kbd' 'label' 'legend' 'li' 'link' 'main' 'map' 'mark' 'menu' 'meta' 'meter' 'nav'
36. 'noscript' 'object' 'ol' 'optgroup' 'option' 'output' 'p' 'picture' 'pre' 'progress' 'q' 'rp'
37. 'rt' 'ruby' 's' 'samp' 'script' 'search' 'section' 'select' 'slot' 'small' 'source' 'span'
38. 'strong' 'style' 'sub' 'summary' 'sup' 'table' 'tbody' 'td' 'template' 'textarea' 'tfoot'
39. 'th' 'thead' 'time' 'title' 'tr' 'track' 'u' 'ul' 'var' 'video' 'wbr' 'svg' 'path' 'circle'
40. 'rect' 'line' 'polyline' 'polygon' 'g' 'text' 'use' 'defs' 'symbol'
41. ]
43. // a form control with a `value` the app binds (a member or a field path), and no
44. // autocomplete of the author's own
45. boundValue(&node) {
46. if (node.tag != 'input' && node.tag != 'textarea' && node.tag != 'select') { return false }
47. let bound = false
48. for (a of node.attrs) {
49. if (a.name == 'autocomplete') { return false }
50. if (a.name == 'value' && (a.member != null || a.ref != null)) { bound = true }
51. }
52. return bound
53. }
55. // the value an option reports to the form: its `value`, or null when it has none
56. // and its text stands for it
57. optionValue(&node, &page, &rows) {
58. for (a of node.attrs) {
59. if (a.name == 'value') {
60. if (a.member != null) { return '' + value({ k = 'member'; name = a.member; }, page, rows) }
61. if (a.ref != null) { return '' + value(a.ref, page, rows) }
62. return '' + a.text
63. }
64. }
65. return null
66. }
68. // ---- THE ELEMENTS THE BROWSER'S PARSER INSERTS ----------------------------------
69. // HTML has elements whose START TAG IS OPTIONAL: a `tr` written straight inside a
70. // `table` is parsed into a `tbody` the parser creates, a `td` outside a `tr` gets both,
71. // and a `col` gets a `colgroup`. The served tree and the PARSED tree have to be the same
72. // tree — the claim walk pairs them element for element — so the tree carries what the
73. // parser would insert and the author goes on writing `table { tr { td { … } } }`.
74. // (Measured 2026-09-14 on demo-nested: 38 rows, 38 "claim: no element for tr under
75. // TABLE", one per row; the fix in the app was to write the `tbody` by hand.)
76. //
77. // One row per (parent, child) pair the standard's optional-tag rules name. The walk
78. // applies them REPEATEDLY, so a `td` under a `table` gains a `tbody` and then a `tr`
79. // inside it — what the parser does, and not a table special case: a pair added to this
80. // list is a pair the language then renders the way the browser will read it.
81. static impliedElements = [
82. { under = 'table' child = 'tr' wrap = 'tbody' }
83. { under = 'table' child = 'td' wrap = 'tbody' }
84. { under = 'table' child = 'th' wrap = 'tbody' }
85. { under = 'table' child = 'col' wrap = 'colgroup' }
86. { under = 'tbody' child = 'td' wrap = 'tr' }
87. { under = 'tbody' child = 'th' wrap = 'tr' }
88. { under = 'thead' child = 'td' wrap = 'tr' }
89. { under = 'thead' child = 'th' wrap = 'tr' }
90. { under = 'tfoot' child = 'td' wrap = 'tr' }
91. { under = 'tfoot' child = 'th' wrap = 'tr' }
92. ]
94. // the container the parser would open for this child under this parent, or null
95. impliedWrap(under, child) {
96. if (child == null) { return null }
97. for (r of impliedElements) { if (r.under == under && r.child == child) { return r.wrap } }
98. return null
99. }
101. // THE TAG A NODE PUTS IN THE DOCUMENT: an element's own, and for a `for` or an `if` the
102. // tag of the first element it renders — a region of `tr`s under a `table` needs the
103. // `tbody` a bare `tr` needs, and it is the same rule that says so.
104. firstTag(&n) {
105. if (n == null) { return null }
106. if (n.k == 'el') { return n.tag }
107. if (n.k == 'for') { return firstTagIn(n.body) }
108. if (n.k == 'if') {
109. let t = firstTagIn(n.then)
110. return t == null ? firstTagIn(n.other) : t
111. }
112. return null
113. }
115. firstTagIn(&list) {
116. if (list == null) { return null }
117. for (n of list) {
118. let t = firstTag(n)
119. if (t != null) { return t }
120. }
121. return null
122. }
124. // an element's children with those containers written out. A RUN of children that need
125. // the same one SHARES it, because the parser opens one `tbody` and goes on putting rows
126. // in it until something else closes it.
127. implied(under, children, path, site) {
128. let out = []
129. let run = []
130. let runWrap = null
131. for (c of children) {
132. let w = impliedWrap(under, firstTag(c))
133. if (w != runWrap && run.length > 0) {
134. out.push(impliedNode(runWrap, run, path, site))
135. run = []
136. }
137. runWrap = w
138. if (w == null) { out.push(c) } else { run.push(c) }
139. }
140. if (run.length > 0) { out.push(impliedNode(runWrap, run, path, site)) }
141. return out
142. }
144. // the node for a container nobody wrote: no attributes, no handlers, and the rule
145. // applied again inside it (`table { td }` is `table > tbody > tr > td`)
146. impliedNode(tag, children, path, site) {
147. let here = path.slice(0)
148. here.push(tag)
149. return { k = 'el'; tag = tag; key = tag; path = here; attrs = []; children = implied(tag, children, here, site + '>' + tag); site = site + '>' + tag; }
150. }
152. static voidTags = [ 'area' 'base' 'br' 'col' 'embed' 'hr' 'img' 'input' 'link' 'meta' 'source' 'track' 'wbr' ]
154. // THE VERBATIM ELEMENTS: whitespace between their tags is CONTENT, not layout. A
155. // textarea's text IS its value, and a `pre`, a `script` and a `style` show or run
156. // exactly what stands there — so the readable form never indents inside them
157. // (the creator, 2026-09-13: "textarea seems to show the indentation as value").
158. static verbatimTags = [ 'textarea' 'pre' 'script' 'style' ]
160. isTag(name) {
161. return tags.includes(name)
162. }
164. // camelCase → kebab-case (the archived WebView.kebab, verbatim): a separator only
165. // BETWEEN a lowercase letter or digit and an uppercase one; at position 0, after
166. // another uppercase or after a sigil an uppercase simply lowercases, so `ChatForm`
167. // is `chat-form` and `#Svg` is `#svg`. The tag written on a custom element and the
168. // selector a Style rule emits both come through here, so they cannot disagree.
169. static KEBAB_JOINERS = "-_#@"
170. kebab(name) {
171. let out = ''
172. let i = 0
173. let prev = ''
174. while (i < name.length) {
175. let c = name.charAt(i)
176. let lower = c.toLowerCase()
177. let between = prev != '' && prev == prev.toLowerCase() && KEBAB_JOINERS.indexOf(prev) < 0
178. if (c != lower && between) { out = out + '-' + lower } else { out = out + lower }
179. prev = c
180. i = i + 1
181. }
182. return out
183. }
185. // THE TAG-PREFIX STRIP (archived WebView.className, verbatim): rule `headerMain`
186. // referenced under `header` is class `main`; under any other tag it keeps its name.
187. className(rule, tag) {
188. if (rule.length <= tag.length) { return rule }
189. if (!rule.startsWith(tag)) { return rule }
190. let rest = rule.slice(tag.length)
191. let head = rest.charAt(0)
192. if (head == head.toLowerCase()) { return rule }
193. return head.toLowerCase() + rest.slice(1)
194. }
196. // THE PER-FILE CLASS of a `#local` rule (archived WebView.localClass, verbatim):
197. // four characters out of the file's project-relative key, so it is stable across
198. // checkouts and a golden can pin it. Every local rule of one file shares it; the
199. // element's tag in front of it keeps them apart in the sheet (`svg.ma31`).
200. static LOCAL_KEY_CHARS = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789/._-"
201. static LOCAL_LETTERS = "abcdefghijklmnopqrstuvwxyz"
202. static LOCAL_ALPHA = "abcdefghijklmnopqrstuvwxyz0123456789"
203. localClass(fileKey) {
204. let h = 0
205. let i = 0
206. while (i < fileKey.length) {
207. h = (h * 31 + LOCAL_KEY_CHARS.indexOf(fileKey.charAt(i)) + 1) % 1000003
208. i = i + 1
209. }
210. let out = LOCAL_LETTERS.charAt(h % 26)
211. let rest = (h - (h % 26)) / 26
212. let j = 0
213. while (j < 3) {
214. out = out + LOCAL_ALPHA.charAt(rest % 36)
215. rest = (rest - (rest % 36)) / 36
216. j = j + 1
217. }
218. return out
219. }
221. // the language has no escapes: a newline and a tab are written as themselves
222. static newline = "
223. "
224. static tab = " "
226. // a component node's key in a mount's `kids`: its path, '/'-joined (a list has no
227. // join in the language; the walk is written out)
228. kidKey(&path) {
229. let out = ''
230. for (p of path) { out = out + '/' + p }
231. return out
232. }
234. // THE KEY OF ONE ROW'S CHILD: the component node's path plus the index of every
235. // enclosing `for` iteration, which `ctx.rowKey` carries down the walk. Outside
236. // every `for` the rowKey is empty and this is the plain path key.
237. kidKeyIn(&path, &ctx) {
238. return kidKey(path) + (ctx.rowKey != null ? ctx.rowKey : '')
239. }
241. // THE KEY OF ONE ROW — "lists are keyed by the record's id" (CONCEPT §2), and by
242. // the row's index where the row is not a record or carries no id (a list of strings
243. // is one: demo-blog's paragraphs). ONE rule, called by everything that has to tell
244. // one row from the next: the server's HTML walk below, the mount key of a row's
245. // children (WebFramework `mountKids`), and the browser's keyed region (client.hl).
246. // Two rows with the SAME id are two rows to the language and one key to this rule;
247. // the browser's region gives the second one a key of its own, the server does not.
248. rowKey(&entry, i) {
249. if (entry != null) {
250. let t = hlTypeName(entry)
251. if ((t == 'Hybrid' || t == 'Instance') && entry.id != null) { return '' + entry.id }
252. }
253. return '' + i
254. }
256. // the walking context of one `for` iteration: the same slot and kids, one row deeper
257. rowCtx(&ctx, &entry, i) {
258. let out = ctx + {}
259. out.rowKey = (ctx.rowKey != null ? ctx.rowKey : '') + '#' + rowKey(entry, i)
260. return out
261. }
263. // A LITERAL'S VALUE, TYPED — COMPONENTS.md §12, "typed, not stringified". `hlSyntax`
264. // hands a literal back as its source text and its KIND, and a reference binding carries
265. // the value rather than the text: `Level2 { n = 1 }` gives the child a Number, so `n * 97`
266. // is arithmetic and not "operator '*' does not apply to String and Number" (measured
267. // 2026-09-14, demo-nested wall 3). An attribute and a text child keep the text, because
268. // HTML is text; only what crosses into a member of another class is typed.
269. literalValue(kind, text) {
270. if (kind == 'number') { return toNumber(text) }
271. if (kind == 'boolean') { return text == 'true' }
272. if (kind == 'null_literal') { return null }
273. return text
274. }
276. // THE VALUE A REFERENCE BINDING CARRIES when it is a literal or a folded static — the
277. // one place the two are read, so the server's mount and the browser's do it alike. A
278. // static is folded to its VALUE and carried as one ('folded'), never printed and parsed
279. // back; a literal carries its source text and its kind, which is all the syntax has.
280. refValue(b) {
281. if (b.kind == 'folded') { return b.value }
282. if (b.kind != null) { return literalValue(b.kind, b.text) }
283. return b.text
284. }
286. // HTML BOOLEAN ATTRIBUTES MEAN PRESENCE, NOT VALUE (mission 084's rule, ticket #33): a
287. // parser reads `disabled="false"` as DISABLED, so a bound one is written ` disabled=""`
288. // when its value is on and left out when it is off, and the browser sets or removes it
289. // and writes the property. The list is mission 084's, the one the archived SSR, graph and
290. // client agreed on.
291. static boolAttrs = ['checked' 'disabled' 'selected' 'readonly' 'required' 'multiple' 'open' 'hidden']
293. isBoolAttr(name) {
294. return boolAttrs.includes(name)
295. }
297. // is a boolean attribute ON for this value? false, null, '' and 0 leave it off — what the
298. // browser's own `!!v` says, so the server's markup and the client's write agree
299. boolOn(val) {
300. if (val == null || val == false || val == '') { return false }
301. if (hlTypeName(val) == 'Number' && val == 0) { return false }
302. return true
303. }
305. escape(s) {
306. if (s == null) { return '' }
307. // EVERY occurrence, not the first: `replace` stops after one, so a value with two
308. // quotes in it ("a" "b") left the second one raw in the attribute it was written into
309. return ('' + s).replaceAll('&', '&amp;').replaceAll('<', '&lt;').replaceAll('>', '&gt;').replaceAll('"', '&quot;')
310. }
312. // THE VALUE a read names: a `for` row variable in scope wins over a member of the
313. // same name (nesting is scope); a field path walks into it.
314. value(&node, &page, &rows) {
315. let v = null
316. if (rows[node.name] != null) { v = rows[node.name] } else { v = page[node.name] }
317. if (node.k == 'field') {
318. for (f of node.path) {
319. if (v == null) { return null }
320. v = v[f]
321. }
322. }
323. return v
324. }
326. // THE BIG VALUES OF THE WALK ARE TAKEN BY REFERENCE, and this is the whole of why the
327. // server's render was slow (mission 312 wall 2, measured 2026-09-15). A METHOD CALL
328. // DEEP-COPIES ITS ARGUMENTS — a lambda call does not, which is why this went unseen —
329. // so every one of these calls copied the page INSTANCE and the `ctx` holding every
330. // child mount of the page, once per element and once per read. The cost of rendering
331. // one element was therefore proportional to everything the page was holding: a 43-row
332. // table beside 120 components took 9.6 s, the same table alone 0.44 s, and a page whose
333. // instance merely HELD 30 000 objects nobody renders took 34 s for 344 static elements.
334. // Nothing in this walk writes through `page`, `rows` or `ctx` — `kidCtx`, `inner` and
335. // `rowCtx`'s result are locals it copies on purpose — so a reference is the same walk,
336. // and the `&` at a call site is optional, so every caller (client.hl included) is
337. // unchanged. Measured after: 0.57 s, 1.27 s, 0.12 s for the three cases above.
338. //
339. // HTML of one node. `page` is the instance; `rows` the `for` variables in scope;
340. // `ctx` carries the slot's HTML and the child mounts. `indent` is the current line's
341. // indentation (a string of tabs) for the readable form, or null for the compact
342. // one-line form (the production setting). Whitespace is only ever placed BETWEEN
343. // elements: an element that carries text or a member value stays on one line, so
344. // its text content is exactly what the author wrote and hydration finds it so.
345. html(&node, &page, &rows, &ctx, indent) {
346. if (node.k == 'text') { return escape(node.text) }
347. if (node.k == 'on') { return '' } // the browser binds it
348. if (node.k == 'member' || node.k == 'field') {
349. if (node.k == 'member' && node.name == 'slot' && ctx.slot != null) { return ctx.slot }
350. return escape(value(node, page, rows))
351. }
352. if (node.k == 'for') {
353. let out = ''
354. let list = value(node.list, page, rows)
355. if (list == null) { return '' }
356. let ri = 0
357. for (entry of list) {
358. let inner = rows + {}
359. inner[node.row] = entry
360. out = out + render(node.body, page, inner, rowCtx(ctx, entry, ri), indent)
361. ri = ri + 1
362. }
363. return out
364. }
365. if (node.k == 'if') {
366. if (value(node.cond, page, rows)) { return render(node.then, page, rows, ctx, indent) }
367. return render(node.other, page, rows, ctx, indent)
368. }
369. if (node.k == 'component') {
370. let kid = ctx.kids[kidKeyIn(node.path, ctx)]
371. if (kid == null) { return '<!-- ' + node.cls + ' not mounted -->' }
372. // THE FILL IS RENDERED HERE, IN THE HOST'S FRAME — the host's instance, the
373. // host's `for` rows, the host's own child mounts — and handed to the child as
374. // its `slot`, exactly as the shell is handed the page it wraps. The child
375. // never evaluates it; it only places it.
376. return render(withRootClasses(kid.view, node.classes), kid.page, {}, { slot = fillHtml(node, page, rows, ctx); kids = kid.kids; }, indent)
377. }
378. if (node.k == 'el') {
379. let attrs = ''
380. // HTML GIVES A TEXTAREA NO `value` ATTRIBUTE: what stands between its tags is
381. // its value, so a bound one is written there — the server-rendered control
382. // already shows what the member holds, before any script runs.
383. let valueText = null
384. // AND A SELECT NO `value` ATTRIBUTE EITHER: what it shows is the option marked
385. // `selected`, so a bound value is carried down to the options (`childCtx.sel`)
386. // and marks the matching one. A `value` written on the select itself means
387. // nothing to the browser, which then shows the FIRST option — and hydration's
388. // two-way read then wrote that first option back into the member (measured
389. // 2026-09-13 on demo-blog: a published post's editor said "Draft", and saving
390. // unpublished it).
391. let selValue = null
392. for (a of node.attrs) {
393. if (node.tag == 'textarea' && a.name == 'value') {
394. // not an attribute: it is written below, as the element's content
395. if (a.member != null) { valueText = escape(value({ k = 'member'; name = a.member; }, page, rows)) }
396. else if (a.ref != null) { valueText = escape(value(a.ref, page, rows)) }
397. else { valueText = escape(a.text) }
398. } else if (node.tag == 'select' && a.name == 'value') {
399. // not an attribute: it selects an option below
400. if (a.member != null) { selValue = '' + value({ k = 'member'; name = a.member; }, page, rows) }
401. else if (a.ref != null) { selValue = '' + value(a.ref, page, rows) }
402. else { selValue = '' + a.text }
403. } else if (isBoolAttr(a.name) && (a.member != null || a.ref != null)) {
404. if (boolOn(value(a.member != null ? { k = 'member'; name = a.member; } : a.ref, page, rows))) { attrs = attrs + ' ' + a.name + '=""' }
405. } else if (a.member != null) {
406. attrs = attrs + ' ' + a.name + '="' + escape(value({ k = 'member'; name = a.member; }, page, rows)) + extraOf(a) + '"'
407. } else if (a.ref != null) {
408. attrs = attrs + ' ' + a.name + '="' + escape(value(a.ref, page, rows)) + extraOf(a) + '"'
409. } else {
410. attrs = attrs + ' ' + a.name + '="' + escape(a.text) + '"'
411. }
412. }
413. // A CONTROL WHOSE VALUE THE APP BINDS IS THE APP'S: the browser must neither
414. // autofill it nor restore a remembered value over it on reload (Chrome restores
415. // unnamed text inputs by type and document order, so a remembered value lands
416. // on whichever input now stands at that position — measured by the creator
417. // 2026-09-13: "Gamma" in the add field after Ctrl+R)
418. if (boundValue(node)) { attrs = attrs + ' autocomplete="off"' }
419. // THE CONTEXT IS NEVER COPIED INTO A LOCAL HERE. `let kidCtx = ctx` costs a copy
420. // of everything the frame holds — every child mount of this page — and it stood
421. // on the path of EVERY element: with the 43-row matrix in a page of 121
422. // components it was 5.1 s against 0.6 s for the same two halves apart (measured
423. // 2026-09-15, mission 312 wall 2). A select is the only node that changes the
424. // context for its children, so it is the only branch that builds one.
425. let children = ''
426. if (node.tag == 'select') {
427. // the select's value walks down to its options, however deep the `for` or the
428. // `if` that builds them stands
429. let kidCtx = ctx + {}
430. kidCtx.sel = selValue
431. children = kidsHtml(node, page, rows, kidCtx, indent)
432. } else {
433. children = kidsHtml(node, page, rows, ctx, indent)
434. }
435. // the textarea's value stands where its content stands
436. if (valueText != null) { children = valueText }
437. // THE OPTION THE SELECT SHOWS: the one whose value is the member's. An option
438. // with no `value` reports its text, as the browser reads it.
439. if (node.tag == 'option' && ctx.sel != null) {
440. let ov = optionValue(node, page, rows)
441. if (ov == null) { ov = children }
442. if (ov == ctx.sel) { attrs = attrs + ' selected' }
443. }
444. // a void element has no end tag (the HTML standard's list; the claim walks
445. // elements, so the browser's parse of either form agrees with the tree)
446. if (voidTags.includes(node.tag)) { return '<' + node.tag + attrs + '>' }
447. return '<' + node.tag + attrs + '>' + children + '</' + node.tag + '>'
448. }
449. return '<!-- ' + node.tag + ' not rendered yet -->'
450. }
452. // AN ELEMENT'S CHILDREN, in the readable form or the compact one — split out of `html`
453. // so that the one node which changes the context for its children (a select, which hands
454. // its value down to its options) is the only one that builds a context at all.
455. kidsHtml(&node, &page, &rows, &ctx, indent) {
456. if (indent != null && blocky(node, ctx)) {
457. return block(node.children, page, rows, ctx, indent + tab) + newline + indent
458. }
459. let out = ''
460. for (c of node.children) { out = out + html(c, page, rows, ctx, null) }
461. return out
462. }
464. // The HTML a reference's fill stands for, or null when the reference fills nothing
465. // (a bare `Card`, or `Card { }`) — then the child's `slot` renders as the member it
466. // is, which is nothing.
467. //
468. // COMPACT, whatever form the page is rendered in: this frame is the HOST's, and the
469. // indentation of the line the child places `slot` on is decided inside the child,
470. // one frame further down. Whitespace between elements is not content and the claim
471. // walk steps ELEMENTS, so a fill that is written on one line is claimed the same.
472. fillHtml(&node, &page, &rows, &ctx) {
473. if (node.fill == null || node.fill.length == 0) { return null }
474. return render(node.fill, page, rows, ctx, null)
475. }
477. // AN ELEMENT'S CHILDREN MINUS THE HANDLERS A REFERENCE OVERWROTE. COMPONENTS.md:757
478. // — "a same-named event binding on the reference overwrites the child root's own": the
479. // reference's `on click` REPLACES the child root's `on click`, it does not stand beside
480. // it, so the child's own entry for that event is never bound on that element.
481. withoutOns(&nodes, &ons) {
482. let out = []
483. for (n of nodes) {
484. let overwritten = false
485. for (o of ons) { if (n.k == 'on' && o.event == n.event) { overwritten = true } }
486. if (!overwritten) { out.push(n) }
487. }
488. return out
489. }
491. // THE CLASSES A REFERENCE PUTS ON THE CHILD'S ROOT, appended to a class the child
492. // BINDS (`button { class = tone }`): the bound value is only known at render, so the
493. // extra classes ride beside it and every writer of that attribute appends them —
494. // here, and in the browser's create and repaint. Before this the merge handled only a
495. // LITERAL class, and a child root that bound its own came out with TWO class
496. // attributes, of which a browser keeps the first — so the host's `#Child` class
497. // silently did nothing (measured 2026-09-13 on press.hl's `button { class = tone }`).
498. extraOf(a) {
499. if (a.extra == null) { return '' }
500. return ' ' + a.extra
501. }
503. // A composed child's ROOT elements carry the classes the host's `#Child` local rule
504. // put on the reference: the child's tree is shared, so the roots are copied with
505. // the class merged in, and the child's own tree is untouched.
506. withRootClasses(&nodes, &classes) {
507. if (classes == null || classes.length == 0) { return nodes }
508. let out = []
509. for (n of nodes) {
510. if (n.k == 'el') {
511. let attrs = []
512. let merged = false
513. for (a of n.attrs) {
514. if (a.name == 'class' && a.text != null) { attrs.push({ name = 'class'; text = a.text + ' ' + joinClasses(classes); }) merged = true }
515. else if (a.name == 'class') { attrs.push({ name = 'class'; member = a.member; ref = a.ref; extra = joinClasses(classes); }) merged = true }
516. else { attrs.push(a) }
517. }
518. if (!merged) { attrs.push({ name = 'class'; text = joinClasses(classes); }) }
519. out.push({ k = 'el'; tag = n.tag; key = n.key; path = n.path; attrs = attrs; children = n.children; site = n.site; })
520. } else { out.push(n) }
521. }
522. return out
523. }
525. joinClasses(classes) {
526. let out = ''
527. for (c of classes) { out = out == '' ? c : out + ' ' + c }
528. return out
529. }
531. // Does this element hold only elements (and control flow around them)? Then its
532. // children may each take a line. A text or member child makes it inline. The
533. // shell's `slot` counts as an element: the child page stands there as a block.
534. blocky(&node, &ctx) {
535. if (verbatimTags.includes(node.tag)) { return false }
536. if (node.children.length == 0) { return false }
537. for (c of node.children) {
538. if (c.k == 'text' || c.k == 'field') { return false }
539. if (c.k == 'member' && !(c.name == 'slot' && ctx.slot != null)) { return false }
540. }
541. return true
542. }
544. // Elements one per line at `indent`; `for` and `if` unfold into lines at the same
545. // level. Anything else that appears here renders inline at the end of the run.
546. block(&nodes, &page, &rows, &ctx, indent) {
547. let out = ''
548. for (n of nodes) {
549. if (n.k == 'el') {
550. out = out + newline + indent + html(n, page, rows, ctx, indent)
551. } else if (n.k == 'component') {
552. out = out + html(n, page, rows, ctx, indent)
553. } else if (n.k == 'for') {
554. let list = value(n.list, page, rows)
555. if (list != null) {
556. let ri = 0
557. for (entry of list) {
558. let inner = rows + {}
559. inner[n.row] = entry
560. out = out + block(n.body, page, inner, rowCtx(ctx, entry, ri), indent)
561. ri = ri + 1
562. }
563. }
564. } else if (n.k == 'if') {
565. if (value(n.cond, page, rows)) { out = out + block(n.then, page, rows, ctx, indent) }
566. else { out = out + block(n.other, page, rows, ctx, indent) }
567. } else if (n.k == 'member' && n.name == 'slot' && ctx.slot != null) {
568. out = out + newline + indent + ctx.slot
569. } else if (n.k != 'on') {
570. out = out + html(n, page, rows, ctx, indent)
571. }
572. }
573. return out
574. }
576. // HTML of a whole View tree (a list of nodes), compact when `indent` is null
577. render(&nodes, &page, &rows, &ctx, indent) {
578. if (indent != null) { return block(nodes, page, rows, ctx, indent) }
579. let out = ''
580. for (n of nodes) { out = out + html(n, page, rows, ctx, null) }
581. return out
582. }