tracker

51.0 KB

1. // plugins/web/compile.hl — THE FRAMEWORK COMPILES EACH COMPONENT.
2. //
3. // Mission 313 (the creator, 15 Sep 14:30: "clientside interpreter + table against
4. // component code per component, no tables needed"). The old hl:web ships ONE generic client
5. // that walks a tree the seed carries: it pairs elements with nodes, asks a table which
6. // members each element shows, asks `view.value` what each bound spot holds, and does it
7. // again on every paint. hl:web ships the ANSWERS instead — this file writes each
8. // component's own code, once, where the old hl:web would have walked.
9. //
10. // WHAT IS EMITTED, per component, beside the class `hlJs` compiled:
11. //
12. // v(c,m,o,host,i,rows,rk,fill,cr,opt) the component's View, unrolled: one
13. // statement per element, per handler, per
14. // bound spot. `cr` false CLAIMS the server's
15. // DOM (take host.children[i], step on), `cr`
16. // true CREATES it — the two walks the old hl:web
17. // spells out separately, which differ only in
18. // where an element comes from.
19. // b["<for site>"] one `for` body — the row factory the keyed
20. // region builds a row with.
21. // t/e["<if site>"] an `if`'s two branches.
22. // f["<reference site>"] the fragment this component writes into a
23. // child's `slot` — built in THIS frame, which
24. // is why it is this component's code.
25. // p["<element site>"] the paint statements: `p` writes what one
26. // member feeds (the old hl:web's paint(&m,s,name)),
27. // `r` rewrites a row's element where the DOM
28. // does not already hold it (rowPaint).
29. //
30. // The generated code calls a FIXED runtime (client.hl) for everything that is not this
31. // component: the mount records, the keyed region diff, the binding edges, the
32. // derivations, the socket, navigation. It never looks anything up in a table — the
33. // names, the sites and the write sets are written into the statements.
34. //
35. // It is TEXT the framework produces, served from memory beside the module (WebFramework
36. // `module`), never a JavaScript file under plugins/.
37. import { newline, tab } from './view.hl'
38. import HlwView from './view.hl'
40. // ---- the emitted half --------------------------------------------------------------
41. module(gen, key, nodes, fnTable) {
42. fns = [] // the sub-walks: row bodies, if branches, fills
43. done = {}
44. rowVars = []
45. tbl = tableOf(gen, key) // what the language says about this file, read once
46. regions = regionIndex(tbl) // a `for`'s list reads, an `if`'s condition reads
47. // A SHELL'S VIEW IS A `body` ELEMENT and the document already has one: the walk runs
48. // against document.body itself, so the root list is that element's children and the
49. // element only takes the marks a region rebuild on it would need.
50. let roots = nodes
51. let bodySite = null
52. if (nodes.length == 1 && nodes[0].k == 'el' && nodes[0].tag == 'body') {
53. roots = nodes[0].children
54. bodySite = nodes[0].site
55. }
56. let root = walkTop(key, roots)
57. if (bodySite != null) {
58. root = root.replace('let r=rows;', 'let r=rows;await c.markHost(m,host,' + str(bodySite) + ');')
59. }
60. let src = ';(function(){var g=(typeof globalThis!=="undefined"?globalThis:window);'
61. src = src + 'var C=(g.__hlC=g.__hlC||{});'
62. // the element a claim takes or a create makes — the one shape both walks share; a create
63. // inside an svg (or an svg itself) is made in the SVG namespace, as the parser makes it
64. // THE PRELUDE, one per module: the element a claim takes or a create makes, and the
65. // two reads. A read written out in full — `(r["title"]!=null?r["title"]:inst["title"])`
66. // — is 45 bytes and a component's View holds dozens of them; named, it is 16. The
67. // rule is the same rule (a `for` row variable in scope wins over a member of the
68. // same name, and a field path walks into it), spelled once.
69. // A claim also moves the host's CURSOR — the last node the walk took there — which is
70. // where a text leaf and a region's mark are looked for next (client.hl `leafNode`,
71. // `markAt`).
72. src = src + 'function A(cr,host,i,tag){if(cr){if(tag==="svg"||(host.namespaceURI==="http://www.w3.org/2000/svg"&&host.localName.toLowerCase()!=="foreignobject")){return document.createElementNS("http://www.w3.org/2000/svg",tag);}return document.createElement(tag);}var e=host.children[i];if(e!=null){host.__hlCur=e;}return e;}'
73. src = src + 'function S(v){return v==null?"":""+v;}'
74. src = src + 'async function X(t,r,q){return await g.__hlX(t,q,r);}'
75. src = src + 'function RV(r,q,n){return r[n]!=null?r[n]:q[n];}'
76. src = src + 'function RF(r,q,n,p){var v=RV(r,q,n);for(var k=0;k<p.length;k++){if(v==null)return null;v=v[p[k]];}return v;}'
77. src = src + 'var B={},T={},E={},F={},P={};'
78. // ONE FUNCTION PER LIST, however many sites reach it: a nested walk is written once
79. // and named — emitting it per site made the reference app's home page 215 KB of the
80. // same code over and over.
81. let wi = 0
82. for (f of fns) {
83. wi = wi + 1
84. let name = 'w' + wi
85. src = src + 'var ' + name + '=' + f.src + ';'
86. for (site of f.sites) { src = src + f.slot + '[' + str(site) + ']=' + name + ';' }
87. }
88. let paints = []
89. collectPaints(&paints, roots)
90. for (e of paints) { src = src + 'P[' + str(e.site) + ']={p:' + e.paint + ',r:' + e.row + '};' }
91. src = src + 'C[' + str(key) + ']={v:' + root + ',b:B,t:T,e:E,f:F,p:P'
92. // THE ANSWERS A LOOKUP STILL NEEDS, and only those. A local event's write set stands
93. // at its own listener and a region's names at its own region — written into the
94. // call. These three are asked for by NAME at run time and cannot be: an inbound
95. // frame names its event, a routine handed down names the member that holds it, and
96. // a write set names the derivations that follow it.
97. src = src + ',ev:' + eventMap() + ',mw:' + memberMap() + ',dv:' + derivList() + ',fn:' + fnMap(fnTable) + '};'
98. return src + '})();' + newline
99. }
101. tbl = null
102. regions = {}
104. // WHAT A FUNCTION VALUE WRITES, by the site it was made at (tickets #98, #99): the
105. // module announces a function's return with its site, and the browser repaints this
106. // set — the members it writes, closed over the methods it calls and the events it
107. // emits, the same closure a handler's set gets. A function that writes nothing has
108. // no entry.
109. fnMap(fns) {
110. let bySite = {}
111. if (fns != null) {
112. for (f of fns) {
113. let names = closeWrites(tbl, f.writes, f.reads)
114. if (names.length > 0) { bySite[f.site] = names }
115. }
116. }
117. return mapOf(bySite)
118. }
120. // what a DECLARED handler writes, by event: one entry per event name, unioned
121. eventMap() {
122. let byEvent = {}
123. for (h of tbl.handlers) {
124. if (!h.nested) {
125. let have = byEvent[h.event] == null ? [] : byEvent[h.event]
126. for (w of closeWrites(tbl, h.writes, h.reads)) { if (!have.includes(w)) { have.push(w) } }
127. byEvent[h.event] = have
128. }
129. }
130. return mapOf(byEvent)
131. }
133. // A MEMBER HOLDING A ROUTINE: what calling it writes is what its initializer writes
134. memberMap() {
135. let byName = {}
136. for (m of tbl.members) {
137. if (m.nodes != null) { byName[m.name] = memberNames(m.nodes.writes) }
138. }
139. return mapOf(byName)
140. }
142. // EVERY INITIALIZER, IN DECLARATION ORDER, with the members it reads — the whole of
143. // what a derivation needs; the class carries the computation itself as `__derive__`.
144. // `srv` (written only when true, same rule as `isStatic` on a read — every byte here
145. // ships to the browser) marks a SERVER REFERENCE SITE (COMPONENTS.md §9.1/§9.3): an
146. // initializer that calls an imported class (`import Store from './store.hl'`, then
147. // `Store.chatsOf(…)` — `hlDenotes`'s own `kind: 'class'`, not a second resolution).
148. // It is evaluated per request, on the SERVER, and its value ships into the page as
149. // state; `client.hl`'s `moved()` must never call it locally — routger's `conversations
150. // = … ? store.chatsOf(session.user.id) : []` reached `hl:time`, which ships no client
151. // half, the moment a session sync (0b17f65b) made `session` move in the browser and
152. // `moved()` re-ran every derivation that reads it. A fresh value for a server
153. // reference site ships in `sync` instead (WebFramework.hl `serverSyncNames`).
154. derivList() {
155. let src = '['
156. let first = true
157. for (d of tbl.derivations) {
158. if (!first) { src = src + ',' }
159. first = false
160. src = src + '{name:' + str(d.name) + ',site:' + str(d.site) + ',reads:' + list(memberNames(d.reads))
161. if (d.serverSite) { src = src + ',srv:true' }
162. src = src + '}'
163. }
164. return src + ']'
165. }
167. // does this read list (RAW — hlDenotes's own kind per name, before `memberNames`
168. // narrows it to members) reach an imported class or a braced static of one — the two
169. // forms COMPONENTS.md §9.1/§9.3 calls "a call on an imported class" (`import Store
170. // from './store.hl'`, `Store.noteRows()`, OR the form the maintained demos actually
171. // use, `import { postRow } from './store.hl'`, `postRow(id)`)? See `derivList` above.
172. serverSite(reads) {
173. if (reads == null) { return false }
174. for (r of reads) { if (r.kind == 'class' || r.kind == 'import') { return true } }
175. return false
176. }
178. mapOf(byName) {
179. let src = '{'
180. let first = true
181. for (k of byName.keys()) {
182. if (!first) { src = src + ',' }
183. first = false
184. src = src + str(k) + ':' + list(byName[k])
185. }
186. return src + '}'
187. }
189. // the write set and the read set of the handler at this site, closed over the methods
190. // it calls and the handlers it emits to — computed here, written into the listener
191. handlerSets(site) {
192. for (h of tbl.handlers) {
193. if (h.nested && h.site == site) {
194. return list(closeWrites(tbl, h.writes, h.reads)) + ',' + list(closeReads(tbl, h.reads))
195. }
196. }
197. return '[],[]'
198. }
200. regionNamesAt(site) {
201. let names = regions[site]
202. return list(names == null ? [] : names)
203. }
205. fns = []
207. // ---- the walk, unrolled ------------------------------------------------------------
208. // `top` marks the View's own root list: an element there is a COMPOSITION ROOT — a
209. // reference above may have overwritten some of its events and put classes on it, which
210. // is what `opt` carries (the old hl:web's rootOverwrites and withRootClasses).
211. walk(key, nodes) {
212. return plain(key, nodes)
213. }
215. // a list's walk
216. plain(key, nodes) {
217. let body = ''
218. for (n of nodes) { body = body + node(key, n, false, false) }
219. return 'async function(c,m,o,host,i,rows,rk,fill,cr,opt){let inst=m.instance;let r=rows;' + body + 'return i;}'
220. }
222. // the View's own root list, whose elements are composition roots
223. walkTop(key, nodes) {
224. let body = ''
225. for (n of nodes) { body = body + node(key, n, true, false) }
226. return 'async function(c,m,o,host,i,rows,rk,fill,cr,opt){let inst=m.instance;let r=rows;' + body + 'return i;}'
227. }
229. // a sub-walk, registered under its own site so the runtime can reach it by name
230. // A SUB-WALK IS WRITTEN ONCE, however often the compile reaches its list.
231. sub(key, nodes, slot, site) {
232. if (done[slot + ' ' + site] != null) { return null }
233. done[slot + ' ' + site] = true
234. fns.push({ slot = slot; sites = [site]; src = walk(key, nodes); })
235. return null
236. }
238. done = {}
240. node(key, n, top, filterOns) {
241. if (n.k == 'el') { return elNode(key, n, top) }
242. if (n.k == 'text') { return 'if(cr){host.appendChild(document.createTextNode(' + str(n.text) + '));}else{await c.leafAt(host,false,i,null,' + str(n.text) + ');}' }
243. if (n.k == 'on') {
244. // A REFERENCE ABOVE MAY HAVE OVERWRITTEN THIS EVENT on the composition root:
245. // the root's own handler for it is dropped and the reference's stands instead
246. // (the old hl:web's withoutOns, which applies to the root element's direct children).
247. let guard = filterOns ? 'if(!(opt&&opt.over&&opt.over.indexOf(' + str(n.event) + ')>=0)){' : '{'
248. return guard + 'await c.onAt(m,host,' + str(n.event) + ',' + str(n.site) + ',rows,' + handlerSets(n.site) + ');}'
249. }
250. if (n.k == 'member' && n.name == 'slot') {
251. // the SHELL's slot is where the route component hangs; a child's slot is the
252. // fragment its host wrote, and the host's frame builds it
253. return 'if(m.isShell){i=await c.slotShell(m,host,i,cr);}else if(fill!=null){i=await c.slotFill(m,o,host,i,fill,cr);}'
254. }
255. // A TEXT LEAF STANDING IN A LIST — an `if` branch, a `for` body — beside elements or
256. // alone: its own text node, and a site of the member it reads (or of the row it
257. // stands in), painted by rewriting that node.
258. if (n.k == 'member' || n.k == 'field' || n.k == 'expr') {
259. let names = readNames(n)
260. return 'await c.textAt(m,host,cr,async function(inst,r){return ' + textRead(n) + ';},' + list(names) + ',rows,rk);'
261. }
262. if (n.k == 'for') {
263. // THE ROW VARIABLE IS IN SCOPE INSIDE THE BODY, and a read of it is the ROW's,
264. // not a member of the instance — the language resolves it that way and the site
265. // sets must say the same, or a member of the same name would paint the row.
266. rowVars.push(n.row)
267. sub(key, n.body, 'B', n.site)
268. rowVars.pop()
269. return 'i=await c.forAt(m,o,host,i,' + str(n.site) + ',' + str(n.row) + ',function(inst,r){return ' + rawRead(n.list) + ';},rows,rk,fill,cr,' + regionNamesAt(n.site) + ');'
270. }
271. if (n.k == 'if') {
272. sub(key, n.then, 'T', n.site)
273. sub(key, n.other, 'E', n.site)
274. return 'i=await c.ifAt(m,o,host,i,' + str(n.site) + ',function(inst,r){return ' + rawRead(n.cond) + ';},rows,rk,fill,cr,' + regionNamesAt(n.site) + ');'
275. }
276. if (n.k == 'component') {
277. if (n.fill != null && n.fill.length > 0) { sub(key, n.fill, 'F', n.site) }
278. return 'i=await c.kidAt(m,host,i,' + kidSpec(n) + ',rows,rk,fill,cr,opt);'
279. }
280. return ''
281. }
283. // ---- an element --------------------------------------------------------------------
284. elNode(key, n, top) {
285. let src = '{let el=A(cr,host,i,' + str(n.tag) + ');if(!cr){i=i+1;}'
286. src = src + 'if(el==null){await c.acqFail(' + str(n.tag) + ',host);}else{'
287. // the attributes, on the walk that BUILDS the element (a claim takes the server's)
288. src = src + 'if(cr){' + createAttrs(n) + (top ? 'await c.rootClasses(el,opt);' : '') + 'host.appendChild(el);}'
289. src = src + 'el.__hlRows=rows;el.__hlSite=' + str(n.site) + ';el.__hlKey=' + str(key) + ';'
290. // the element's own named entries, for the literal a handler on it fires
291. src = src + 'el.__hlLit=function(inst,r){return ' + litNamed(n) + ';};'
292. let names = siteNames(n)
293. let valueMember = 'null'
294. for (a of n.attrs) { if (a.member != null && a.name == 'value') { valueMember = str(a.member) } }
295. let sited = ''
296. if (names.length > 0 || valueMember != 'null') {
297. sited = 'await c.siteAt(m,el,' + list(names) + ',' + str(n.site) + ',' + valueMember + ',' + (n.tag == 'select' ? 'true' : 'false') + ',rows);'
298. }
299. let kids = ''
300. // AN ELEMENT THAT HOLDS ONLY TEXT is painted whole (`textContent`, see the paints):
301. // built, it gets that text as one node; claimed, the server's is taken as it stands
302. let whole = textOf(n)
303. if (whole != null) {
304. kids = 'if(cr){host.appendChild(document.createTextNode(' + whole + '));}'
305. for (c of n.children) { if (c.k == 'on') { kids = kids + node(key, c, false, top) } }
306. }
307. else if (mixed(n)) { kids = mixedKids(key, n, top) }
308. else { for (c of n.children) { kids = kids + node(key, c, false, top) } }
309. let inner = '{let host=el;let i=0;' + kids + '}'
310. // A SELECT IS SITED AFTER ITS OPTIONS: the member decides which option stands, and
311. // the read-back that `siteAt` does reports nothing before they exist.
312. if (n.tag == 'select') { src = src + inner + (selectValue(n) == 'null' ? '' : 'if(cr){await c.applySelectAt(m,el,' + selectValue(n) + ');}') + sited }
313. else { src = src + sited + inner }
314. return src + '}}'
315. }
317. // A TEXT LEAF BESIDE AN ELEMENT OR A REGION (ticket #86 follow-up): `td { d.n if (…) {…} }`
318. // cannot be painted through `textContent`, which would wipe the branch. Each RUN of
319. // adjacent leaves is one text node, held on the element (`__hlLeaves`, by the run's
320. // index) where the walk builds or claims it, and the paints rewrite that node alone.
321. mixed(n) {
322. if (textOf(n) != null) { return false }
323. for (c of n.children) { if (isReadNode(c)) { return true } }
324. return false
325. }
327. isLeaf(c) { return c.k == 'text' || isReadNode(c) }
329. // a node that shows a value read at render time: a member, a field path, or an expression
330. isReadNode(c) { return (c.k == 'member' || c.k == 'field' || c.k == 'expr') && c.name != 'slot' }
332. // the members whose move repaints a read (`Style` and a `for` row variable are not members
333. // of the instance), and the guard a paint writes for them
334. readNames(c) {
335. let out = []
336. for (nm of (c.k == 'expr' ? c.names : [c.name])) {
337. if (nm != 'Style' && !rowVars.includes(nm) && !out.includes(nm)) { out.push(nm) }
338. }
339. return out
340. }
342. guardOf(c) {
343. let g = ''
344. for (nm of readNames(c)) { g = g + (g == '' ? '' : '||') + 'n===' + str(nm) }
345. return g
346. }
348. // the runs of adjacent leaves, in order; an `on` renders nothing and splits none
349. runsOf(n) {
350. let out = []
351. let run = []
352. for (c of n.children) {
353. if (isLeaf(c)) { run.push(c) }
354. else if (c.k != 'on') {
355. if (run.length > 0) { out.push(run) }
356. run = []
357. }
358. }
359. if (run.length > 0) { out.push(run) }
360. return out
361. }
363. runText(run) {
364. let src = '""'
365. for (c of run) { src = src + '+(' + (c.k == 'text' ? str(c.text) : textRead(c)) + ')' }
366. return src
367. }
369. runFeeds(run) {
370. for (c of run) { if (c.k != 'text') { return true } }
371. return false
372. }
374. mixedKids(key, n, top) {
375. let kids = ''
376. let run = []
377. let k = 0
378. for (c of n.children) {
379. if (isLeaf(c)) { run.push(c) }
380. else {
381. if (c.k != 'on' && run.length > 0) { kids = kids + leafRun(run, k) k = k + 1 run = [] }
382. kids = kids + node(key, c, false, top)
383. }
384. }
385. if (run.length > 0) { kids = kids + leafRun(run, k) }
386. return kids
387. }
389. // EVERY CALL INTO THE CLIENT IS AWAITED: its methods are async in the browser, and one
390. // not awaited runs its DOM work after the walk has gone on — a built leaf then lands
391. // after the elements that follow it (ticket #104).
392. leafRun(run, k) {
393. if (!runFeeds(run)) { return 'if(cr){host.appendChild(document.createTextNode(' + runText(run) + '));}else{await c.leafAt(host,false,i,null,' + runText(run) + ');}' }
394. return 'await c.leafAt(host,cr,i,' + k + ',' + runText(run) + ');'
395. }
397. // the attributes an element is BUILT with — a bound one written in, a literal one as it
398. // stands. `value` is a property once the page is live and an attribute as the control's
399. // default; a textarea has no value attribute at all and a select's value is an option.
400. createAttrs(n) {
401. let src = ''
402. for (a of n.attrs) {
403. if (isBool(a)) {
404. src = src + '{' + boolWrite(a, rawRead(a.member != null ? { k = 'member'; name = a.member; } : a.ref)) + '}'
405. } else {
406. let rd = a.member != null ? readOf({ k = 'member'; name = a.member; }) : (a.ref != null ? readOf(a.ref) : str(a.text))
407. src = src + '{let v=' + rd + ';'
408. if (a.extra != null) { src = src + 'v=v+" "+' + str(a.extra) + ';' }
409. if (n.tag == 'select' && a.name == 'value') { src = src + '}' }
410. else if (a.name == 'value') {
411. src = src + 'if(el.value!=null){el.value=v;' + (n.tag == 'textarea' ? '' : 'el.setAttribute("value",v);') + '}else{el.setAttribute("value",v);}}'
412. } else { src = src + 'el.setAttribute(' + str(a.name) + ',v);}' }
413. }
414. }
415. if (boundValue(n)) { src = src + 'el.setAttribute("autocomplete","off");' }
416. return src
417. }
419. // a BOUND boolean attribute — a literal one was decided at build (WebFramework `element`)
420. isBool(a) {
421. return (a.member != null || a.ref != null) && v.isBoolAttr(a.name)
422. }
424. // A BOUND BOOLEAN ATTRIBUTE, WRITTEN (ticket #33): set when the value is on, REMOVED when
425. // it is off — the markup's rule (view.boolAttrs) — and the DOM property with it, because
426. // once the page is live `checked` is the property and the attribute only its default.
427. boolWrite(a, raw) {
428. let prop = a.name == 'readonly' ? 'readOnly' : a.name
429. return 'let on=!!' + raw + ';if(on){el.setAttribute(' + str(a.name) + ',"");}else if(el.removeAttribute){el.removeAttribute(' + str(a.name) + ');}if(' + str(prop) + ' in el&&el[' + str(prop) + ']!==on){el[' + str(prop) + ']=on;}'
430. }
432. // view.hl's `boundValue`, to the letter: a FORM CONTROL whose `value` reads a member or
433. // a field, and not one the author gave an `autocomplete` of its own
434. boundValue(n) {
435. if (n.tag != 'input' && n.tag != 'textarea' && n.tag != 'select') { return false }
436. let bound = false
437. for (a of n.attrs) {
438. if (a.name == 'autocomplete') { return false }
439. if (a.name == 'value' && (a.member != null || a.ref != null)) { bound = true }
440. }
441. return bound
442. }
444. selectValue(n) {
445. for (a of n.attrs) {
446. if (a.name == 'value') {
447. if (a.member != null) { return readOf({ k = 'member'; name = a.member; }) }
448. if (a.ref != null) { return readOf(a.ref) }
449. return str(a.text)
450. }
451. }
452. return 'null'
453. }
455. // the element's own entries as the literal sees them — its attributes by name, then the
456. // `for` row variables in scope (the row rides on the value)
457. litNamed(n) {
458. let src = '{'
459. let first = true
460. for (a of n.attrs) {
461. if (!first) { src = src + ',' }
462. first = false
463. let v = a.member != null ? rawRead({ k = 'member'; name = a.member; }) : (a.ref != null ? rawRead(a.ref) : str(a.text))
464. src = src + str(a.name) + ':' + v
465. }
466. return src + '}'
467. }
469. // the reference's own description, written at its use site: what it binds, what it
470. // overwrites, the classes the host's `#Child` rule puts on it
471. kidSpec(n) {
472. let src = '{key:' + str(n.key) + ',kid:' + str(kidKeyOf(n)) + ',site:' + str(n.site) + ',fill:' + ((n.fill != null && n.fill.length > 0) ? 'true' : 'false')
473. src = src + ',bindings:['
474. let first = true
475. for (b of n.bindings) {
476. if (!first) { src = src + ',' }
477. first = false
478. src = src + '{name:' + str(b.name) + ',member:' + (b.member == null ? 'null' : str(b.member))
479. src = src + ',ref:' + (b.ref == null ? 'null' : 'function(inst,r){return ' + rawRead(b.ref) + ';}')
480. src = src + ',refName:' + (b.ref == null ? 'null' : str(b.ref.name))
481. src = src + ',text:' + (b.text == null ? 'null' : 'true') + ',value:' + (b.text == null ? 'null' : refLiteral(b)) + '}'
482. }
483. src = src + '],ons:['
484. first = true
485. for (o of n.ons) {
486. if (!first) { src = src + ',' }
487. first = false
488. src = src + '{event:' + str(o.event) + ',site:' + str(o.site) + ',sets:[' + handlerSets(o.site) + ']}'
489. }
490. src = src + '],classes:' + list(n.classes == null ? [] : n.classes) + '}'
491. return src
492. }
494. // view.hl's kidKey: the reference's path, joined — the key the server mounted it under
495. kidKeyOf(n) {
496. let out = ''
497. for (p of n.path) { out = out + '/' + p }
498. return out
499. }
501. // the value a literal binding carries — view.refValue, folded at compile time
502. refLiteral(b) {
503. if (b.kind == 'folded') { return jsValue(b.value) }
504. if (b.kind == 'number') { return '' + b.text }
505. if (b.kind == 'boolean') { return b.text == 'true' ? 'true' : 'false' }
506. if (b.kind == 'null_literal') { return 'null' }
507. return str(b.text)
508. }
510. jsValue(v) {
511. if (v == null) { return 'null' }
512. if (hlTypeName(v) == 'String') { return str(v) }
513. if (hlTypeName(v) == 'Boolean') { return v ? 'true' : 'false' }
514. if (hlTypeName(v) == 'Number') { return '' + v }
515. return JSON.stringify(v)
516. }
518. // ---- the site set: what this element SHOWS ------------------------------------------
519. // The old hl:web asked the module's table which members the element at this site reads. The
520. // answer is a fact about the View, so it is written in: the members its bound
521. // attributes and its text leaves name. `Style` is folded into a class name at build and
522. // the shell's `slot` is swapped by navigation — neither is ever painted, and neither is
523. // a member read that reaches here (a `for` row variable resolves to its row).
524. siteNames(n) {
525. let out = []
526. for (a of n.attrs) {
527. if (a.member != null && a.member != 'Style' && !rowVars.includes(a.member) && !out.includes(a.member)) { out.push(a.member) }
528. // A FIELD OF A MEMBER (`value = f.title`, ticket #93) is a read of the member:
529. // a write to `f.title`, or a new `f`, moves `f`, and this element repaints
530. if (a.ref != null && a.ref.name != 'Style' && !rowVars.includes(a.ref.name) && !out.includes(a.ref.name)) { out.push(a.ref.name) }
531. }
532. for (c of n.children) {
533. if (isReadNode(c)) {
534. for (nm of readNames(c)) { if (!out.includes(nm)) { out.push(nm) } }
535. }
536. }
537. return out
538. }
540. rowVars = []
542. // ---- the paints ---------------------------------------------------------------------
543. collectPaints(&out, nodes) {
544. for (n of nodes) {
545. if (n.k == 'el') {
546. let paint = paintFn(n)
547. let row = rowFn(n)
548. if (paint != null || row != 'null') {
549. out.push({ site = n.site; paint = paint == null ? 'null' : paint; row = row; })
550. }
551. collectPaints(&out, n.children)
552. } else if (n.k == 'for') { collectPaints(&out, n.body) }
553. else if (n.k == 'if') { collectPaints(&out, n.then) collectPaints(&out, n.other) }
554. else if (n.k == 'component') { if (n.fill != null) { collectPaints(&out, n.fill) } }
555. }
556. return null
557. }
559. // `paint(&m, s, name)`, compiled: the bound attributes under the member each reads, and
560. // the text where the member that moved stands among the leaves.
561. paintFn(n) {
562. let body = ''
563. for (a of n.attrs) {
564. if (a.member != null) {
565. body = body + 'if(n===' + str(a.member) + '){' + attrWrite(n, a, readOf({ k = 'member'; name = a.member; })) + '}'
566. } else if (a.ref != null) {
567. // a field of a member paints when the MEMBER moves (ticket #93)
568. body = body + 'if(n===' + str(a.ref.name) + '){' + attrWrite(n, a, readOf(a.ref)) + '}'
569. }
570. }
571. let text = textOf(n)
572. if (text != null) {
573. let guard = ''
574. for (c of n.children) {
575. if (isReadNode(c)) {
576. let g = guardOf(c)
577. if (g != '') {
578. if (guard != '') { guard = guard + '||' }
579. guard = guard + g
580. }
581. }
582. }
583. if (guard != '') { body = body + 'if(' + guard + '){el.textContent=' + text + ';}' }
584. } else if (mixed(n)) {
585. let k = 0
586. for (run of runsOf(n)) {
587. let guard = ''
588. for (c of run) {
589. if (c.k != 'text') {
590. let g = guardOf(c)
591. if (g != '') {
592. if (guard != '') { guard = guard + '||' }
593. guard = guard + g
594. }
595. }
596. }
597. if (guard != '') { body = body + 'if((' + guard + ')&&el.__hlLeaves&&el.__hlLeaves[' + k + ']){el.__hlLeaves[' + k + '].data=' + runText(run) + ';}' }
598. k = k + 1
599. }
600. }
601. if (body == '') { return null }
602. return 'async function(el,inst,r,n){' + body + '}'
603. }
605. // `rowPaint(&m, el)`, compiled: every bound spot, written only where the DOM does not
606. // already hold it — which is why a push into 2000 rows costs the 1999 nothing.
607. rowFn(n) {
608. let body = ''
609. for (a of n.attrs) {
610. if (isBool(a)) {
611. body = body + '{' + boolWrite(a, rawRead(a.member != null ? { k = 'member'; name = a.member; } : a.ref)) + '}'
612. } else if (a.member != null || a.ref != null) {
613. let one = 'let v=' + readOf(a.member != null ? { k = 'member'; name = a.member; } : a.ref) + ';'
614. if (a.extra != null) { one = one + 'v=v+" "+' + str(a.extra) + ';' }
615. if (n.tag == 'select' && a.name == 'value') { one = one + 'if(el.value!==v){el.value=v;}' }
616. else {
617. one = one + 'if(el.getAttribute(' + str(a.name) + ')!==v){el.setAttribute(' + str(a.name) + ',v);}'
618. if (a.name == 'value') { one = one + 'if(el.value!=null&&el.value!==v){el.value=v;}' }
619. }
620. body = body + '{' + one + '}'
621. }
622. }
623. let text = textOf(n)
624. let feeds = false
625. for (c of n.children) { if (isReadNode(c)) { feeds = true } }
626. if (text != null && feeds) { body = body + '{let t=' + text + ';if(el.textContent!==t){el.textContent=t;}}' }
627. if (text == null && feeds) {
628. let k = 0
629. for (run of runsOf(n)) {
630. if (runFeeds(run)) { body = body + '{let x=el.__hlLeaves&&el.__hlLeaves[' + k + '];let t=' + runText(run) + ';if(x&&x.data!==t){x.data=t;}}' }
631. k = k + 1
632. }
633. }
634. if (body == '') { return 'null' }
635. return 'async function(el,inst,r){' + body + '}'
636. }
638. attrWrite(n, a, v) {
639. if (isBool(a)) { return boolWrite(a, rawRead(a.member != null ? { k = 'member'; name = a.member; } : a.ref)) }
640. let src = 'let v=' + v + ';'
641. if (a.extra != null) { src = src + 'v=v+" "+' + str(a.extra) + ';' }
642. if (n.tag == 'select' && a.name == 'value') { return src + 'el.value=v;' }
643. src = src + 'el.setAttribute(' + str(a.name) + ',v);'
644. if (a.name == 'value') { src = src + 'if(el.value!=null){el.value=v;}' }
645. return src
646. }
648. textOf(n) {
649. let parts = []
650. let content = 0
651. let feeds = false
652. for (c of n.children) {
653. if (c.k != 'on') {
654. content = content + 1
655. if (c.k == 'text') { parts.push(str(c.text)) }
656. else if (isReadNode(c)) { parts.push(textRead(c)) feeds = true }
657. }
658. }
659. if (!feeds) { return null }
660. if (parts.length != content) { return null }
661. let src = '""'
662. for (p of parts) { src = src + '+(' + p + ')' }
663. return src
664. }
666. // ---- a read, written in ---------------------------------------------------------------
667. // `view.value`'s own rule as an expression: a `for` row variable in scope wins over a
668. // member of the same name, and a field path walks into it. `readOf` answers the STRING
669. // the DOM takes; `rawRead` the value itself (a binding, a list, a condition).
670. readOf(node) { return '(""+' + rawRead(node) + ')' }
672. // A READ SHOWN AS TEXT: null is no text, as the server writes it (view.hl `escape`)
673. textRead(node) { return 'S(' + rawRead(node) + ')' }
675. rawRead(node) {
676. if (node == null) { return 'null' }
677. if (node.k == 'text') { return node.kind == 'folded' && hlTypeName(node.value) == 'Hybrid' ? JSON.stringify(node.value) : str(node.text) }
678. if (node.k == 'expr') { return '(await X(' + JSON.stringify(node.x) + ',r,inst))' }
679. if (node.k != 'field') { return 'RV(r,inst,' + str(node.name) + ')' }
680. return 'RF(r,inst,' + str(node.name) + ',' + list(node.path) + ')'
681. }
683. list(names) {
684. let src = '['
685. let first = true
686. for (n of names) {
687. if (!first) { src = src + ',' }
688. first = false
689. src = src + str(n)
690. }
691. return src + ']'
692. }
694. // a JavaScript string literal — JSON's escaping is a subset of JavaScript's, so a
695. // source text's quotes, newlines and backslashes survive into the statement unchanged
696. str(s) {
697. if (s == null) { return '""' }
698. return JSON.stringify('' + s)
699. }
701. // ---- WHAT THE LANGUAGE SAYS ABOUT THIS FILE, read HERE and written into the code ----
702. // The old hl:web shipped the language's answers to the browser as data: `hlJs` writes each file's
703. // members, handlers and methods — every node of every initializer, with the names it
704. // reads — into the module, and the client reduces that table on every boot. The answers
705. // are facts about the source, so this file asks for them once, at compile time, and
706. // writes the RESULT into the statements: a handler's write set stands at the listener
707. // that needs it, a region's names at the region, the derivations as a list of what to
708. // re-run. The module carries no table at all (WebFramework `module` drops the one the
709. // emitter writes).
710. //
711. // The reflection is the framework's own analysis generation — the same `gen` the View
712. // trees come from. Nothing starts a second one: a handle is only valid inside the
713. // generation that made it.
714. tableOf(gen, key) {
715. let members = []
716. let derivations = []
717. let handlers = []
718. let methods = []
719. for (m of hlMembers(gen, key)) {
720. let entry = { name = m.name; nodes = null; }
721. if (m.hasValue) {
722. let n = syntaxTree(gen, key, m.node)
723. entry.nodes = n
724. derivations.push({ name = m.name; site = n.site; reads = n.reads; serverSite = serverSite(n.reads); })
725. nestedHandlers(&handlers, n)
726. }
727. members.push(entry)
728. }
729. for (h of hlEvents(gen, key).handles) {
730. let n = syntaxTree(gen, key, h.node)
731. handlers.push({ event = h.event; site = n.site; reads = n.reads; writes = n.writes; nested = false; })
732. }
733. for (mm of hlMethods(gen, key)) {
734. if (!mm.inlineHandler) {
735. let n = syntaxTree(gen, key, mm.node)
736. methods.push({ name = mm.name; reads = n.reads; writes = n.writes; })
737. }
738. }
739. // A SERVER REFERENCE SITE IS ONE THROUGH A LOCAL HELPER TOO (#121): an initializer
740. // that calls a method or static of this class which calls the import still reaches
741. // the server only, so it is never re-derived in the browser either.
742. let post = []
743. for (d of derivations) {
744. post.push({ name = d.name; site = d.site; reads = d.reads; serverSite = d.serverSite || reachesServerSite(members, methods, d.reads); })
745. }
746. return { members = members; derivations = post; handlers = handlers; methods = methods; }
747. }
749. // does a read list reach an imported class THROUGH this class's own methods and statics,
750. // transitively — the walk of `closeReads`, over the helpers a derivation calls
751. reachesServerSite(members, methods, reads) {
752. let queue = []
753. if (reads != null) {
754. for (r of reads) {
755. if (r.kind == 'method' || (r.kind == 'member' && r.isStatic == true)) { queue.push(r.kind + ' ' + r.name) }
756. }
757. }
758. let seen = {}
759. while (queue.length > 0) {
760. let at = queue.shift()
761. if (seen[at] == null) {
762. seen[at] = true
763. let sp = at.indexOf(' ')
764. let kind = at.slice(0, sp)
765. let name = at.slice(sp + 1)
766. let hop = []
767. if (kind == 'method') { for (mm of methods) { if (mm.name == name) { hop = mm.reads } } }
768. else { for (mb of members) { if (mb.name == name && mb.nodes != null) { hop = nodeReads(mb.nodes) } } }
769. if (serverSite(hop)) { return true }
770. for (r of hop) {
771. if (r.kind == 'method' || (r.kind == 'member' && r.isStatic == true)) { queue.push(r.kind + ' ' + r.name) }
772. }
773. }
774. }
775. return false
776. }
778. // A NESTED `on` IS A DOM HANDLER, filed under its own site — the id the View node
779. // carries. Its body is not the literal's syntax, so the node answers for it and the
780. // walk stops there.
781. nestedHandlers(&into, n) {
782. if (n == null) { return null }
783. if (n.tag == 'on_statement') {
784. into.push({ event = n.event; site = n.site; reads = n.reads; writes = n.writes; nested = true; })
785. return null
786. }
787. for (c of [n.value, n.list, n.body, n.condition, n.consequent, n.alternate, n.object, n.property, n.callee, n.left, n.right, n.operand]) {
788. if (c != null) { nestedHandlers(&into, c) }
789. }
790. for (l of [n.entries, n.args, n.elements]) {
791. if (l != null) { for (c of l) { nestedHandlers(&into, c) } }
792. }
793. return null
794. }
796. // the site with its file's base name: everything after the last '/'. The path part
797. // is not "up to the first ':'" — a package key has a colon of its own
798. // ('hl:markdown/Markdown.hl:24:3'), and that reading left a package component's
799. // sites unshortened, so its regions found no reads and never repainted (#111)
800. shortSite(site) {
801. if (site == null) { return null }
802. let cut = site.lastIndexOf('/')
803. if (cut < 0) { return site }
804. return site.slice(cut + 1)
805. }
807. // the syntax of one node, recursively — hl:core/AST's `tree`, read off the framework's
808. // own generation instead of starting one of its own
809. syntaxTree(gen, key, node) {
810. let n = hlSyntax(gen, key, node)
811. if (n == null) { return null }
812. // A SITE IS NAMED BY THE FILE'S BASE NAME. The reflection answers with the project
813. // key ('components/sort_list.hl:77:26'); the View tree, the emitter's own
814. // `__derive__` branches and every site this framework writes use the base name
815. // ('sort_list.hl:77:26'). One spelling, or a lookup by site finds nothing.
816. let out = { tag = n.tag; site = shortSite(n.site); reads = n.reads; writes = n.writes; }
817. if (n.tag == 'object_expression') {
818. let kids = []
819. for (h of n.entries) { kids.push(syntaxTree(gen, key, h)) }
820. out.entries = kids
821. } else if (n.tag == 'object_property') {
822. out.key = n.key
823. out.value = syntaxTree(gen, key, n.value)
824. } else if (n.tag == 'view_for') {
825. out.list = syntaxTree(gen, key, n.list)
826. out.body = syntaxTree(gen, key, n.body)
827. } else if (n.tag == 'view_if') {
828. out.condition = syntaxTree(gen, key, n.condition)
829. out.consequent = syntaxTree(gen, key, n.consequent)
830. out.alternate = syntaxTree(gen, key, n.alternate)
831. } else if (n.tag == 'on_statement') {
832. out.event = n.event
833. } else if (n.tag == 'member_expression') {
834. out.object = syntaxTree(gen, key, n.object)
835. out.property = syntaxTree(gen, key, n.property)
836. } else if (n.tag == 'call_expression') {
837. out.callee = syntaxTree(gen, key, n.callee)
838. let args = []
839. for (h of n.args) { args.push(syntaxTree(gen, key, h)) }
840. out.args = args
841. } else if (n.tag == 'binary_expression') {
842. out.left = syntaxTree(gen, key, n.left)
843. out.right = syntaxTree(gen, key, n.right)
844. } else if (n.tag == 'unary_expression') {
845. out.operand = syntaxTree(gen, key, n.operand)
846. } else if (n.tag == 'conditional_expression') {
847. out.condition = syntaxTree(gen, key, n.condition)
848. out.consequent = syntaxTree(gen, key, n.consequent)
849. out.alternate = syntaxTree(gen, key, n.alternate)
850. } else if (n.tag == 'array_expression') {
851. let els = []
852. for (h of n.elements) { els.push(syntaxTree(gen, key, h)) }
853. out.elements = els
854. }
855. return out
856. }
858. // ---- the reductions the browser used to make on every boot --------------------------
859. // A `for`'s names are what its list reads, an `if`'s what its condition reads — filed
860. // under the region's own site.
861. regionIndex(t) {
862. let idx = {}
863. for (m of t.members) { if (m.nodes != null) { indexRegions(&idx, m.nodes) } }
864. return idx
865. }
867. indexRegions(&idx, n) {
868. if (n == null) { return null }
869. if (n.tag == 'view_for') {
870. idx[n.site] = memberNames(nodeReads(n.list))
871. indexRegions(&idx, n.body)
872. return null
873. }
874. if (n.tag == 'view_if') {
875. idx[n.site] = memberNames(nodeReads(n.condition))
876. indexRegions(&idx, n.consequent)
877. indexRegions(&idx, n.alternate)
878. return null
879. }
880. if (n.tag == 'on_statement') { return null }
881. for (c of [n.value, n.list, n.body, n.condition, n.consequent, n.alternate, n.object, n.property, n.callee, n.left, n.right, n.operand]) {
882. if (c != null) { indexRegions(&idx, c) }
883. }
884. for (l of [n.entries, n.args, n.elements]) {
885. if (l != null) { for (c of l) { indexRegions(&idx, c) } }
886. }
887. return null
888. }
890. // the member reads of a read list — the language resolved every name, so this is a
891. // filter and not a second resolution
892. memberNames(reads) {
893. let out = []
894. if (reads == null) { return out }
895. for (r of reads) {
896. if (r.kind == 'member' && r.isStatic != true && !out.includes(r.name)) { out.push(r.name) }
897. }
898. return out
899. }
901. nodeReads(n) {
902. if (n == null) { return [] }
903. if (n.reads != null) { return n.reads }
904. let out = []
905. for (c of [n.value, n.list, n.body, n.condition, n.consequent, n.alternate, n.object, n.property, n.callee, n.left, n.right, n.operand]) {
906. if (c != null) { for (r of nodeReads(c)) { out.push(r) } }
907. }
908. for (l of [n.entries, n.args, n.elements]) {
909. if (l != null) { for (c of l) { for (r of nodeReads(c)) { out.push(r) } } }
910. }
911. return out
912. }
914. // A ROUTINE'S WRITES, PLUS THE WRITES OF EVERYTHING IT REACHES — the method it calls
915. // and the handler it emits to, transitively. Both are READS the language resolved, so
916. // this is a walk of its answer and never a guess.
917. closeWrites(t, writes, reads) {
918. let out = memberNames(writes)
919. let queue = []
920. reached(&queue, reads)
921. let seen = {}
922. while (queue.length > 0) {
923. let at = queue.shift()
924. if (seen[at] == null) {
925. seen[at] = true
926. let sp = at.indexOf(' ')
927. let kind = at.slice(0, sp)
928. let name = at.slice(sp + 1)
929. for (mm of t.methods) {
930. if (kind == 'method' && mm.name == name) {
931. for (w of memberNames(mm.writes)) { if (!out.includes(w)) { out.push(w) } }
932. reached(&queue, mm.reads)
933. }
934. }
935. for (h of t.handlers) {
936. if (kind == 'handler' && !h.nested && h.event == name) {
937. for (w of memberNames(h.writes)) { if (!out.includes(w)) { out.push(w) } }
938. reached(&queue, h.reads)
939. }
940. }
941. for (mb of t.members) {
942. if (kind == 'member' && mb.name == name && mb.nodes != null) {
943. for (w of memberNames(mb.nodes.writes)) { if (!out.includes(w)) { out.push(w) } }
944. reached(&queue, nodeReads(mb.nodes))
945. }
946. }
947. }
948. }
949. return out
950. }
952. // the mirror: a handler's reads plus the reads of everything it reaches — the
953. // candidates for a routine a host handed down, whose writes only the host's table names
954. closeReads(t, reads) {
955. let out = memberNames(reads)
956. let queue = []
957. reached(&queue, reads)
958. let seen = {}
959. while (queue.length > 0) {
960. let at = queue.shift()
961. if (seen[at] == null) {
962. seen[at] = true
963. let sp = at.indexOf(' ')
964. let kind = at.slice(0, sp)
965. let name = at.slice(sp + 1)
966. for (mm of t.methods) {
967. if (kind == 'method' && mm.name == name) {
968. for (r of memberNames(mm.reads)) { if (!out.includes(r)) { out.push(r) } }
969. reached(&queue, mm.reads)
970. }
971. }
972. for (h of t.handlers) {
973. if (kind == 'handler' && !h.nested && h.event == name) {
974. for (r of memberNames(h.reads)) { if (!out.includes(r)) { out.push(r) } }
975. reached(&queue, h.reads)
976. }
977. }
978. for (mb of t.members) {
979. if (kind == 'member' && mb.name == name && mb.nodes != null) {
980. for (r of memberNames(nodeReads(mb.nodes))) { if (!out.includes(r)) { out.push(r) } }
981. reached(&queue, nodeReads(mb.nodes))
982. }
983. }
984. }
985. }
986. return out
987. }
989. reached(&queue, reads) {
990. if (reads == null) { return null }
991. for (r of reads) {
992. if (r.kind == 'method' || r.kind == 'handler' || (r.kind == 'member' && r.isStatic != true)) { queue.push(r.kind + ' ' + r.name) }
993. }
994. return null
995. }
997. // ---- THE SERVER RENDER, COMPILED --------------------------------------------------
998. // The old hl:web rendered a page by WALKING the View tree per request: for every node it asks
999. // what kind it is, for every element it builds the attribute string, and it decides the
1000. // indentation of every line again, on every request, for every one of the 121 mounts a
1001. // page may hold. Every one of those decisions is a fact about the View.
1002. //
1003. // So a component's render is compiled ONCE into a list of STEPS — constant text, and a
1004. // read with its own closure — and a request is a concatenation. The structure (tags,
1005. // static attributes, the readable form's line breaks, which element is a block) is
1006. // decided at compile time; only the values are asked for per request.
1007. //
1008. // KEYED BY THE INDENT IT IS RENDERED AT, because that is the only thing about a
1009. // component's HTML that its caller decides: the shell renders at one tab, the page at
1010. // the depth the slot stands, a fill compactly (null). An app has a handful of those.
1011. serverSteps(key, nodes, indent, classes, slotted) {
1012. let ck = key + '|' + (indent == null ? '~' : indent) + '|' + joinList(classes) + '|' + (slotted ? '1' : '0')
1013. if (steps[ck] == null) {
1014. steps[ck] = blockSteps(classes == null || classes.length == 0 ? nodes : v.withRootClasses(nodes, classes), indent, slotted)
1015. }
1016. return steps[ck]
1017. }
1019. // A `slot` THE HOST FILLED COUNTS AS CONTENT, and an empty one does not — the one
1020. // thing about a component's shape its caller decides, so it is part of the key.
1021. staticVoid = [ 'area' 'base' 'br' 'col' 'embed' 'hr' 'img' 'input' 'link' 'meta' 'source' 'track' 'wbr' ]
1022. staticVerbatim = [ 'textarea' 'pre' 'script' 'style' ]
1024. blocky(n, slotted) {
1025. if (staticVerbatim.includes(n.tag)) { return false }
1026. if (n.children.length == 0) { return false }
1027. for (c of n.children) {
1028. if (c.k == 'text' || c.k == 'field' || c.k == 'expr') { return false }
1029. if (c.k == 'member' && !(c.name == 'slot' && slotted)) { return false }
1030. }
1031. return true
1032. }
1034. steps = {}
1035. v = new HlwView
1037. joinList(l) {
1038. if (l == null) { return '' }
1039. let out = ''
1040. for (c of l) { out = out + ',' + c }
1041. return out
1042. }
1044. // `render(nodes, …, indent)`: the readable form puts each element on its own line at
1045. // `indent`, the compact one writes them end to end.
1046. blockSteps(nodes, indent, slotted) {
1047. let out = []
1048. for (n of nodes) {
1049. if (indent != null) {
1050. if (n.k == 'el') { push(&out, { k = 's'; v = newline + indent; }) nodeSteps(&out, n, indent, slotted) }
1051. else if (n.k == 'component') { nodeSteps(&out, n, indent, slotted) }
1052. else if (n.k == 'for') { forSteps(&out, n, indent, slotted) }
1053. else if (n.k == 'if') { ifSteps(&out, n, indent, slotted) }
1054. else if (n.k == 'member' && n.name == 'slot') { push(&out, { k = 'slotline'; v = newline + indent; }) }
1055. else if (n.k != 'on') { nodeSteps(&out, n, indent, slotted) }
1056. } else {
1057. nodeSteps(&out, n, null, slotted)
1058. }
1059. }
1060. return out
1061. }
1063. forSteps(&out, n, indent, slotted) {
1064. out.push({ k = 'for'; row = n.row; read = readFn(n.list); body = blockSteps(n.body, indent, slotted); })
1065. return null
1066. }
1068. ifSteps(&out, n, indent, slotted) {
1069. out.push({ k = 'if'; read = readFn(n.cond); then = blockSteps(n.then, indent, slotted); other = blockSteps(n.other, indent, slotted); })
1070. return null
1071. }
1073. // one node's steps — `html(node, …)`, decided once
1074. nodeSteps(&out, n, indent, slotted) {
1075. if (n.k == 'text') { push(&out, { k = 's'; v = v.escape(n.text); }) return null }
1076. if (n.k == 'on') { return null }
1077. if (n.k == 'member' && n.name == 'slot') { out.push({ k = 'slot'; }) return null }
1078. if (n.k == 'member' || n.k == 'field' || n.k == 'expr') { out.push({ k = 'r'; read = readFn(n); }) return null }
1079. if (n.k == 'for') { forSteps(&out, n, indent, slotted) return null }
1080. if (n.k == 'if') { ifSteps(&out, n, indent, slotted) return null }
1081. if (n.k == 'component') {
1082. out.push({ k = 'kid'; path = n.path; cls = n.cls; key = n.key; classes = n.classes; indent = indent;
1083. fill = (n.fill == null || n.fill.length == 0) ? null : blockSteps(n.fill, null, slotted); })
1084. return null
1085. }
1086. if (n.k == 'el') { elSteps(&out, n, indent, slotted) return null }
1087. push(&out, { k = 's'; v = '<!-- ' + n.tag + ' not rendered yet -->'; })
1088. return null
1089. }
1091. elSteps(&out, n, indent, slotted) {
1092. let attrs = []
1093. let valueRead = null // a textarea's value is its content
1094. let selRead = null // a select's value selects an option
1095. for (a of n.attrs) {
1096. if (n.tag == 'textarea' && a.name == 'value') { valueRead = attrRead(a) }
1097. else if (n.tag == 'select' && a.name == 'value') { selRead = attrRead(a) }
1098. // a bound BOOLEAN attribute is its presence (ticket #33): ` checked=""` or nothing
1099. else if ((a.member != null || a.ref != null) && v.isBoolAttr(a.name)) { attrs.push({ k = 'b'; name = a.name; read = attrRead(a); }) }
1100. else if (a.member != null || a.ref != null) {
1101. push(&attrs, { k = 's'; v = ' ' + a.name + '="'; })
1102. attrs.push({ k = 'r'; read = attrRead(a); })
1103. push(&attrs, { k = 's'; v = v.extraOf(a) + '"'; })
1104. } else {
1105. push(&attrs, { k = 's'; v = ' ' + a.name + '="' + v.escape(a.text) + '"'; })
1106. }
1107. }
1108. if (v.boundValue(n)) { push(&attrs, { k = 's'; v = ' autocomplete="off"'; }) }
1110. // the children, in the form this element takes: a block puts them one per line
1111. let kids = []
1112. if (indent != null && blocky(n, slotted)) {
1113. kids = blockSteps(n.children, indent + tab, slotted)
1114. push(&kids, { k = 's'; v = newline + indent; })
1115. } else {
1116. kids = blockSteps(n.children, null, slotted)
1117. }
1118. if (valueRead != null) { kids = [{ k = 'r'; read = valueRead; }] }
1120. // AN OPTION IS THE ONE ELEMENT WHOSE OWN TAG DEPENDS ON THE VALUE ABOVE IT: it
1121. // carries `selected` when its value is the select's. Everything else is settled.
1122. if (n.tag == 'option') {
1123. out.push({ k = 'opt'; attrs = attrs; body = kids; ov = optionRead(n); })
1124. return null
1125. }
1126. push(&out, { k = 's'; v = '<' + n.tag; })
1127. for (a of attrs) { push(&out, a) }
1128. if (staticVoid.includes(n.tag)) { push(&out, { k = 's'; v = '>'; }) return null }
1129. push(&out, { k = 's'; v = '>'; })
1130. // A SELECT HANDS ITS VALUE TO ITS OPTIONS, however deep they stand: its children
1131. // run under it, and it is the only element that changes anything for them.
1132. if (n.tag == 'select') { out.push({ k = 'sel'; read = selRead; body = kids; }) }
1133. else { for (kk of kids) { push(&out, kk) } }
1134. push(&out, { k = 's'; v = '</' + n.tag + '>'; })
1135. return null
1136. }
1138. // CONSTANT TEXT MERGES. Two literal steps in a row are one string decided at compile
1139. // time — which is what makes a request a concatenation of a handful of pieces instead
1140. // of one per node.
1141. push(&out, step) {
1142. if (step.k == 's' && out.length > 0 && out[out.length - 1].k == 's') {
1143. let last = out[out.length - 1]
1144. last.v = last.v + step.v
1145. out[out.length - 1] = last
1146. return null
1147. }
1148. out.push(step)
1149. return null
1150. }
1152. // ---- the reads, each with its own closure ------------------------------------------
1153. // `view.value`'s rule, split once: a `for` row variable in scope wins over a member of
1154. // the same name, and a field path walks into it. The closure holds the name — there is
1155. // no node to look at per request.
1156. readFn(node) {
1157. if (node == null) { return (inst, rows) => { return null } }
1158. if (node.k == 'text') { let t = v.refValue(node) return (inst, rows) => { return t } }
1159. if (node.k == 'expr') { let x = node.x return (inst, rows) => { return v.evalExpr(x, inst, rows) } }
1160. let name = node.name
1161. if (node.k != 'field') {
1162. return (inst, rows) => { return rows[name] != null ? rows[name] : inst[name] }
1163. }
1164. let path = node.path
1165. return (inst, rows) => {
1166. let val = rows[name] != null ? rows[name] : inst[name]
1167. for (f of path) {
1168. if (val == null) { return null }
1169. val = val[f]
1170. }
1171. return val
1172. }
1173. }
1175. attrRead(a) {
1176. if (a.member != null) { return readFn({ k = 'member'; name = a.member; }) }
1177. if (a.ref != null) { return readFn(a.ref) }
1178. let t = a.text
1179. return (inst, rows) => { return t }
1180. }
1182. // an option's own value: its `value` attribute, or null when it has none (the browser
1183. // then reports its text, and the run compares against what it rendered)
1184. optionRead(n) {
1185. for (a of n.attrs) {
1186. if (a.name == 'value') { return attrRead(a) }
1187. }
1188. return null
1189. }
1191. // ---- the run: a concatenation ------------------------------------------------------
1192. // EVERY REGION IS WRITTEN BETWEEN TWO MARKS (tickets #103, #104): an `if` around the
1193. // branch that stands, a `for` around its rows and each row around its own nodes. The
1194. // client claims them as they are and builds the same ones, and a region's nodes are
1195. // exactly what stands between its two marks — nothing it holds has to be remembered
1196. // node by node, and text beside a region can never run into the region's text.
1197. markOpen = '<!--[-->'
1198. markClose = '<!--]-->'
1200. // THE PIECES ARE JOINED ONCE, AT THE END (ticket #127). `out = out + piece` copied
1201. // the whole page so far for every piece: a 3.5 MB page of 2000 rows allocated 2.3 GB
1202. // in growing copies, 7 GB per render all told — 12 s a load once the collector ran
1203. // by bytes (#126), where the joined pieces take 2.5 s.
1204. runSteps(list, &inst, &rows, &ctx) {
1205. let out = []
1206. for (s of list) {
1207. if (s.k == 's') { out.push(s.v) }
1208. else if (s.k == 'r') { let f = s.read out.push(v.escape(f(&inst, &rows))) }
1209. else if (s.k == 'b') { let f = s.read if (v.boolOn(f(&inst, &rows))) { out.push(' ' + s.name + '=""') } }
1210. else if (s.k == 'slot') { if (ctx.slot != null) { out.push(ctx.slot) } }
1211. else if (s.k == 'slotline') { if (ctx.slot != null) { out.push(s.v + ctx.slot) } }
1212. else if (s.k == 'for') {
1213. let f = s.read
1214. let list2 = f(&inst, &rows)
1215. out.push(markOpen)
1216. if (list2 != null) {
1217. let ri = 0
1218. for (entry of list2) {
1219. let inner = rows + {}
1220. inner[s.row] = entry
1221. let rc = v.rowCtx(&ctx, &entry, ri)
1222. out.push(markOpen + runSteps(s.body, &inst, &inner, &rc) + markClose)
1223. ri = ri + 1
1224. }
1225. }
1226. out.push(markClose)
1227. }
1228. else if (s.k == 'if') {
1229. let f = s.read
1230. if (f(&inst, &rows)) { out.push(markOpen + runSteps(s.then, &inst, &rows, &ctx) + markClose) }
1231. else { out.push(markOpen + runSteps(s.other, &inst, &rows, &ctx) + markClose) }
1232. }
1233. else if (s.k == 'opt') {
1234. let head = runSteps(s.attrs, &inst, &rows, &ctx)
1235. let body = runSteps(s.body, &inst, &rows, &ctx)
1236. let mark = ''
1237. if (ctx.sel != null) {
1238. let ov = body
1239. if (s.ov != null) { let f = s.ov ov = '' + f(&inst, &rows) }
1240. if (ov == ctx.sel) { mark = ' selected' }
1241. }
1242. out.push('<option' + head + mark + '>' + body + '</option>')
1243. }
1244. else if (s.k == 'sel') {
1245. let f = s.read
1246. let inner = ctx + {}
1247. inner.sel = f == null ? null : '' + f(&inst, &rows)
1248. out.push(runSteps(s.body, &inst, &rows, &inner))
1249. }
1250. else if (s.k == 'kid') {
1251. let kid = ctx.kids[v.kidKeyIn(s.path, ctx)]
1252. if (kid == null) { out.push('<!-- ' + s.cls + ' not mounted -->') }
1253. else {
1254. let fillText = s.fill == null ? null : runSteps(s.fill, &inst, &rows, &ctx)
1255. let kidCtx = { slot = fillText; kids = kid.kids; }
1256. let kidInst = kid.page
1257. let empty = {}
1258. out.push(runSteps(serverSteps(s.key, kid.view, s.indent, s.classes, fillText != null), &kidInst, &empty, &kidCtx))
1259. }
1260. }
1261. }
1262. return out.join('')
1263. }