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

…atically
calebdwilliams · Oct 26, 2018 · aaf8ef0232a41ccbf4921833e313405aa4b470a8 · aaf8ef0
1 parent d63f843
commit aaf8ef0232a41ccbf4921833e313405aa4b470a8
diff --git a/README.md b/README.md
@@ -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>
    `;
  }
 }

diff --git a/coverage/HeadlessChrome 0.0.0 (Mac OS X 10.12.6)/index.html b/coverage/HeadlessChrome 0.0.0 (Mac OS X 10.12.6)/index.html
@@ -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>

diff --git a/coverage/HeadlessChrome 0.0.0 (Mac OS X 10.12.6)/src/index.html b/coverage/HeadlessChrome 0.0.0 (Mac OS X 10.12.6)/src/index.html
@@ -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>