components

117.5 KB

1. // The framework's client half — a file-class constructed ONCE in the browser by
2. // the page's module script, with the seed the server rendered from. The
3. // components are NOT preloaded: each mount carries the url its module is served
4. // at and `hlLoad` fetches it when the mount happens. This file is the client
5. // realm's entrypoint, and the page script sets that realm before constructing
6. // it.
7. //
8. // Its whole job: CLAIM the DOM the server rendered for the mounted instances,
9. // remember which elements read which member (the SITES), repaint a site when a
10. // member is written, and turn a same-origin link into a navigation that fetches
11. // the next route's tree and state and swaps the slot — the shell stays.
12. import View from './view.hl'
13. import Router from './router.hl'
15. seedText = '' // the server's seed, as JSON text (the one construction argument)
16. seed = null // { page: { key module params state view }, shell: … | null }
17. view = new View
18. router = null // the client's route table, from the seed
19. shell = null // { key, instance, view, sites, root }
20. page = null
21. appHead = null // the app's manifest head defaults, off the seed: what a page
22. // member that is null falls back to (title, description, image,
23. // favicon, and the app's own meta list)
24. slotEl = null // the shell element whose children are the route component
25. // WHERE IN IT (ticket #81's finding): the shell's slot may stand beside other elements
26. // of the shell — `body { header { … } slot }` — and the page's nodes are then not all
27. // of slotEl's children. `slotAt` is the index of the page's first element among them,
28. // and `slotStart` the open mark of the region the page is (a page in a shell stands
29. // between two marks like every region), so the page is claimed from the right element
30. // and a navigation replaces what stands between the marks and nothing of the shell's.
31. slotAt = 0
32. slotStart = null
33. detachedSlot = null // the slot element a shell region's rebuild took out of the DOM (see paint)
34. socket = null // the websocket carrier, while it is open
35. retryMs = 500 // the wait before the next reconnect: doubles per failure up to 15 s, reset on open
36. navigating = false // a navigation is running (show); navNext is the one asked for meanwhile
37. navNext = null
38. pinging = false // the ping interval is started once, with the first socket
39. pongDue = null // the timer that takes the socket for dead when its pong is late
40. nextId = 0 // the pairing id an emit's ack comes back on
41. pending = {} // 'k<i>' → the resolver waiting for that ack
42. // AN ANSWER THAT ARRIVES BEFORE ITS PAGE IS MOUNTED (ticket #80). A component's root
43. // runs while `instantiate` constructs it, and an `emit server` there goes out at once
44. // (over REST: the socket opens after boot). What the face raised for this tab comes
45. // back in the ack, before `page` — or, on a navigation, the NEXT page — is the mount
46. // that holds the listener; delivered then, it reached the old mounts or none and was
47. // lost. While a mount is being built the frames wait here, and go out in arrival
48. // order once it stands.
49. mounting = false
50. held = []
51. blueprints = {} // component key → { module, view }: every tree the page can
52. // build, taken from each seed and never dropped (takeBlueprints)
53. strict = false // the gates' client: a repaint that finds a stale site throws (staleSite)
54. painting = 0 // repaints running: 0 when the page stands still (the gates wait for it)
55. turning = false // a patch is running (patch): the ones asked for meanwhile wait in patchQueue
56. patchQueue = []
57. sidNext = 0 // every site's own number, so a repaint can tell one that has left
58. dropGen = 0 // counts the drops of sites (dropSitesIn): a repaint's list is checked again after one
59. pendingDrops = [] // ranges that left holding a host's fill: that host's sites and children in them
60. // go in settle(), once every mount on the walk has been written back
61. pendingFills = [] // fills a region rebuild anchored but could not build in place:
62. // the host is named by address and re-entered in settle() below
63. // THE EVENTS A REFERENCE OVERWROTE ON THE COMPOSITION'S ROOT, while the walk is inside
64. // that composition and has not yet reached an element. A composed child's View may be a
65. // bare reference to another component (routger's dialog-form.hl is one), so the element
66. // that FINALLY stands as the child's root can be any number of references deeper — this
67. // rides down through them and is spent on the first elements the walk claims or builds,
68. // which are exactly those roots.
69. rootOverwrites = null
70. // IS THE PAGE ON THE DOCUMENT? A shell decides per request whether its render contains
71. // a `slot` (COMPONENTS §7, "THE PARENT IS THE GATE"): `if (loggedIn) { main { slot } }`
72. // standing false renders no page at all, and there is then nothing to claim. False here
73. // means there IS no page: the server did not construct it and the seed carries none
74. // (creator, 2026-08-26 — the parent is the gate). It is asked for and constructed when
75. // the region holding the slot turns true, and dropped again when it turns false.
76. pageShown = false
77. pageArrived = false // a region's rebuild constructed the page: its held frames go out after it
78. // THE OFFLINE LAYER (COMPONENTS §10), live only when the seed says the app keeps pages
79. // offline. `store` is the IndexedDB database, opened at boot; `unacked` holds what a
80. // queueable emit sent on the socket carried until its ack, so a socket that closes
81. // under it queues the emit instead of losing it; `flushing` is true while the queue
82. // is replayed; `retryTimer` is the reconnect that is waiting.
83. store = null
84. unacked = {}
85. replays = {} // 'k<i>' → what ends a replayed entry's wait when its socket closes
86. flushing = false
87. retryTimer = null
89. // ---- THE PACKAGE'S BROWSER SURFACE: what `import { … } from 'hl:web'` binds ------
90. //
91. // A file's STATICS are what a braced import may take (the language's one rule for
92. // `import { db } from './store.hl'`, and the same rule across a package's url),
93. // so everything this half offers an app's component is declared here and nowhere
94. // else. A static belongs to the CLASS, which is why these two reach each other
95. // and why they are the SAME pair for every component module the page imports —
96. // the browser loads this file once.
97. //
98. // `live` IS THE PAGE'S ONE CLIENT, written by the root below. The statics cannot
99. // see an instance (they are evaluated at file load, before there is one), and a
100. // static that is a FUNCTION does not need to: its body runs at the CALL, long
101. // after the root has put the constructed client here.
102. static live = { client = null }
104. // PROGRAMMATIC NAVIGATION — the same act a click on a same-origin `<a>` performs,
105. // asked for by code instead of by a pointer: a new history entry, then the next
106. // route's tree and state over the boundary and into the shell's slot. A handler
107. // that has just been told an id and must go to that thing's page has no link to
108. // click, and this is what it calls instead. Everything about what a navigation IS
109. // stays in `goTo` below; this is only the way in from outside the file.
110. static navigate = (path) => { return live.client.goTo(path) }
112. // A NOTIFICATION, now or at a set time (COMPONENTS §10, ticket #95). `at` is epoch
113. // milliseconds. The browser is asked for permission the first time. It is shown by
114. // the service worker when the app has one (so an installed app shows it as the app),
115. // else by the page. A notification AT A SET TIME is a timer of this page: it fires
116. // while the page is open — a browser offers no way to wake a closed app at a time
117. // without a server push, and this does not pretend otherwise.
118. static notify = (title, options) => { return live.client.showNotice(title, options) }
119. static notifyAt = (at, title, options) => { return live.client.noticeAt(at, title, options) }
120. // …or after `ms` milliseconds
121. static notifyIn = (ms, title, options) => { return live.client.noticeIn(ms, title, options) }
123. // ---- boot: construct the instances the server rendered, claim their DOM ----------
124. // THE PAGE'S CLIENT, PUBLISHED TO THE FILE'S OWN CLASS, before anything else the
125. // root does: `boot()` below constructs the components, and a component's module
126. // may reach `navigate` from the moment it is loaded.
127. Client.live.client = this
128. seed = JSON.parse(seedText)
129. router = new Router(routes = seed.routes)
130. boot()
132. boot() {
133. mounting = true
134. strict = seed.strict == true
135. takeBlueprints(seed.blueprints)
136. if (seed.shell != null) {
137. shell = instantiate(seed.shell, [], 'shell')
138. shell.isShell = true
139. // (the BODY ELEMENT, nothing to do with `rootKind` below — a mount's `rootKind`
140. // says which of the two roots it hangs from, 'page' or 'shell'. This field held
141. // the DOM node under the same name until 2026-09-14, and the shell's address
142. // therefore read as an element: every lift and every fill re-entry from a
143. // composition IN THE SHELL resolved against the page instead, so a composed
144. // control there wrote nothing — creator, W15.)
145. shell.root = document.body
146. // the body node's children are claimed against document.body, so the body
147. // element takes the node itself here: a region hosted directly on it (an `if`
148. // at the shell's root) rebuilds from it (measured 2026-09-13: a lone child
149. // under `body` stayed on screen after its condition turned false)
150. claim(&shell, document.body)
151. }
152. page = seed.page != null ? instantiate(seed.page, [], 'page') : null
153. // no shell: the page IS the document's body content
154. if (shell == null) { slotEl = document.body }
155. // THE SHELL RENDERED NO SLOT — its region stood false for this request, so the
156. // document carries no page. Claiming one anyway walked the page's tree against the
157. // SHELL's own elements and silently attached the page's nodes to them ("claim: no
158. // element for … under …" as soon as the two shapes differ), and the page never
159. // appeared when the region later turned true. It waits instead.
160. if (slotEl != null && page != null) {
161. slotEl.__hlCur = slotStart
162. claim(&page, slotEl, slotAt)
163. pageShown = true
164. }
165. // the head members are sites of this mount from here on. They are NOT painted
166. // now: the server's `document()` already wrote them into this document, and a
167. // write to one of them repaints it the way every other member's write does.
168. appHead = seed.head
169. if (page != null) { headSites(&page) }
170. release()
171. listen()
172. if (seed.offline != null) { offlineBoot() }
173. connect()
174. }
176. // THE NEXT PAGE INTO THE SLOT, and nothing else of the shell's: the slot's element may
177. // hold the shell's own elements beside the page (`body { header { … } slot }`), which
178. // emptying it took with the old page. The new page is built where the old one stood.
179. placePage(&m) {
180. if (!standing(slotEl, slotStart)) {
181. // the page is all the slot's element holds: empty it, as it always was
182. slotEl.replaceChildren()
183. create(&m, slotEl)
184. return null
185. }
186. for (n of between(slotStart)) { n.remove() }
187. let before = slotEl.childNodes.length
188. create(&m, slotEl)
189. let made = Array.from(slotEl.childNodes).slice(before)
190. for (n of made) { slotEl.insertBefore(n, slotStart.__hlEnd) }
191. return null
192. }
194. // the frames that waited for the mounts (above), now that they stand
195. release() {
196. mounting = false
197. let frames = held
198. held = []
199. for (f of frames) { outward(f) }
200. return null
201. }
203. // a mount's instance: the module LOADED (hlLoad — the loader primitive, which
204. // on this target is the dynamic import of the url the server compiled the
205. // component to), the class constructed, then the server's state laid over it.
206. // The import is the browser's own cache: a second mount of the same component
207. // fetches nothing.
208. // The route's params and the server's state are the construction's NAMED
209. // ARGUMENTS, pinned before the root runs — so a member the server evaluated
210. // (a seeded one, declared without its initializer in this realm's projection)
211. // is already there when a later line reads it, and a client-evaluable
212. // initializer keeps the server's value instead of recomputing it.
213. // THE BLUEPRINT TABLE, read by component key: the url the component's module is
214. // served at and its View tree, one copy for the whole page. Every mount's tree is
215. // read from here — the page's, the shell's, and every child's — and so is every
216. // child the browser has to build itself.
217. //
218. // IT ONLY GROWS. Each seed carries the table for ITS route, and a navigation takes
219. // the new entries WITHOUT dropping the old: a key is a component and a component is
220. // one tree, so an entry is never wrong, and constructing a mount awaits its module —
221. // long enough for a second navigation to have replaced the seed underneath it. A
222. // table that was replaced left that half-built page reading the wrong route's
223. // entries ("no blueprint for components/post.hl", on `/`, measured in the reference
224. // gate 2026-09-13).
225. takeBlueprints(table) {
226. for (k of table.keys()) {
227. if (blueprints[k] == null) { blueprints[k] = table[k] }
228. }
229. return null
230. }
232. blueprintOf(key) {
233. return blueprints[key]
234. }
236. treeOf(key) {
237. let bp = blueprintOf(key)
238. // the table covers every component the page can reach, so this is a torn seed
239. // and not a missing feature — say so loudly and paint nothing for that mount
240. if (bp == null) { console.error('framework: the seed carries no blueprint for ' + key)
241. return [] }
242. return bp.view
243. }
245. // `chain` and `root` are the mount's ADDRESS: the kid keys from the page (or the
246. // shell) down to it. A mount record is a value, so a site cannot hold the mount that
247. // owns its fill — it holds this address, and `fillAt` re-enters the mount by
248. // reference from the root when the fill has to be rebuilt (see settle below).
249. instantiate(m, chain, root) {
250. let args = {}
251. for (k of m.state.keys()) { args[k] = m.state[k] }
252. for (k of m.params.keys()) { args[k] = m.params[k] }
253. let inst = hlLoad(m.module, args)
254. // THE TREE COMES FROM THE TABLE, by this mount's key: a View belongs to the
255. // COMPONENT, and the seed carries one copy of it however many mounts share it.
256. let out = { key = m.key; instance = inst; view = treeOf(m.key); sites = []; isShell = false; kids = {}; bindings = []; chain = chain; rootKind = root; }
257. // THE MIRROR: the components this one composes are instances here too, exactly
258. // as the server stacked them — one per component node, constructed with the
259. // bindings the server evaluated; a binding to a host MEMBER is remembered, so a
260. // host write reaches the child's member and repaints the child's sites
261. for (k of m.kids.keys()) { out.kids[k] = instantiate(m.kids[k], childChain(chain, k), root) }
262. bindKids(&out, out.view)
263. // A BOUND MEMBER'S VALUE IS THE HOST'S, HERE. The seed carried the server's
264. // value, which is right for data and null for a FUNCTION (JSON has no form for
265. // one) — and a function the host hands its child (`PostForm { onCancel = cancel
266. // }`) is the way a child talks upward without knowing its host: it calls what it
267. // was given, and the function writes the host's members through the instance
268. // that wrote it. So every member binding is applied from the host instance now.
269. for (b of out.bindings) {
270. let kid = out.kids[b.kid]
271. kid.instance[b.target] = bindingValue(b, &out)
272. out.kids[b.kid] = kid
273. }
274. return out
275. }
277. bindKids(&m, nodes) {
278. for (n of nodes) {
279. if (n.k == 'component') {
280. let kid = m.kids[view.kidKey(n.path)]
281. if (kid != null) {
282. // A BINDING IS A READ at the reference site: a member (`count = likes`)
283. // or a field path off one (`postId = row.id`). Both follow the host's
284. // write — the field path under the name it starts at.
285. for (b of n.bindings) {
286. // A MEMBER THAT ONLY FEEDS A BINDING still follows a write: `repaint`
287. // walks the bindings after the sites, so a host member no element of the
288. // host shows still reaches the child that was bound to it (measured
289. // 2026-09-13 on the social app: `FollowButton { following =
290. // authorFollowed }` stayed false). Under the digest that needed the
291. // member to be in the compared map; under the write sets it needs
292. // nothing but the edge itself.
293. if (b.member != null) { m.bindings.push({ name = b.member; kid = view.kidKey(n.path); target = b.name; ref = null; }) }
294. else if (b.ref != null) { m.bindings.push({ name = b.ref.name; kid = view.kidKey(n.path); target = b.name; ref = b.ref; }) }
295. }
296. }
297. // the fill is THIS mount's fragment: a reference inside it binds against this instance
298. if (n.fill != null) { bindKids(&m, n.fill) }
299. } else if (n.k == 'el') {
300. bindKids(&m, n.children)
301. } else if (n.k == 'if') {
302. bindKids(&m, n.then)
303. bindKids(&m, n.other)
304. }
305. }
306. return null
307. }
309. // a body-rooted View's children are the body's children
310. childrenOf(nodes) {
311. if (nodes.length == 1 && nodes[0].k == 'el' && nodes[0].tag == 'body') { return nodes[0].children }
312. return nodes
313. }
330. // ---- WHAT THE COMPILE STEP ANSWERED, asked by name ---------------------------------
331. // A local event's write set stands at its own listener and a region's names at its own
332. // region: the compile step wrote them into the statements. These three are asked for by
333. // NAME at run time and cannot be — an inbound frame names its event, a routine a host
334. // handed down names the member that holds it, and a write set names the derivations
335. // that follow it — so the component's compiled half carries them beside its walks.
336. // Nothing here reduces a table: the answers are already the answers.
337. eventWrites(key, event) {
338. let comp = compiledOf(key)
339. if (comp == null) { return [] }
340. let names = comp.ev[event]
341. return names == null ? [] : names
342. }
344. memberWrites(key, name) {
345. let comp = compiledOf(key)
346. if (comp == null) { return [] }
347. let names = comp.mw[name]
348. return names == null ? [] : names
349. }
351. derivationsOf(key) {
352. let comp = compiledOf(key)
353. if (comp == null) { return [] }
354. return comp.dv
355. }
357. // ---- THE COMPILED COMPONENT: this framework's own output for this file ------------
358. // The old hl:web walked a tree the seed carries — it pairs an element with a node, asks a table
359. // what the element shows, and asks `view.value` what each bound spot holds. hl:web
360. // ships the answers as the component's own code (plugins/web/compile.hl), and the
361. // functions below are the FIXED runtime that code calls: the mount records, the keyed
362. // region diff, the binding edges, the derivations, the socket and navigation stay here,
363. // where they belong to the framework and not to any one component.
364. //
365. // EVERY CALL INTO GENERATED CODE PASSES BY REFERENCE. A plain call copies its
366. // arguments (the language's value semantics), which for an instance holding a 2000-row
367. // list would copy the list on every paint; `&` at the call site hands the value itself,
368. // the way every walk in this file already hands a mount record.
369. compiledOf(key) {
370. let all = window.__hlC
371. if (all == null) { return null }
372. return all[key]
373. }
375. // the walk of a component's whole View, of one `for` body, of an `if` branch, or of
376. // the fragment a reference fills — each under its own site
377. walkOf(key, slot, site) {
378. let comp = compiledOf(key)
379. if (comp == null) { return null }
380. if (slot == 'v') { return comp.v }
381. if (slot == 'b') { return comp.b[site] }
382. if (slot == 't') { return comp.t[site] }
383. if (slot == 'e') { return comp.e[site] }
384. if (slot == 'f') { return comp.f[site] }
385. return null
386. }
388. // ONE ENTRY INTO GENERATED CODE. `f` is the walk, `m` the mount it runs for, `o` the
389. // mount whose fragment a `slot` inside it would place.
390. run(f, &m, &o, host, i, rows, rk, fill, cr, opt) {
391. if (f == null) { return i }
392. let c = this
393. return f(&c, &m, &o, &host, i, &rows, rk, &fill, cr, &opt)
394. }
396. acqFail(tag, host) {
397. console.error('claim: no element for', tag, 'under', host == null ? null : host.tagName)
398. return null
399. }
401. // the classes a reference's `#Child` rule put on the composition root, beside whatever
402. // class the root itself carries (view.hl withRootClasses, on the build walk)
403. rootClasses(el, opt) {
404. if (opt == null || opt.classes == null || opt.classes.length == 0) { return null }
405. let add = ''
406. for (c of opt.classes) { add = add == '' ? c : add + ' ' + c }
407. let have = el.getAttribute('class')
408. el.setAttribute('class', have == null || have == '' ? add : have + ' ' + add)
409. return null
410. }
412. // AN ELEMENT THAT SHOWS SOMETHING is a site of this mount. The names come from the
413. // generated call — the compile step read them off the View — and the two-way `value`
414. // bind is applied where the element is a form control the member paints.
415. siteAt(&m, el, names, site, valueMember, isSelect, rows) {
416. let keep = []
417. for (name of names) {
418. // the SHELL's `slot` is where the route component hangs: swapped by navigation,
419. // never painted (the compile step already drops `Style`, folded at build)
420. if (!(name == 'slot' && m.isShell)) { keep.push(name) }
421. }
422. if (valueMember != null && rows[valueMember] == null && el.value != null) {
423. bindValue(&m, valueMember, el, isSelect)
424. }
425. if (keep.length > 0) { m.sites.push({ sid = nextSid(); el = el; site = site; names = keep; region = false; rows = rows; }) }
426. return null
427. }
429. applySelectAt(&m, el, v) {
430. el.value = v == null ? '' : '' + v
431. return null
432. }
434. // A HANDLER, WIRED AT CREATION. The literal is the element's own — its named entries
435. // are the generated `__hlLit`, the `for` rows in scope ride on it, and the owner is the
436. // instance BY REFERENCE (a handler writing a copy would repaint nothing).
437. onAt(&m, el, event, site, rows, wrote, touched) {
438. if (el.__hlLits == null) { el.__hlLits = {} }
439. el.__hlLits[event] = literalFor(&m, el)
440. let at = m.chain
441. let root = m.rootKind
442. let rowNames = rows == null ? [] : rows.keys()
443. el.addEventListener(event, (ev) => {
444. let lit = el.__hlLits[event]
445. for (rk of rowNames) { lit[rk] = el.__hlRows[rk] }
446. fire(&lit, event, ev)
447. el.__hlLits[event] = lit
448. patch(at, root, wrote, touched)
449. })
450. return null
451. }
453. // THE SHELL'S SLOT: where the route component hangs. On the build walk the re-created
454. // element adopts the page's nodes, and a page the shell never rendered is built here.
455. slotShell(&m, host, i, cr) {
456. slotEl = host
457. if (!cr) {
458. // claiming: the page's elements stand here, and the shell's own elements after
459. // the slot come after them
460. slotAt = i
461. if (seed.page == null) { return i }
462. // the page's region: its marks, and the elements between them the shell steps over
463. slotStart = markAt(host, false, true)
464. slotStart.__hlEnd = closeOf(slotStart)
465. host.__hlCur = slotStart.__hlEnd
466. let span = 0
467. for (n of between(slotStart)) { if (n.nodeType == 1) { span = span + 1 } }
468. return i + span
469. }
470. slotAt = host.children.length
471. let start = markAt(host, true, true)
472. if (detachedSlot != null && detachedSlot != host) {
473. // the page's own nodes: what stood between its marks, or all of the old host's
474. let moving = standing(detachedSlot, slotStart) ? between(slotStart) : Array.from(detachedSlot.childNodes)
475. for (node of moving) { host.appendChild(node) }
476. }
477. detachedSlot = null
478. if (!pageShown) {
479. // THE PAGE ARRIVES WITH ITS SLOT: it was never constructed while the shell
480. // placed none, so it is asked for now — the route's state, from the server
481. if (page == null) { page = arrive() }
482. if (page != null) {
483. page.sites = []
484. create(&page, host)
485. headSites(&page)
486. wearHead(&page)
487. pageShown = true
488. }
489. }
490. start.__hlEnd = markAt(host, true, false)
491. slotStart = start
492. return i
493. }
495. // THE ROUTE'S PAGE, for a slot that just opened: the navigation face answers it for
496. // this path, told the slot stands here, and the mount is constructed from that. The
497. // frames it raises wait until the rebuild that placed it is done (pageArrived).
498. arrive() {
499. let next = emit server page(location.pathname + location.search, true)
500. if (next == null || next.page == null) { return null }
501. takeBlueprints(next.blueprints)
502. seed.page = next.page
503. mounting = true
504. pageArrived = true
505. return instantiate(next.page, [], 'page')
506. }
508. // THE SLOT CLOSED: the page is dropped, not kept aside — the next time the slot opens
509. // it is constructed again. The head falls back to the app's own.
510. dropPage() {
511. slotEl = null
512. pageShown = false
513. page = null
514. slotStart = null
515. seed.page = null
516. let none = { instance = {}; }
517. wearHead(&none)
518. announceMounts()
519. return null
520. }
522. // a rebuild that constructed the page: what waited for it goes out, and the server
523. // learns the tab mounts it
524. arrived() {
525. if (!pageArrived) { return null }
526. pageArrived = false
527. release()
528. announceMounts()
529. return null
530. }
532. // A CHILD'S SLOT: the fragment its HOST wrote, built in the host's frame. The fill names
533. // that frame by address, and `run` re-enters it when this walk is not it.
534. slotFill(&m, &o, host, i, fill, cr) {
535. if (fill == null) { return i }
536. if (cr && fill.detached) {
537. let anchor = document.createComment('hl:slot')
538. host.appendChild(anchor)
539. pendingFills[] = { key = fill.key; site = fill.site; rows = fill.rows; rowKey = fill.rowKey; outer = fill.outer; chain = fill.chain; rootKind = fill.rootKind; anchor = anchor; }
540. return i
541. }
542. if (ownsFill(o, fill)) {
543. let f = walkOf(fill.key, 'f', fill.site)
544. return run(f, &o, &o, host, i, fill.rows, fill.rowKey, fill.outer, cr, null)
545. }
546. return fillFromRoot(fill, host, i, cr)
547. }
549. // the fill's owner, re-entered from the page or the shell by the address it carries
550. fillFromRoot(fill, host, at, cr) {
551. if (fill.rootKind == 'shell') {
552. if (shell == null) { return at }
553. return fillInto(&shell, fill, 0, host, at, cr)
554. }
555. if (page == null) { return at }
556. return fillInto(&page, fill, 0, host, at, cr)
557. }
559. fillInto(&m, fill, depth, host, at, cr) {
560. if (depth >= fill.chain.length) {
561. let f = walkOf(fill.key, 'f', fill.site)
562. return run(f, &m, &m, host, at, fill.rows, fill.rowKey, fill.outer, cr, null)
563. }
564. let kid = m.kids[fill.chain[depth]]
565. if (kid == null) { return at }
566. let out = fillInto(&kid, fill, depth + 1, host, at, cr)
567. m.kids[fill.chain[depth]] = kid
568. return out
569. }
571. // the fill context a reference hands its child: the fragment's owner by address, the
572. // host's rows and rowKey, and the fill the host itself was standing in
573. fillFor(&m, spec, rows, rowKey, fill) {
574. if (!spec.fill) { return null }
575. return { key = m.key; site = spec.site; rows = rows; rowKey = rowKey; outer = fill; chain = m.chain; rootKind = m.rootKind; detached = false; }
576. }
578. // ---- THE MARKS: every region stands between two comments ---------------------------
579. // THE INVARIANT (tickets #103, #104). Every region — an `if`, a `for`, each row of a
580. // `for`, the shell's page — stands on its host between an OPEN mark (a comment `[`)
581. // and a CLOSE mark (`]`), and ITS NODES ARE EXACTLY THE NODES BETWEEN THEM. A region
582. // inside another one on the same host stands between the outer one's marks. So:
583. // - a region's nodes are never remembered, they are read off the DOM between its
584. // marks when they are needed — whatever a region inside it did since, they are
585. // right (a list taken when the branch was built went stale, #103);
586. // - a region is replaced by removing what stands between its marks and putting the
587. // new nodes before its close mark; a row moves and leaves WITH its marks, so a row
588. // is always whole and in its list;
589. // - nothing outside a region is touched by it, and nothing inside it outlives it: the
590. // sites registered in the nodes it drops are dropped with them, and a region whose
591. // marks have left its host has nothing to paint.
592. // The server writes the same marks (compile.hl `markOpen`), the claim walk takes them in
593. // document order and the build walk makes them, so a region looks the same however it
594. // came to stand — and text beside a region never runs into the region's own text.
595. mark(open) { return document.createComment(open ? '[' : ']') }
597. isMark(n) { return n != null && n.nodeType == 8 && (n.data == '[' || n.data == ']') }
599. // the nodes strictly between a region's marks
600. between(start) {
601. let out = []
602. let end = start.__hlEnd
603. let n = start.nextSibling
604. while (n != null && n != end) { out.push(n) n = n.nextSibling }
605. return out
606. }
608. // …and with the marks themselves: a row as it moves or leaves
609. spanOf(start) {
610. let out = [start]
611. for (n of between(start)) { out.push(n) }
612. out.push(start.__hlEnd)
613. return out
614. }
616. // a region stands while both its marks are on its host
617. standing(host, start) {
618. return start != null && start.parentNode == host && start.__hlEnd != null && start.__hlEnd.parentNode == host
619. }
621. // A REGION'S MARK, made (building) or taken (claiming). The claim takes the next mark
622. // after the host's cursor: the walk meets the regions in document order, so it is this
623. // region's. A page whose marks do not match its tree is said so, and gets a mark where
624. // the walk stands.
625. markAt(host, cr, open) {
626. if (cr) {
627. let made = mark(open)
628. host.appendChild(made)
629. return made
630. }
631. let n = host.__hlCur == null ? host.firstChild : host.__hlCur.nextSibling
632. while (n != null && !isMark(n)) { n = n.nextSibling }
633. let mk = null
634. if (n != null && n.data == (open ? '[' : ']')) { mk = n }
635. else {
636. console.error('claim: no region mark under', host.tagName)
637. mk = mark(open)
638. host.insertBefore(mk, host.__hlCur == null ? host.firstChild : host.__hlCur.nextSibling)
639. }
640. host.__hlCur = mk
641. return mk
642. }
644. // the close mark that pairs with an open one, past the regions inside it
645. closeOf(start) {
646. let depth = 0
647. let n = start.nextSibling
648. while (n != null) {
649. if (isMark(n)) {
650. if (n.data == '[') { depth = depth + 1 }
651. else if (depth == 0) { return n }
652. else { depth = depth - 1 }
653. }
654. n = n.nextSibling
655. }
656. let made = mark(false)
657. start.parentNode.appendChild(made)
658. return made
659. }
661. // THE SITES IN NODES THAT LEAVE go with them: an element's, a text leaf's, and a
662. // region's whose open mark is among them. Marked and walked up once per site.
663. //
664. // NO CALL BETWEEN READING THE LIST AND WRITING IT BACK. Every call in this language is
665. // awaited, and an await lets another repaint run — one that registers sites of its
666. // own, which a list read before it and written after it would lose. The loops that
667. // read `m.sites` and write it back hold property reads, index writes and `[] =` only.
668. dropSitesIn(&m, host, nodes) {
669. if (nodes.length == 0) { return null }
670. for (n of nodes) { n.__hlGone = true }
671. let kept = []
672. let dropped = 0
673. for (site of m.sites) {
674. let n = (site.region && site.el == host && site.start != null) ? site.start : site.el
675. let gone = false
676. while (n != null && n != host && !gone) {
677. if (n.__hlGone == true) { gone = true }
678. n = n.parentNode
679. }
680. if (gone) { dropped = dropped + 1 } else { kept[] = site }
681. }
682. if (dropped > 0) {
683. m.sites = kept
684. dropGen = dropGen + 1
685. }
686. for (n of nodes) { n.__hlGone = null }
687. return null
688. }
690. // THE SITES A WALK REGISTERED ON THE FRAGMENT IT BUILT INTO belong to the host it lands
691. // in — this mount's, and those of the children composed straight onto the fragment,
692. // whose own regions (a child's View may begin with an `if`) stand on the same host.
693. // Those children are named by address on the fragment as the walk composes them
694. // (kidAt, `__hlOnFrag`), so only they are re-entered.
695. rehome(&m, src, dst, before) {
696. sitesOnto(&m, src, dst, before)
697. let due = src.__hlOnFrag == null ? [] : src.__hlOnFrag
698. src.__hlOnFrag = null
699. let base = m.chain == null ? 0 : m.chain.length
700. for (chain of due) {
701. if (chain.length > base) { rehomeAt(&m, chain, base, src, dst) }
702. }
703. return null
704. }
706. // (`after`: the sites numbered after it are the walk's — an index would move when
707. // another repaint drops sites in the meantime)
708. sitesOnto(&m, src, dst, after) {
709. let k = 0
710. while (k < m.sites.length) {
711. let e = m.sites[k]
712. if (e.el == src && e.sid > after) {
713. e.el = dst
714. m.sites[k] = e
715. }
716. k = k + 1
717. }
718. return null
719. }
721. rehomeAt(&m, chain, depth, src, dst) {
722. if (depth >= chain.length) { sitesOnto(&m, src, dst, 0) return null }
723. let kid = m.kids[chain[depth]]
724. if (kid == null) { return null }
725. rehomeAt(&kid, chain, depth + 1, src, dst)
726. m.kids[chain[depth]] = kid
727. return null
728. }
730. // A RANGE LEAVES THE PAGE — a branch, a row: every site registered in it goes (at any
731. // depth: an element's, a text's, a region's whose marks are in it), and so does every
732. // child composed in it (its nodes carry its address), with its own sites, its children
733. // and its handlers.
734. // A range can hold a FILL — a host's fragment placed at this component's `slot` — whose
735. // sites and children are the host's: `fill` names that host (and the one it was filled
736. // by in turn), and those go in settle(), where a host is re-entered by its address after
737. // every mount on this walk has been written back.
738. dropRange(&m, host, nodes, fill) {
739. dropSitesIn(&m, host, nodes)
740. let others = disposeIn(&m, nodes)
741. let f = fill
742. while (f != null) {
743. pendingDrops.push({ chain = f.chain; rootKind = f.rootKind; host = host; nodes = nodes; kids = others; })
744. others = []
745. f = f.outer
746. }
747. return null
748. }
750. // THE CHILDREN COMPOSED IN NODES go: those of this mount at once, and the others (a
751. // host's, composed in its fill) are answered for the caller to hand on
752. disposeIn(&m, nodes) {
753. let chains = []
754. for (n of nodes) { kidsFiledIn(n, &chains) }
755. let base = m.chain == null ? [] : m.chain
756. let others = []
757. for (c of chains) {
758. // (a range inside a child never takes the child itself, nor a mount above it: the
759. // child's own nodes carry its address, a region of its own among them)
760. let above = c.length <= base.length && JSON.stringify(base.slice(0, c.length)) == JSON.stringify(c)
761. if (!above) {
762. if (c.length > base.length && JSON.stringify(c.slice(0, base.length)) == JSON.stringify(base)) { disposeAt(&m, c, base.length) }
763. else { others.push(c) }
764. }
765. }
766. return others
767. }
769. // the ranges a fill's host still has to let go of (see dropRange)
770. dropPending() {
771. if (pendingDrops.length == 0) { return null }
772. let due = pendingDrops.slice(0)
773. pendingDrops = []
774. for (d of due) {
775. if (d.rootKind == 'shell') {
776. if (shell != null) { dropAt(&shell, d, 0) }
777. } else if (page != null) { dropAt(&page, d, 0) }
778. }
779. return null
780. }
782. dropAt(&m, d, depth) {
783. if (depth >= d.chain.length) {
784. dropSitesIn(&m, d.host, d.nodes)
785. for (c of d.kids) { if (c.length > depth) { disposeAt(&m, c, depth) } }
786. return null
787. }
788. let kid = m.kids[d.chain[depth]]
789. if (kid == null) { return null }
790. dropAt(&kid, d, depth + 1)
791. m.kids[d.chain[depth]] = kid
792. return null
793. }
795. // a node in a range whose host's sites are still to go (dropPending)
796. dropDue(n) {
797. let top = n.getRootNode()
798. for (d of pendingDrops) { if (d.nodes.includes(top)) { return true } }
799. return false
800. }
802. // the children whose nodes are this node or stand under it (kidAt files them there)
803. kidsFiledIn(n, &out) {
804. if (n.__hlKidChains != null) { for (c of n.__hlKidChains) { out.push(c) } }
805. if (n.nodeType != 1) { return null }
806. let w = document.createTreeWalker(n, 4294967295)
807. let c = w.nextNode()
808. while (c != null) {
809. if (c.__hlKidChains != null) { for (k of c.__hlKidChains) { out.push(k) } }
810. c = w.nextNode()
811. }
812. return null
813. }
815. disposeAt(&m, chain, depth) {
816. if (depth == chain.length - 1) {
817. if (m.kids[chain[depth]] != null) { delete m.kids[chain[depth]] }
818. return null
819. }
820. let kid = m.kids[chain[depth]]
821. if (kid == null) { return null }
822. disposeAt(&kid, chain, depth + 1)
823. m.kids[chain[depth]] = kid
824. return null
825. }
827. // a node no longer on the page: not in the document, not in a fragment a walk is
828. // still building, not in the slot a shell's rebuild holds aside
829. placedOff(n) {
830. if (n.isConnected) { return false }
831. if (n.getRootNode().nodeType == 11) { return false }
832. if (detachedSlot != null && detachedSlot.contains(n)) { return false }
833. return true
834. }
836. nextSid() {
837. sidNext = sidNext + 1
838. return sidNext
839. }
841. isLive(&m, s) {
842. for (e of m.sites) { if (e.sid == s.sid) { return true } }
843. return false
844. }
846. liveSids(&m) {
847. let out = {}
848. for (e of m.sites) { out[e.sid] = true }
849. return out
850. }
852. // A SITE WHOSE NODES LEFT THE PAGE, found by a repaint. Every range that leaves takes
853. // its sites with it (dropRange), so this is a bug: the gates' client raises it as an
854. // uncaught exception (the page's error event, what every gate fails on), a page in the
855. // field says so on the console; neither paints it.
856. staleSite(s) {
857. let msg = 'hl:web: a repaint found a site whose nodes have left the page (site ' + s.site + ')'
858. if (strict) { window.reportError(window.Reflect.construct(window.Error, [msg])) }
859. else { console.error(msg) }
860. return null
861. }
863. // A RUN OF TEXT LEAVES BESIDE ELEMENTS OR REGIONS (compile.hl `mixed`): one text node,
864. // kept on the element under the run's index so a paint rewrites it and nothing else.
865. // `k` null is a text the walk only has to step over (literal, or painted as a site of
866. // its own by `textAt`). Built, it is appended. Claimed, it is the text node right
867. // after the host's cursor — the last node the walk took there — which the server may
868. // have run together with the readable form's line break after it, so it is split off
869. // by the value it has now. A run that rendered empty has no node and gets one.
870. leafAt(host, cr, i, k, text) {
871. let t = leafNode(host, cr, text)
872. if (k != null) {
873. if (host.__hlLeaves == null) { host.__hlLeaves = {} }
874. host.__hlLeaves[k] = t
875. }
876. return null
877. }
879. leafNode(host, cr, text) {
880. let t = null
881. if (cr) {
882. t = document.createTextNode(text)
883. host.appendChild(t)
884. return t
885. }
886. let at = host.__hlCur == null ? host.firstChild : host.__hlCur.nextSibling
887. if (at != null && at.nodeType == 3 && text != '') {
888. if (at.data == text) { t = at }
889. else if (at.data.startsWith(text)) { at.splitText(text.length) t = at }
890. else {
891. // a line break of the readable form in front of it (a filled slot's line)
892. let lead = at.data.length - at.data.trimStart().length
893. if (lead > 0 && at.data.startsWith(View.newline) && at.data.slice(lead).startsWith(text)) {
894. t = at.splitText(lead)
895. if (t.data != text) { t.splitText(text.length) }
896. }
897. }
898. }
899. if (t == null) {
900. t = document.createTextNode(text)
901. host.insertBefore(t, at)
902. }
903. host.__hlCur = t
904. return t
905. }
908. // A TEXT LEAF STANDING IN A LIST (an `if` branch, a `for` body): its own text node, and
909. // a site of the member it reads — or of the row it stands in — painted by rewriting it.
910. textAt(&m, host, cr, readFn, names, rows, rk) {
911. let inst = m.instance
912. let rws = rows
913. let t = leafNode(host, cr, readFn(&inst, &rws))
914. if (names.length > 0 || (rk != null && rk != '')) {
915. m.sites.push({ sid = nextSid(); el = t; site = null; names = names; region = false; text = true; rows = rows; rowKey = rk; read = readFn; })
916. }
917. return null
918. }
920. paintText(&m, s) {
921. let inst = m.instance
922. let rws = s.rows
923. let f = s.read
924. let v = f(&inst, &rws)
925. let t = s.el
926. if (t.data != v) { t.data = v }
927. return null
928. }
930. // ---- a `for`: the region, its rows, each between its marks -------------------------
931. forAt(&m, &o, host, i, site, rowName, listFn, rows, rk, fill, cr, names) {
932. let start = markAt(host, cr, true)
933. regionAt(&m, host, site, rows, rk, fill, true, rowName, listFn, names, start)
934. let box = { keys = []; rows = {}; }
935. let inst = m.instance
936. let rws = rows
937. let entries = listFn(&inst, &rws)
938. let body = walkOf(m.key, 'b', site)
939. if (entries != null) {
940. let keys = listKeys(entries)
941. let ri = 0
942. for (entry of entries) {
943. let inner = rows + {}
944. inner[rowName] = entry
945. let rs = markAt(host, cr, true)
946. let out = run(body, &m, &o, host, cr ? 0 : i, inner, rk + '#' + keys[ri], fill, cr, null)
947. if (!cr) { i = out }
948. rs.__hlEnd = markAt(host, cr, false)
949. box.keys.push(keys[ri])
950. box.rows[keys[ri]] = { start = rs; entry = entry; }
951. ri = ri + 1
952. }
953. }
954. start.__hlEnd = markAt(host, cr, false)
955. start.__hlBox = box
956. return i
957. }
959. // an `if`: the branch that stands, between its marks
960. ifAt(&m, &o, host, i, site, condFn, rows, rk, fill, cr, names) {
961. let start = markAt(host, cr, true)
962. regionAt(&m, host, site, rows, rk, fill, false, null, condFn, names, start)
963. let inst = m.instance
964. let rws = rows
965. let branch = condFn(&inst, &rws) ? walkOf(m.key, 't', site) : walkOf(m.key, 'e', site)
966. let out = run(branch, &m, &o, host, i, rows, rk, fill, cr, null)
967. start.__hlEnd = markAt(host, cr, false)
968. return out
969. }
971. // A REGION SITE carries what the patch needs and nothing else: the names its list or
972. // its condition reads (the compiler's answer, by this site), the read itself as the
973. // generated closure, and its open mark — the region itself, one per row it stands in.
974. regionAt(&m, host, site, rows, rowKey, fill, isFor, rowName, readFn, names, start) {
975. // a row-scoped read is its row's, and the language resolved it as one, so the
976. // compile step names none here: an empty set is a region no member can move. INSIDE
977. // A ROW it is still registered, with no names: the row's new record moves it
978. // (reseatRows, ticket #86). Outside one nothing ever can.
979. if (names == null) { names = [] }
980. if (names.length == 0 && (rowKey == null || rowKey == '')) { return null }
981. let held = null
982. if (fill != null) { held = fill + {} held.detached = true }
983. m.sites.push({ sid = nextSid(); el = host; site = site; names = names; region = true; rows = rows; rowKey = rowKey; fill = held; isFor = isFor; row = rowName; read = readFn; start = start; })
984. return null
985. }
987. // ---- a composed child --------------------------------------------------------------
988. // The reference's own description is written at its use site by the compile step: what
989. // it binds, what it overwrites, the classes it puts on the child's roots.
990. kidAt(&m, host, i, spec, rows, rk, fill, cr, opt) {
991. let kk = spec.kid + rk
992. let kid = m.kids[kk]
993. if (kid == null) { kid = mintFrom(&m, spec, rows) }
994. if (kid == null) { return i }
995. bindFrom(&kid, &m, spec, rows)
996. if (cr) { kid.sites = [] }
997. kid.chain = childChain(m.chain, kk)
998. kid.rootKind = m.rootKind
999. let firstAt = cr ? host.children.length : i
1000. // WHAT A REFERENCE OVERWRITES REACHES THE FIRST ELEMENT, however deep. A child
1001. // whose View is a bare reference to another component renders no element of its
1002. // own, so the events the host overwrote travel on through it — the old hl:web kept that in
1003. // a field that the first element consumes; here it rides on the option the walk is
1004. // handed, and a reference with ons of its own replaces it.
1005. let over = []
1006. if (spec.ons != null && spec.ons.length > 0) { for (o of spec.ons) { over.push(o.event) } }
1007. else if (opt != null && opt.over != null) { over = opt.over }
1008. let kidOpt = { over = over; classes = spec.classes; }
1009. let f = walkOf(kid.key, 'v', null)
1010. // a child composed straight onto a fragment has its regions on the host the fragment
1011. // lands in: the fragment names it, for the re-homing (rehome)
1012. if (cr && host.nodeType == 11) {
1013. let onFrag = host.__hlOnFrag == null ? [] : host.__hlOnFrag
1014. onFrag.push(kid.chain)
1015. host.__hlOnFrag = onFrag
1016. }
1017. let nodesBefore = host.childNodes.length
1018. let curBefore = host.__hlCur
1019. let out = run(f, &kid, &m, host, cr ? 0 : i, {}, '', fillFor(&m, spec, rows, rk, fill), cr, kidOpt)
1020. if (!cr) { i = out }
1021. // THE NODES THE CHILD PUT ON ITS HOST CARRY ITS ADDRESS: when a range holding them
1022. // leaves the page, the child goes with it (dropRange)
1023. let made = []
1024. if (cr) {
1025. let k = nodesBefore
1026. while (k < host.childNodes.length) { made.push(host.childNodes[k]) k = k + 1 }
1027. } else {
1028. let n = curBefore == null ? host.firstChild : curBefore.nextSibling
1029. let stop = host.__hlCur == null ? null : host.__hlCur.nextSibling
1030. while (n != null && n != stop) { made.push(n) n = n.nextSibling }
1031. }
1032. for (n of made) {
1033. let filed = n.__hlKidChains == null ? [] : n.__hlKidChains
1034. filed.push(kid.chain)
1035. n.__hlKidChains = filed
1036. }
1037. if (cr || kid.bindings.length == 0) { kid.bindings = [] bindKids(&kid, kid.view) }
1038. let roots = rootsBetween(host, firstAt, cr ? host.children.length : i)
1039. refOnsFrom(&m, spec, roots, rows)
1040. for (el of roots) { el.__hlKid = true }
1041. m.kids[kk] = kid
1042. return i
1043. }
1045. // the value a binding of this reference carries, off the host instance
1046. specValue(b, &m, rows) {
1047. if (b.text != null) { return b.value }
1048. if (b.member != null) { return view.value({ k = 'member'; name = b.member; }, m.instance, rows) }
1049. if (b.ref != null) {
1050. let inst = m.instance
1051. let rws = rows
1052. let f = b.ref
1053. return f(&inst, &rws)
1054. }
1055. return null
1056. }
1058. mintFrom(&m, spec, rows) {
1059. let bp = blueprintOf(spec.key)
1060. if (bp == null) { return null }
1061. let args = {}
1062. for (b of spec.bindings) { args[b.name] = specValue(b, &m, rows) }
1063. let inst = hlLoad(bp.module, args)
1064. return { key = spec.key; instance = inst; view = bp.view; sites = []; isShell = false; kids = {}; bindings = []; chain = []; rootKind = m.rootKind; }
1065. }
1067. bindFrom(&kid, &m, spec, rows) {
1068. for (b of spec.bindings) { kid.instance[b.name] = specValue(b, &m, rows) }
1069. return null
1070. }
1072. // A HANDLER WRITTEN ON A REFERENCE is the HOST's: its literal is minted here with the
1073. // reference's bindings as its own entries, and its write set is filed under the
1074. // reference's own `on` site in the host's table.
1075. refOnsFrom(&m, spec, els, rows) {
1076. if (spec.ons == null || spec.ons.length == 0) { return null }
1077. let named = {}
1078. for (b of spec.bindings) { named[b.name] = specValue(b, &m, rows) }
1079. for (k of rows.keys()) { named[k] = rows[k] }
1080. let inst = m.instance
1081. let lit = hlLiteralNew(spec.site, named, &inst)
1082. for (el of els) {
1083. for (o of spec.ons) { listenRef(&m, &lit, el, o) }
1084. }
1085. return null
1086. }
1088. // ---- claim: walk the tree in lockstep with the DOM the same tree produced --------
1089. // Round one granularity: an element whose children include a member is a SITE for
1090. // each of those members; a repaint rewrites that element's children from the tree.
1091. // `i` is the running index into `host.children`; a `for` consumes one run of
1092. // elements per entry, an `if` the run of the branch that stands.
1093. claim(&m, host, Number at = 0) {
1094. let f = walkOf(m.key, 'v', null)
1095. return run(f, &m, &m, host, at, {}, '', null, false, null)
1096. }
1099. // a kid's address: its host's, plus the key the host holds it under
1100. childChain(chain, kk) {
1101. let out = chain == null ? [] : chain.slice(0)
1102. out.push(kk)
1103. return out
1104. }
1111. // the keys a list has, in order: the record's id (view.rowKey), an index where the row
1112. // is no record, and a suffix where one id stands twice. THE SERVER DOES NOT DEDUPE —
1113. // its `mountKids` gives two rows of one id one mount key; a list with repeated ids is
1114. // written down here rather than answered twice.
1115. listKeys(entries) {
1116. let out = []
1117. let seen = {}
1118. let ri = 0
1119. for (entry of entries) {
1120. let k = view.rowKey(entry, ri)
1121. if (seen[k] != null) { k = k + ':' + ri }
1122. seen[k] = true
1123. out.push(k)
1124. ri = ri + 1
1125. }
1126. return out
1127. }
1129. // ---- the patch: old keys against new ---------------------------------------------
1130. // A write to the list is answered by a DIFF and nothing else: the rows that are gone
1131. // are removed, the rows that arrived are built, the rows that stayed are MOVED where
1132. // the order changed and are left alone where it did not — and each of them is handed
1133. // the record it now stands for, which rewrites only the attributes and the text the
1134. // DOM does not already hold. The region's element is never emptied. Each row is the
1135. // span between its own marks, and every row stands between the list's marks.
1136. paintFor(&m, s) {
1137. let host = s.el
1138. let start = s.start
1139. if (!standing(host, start)) {
1140. // dropped while this paint was on its way (a paint that was running when the
1141. // range holding it left, and comes back for another round): it is gone, and
1142. // nothing is painted — a site still REGISTERED here is the bug
1143. if (!isLive(&m, s)) { return null }
1144. if (start != null && dropDue(start)) { return null }
1145. return staleSite(s)
1146. }
1147. let box = start.__hlBox
1148. if (box == null) { return null }
1149. // ONE PAINT OF A LIST AT A TIME. Building a row can wait (a composed child's module
1150. // loads on first use), and a second write to the list in that time — a push right
1151. // behind the handler's own write — read the box before the first paint had filed
1152. // its row, and built the row again. A paint that arrives while one runs is
1153. // remembered, and the running one paints again from the list as it then stands.
1154. if (start.__hlBusy != null) { start.__hlBusy = 'again' return null }
1155. start.__hlBusy = 'busy'
1156. let inst = m.instance
1157. let rws = s.rows
1158. let read = s.read
1159. let entries = read(&inst, &rws)
1160. if (entries == null) { entries = [] }
1162. // the keys this list has now, in order
1163. let keys = listKeys(entries)
1164. let next = []
1165. let ri = 0
1166. for (entry of entries) {
1167. next.push({ key = keys[ri]; entry = entry; })
1168. ri = ri + 1
1169. }
1171. // 1. THE ROWS THAT ARE GONE: their nodes, their sites and their children's
1172. // mounts leave together.
1173. let keep = {}
1174. for (r of next) { keep[r.key] = true }
1175. for (k of box.keys) {
1176. if (keep[k] == null) { dropRow(&m, s, &box, k) }
1177. }
1179. // 2. THE ROWS IN ORDER. `at` is the node standing where the next row belongs: a
1180. // row already there advances it, a row that is not is moved or built before it.
1181. let at = start.__hlEnd
1182. let found = false
1183. for (k of box.keys) {
1184. if (!found && keep[k] != null && box.rows[k] != null) { at = box.rows[k].start found = true }
1185. }
1186. let placed = []
1187. let changed = []
1188. for (r of next) {
1189. let held = box.rows[r.key]
1190. if (held == null) {
1191. buildRow(&m, s, &box, r, at)
1192. } else if (held.start == at) {
1193. // already in place: step over it
1194. at = held.start.__hlEnd.nextSibling
1195. if (updateRow(&m, s, &box, r)) { changed.push(box.rows[r.key]) }
1196. } else {
1197. moveRow(host, held, at)
1198. if (updateRow(&m, s, &box, r)) { changed.push(box.rows[r.key]) }
1199. }
1200. placed.push(r.key)
1201. }
1202. box.keys = placed
1203. start.__hlBox = box
1204. if (changed.length > 0) { reseatRows(&m, s, changed) }
1205. let again = start.__hlBusy == 'again'
1206. start.__hlBusy = null
1207. if (again) { paintFor(&m, s) }
1208. return null
1209. }
1211. // a row's own elements: the ones between its marks
1212. rowEls(held) {
1213. let out = []
1214. for (n of between(held.start)) { if (n.nodeType == 1) { out.push(n) } }
1215. return out
1216. }
1218. // A ROW LEAVES: its span goes off the document, the sites that were registered inside
1219. // it are dropped (they point at nodes nobody can see), and so do the mounts of the
1220. // children it held — a child of a row is keyed by that row (view.rowKey).
1221. dropRow(&m, s, &box, key) {
1222. let held = box.rows[key]
1223. if (held == null) { return null }
1224. let host = s.el
1225. let nodes = spanOf(held.start)
1226. dropRange(&m, host, nodes, s.fill)
1227. for (n of nodes) { n.remove() }
1228. delete box.rows[key]
1229. return null
1230. }
1232. // A ROW MOVES, marks and all: `moveBefore` where the browser has it, because it keeps
1233. // an element's state (focus, a playing video, an open dialog) across the move;
1234. // `insertBefore` else.
1235. moveRow(host, held, at) {
1236. for (n of spanOf(held.start)) {
1237. if (host.moveBefore != null) { host.moveBefore(n, at) }
1238. else { host.insertBefore(n, at) }
1239. }
1240. return null
1241. }
1243. // A ROW ARRIVES: built into a fragment between its marks and put in with one insertion,
1244. // because the walk appends and the row's place is where `at` stands — which may be in
1245. // the middle of the region. What the walk registered on the fragment belongs to the host.
1246. buildRow(&m, s, &box, r, at) {
1247. let host = s.el
1248. let inner = s.rows + {}
1249. inner[s.row] = r.entry
1250. let bin = document.createDocumentFragment()
1251. let body = walkOf(m.key, 'b', s.site)
1252. let before = sidNext
1253. let rs = markAt(bin, true, true)
1254. run(body, &m, &m, bin, 0, inner, (s.rowKey == null ? '' : s.rowKey) + '#' + r.key, s.fill, true, null)
1255. rs.__hlEnd = markAt(bin, true, false)
1256. rehome(&m, bin, host, before)
1257. // THE LIST LEFT WHILE THE ROW WAS BEING BUILT (a module to load is a wait, and a
1258. // branch around the list can be replaced in it): the row never stands, and what
1259. // its walk registered goes with it
1260. if (!standing(host, s.start)) {
1261. dropRange(&m, host, Array.from(bin.childNodes), s.fill)
1262. return null
1263. }
1264. host.insertBefore(bin, at)
1265. box.rows[r.key] = { start = rs; entry = r.entry; }
1266. return null
1267. }
1269. // A ROW STAYS, AND THE RECORD IT SHOWS MAY BE ANOTHER ONE — `upsert` hands the row a
1270. // new record under the same id, and `items[0].title = 'edited'` writes into the one it
1271. // already has. Both are answered here: the row's elements are handed the record (their
1272. // `__hlRows`, which is also what a handler on the row reads), and every attribute and
1273. // text leaf is rewritten ONLY where the DOM does not already hold the value. That is
1274. // why a push into 2000 rows costs no mutation on the 2000 that did not change.
1275. updateRow(&m, s, &box, r) {
1276. let held = box.rows[r.key]
1277. if (held == null) { return false }
1278. // the row holds its own copy of the record, so the two are compared by what they say
1279. let changed = JSON.stringify(held.entry) != JSON.stringify(r.entry)
1280. held.entry = r.entry
1281. box.rows[r.key] = held
1282. for (el of rowEls(held)) { refreshRow(&m, el, s.row, r.entry) }
1283. rebindRow(&m, s, r)
1284. return changed
1285. }
1287. // A ROW THAT NOW SHOWS ANOTHER RECORD HANDS IT TO THE SITES INSIDE IT (ticket #86). A
1288. // row without an id is keyed by its place, so a new list of the same shape keeps every
1289. // row — and refreshRow repaints only the row's own elements. The sites registered in
1290. // the row still hold the rows of the moment they were built: a nested `for` read the
1291. // old record's list, and a `td` inside it the old inner record. Each site whose element
1292. // stands in a changed row takes the new record, and the regions among them are patched
1293. // again, outermost first — a nested row that changed in turn does the same for its own.
1294. // One pass over the sites, marked rows and an ancestor walk, not a scan per row.
1295. reseatRows(&m, s, changed) {
1296. let host = s.el
1297. // every node of a changed row carries its record for the walk up — its text and
1298. // its regions' marks as well as its elements, so a text leaf or an `if` standing
1299. // in the row directly on the host takes the record too
1300. for (held of changed) { for (n of between(held.start)) { n.__hlReseat = held.entry } }
1301. // (one pass that reads and writes the list back, with no call in it — see
1302. // dropSitesIn — and the paints after it)
1303. let hits = []
1304. let k = 0
1305. while (k < m.sites.length) {
1306. let site = m.sites[k]
1307. if (site.el != null && site.rows != null && !(site.region && site.start == s.start)) {
1308. let n = (site.region && site.el == host && site.start != null) ? site.start : site.el
1309. let hit = null
1310. while (n != null && n != host && hit == null) {
1311. if (n.__hlReseat != null) { hit = n }
1312. n = n.parentNode
1313. }
1314. if (hit != null) {
1315. let rows = site.rows + {}
1316. rows[s.row] = hit.__hlReseat
1317. site.rows = rows
1318. m.sites[k] = site
1319. hits[] = site
1320. }
1321. }
1322. k = k + 1
1323. }
1324. let regions = []
1325. let texts = []
1326. for (site of hits) {
1327. if (site.region) { regions.push(site.start) }
1328. if (site.text == true) { texts.push(site) }
1329. }
1330. for (held of changed) { for (n of between(held.start)) { n.__hlReseat = null } }
1331. for (t of texts) { paintText(&m, t) }
1332. for (r of regions) {
1333. // read again from the mount: a region an outer one already patched away is gone
1334. let site = null
1335. for (e of m.sites) { if (e.region && e.start == r) { site = e } }
1336. if (site != null) {
1337. if (site.isFor) { paintFor(&m, site) } else { rebuildIf(&m, site) }
1338. }
1339. }
1340. return null
1341. }
1343. // A ROW'S CHILDREN TAKE THEIR BINDINGS AGAIN. A reference inside a `for` body is not
1344. // in `m.bindings` — that list is built from the View's own walk, which does not enter a
1345. // `for` (the row is the scope, and there is one child per row) — so a host member that
1346. // feeds a row's child used to reach it only because the region REBUILT and the child
1347. // was minted again with the value of the moment (the framework gate's own case:
1348. // home.hl writes `noteOpen`, every row's RowNote takes it and hands it to RowMark, and
1349. // the grandchild's region appears). Nothing rebuilds any more, so the edge is walked
1350. // here — and only what MOVED is written and repainted, or every list write would
1351. // repaint every row's child.
1352. rebindRow(&m, s, r) {
1353. let rk = (s.rowKey == null ? '' : s.rowKey) + '#' + r.key
1354. let inner = s.rows + {}
1355. inner[s.row] = r.entry
1356. rebindNodes(&m, rowBody(m.key, s.site), inner, rk)
1357. return null
1358. }
1360. // THE ROW'S OWN NODES, for the binding edges a row's child takes again. The tree is
1361. // still what the seed carries (it is the mount's `view`), and this is a read of it, not
1362. // a walk of the DOM: the compiled row factory builds, this re-binds.
1363. rowBody(key, site) {
1364. let bp = blueprints[key]
1365. if (bp == null) { return [] }
1366. return bodyIn(bp.view, site)
1367. }
1369. bodyIn(nodes, site) {
1370. for (n of nodes) {
1371. if (n.k == 'for' && n.site == site) { return n.body }
1372. if (n.k == 'el') { let got = bodyIn(n.children, site) if (got.length > 0) { return got } }
1373. if (n.k == 'if') {
1374. let a = bodyIn(n.then, site)
1375. if (a.length > 0) { return a }
1376. let b = bodyIn(n.other, site)
1377. if (b.length > 0) { return b }
1378. }
1379. if (n.k == 'for') { let got = bodyIn(n.body, site) if (got.length > 0) { return got } }
1380. if (n.k == 'component' && n.fill != null) { let got = bodyIn(n.fill, site) if (got.length > 0) { return got } }
1381. }
1382. return []
1383. }
1385. rebindNodes(&m, nodes, rows, rk) {
1386. for (n of nodes) {
1387. if (n.k == 'component') {
1388. let kk = view.kidKey(n.path) + rk
1389. let kid = m.kids[kk]
1390. if (kid != null) {
1391. let moved = []
1392. for (b of n.bindings) {
1393. let v = null
1394. if (b.text != null) { v = view.refValue(b) }
1395. else if (b.member != null) { v = view.value({ k = 'member'; name = b.member; }, m.instance, rows) }
1396. else if (b.ref != null) { v = view.value(b.ref, m.instance, rows) }
1397. if (kid.instance[b.name] != v) { kid.instance[b.name] = v moved.push(b.name) }
1398. }
1399. if (moved.length > 0) { repaintAll(&kid, moved) }
1400. m.kids[kk] = kid
1401. }
1402. if (n.fill != null) { rebindNodes(&m, n.fill, rows, rk) }
1403. } else if (n.k == 'el') {
1404. rebindNodes(&m, n.children, rows, rk)
1405. } else if (n.k == 'if') {
1406. rebindNodes(&m, n.then, rows, rk)
1407. rebindNodes(&m, n.other, rows, rk)
1408. }
1409. }
1410. return null
1411. }
1413. refreshRow(&m, el, name, entry) {
1414. // A COMPOSED CHILD'S DOM IS ITS OWN MOUNT'S: its elements read the CHILD's
1415. // instance, and painting them from this one would show the wrong values. The walk
1416. // stops at the roots a reference claimed (`__hlKid`, set where they are claimed
1417. // and built) — and at any element another component's walk built (`__hlKey`): a
1418. // root the child's own region built after the reference was claimed is its too.
1419. // The walk goes on INTO it: a fill this host wrote stands inside the child's
1420. // elements, and that is this host's row again.
1421. if (el.__hlKid == true || (el.__hlKey != null && el.__hlKey != m.key)) {
1422. let inside = Array.from(el.children)
1423. for (k of inside) { refreshRow(&m, k, name, entry) }
1424. return null
1425. }
1426. if (el.__hlRows != null) {
1427. let next = el.__hlRows + {}
1428. next[name] = entry
1429. el.__hlRows = next
1430. // (The literal a handler on this element fires takes its row entries from
1431. // `__hlRows` when it fires — see `bind` — so there is nothing to update here.
1432. // A handler written on a REFERENCE (bindRefOns) mints one literal for the
1433. // child's roots and does not: its bindings are re-applied by rebindRow, its
1434. // own entries are not.)
1435. }
1436. rowPaint(&m, el)
1437. let kids = Array.from(el.children)
1438. for (k of kids) { refreshRow(&m, k, name, entry) }
1439. return null
1440. }
1442. // ONE ELEMENT OF A ROW, REDRAWN WHERE IT IS WRONG. The guard is the DOM's own value,
1443. // not a remembered one: nothing is serialised and nothing is compared to a digest.
1444. rowPaint(&m, el) {
1445. let site = el.__hlSite
1446. if (site == null) { return null }
1447. let comp = compiledOf(el.__hlKey == null ? m.key : el.__hlKey)
1448. if (comp == null) { return null }
1449. let entry = comp.p[site]
1450. if (entry == null) { return null }
1451. let f = entry.r
1452. if (f == null) { return null }
1453. let inst = m.instance
1454. let rws = el.__hlRows
1455. let e = el
1456. f(&e, &inst, &rws)
1457. return null
1458. }
1462. bindValue(&m, name, el, isSelect) {
1463. let held = m.instance[name] == null ? '' : '' + m.instance[name]
1464. // A SELECT IS PAINTED BY THE MEMBER FIRST: what it shows is one of its options,
1465. // and the member decides which. The server already marked it (view.hl `selected`),
1466. // so this is a no-op there; on a select the client built it is the paint. Only
1467. // then is the read-back right — before it, an unpainted select reports its FIRST
1468. // option and the read-back would write that back into the member.
1469. if (isSelect && held != '') { el.value = held }
1470. if (el.value != held) { m.instance[name] = el.value liftValue(m.chain, m.rootKind, name, el.value) }
1471. el.addEventListener('input', (ev) => {
1472. m.instance[name] = el.value
1473. // AND UP THROUGH THE REFERENCE THAT BOUND IT, if this control stands inside a
1474. // composed child: the host's member is what the app reads (see liftValue)
1475. liftValue(m.chain, m.rootKind, name, el.value)
1476. })
1477. return null
1478. }
1480. // ---- `value` IS TWO-WAY THROUGH A COMPOSITION TOO --------------------------------
1481. // `value = member` on a control is the framework's two-way name: the member paints the
1482. // field and the field writes the member (mission 132). A composed child is a mount of
1483. // its own, so that write landed on the CHILD's member and stopped there — `Field
1484. // { value = who }` left the host's `who` empty while the DOM held what was typed, and
1485. // routger's login submit read null (creator, W12). The host→child binding is an edge
1486. // the mount already carries; this is the SAME edge run backwards on input, and only
1487. // for the name `value`: every other binding name stays one-way.
1488. //
1489. // The child cannot name its host (a mount record is a value), so it names it by the
1490. // ADDRESS it already carries — the kid keys from the page or the shell — and the walk
1491. // below re-enters the host by reference. It carries on upward as long as the reference
1492. // it came through was itself a `value` binding, which is what makes a component whose
1493. // View is a bare reference to a field reach the page's member through both hops.
1494. liftValue(chain, root, target, value) {
1495. if (target != 'value') { return null }
1496. if (chain == null || chain.length == 0) { return null }
1497. if (root == 'shell') {
1498. if (shell == null) { return null }
1499. liftInto(&shell, chain, 0, target, value)
1500. } else {
1501. if (page == null) { return null }
1502. liftInto(&page, chain, 0, target, value)
1503. }
1504. return null
1505. }
1507. // walk the address down to the mount that HOLDS the last key — that mount is the host —
1508. // and write what its reference bound to the child's `target`, repainting its own sites
1509. liftInto(&m, chain, at, target, value) {
1510. if (at >= chain.length - 1) {
1511. for (b of m.bindings) {
1512. // a field path (`value = row.text`) names no member to write back into
1513. if (b.kid == chain[at] && b.target == target && b.ref == null) {
1514. if (m.instance[b.name] != value) {
1515. m.instance[b.name] = value
1516. repaintAll(&m, [b.name])
1517. }
1518. liftValue(m.chain, m.rootKind, b.name, value)
1519. }
1520. }
1521. return null
1522. }
1523. let kid = m.kids[chain[at]]
1524. if (kid == null) { return null }
1525. liftInto(&kid, chain, at + 1, target, value)
1526. m.kids[chain[at]] = kid
1527. return null
1528. }
1530. // THE ELEMENT'S LITERAL: a value of the class the module minted for the literal's
1531. // SITE (`file:line:col`, the id the JavaScript target registers at load), with the
1532. // element's own named entries — its attributes as the tree has them — and the
1533. // `for` row variables in scope as its own entries, the way the language builds a
1534. // row's literal (the row rides on the value). Built HERE and not looked up in the
1535. // instance's View: a row created after the list changed has no value there, and
1536. // a name-path cannot address ordered content. The handlers read own entries first,
1537. // then the owner's members — the owner is the component instance.
1538. literalFor(&m, el) {
1539. let rows = el.__hlRows
1540. let inst = m.instance
1541. let rws = rows
1542. // THE ELEMENT'S OWN ENTRIES, compiled: its attributes by name, with the reads
1543. // written in (compile.hl `litNamed`)
1544. let mk = el.__hlLit
1545. let named = mk == null ? {} : mk(&inst, &rws)
1546. for (k of rows.keys()) { named[k] = rows[k] }
1547. // the owner by REFERENCE: a call argument is copied, and a handler writing a
1548. // copy's member would repaint nothing
1549. return hlLiteralNew(el.__hlSite, named, &inst)
1550. }
1553. // WHAT A HANDLER WROTE, REPAINTED — the whole of the answer to a local event.
1554. // `&m` is the mount whose instance the handler's owner is, so a write reaches this
1555. // mount's sites and, through its bindings, the children that read the member.
1556. //
1557. // AND UPWARD, THROUGH A ROUTINE THE HOST HANDED DOWN. `Badge { onHide = hideBadge }`
1558. // gives the child a FUNCTION of the host's; the child's handler calls it and the
1559. // host's member moves. The child's own table cannot say so — the member it called
1560. // has no initializer there — but the HOST's does: the binding edge names the host
1561. // member (`hideBadge`), and the host's table says what calling it writes. That is
1562. // the same table read one mount up, not a new mechanism.
1563. //
1564. // ONE PATCH AT A TIME, in the order they were asked for. A patch awaits (a composed
1565. // child's module loads on first use, and every call in the language is awaited), and a
1566. // second one — the next handler, a frame from the server — running into the first
1567. // would read a branch the first is in the middle of replacing. A patch asked for while
1568. // one runs is queued, and the running one goes on with it; the state a handler wrote
1569. // is already on the instance, so the queued patch paints what stands when it runs.
1570. patch(chain, root, names, targets) {
1571. patchQueue[] = { chain = chain; root = root; names = names; targets = targets; }
1572. if (turning) { return null }
1573. turning = true
1574. while (patchQueue.length > 0) {
1575. let job = patchQueue[0]
1576. patchQueue = patchQueue.slice(1)
1577. patchAt(job.chain, job.root, job.names)
1578. patchUp(job.chain, job.root, job.targets)
1579. settle()
1580. }
1581. turning = false
1582. return null
1583. }
1585. // A MOUNT RECORD IS A VALUE (the rule this whole file is written around), so a
1586. // listener cannot hold the live one — the record it was bound against is a copy the
1587. // walk wrote back, and a region rebuild replaces it again. It holds the mount's
1588. // ADDRESS instead and the walk re-enters from the root, exactly as `liftInto` and
1589. // `fillAt` do. `refresh()` used to get this for free by starting at the root every
1590. // time; a write set has to say where it lands.
1591. patchAt(chain, root, names) {
1592. if (names == null || names.length == 0) { return null }
1593. if (root == 'shell') {
1594. if (shell == null) { return null }
1595. patchDown(&shell, chain, 0, names)
1596. } else {
1597. if (page == null) { return null }
1598. patchDown(&page, chain, 0, names)
1599. }
1600. return null
1601. }
1603. patchDown(&m, chain, at, names) {
1604. if (chain == null || at >= chain.length) {
1605. repaintAll(&m, names)
1606. return null
1607. }
1608. let kid = m.kids[chain[at]]
1609. if (kid == null) { return null }
1610. patchDown(&kid, chain, at + 1, names)
1611. m.kids[chain[at]] = kid
1612. return null
1613. }
1615. patchUp(chain, root, targets) {
1616. if (targets == null || targets.length == 0) { return null }
1617. if (chain == null || chain.length == 0) { return null }
1618. if (root == 'shell') {
1619. if (shell == null) { return null }
1620. patchInto(&shell, chain, 0, targets)
1621. } else {
1622. if (page == null) { return null }
1623. patchInto(&page, chain, 0, targets)
1624. }
1625. return null
1626. }
1628. // walk the address down to the mount that HOLDS the last key — that mount is the host
1629. // — and repaint what the routines it bound into the child write (and carry on upward,
1630. // because the host may have received them from ITS host)
1631. patchInto(&m, chain, at, targets) {
1632. if (at >= chain.length - 1) {
1633. let names = []
1634. let up = []
1635. for (b of m.bindings) {
1636. if (b.kid == chain[at] && b.ref == null && targets.includes(b.target)) {
1637. if (!up.includes(b.name)) { up.push(b.name) }
1638. for (w of memberWrites(m.key, b.name)) { if (!names.includes(w)) { names.push(w) } }
1639. }
1640. }
1641. repaintAll(&m, names)
1642. patchUp(m.chain, m.rootKind, up)
1643. return null
1644. }
1645. let kid = m.kids[chain[at]]
1646. if (kid == null) { return null }
1647. patchInto(&kid, chain, at + 1, targets)
1648. m.kids[chain[at]] = kid
1649. return null
1650. }
1653. // one listener, in its own frame so the event name it closes over is this one.
1654. // `&m` is the HOST — a handler written on a reference is the host's, and its write
1655. // set is filed under the reference's own `on` site in the host's table.
1656. listenRef(&m, &lit, el, o) {
1657. let wrote = o.sets[0]
1658. let touched = o.sets[1]
1659. let at = m.chain
1660. let root = m.rootKind
1661. el.addEventListener(o.event, (ev) => {
1662. fire(&lit, o.event, ev)
1663. patch(at, root, wrote, touched)
1664. })
1665. return null
1666. }
1668. // the elements a composed child rendered directly under `host`, between two marks in
1669. // the child list — its roots, whatever its tree put there
1670. rootsBetween(host, firstAt, to) {
1671. let out = []
1672. let i = firstAt
1673. while (i < to) {
1674. if (host.children[i] != null) { out.push(host.children[i]) }
1675. i = i + 1
1676. }
1677. return out
1678. }
1680. fire(&lit, event, ev) {
1681. if (event == 'click') { emit lit.click(ev) return null }
1682. if (event == 'input') { emit lit.input(ev) return null }
1683. if (event == 'change') { emit lit.change(ev) return null }
1684. if (event == 'submit') { emit lit.submit(ev) return null }
1685. if (event == 'keydown') { emit lit.keydown(ev) return null }
1686. if (event == 'keyup') { emit lit.keyup(ev) return null }
1687. if (event == 'focus') { emit lit.focus(ev) return null }
1688. if (event == 'blur') { emit lit.blur(ev) return null }
1689. if (event == 'dblclick') { emit lit.dblclick(ev) return null }
1690. if (event == 'pointerdown') { emit lit.pointerdown(ev) return null }
1691. if (event == 'pointermove') { emit lit.pointermove(ev) return null }
1692. if (event == 'pointerup') { emit lit.pointerup(ev) return null }
1693. if (event == 'pointercancel') { emit lit.pointercancel(ev) return null }
1694. // EVERY OTHER STANDARD DOM EVENT, by name (ticket #31): `on mouseover()` was bound
1695. // and never ran, because only the thirteen names above were written out. The
1696. // language's own dynamic emit dispatches the same handler an `emit lit.x(ev)` does.
1697. if (domEvents.includes(event)) { hlEmitArgs(&lit, event, [ev]) return null }
1698. console.warn('framework: not a standard DOM event, so nothing handles it here:', event)
1699. return null
1700. }
1702. // THE STANDARD DOM EVENTS a View handler may name beyond the thirteen `fire` writes out.
1703. // A name outside this list — a custom event an element dispatches itself — is not bound
1704. // yet: whether a View may handle one is the creator's to rule (ticket #31).
1705. static domEvents = ['mouseover' 'mouseout' 'mouseenter' 'mouseleave' 'mousedown' 'mouseup' 'mousemove' 'contextmenu' 'wheel' 'auxclick'
1706. 'pointerover' 'pointerout' 'pointerenter' 'pointerleave' 'gotpointercapture' 'lostpointercapture'
1707. 'touchstart' 'touchmove' 'touchend' 'touchcancel'
1708. 'keypress' 'focusin' 'focusout' 'beforeinput' 'compositionstart' 'compositionupdate' 'compositionend'
1709. 'select' 'selectionchange' 'invalid' 'reset' 'search' 'toggle' 'cancel' 'close'
1710. 'drag' 'dragstart' 'dragend' 'dragenter' 'dragleave' 'dragover' 'drop'
1711. 'copy' 'cut' 'paste' 'scroll' 'scrollend' 'resize' 'load' 'error' 'abort'
1712. 'play' 'pause' 'ended' 'playing' 'timeupdate' 'volumechange' 'seeking' 'seeked' 'loadeddata' 'loadedmetadata' 'canplay' 'canplaythrough' 'waiting' 'ratechange' 'durationchange' 'emptied' 'stalled' 'suspend' 'progress'
1713. 'animationstart' 'animationend' 'animationiteration' 'animationcancel' 'transitionstart' 'transitionend' 'transitionrun' 'transitioncancel']
1715. // ---- C2: MEMBERS WITH INITIALIZERS ARE DERIVATIONS -------------------------------
1716. // "Members with initializers are derivations that re-run locally when what they read
1717. // changes" (CONCEPT §2). Everything that sentence needs is compiler output: the
1718. // module's `derivations` table says what each initializer reads, and the class
1719. // carries each initializer as a callable keyed by its own site (`__derive__`, which
1720. // the emitter writes for EVERY member of EVERY class — it knows nothing of a View and
1721. // nothing of this framework; the root itself calls it instead of carrying a second
1722. // copy of the expression).
1723. //
1724. // So a write is followed by this: every derivation that reads a member which MOVED
1725. // runs again, in declaration order, and what it changes has moved too. The sites are
1726. // repainted afterwards, once per member — which is why this answers with the whole
1727. // moved set instead of painting as it goes.
1728. //
1729. // A DERIVATION IS NOT ITS OWN INPUT. A second assignment to a member at a root IS a
1730. // second initializer of that member (`out = out + 'x'` is one the language accepts),
1731. // and re-running that on a write to `out` would accumulate rather than derive. The
1732. // member's own name is therefore not one of its inputs here. Measured 2026-09-14:
1733. // none of the four reference apps has an initializer that reads its own member.
1734. //
1735. // THE BOUND IS THE NUMBER OF DERIVATIONS. One pass answers a file written top to
1736. // bottom; the rounds are there for a file that is not, and they stop where a cycle
1737. // between two members would otherwise spin.
1738. moved(&m, names) {
1739. let out = names.slice(0)
1740. let list = derivationsOf(m.key)
1741. if (list.length == 0) { return out }
1742. // A CLASS THAT COMPUTES NOTHING HERE HAS NO CALLABLE: every member of it is a
1743. // declaration without an initializer, a static, or the other realm's (demo-blog's
1744. // post page is one — its `post` comes from the server). The table still lists
1745. // those initializers, so the method is asked for before it is used.
1746. if (m.instance.__derive__ == null) { return out }
1747. let rounds = 0
1748. let again = true
1749. while (again && rounds <= list.length) {
1750. again = false
1751. rounds = rounds + 1
1752. for (d of list) {
1753. // AN EXPLICIT WRITE OUTRANKS A COMPUTED DEFAULT — the language's own rule
1754. // for construction (hlNew pins the caller's values while the root runs: "a
1755. // run-body assignment is a computed DEFAULT; an explicit caller value
1756. // outranks it"), read here for the same relation between a handler and an
1757. // initializer. demo-blog's post page is the case: its `postsChanged`
1758. // handler writes `title`, `paragraphs` and the rest from what the server
1759. // answered, and those members' initializers would otherwise recompute them
1760. // from a `_post` the browser never refreshed. What the handler wrote stands;
1761. // everything DOWNSTREAM of it is derived.
1762. if (names.includes(d.name)) { }
1763. else if (feedsFrom(d, out)) {
1764. let before = m.instance[d.name]
1765. // THE CLASS'S OWN CALLABLE, by the site the table named it with.
1766. // A member this realm does not compute (a server-realm initializer,
1767. // a static, the View) has no branch there and nothing happens.
1768. m.instance.__derive__(d.site)
1769. if (m.instance[d.name] != before) {
1770. if (!out.includes(d.name)) { out.push(d.name) again = true }
1771. }
1772. }
1773. }
1774. }
1775. return out
1776. }
1778. // does this derivation read one of the members that moved — its own name aside?
1779. feedsFrom(d, names) {
1780. for (r of d.reads) {
1781. if (r != d.name && names.includes(r)) { return true }
1782. }
1783. return false
1784. }
1786. // A WRITE SET, DERIVED AND THEN PAINTED: the one way in for every caller that knows
1787. // which members moved. Painting is the last act, so a derived member's sites are
1788. // drawn once, with its final value.
1789. repaintAll(&m, names) {
1790. if (names == null || names.length == 0) { return null }
1791. painting = painting + 1
1792. for (n of moved(&m, names)) { repaint(&m, n) }
1793. painting = painting - 1
1794. return null
1795. }
1797. // ---- repaint: a member was written; every site that reads it is redrawn ---------
1798. write(&m, name, value) {
1799. m.instance[name] = value
1800. patch(m.chain, m.rootKind, [name], [])
1801. return null
1802. }
1804. repaint(&m, name) {
1805. let sites = m.sites.slice(0) // a paint may add sites; walk what was there
1806. // …and may DROP some: a branch that goes takes the sites inside it, and a site that
1807. // is no longer registered is not painted (the list is checked again after a drop)
1808. let gen = dropGen
1809. let live = null
1810. for (s of sites) {
1811. if (s.names.includes(name)) {
1812. if (dropGen != gen) { live = liveSids(&m) gen = dropGen }
1813. if (live == null || live[s.sid] == true) { paint(&m, s, name) }
1814. }
1815. }
1816. // DOWN THE BINDINGS: a child bound to this member at its reference site gets
1817. // the value as its own member and repaints its own sites — the host knows the
1818. // binding, the child knows nothing
1819. for (b of m.bindings) {
1820. // (a child whose branch is not standing is not composed: nothing to hand down)
1821. if (b.name == name && m.kids[b.kid] != null) {
1822. let kid = m.kids[b.kid]
1823. kid.instance[b.target] = bindingValue(b, &m)
1824. // …and the CHILD's own derivations follow the member it was given
1825. repaintAll(&kid, [b.target])
1826. m.kids[b.kid] = kid
1827. }
1828. }
1829. return null
1830. }
1832. // THE DIGEST IS GONE (mission 309). `refresh()` stood here: after every DOM event and
1833. // every inbound frame it serialised every painted member of every mount to JSON and
1834. // string-compared it against the last paint, to find out what a handler had written —
1835. // a dirty-check over state, the thing FRAMEWORK_AUDIT §3 measured and named. What a
1836. // handler writes is a fact about its syntax, so the compiler now says it (`hlTablesDef`
1837. // in the component's own module) and the two callers that used to compare — a local
1838. // event's listener and an inbound frame — repaint exactly the members it names. The
1839. // `painted` map went with it: nothing compares any more.
1841. // A SITE REPAINTS WHAT THE CHANGED MEMBER FEEDS, and nothing else (FRAMEWORK_AUDIT
1842. // §5). `name` is the member that moved — the one `repaint` matched this site on.
1843. // An element can read two members in two places (`div { class = tone count }`);
1844. // writing `tone` used to set the attribute AND rewrite the element's whole text,
1845. // which swaps the text node for an identical one: a second mutation record, a lost
1846. // selection inside it, and work proportional to the site's content for a write that
1847. // never touched it (measured 2026-09-14 on the probe: `tone = 'b'` → 2 records).
1848. // A member read in BOTH places still repaints both — the two tests below are
1849. // independent, and `names` carries the member once per place it is read.
1850. // THE COMPONENT'S COMPILED PAINT (mission 313). The framework compiled this View's
1851. // bound spots into statements when it produced the module (plugins/web/compile.hl):
1852. // `p` writes what one member feeds, `r` rewrites a row's element where the DOM does not
1853. // already hold the value. A component whose View binds nothing has no entry, and an
1854. // element with no bound spot has none either — both are "nothing to paint".
1855. compiledPaint(key, site) {
1856. if (site == null) { return null }
1857. let all = window.__hlPaint
1858. if (all == null) { return null }
1859. let t = all[key]
1860. if (t == null) { return null }
1861. return t[site]
1862. }
1864. paint(&m, s, name) {
1865. // a head site writes the document's head, not an element of the page
1866. if (s.head == true) { paintHead(&m, s.names[0]) return null }
1867. if (s.region != true && s.el != null && placedOff(s.el)) {
1868. // a fill's site whose range left in this very walk: it goes in settle()
1869. if (dropDue(s.el)) { return null }
1870. return staleSite(s)
1871. }
1872. // a text leaf standing in a list is its own site
1873. if (s.text == true) { paintText(&m, s) return null }
1874. if (s.region) {
1875. // A `for` IS KEYED AND PATCHED (C3/C9): its rows are diffed by the record's id
1876. // and nothing else on the host is touched. An `if` re-runs the list it stands
1877. // in — the compile step registered that list's own walk under this site.
1878. if (s.isFor) { paintFor(&m, s) return null }
1879. rebuildIf(&m, s)
1880. return null
1881. }
1882. // THE COMPILED STATEMENTS FOR THIS SITE: one per bound spot, with the read written
1883. // in, under the member each reads. This is the walk the old hl:web did over the element's
1884. // node — its attributes, then its text leaves — decided when the component was
1885. // compiled instead of on every paint.
1886. let comp = compiledOf(m.key)
1887. if (comp == null) { return null }
1888. let entry = comp.p[s.site]
1889. if (entry == null) { return null }
1890. let f = entry.p
1891. if (f == null) { return null }
1892. let el = s.el
1893. let inst = m.instance
1894. let rws = s.rows
1895. f(&el, &inst, &rws, name)
1896. return null
1897. }
1899. // AN `if` MOVED: ITS BRANCH IS REPLACED, AND NOTHING ELSE (ticket #32, #41). The whole
1900. // host used to be emptied and walked again, so every sibling of the `if` — an input
1901. // being typed into, a `script { src }` (which then ran again), a custom element with
1902. // state of its own — came back as a NEW node, and a write to the condition that did
1903. // not even change it cost the input its focus. The branch is what stands between the
1904. // region's marks: it leaves with the sites registered in it, the branch that stands now
1905. // is built into a fragment, what the walk registered on the fragment is re-homed on the
1906. // host, and the fragment takes the old branch's place — before the close mark.
1907. rebuildIf(&m, s) {
1908. let host = s.el
1909. let start = s.start
1910. if (!standing(host, start)) {
1911. // dropped while this paint was on its way (a paint that was running when the
1912. // range holding it left, and comes back for another round): it is gone, and
1913. // nothing is painted — a site still REGISTERED here is the bug
1914. if (!isLive(&m, s)) { return null }
1915. if (start != null && dropDue(start)) { return null }
1916. return staleSite(s)
1917. }
1918. let inst = m.instance
1919. let rws = s.rows
1920. let f = s.read
1921. // ONE REBUILD OF A BRANCH AT A TIME. Building one can wait (a composed child's
1922. // module loads on first use), and a write in that time — the next handler, a frame
1923. // from the server — would rebuild it again from the same old branch, and both
1924. // fragments would stand. It is remembered, and the running one builds again.
1925. if (start.__hlBusy != null) { start.__hlBusy = 'again' return null }
1926. start.__hlBusy = 'busy'
1927. let branch = f(&inst, &rws) ? walkOf(m.key, 't', s.site) : walkOf(m.key, 'e', s.site)
1928. let old = between(start)
1929. // A SHELL BRANCH THAT HOLDS THE SLOT: the page's DOM lives under the slot element and
1930. // is kept aside, for the rebuilt branch's slot to adopt (slotShell)
1931. if (m.isShell && slotEl != null) {
1932. for (n of old) { if (n == slotEl || (n.contains != null && n.contains(slotEl))) { detachedSlot = slotEl } }
1933. }
1934. // THE OLD BRANCH IS DISPOSED FIRST, the one way every range is (dropRange, as a row
1935. // that leaves is): its sites, and its children with theirs — so the new branch
1936. // composes its children afresh, as the server does. Patches run one at a time
1937. // (patch), so nothing registers into the old branch while the new one is built.
1938. dropRange(&m, host, old, s.fill)
1939. let frag = document.createDocumentFragment()
1940. let before = sidNext
1941. run(branch, &m, &m, frag, 0, s.rows, s.rowKey != null ? s.rowKey : '', s.fill, true, null)
1942. rehome(&m, frag, host, before)
1943. // A BRANCH AROUND THIS ONE WAS REPLACED WHILE THIS ONE WAS BEING BUILT: it took this
1944. // region with it, and the new branch never stands — what its walk registered goes
1945. if (!standing(host, start)) {
1946. start.__hlBusy = null
1947. dropRange(&m, host, Array.from(frag.childNodes), s.fill)
1948. return null
1949. }
1950. if (old.length > 0) {
1951. let r = 1
1952. while (r < old.length) { old[r].remove() r = r + 1 }
1953. old[0].replaceWith(frag)
1954. } else {
1955. host.insertBefore(frag, start.__hlEnd)
1956. }
1957. // THE SLOT WAS PUT ASIDE AND THE BRANCH THAT NOW STANDS PLACES NONE: the page is
1958. // dropped
1959. if (m.isShell && detachedSlot != null) {
1960. detachedSlot = null
1961. dropPage()
1962. }
1963. arrived()
1964. let again = start.__hlBusy == 'again'
1965. start.__hlBusy = null
1966. if (again) { rebuildIf(&m, s) }
1967. return null
1968. }
1970. // the tree node of an element by its key path
1972. // ---- create: DOM from a tree, for a route component that was not on the page ------
1973. create(&m, host) {
1974. let f = walkOf(m.key, 'v', null)
1975. run(f, &m, &m, host, 0, {}, '', null, true, null)
1976. return null
1977. }
1979. // the shell's View is a `body` element and the document already has one: the walk runs
1980. // against document.body, and the element itself only takes the marks a region rebuild
1981. // on it would need
1982. markHost(&m, host, site) {
1983. host.__hlSite = site
1984. host.__hlKey = m.key
1985. if (host.__hlRows == null) { host.__hlRows = {} }
1986. return null
1987. }
1990. // ---- WHOSE FRAGMENT IS THIS? ------------------------------------------------------
1991. // A fill carries the ADDRESS of the mount that wrote it — the kid keys from the page or
1992. // the shell. While the walk is one composition deep the frame's `owner` IS that mount
1993. // and is used directly, which costs nothing and cannot go stale. Deeper — a fill passed
1994. // on through a second reference — it is not, and the mount is re-entered from the root
1995. // by that address instead.
1996. ownsFill(m, fill) {
1997. if (m == null || fill == null) { return false }
1998. if (fill.chain == null || m.chain == null) { return false }
1999. if (fill.rootKind != m.rootKind) { return false }
2000. if (fill.chain.length != m.chain.length) { return false }

Only the first lines are shown.