Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/stefanhaustein/notemplate
NoTemplate is not a template library.
https://github.com/stefanhaustein/notemplate
Last synced: 2 months ago
JSON representation
NoTemplate is not a template library.
- Host: GitHub
- URL: https://github.com/stefanhaustein/notemplate
- Owner: stefanhaustein
- License: apache-2.0
- Created: 2019-12-07T15:09:41.000Z (about 5 years ago)
- Default Branch: master
- Last Pushed: 2023-05-07T16:14:33.000Z (over 1 year ago)
- Last Synced: 2023-07-31T13:09:42.184Z (over 1 year ago)
- Language: JavaScript
- Size: 85 KB
- Stars: 21
- Watchers: 3
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# NoTemplate.js
After working on html templating for ~10 years, I think the best template library is no template library.
NoTemplate.js provides only two functions, `tag()` and `raw()`. Use nested `tag()` calls to build a DOM tree in pure JS in a concise and safe manner without any special syntax, compiler or preprocessor; `raw()` can be used to mark "safe" raw HTML content that won't be escaped.
The first parameter of `tag()` is the element name. Each HTML5 element also has a helper function registered on the tag function, so instead of using `tag("p", ...)`, one can also use `tag.p(...)`.
Additional parameters build the content:
- Strings are safely added as text nodes. No need to escape anything.
- DOM Nodes (in particular elements) are added as child nodes.
- Properties of nested plain objects are treated as
- Attributes where the value is a string
- Boolean attributes where the value is a boolean (empty string for true, absence otherwise)
- Event handlers where the value is a function
- For "style", the value can be an object, which is translated to style properties
- For "class", the value can be an array
- Arrays are automatically flattened to simplify building from fragments.
- Null values are ignored to simplify handling conditional children
For components, create functions that return elements.
## Is this a Joke?
As much as [vanilla.js](http://vanilla-js.com/): I am using this myself for [quotations.ch](https://quotations.ch/quotations) to simplify "old-school" HTML
construction from JavaScript, replacing direct use of the DOM API. For larger projects, it might make more sense to use something
like vue.js to decouple rendering and state management. I hope this project might help people to "get going" with small projects without
pulling in half the world as dependencies.
## Use Cases
- [quotations.ch](https://quotations.ch/quotations)
- [Integer Exposed Rewrite](https://blog.zanstra.com/ict/2023/05/03/integer-exposed-rewrite.html)
Let me know if I should add anything here.
## Simple Example
```javascript
document.body.appendChild(
tag.p(
"Hello ",
tag.a({
href: "#",
click: event => alert("Hello")},
"World")));
```
## TodoMVC Implementation
- [Source Code](https://github.com/stefanhaustein/notemplate/blob/master/demo/todomvc/js/app.js) (< 150 LOC; the view code starts around line 56)
- [Live Demo](https://stefanhaustein.github.io/notemplate/demo/todomvc)
- Should be one of the fastest loading readable / unobfuscated implementations:
