Permalink
Browse files

feat(Component): Added shadow init to Component constructor argument

  • Loading branch information...
calebdwilliams committed Aug 28, 2018
1 parent caee944 commit 1d7af7a99b2f59c2f3c7ae7a81dae9d7f1884862
@@ -20,24 +20,24 @@ <h1>
</h1>
<div class='clearfix'>
<div class='fl pad1y space-right2'>
<span class="strong">83.74% </span>
<span class="strong">83.38% </span>
<span class="quiet">Statements</span>
<span class='fraction'>309/369</span>
<span class='fraction'>311/373</span>
</div>
<div class='fl pad1y space-right2'>
<span class="strong">69.86% </span>
<span class="strong">69.48% </span>
<span class="quiet">Branches</span>
<span class='fraction'>146/209</span>
<span class='fraction'>148/213</span>
</div>
<div class='fl pad1y space-right2'>
<span class="strong">88.1% </span>
<span class="quiet">Functions</span>
<span class='fraction'>37/42</span>
</div>
<div class='fl pad1y space-right2'>
<span class="strong">85.88% </span>
<span class="strong">85.47% </span>
<span class="quiet">Lines</span>
<span class='fraction'>298/347</span>
<span class='fraction'>300/351</span>
</div>
</div>
</div>
@@ -60,15 +60,15 @@ <h1>
</thead>
<tbody><tr>
<td class="file high" data-value="src/"><a href="src/index.html">src/</a></td>
<td data-value="83.74" class="pic high"><div class="chart"><div class="cover-fill" style="width: 83%;"></div><div class="cover-empty" style="width:17%;"></div></div></td>
<td data-value="83.74" class="pct high">83.74%</td>
<td data-value="369" class="abs high">309/369</td>
<td data-value="69.86" class="pct medium">69.86%</td>
<td data-value="209" class="abs medium">146/209</td>
<td data-value="83.38" class="pic high"><div class="chart"><div class="cover-fill" style="width: 83%;"></div><div class="cover-empty" style="width:17%;"></div></div></td>
<td data-value="83.38" class="pct high">83.38%</td>
<td data-value="373" class="abs high">311/373</td>
<td data-value="69.48" class="pct medium">69.48%</td>
<td data-value="213" class="abs medium">148/213</td>
<td data-value="88.1" class="pct high">88.1%</td>
<td data-value="42" class="abs high">37/42</td>
<td data-value="85.88" class="pct high">85.88%</td>
<td data-value="347" class="abs high">298/347</td>
<td data-value="85.47" class="pct high">85.47%</td>
<td data-value="351" class="abs high">300/351</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 Tue Aug 21 2018 21:32:44 GMT-0500 (CDT)
generated by <a href="http://istanbul-js.org/" target="_blank">istanbul</a> at Mon Aug 27 2018 21:44:15 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">83.74% </span>
<span class="strong">83.38% </span>
<span class="quiet">Statements</span>
<span class='fraction'>309/369</span>
<span class='fraction'>311/373</span>
</div>
<div class='fl pad1y space-right2'>
<span class="strong">69.86% </span>
<span class="strong">69.48% </span>
<span class="quiet">Branches</span>
<span class='fraction'>146/209</span>
<span class='fraction'>148/213</span>
</div>
<div class='fl pad1y space-right2'>
<span class="strong">88.1% </span>
<span class="quiet">Functions</span>
<span class='fraction'>37/42</span>
</div>
<div class='fl pad1y space-right2'>
<span class="strong">85.88% </span>
<span class="strong">85.47% </span>
<span class="quiet">Lines</span>
<span class='fraction'>298/347</span>
<span class='fraction'>300/351</span>
</div>
</div>
</div>
@@ -60,15 +60,15 @@ <h1>
</thead>
<tbody><tr>
<td class="file high" data-value="templiteral.js"><a href="templiteral.js.html">templiteral.js</a></td>
<td data-value="83.74" class="pic high"><div class="chart"><div class="cover-fill" style="width: 83%;"></div><div class="cover-empty" style="width:17%;"></div></div></td>
<td data-value="83.74" class="pct high">83.74%</td>
<td data-value="369" class="abs high">309/369</td>
<td data-value="69.86" class="pct medium">69.86%</td>
<td data-value="209" class="abs medium">146/209</td>
<td data-value="83.38" class="pic high"><div class="chart"><div class="cover-fill" style="width: 83%;"></div><div class="cover-empty" style="width:17%;"></div></div></td>
<td data-value="83.38" class="pct high">83.38%</td>
<td data-value="373" class="abs high">311/373</td>
<td data-value="69.48" class="pct medium">69.48%</td>
<td data-value="213" class="abs medium">148/213</td>
<td data-value="88.1" class="pct high">88.1%</td>
<td data-value="42" class="abs high">37/42</td>
<td data-value="85.88" class="pct high">85.88%</td>
<td data-value="347" class="abs high">298/347</td>
<td data-value="85.47" class="pct high">85.47%</td>
<td data-value="351" class="abs high">300/351</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 Tue Aug 21 2018 21:32:44 GMT-0500 (CDT)
generated by <a href="http://istanbul-js.org/" target="_blank">istanbul</a> at Mon Aug 27 2018 21:44:15 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">83.74% </span>
<span class="strong">83.38% </span>
<span class="quiet">Statements</span>
<span class='fraction'>309/369</span>
<span class='fraction'>311/373</span>
</div>
<div class='fl pad1y space-right2'>
<span class="strong">69.86% </span>
<span class="strong">69.48% </span>
<span class="quiet">Branches</span>
<span class='fraction'>146/209</span>
<span class='fraction'>148/213</span>
</div>
<div class='fl pad1y space-right2'>
<span class="strong">88.1% </span>
<span class="quiet">Functions</span>
<span class='fraction'>37/42</span>
</div>
<div class='fl pad1y space-right2'>
<span class="strong">85.88% </span>
<span class="strong">85.47% </span>
<span class="quiet">Lines</span>
<span class='fraction'>298/347</span>
<span class='fraction'>300/351</span>
</div>
</div>
</div>
@@ -679,7 +679,13 @@ <h1>
634
635
636
637</td><td class="line-coverage quiet"><span class="cline-any cline-yes">1×</span>
637
638
639
640
641
642
643</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>
@@ -758,7 +764,7 @@ <h1>
<span class="cline-any cline-yes">109×</span>
<span class="cline-any cline-yes">34×</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-yes">75×</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-yes">75×</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
@@ -1108,11 +1114,15 @@ <h1>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-no">&nbsp;</span>
<span class="cline-any cline-yes">2×</span>
<span class="cline-any cline-yes">585×</span>
<span class="cline-any cline-yes">519×</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-yes">44×</span>
<span class="cline-any cline-yes">44×</span>
<span class="cline-any cline-no">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-yes">44×</span>
<span class="cline-any cline-yes">44×</span>
<span class="cline-any cline-yes">44×</span>
<span class="cline-any cline-yes">44×</span>
<span class="cline-any cline-yes">78×</span>
@@ -1151,15 +1161,15 @@ <h1>
<span class="cline-any cline-yes">68×</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-yes">99×</span>
<span class="cline-any cline-yes">66×</span>
<span class="cline-any cline-yes">33×</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-yes">66×</span>
<span class="cline-any cline-yes">33×</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-yes">99×</span>
<span class="cline-any cline-yes">66×</span>
<span class="cline-any cline-no">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-yes">99×</span>
<span class="cline-any cline-yes">66×</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>
@@ -1250,18 +1260,20 @@ <h1>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-yes">1241×</span>
<span class="cline-any cline-yes">1241×</span>
<span class="cline-any cline-yes">1241×</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-yes">1241×</span>
<span class="cline-any cline-yes">56×</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-yes">1185×</span>
<span class="cline-any cline-yes">1185×</span>
<span class="cline-any cline-no">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-yes">1185×</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-yes">791×</span>
<span class="cline-any cline-no">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-yes">791×</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>
@@ -1394,7 +1406,7 @@ <h1>
if (attributeValue &amp;&amp; (attributeValue !== 'false' &amp;&amp; attributeValue !== 'undefined')) {
this.node.setAttribute(attributeName, attributeValue);
} else {
this.node[attributeName] = false;
// this.node[attributeName] = false;
this.node.removeAttribute(attributeName);
}
}
@@ -1746,8 +1758,12 @@ <h1>
static get observedAttributes() { return [...this.boundAttributes]; }
static get renderer() { return 'render'; }

