Permalink
Browse files

feat(major refactor): Major refactor

BREAKING CHANGE: Removal of t-repeat and major performance improvements
  • Loading branch information...
calebdwilliams committed Aug 3, 2018
1 parent 0c620d5 commit 300b3fbcc31bc6656b365216bed1b032c340fc2a
Showing with 4,533 additions and 2,928 deletions.
  1. +0 −24 README.md
  2. +7 −6 coverage/{lcov-report → HeadlessChrome 0.0.0 (Mac OS X 10.12.6)}/base.css
  3. +93 −0 coverage/HeadlessChrome 0.0.0 (Mac OS X 10.12.6)/index.html
  4. 0 coverage/{lcov-report → HeadlessChrome 0.0.0 (Mac OS X 10.12.6)}/prettify.css
  5. 0 coverage/{lcov-report → HeadlessChrome 0.0.0 (Mac OS X 10.12.6)}/prettify.js
  6. BIN coverage/{lcov-report → HeadlessChrome 0.0.0 (Mac OS X 10.12.6)}/sort-arrow-sprite.png
  7. 0 coverage/{lcov-report → HeadlessChrome 0.0.0 (Mac OS X 10.12.6)}/sorter.js
  8. +93 −0 coverage/HeadlessChrome 0.0.0 (Mac OS X 10.12.6)/src/index.html
  9. +1,925 −0 coverage/HeadlessChrome 0.0.0 (Mac OS X 10.12.6)/src/templiteral.js.html
  10. +0 −236 coverage/lcov-report/AttributeNode.js.html
  11. +0 −119 coverage/lcov-report/ContentNode.js.html
  12. +0 −332 coverage/lcov-report/Template.js.html
  13. +0 −145 coverage/lcov-report/index.html
  14. +0 −83 coverage/lcov-report/patterns.js.html
  15. +0 −149 coverage/lcov-report/templit.js.html
  16. +0 −338 coverage/lcov.info
  17. +246 −209 dist/templiteral.cjs.js
  18. +1 −1 dist/templiteral.cjs.min.js
  19. +246 −210 dist/templiteral.es.js
  20. +1 −1 dist/templiteral.es.min.js
  21. +246 −209 dist/templiteral.js
  22. +1 −1 dist/templiteral.min.js
  23. +246 −209 dist/templiteral.umd.js
  24. +1 −1 dist/templiteral.umd.min.js
  25. +19 −4 karma.conf.js
  26. +151 −1 package-lock.json
  27. +4 −1 package.json
  28. +8 −43 src/AttributeNode.js
  29. +4 −3 src/ContentNode.js
  30. +34 −24 src/DirectiveNode.js
  31. +0 −108 src/Fragment.js
  32. +1 −1 src/TRepeat.js
  33. +67 −73 src/Template.js
  34. +1 −4 src/patterns.js
  35. +89 −52 src/templiteral.js
  36. +51 −0 src/utilities.js
  37. +1 −0 static/index.html
  38. +6 −9 static/scripts/module.js
  39. +93 −0 static/scripts/test.js
  40. +1 −0 static/scripts/todo-mvc-base.js
  41. +74 −0 static/scripts/todo-mvc/create-todo.js
  42. +89 −0 static/scripts/todo-mvc/todo-footer.js
  43. +124 −0 static/scripts/todo-mvc/todo-item.js
  44. +92 −0 static/scripts/todo-mvc/todo-mvc.js
  45. +251 −212 static/templiteral.js
  46. +12 −0 static/test.html
  47. +37 −0 static/todo-mvc.html
  48. +141 −0 test/Component.test.js
  49. +77 −120 test/templiteral.test.js
@@ -177,30 +177,6 @@ Loops are created using the built-in `Array` prototype methods and the use of th

The fragment's `this` methods will still be referenced to the containing component.

## Repeat directive (deprecated)

Need to use the same template on multiple items? You can use the `<t-repeat>` element to loop over data:

```html
<t-repeat [items]="${this.todos}" [templateCallback]="${this.todoTemplateCallback}"></t-repeat>
```

In your base component, add a template callback as a method:

```javascript
todoTemplateCallback() {
return (todo, index) => `
<li>
<label>
<input type="checkbox" [checked]="${todo.complete}">
<span>${todo.title}</span>
</label>
</li>`;
}
```

Any time the template's `_render` method is called, the element will update.

## If directive

To show/hide elements based on some condition, use the `<t-if>` element:
@@ -166,19 +166,20 @@ table.coverage td span.cline-any {
/* dark green */
.status-line.high, .high .cover-fill { background:rgb(77,146,33) }
.high .chart { border:1px solid rgb(77,146,33) }


.medium .chart { border:1px solid #666; }
.medium .cover-fill { background: #666; }
/* dark yellow (gold) */
.medium .chart { border:1px solid #f9cd0b; }
.status-line.medium, .medium .cover-fill { background: #f9cd0b; }
/* light yellow */
.medium { background: #fff4c2; }
/* light gray */
span.cline-neutral { background: #eaeaea; }

.cbranch-no { background: yellow !important; color: #111; }

.cstat-skip { background: #ddd; color: #111; }
.fstat-skip { background: #ddd; color: #111 !important; }
.cbranch-skip { background: #ddd !important; color: #111; }

span.cline-neutral { background: #eaeaea; }
.medium { background: #eaeaea; }

.cover-fill, .cover-empty {
display:inline-block;
@@ -0,0 +1,93 @@
<!doctype html>
<html lang="en">
<head>
<title>Code coverage report for All files</title>
<meta charset="utf-8" />
<link rel="stylesheet" href="prettify.css" />
<link rel="stylesheet" href="base.css" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<style type='text/css'>
.coverage-summary .sorter {
background-image: url(sort-arrow-sprite.png);
}
</style>
</head>
<body>
<div class='wrapper'>
<div class='pad1'>
<h1>
/
</h1>
<div class='clearfix'>
<div class='fl pad1y space-right2'>
<span class="strong">82.6% </span>
<span class="quiet">Statements</span>
<span class='fraction'>299/362</span>
</div>
<div class='fl pad1y space-right2'>
<span class="strong">69.65% </span>
<span class="quiet">Branches</span>
<span class='fraction'>140/201</span>
</div>
<div class='fl pad1y space-right2'>
<span class="strong">85.37% </span>
<span class="quiet">Functions</span>
<span class='fraction'>35/41</span>
</div>
<div class='fl pad1y space-right2'>
<span class="strong">84.96% </span>
<span class="quiet">Lines</span>
<span class='fraction'>288/339</span>
</div>
</div>
</div>
<div class='status-line high'></div>
<div class="pad1">
<table class="coverage-summary">
<thead>
<tr>
<th data-col="file" data-fmt="html" data-html="true" class="file">File</th>
<th data-col="pic" data-type="number" data-fmt="html" data-html="true" class="pic"></th>
<th data-col="statements" data-type="number" data-fmt="pct" class="pct">Statements</th>
<th data-col="statements_raw" data-type="number" data-fmt="html" class="abs"></th>
<th data-col="branches" data-type="number" data-fmt="pct" class="pct">Branches</th>
<th data-col="branches_raw" data-type="number" data-fmt="html" class="abs"></th>
<th data-col="functions" data-type="number" data-fmt="pct" class="pct">Functions</th>
<th data-col="functions_raw" data-type="number" data-fmt="html" class="abs"></th>
<th data-col="lines" data-type="number" data-fmt="pct" class="pct">Lines</th>
<th data-col="lines_raw" data-type="number" data-fmt="html" class="abs"></th>
</tr>
</thead>
<tbody><tr>
<td class="file high" data-value="src/"><a href="src/index.html">src/</a></td>
<td data-value="82.6" class="pic high"><div class="chart"><div class="cover-fill" style="width: 82%;"></div><div class="cover-empty" style="width:18%;"></div></div></td>
<td data-value="82.6" class="pct high">82.6%</td>
<td data-value="362" class="abs high">299/362</td>
<td data-value="69.65" class="pct medium">69.65%</td>
<td data-value="201" class="abs medium">140/201</td>
<td data-value="85.37" class="pct high">85.37%</td>
<td data-value="41" class="abs high">35/41</td>
<td data-value="84.96" class="pct high">84.96%</td>
<td data-value="339" class="abs high">288/339</td>
</tr>

</tbody>
</table>
</div><div class='push'></div><!-- for sticky footer -->
</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 Aug 02 2018 20:06:39 GMT-0500 (CDT)
</div>
</div>
<script src="prettify.js"></script>
<script>
window.onload = function () {
if (typeof prettyPrint === 'function') {
prettyPrint();
}
};
</script>
<script src="sorter.js"></script>
</body>
</html>
@@ -0,0 +1,93 @@
<!doctype html>
<html lang="en">
<head>
<title>Code coverage report for src/</title>
<meta charset="utf-8" />
<link rel="stylesheet" href="../prettify.css" />
<link rel="stylesheet" href="../base.css" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<style type='text/css'>
.coverage-summary .sorter {
background-image: url(../sort-arrow-sprite.png);
}
</style>
</head>
<body>
<div class='wrapper'>
<div class='pad1'>
<h1>
<a href="../index.html">all files</a> src/
</h1>
<div class='clearfix'>
<div class='fl pad1y space-right2'>
<span class="strong">82.6% </span>
<span class="quiet">Statements</span>
<span class='fraction'>299/362</span>
</div>
<div class='fl pad1y space-right2'>
<span class="strong">69.65% </span>
<span class="quiet">Branches</span>
<span class='fraction'>140/201</span>
</div>
<div class='fl pad1y space-right2'>
<span class="strong">85.37% </span>
<span class="quiet">Functions</span>
<span class='fraction'>35/41</span>
</div>
<div class='fl pad1y space-right2'>
<span class="strong">84.96% </span>
<span class="quiet">Lines</span>
<span class='fraction'>288/339</span>
</div>
</div>
</div>
<div class='status-line high'></div>
<div class="pad1">
<table class="coverage-summary">
<thead>
<tr>
<th data-col="file" data-fmt="html" data-html="true" class="file">File</th>
<th data-col="pic" data-type="number" data-fmt="html" data-html="true" class="pic"></th>
<th data-col="statements" data-type="number" data-fmt="pct" class="pct">Statements</th>
<th data-col="statements_raw" data-type="number" data-fmt="html" class="abs"></th>
<th data-col="branches" data-type="number" data-fmt="pct" class="pct">Branches</th>
<th data-col="branches_raw" data-type="number" data-fmt="html" class="abs"></th>
<th data-col="functions" data-type="number" data-fmt="pct" class="pct">Functions</th>
<th data-col="functions_raw" data-type="number" data-fmt="html" class="abs"></th>
<th data-col="lines" data-type="number" data-fmt="pct" class="pct">Lines</th>
<th data-col="lines_raw" data-type="number" data-fmt="html" class="abs"></th>
</tr>
</thead>
<tbody><tr>
<td class="file high" data-value="templiteral.js"><a href="templiteral.js.html">templiteral.js</a></td>
<td data-value="82.6" class="pic high"><div class="chart"><div class="cover-fill" style="width: 82%;"></div><div class="cover-empty" style="width:18%;"></div></div></td>
<td data-value="82.6" class="pct high">82.6%</td>
<td data-value="362" class="abs high">299/362</td>
<td data-value="69.65" class="pct medium">69.65%</td>
<td data-value="201" class="abs medium">140/201</td>
<td data-value="85.37" class="pct high">85.37%</td>
<td data-value="41" class="abs high">35/41</td>
<td data-value="84.96" class="pct high">84.96%</td>
<td data-value="339" class="abs high">288/339</td>
</tr>

</tbody>
</table>
</div><div class='push'></div><!-- for sticky footer -->
</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 Aug 02 2018 20:06:39 GMT-0500 (CDT)
</div>
</div>
<script src="../prettify.js"></script>
<script>
window.onload = function () {
if (typeof prettyPrint === 'function') {
prettyPrint();
}
};
</script>
<script src="../sorter.js"></script>
</body>
</html>
Oops, something went wrong.

0 comments on commit 300b3fb

Please sign in to comment.