tracker

29.0 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' 'ellipse' 'stop' 'tspan'
41. 'feBlend' 'feColorMatrix' 'feComposite' 'feFlood' 'feGaussianBlur' 'feMerge' 'feMergeNode'
42. 'feOffset' 'feTurbulence' 'feDropShadow' 'feMorphology' 'feImage' 'feTile'
43. 'feComponentTransfer' 'feFuncR' 'feFuncG' 'feFuncB' 'feFuncA' 'feConvolveMatrix'
44. 'feDiffuseLighting' 'feSpecularLighting' 'feDisplacementMap' 'feDistantLight' 'fePointLight'
45. 'feSpotLight' 'linearGradient' 'radialGradient' 'clipPath' 'textPath' 'foreignObject'
46. 'animateMotion' 'animateTransform'
47. ]
49. // a form control with a `value` the app binds (a member or a field path), and no
50. // autocomplete of the author's own
51. boundValue(&node) {
52. if (node.tag != 'input' && node.tag != 'textarea' && node.tag != 'select') { return false }
53. let bound = false
54. for (a of node.attrs) {
55. if (a.name == 'autocomplete') { return false }
56. if (a.name == 'value' && (a.member != null || a.ref != null)) { bound = true }
57. }
58. return bound
59. }
61. // the value an option reports to the form: its `value`, or null when it has none
62. // and its text stands for it
63. optionValue(&node, &page, &rows) {
64. for (a of node.attrs) {
65. if (a.name == 'value') {
66. if (a.member != null) { return '' + value({ k = 'member'; name = a.member; }, page, rows) }
67. if (a.ref != null) { return '' + value(a.ref, page, rows) }
68. return '' + a.text
69. }
70. }
71. return null
72. }
74. // ---- THE ELEMENTS THE BROWSER'S PARSER INSERTS ----------------------------------
75. // HTML has elements whose START TAG IS OPTIONAL: a `tr` written straight inside a
76. // `table` is parsed into a `tbody` the parser creates, a `td` outside a `tr` gets both,
77. // and a `col` gets a `colgroup`. The served tree and the PARSED tree have to be the same
78. // tree — the claim walk pairs them element for element — so the tree carries what the
79. // parser would insert and the author goes on writing `table { tr { td { … } } }`.
80. // (Measured 2026-09-14 on demo-nested: 38 rows, 38 "claim: no element for tr under
81. // TABLE", one per row; the fix in the app was to write the `tbody` by hand.)
82. //
83. // One row per (parent, child) pair the standard's optional-tag rules name. The walk
84. // applies them REPEATEDLY, so a `td` under a `table` gains a `tbody` and then a `tr`
85. // inside it — what the parser does, and not a table special case: a pair added to this
86. // list is a pair the language then renders the way the browser will read it.
87. static impliedElements = [
88. { under = 'table' child = 'tr' wrap = 'tbody' }
89. { under = 'table' child = 'td' wrap = 'tbody' }
90. { under = 'table' child = 'th' wrap = 'tbody' }
91. { under = 'table' child = 'col' wrap = 'colgroup' }
92. { under = 'tbody' child = 'td' wrap = 'tr' }
93. { under = 'tbody' child = 'th' wrap = 'tr' }
94. { under = 'thead' child = 'td' wrap = 'tr' }
95. { under = 'thead' child = 'th' wrap = 'tr' }
96. { under = 'tfoot' child = 'td' wrap = 'tr' }
97. { under = 'tfoot' child = 'th' wrap = 'tr' }
98. ]
100. // the container the parser would open for this child under this parent, or null
101. impliedWrap(under, child) {
102. if (child == null) { return null }
103. for (r of impliedElements) { if (r.under == under && r.child == child) { return r.wrap } }
104. return null
105. }
107. // THE TAG A NODE PUTS IN THE DOCUMENT: an element's own, and for a `for` or an `if` the
108. // tag of the first element it renders — a region of `tr`s under a `table` needs the
109. // `tbody` a bare `tr` needs, and it is the same rule that says so.
110. firstTag(&n) {
111. if (n == null) { return null }
112. if (n.k == 'el') { return n.tag }
113. if (n.k == 'for') { return firstTagIn(n.body) }
114. if (n.k == 'if') {
115. let t = firstTagIn(n.then)
116. return t == null ? firstTagIn(n.other) : t
117. }
118. return null
119. }
121. firstTagIn(&list) {
122. if (list == null) { return null }
123. for (n of list) {
124. let t = firstTag(n)
125. if (t != null) { return t }
126. }
127. return null
128. }
130. // an element's children with those containers written out. A RUN of children that need
131. // the same one SHARES it, because the parser opens one `tbody` and goes on putting rows
132. // in it until something else closes it.
133. implied(under, children, path, site) {
134. let out = []
135. let run = []
136. let runWrap = null
137. for (c of children) {
138. let w = impliedWrap(under, firstTag(c))
139. if (w != runWrap && run.length > 0) {
140. out.push(impliedNode(runWrap, run, path, site))
141. run = []
142. }
143. runWrap = w
144. if (w == null) { out.push(c) } else { run.push(c) }
145. }
146. if (run.length > 0) { out.push(impliedNode(runWrap, run, path, site)) }
147. return out
148. }
150. // the node for a container nobody wrote: no attributes, no handlers, and the rule
151. // applied again inside it (`table { td }` is `table > tbody > tr > td`)
152. impliedNode(tag, children, path, site) {
153. let here = path.slice(0)
154. here.push(tag)
155. return { k = 'el'; tag = tag; key = tag; path = here; attrs = []; children = implied(tag, children, here, site + '>' + tag); site = site + '>' + tag; }
156. }
158. static voidTags = [ 'area' 'base' 'br' 'col' 'embed' 'hr' 'img' 'input' 'link' 'meta' 'source' 'track' 'wbr' ]
160. // THE VERBATIM ELEMENTS: whitespace between their tags is CONTENT, not layout. A
161. // textarea's text IS its value, and a `pre`, a `script` and a `style` show or run
162. // exactly what stands there — so the readable form never indents inside them
163. // (the creator, 2026-09-13: "textarea seems to show the indentation as value").
164. static verbatimTags = [ 'textarea' 'pre' 'script' 'style' ]
166. isTag(name) {
167. return tags.includes(name)
168. }
170. // the tag the DOM gets: an element of the list keeps its spelling (SVG has camelCase
171. // elements: `linearGradient`, `clipPath`, `foreignObject`), any other key is custom, kebab-case
172. domTag(name) {
173. return tags.includes(name) ? name : kebab(name)
174. }
176. // camelCase → kebab-case (the archived WebView.kebab, verbatim): a separator only
177. // BETWEEN a lowercase letter or digit and an uppercase one; at position 0, after
178. // another uppercase or after a sigil an uppercase simply lowercases, so `ChatForm`
179. // is `chat-form` and `#Svg` is `#svg`. The tag written on a custom element and the
180. // selector a Style rule emits both come through here, so they cannot disagree.
181. static KEBAB_JOINERS = "-_#@"
182. kebab(name) {
183. let out = ''
184. let i = 0
185. let prev = ''
186. while (i < name.length) {
187. let c = name.charAt(i)
188. let lower = c.toLowerCase()
189. let between = prev != '' && prev == prev.toLowerCase() && KEBAB_JOINERS.indexOf(prev) < 0
190. if (c != lower && between) { out = out + '-' + lower } else { out = out + lower }
191. prev = c
192. i = i + 1
193. }
194. return out
195. }
197. // THE TAG-PREFIX STRIP (archived WebView.className, verbatim): rule `headerMain`
198. // referenced under `header` is class `main`; under any other tag it keeps its name.
199. className(rule, tag) {
200. if (rule.length <= tag.length) { return rule }
201. if (!rule.startsWith(tag)) { return rule }
202. let rest = rule.slice(tag.length)
203. let head = rest.charAt(0)
204. if (head == head.toLowerCase()) { return rule }
205. return head.toLowerCase() + rest.slice(1)
206. }
208. // THE PER-FILE CLASS of a `#local` rule (archived WebView.localClass, verbatim):
209. // four characters out of the file's project-relative key, so it is stable across
210. // checkouts and a golden can pin it. Every local rule of one file shares it; the
211. // element's tag in front of it keeps them apart in the sheet (`svg.ma31`).
212. static LOCAL_KEY_CHARS = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789/._-"
213. static LOCAL_LETTERS = "abcdefghijklmnopqrstuvwxyz"
214. static LOCAL_ALPHA = "abcdefghijklmnopqrstuvwxyz0123456789"
215. localClass(fileKey) {
216. let h = 0
217. let i = 0
218. while (i < fileKey.length) {
219. h = (h * 31 + LOCAL_KEY_CHARS.indexOf(fileKey.charAt(i)) + 1) % 1000003
220. i = i + 1
221. }
222. let out = LOCAL_LETTERS.charAt(h % 26)
223. let rest = (h - (h % 26)) / 26
224. let j = 0
225. while (j < 3) {
226. out = out + LOCAL_ALPHA.charAt(rest % 36)
227. rest = (rest - (rest % 36)) / 36
228. j = j + 1
229. }
230. return out
231. }
233. // the language has no escapes: a newline and a tab are written as themselves
234. static newline = "
235. "
236. static tab = " "
238. // a component node's key in a mount's `kids`: its path, '/'-joined (a list has no
239. // join in the language; the walk is written out)
240. kidKey(&path) {
241. let out = ''
242. for (p of path) { out = out + '/' + p }
243. return out
244. }
246. // THE KEY OF ONE ROW'S CHILD: the component node's path plus the index of every
247. // enclosing `for` iteration, which `ctx.rowKey` carries down the walk. Outside
248. // every `for` the rowKey is empty and this is the plain path key.
249. kidKeyIn(&path, &ctx) {
250. return kidKey(path) + (ctx.rowKey != null ? ctx.rowKey : '')
251. }
253. // THE KEY OF ONE ROW — "lists are keyed by the record's id" (CONCEPT §2), and by
254. // the row's index where the row is not a record or carries no id (a list of strings
255. // is one: demo-blog's paragraphs). ONE rule, called by everything that has to tell
256. // one row from the next: the server's HTML walk below, the mount key of a row's
257. // children (WebFramework `mountKids`), and the browser's keyed region (client.hl).
258. // Two rows with the SAME id are two rows to the language and one key to this rule;
259. // the browser's region gives the second one a key of its own, the server does not.
260. rowKey(&entry, i) {
261. if (entry != null) {
262. let t = hlTypeName(entry)
263. if ((t == 'Hybrid' || t == 'Instance') && entry.id != null) { return '' + entry.id }
264. }
265. return '' + i
266. }
268. // the walking context of one `for` iteration: the same slot and kids, one row deeper
269. rowCtx(&ctx, &entry, i) {
270. let out = ctx + {}
271. out.rowKey = (ctx.rowKey != null ? ctx.rowKey : '') + '#' + rowKey(entry, i)
272. return out
273. }
275. // A LITERAL'S VALUE, TYPED — COMPONENTS.md §12, "typed, not stringified". `hlSyntax`
276. // hands a literal back as its source text and its KIND, and a reference binding carries
277. // the value rather than the text: `Level2 { n = 1 }` gives the child a Number, so `n * 97`
278. // is arithmetic and not "operator '*' does not apply to String and Number" (measured
279. // 2026-09-14, demo-nested wall 3). An attribute and a text child keep the text, because
280. // HTML is text; only what crosses into a member of another class is typed.
281. literalValue(kind, text) {
282. if (kind == 'number') { return toNumber(text) }
283. if (kind == 'boolean') { return text == 'true' }
284. if (kind == 'null_literal') { return null }
285. return text
286. }
288. // THE VALUE A REFERENCE BINDING CARRIES when it is a literal or a folded static — the
289. // one place the two are read, so the server's mount and the browser's do it alike. A
290. // static is folded to its VALUE and carried as one ('folded'), never printed and parsed
291. // back; a literal carries its source text and its kind, which is all the syntax has.
292. refValue(b) {
293. if (b.kind == 'folded') { return b.value }
294. if (b.kind != null) { return literalValue(b.kind, b.text) }
295. return b.text
296. }
298. // HTML BOOLEAN ATTRIBUTES MEAN PRESENCE, NOT VALUE (mission 084's rule, ticket #33): a
299. // parser reads `disabled="false"` as DISABLED, so a bound one is written ` disabled=""`
300. // when its value is on and left out when it is off, and the browser sets or removes it
301. // and writes the property. The list is mission 084's, the one the archived SSR, graph and
302. // client agreed on.
303. static boolAttrs = ['checked' 'disabled' 'selected' 'readonly' 'required' 'multiple' 'open' 'hidden']
305. isBoolAttr(name) {
306. return boolAttrs.includes(name)
307. }
309. // is a boolean attribute ON for this value? false, null, '' and 0 leave it off — what the
310. // browser's own `!!v` says, so the server's markup and the client's write agree
311. boolOn(val) {
312. if (val == null || val == false || val == '') { return false }
313. if (hlTypeName(val) == 'Number' && val == 0) { return false }
314. return true
315. }
317. escape(s) {
318. if (s == null) { return '' }
319. // EVERY occurrence, not the first: `replace` stops after one, so a value with two
320. // quotes in it ("a" "b") left the second one raw in the attribute it was written into
321. return ('' + s).replaceAll('&', '&amp;').replaceAll('<', '&lt;').replaceAll('>', '&gt;').replaceAll('"', '&quot;')
322. }
324. // THE VALUE a read names: a `for` row variable in scope wins over a member of the
325. // same name (nesting is scope); a field path walks into it.
326. value(&node, &page, &rows) {
327. if (node.k == 'text') { return refValue(node) }
328. if (node.k == 'expr') { return evalExpr(node.x, page, rows) }
329. let v = null
330. if (rows[node.name] != null) { v = rows[node.name] } else { v = page[node.name] }
331. if (node.k == 'field') {
332. for (f of node.path) {
333. if (v == null) { return null }
334. v = v[f]
335. }
336. }
337. return v
338. }
340. // A VIEW EXPRESSION (`p { "x" + n }`, `a - b`, `n > 3 ? 'big' : 'small'`) is evaluated by
341. // the LANGUAGE'S OWN OPERATORS: this walk only picks the operator the author wrote and
342. // applies it, so what `+` gives null and a string, what `==` says of two types, what `&&`
343. // returns — all of it is the runtime's answer, on the server (the interpreter or a
344. // binary) and in the browser (the client target), and hl:web has no rule of its own.
345. // The leaves are reads (`value`) and literals. `&&`, `||` and `?:` evaluate what they
346. // pick only, as the language does.
347. evalExpr(&x, &page, &rows) {
348. if (x.k == 'bin') {
349. let l = evalExpr(x.l, page, rows)
350. let op = x.op
351. if (op == 'logical_and') { return l && evalExpr(x.r, page, rows) }
352. if (op == 'logical_or') { return l || evalExpr(x.r, page, rows) }
353. let r = evalExpr(x.r, page, rows)
354. if (op == 'add') { return l + r }
355. if (op == 'subtract') { return l - r }
356. if (op == 'multiply') { return l * r }
357. if (op == 'divide') { return l / r }
358. if (op == 'modulo') { return l % r }
359. if (op == 'equal') { return l == r }
360. if (op == 'not_equal') { return l != r }
361. if (op == 'less_than') { return l < r }
362. if (op == 'greater_than') { return l > r }
363. if (op == 'less_equal') { return l <= r }
364. if (op == 'greater_equal') { return l >= r }
365. if (op == 'bit_and') { return l & r }
366. if (op == 'bit_or') { return l | r }
367. if (op == 'bit_xor') { return l ^ r }
368. if (op == 'shift_left') { return l << r }
369. return l >> r
370. }
371. if (x.k == 'un') {
372. let o = evalExpr(x.x, page, rows)
373. if (x.op == 'logical_not') { return !o }
374. if (x.op == 'negate') { return -o }
375. return ~o
376. }
377. if (x.k == 'cond') { return evalExpr(x.c, page, rows) ? evalExpr(x.a, page, rows) : evalExpr(x.b, page, rows) }
378. return value(x, page, rows)
379. }
381. // THE BIG VALUES OF THE WALK ARE TAKEN BY REFERENCE, and this is the whole of why the
382. // server's render was slow (mission 312 wall 2, measured 2026-09-15). A METHOD CALL
383. // DEEP-COPIES ITS ARGUMENTS — a lambda call does not, which is why this went unseen —
384. // so every one of these calls copied the page INSTANCE and the `ctx` holding every
385. // child mount of the page, once per element and once per read. The cost of rendering
386. // one element was therefore proportional to everything the page was holding: a 43-row
387. // table beside 120 components took 9.6 s, the same table alone 0.44 s, and a page whose
388. // instance merely HELD 30 000 objects nobody renders took 34 s for 344 static elements.
389. // Nothing in this walk writes through `page`, `rows` or `ctx` — `kidCtx`, `inner` and
390. // `rowCtx`'s result are locals it copies on purpose — so a reference is the same walk,
391. // and the `&` at a call site is optional, so every caller (client.hl included) is
392. // unchanged. Measured after: 0.57 s, 1.27 s, 0.12 s for the three cases above.
393. //
394. // HTML of one node. `page` is the instance; `rows` the `for` variables in scope;
395. // `ctx` carries the slot's HTML and the child mounts. `indent` is the current line's
396. // indentation (a string of tabs) for the readable form, or null for the compact
397. // one-line form (the production setting). Whitespace is only ever placed BETWEEN
398. // elements: an element that carries text or a member value stays on one line, so
399. // its text content is exactly what the author wrote and hydration finds it so.
400. html(&node, &page, &rows, &ctx, indent) {
401. if (node.k == 'text') { return escape(node.text) }
402. if (node.k == 'on') { return '' } // the browser binds it
403. if (node.k == 'member' || node.k == 'field' || node.k == 'expr') {
404. if (node.k == 'member' && node.name == 'slot' && ctx.slot != null) { return ctx.slot }
405. return escape(value(node, page, rows))
406. }
407. if (node.k == 'for') {
408. let out = ''
409. let list = value(node.list, page, rows)
410. if (list == null) { return '' }
411. let ri = 0
412. for (entry of list) {
413. let inner = rows + {}
414. inner[node.row] = entry
415. out = out + render(node.body, page, inner, rowCtx(ctx, entry, ri), indent)
416. ri = ri + 1
417. }
418. return out
419. }
420. if (node.k == 'if') {
421. if (value(node.cond, page, rows)) { return render(node.then, page, rows, ctx, indent) }
422. return render(node.other, page, rows, ctx, indent)
423. }
424. if (node.k == 'component') {
425. let kid = ctx.kids[kidKeyIn(node.path, ctx)]
426. if (kid == null) { return '<!-- ' + node.cls + ' not mounted -->' }
427. // THE FILL IS RENDERED HERE, IN THE HOST'S FRAME — the host's instance, the
428. // host's `for` rows, the host's own child mounts — and handed to the child as
429. // its `slot`, exactly as the shell is handed the page it wraps. The child
430. // never evaluates it; it only places it.
431. return render(withRootClasses(kid.view, node.classes), kid.page, {}, { slot = fillHtml(node, page, rows, ctx); kids = kid.kids; }, indent)
432. }
433. if (node.k == 'el') {
434. let attrs = ''
435. // HTML GIVES A TEXTAREA NO `value` ATTRIBUTE: what stands between its tags is
436. // its value, so a bound one is written there — the server-rendered control
437. // already shows what the member holds, before any script runs.
438. let valueText = null
439. // AND A SELECT NO `value` ATTRIBUTE EITHER: what it shows is the option marked
440. // `selected`, so a bound value is carried down to the options (`childCtx.sel`)
441. // and marks the matching one. A `value` written on the select itself means
442. // nothing to the browser, which then shows the FIRST option — and hydration's
443. // two-way read then wrote that first option back into the member (measured
444. // 2026-09-13 on demo-blog: a published post's editor said "Draft", and saving
445. // unpublished it).
446. let selValue = null
447. for (a of node.attrs) {
448. if (node.tag == 'textarea' && a.name == 'value') {
449. // not an attribute: it is written below, as the element's content
450. if (a.member != null) { valueText = escape(value({ k = 'member'; name = a.member; }, page, rows)) }
451. else if (a.ref != null) { valueText = escape(value(a.ref, page, rows)) }
452. else { valueText = escape(a.text) }
453. } else if (node.tag == 'select' && a.name == 'value') {
454. // not an attribute: it selects an option below
455. if (a.member != null) { selValue = '' + value({ k = 'member'; name = a.member; }, page, rows) }
456. else if (a.ref != null) { selValue = '' + value(a.ref, page, rows) }
457. else { selValue = '' + a.text }
458. } else if (isBoolAttr(a.name) && (a.member != null || a.ref != null)) {
459. if (boolOn(value(a.member != null ? { k = 'member'; name = a.member; } : a.ref, page, rows))) { attrs = attrs + ' ' + a.name + '=""' }
460. } else if (a.member != null) {
461. attrs = attrs + ' ' + a.name + '="' + escape(value({ k = 'member'; name = a.member; }, page, rows)) + extraOf(a) + '"'
462. } else if (a.ref != null) {
463. attrs = attrs + ' ' + a.name + '="' + escape(value(a.ref, page, rows)) + extraOf(a) + '"'
464. } else {
465. attrs = attrs + ' ' + a.name + '="' + escape(a.text) + '"'
466. }
467. }
468. // A CONTROL WHOSE VALUE THE APP BINDS IS THE APP'S: the browser must neither
469. // autofill it nor restore a remembered value over it on reload (Chrome restores
470. // unnamed text inputs by type and document order, so a remembered value lands
471. // on whichever input now stands at that position — measured by the creator
472. // 2026-09-13: "Gamma" in the add field after Ctrl+R)
473. if (boundValue(node)) { attrs = attrs + ' autocomplete="off"' }
474. // THE CONTEXT IS NEVER COPIED INTO A LOCAL HERE. `let kidCtx = ctx` costs a copy
475. // of everything the frame holds — every child mount of this page — and it stood
476. // on the path of EVERY element: with the 43-row matrix in a page of 121
477. // components it was 5.1 s against 0.6 s for the same two halves apart (measured
478. // 2026-09-15, mission 312 wall 2). A select is the only node that changes the
479. // context for its children, so it is the only branch that builds one.
480. let children = ''
481. if (node.tag == 'select') {
482. // the select's value walks down to its options, however deep the `for` or the
483. // `if` that builds them stands
484. let kidCtx = ctx + {}
485. kidCtx.sel = selValue
486. children = kidsHtml(node, page, rows, kidCtx, indent)
487. } else {
488. children = kidsHtml(node, page, rows, ctx, indent)
489. }
490. // the textarea's value stands where its content stands
491. if (valueText != null) { children = valueText }
492. // THE OPTION THE SELECT SHOWS: the one whose value is the member's. An option
493. // with no `value` reports its text, as the browser reads it.
494. if (node.tag == 'option' && ctx.sel != null) {
495. let ov = optionValue(node, page, rows)
496. if (ov == null) { ov = children }
497. if (ov == ctx.sel) { attrs = attrs + ' selected' }
498. }
499. // a void element has no end tag (the HTML standard's list; the claim walks
500. // elements, so the browser's parse of either form agrees with the tree)
501. if (voidTags.includes(node.tag)) { return '<' + node.tag + attrs + '>' }
502. return '<' + node.tag + attrs + '>' + children + '</' + node.tag + '>'
503. }
504. return '<!-- ' + node.tag + ' not rendered yet -->'
505. }
507. // AN ELEMENT'S CHILDREN, in the readable form or the compact one — split out of `html`
508. // so that the one node which changes the context for its children (a select, which hands
509. // its value down to its options) is the only one that builds a context at all.
510. kidsHtml(&node, &page, &rows, &ctx, indent) {
511. if (indent != null && blocky(node, ctx)) {
512. return block(node.children, page, rows, ctx, indent + tab) + newline + indent
513. }
514. let out = ''
515. for (c of node.children) { out = out + html(c, page, rows, ctx, null) }
516. return out
517. }
519. // The HTML a reference's fill stands for, or null when the reference fills nothing
520. // (a bare `Card`, or `Card { }`) — then the child's `slot` renders as the member it
521. // is, which is nothing.
522. //
523. // COMPACT, whatever form the page is rendered in: this frame is the HOST's, and the
524. // indentation of the line the child places `slot` on is decided inside the child,
525. // one frame further down. Whitespace between elements is not content and the claim
526. // walk steps ELEMENTS, so a fill that is written on one line is claimed the same.
527. fillHtml(&node, &page, &rows, &ctx) {
528. if (node.fill == null || node.fill.length == 0) { return null }
529. return render(node.fill, page, rows, ctx, null)
530. }
532. // AN ELEMENT'S CHILDREN MINUS THE HANDLERS A REFERENCE OVERWROTE. COMPONENTS.md:757
533. // — "a same-named event binding on the reference overwrites the child root's own": the
534. // reference's `on click` REPLACES the child root's `on click`, it does not stand beside
535. // it, so the child's own entry for that event is never bound on that element.
536. withoutOns(&nodes, &ons) {
537. let out = []
538. for (n of nodes) {
539. let overwritten = false
540. for (o of ons) { if (n.k == 'on' && o.event == n.event) { overwritten = true } }
541. if (!overwritten) { out.push(n) }
542. }
543. return out
544. }
546. // THE CLASSES A REFERENCE PUTS ON THE CHILD'S ROOT, appended to a class the child
547. // BINDS (`button { class = tone }`): the bound value is only known at render, so the
548. // extra classes ride beside it and every writer of that attribute appends them —
549. // here, and in the browser's create and repaint. Before this the merge handled only a
550. // LITERAL class, and a child root that bound its own came out with TWO class
551. // attributes, of which a browser keeps the first — so the host's `#Child` class
552. // silently did nothing (measured 2026-09-13 on press.hl's `button { class = tone }`).
553. extraOf(a) {
554. if (a.extra == null) { return '' }
555. return ' ' + a.extra
556. }
558. // A composed child's ROOT elements carry the classes the host's `#Child` local rule
559. // put on the reference: the child's tree is shared, so the roots are copied with
560. // the class merged in, and the child's own tree is untouched.
561. withRootClasses(&nodes, &classes) {
562. if (classes == null || classes.length == 0) { return nodes }
563. let out = []
564. for (n of nodes) {
565. if (n.k == 'el') {
566. let attrs = []
567. let merged = false
568. for (a of n.attrs) {
569. if (a.name == 'class' && a.text != null) { attrs.push({ name = 'class'; text = a.text + ' ' + joinClasses(classes); }) merged = true }
570. else if (a.name == 'class') { attrs.push({ name = 'class'; member = a.member; ref = a.ref; extra = joinClasses(classes); }) merged = true }
571. else { attrs.push(a) }
572. }
573. if (!merged) { attrs.push({ name = 'class'; text = joinClasses(classes); }) }
574. out.push({ k = 'el'; tag = n.tag; key = n.key; path = n.path; attrs = attrs; children = n.children; site = n.site; })
575. } else { out.push(n) }
576. }
577. return out
578. }
580. joinClasses(classes) {
581. let out = ''
582. for (c of classes) { out = out == '' ? c : out + ' ' + c }
583. return out
584. }
586. // Does this element hold only elements (and control flow around them)? Then its
587. // children may each take a line. A text or member child makes it inline. The
588. // shell's `slot` counts as an element: the child page stands there as a block.
589. blocky(&node, &ctx) {
590. if (verbatimTags.includes(node.tag)) { return false }
591. if (node.children.length == 0) { return false }
592. for (c of node.children) {
593. if (c.k == 'text' || c.k == 'field' || c.k == 'expr') { return false }
594. if (c.k == 'member' && !(c.name == 'slot' && ctx.slot != null)) { return false }
595. }
596. return true
597. }
599. // Elements one per line at `indent`; `for` and `if` unfold into lines at the same
600. // level. Anything else that appears here renders inline at the end of the run.
601. block(&nodes, &page, &rows, &ctx, indent) {
602. let out = ''
603. for (n of nodes) {
604. if (n.k == 'el') {
605. out = out + newline + indent + html(n, page, rows, ctx, indent)
606. } else if (n.k == 'component') {
607. out = out + html(n, page, rows, ctx, indent)
608. } else if (n.k == 'for') {
609. let list = value(n.list, page, rows)
610. if (list != null) {
611. let ri = 0
612. for (entry of list) {
613. let inner = rows + {}
614. inner[n.row] = entry
615. out = out + block(n.body, page, inner, rowCtx(ctx, entry, ri), indent)
616. ri = ri + 1
617. }
618. }
619. } else if (n.k == 'if') {
620. if (value(n.cond, page, rows)) { out = out + block(n.then, page, rows, ctx, indent) }
621. else { out = out + block(n.other, page, rows, ctx, indent) }
622. } else if (n.k == 'member' && n.name == 'slot' && ctx.slot != null) {
623. out = out + newline + indent + ctx.slot
624. } else if (n.k != 'on') {
625. out = out + html(n, page, rows, ctx, indent)
626. }
627. }
628. return out
629. }
631. // HTML of a whole View tree (a list of nodes), compact when `indent` is null
632. render(&nodes, &page, &rows, &ctx, indent) {
633. if (indent != null) { return block(nodes, page, rows, ctx, indent) }
634. let out = ''
635. for (n of nodes) { out = out + html(n, page, rows, ctx, null) }
636. return out
637. }