Add AMD/Node module support, add specs, update docs, bump version to …

…0.2.0

.eslintignore

@@ -1,2 +1,3 @@
 dist/*
 scripts/*
+spec/*

.eslintrc.yml

@@ -2,6 +2,9 @@ env:
   browser: true
   es6: true
 extends: 'eslint:recommended'
+globals:
+  define: true
+  module: true
 rules:
   indent:
     - error

CONTRIBUTING.md

@@ -27,9 +27,10 @@ Contributing to TemplateTemplate is pretty straightforward:
 2. Install development dependencies by running `npm install` from the root of the project.
 3. Create a feature branch for the issue or new feature you're looking to tackle: `git checkout -b your-descriptive-branch-name`.
 4. _Write some code!_
-5. Commit your changes: `git commit -am 'Add some new feature or fix some issue'`.
-6. Push the branch to your fork of TemplateTemplate: `git push origin your-descriptive-branch-name`.
-7. Create a new Pull Request and I'll give it a look!
+5. If your changes would benefit from testing, add the necessary tests and verify everything passes by running `npm test`.
+6. Commit your changes: `git commit -am 'Add some new feature or fix some issue'`.
+7. Push the branch to your fork of TemplateTemplate: `git push origin your-descriptive-branch-name`.
+8. Create a new Pull Request and I'll give it a look!
 
 ## "But what files do I change?!?"
 

README.md

@@ -13,22 +13,23 @@
 
 - Uses established Web standards (e.g. `<template>`, `document.querySelector`)
 - Dependency-free
+- AMD/Node module support
 
 TemplateTemplate is also really tiny:
 
 <table>
   <tbody>
     <tr>
       <th>Uncompressed</th>
-      <td>1,452 bytes</td>
+      <td>1,839 bytes</td>
     </tr>
     <tr>
       <th>Minified</th>
-      <td>841 bytes</td>
+      <td>1,092 bytes</td>
     </tr>
     <tr>
       <th>Minified and gzipped</th>
-      <td>494 bytes</td>
+      <td>582 bytes</td>
     </tr>
   </tbody>
 </table>
@@ -37,7 +38,7 @@ TemplateTemplate is also really tiny:
 
 You've got a couple options for adding TemplateTemplate to your project:
 
-- [Download a tagged version](https://github.com/jgarber623/TemplateTemplate/tags) from GitHub and do it yourself (old school).
+- [Download a tagged version](https://github.com/jgarber623/TemplateTemplate/tags) from GitHub and do it yourself _(old school)_.
 - Install using [npm](https://www.npmjs.com/package/@jgarber/templatetemplate): `npm install @jgarber/templatetemplate --save`
 - Install using [Yarn](https://yarnpkg.com/en/package/@jgarber/templatetemplate): `yarn add @jgarber/templatetemplate`
 - Install using [Bower](https://bower.io/search/?q=templatetemplate): `bower install templatetemplate --save`
@@ -178,6 +179,10 @@ TemplateTemplate('#row-template', {
 })
 ```
 
+### Example
+
+For a full-featured TemplateTemplate demonstration, check out [the included example file](https://github.com/jgarber623/TemplateTemplate/blob/master/example/index.html).
+
 ## Browser Support
 
 TemplateTemplate works in all modern browsers. The library makes use of several new(ish) JavaScript features, including:
@@ -199,9 +204,9 @@ TemplateTemplate, in an effort to remain as lightweight and dependency-free as p
 
 ## Acknowledgments
 
-TemplateTemplate is written and maintained by [Jason Garber](https://sixtwothree.org/) and is another in a growing collection of small, curiously-named JavaScript utilities:
+TemplateTemplate is written and maintained by [Jason Garber](https://sixtwothree.org) and is another in a growing collection of small, curiously-named JavaScript utilities:
 
-- [CashCash](https://github.com/jgarber623/CashCash), a very small DOM library inspired by jQuery.
+- [CashCash](https://github.com/jgarber623/CashCash), a very small DOM library inspired by [jQuery](https://jquery.com).
 - [RadioRadio](https://github.com/jgarber623/RadioRadio), a very small [PubSub](https://en.wikipedia.org/wiki/Publish–subscribe_pattern) library.
 - [RouterRouter](https://github.com/jgarber623/RouterRouter), a very small routing library extracted from [Backbone's Router](http://backbonejs.org/docs/backbone.html#section-185).
 

bower.json

@@ -1,9 +1,10 @@
 {
   "name": "templatetemplate",
   "description": "A very small JavaScript <template> manipulation library.",
-  "version": "0.1.5",
+  "version": "0.2.0",
   "main": "dist/templatetemplate.js",
   "moduleType": [
+    "amd",
     "globals"
   ],
   "license": "MIT",
@@ -16,7 +17,10 @@
   ],
   "keywords": [
     "dom",
+    "dom-library",
+    "dom-manipulation",
     "javascript",
+    "queryselector",
     "template"
   ],
   "authors": [

dist/templatetemplate.js

@@ -1,5 +1,5 @@
 /*!
- *  TemplateTemplate 0.1.5
+ *  TemplateTemplate 0.2.0
  *
  *  A very small JavaScript <template> manipulation library.
  *
@@ -11,16 +11,26 @@
  */
 
 (function(root, factory) {
-  root.TemplateTemplate = factory(root.document);
-})(this, function(document) {
+  if (typeof define === "function" && define.amd) {
+    define([], factory);
+  } else if (typeof module === "object" && module.exports) {
+    module.exports = factory();
+  } else {
+    root.TemplateTemplate = factory();
+  }
+})(typeof self !== "undefined" ? self : this, function() {
   "use strict";
   return function(template, insertions) {
     template = template instanceof HTMLElement ? template : document.querySelector(template);
-    if (template === null) {
+    insertions = insertions || {};
+    if (template === null || !(template instanceof HTMLTemplateElement)) {
       throw new TypeError(template + " is not an HTMLTemplateElement");
     }
+    if (typeof insertions !== "object") {
+      throw new TypeError(insertions + " is not an Object");
+    }
     var importedNode = document.importNode(template.content, true);
-    Object.entries(insertions || {}).forEach(function(insertionArray) {
+    Object.entries(insertions).forEach(function(insertionArray) {
       var currentNode = importedNode.querySelector(insertionArray[0]), insertionValue = insertionArray[1];
       if (insertionValue instanceof Array) {
         Object.entries(insertionValue[1]).forEach(function(attributesArray) {

dist/templatetemplate.min.js

@@ -1,5 +1,5 @@
 /*!
- *  TemplateTemplate 0.1.5
+ *  TemplateTemplate 0.2.0
  *
  *  A very small JavaScript <template> manipulation library.
  *
@@ -10,4 +10,4 @@
  *  TemplateTemplate may be freely distributed under the MIT license.
  */
 
-!function(e,t){e.TemplateTemplate=function(e){"use strict";return function(t,n){if(null===(t=t instanceof HTMLElement?t:e.querySelector(t)))throw new TypeError(t+" is not an HTMLTemplateElement");var r=e.importNode(t.content,!0);return Object.entries(n||{}).forEach(function(e){var t=r.querySelector(e[0]),n=e[1];n instanceof Array&&(Object.entries(n[1]).forEach(function(e){t.setAttribute(e[0],e[1])}),n=n[0]),n instanceof DocumentFragment||n instanceof HTMLElement?t.appendChild(n):t.textContent=n}),r}}(e.document)}(this);
+!function(e,t){"function"==typeof define&&define.amd?define([],t):"object"==typeof module&&module.exports?module.exports=t():e.TemplateTemplate=t()}("undefined"!=typeof self?self:this,function(){"use strict";return function(e,t){if(e=e instanceof HTMLElement?e:document.querySelector(e),t=t||{},null===e||!(e instanceof HTMLTemplateElement))throw new TypeError(e+" is not an HTMLTemplateElement");if("object"!=typeof t)throw new TypeError(t+" is not an Object");var n=document.importNode(e.content,!0);return Object.entries(t).forEach(function(e){var t=n.querySelector(e[0]),o=e[1];o instanceof Array&&(Object.entries(o[1]).forEach(function(e){t.setAttribute(e[0],e[1])}),o=o[0]),o instanceof DocumentFragment||o instanceof HTMLElement?t.appendChild(o):t.textContent=o}),n}});

example/index.html

@@ -11,6 +11,7 @@
     body {
       color: #333;
       font-family: sans-serif;
+      line-height: 1.5;
       padding: 3rem;
     }
 
@@ -30,9 +31,9 @@
     }
 
     caption {
-      font-size: 2rem;
+      font-size: 1.25rem;
       font-weight: bold;
-      margin-bottom: 1rem;
+      margin-bottom: 0.5rem;
       text-align: left;
     }
 
@@ -62,6 +63,8 @@
 </head>
 <body>
 
+  <h1>TemplateTemplate: Example</h1>
+
   <table id="projects">
     <caption>A table of open source projects.</caption>
     <thead>