Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/ad-si/shaven
DOM building utility & Template engine based on JsonML + syntax sugar
https://github.com/ad-si/shaven
dom html html2shaven jsonml svg template template-engine
Last synced: 6 days ago
JSON representation
DOM building utility & Template engine based on JsonML + syntax sugar
- Host: GitHub
- URL: https://github.com/ad-si/shaven
- Owner: ad-si
- Created: 2014-03-02T16:02:00.000Z (over 10 years ago)
- Default Branch: master
- Last Pushed: 2024-04-21T19:13:38.000Z (7 months ago)
- Last Synced: 2024-10-23T17:09:14.173Z (12 days ago)
- Topics: dom, html, html2shaven, jsonml, svg, template, template-engine
- Language: JavaScript
- Homepage: https://shaven.ad-si.com
- Size: 2.35 MB
- Stars: 70
- Watchers: 7
- Forks: 6
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
Awesome Lists containing this project
README
# Shaven
[![Build Status][build-status]](https://travis-ci.org/ad-si/shaven)
A **DOM building utility** and **Template engine**
based on **JsonML** with syntax sugar.
Checkout [shaven.ad-si.com] for extensive documentation.
[build-status]: https://travis-ci.org/ad-si/shaven.svg
[shaven.ad-si.com]: https://shaven.ad-si.com
## Example
```javascript
shaven(
[document.body,
['h1#logo', 'Static Example'],
['p','Some example text'],
['ul#list.bullets',
['li', 'item1'],
['li.active', 'item2'],
['li',
['a', 'item3', {href: '#'}]
]
],
['em', 'Important', {
style: {
color: 'red',
'font-size': '2em',
},
}]
]
)
```
compiles to
```html
Static Example
Some example text
- item1
- item2
- item3
Important
```
In order to convert HTML fragments to shaven arrays, the included
[`html2shaven`](https://www.npmjs.com/package/html2shaven) CLI tool can be used.
## Features
- Syntax Sugar for ids, classes and variable caching
- Support for namespaces. (Lets you build SVGs and other XML based languages)
- Callback functions on elements
- Returns a Object containing the root element and the elements with an id
## Advantages
- Leverage the full power of JavaScript in your templates.
=> No need to learn a new language!
- Directly integrable into JavaScript files
- Works in front- and backend environment
- Templates normally tend to get more complicated with the number of variables
as they need to get escaped in some way.
With Shaven it's exactly the opposite. As variables are native to Shaven
the templates get simpler with an increasing number of variables.
- Shaven templates can be easily build with every major programming language
and their existing JSON/YAML tools.
## Installation
```shell
npm install --save shaven
```
Check out [shaven.ad-si.com] for a
detailed description of how to install shaven in other environments.
## Browser Support
- Firefox: 20+
- Opera: 21+
- Chrome: 34+
- Safari: 9+ (Does not correctly escape HTML strings in attributes)
- IE: ? (Probably 9+. Please submit a pull request if you know more.)
- Edge (EdgeHTML): 12+
Earlier Firefox, Opera and Chrome versions have the same bug as Safari.
That means even much older versions will just work fine
under normal circumstances.
## Development
Check if code changes must be made in the [server](./source/library/server.js)
and [browser](./source/library/browser.js) version of shaven.
- Build website `make`
- Bump version
1. Change version number in package file ([semver](http://semver.org))
2. Execute `npm run prepublish`
3. Commit
4. Tag commit (`v`)
- Publish to npm `npm publish`
- Release new version of website: `make deploy`