Permalink
Browse files

feat(updatedHooks): Added Component.prototype.updatedHooks

  • Loading branch information...
calebdwilliams committed Oct 29, 2018
1 parent 3fc513f commit f5ab94fbfd212fa64be7a04df1aa009b4ebd7bd0
@@ -165,6 +165,28 @@ this.username = this.refs.username.value;

If you intend to perform some action on element references, it is probably best to use the `onInit` lifecycle method described above.

## Property updated hooks

When a property is updated, often a developer will want to be notified. This is accomplished using the `Component.prototype.updatedHooks` API. `updatedHooks` is a [JavaScript Map object](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map) that takes a property name and a callback function with the argument signature of `value: any, attributeName: string`. This callback _will not_ be called on the initial setting of the property value, but will be called on all subsequent calls to the property's setter.

```javascript
import { Component } from 'templiteral';
class MyEl extends Component {
static get boundAttributes() { return ['title']; }
constructor() {
super();
this.updatedHooks.set('title', this._titleUpdated);
}
render() { /** Omitted */ }
_titleUpdated(newTitle, attributeName) {
/** Omitted */
}
}
```

### Array templates

Loops are created using the built-in `Array` prototype methods and the use of the `fragment` function. `fragment` takes in a unique key for each element in the array. Normally, the item's index should suffice, but in cases where there will be significant re-rendering, something else might be necessary.
@@ -20,24 +20,24 @@ <h1>
</h1>
<div class='clearfix'>
<div class='fl pad1y space-right2'>
<span class="strong">77.16% </span>
<span class="strong">77.14% </span>
<span class="quiet">Statements</span>
<span class='fraction'>331/429</span>
<span class='fraction'>334/433</span>
</div>
<div class='fl pad1y space-right2'>
<span class="strong">62.5% </span>
<span class="strong">62.29% </span>
<span class="quiet">Branches</span>
<span class='fraction'>145/232</span>
<span class='fraction'>147/236</span>
</div>
<div class='fl pad1y space-right2'>
<span class="strong">75.47% </span>
<span class="quiet">Functions</span>
<span class='fraction'>40/53</span>
</div>
<div class='fl pad1y space-right2'>
<span class="strong">78.3% </span>
<span class="strong">78.27% </span>
<span class="quiet">Lines</span>
<span class='fraction'>314/401</span>
<span class='fraction'>317/405</span>
</div>
</div>
</div>
@@ -60,15 +60,15 @@ <h1>
</thead>
<tbody><tr>
<td class="file medium" data-value="src/"><a href="src/index.html">src/</a></td>
<td data-value="77.16" class="pic medium"><div class="chart"><div class="cover-fill" style="width: 77%;"></div><div class="cover-empty" style="width:23%;"></div></div></td>
<td data-value="77.16" class="pct medium">77.16%</td>
<td data-value="429" class="abs medium">331/429</td>
<td data-value="62.5" class="pct medium">62.5%</td>
<td data-value="232" class="abs medium">145/232</td>
<td data-value="77.14" class="pic medium"><div class="chart"><div class="cover-fill" style="width: 77%;"></div><div class="cover-empty" style="width:23%;"></div></div></td>
<td data-value="77.14" class="pct medium">77.14%</td>
<td data-value="433" class="abs medium">334/433</td>
<td data-value="62.29" class="pct medium">62.29%</td>
<td data-value="236" class="abs medium">147/236</td>
<td data-value="75.47" class="pct medium">75.47%</td>
<td data-value="53" class="abs medium">40/53</td>
<td data-value="78.3" class="pct medium">78.3%</td>
<td data-value="401" class="abs medium">314/401</td>
<td data-value="78.27" class="pct medium">78.27%</td>
<td data-value="405" class="abs medium">317/405</td>
</tr>

</tbody>
@@ -77,7 +77,7 @@ <h1>
</div><!-- /wrapper -->
<div class='footer quiet pad2 space-top1 center small'>
Code coverage
generated by <a href="http://istanbul-js.org/" target="_blank">istanbul</a> at Sun Oct 28 2018 20:15:29 GMT-0500 (CDT)
generated by <a href="http://istanbul-js.org/" target="_blank">istanbul</a> at Sun Oct 28 2018 22:26:09 GMT-0500 (CDT)
</div>
</div>
<script src="prettify.js"></script>
@@ -20,24 +20,24 @@ <h1>
</h1>
<div class='clearfix'>
<div class='fl pad1y space-right2'>
<span class="strong">77.16% </span>
<span class="strong">77.14% </span>
<span class="quiet">Statements</span>
<span class='fraction'>331/429</span>
<span class='fraction'>334/433</span>
</div>
<div class='fl pad1y space-right2'>
<span class="strong">62.5% </span>
<span class="strong">62.29% </span>
<span class="quiet">Branches</span>
<span class='fraction'>145/232</span>
<span class='fraction'>147/236</span>
</div>
<div class='fl pad1y space-right2'>
<span class="strong">75.47% </span>
<span class="quiet">Functions</span>
<span class='fraction'>40/53</span>
</div>
<div class='fl pad1y space-right2'>
<span class="strong">78.3% </span>
<span class="strong">78.27% </span>
<span class="quiet">Lines</span>
<span class='fraction'>314/401</span>
<span class='fraction'>317/405</span>
</div>
</div>
</div>
@@ -60,15 +60,15 @@ <h1>
</thead>
<tbody><tr>
<td class="file medium" data-value="templiteral.js"><a href="templiteral.js.html">templiteral.js</a></td>
<td data-value="77.16" class="pic medium"><div class="chart"><div class="cover-fill" style="width: 77%;"></div><div class="cover-empty" style="width:23%;"></div></div></td>
<td data-value="77.16" class="pct medium">77.16%</td>
<td data-value="429" class="abs medium">331/429</td>
<td data-value="62.5" class="pct medium">62.5%</td>
<td data-value="232" class="abs medium">145/232</td>
<td data-value="77.14" class="pic medium"><div class="chart"><div class="cover-fill" style="width: 77%;"></div><div class="cover-empty" style="width:23%;"></div></div></td>
<td data-value="77.14" class="pct medium">77.14%</td>
<td data-value="433" class="abs medium">334/433</td>
<td data-value="62.29" class="pct medium">62.29%</td>
<td data-value="236" class="abs medium">147/236</td>
<td data-value="75.47" class="pct medium">75.47%</td>
<td data-value="53" class="abs medium">40/53</td>
<td data-value="78.3" class="pct medium">78.3%</td>
<td data-value="401" class="abs medium">314/401</td>
<td data-value="78.27" class="pct medium">78.27%</td>
<td data-value="405" class="abs medium">317/405</td>
</tr>