constructor(state = {}) {
constructor(init) {
super();
<span class="missing-if-branch" title="if path not taken" >I</span>if (init) {
<span class="cstat-no" title="statement not covered" > this.attachShadow(init);</span>
}
const state = {};
const self = this;
const attrs = new Set();
const stateProxy = watch(state, (target, property, descriptor) =&gt; {
@@ -1884,19 +1900,21 @@ <h1>
const watch = (object, onChange) =&gt; {
const handler = {
get(target, property, receiver) {
const desc = Object.getOwnPropertyDescriptor(target, property);
const value = Reflect.get(target, property, receiver);
&nbsp;
if (desc &amp;&amp; !desc.writable &amp;&amp; !desc.configurable) {
return value;
}
&nbsp;
try {
const desc = Object.getOwnPropertyDescriptor(target, property);
const value = Reflect.get(target, property, receiver);

if (desc &amp;&amp; !desc.writable &amp;&amp; !desc.configurable) {
return value;
}
<span class="missing-if-branch" title="if path not taken" >I</span>if (typeof target[property] === 'function' &amp;&amp; (target instanceof Date || target instanceof Map ||target instanceof WeakMap)) {
<span class="cstat-no" title="statement not covered" > return new Proxy(target[property].bind(target), handler);</span>
}
return new Proxy(target[property], handler);
} catch (err) {
<span class="missing-if-branch" title="if path not taken" >I</span>if (target instanceof HTMLElement) {
<span class="cstat-no" title="statement not covered" > return target[property];</span>
}
return Reflect.get(target, property, receiver);
}
},
@@ -1957,7 +1975,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 Tue Aug 21 2018 21:32:44 GMT-0500 (CDT)
generated by <a href="http://istanbul-js.org/" target="_blank">istanbul</a> at Mon Aug 27 2018 21:44:15 GMT-0500 (CDT)
</div>
</div>
<script src="../prettify.js"></script>
@@ -78,7 +78,7 @@ class AttributeNode {
if (attributeValue && (attributeValue !== 'false' && attributeValue !== 'undefined')) {
this.node.setAttribute(attributeName, attributeValue);
} else {
this.node[attributeName] = false;
// this.node[attributeName] = false;
this.node.removeAttribute(attributeName);
}
}
@@ -430,8 +430,12 @@ class Component extends HTMLElement {
static get observedAttributes() { return [...this.boundAttributes]; }
static get renderer() { return 'render'; }

constructor(state = {}) {
constructor(init) {
super();
if (init) {
this.attachShadow(init);
}
const state = {};
const self = this;
const attrs = new Set();
const stateProxy = watch(state, (target, property, descriptor) => {
@@ -568,19 +572,21 @@ class Component extends HTMLElement {
const watch = (object, onChange) => {
const handler = {
get(target, property, receiver) {
const desc = Object.getOwnPropertyDescriptor(target, property);
const value = Reflect.get(target, property, receiver);

if (desc && !desc.writable && !desc.configurable) {
return value;
}

try {
const desc = Object.getOwnPropertyDescriptor(target, property);
const value = Reflect.get(target, property, receiver);

if (desc && !desc.writable && !desc.configurable) {
return value;
}
if (typeof target[property] === 'function' && (target instanceof Date || target instanceof Map ||target instanceof WeakMap)) {
return new Proxy(target[property].bind(target), handler);
}
return new Proxy(target[property], handler);
} catch (err) {
if (target instanceof HTMLElement) {
return target[property];
}
return Reflect.get(target, property, receiver);
}
},
Oops, something went wrong.

0 comments on commit 1d7af7a

Please sign in to comment.