ident

109.6 KB

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

Only the first lines are shown.