chore: Update Rollup configuration (#121)

* Update Rollup configuration - references `exports` in `package.json` - generates CJS, ESM, and browsers global packages (breaking change) * Rework examples * Improve documentation
jgarber623 · Oct 5, 2023 · fb5cd5e · fb5cd5e
1 parent 2488184
commit fb5cd5e
Show file tree

Hide file tree

Showing 4 changed files with 172 additions and 16 deletions.
diff --git a/README.md b/README.md
@@ -12,7 +12,7 @@
 
 - Uses established Web standards (e.g. `<template>`, `document.querySelector`)
 - Dependency-free
-- ESM/CommonJS/AMD module support
+- JavaScript module (ESM), CommonJS, and browser global (`window.TemplateTemplate`) support
 
 ## Getting TemplateTemplate
 
@@ -24,9 +24,36 @@ You've got a couple options for adding TemplateTemplate to your project:
 
 ## Usage
 
+If you're comfortable attaching TemplateTemplate to the browser's `window` object, you may do the following:
+
+```html
+<script src="./dist/templatetemplate.js"></script>
+<script>
+  // Verify everything loaded properly...
+  console.log(window.TemplateTemplate)
+</script>
+```
+
+Or, you may use the JavaScript module (ESM) version:
+
+```html
+<script type="module">
+  import TemplateTemplate from './dist/templatetemplate.mjs';
+
+  // Verify everything loaded properly...
+  console.log(TemplateTemplate);
+</script>
+```
+
+> [!NOTE]\
+> Full-featured examples of both of the above approaches are available in the [`example`](https://github.com/jgarber623/TemplateTemplate/blob/main/example) folder.
+
+> [!NOTE]\
+> If you're using an asset-bundling system (there are _so many_), refer to its documentation to determine which version of TemplateTemplate you should use (ESM, CommonJS, etc.).
+
 TemplateTemplate takes two arguments: a reference to a `<template>` element and an object of `insertions` defining the content to insert into the `<template>`.
 
-### Basic
+### Basic Example
 
 A basic example, inserting a row into a `<table>`:
 
@@ -53,26 +80,26 @@ A basic example, inserting a row into a `<table>`:
 </template>
 
 <script>
-  var tbody = document.querySelector('#projects tbody');
+  const tbody = document.querySelector('#projects tbody');
 
-  var emptyTemplate = document.querySelector('#row-template');
+  const emptyTemplate = document.querySelector('#row-template');
 
-  var insertions = {
+  const insertions = {
     '.name': 'TemplateTemplate',
     '.author': 'Jason Garber',
     '.url': 'https://github.com/jgarber623/TemplateTemplate',
     '.languages': 'JavaScript'
   };
 
-  var renderedTemplate = TemplateTemplate(emptyTemplate, insertions);
+  const renderedTemplate = TemplateTemplate(emptyTemplate, insertions);
 
   tbody.appendChild(renderedTemplate);
 </script>
 ```
 
 In the example above, a reference to the `<template>` element is passed to TemplateTemplate using [`document.querySelector`](https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector). The `insertions` argument an object whose keys (e.g. `'.name'`) are valid [CSS selectors](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors) and whose values (e.g. `'TemplateTemplate'`) are strings of text to insert into the selected node.
 
-### Advanced
+### Advanced Example
 
 A more complex example, inserting a row into a `<table>` with different types of insertions.
 
@@ -103,9 +130,9 @@ A more complex example, inserting a row into a `<table>` with different types of
 </template>
 
 <script>
-  var tbody = document.querySelector('#projects tbody');
+  const tbody = document.querySelector('#projects tbody');
 
-  var anchor = document.createElement('a');
+  const anchor = document.createElement('a');
 
   anchor.setAttribute('href', 'https://sixtwothree.org');
   anchor.textContent = 'Jason Garber';
@@ -169,9 +196,9 @@ TemplateTemplate('#row-template', {
 })
 ```
 
-### Example
+### Examples
 
-For a full-featured TemplateTemplate demonstration, check out [the included example file](https://github.com/jgarber623/TemplateTemplate/blob/main/example/index.html).
+For a full-featured TemplateTemplate demonstration, check out [the included example files](https://github.com/jgarber623/TemplateTemplate/blob/main/example).
 
 ## Browser Support
 

diff --git a/example/browser.html b/example/browser.html
@@ -0,0 +1,130 @@
+<!doctype html>
+<html>
+<head>
+  <meta charset="utf-8">
+
+  <title>TemplateTemplate: Examples</title>
+
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+
+  <style>
+    body {
+      color: #333;
+      font-family: sans-serif;
+      line-height: 1.5;
+      padding: 3rem;
+    }
+
+    a {
+      color: #c00;
+      text-decoration: underline;
+    }
+
+    a:focus,
+    a:hover {
+      color: #a00;
+    }
+
+    table {
+      border-collapse: collapse;
+      width: 100%;
+    }
+
+    caption {
+      font-size: 1.25rem;
+      font-weight: bold;
+      margin-bottom: 0.5rem;
+      text-align: left;
+    }
+
+    thead {
+      background-color: #eee;
+      border-bottom: 0.25rem solid #ccc;
+    }
+
+    tbody tr {
+      border-bottom: 0.0625rem solid #ccc;
+    }
+
+    tr:hover {
+      background-color: #fafafa;
+    }
+
+    th,
+    td {
+      padding: 0.75rem 0.5rem 0.5rem;
+    }
+
+    th {
+      font-weight: bold;
+      text-align: left;
+    }
+  </style>
+</head>
+<body>
+
+  <h1>TemplateTemplate: Example</h1>
+
+  <table id="projects">
+    <caption>A table of open source projects.</caption>
+    <thead>
+      <tr>
+        <th scope="col">Name</th>
+        <th scope="col">Author</th>
+        <th scope="col">URL</th>
+        <th scope="col">Languages</th>
+      </tr>
+    </thead>
+    <tbody></tbody>
+  </table>
+
+  <template id="row-template">
+    <tr>
+      <th class="name" scope="row"></th>
+      <td class="author"></td>
+      <td class="url"></td>
+      <td class="languages"></td>
+    </tr>
+  </template>
+
+  <template id="anchor-template">
+    <a></a>
+  </template>
+
+  <script src="../dist/templatetemplate.js"></script>
+  <script>
+    const tbody = document.querySelector('#projects tbody');
+
+    tbody.appendChild(
+      TemplateTemplate(document.querySelector('#row-template'), {
+        '.name': 'TemplateTemplate',
+        '.author': 'Jason Garber',
+        '.url': 'https://github.com/jgarber623/TemplateTemplate',
+        '.languages': 'JavaScript'
+      })
+    );
+
+    let anchor = document.createElement('a');
+
+    anchor.setAttribute('href', 'https://sixtwothree.org');
+    anchor.textContent = 'Jason Garber';
+
+    tbody.appendChild(
+      TemplateTemplate('#row-template', {
+        'th': 'CashCash',
+        'th + td': anchor,
+        '.url': ['https://github.com/jgarber623/CashCash', {
+          'style': 'font-style: italic;'
+        }],
+        'td:last-child': TemplateTemplate('#anchor-template', {
+          'a': ['JavaScript', {
+            'href': 'https://github.com/search?q=language%3AJavaScript',
+            'target': '_blank'
+          }]
+        })
+      })
+    );
+  </script>
+
+</body>
+</html>
diff --git a/example/index.html → example/module.html b/example/index.html → example/module.html
diff --git a/rollup.config.js b/rollup.config.js
@@ -34,7 +34,7 @@ export default [
     input,
     output: {
       banner,
-      file: pkg.module,
+      file: pkg.exports.import,
       format: 'es'
     },
     plugins: [terser(terserConfig)]
@@ -43,9 +43,8 @@ export default [
     input,
     output: {
       banner,
-      file: pkg.main,
-      format: 'umd',
-      name
+      file: pkg.exports.require,
+      format: 'cjs'
     },
     plugins: [terser(terserConfig)]
   },
@@ -54,7 +53,7 @@ export default [
     output: {
       banner,
       file: pkg.browser,
-      format: 'umd',
+      format: 'iife',
       name
     },
     plugins: [terser()]