Skip to content

Commit

Permalink
feat(updatedHooks): Added Component.prototype.updatedHooks
Browse files Browse the repository at this point in the history
  • Loading branch information
@calebdwilliams
calebdwilliams committed Oct 29, 2018
1 parent 3fc513f commit f5ab94f
Show file tree
Hide file tree
Showing 15 changed files with 122 additions and 49 deletions.
22 changes: 22 additions & 0 deletions README.md
View file
Original file line number Original file line Diff line number Diff line change
Expand Up @@ -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. 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 ### 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. 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.
Expand Down
28 changes: 14 additions & 14 deletions coverage/HeadlessChrome 0.0.0 (Mac OS X 10.12.6)/index.html
View file
Original file line number Original file line Diff line number Diff line change
Expand Up @@ -20,24 +20,24 @@ <h1>
</h1> </h1>
<div class='clearfix'> <div class='clearfix'>
<div class='fl pad1y space-right2'> <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="quiet">Statements</span>
<span class='fraction'>331/429</span> <span class='fraction'>334/433</span>
</div> </div>
<div class='fl pad1y space-right2'> <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="quiet">Branches</span>
<span class='fraction'>145/232</span> <span class='fraction'>147/236</span>
</div> </div>
<div class='fl pad1y space-right2'> <div class='fl pad1y space-right2'>
<span class="strong">75.47% </span> <span class="strong">75.47% </span>
<span class="quiet">Functions</span> <span class="quiet">Functions</span>
<span class='fraction'>40/53</span> <span class='fraction'>40/53</span>
</div> </div>
<div class='fl pad1y space-right2'> <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="quiet">Lines</span>
<span class='fraction'>314/401</span> <span class='fraction'>317/405</span>
</div> </div>
</div> </div>
</div> </div>
Expand All @@ -60,15 +60,15 @@ <h1>
</thead> </thead>
<tbody><tr> <tbody><tr>
<td class="file medium" data-value="src/"><a href="src/index.html">src/</a></td> <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.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.16" class="pct medium">77.16%</td> <td data-value="77.14" class="pct medium">77.14%</td>
<td data-value="429" class="abs medium">331/429</td> <td data-value="433" class="abs medium">334/433</td>
<td data-value="62.5" class="pct medium">62.5%</td> <td data-value="62.29" class="pct medium">62.29%</td>
<td data-value="232" class="abs medium">145/232</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="75.47" class="pct medium">75.47%</td>
<td data-value="53" class="abs medium">40/53</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="78.27" class="pct medium">78.27%</td>
<td data-value="401" class="abs medium">314/401</td> <td data-value="405" class="abs medium">317/405</td>
</tr> </tr>


</tbody> </tbody>
Expand All @@ -77,7 +77,7 @@ <h1>
</div><!-- /wrapper --> </div><!-- /wrapper -->
<div class='footer quiet pad2 space-top1 center small'> <div class='footer quiet pad2 space-top1 center small'>
Code coverage 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>
</div> </div>
<script src="prettify.js"></script> <script src="prettify.js"></script>
Expand Down
28 changes: 14 additions & 14 deletions coverage/HeadlessChrome 0.0.0 (Mac OS X 10.12.6)/src/index.html
View file
Original file line number Original file line Diff line number Diff line change
Expand Up @@ -20,24 +20,24 @@ <h1>
</h1> </h1>
<div class='clearfix'> <div class='clearfix'>
<div class='fl pad1y space-right2'> <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="quiet">Statements</span>
<span class='fraction'>331/429</span> <span class='fraction'>334/433</span>
</div> </div>
<div class='fl pad1y space-right2'> <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="quiet">Branches</span>
<span class='fraction'>145/232</span> <span class='fraction'>147/236</span>
</div> </div>
<div class='fl pad1y space-right2'> <div class='fl pad1y space-right2'>
<span class="strong">75.47% </span> <span class="strong">75.47% </span>
<span class="quiet">Functions</span> <span class="quiet">Functions</span>
<span class='fraction'>40/53</span> <span class='fraction'>40/53</span>
</div> </div>
<div class='fl pad1y space-right2'> <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="quiet">Lines</span>
<span class='fraction'>314/401</span> <span class='fraction'>317/405</span>
</div> </div>
</div> </div>
</div> </div>
Expand All @@ -60,15 +60,15 @@ <h1>
</thead> </thead>
<tbody><tr> <tbody><tr>
<td class="file medium" data-value="templiteral.js"><a href="templiteral.js.html">templiteral.js</a></td> <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.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.16" class="pct medium">77.16%</td> <td data-value="77.14" class="pct medium">77.14%</td>
<td data-value="429" class="abs medium">331/429</td> <td data-value="433" class="abs medium">334/433</td>
<td data-value="62.5" class="pct medium">62.5%</td> <td data-value="62.29" class="pct medium">62.29%</td>
<td data-value="232" class="abs medium">145/232</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="75.47" class="pct medium">75.47%</td>
<td data-value="53" class="abs medium">40/53</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="78.27" class="pct medium">78.27%</td>
<td data-value="401" class="abs medium">314/401</td> <td data-value="405" class="abs medium">317/405</td>
</tr> </tr>


