calendar

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

Only the first lines are shown.