tracker

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

Only the first lines are shown.