</tbody> </tbody>
Expand All @@ -77,7 +77,7 @@ <h1>
</div><!-- /wrapper --> </div><!-- /wrapper -->
<div class='footer quiet pad2 space-top1 center small'> <div class='footer quiet pad2 space-top1 center small'>
Code coverage 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>
</div> </div>
<script src="../prettify.js"></script> <script src="../prettify.js"></script>
Expand Down
35 changes: 25 additions & 10 deletions coverage/HeadlessChrome 0.0.0 (Mac OS X 10.12.6)/src/templiteral.js.html
View file
Original file line number Original file line Diff line number Diff line change
Expand Up @@ -20,24 +20,24 @@ <h1>
</h1> </h1>
<div class='clearfix'> <div class='clearfix'>
<div class='fl pad1y space-right2'> <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="quiet">Statements</span>
<span class='fraction'>331/429</span> <span class='fraction'>334/433</span>
</div> </div>
<div class='fl pad1y space-right2'> <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="quiet">Branches</span>
<span class='fraction'>145/232</span> <span class='fraction'>147/236</span>
</div> </div>
<div class='fl pad1y space-right2'> <div class='fl pad1y space-right2'>
<span class="strong">75.47% </span> <span class="strong">75.47% </span>
<span class="quiet">Functions</span> <span class="quiet">Functions</span>
<span class='fraction'>40/53</span> <span class='fraction'>40/53</span>
</div> </div>
<div class='fl pad1y space-right2'> <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="quiet">Lines</span>
<span class='fraction'>314/401</span> <span class='fraction'>317/405</span>
</div> </div>
</div> </div>
</div> </div>
Expand Down Expand Up @@ -744,7 +744,12 @@ <h1>
699 699
700 700
701 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-neutral">&nbsp;</span> <span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-yes">1×</span> <span class="cline-any cline-yes">1×</span>
Expand Down Expand Up @@ -803,7 +808,7 @@ <h1>
<span class="cline-any cline-yes">3×</span> <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-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> <span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span> <span class="cline-any cline-neutral">&nbsp;</span>
Expand Down Expand Up @@ -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">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">61×</span> <span class="cline-any cline-yes">61×</span>
<span class="cline-any cline-yes">60×</span> <span class="cline-any cline-yes">60×</span>
Expand Down Expand Up @@ -1329,6 +1335,9 @@ <h1>
<span class="cline-any cline-no">&nbsp;</span> <span class="cline-any cline-no">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span> <span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-yes">80×</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> <span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span> <span class="cline-any cline-neutral">&nbsp;</span>
Expand All @@ -1337,6 +1346,7 @@ <h1>
<span class="cline-any cline-yes">102×</span> <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-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> <span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span> <span class="cline-any cline-neutral">&nbsp;</span>
Expand Down Expand Up @@ -1970,6 +1980,7 @@ <h1>
super(); super();
const state = {}; const state = {};
const attrs = new Set(); const attrs = new Set();
const updatedHooks = new Map();
const stateProxy = watch(state, (target, property, descriptor) =&gt; { const stateProxy = watch(state, (target, property, descriptor) =&gt; {
try { try {
if (this.constructor.boundAttributes.includes(property)) { if (this.constructor.boundAttributes.includes(property)) {
Expand Down Expand Up @@ -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="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="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); attrs.add(attr);
} }
}); });
}); });
&nbsp;
protectGet(this, 'templiteral', () =&gt; templiteral(this.shadowRoot ? this.shadowRoot : this, this)); protectGet(this, 'templiteral', () =&gt; templiteral(this.shadowRoot ? this.shadowRoot : this, this));
protectGet(this, 'html', () =&gt; (...args) =&gt; Reflect.apply(this.templiteral, this, args)); protectGet(this, 'html', () =&gt; (...args) =&gt; Reflect.apply(this.templiteral, this, args));
protectProperty(this, 'updatedHooks', updatedHooks);
protectProperty(this, 'fragment', fragment); protectProperty(this, 'fragment', fragment);
protectProperty(this, 'if', condition); protectProperty(this, 'if', condition);
} }
Expand Down Expand Up @@ -2152,7 +2167,7 @@ <h1>
</div><!-- /wrapper --> </div><!-- /wrapper -->
<div class='footer quiet pad2 space-top1 center small'> <div class='footer quiet pad2 space-top1 center small'>
Code coverage 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>
</div> </div>
<script src="../prettify.js"></script> <script src="../prettify.js"></script>
Expand Down
7 changes: 6 additions & 1 deletion dist/templiteral.cjs.js
View file
Original file line number Original file line Diff line number Diff line change
Expand Up @@ -524,6 +524,7 @@ class Component extends HTMLElement {
super(); super();
const state = {}; const state = {};
const attrs = new Set(); const attrs = new Set();
const updatedHooks = new Map();
const stateProxy = watch(state, (target, property, descriptor) => { const stateProxy = watch(state, (target, property, descriptor) => {
try { try {
if (this.constructor.boundAttributes.includes(property)) { if (this.constructor.boundAttributes.includes(property)) {
Expand Down Expand Up @@ -583,13 +584,17 @@ class Component extends HTMLElement {
if (this.isConnected && attrs.size === currentArray.length) { if (this.isConnected && attrs.size === currentArray.length) {
this.render(); this.render();
} }
if (this.updatedHooks.has(attr) && this.$$listening) {
this.updatedHooks.get(attr).apply(this, [value, attr]);
}
attrs.add(attr); attrs.add(attr);
} }
}); });
}); });

protectGet(this, 'templiteral', () => templiteral(this.shadowRoot ? this.shadowRoot : this, this)); protectGet(this, 'templiteral', () => templiteral(this.shadowRoot ? this.shadowRoot : this, this));
protectGet(this, 'html', () => (...args) => Reflect.apply(this.templiteral, this, args)); protectGet(this, 'html', () => (...args) => Reflect.apply(this.templiteral, this, args));
protectProperty(this, 'updatedHooks', updatedHooks);
protectProperty(this, 'fragment', fragment); protectProperty(this, 'fragment', fragment);
protectProperty(this, 'if', condition); protectProperty(this, 'if', condition);
} }
Expand Down
Loading

0 comments on commit f5ab94f

Please sign in to comment.