Permalink
Browse files

feat(Component): Removed static renderer and just called render autom…

…atically
  • Loading branch information...
calebdwilliams committed Oct 26, 2018
1 parent d63f843 commit aaf8ef0232a41ccbf4921833e313405aa4b470a8
@@ -88,7 +88,11 @@ Similar to the event bindings above, property bindings use the bracket notation

Templiteral exports a `Component` abstract class that provides a significant boilerplate for building custom elements. By utilizing the built-in static getter `boundAttributes` which returns an array of property names, you will keep your attribute and property vaules in sync.

In addition, `Component` adds a static getter for a render method (`renderer`) which will be called when any bound attribute changes. Along with the renderer, a new element method, `html` serves as an alias for `this.templiteral()`:
If a bound attribute is a boolean value, the component supports a static getter `booleanAttributes`. Note that all boolean attributes must also be bound attributes.

If an attribute is also set inside the static `boundProps` array, it will be reflected inside the component itself. The state, property and attribute will all be bound together. A change to one will be reflected in the others.

In addition, `Component`'s render method will be called when any bound attribute changes. Along with the renderer, a new element method, `html` serves as an alias for `this.templiteral()`:

[See this demo on CodePen.](https://codepen.io/calebdwilliams/pen/qyOGJO?editors=1010#0)

@@ -107,8 +111,7 @@ class HelloWorld extends Component {
this.interval = setInterval(this.updateTime.bind(this), 100);
}
disconnectedCallback() {
super.disconnectedCallback();
onDestroy() {
window.clearInterval(this.interval);
}
@@ -118,8 +121,8 @@ class HelloWorld extends Component {
render() {
this.html`
<h1>Hello ${this.who}</h1>
<p>${this.now}</p>
<h1>Hello ${this.state.who}</h1>
<p>${this.state.now}</p>
`;
}
}
@@ -20,24 +20,24 @@ <h1>
</h1>
<div class='clearfix'>
<div class='fl pad1y space-right2'>
<span class="strong">75.62% </span>
<span class="strong">75.45% </span>
<span class="quiet">Statements</span>
<span class='fraction'>338/447</span>
<span class='fraction'>335/444</span>
</div>
<div class='fl pad1y space-right2'>
<span class="strong">61.6% </span>
<span class="strong">60.83% </span>
<span class="quiet">Branches</span>
<span class='fraction'>154/250</span>
<span class='fraction'>146/240</span>
</div>
<div class='fl pad1y space-right2'>
<span class="strong">77.19% </span>
<span class="strong">75.44% </span>
<span class="quiet">Functions</span>
<span class='fraction'>44/57</span>
<span class='fraction'>43/57</span>
</div>
<div class='fl pad1y space-right2'>
<span class="strong">76.94% </span>
<span class="strong">76.78% </span>
<span class="quiet">Lines</span>
<span class='fraction'>327/425</span>
<span class='fraction'>324/422</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="75.62" class="pic medium"><div class="chart"><div class="cover-fill" style="width: 75%;"></div><div class="cover-empty" style="width:25%;"></div></div></td>
<td data-value="75.62" class="pct medium">75.62%</td>
<td data-value="447" class="abs medium">338/447</td>
<td data-value="61.6" class="pct medium">61.6%</td>
<td data-value="250" class="abs medium">154/250</td>
<td data-value="77.19" class="pct medium">77.19%</td>
<td data-value="57" class="abs medium">44/57</td>
<td data-value="76.94" class="pct medium">76.94%</td>
<td data-value="425" class="abs medium">327/425</td>
<td data-value="75.45" class="pic medium"><div class="chart"><div class="cover-fill" style="width: 75%;"></div><div class="cover-empty" style="width:25%;"></div></div></td>
<td data-value="75.45" class="pct medium">75.45%</td>
<td data-value="444" class="abs medium">335/444</td>
<td data-value="60.83" class="pct medium">60.83%</td>
<td data-value="240" class="abs medium">146/240</td>
<td data-value="75.44" class="pct medium">75.44%</td>
<td data-value="57" class="abs medium">43/57</td>
<td data-value="76.78" class="pct medium">76.78%</td>
<td data-value="422" class="abs medium">324/422</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 Thu Oct 25 2018 20:54:06 GMT-0500 (CDT)
generated by <a href="http://istanbul-js.org/" target="_blank">istanbul</a> at Thu Oct 25 2018 21:55:08 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">75.62% </span>
<span class="strong">75.45% </span>
<span class="quiet">Statements</span>
<span class='fraction'>338/447</span>
<span class='fraction'>335/444</span>
</div>
<div class='fl pad1y space-right2'>
<span class="strong">61.6% </span>
<span class="strong">60.83% </span>
<span class="quiet">Branches</span>
<span class='fraction'>154/250</span>
<span class='fraction'>146/240</span>
</div>
<div class='fl pad1y space-right2'>
<span class="strong">77.19% </span>
<span class="strong">75.44% </span>
<span class="quiet">Functions</span>
<span class='fraction'>44/57</span>
<span class='fraction'>43/57</span>
</div>
<div class='fl pad1y space-right2'>
<span class="strong">76.94% </span>
<span class="strong">76.78% </span>
<span class="quiet">Lines</span>
<span class='fraction'>327/425</span>
<span class='fraction'>324/422</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="75.62" class="pic medium"><div class="chart"><div class="cover-fill" style="width: 75%;"></div><div class="cover-empty" style="width:25%;"></div></div></td>
<td data-value="75.62" class="pct medium">75.62%</td>
<td data-value="447" class="abs medium">338/447</td>
<td data-value="61.6" class="pct medium">61.6%</td>
<td data-value="250" class="abs medium">154/250</td>
<td data-value="77.19" class="pct medium">77.19%</td>
<td data-value="57" class="abs medium">44/57</td>
<td data-value="76.94" class="pct medium">76.94%</td>
<td data-value="425" class="abs medium">327/425</td>
<td data-value="75.45" class="pic medium"><div class="chart"><div class="cover-fill" style="width: 75%;"></div><div class="cover-empty" style="width:25%;"></div></div></td>
<td data-value="75.45" class="pct medium">75.45%</td>
<td data-value="444" class="abs medium">335/444</td>
<td data-value="60.83" class="pct medium">60.83%</td>
<td data-value="240" class="abs medium">146/240</td>
<td data-value="75.44" class="pct medium">75.44%</td>
<td data-value="57" class="abs medium">43/57</td>
<td data-value="76.78" class="pct medium">76.78%</td>
<td data-value="422" class="abs medium">324/422</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 Thu Oct 25 2018 20:54:06 GMT-0500 (CDT)
generated by <a href="http://istanbul-js.org/" target="_blank">istanbul</a> at Thu Oct 25 2018 21:55:08 GMT-0500 (CDT)
</div>
</div>
<script src="../prettify.js"></script>
Oops, something went wrong.

0 comments on commit aaf8ef0

Please sign in to comment.