Skip to content

Commit 4bb0a32

Browse files
author
Andrea Giammarchi
committed
Invokable Slot
There are a variety of use cases for having a callback invoked while the node content is being populated. Even if I am sure this opportunity will be most likely misused, it might simplify intent-like use cases in scope, also providing a parent node reference for weakly related compositions (i.e. automating hyperHTML.Component in JSX like syntax).
1 parent 22650a2 commit 4bb0a32

13 files changed

Lines changed: 490 additions & 442 deletions

File tree

‎cjs/objects/Updates.js‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -248,6 +248,9 @@ const setAnyContent = (node, childNodes) => {
248248
);
249249
}
250250
break;
251+
case 'function':
252+
anyContent(value(node));
253+
break;
251254
case 'object':
252255
case 'undefined':
253256
if (value == null) {
@@ -434,7 +437,8 @@ const setTextContent = node => {
434437
const textContent = value => {
435438
if (oldValue !== value) {
436439
oldValue = value;
437-
if (typeof value === 'object' && value) {
440+
const type = typeof value;
441+
if (type === 'object' && value) {
438442
if (isPromise_ish(value)) {
439443
value.then(textContent);
440444
} else if ('placeholder' in value) {
@@ -450,6 +454,8 @@ const setTextContent = node => {
450454
} else {
451455
textContent(Intent.invoke(value, textContent));
452456
}
457+
} else if (type === 'function') {
458+
textContent(value(node));
453459
} else {
454460
node.textContent = value == null ? '' : value;
455461
}

‎coverage/coverage.json‎

Lines changed: 1 addition & 1 deletion
Large diffs are not rendered by default.

‎coverage/lcov-report/hyperHTML/index.c.js.html‎

Lines changed: 40 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -22,12 +22,12 @@ <h1>
2222
<div class='fl pad1y space-right2'>
2323
<span class="strong">100% </span>
2424
<span class="quiet">Statements</span>
25-
<span class='fraction'>830/830</span>
25+
<span class='fraction'>835/835</span>
2626
</div>
2727
<div class='fl pad1y space-right2'>
2828
<span class="strong">100% </span>
2929
<span class="quiet">Branches</span>
30-
<span class='fraction'>439/439</span>
30+
<span class='fraction'>442/442</span>
3131
</div>
3232
<div class='fl pad1y space-right2'>
3333
<span class="strong">100% </span>
@@ -37,7 +37,7 @@ <h1>
3737
<div class='fl pad1y space-right2'>
3838
<span class="strong">100% </span>
3939
<span class="quiet">Lines</span>
40-
<span class='fraction'>802/802</span>
40+
<span class='fraction'>807/807</span>
4141
</div>
4242
<div class='fl pad1y'>
4343
<span class="strong">21 statements, 9 functions, 19 branches</span>
@@ -1721,7 +1721,13 @@ <h1>
17211721
1672
17221722
1673
17231723
1674
1724-
1675</td><td class="line-coverage quiet"><span class="cline-any cline-yes">3×</span>
1724+
1675
1725+
1676
1726+
1677
1727+
1678
1728+
1679
1729+
1680
1730+
1681</td><td class="line-coverage quiet"><span class="cline-any cline-yes">3×</span>
17251731
<span class="cline-any cline-neutral">&nbsp;</span>
17261732
<span class="cline-any cline-neutral">&nbsp;</span>
17271733
<span class="cline-any cline-yes">3×</span>
@@ -2392,7 +2398,7 @@ <h1>
23922398
<span class="cline-any cline-neutral">&nbsp;</span>
23932399
<span class="cline-any cline-neutral">&nbsp;</span>
23942400
<span class="cline-any cline-yes">3×</span>
2395-
<span class="cline-any cline-yes">4389×</span>
2401+
<span class="cline-any cline-yes">4382×</span>
23962402
<span class="cline-any cline-neutral">&nbsp;</span>
23972403
<span class="cline-any cline-neutral">&nbsp;</span>
23982404
<span class="cline-any cline-yes">3×</span>
@@ -2503,25 +2509,25 @@ <h1>
25032509
<span class="cline-any cline-neutral">&nbsp;</span>
25042510
<span class="cline-any cline-neutral">&nbsp;</span>
25052511
<span class="cline-any cline-yes">58×</span>
2506-
<span class="cline-any cline-yes">919×</span>
2507-
<span class="cline-any cline-yes">919×</span>
2512+
<span class="cline-any cline-yes">936×</span>
2513+
<span class="cline-any cline-yes">936×</span>
25082514
<span class="cline-any cline-neutral">&nbsp;</span>
25092515
<span class="cline-any cline-yes">58×</span>
2510-
<span class="cline-any cline-yes">926×</span>
2511-
<span class="cline-any cline-yes">926×</span>
2516+
<span class="cline-any cline-yes">936×</span>
2517+
<span class="cline-any cline-yes">936×</span>
25122518
<span class="cline-any cline-neutral">&nbsp;</span>
25132519
<span class="cline-any cline-yes">58×</span>
25142520
<span class="cline-any cline-yes">58×</span>
25152521
<span class="cline-any cline-yes">58×</span>
25162522
<span class="cline-any cline-yes">58×</span>
25172523
<span class="cline-any cline-neutral">&nbsp;</span>
25182524
<span class="cline-any cline-yes">2×</span>
2519-
<span class="cline-any cline-yes">1023×</span>
2520-
<span class="cline-any cline-yes">1023×</span>
2525+
<span class="cline-any cline-yes">1006×</span>
2526+
<span class="cline-any cline-yes">1006×</span>
25212527
<span class="cline-any cline-neutral">&nbsp;</span>
25222528
<span class="cline-any cline-yes">2×</span>
2523-
<span class="cline-any cline-yes">22×</span>
2524-
<span class="cline-any cline-yes">22×</span>
2529+
<span class="cline-any cline-yes">12×</span>
2530+
<span class="cline-any cline-yes">12×</span>
25252531
<span class="cline-any cline-neutral">&nbsp;</span>
25262532
<span class="cline-any cline-yes">2×</span>
25272533
<span class="cline-any cline-neutral">&nbsp;</span>
@@ -2547,9 +2553,9 @@ <h1>
25472553
<span class="cline-any cline-yes">409×</span>
25482554
<span class="cline-any cline-yes">409×</span>
25492555
<span class="cline-any cline-yes">3641×</span>
2550-
<span class="cline-any cline-yes">3292×</span>
2556+
<span class="cline-any cline-yes">3265×</span>
25512557
<span class="cline-any cline-neutral">&nbsp;</span>
2552-
<span class="cline-any cline-yes">349×</span>
2558+
<span class="cline-any cline-yes">376×</span>
25532559
<span class="cline-any cline-neutral">&nbsp;</span>
25542560
<span class="cline-any cline-yes">3641×</span>
25552561
<span class="cline-any cline-yes">3641×</span>
@@ -2949,7 +2955,7 @@ <h1>
29492955
<span class="cline-any cline-yes">171×</span>
29502956
<span class="cline-any cline-yes">171×</span>
29512957
<span class="cline-any cline-yes">171×</span>
2952-
<span class="cline-any cline-yes">430×</span>
2958+
<span class="cline-any cline-yes">438×</span>
29532959
<span class="cline-any cline-neutral">&nbsp;</span>
29542960
<span class="cline-any cline-neutral">&nbsp;</span>
29552961
<span class="cline-any cline-neutral">&nbsp;</span>
@@ -2965,6 +2971,9 @@ <h1>
29652971
<span class="cline-any cline-neutral">&nbsp;</span>
29662972
<span class="cline-any cline-yes">158×</span>
29672973
<span class="cline-any cline-neutral">&nbsp;</span>
2974+
<span class="cline-any cline-yes">8×</span>
2975+
<span class="cline-any cline-yes">8×</span>
2976+
<span class="cline-any cline-neutral">&nbsp;</span>
29682977
<span class="cline-any cline-neutral">&nbsp;</span>
29692978
<span class="cline-any cline-yes">272×</span>
29702979
<span class="cline-any cline-yes">12×</span>
@@ -3114,9 +3123,10 @@ <h1>
31143123
<span class="cline-any cline-yes">3×</span>
31153124
<span class="cline-any cline-yes">12×</span>
31163125
<span class="cline-any cline-yes">12×</span>
3117-
<span class="cline-any cline-yes">81×</span>
3118-
<span class="cline-any cline-yes">57×</span>
3119-
<span class="cline-any cline-yes">57×</span>
3126+
<span class="cline-any cline-yes">105×</span>
3127+
<span class="cline-any cline-yes">102×</span>
3128+
<span class="cline-any cline-yes">102×</span>
3129+
<span class="cline-any cline-yes">102×</span>
31203130
<span class="cline-any cline-yes">21×</span>
31213131
<span class="cline-any cline-yes">3×</span>
31223132
<span class="cline-any cline-yes">18×</span>
@@ -3132,8 +3142,10 @@ <h1>
31323142
<span class="cline-any cline-neutral">&nbsp;</span>
31333143
<span class="cline-any cline-yes">3×</span>
31343144
<span class="cline-any cline-neutral">&nbsp;</span>
3145+
<span class="cline-any cline-yes">81×</span>
3146+
<span class="cline-any cline-yes">24×</span>
31353147
<span class="cline-any cline-neutral">&nbsp;</span>
3136-
<span class="cline-any cline-yes">36×</span>
3148+
<span class="cline-any cline-yes">57×</span>
31373149
<span class="cline-any cline-neutral">&nbsp;</span>
31383150
<span class="cline-any cline-neutral">&nbsp;</span>
31393151
<span class="cline-any cline-neutral">&nbsp;</span>
@@ -4638,6 +4650,9 @@ <h1>
46384650
childNodes = domdiff(node.parentNode, childNodes, [text(node, value)], diffOptions);
46394651
}
46404652
break;
4653+
case 'function':
4654+
anyContent(value(node));
4655+
break;
46414656
case 'object':
46424657
case 'undefined':
46434658
if (value == null) {
@@ -4790,7 +4805,8 @@ <h1>
47904805
var textContent = function textContent(value) {
47914806
if (oldValue !== value) {
47924807
oldValue = value;
4793-
if (typeof value === 'object' &amp;&amp; value) {
4808+
var type = typeof value;
4809+
if (type === 'object' &amp;&amp; value) {
47944810
if (isPromise_ish(value)) {
47954811
value.then(textContent);
47964812
} else if ('placeholder' in value) {
@@ -4806,6 +4822,8 @@ <h1>
48064822
} else {
48074823
textContent(Intent.invoke(value, textContent));
48084824
}
4825+
} else if (type === 'function') {
4826+
textContent(value(node));
48094827
} else {
48104828
node.textContent = value == null ? '' : value;
48114829
}
@@ -5075,7 +5093,7 @@ <h1>
50755093
</div><!-- /wrapper -->
50765094
<div class='footer quiet pad2 space-top1 center small'>
50775095
Code coverage
5078-
generated by <a href="http://istanbul-js.org/" target="_blank">istanbul</a> at Thu Sep 13 2018 10:30:15 GMT+0200 (CEST)
5096+
generated by <a href="http://istanbul-js.org/" target="_blank">istanbul</a> at Sat Oct 27 2018 13:45:48 GMT+0200 (CEST)
50795097
</div>
50805098
</div>
50815099
<script src="../prettify.js"></script>

‎coverage/lcov-report/hyperHTML/index.html‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -22,12 +22,12 @@ <h1>
2222
<div class='fl pad1y space-right2'>
2323
<span class="strong">100% </span>
2424
<span class="quiet">Statements</span>
25-
<span class='fraction'>830/830</span>
25+
<span class='fraction'>835/835</span>
2626
</div>
2727
<div class='fl pad1y space-right2'>
2828
<span class="strong">100% </span>
2929
<span class="quiet">Branches</span>
30-
<span class='fraction'>439/439</span>
30+
<span class='fraction'>442/442</span>
3131
</div>
3232
<div class='fl pad1y space-right2'>
3333
<span class="strong">100% </span>
@@ -37,7 +37,7 @@ <h1>
3737
<div class='fl pad1y space-right2'>
3838
<span class="strong">100% </span>
3939
<span class="quiet">Lines</span>
40-
<span class='fraction'>802/802</span>
40+
<span class='fraction'>807/807</span>
4141
</div>
4242
<div class='fl pad1y'>
4343
<span class="strong">21 statements, 9 functions, 19 branches</span>
@@ -66,13 +66,13 @@ <h1>
6666
<td class="file high" data-value="index.c.js"><a href="index.c.js.html">index.c.js</a></td>
6767
<td data-value="100" class="pic high"><div class="chart"><div class="cover-fill cover-full" style="width: 100%;"></div><div class="cover-empty" style="width:0%;"></div></div></td>
6868
<td data-value="100" class="pct high">100%</td>
69-
<td data-value="830" class="abs high">830/830</td>
69+
<td data-value="835" class="abs high">835/835</td>
7070
<td data-value="100" class="pct high">100%</td>
71-
<td data-value="439" class="abs high">439/439</td>
71+
<td data-value="442" class="abs high">442/442</td>
7272
<td data-value="100" class="pct high">100%</td>
7373
<td data-value="121" class="abs high">121/121</td>
7474
<td data-value="100" class="pct high">100%</td>
75-
<td data-value="802" class="abs high">802/802</td>
75+
<td data-value="807" class="abs high">807/807</td>
7676
</tr>
7777

7878
</tbody>
@@ -81,7 +81,7 @@ <h1>
8181
</div><!-- /wrapper -->
8282
<div class='footer quiet pad2 space-top1 center small'>
8383
Code coverage
84-
generated by <a href="http://istanbul-js.org/" target="_blank">istanbul</a> at Thu Sep 13 2018 10:30:15 GMT+0200 (CEST)
84+
generated by <a href="http://istanbul-js.org/" target="_blank">istanbul</a> at Sat Oct 27 2018 13:45:48 GMT+0200 (CEST)
8585
</div>
8686
</div>
8787
<script src="../prettify.js"></script>

‎coverage/lcov-report/index.html‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -22,12 +22,12 @@ <h1>
2222
<div class='fl pad1y space-right2'>
2323
<span class="strong">100% </span>
2424
<span class="quiet">Statements</span>
25-
<span class='fraction'>830/830</span>
25+
<span class='fraction'>835/835</span>
2626
</div>
2727
<div class='fl pad1y space-right2'>
2828
<span class="strong">100% </span>
2929
<span class="quiet">Branches</span>
30-
<span class='fraction'>439/439</span>
30+
<span class='fraction'>442/442</span>
3131
</div>
3232
<div class='fl pad1y space-right2'>
3333
<span class="strong">100% </span>
@@ -37,7 +37,7 @@ <h1>
3737
<div class='fl pad1y space-right2'>
3838
<span class="strong">100% </span>
3939
<span class="quiet">Lines</span>
40-
<span class='fraction'>802/802</span>
40+
<span class='fraction'>807/807</span>
4141
</div>
4242
<div class='fl pad1y'>
4343
<span class="strong">21 statements, 9 functions, 19 branches</span>
@@ -66,13 +66,13 @@ <h1>
6666
<td class="file high" data-value="hyperHTML/"><a href="hyperHTML/index.html">hyperHTML/</a></td>
6767
<td data-value="100" class="pic high"><div class="chart"><div class="cover-fill cover-full" style="width: 100%;"></div><div class="cover-empty" style="width:0%;"></div></div></td>
6868
<td data-value="100" class="pct high">100%</td>
69-
<td data-value="830" class="abs high">830/830</td>
69+
<td data-value="835" class="abs high">835/835</td>
7070
<td data-value="100" class="pct high">100%</td>
71-
<td data-value="439" class="abs high">439/439</td>
71+
<td data-value="442" class="abs high">442/442</td>
7272
<td data-value="100" class="pct high">100%</td>
7373
<td data-value="121" class="abs high">121/121</td>
7474
<td data-value="100" class="pct high">100%</td>
75-
<td data-value="802" class="abs high">802/802</td>
75+
<td data-value="807" class="abs high">807/807</td>
7676
</tr>
7777

7878
</tbody>
@@ -81,7 +81,7 @@ <h1>
8181
</div><!-- /wrapper -->
8282
<div class='footer quiet pad2 space-top1 center small'>
8383
Code coverage
84-
generated by <a href="http://istanbul-js.org/" target="_blank">istanbul</a> at Thu Sep 13 2018 10:30:15 GMT+0200 (CEST)
84+
generated by <a href="http://istanbul-js.org/" target="_blank">istanbul</a> at Sat Oct 27 2018 13:45:48 GMT+0200 (CEST)
8585
</div>
8686
</div>
8787
<script src="prettify.js"></script>

0 commit comments

Comments
 (0)