gitoria

42.8 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 View from './view.hl'
40. // ---- the emitted half --------------------------------------------------------------
41. module(gen, key, nodes) {
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;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
63. // THE PRELUDE, one per module: the element a claim takes or a create makes, and the
64. // two reads. A read written out in full — `(r["title"]!=null?r["title"]:inst["title"])`
65. // — is 45 bytes and a component's View holds dozens of them; named, it is 16. The
66. // rule is the same rule (a `for` row variable in scope wins over a member of the
67. // same name, and a field path walks into it), spelled once.
68. src = src + 'function A(cr,host,i,tag){if(cr){return document.createElement(tag);}return host.children[i];}'
69. src = src + 'function RV(r,q,n){return r[n]!=null?r[n]:q[n];}'
70. 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;}'
71. src = src + 'var B={},T={},E={},F={},R={},P={};'
72. // ONE FUNCTION PER LIST, however many sites reach it. Every `if` in a list rebuilds
73. // that same list, and a nested walk is written once and named: emitting it per site
74. // made the reference app's home page 215 KB of the same code over and over.
75. let wi = 0
76. for (f of fns) {
77. wi = wi + 1
78. let name = 'w' + wi
79. src = src + 'var ' + name + '=' + f.src + ';'
80. for (site of f.sites) { src = src + f.slot + '[' + str(site) + ']=' + name + ';' }
81. }
82. let paints = []
83. collectPaints(&paints, roots)
84. for (e of paints) { src = src + 'P[' + str(e.site) + ']={p:' + e.paint + ',r:' + e.row + '};' }
85. src = src + 'C[' + str(key) + ']={v:' + root + ',b:B,t:T,e:E,f:F,r:R,p:P'
86. // THE ANSWERS A LOOKUP STILL NEEDS, and only those. A local event's write set stands
87. // at its own listener and a region's names at its own region — written into the
88. // call. These three are asked for by NAME at run time and cannot be: an inbound
89. // frame names its event, a routine handed down names the member that holds it, and
90. // a write set names the derivations that follow it.
91. src = src + ',ev:' + eventMap() + ',mw:' + memberMap() + ',dv:' + derivList() + '};'
92. return src + '})();' + newline
93. }
95. tbl = null
96. regions = {}
98. // what a DECLARED handler writes, by event: one entry per event name, unioned
99. eventMap() {
100. let byEvent = {}
101. for (h of tbl.handlers) {
102. if (!h.nested) {
103. let have = byEvent[h.event] == null ? [] : byEvent[h.event]
104. for (w of closeWrites(tbl, h.writes, h.reads)) { if (!have.includes(w)) { have.push(w) } }
105. byEvent[h.event] = have
106. }
107. }
108. return mapOf(byEvent)
109. }
111. // A MEMBER HOLDING A ROUTINE: what calling it writes is what its initializer writes
112. memberMap() {
113. let byName = {}
114. for (m of tbl.members) {
115. if (m.nodes != null) { byName[m.name] = memberNames(m.nodes.writes) }
116. }
117. return mapOf(byName)
118. }
120. // EVERY INITIALIZER, IN DECLARATION ORDER, with the members it reads — the whole of
121. // what a derivation needs; the class carries the computation itself as `__derive__`
122. derivList() {
123. let src = '['
124. let first = true
125. for (d of tbl.derivations) {
126. if (!first) { src = src + ',' }
127. first = false
128. src = src + '{name:' + str(d.name) + ',site:' + str(d.site) + ',reads:' + list(memberNames(d.reads)) + '}'
129. }
130. return src + ']'
131. }
133. mapOf(byName) {
134. let src = '{'
135. let first = true
136. for (k of byName.keys()) {
137. if (!first) { src = src + ',' }
138. first = false
139. src = src + str(k) + ':' + list(byName[k])
140. }
141. return src + '}'
142. }
144. // the write set and the read set of the handler at this site, closed over the methods
145. // it calls and the handlers it emits to — computed here, written into the listener
146. handlerSets(site) {
147. for (h of tbl.handlers) {
148. if (h.nested && h.site == site) {
149. return list(closeWrites(tbl, h.writes, h.reads)) + ',' + list(closeReads(tbl, h.reads))
150. }
151. }
152. return '[],[]'
153. }
155. regionNamesAt(site) {
156. let names = regions[site]
157. return list(names == null ? [] : names)
158. }
160. fns = []
162. // ---- the walk, unrolled ------------------------------------------------------------
163. // `top` marks the View's own root list: an element there is a COMPOSITION ROOT — a
164. // reference above may have overwritten some of its events and put classes on it, which
165. // is what `opt` carries (the old hl:web's rootOverwrites and withRootClasses).
166. walk(key, nodes) {
167. return plain(key, nodes)
168. }
170. // AN `if` REBUILDS THE ELEMENT IT STANDS IN. The old hl:web emptied that element and walks its
171. // whole child list again — the branch that stands now decides what appears — so the
172. // rebuild registered under an `if`'s site is the HOST ELEMENT's list, not the branch's:
173. // an `if` nested in another one's branch shares the host, and rebuilding only its own
174. // branch would drop everything else the element holds. The `on` nodes are stripped: the
175. // element is kept and its listeners with it.
176. rebuilds(key, nodes) {
177. let sites = ifSites(nodes)
178. if (sites.length == 0) { return null }
179. let fresh = []
180. for (site of sites) {
181. if (done['R ' + site] == null) { done['R ' + site] = true fresh.push(site) }
182. }
183. if (fresh.length == 0) { return null }
184. fns.push({ slot = 'R'; sites = fresh; src = plain(key, withoutOns(nodes)); })
185. return null
186. }
188. // every `if` whose region lands on THIS element: the list's own, and those inside an
189. // `if` branch or a `for` body under it. A nested element, and a composed child, are
190. // their own host and answer for themselves.
191. ifSites(nodes) {
192. let out = []
193. for (n of nodes) {
194. if (n.k == 'if') {
195. out.push(n.site)
196. for (s of ifSites(n.then)) { out.push(s) }
197. for (s of ifSites(n.other)) { out.push(s) }
198. } else if (n.k == 'for') {
199. for (s of ifSites(n.body)) { out.push(s) }
200. }
201. }
202. return out
203. }
205. // the same walk, registering no rebuild of its own list (the one that would recurse)
206. plain(key, nodes) {
207. let body = ''
208. for (n of nodes) { body = body + node(key, n, false, false) }
209. return 'async function(c,m,o,host,i,rows,rk,fill,cr,opt){let inst=m.instance;let r=rows;' + body + 'return i;}'
210. }
212. // the View's own root list, whose elements are composition roots
213. walkTop(key, nodes) {
214. rebuilds(key, nodes)
215. let body = ''
216. for (n of nodes) { body = body + node(key, n, true, false) }
217. return 'async function(c,m,o,host,i,rows,rk,fill,cr,opt){let inst=m.instance;let r=rows;' + body + 'return i;}'
218. }
220. withoutOns(nodes) {
221. let out = []
222. for (n of nodes) { if (n.k != 'on') { out.push(n) } }
223. return out
224. }
226. // a sub-walk, registered under its own site so the runtime can reach it by name
227. // A SUB-WALK IS WRITTEN ONCE. The same list is reached again whenever a rebuild of the
228. // list it stands in is generated, and a `for` body or an `if` branch inside it would
229. // otherwise be emitted once per reach.
230. sub(key, nodes, slot, site) {
231. if (done[slot + ' ' + site] != null) { return null }
232. done[slot + ' ' + site] = true
233. fns.push({ slot = slot; sites = [site]; src = walk(key, nodes); })
234. return null
235. }
237. done = {}
239. node(key, n, top, filterOns) {
240. if (n.k == 'el') { return elNode(key, n, top) }
241. if (n.k == 'text') { return 'if(cr){host.appendChild(document.createTextNode(' + str(n.text) + '));}' }
242. if (n.k == 'on') {
243. // A REFERENCE ABOVE MAY HAVE OVERWRITTEN THIS EVENT on the composition root:
244. // the root's own handler for it is dropped and the reference's stands instead
245. // (the old hl:web's withoutOns, which applies to the root element's direct children).
246. let guard = filterOns ? 'if(!(opt&&opt.over&&opt.over.indexOf(' + str(n.event) + ')>=0)){' : '{'
247. return guard + 'await c.onAt(m,host,' + str(n.event) + ',' + str(n.site) + ',rows,' + handlerSets(n.site) + ');}'
248. }
249. if (n.k == 'member' && n.name == 'slot') {
250. // the SHELL's slot is where the route component hangs; a child's slot is the
251. // fragment its host wrote, and the host's frame builds it
252. return 'if(m.isShell){await c.slotShell(m,host,cr);}else if(fill!=null){i=await c.slotFill(m,o,host,i,fill,cr);}'
253. }
254. if (n.k == 'member' || n.k == 'field') {
255. return 'if(cr){host.appendChild(document.createTextNode(' + readOf(n) + '));}'
256. }
257. if (n.k == 'for') {
258. // THE ROW VARIABLE IS IN SCOPE INSIDE THE BODY, and a read of it is the ROW's,
259. // not a member of the instance — the language resolves it that way and the site
260. // sets must say the same, or a member of the same name would paint the row.
261. rowVars.push(n.row)
262. sub(key, n.body, 'B', n.site)
263. rowVars.pop()
264. 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) + ');'
265. }
266. if (n.k == 'if') {
267. sub(key, n.then, 'T', n.site)
268. sub(key, n.other, 'E', n.site)
269. 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) + ');'
270. }
271. if (n.k == 'component') {
272. if (n.fill != null && n.fill.length > 0) { sub(key, n.fill, 'F', n.site) }
273. return 'i=await c.kidAt(m,host,i,' + kidSpec(n) + ',rows,rk,fill,cr,opt);'
274. }
275. return ''
276. }
278. // ---- an element --------------------------------------------------------------------
279. elNode(key, n, top) {
280. let src = '{let el=A(cr,host,i,' + str(n.tag) + ');if(!cr){i=i+1;}'
281. src = src + 'if(el==null){c.acqFail(' + str(n.tag) + ',host);}else{'
282. // the attributes, on the walk that BUILDS the element (a claim takes the server's)
283. src = src + 'if(cr){' + createAttrs(n) + (top ? 'c.rootClasses(el,opt);' : '') + 'host.appendChild(el);}'
284. src = src + 'el.__hlRows=rows;el.__hlSite=' + str(n.site) + ';el.__hlKey=' + str(key) + ';'
285. // the element's own named entries, for the literal a handler on it fires
286. src = src + 'el.__hlLit=function(inst,r){return ' + litNamed(n) + ';};'
287. let names = siteNames(n)
288. let valueMember = 'null'
289. for (a of n.attrs) { if (a.member != null && a.name == 'value') { valueMember = str(a.member) } }
290. let sited = ''
291. if (names.length > 0 || valueMember != 'null') {
292. sited = 'await c.siteAt(m,el,' + list(names) + ',' + str(n.site) + ',' + valueMember + ',' + (n.tag == 'select' ? 'true' : 'false') + ',rows);'
293. }
294. rebuilds(key, n.children)
295. let kids = ''
296. for (c of n.children) { kids = kids + node(key, c, false, top) }
297. let inner = '{let host=el;let i=0;' + kids + '}'
298. // A SELECT IS SITED AFTER ITS OPTIONS: the member decides which option stands, and
299. // the read-back that `siteAt` does reports nothing before they exist.
300. if (n.tag == 'select') { src = src + inner + 'if(cr){await c.applySelectAt(m,el,' + selectValue(n) + ');}' + sited }
301. else { src = src + sited + inner }
302. return src + '}}'
303. }
305. // the attributes an element is BUILT with — a bound one written in, a literal one as it
306. // stands. `value` is a property once the page is live and an attribute as the control's
307. // default; a textarea has no value attribute at all and a select's value is an option.
308. createAttrs(n) {
309. let src = ''
310. for (a of n.attrs) {
311. if (isBool(a)) {
312. src = src + '{' + boolWrite(a, rawRead(a.member != null ? { k = 'member'; name = a.member; } : a.ref)) + '}'
313. } else {
314. let rd = a.member != null ? readOf({ k = 'member'; name = a.member; }) : (a.ref != null ? readOf(a.ref) : str(a.text))
315. src = src + '{let v=' + rd + ';'
316. if (a.extra != null) { src = src + 'v=v+" "+' + str(a.extra) + ';' }
317. if (n.tag == 'select' && a.name == 'value') { src = src + '}' }
318. else if (a.name == 'value') {
319. src = src + 'if(el.value!=null){el.value=v;' + (n.tag == 'textarea' ? '' : 'el.setAttribute("value",v);') + '}else{el.setAttribute("value",v);}}'
320. } else { src = src + 'el.setAttribute(' + str(a.name) + ',v);}' }
321. }
322. }
323. if (boundValue(n)) { src = src + 'el.setAttribute("autocomplete","off");' }
324. return src
325. }
327. // a BOUND boolean attribute — a literal one was decided at build (WebFramework `element`)
328. isBool(a) {
329. return (a.member != null || a.ref != null) && v.isBoolAttr(a.name)
330. }
332. // A BOUND BOOLEAN ATTRIBUTE, WRITTEN (ticket #33): set when the value is on, REMOVED when
333. // it is off — the markup's rule (view.boolAttrs) — and the DOM property with it, because
334. // once the page is live `checked` is the property and the attribute only its default.
335. boolWrite(a, raw) {
336. let prop = a.name == 'readonly' ? 'readOnly' : a.name
337. 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;}'
338. }
340. // view.hl's `boundValue`, to the letter: a FORM CONTROL whose `value` reads a member or
341. // a field, and not one the author gave an `autocomplete` of its own
342. boundValue(n) {
343. if (n.tag != 'input' && n.tag != 'textarea' && n.tag != 'select') { return false }
344. let bound = false
345. for (a of n.attrs) {
346. if (a.name == 'autocomplete') { return false }
347. if (a.name == 'value' && (a.member != null || a.ref != null)) { bound = true }
348. }
349. return bound
350. }
352. selectValue(n) {
353. for (a of n.attrs) {
354. if (a.name == 'value') {
355. if (a.member != null) { return readOf({ k = 'member'; name = a.member; }) }
356. if (a.ref != null) { return readOf(a.ref) }
357. return str(a.text)
358. }
359. }
360. return 'null'
361. }
363. // the element's own entries as the literal sees them — its attributes by name, then the
364. // `for` row variables in scope (the row rides on the value)
365. litNamed(n) {
366. let src = '{'
367. let first = true
368. for (a of n.attrs) {
369. if (!first) { src = src + ',' }
370. first = false
371. let v = a.member != null ? rawRead({ k = 'member'; name = a.member; }) : (a.ref != null ? rawRead(a.ref) : str(a.text))
372. src = src + str(a.name) + ':' + v
373. }
374. return src + '}'
375. }
377. // the reference's own description, written at its use site: what it binds, what it
378. // overwrites, the classes the host's `#Child` rule puts on it
379. kidSpec(n) {
380. let src = '{key:' + str(n.key) + ',kid:' + str(kidKeyOf(n)) + ',site:' + str(n.site) + ',fill:' + ((n.fill != null && n.fill.length > 0) ? 'true' : 'false')
381. src = src + ',bindings:['
382. let first = true
383. for (b of n.bindings) {
384. if (!first) { src = src + ',' }
385. first = false
386. src = src + '{name:' + str(b.name) + ',member:' + (b.member == null ? 'null' : str(b.member))
387. src = src + ',ref:' + (b.ref == null ? 'null' : 'function(inst,r){return ' + rawRead(b.ref) + ';}')
388. src = src + ',refName:' + (b.ref == null ? 'null' : str(b.ref.name))
389. src = src + ',text:' + (b.text == null ? 'null' : 'true') + ',value:' + (b.text == null ? 'null' : refLiteral(b)) + '}'
390. }
391. src = src + '],ons:['
392. first = true
393. for (o of n.ons) {
394. if (!first) { src = src + ',' }
395. first = false
396. src = src + '{event:' + str(o.event) + ',site:' + str(o.site) + ',sets:[' + handlerSets(o.site) + ']}'
397. }
398. src = src + '],classes:' + list(n.classes == null ? [] : n.classes) + '}'
399. return src
400. }
402. // view.hl's kidKey: the reference's path, joined — the key the server mounted it under
403. kidKeyOf(n) {
404. let out = ''
405. for (p of n.path) { out = out + '/' + p }
406. return out
407. }
409. // the value a literal binding carries — view.refValue, folded at compile time
410. refLiteral(b) {
411. if (b.kind == 'folded') { return jsValue(b.value) }
412. if (b.kind == 'number') { return '' + b.text }
413. if (b.kind == 'boolean') { return b.text == 'true' ? 'true' : 'false' }
414. if (b.kind == 'null_literal') { return 'null' }
415. return str(b.text)
416. }
418. jsValue(v) {
419. if (v == null) { return 'null' }
420. if (hlTypeName(v) == 'String') { return str(v) }
421. if (hlTypeName(v) == 'Boolean') { return v ? 'true' : 'false' }
422. if (hlTypeName(v) == 'Number') { return '' + v }
423. return JSON.stringify(v)
424. }
426. // ---- the site set: what this element SHOWS ------------------------------------------
427. // The old hl:web asked the module's table which members the element at this site reads. The
428. // answer is a fact about the View, so it is written in: the members its bound
429. // attributes and its text leaves name. `Style` is folded into a class name at build and
430. // the shell's `slot` is swapped by navigation — neither is ever painted, and neither is
431. // a member read that reaches here (a `for` row variable resolves to its row).
432. siteNames(n) {
433. let out = []
434. for (a of n.attrs) {
435. if (a.member != null && a.member != 'Style' && !rowVars.includes(a.member) && !out.includes(a.member)) { out.push(a.member) }
436. }
437. for (c of n.children) {
438. if ((c.k == 'member' || c.k == 'field') && c.name != 'slot' && c.name != 'Style' && !rowVars.includes(c.name)) {
439. if (!out.includes(c.name)) { out.push(c.name) }
440. }
441. }
442. return out
443. }
445. rowVars = []
447. // ---- the paints ---------------------------------------------------------------------
448. collectPaints(&out, nodes) {
449. for (n of nodes) {
450. if (n.k == 'el') {
451. let paint = paintFn(n)
452. let row = rowFn(n)
453. if (paint != null || row != 'null') {
454. out.push({ site = n.site; paint = paint == null ? 'null' : paint; row = row; })
455. }
456. collectPaints(&out, n.children)
457. } else if (n.k == 'for') { collectPaints(&out, n.body) }
458. else if (n.k == 'if') { collectPaints(&out, n.then) collectPaints(&out, n.other) }
459. else if (n.k == 'component') { if (n.fill != null) { collectPaints(&out, n.fill) } }
460. }
461. return null
462. }
464. // `paint(&m, s, name)`, compiled: the bound attributes under the member each reads, and
465. // the text where the member that moved stands among the leaves.
466. paintFn(n) {
467. let body = ''
468. for (a of n.attrs) {
469. if (a.member != null) {
470. body = body + 'if(n===' + str(a.member) + '){' + attrWrite(n, a, readOf({ k = 'member'; name = a.member; })) + '}'
471. }
472. }
473. let text = textOf(n)
474. if (text != null) {
475. let guard = ''
476. for (c of n.children) {
477. if (c.k == 'member' && c.name != 'slot') {
478. if (guard != '') { guard = guard + '||' }
479. guard = guard + 'n===' + str(c.name)
480. }
481. }
482. if (guard != '') { body = body + 'if(' + guard + '){el.textContent=' + text + ';}' }
483. }
484. if (body == '') { return null }
485. return 'function(el,inst,r,n){' + body + '}'
486. }
488. // `rowPaint(&m, el)`, compiled: every bound spot, written only where the DOM does not
489. // already hold it — which is why a push into 2000 rows costs the 1999 nothing.
490. rowFn(n) {
491. let body = ''
492. for (a of n.attrs) {
493. if (isBool(a)) {
494. body = body + '{' + boolWrite(a, rawRead(a.member != null ? { k = 'member'; name = a.member; } : a.ref)) + '}'
495. } else if (a.member != null || a.ref != null) {
496. let one = 'let v=' + readOf(a.member != null ? { k = 'member'; name = a.member; } : a.ref) + ';'
497. if (a.extra != null) { one = one + 'v=v+" "+' + str(a.extra) + ';' }
498. if (n.tag == 'select' && a.name == 'value') { one = one + 'if(el.value!==v){el.value=v;}' }
499. else {
500. one = one + 'if(el.getAttribute(' + str(a.name) + ')!==v){el.setAttribute(' + str(a.name) + ',v);}'
501. if (a.name == 'value') { one = one + 'if(el.value!=null&&el.value!==v){el.value=v;}' }
502. }
503. body = body + '{' + one + '}'
504. }
505. }
506. let text = textOf(n)
507. let feeds = false
508. for (c of n.children) { if ((c.k == 'member' || c.k == 'field') && c.name != 'slot') { feeds = true } }
509. if (text != null && feeds) { body = body + '{let t=' + text + ';if(el.textContent!==t){el.textContent=t;}}' }
510. if (body == '') { return 'null' }
511. return 'function(el,inst,r){' + body + '}'
512. }
514. attrWrite(n, a, v) {
515. if (isBool(a)) { return boolWrite(a, rawRead(a.member != null ? { k = 'member'; name = a.member; } : a.ref)) }
516. let src = 'let v=' + v + ';'
517. if (a.extra != null) { src = src + 'v=v+" "+' + str(a.extra) + ';' }
518. if (n.tag == 'select' && a.name == 'value') { return src + 'el.value=v;' }
519. src = src + 'el.setAttribute(' + str(a.name) + ',v);'
520. if (a.name == 'value') { src = src + 'if(el.value!=null){el.value=v;}' }
521. return src
522. }
524. textOf(n) {
525. let parts = []
526. let content = 0
527. let feeds = false
528. for (c of n.children) {
529. if (c.k != 'on') {
530. content = content + 1
531. if (c.k == 'text') { parts.push(str(c.text)) }
532. else if ((c.k == 'member' || c.k == 'field') && c.name != 'slot') { parts.push(readOf(c)) feeds = true }
533. }
534. }
535. if (!feeds) { return null }
536. if (parts.length != content) { return null }
537. let src = '""'
538. for (p of parts) { src = src + '+(' + p + ')' }
539. return src
540. }
542. // ---- a read, written in ---------------------------------------------------------------
543. // `view.value`'s own rule as an expression: a `for` row variable in scope wins over a
544. // member of the same name, and a field path walks into it. `readOf` answers the STRING
545. // the DOM takes; `rawRead` the value itself (a binding, a list, a condition).
546. readOf(node) { return '(""+' + rawRead(node) + ')' }
548. rawRead(node) {
549. if (node == null) { return 'null' }
550. if (node.k == 'text') { return str(node.text) }
551. if (node.k != 'field') { return 'RV(r,inst,' + str(node.name) + ')' }
552. return 'RF(r,inst,' + str(node.name) + ',' + list(node.path) + ')'
553. }
555. list(names) {
556. let src = '['
557. let first = true
558. for (n of names) {
559. if (!first) { src = src + ',' }
560. first = false
561. src = src + str(n)
562. }
563. return src + ']'
564. }
566. // a JavaScript string literal — JSON's escaping is a subset of JavaScript's, so a
567. // source text's quotes, newlines and backslashes survive into the statement unchanged
568. str(s) {
569. if (s == null) { return '""' }
570. return JSON.stringify('' + s)
571. }
573. // ---- WHAT THE LANGUAGE SAYS ABOUT THIS FILE, read HERE and written into the code ----
574. // The old hl:web shipped the language's answers to the browser as data: `hlJs` writes each file's
575. // members, handlers and methods — every node of every initializer, with the names it
576. // reads — into the module, and the client reduces that table on every boot. The answers
577. // are facts about the source, so this file asks for them once, at compile time, and
578. // writes the RESULT into the statements: a handler's write set stands at the listener
579. // that needs it, a region's names at the region, the derivations as a list of what to
580. // re-run. The module carries no table at all (WebFramework `module` drops the one the
581. // emitter writes).
582. //
583. // The reflection is the framework's own analysis generation — the same `gen` the View
584. // trees come from. Nothing starts a second one: a handle is only valid inside the
585. // generation that made it.
586. tableOf(gen, key) {
587. let members = []
588. let derivations = []
589. let handlers = []
590. let methods = []
591. for (m of hlMembers(gen, key)) {
592. let entry = { name = m.name; nodes = null; }
593. if (m.hasValue) {
594. let n = syntaxTree(gen, key, m.node)
595. entry.nodes = n
596. derivations.push({ name = m.name; site = n.site; reads = n.reads; })
597. nestedHandlers(&handlers, n)
598. }
599. members.push(entry)
600. }
601. for (h of hlEvents(gen, key).handles) {
602. let n = syntaxTree(gen, key, h.node)
603. handlers.push({ event = h.event; site = n.site; reads = n.reads; writes = n.writes; nested = false; })
604. }
605. for (mm of hlMethods(gen, key)) {
606. if (!mm.inlineHandler) {
607. let n = syntaxTree(gen, key, mm.node)
608. methods.push({ name = mm.name; reads = n.reads; writes = n.writes; })
609. }
610. }
611. return { members = members; derivations = derivations; handlers = handlers; methods = methods; }
612. }
614. // A NESTED `on` IS A DOM HANDLER, filed under its own site — the id the View node
615. // carries. Its body is not the literal's syntax, so the node answers for it and the
616. // walk stops there.
617. nestedHandlers(&into, n) {
618. if (n == null) { return null }
619. if (n.tag == 'on_statement') {
620. into.push({ event = n.event; site = n.site; reads = n.reads; writes = n.writes; nested = true; })
621. return null
622. }
623. 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]) {
624. if (c != null) { nestedHandlers(&into, c) }
625. }
626. for (l of [n.entries, n.args, n.elements]) {
627. if (l != null) { for (c of l) { nestedHandlers(&into, c) } }
628. }
629. return null
630. }
632. shortSite(site) {
633. if (site == null) { return null }
634. let at = site.indexOf(':')
635. if (at < 0) { return site }
636. let path = site.slice(0, at)
637. let cut = path.lastIndexOf('/')
638. if (cut < 0) { return site }
639. return path.slice(cut + 1) + site.slice(at)
640. }
642. // the syntax of one node, recursively — hl:core/AST's `tree`, read off the framework's
643. // own generation instead of starting one of its own
644. syntaxTree(gen, key, node) {
645. let n = hlSyntax(gen, key, node)
646. if (n == null) { return null }
647. // A SITE IS NAMED BY THE FILE'S BASE NAME. The reflection answers with the project
648. // key ('components/sort_list.hl:77:26'); the View tree, the emitter's own
649. // `__derive__` branches and every site this framework writes use the base name
650. // ('sort_list.hl:77:26'). One spelling, or a lookup by site finds nothing.
651. let out = { tag = n.tag; site = shortSite(n.site); reads = n.reads; writes = n.writes; }
652. if (n.tag == 'object_expression') {
653. let kids = []
654. for (h of n.entries) { kids.push(syntaxTree(gen, key, h)) }
655. out.entries = kids
656. } else if (n.tag == 'object_property') {
657. out.key = n.key
658. out.value = syntaxTree(gen, key, n.value)
659. } else if (n.tag == 'view_for') {
660. out.list = syntaxTree(gen, key, n.list)
661. out.body = syntaxTree(gen, key, n.body)
662. } else if (n.tag == 'view_if') {
663. out.condition = syntaxTree(gen, key, n.condition)
664. out.consequent = syntaxTree(gen, key, n.consequent)
665. out.alternate = syntaxTree(gen, key, n.alternate)
666. } else if (n.tag == 'on_statement') {
667. out.event = n.event
668. } else if (n.tag == 'member_expression') {
669. out.object = syntaxTree(gen, key, n.object)
670. out.property = syntaxTree(gen, key, n.property)
671. } else if (n.tag == 'call_expression') {
672. out.callee = syntaxTree(gen, key, n.callee)
673. let args = []
674. for (h of n.args) { args.push(syntaxTree(gen, key, h)) }
675. out.args = args
676. } else if (n.tag == 'binary_expression') {
677. out.left = syntaxTree(gen, key, n.left)
678. out.right = syntaxTree(gen, key, n.right)
679. } else if (n.tag == 'unary_expression') {
680. out.operand = syntaxTree(gen, key, n.operand)
681. } else if (n.tag == 'conditional_expression') {
682. out.condition = syntaxTree(gen, key, n.condition)
683. out.consequent = syntaxTree(gen, key, n.consequent)
684. out.alternate = syntaxTree(gen, key, n.alternate)
685. } else if (n.tag == 'array_expression') {
686. let els = []
687. for (h of n.elements) { els.push(syntaxTree(gen, key, h)) }
688. out.elements = els
689. }
690. return out
691. }
693. // ---- the reductions the browser used to make on every boot --------------------------
694. // A `for`'s names are what its list reads, an `if`'s what its condition reads — filed
695. // under the region's own site.
696. regionIndex(t) {
697. let idx = {}
698. for (m of t.members) { if (m.nodes != null) { indexRegions(&idx, m.nodes) } }
699. return idx
700. }
702. indexRegions(&idx, n) {
703. if (n == null) { return null }
704. if (n.tag == 'view_for') {
705. idx[n.site] = memberNames(nodeReads(n.list))
706. indexRegions(&idx, n.body)
707. return null
708. }
709. if (n.tag == 'view_if') {
710. idx[n.site] = memberNames(nodeReads(n.condition))
711. indexRegions(&idx, n.consequent)
712. indexRegions(&idx, n.alternate)
713. return null
714. }
715. if (n.tag == 'on_statement') { return null }
716. 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]) {
717. if (c != null) { indexRegions(&idx, c) }
718. }
719. for (l of [n.entries, n.args, n.elements]) {
720. if (l != null) { for (c of l) { indexRegions(&idx, c) } }
721. }
722. return null
723. }
725. // the member reads of a read list — the language resolved every name, so this is a
726. // filter and not a second resolution
727. memberNames(reads) {
728. let out = []
729. if (reads == null) { return out }
730. for (r of reads) {
731. if (r.kind == 'member' && r.isStatic != true && !out.includes(r.name)) { out.push(r.name) }
732. }
733. return out
734. }
736. nodeReads(n) {
737. if (n == null) { return [] }
738. if (n.reads != null) { return n.reads }
739. let out = []
740. 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]) {
741. if (c != null) { for (r of nodeReads(c)) { out.push(r) } }
742. }
743. for (l of [n.entries, n.args, n.elements]) {
744. if (l != null) { for (c of l) { for (r of nodeReads(c)) { out.push(r) } } }
745. }
746. return out
747. }
749. // A ROUTINE'S WRITES, PLUS THE WRITES OF EVERYTHING IT REACHES — the method it calls
750. // and the handler it emits to, transitively. Both are READS the language resolved, so
751. // this is a walk of its answer and never a guess.
752. closeWrites(t, writes, reads) {
753. let out = memberNames(writes)
754. let queue = []
755. reached(&queue, reads)
756. let seen = {}
757. while (queue.length > 0) {
758. let at = queue.shift()
759. if (seen[at] == null) {
760. seen[at] = true
761. let sp = at.indexOf(' ')
762. let kind = at.slice(0, sp)
763. let name = at.slice(sp + 1)
764. for (mm of t.methods) {
765. if (kind == 'method' && mm.name == name) {
766. for (w of memberNames(mm.writes)) { if (!out.includes(w)) { out.push(w) } }
767. reached(&queue, mm.reads)
768. }
769. }
770. for (h of t.handlers) {
771. if (kind == 'handler' && !h.nested && h.event == name) {
772. for (w of memberNames(h.writes)) { if (!out.includes(w)) { out.push(w) } }
773. reached(&queue, h.reads)
774. }
775. }
776. for (mb of t.members) {
777. if (kind == 'member' && mb.name == name && mb.nodes != null) {
778. for (w of memberNames(mb.nodes.writes)) { if (!out.includes(w)) { out.push(w) } }
779. reached(&queue, nodeReads(mb.nodes))
780. }
781. }
782. }
783. }
784. return out
785. }
787. // the mirror: a handler's reads plus the reads of everything it reaches — the
788. // candidates for a routine a host handed down, whose writes only the host's table names
789. closeReads(t, reads) {
790. let out = memberNames(reads)
791. let queue = []
792. reached(&queue, reads)
793. let seen = {}
794. while (queue.length > 0) {
795. let at = queue.shift()
796. if (seen[at] == null) {
797. seen[at] = true
798. let sp = at.indexOf(' ')
799. let kind = at.slice(0, sp)
800. let name = at.slice(sp + 1)
801. for (mm of t.methods) {
802. if (kind == 'method' && mm.name == name) {
803. for (r of memberNames(mm.reads)) { if (!out.includes(r)) { out.push(r) } }
804. reached(&queue, mm.reads)
805. }
806. }
807. for (h of t.handlers) {
808. if (kind == 'handler' && !h.nested && h.event == name) {
809. for (r of memberNames(h.reads)) { if (!out.includes(r)) { out.push(r) } }
810. reached(&queue, h.reads)
811. }
812. }
813. for (mb of t.members) {
814. if (kind == 'member' && mb.name == name && mb.nodes != null) {
815. for (r of memberNames(nodeReads(mb.nodes))) { if (!out.includes(r)) { out.push(r) } }
816. reached(&queue, nodeReads(mb.nodes))
817. }
818. }
819. }
820. }
821. return out
822. }
824. reached(&queue, reads) {
825. if (reads == null) { return null }
826. for (r of reads) {
827. if (r.kind == 'method' || r.kind == 'handler' || (r.kind == 'member' && r.isStatic != true)) { queue.push(r.kind + ' ' + r.name) }
828. }
829. return null
830. }
832. // ---- THE SERVER RENDER, COMPILED --------------------------------------------------
833. // The old hl:web rendered a page by WALKING the View tree per request: for every node it asks
834. // what kind it is, for every element it builds the attribute string, and it decides the
835. // indentation of every line again, on every request, for every one of the 121 mounts a
836. // page may hold. Every one of those decisions is a fact about the View.
837. //
838. // So a component's render is compiled ONCE into a list of STEPS — constant text, and a
839. // read with its own closure — and a request is a concatenation. The structure (tags,
840. // static attributes, the readable form's line breaks, which element is a block) is
841. // decided at compile time; only the values are asked for per request.
842. //
843. // KEYED BY THE INDENT IT IS RENDERED AT, because that is the only thing about a
844. // component's HTML that its caller decides: the shell renders at one tab, the page at
845. // the depth the slot stands, a fill compactly (null). An app has a handful of those.
846. serverSteps(key, nodes, indent, classes, slotted) {
847. let ck = key + '|' + (indent == null ? '~' : indent) + '|' + joinList(classes) + '|' + (slotted ? '1' : '0')
848. if (steps[ck] == null) {
849. steps[ck] = blockSteps(classes == null || classes.length == 0 ? nodes : v.withRootClasses(nodes, classes), indent, slotted)
850. }
851. return steps[ck]
852. }
854. // A `slot` THE HOST FILLED COUNTS AS CONTENT, and an empty one does not — the one
855. // thing about a component's shape its caller decides, so it is part of the key.
856. staticVoid = [ 'area' 'base' 'br' 'col' 'embed' 'hr' 'img' 'input' 'link' 'meta' 'source' 'track' 'wbr' ]
857. staticVerbatim = [ 'textarea' 'pre' 'script' 'style' ]
859. blocky(n, slotted) {
860. if (staticVerbatim.includes(n.tag)) { return false }
861. if (n.children.length == 0) { return false }
862. for (c of n.children) {
863. if (c.k == 'text' || c.k == 'field') { return false }
864. if (c.k == 'member' && !(c.name == 'slot' && slotted)) { return false }
865. }
866. return true
867. }
869. steps = {}
870. v = new View
872. joinList(l) {
873. if (l == null) { return '' }
874. let out = ''
875. for (c of l) { out = out + ',' + c }
876. return out
877. }
879. // `render(nodes, …, indent)`: the readable form puts each element on its own line at
880. // `indent`, the compact one writes them end to end.
881. blockSteps(nodes, indent, slotted) {
882. let out = []
883. for (n of nodes) {
884. if (indent != null) {
885. if (n.k == 'el') { push(&out, { k = 's'; v = newline + indent; }) nodeSteps(&out, n, indent, slotted) }
886. else if (n.k == 'component') { nodeSteps(&out, n, indent, slotted) }
887. else if (n.k == 'for') { forSteps(&out, n, indent, slotted) }
888. else if (n.k == 'if') { ifSteps(&out, n, indent, slotted) }
889. else if (n.k == 'member' && n.name == 'slot') { push(&out, { k = 'slotline'; v = newline + indent; }) }
890. else if (n.k != 'on') { nodeSteps(&out, n, indent, slotted) }
891. } else {
892. nodeSteps(&out, n, null, slotted)
893. }
894. }
895. return out
896. }
898. forSteps(&out, n, indent, slotted) {
899. out.push({ k = 'for'; row = n.row; read = readFn(n.list); body = blockSteps(n.body, indent, slotted); })
900. return null
901. }
903. ifSteps(&out, n, indent, slotted) {
904. out.push({ k = 'if'; read = readFn(n.cond); then = blockSteps(n.then, indent, slotted); other = blockSteps(n.other, indent, slotted); })
905. return null
906. }
908. // one node's steps — `html(node, …)`, decided once
909. nodeSteps(&out, n, indent, slotted) {
910. if (n.k == 'text') { push(&out, { k = 's'; v = v.escape(n.text); }) return null }
911. if (n.k == 'on') { return null }
912. if (n.k == 'member' && n.name == 'slot') { out.push({ k = 'slot'; }) return null }
913. if (n.k == 'member' || n.k == 'field') { out.push({ k = 'r'; read = readFn(n); }) return null }
914. if (n.k == 'for') { forSteps(&out, n, indent, slotted) return null }
915. if (n.k == 'if') { ifSteps(&out, n, indent, slotted) return null }
916. if (n.k == 'component') {
917. out.push({ k = 'kid'; path = n.path; cls = n.cls; key = n.key; classes = n.classes; indent = indent;
918. fill = (n.fill == null || n.fill.length == 0) ? null : blockSteps(n.fill, null, slotted); })
919. return null
920. }
921. if (n.k == 'el') { elSteps(&out, n, indent, slotted) return null }
922. push(&out, { k = 's'; v = '<!-- ' + n.tag + ' not rendered yet -->'; })
923. return null
924. }
926. elSteps(&out, n, indent, slotted) {
927. let attrs = []
928. let valueRead = null // a textarea's value is its content
929. let selRead = null // a select's value selects an option
930. for (a of n.attrs) {
931. if (n.tag == 'textarea' && a.name == 'value') { valueRead = attrRead(a) }
932. else if (n.tag == 'select' && a.name == 'value') { selRead = attrRead(a) }
933. // a bound BOOLEAN attribute is its presence (ticket #33): ` checked=""` or nothing
934. else if ((a.member != null || a.ref != null) && v.isBoolAttr(a.name)) { attrs.push({ k = 'b'; name = a.name; read = attrRead(a); }) }
935. else if (a.member != null || a.ref != null) {
936. push(&attrs, { k = 's'; v = ' ' + a.name + '="'; })
937. attrs.push({ k = 'r'; read = attrRead(a); })
938. push(&attrs, { k = 's'; v = v.extraOf(a) + '"'; })
939. } else {
940. push(&attrs, { k = 's'; v = ' ' + a.name + '="' + v.escape(a.text) + '"'; })
941. }
942. }
943. if (v.boundValue(n)) { push(&attrs, { k = 's'; v = ' autocomplete="off"'; }) }
945. // the children, in the form this element takes: a block puts them one per line
946. let kids = []
947. if (indent != null && blocky(n, slotted)) {
948. kids = blockSteps(n.children, indent + tab, slotted)
949. push(&kids, { k = 's'; v = newline + indent; })
950. } else {
951. kids = blockSteps(n.children, null, slotted)
952. }
953. if (valueRead != null) { kids = [{ k = 'r'; read = valueRead; }] }
955. // AN OPTION IS THE ONE ELEMENT WHOSE OWN TAG DEPENDS ON THE VALUE ABOVE IT: it
956. // carries `selected` when its value is the select's. Everything else is settled.
957. if (n.tag == 'option') {
958. out.push({ k = 'opt'; attrs = attrs; body = kids; ov = optionRead(n); })
959. return null
960. }
961. push(&out, { k = 's'; v = '<' + n.tag; })
962. for (a of attrs) { push(&out, a) }
963. if (staticVoid.includes(n.tag)) { push(&out, { k = 's'; v = '>'; }) return null }
964. push(&out, { k = 's'; v = '>'; })
965. // A SELECT HANDS ITS VALUE TO ITS OPTIONS, however deep they stand: its children
966. // run under it, and it is the only element that changes anything for them.
967. if (n.tag == 'select') { out.push({ k = 'sel'; read = selRead; body = kids; }) }
968. else { for (kk of kids) { push(&out, kk) } }
969. push(&out, { k = 's'; v = '</' + n.tag + '>'; })
970. return null
971. }
973. // CONSTANT TEXT MERGES. Two literal steps in a row are one string decided at compile
974. // time — which is what makes a request a concatenation of a handful of pieces instead
975. // of one per node.
976. push(&out, step) {
977. if (step.k == 's' && out.length > 0 && out[out.length - 1].k == 's') {
978. let last = out[out.length - 1]
979. last.v = last.v + step.v
980. out[out.length - 1] = last
981. return null
982. }
983. out.push(step)
984. return null
985. }
987. // ---- the reads, each with its own closure ------------------------------------------
988. // `view.value`'s rule, split once: a `for` row variable in scope wins over a member of
989. // the same name, and a field path walks into it. The closure holds the name — there is
990. // no node to look at per request.
991. readFn(node) {
992. if (node == null) { return (inst, rows) => { return null } }
993. if (node.k == 'text') { let t = v.literalValue(node.kind, node.text) return (inst, rows) => { return t } }
994. let name = node.name
995. if (node.k != 'field') {
996. return (inst, rows) => { return rows[name] != null ? rows[name] : inst[name] }
997. }
998. let path = node.path
999. return (inst, rows) => {
1000. let val = rows[name] != null ? rows[name] : inst[name]
1001. for (f of path) {
1002. if (val == null) { return null }
1003. val = val[f]
1004. }
1005. return val
1006. }
1007. }
1009. attrRead(a) {
1010. if (a.member != null) { return readFn({ k = 'member'; name = a.member; }) }
1011. if (a.ref != null) { return readFn(a.ref) }
1012. let t = a.text
1013. return (inst, rows) => { return t }
1014. }
1016. // an option's own value: its `value` attribute, or null when it has none (the browser
1017. // then reports its text, and the run compares against what it rendered)
1018. optionRead(n) {
1019. for (a of n.attrs) {
1020. if (a.name == 'value') { return attrRead(a) }
1021. }
1022. return null
1023. }
1025. // ---- the run: a concatenation ------------------------------------------------------
1026. runSteps(list, &inst, &rows, &ctx) {
1027. let out = ''
1028. for (s of list) {
1029. if (s.k == 's') { out = out + s.v }
1030. else if (s.k == 'r') { let f = s.read out = out + v.escape(f(&inst, &rows)) }
1031. else if (s.k == 'b') { let f = s.read if (v.boolOn(f(&inst, &rows))) { out = out + ' ' + s.name + '=""' } }
1032. else if (s.k == 'slot') { if (ctx.slot != null) { out = out + ctx.slot } }
1033. else if (s.k == 'slotline') { if (ctx.slot != null) { out = out + s.v + ctx.slot } }
1034. else if (s.k == 'for') {
1035. let f = s.read
1036. let list2 = f(&inst, &rows)
1037. if (list2 != null) {
1038. let ri = 0
1039. for (entry of list2) {
1040. let inner = rows + {}
1041. inner[s.row] = entry
1042. let rc = v.rowCtx(&ctx, &entry, ri)
1043. out = out + runSteps(s.body, &inst, &inner, &rc)
1044. ri = ri + 1
1045. }
1046. }
1047. }
1048. else if (s.k == 'if') {
1049. let f = s.read
1050. if (f(&inst, &rows)) { out = out + runSteps(s.then, &inst, &rows, &ctx) }
1051. else { out = out + runSteps(s.other, &inst, &rows, &ctx) }
1052. }
1053. else if (s.k == 'opt') {
1054. let head = runSteps(s.attrs, &inst, &rows, &ctx)
1055. let body = runSteps(s.body, &inst, &rows, &ctx)
1056. let mark = ''
1057. if (ctx.sel != null) {
1058. let ov = body
1059. if (s.ov != null) { let f = s.ov ov = '' + f(&inst, &rows) }
1060. if (ov == ctx.sel) { mark = ' selected' }
1061. }
1062. out = out + '<option' + head + mark + '>' + body + '</option>'
1063. }
1064. else if (s.k == 'sel') {
1065. let f = s.read
1066. let inner = ctx + {}
1067. inner.sel = f == null ? null : '' + f(&inst, &rows)
1068. out = out + runSteps(s.body, &inst, &rows, &inner)
1069. }
1070. else if (s.k == 'kid') {
1071. let kid = ctx.kids[v.kidKeyIn(s.path, ctx)]
1072. if (kid == null) { out = out + '<!-- ' + s.cls + ' not mounted -->' }
1073. else {
1074. let fillText = s.fill == null ? null : runSteps(s.fill, &inst, &rows, &ctx)
1075. let kidCtx = { slot = fillText; kids = kid.kids; }
1076. let kidInst = kid.page
1077. let empty = {}
1078. out = out + runSteps(serverSteps(s.key, kid.view, s.indent, s.classes, fillText != null), &kidInst, &empty, &kidCtx)
1079. }
1080. }
1081. }
1082. return out
1083. }