https://github.com/jgarber623/templatetemplate
A very small JavaScript <template> manipulation library.
https://github.com/jgarber623/templatetemplate
dom dom-library dom-manipulation javascript queryselector template
Last synced: 7 months ago
JSON representation
A very small JavaScript <template> manipulation library.
- Host: GitHub
- URL: https://github.com/jgarber623/templatetemplate
- Owner: jgarber623
- License: mit
- Created: 2018-03-27T13:12:58.000Z (about 8 years ago)
- Default Branch: main
- Last Pushed: 2025-02-01T03:35:55.000Z (over 1 year ago)
- Last Synced: 2025-02-23T16:03:27.246Z (over 1 year ago)
- Topics: dom, dom-library, dom-manipulation, javascript, queryselector, template
- Language: JavaScript
- Homepage: https://www.npmjs.com/package/@jgarber/templatetemplate
- Size: 919 KB
- Stars: 1
- Watchers: 3
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
> [!IMPORTANT]
> This project has moved to [codeberg.org/jgarber/TemplateTemplate](https://codeberg.org/jgarber/TemplateTemplate).
# TemplateTemplate
**A very small JavaScript `` manipulation library.**
[](https://www.npmjs.com/package/@jgarber/templatetemplate)
[](https://www.npmjs.com/package/@jgarber/templatetemplate)
[](https://github.com/jgarber623/TemplateTemplate/actions/workflows/ci.yml)
> [!NOTE]
> TemplateTemplate is feature complete and will only be updated to address bugs or security issues.
### Key Features
- Uses established Web standards (e.g. ``, `document.querySelector`)
- Dependency-free
- JavaScript module (ESM)
## Getting TemplateTemplate
You've got a couple options for adding TemplateTemplate to your project:
- [Download a release](https://github.com/jgarber623/TemplateTemplate/releases) 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`
## Usage
TemplateTemplate takes two arguments: a reference to a `` element and an object of `insertions` defining the content to insert into the ``.
### Basic Example
A basic example, inserting a row into a ``:
```html
Name
Author
URL
Languages
import TemplateTemplate from "@jgarber/templatetemplate";
const tbody = document.querySelector("#projects tbody");
const emptyTemplate = document.querySelector("#row-template");
const insertions = {
".name": "TemplateTemplate",
".author": "Jason Garber",
".url": "https://github.com/jgarber623/TemplateTemplate",
".languages": "JavaScript",
};
const renderedTemplate = TemplateTemplate(emptyTemplate, insertions);
tbody.appendChild(renderedTemplate);
```
In the example above, a reference to the `` 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 Example
A more complex example, inserting a row into a `` with different types of insertions.
```html
Name
Author
URL
Languages
import TemplateTemplate from "@jgarber/templatetemplate";
const tbody = document.querySelector("#projects tbody");
const anchor = document.createElement("a");
anchor.setAttribute("href", "https://sixtwothree.org");
anchor.textContent = "Jason Garber";
tbody.appendChild(
TemplateTemplate("#row-template", {
"tr": [null, {
"class": "project",
"id": "project-cashcash",
}],
"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",
}],
}),
}),
);
```
The example above demonstrates a handful of additional features that you may find useful. Let's break it down with a commented version of the most interesting bits:
```js
// The first argument to TemplateTemplate may also be a valid CSS selector.
TemplateTemplate("#row-template", {
// When an array is passed as a value, TemplateTemplate will use the first
// index in the array as the `textContent` for the node. If this value is
// `null`, TemplateTemplate skips setting the node's `textContent`.
//
// The second index is an object whose properties are added to the node as
// HTML attributes.
"tr": [null, {
"class": 'project',
"id": 'project-cashcash',
}],
"th": 'CashCash',
// TemplateTemplate will use `appendChild` when given an instance of a
// `DocumentFragment` or an `HTMLElement`.
"th + td": anchor,
".url": ["https://github.com/jgarber623/CashCash", {
"style": "font-weight: bold;",
}],
// TemplateTemplate may also be used to generate content from another
// `` and reuse it on the fly!
"td:last-child": TemplateTemplate("#anchor-template", {
"a": ["JavaScript", {
"href": "https://github.com/search?q=language%3AJavaScript",
"target": "_blank",
}],
}),
})
```
### Examples
For a full-featured TemplateTemplate demonstration, check out [the demo page](https://jgarber623.github.io/TemplateTemplate/example/) and [the example file](https://github.com/jgarber623/TemplateTemplate/blob/main/example/index.html).
## Browser Support
**TemplateTemplate works in modern browsers.** The library makes use of several new(ish) JavaScript features and, in an effort to remain as lightweight and dependency-free as possible, leaves it up to you to choose whether or not to polyfill features for older browsers.
## 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:
- [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).
## License
TemplateTemplate is freely available under the [MIT License](https://opensource.org/licenses/MIT). Use it, learn from it, fork it, improve it, change it, tailor it to your needs.