</tbody>
@@ -77,7 +77,7 @@ <h1>
</div><!-- /wrapper -->
<div class='footer quiet pad2 space-top1 center small'>
Code coverage
generated by <a href="http://istanbul-js.org/" target="_blank">istanbul</a> at Sun Oct 28 2018 20:15:29 GMT-0500 (CDT)
generated by <a href="http://istanbul-js.org/" target="_blank">istanbul</a> at Sun Oct 28 2018 22:26:09 GMT-0500 (CDT)
</div>
</div>
<script src="../prettify.js"></script>
@@ -20,24 +20,24 @@ <h1>
</h1>
<div class='clearfix'>
<div class='fl pad1y space-right2'>
<span class="strong">77.16% </span>
<span class="strong">77.14% </span>
<span class="quiet">Statements</span>
<span class='fraction'>331/429</span>
<span class='fraction'>334/433</span>
</div>
<div class='fl pad1y space-right2'>
<span class="strong">62.5% </span>
<span class="strong">62.29% </span>
<span class="quiet">Branches</span>
<span class='fraction'>145/232</span>
<span class='fraction'>147/236</span>
</div>
<div class='fl pad1y space-right2'>
<span class="strong">75.47% </span>
<span class="quiet">Functions</span>
<span class='fraction'>40/53</span>
</div>
<div class='fl pad1y space-right2'>
<span class="strong">78.3% </span>
<span class="strong">78.27% </span>
<span class="quiet">Lines</span>
<span class='fraction'>314/401</span>
<span class='fraction'>317/405</span>
</div>
</div>
</div>
@@ -744,7 +744,12 @@ <h1>
699
700
701
702</td><td class="line-coverage quiet"><span class="cline-any cline-yes">1×</span>
702
703
704
705
706
707</td><td class="line-coverage quiet"><span class="cline-any cline-yes">1×</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-yes">1×</span>
@@ -803,7 +808,7 @@ <h1>
<span class="cline-any cline-yes">3×</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-yes">282×</span>
<span class="cline-any cline-yes">322×</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
@@ -1270,6 +1275,7 @@ <h1>
<span class="cline-any cline-yes">40×</span>
<span class="cline-any cline-yes">40×</span>
<span class="cline-any cline-yes">40×</span>
<span class="cline-any cline-yes">40×</span>
<span class="cline-any cline-yes">61×</span>
<span class="cline-any cline-yes">61×</span>
<span class="cline-any cline-yes">60×</span>
@@ -1329,6 +1335,9 @@ <h1>
<span class="cline-any cline-no">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-yes">80×</span>
<span class="cline-any cline-no">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-yes">80×</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
@@ -1337,6 +1346,7 @@ <h1>
<span class="cline-any cline-yes">102×</span>
<span class="cline-any cline-yes">40×</span>
<span class="cline-any cline-yes">40×</span>
<span class="cline-any cline-yes">40×</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
@@ -1970,6 +1980,7 @@ <h1>
super();
const state = {};
const attrs = new Set();
const updatedHooks = new Map();
const stateProxy = watch(state, (target, property, descriptor) =&gt; {
try {
if (this.constructor.boundAttributes.includes(property)) {
@@ -2028,14 +2039,18 @@ <h1>
}
<span class="missing-if-branch" title="if path not taken" >I</span>if (this.isConnected &amp;&amp; <span class="branch-1 cbranch-no" title="branch not covered" >attrs.size === currentArray.length)</span> {
<span class="cstat-no" title="statement not covered" > this.render();</span>
}
<span class="missing-if-branch" title="if path not taken" >I</span>if (this.updatedHooks.has(attr) &amp;&amp; <span class="branch-1 cbranch-no" title="branch not covered" >this.$$listening)</span> {
<span class="cstat-no" title="statement not covered" > this.updatedHooks.get(attr).apply(this, [value, attr]);</span>
}
attrs.add(attr);
}
});
});
&nbsp;
protectGet(this, 'templiteral', () =&gt; templiteral(this.shadowRoot ? this.shadowRoot : this, this));
protectGet(this, 'html', () =&gt; (...args) =&gt; Reflect.apply(this.templiteral, this, args));
protectProperty(this, 'updatedHooks', updatedHooks);
protectProperty(this, 'fragment', fragment);
protectProperty(this, 'if', condition);
}
@@ -2152,7 +2167,7 @@ <h1>
</div><!-- /wrapper -->
<div class='footer quiet pad2 space-top1 center small'>
Code coverage
generated by <a href="http://istanbul-js.org/" target="_blank">istanbul</a> at Sun Oct 28 2018 20:15:29 GMT-0500 (CDT)
generated by <a href="http://istanbul-js.org/" target="_blank">istanbul</a> at Sun Oct 28 2018 22:26:09 GMT-0500 (CDT)
</div>
</div>
<script src="../prettify.js"></script>
@@ -524,6 +524,7 @@ class Component extends HTMLElement {
super();
const state = {};
const attrs = new Set();
const updatedHooks = new Map();
const stateProxy = watch(state, (target, property, descriptor) => {
try {
if (this.constructor.boundAttributes.includes(property)) {
@@ -583,13 +584,17 @@ class Component extends HTMLElement {
if (this.isConnected && attrs.size === currentArray.length) {
this.render();
}
if (this.updatedHooks.has(attr) && this.$$listening) {
this.updatedHooks.get(attr).apply(this, [value, attr]);
}
attrs.add(attr);
}
});
});

protectGet(this, 'templiteral', () => templiteral(this.shadowRoot ? this.shadowRoot : this, this));
protectGet(this, 'html', () => (...args) => Reflect.apply(this.templiteral, this, args));
protectProperty(this, 'updatedHooks', updatedHooks);
protectProperty(this, 'fragment', fragment);
protectProperty(this, 'if', condition);
}
Oops, something went wrong.

0 comments on commit f5ab94f

Please sign in to comment.