All Projects → ad-si → shaven

ad-si / shaven

Licence: other
DOM building utility & Template engine based on JsonML + syntax sugar

Programming Languages

javascript
184084 projects - #8 most used programming language
HTML
75241 projects
stylus
462 projects
Makefile
30231 projects

Projects that are alternatives of or similar to shaven

Dna.js
🧬 An uncomplicated user interface library for building data-driven semantic templates
Stars: ✭ 114 (+72.73%)
Mutual labels:  template-engine, dom
Tempy
Python Object Oriented Html Templating System
Stars: ✭ 126 (+90.91%)
Mutual labels:  template-engine, dom
modulor-html
Missing template engine for Web Components
Stars: ✭ 36 (-45.45%)
Mutual labels:  template-engine, dom
BabyBrowser
A Small Web Browser Built in Python
Stars: ✭ 21 (-68.18%)
Mutual labels:  dom
nunjucks-loader
Webpack loader for Nunjucks templates
Stars: ✭ 20 (-69.7%)
Mutual labels:  template-engine
debug.js
Debugger of JavaScript, by JavaScript, for JavaScript
Stars: ✭ 19 (-71.21%)
Mutual labels:  dom
micell
A collection of functions for front-end development
Stars: ✭ 16 (-75.76%)
Mutual labels:  dom
JsObjExporter
A little JavaScript plugin to generate PDF, XLS, CSV and DOC from JavaScript Object or DOM element only from the frontend!
Stars: ✭ 58 (-12.12%)
Mutual labels:  dom
texthighlighter
a no dependency typescript npm package for highlighting user selected text
Stars: ✭ 17 (-74.24%)
Mutual labels:  dom
UndoRedo.js
A powerful and simple JavaScript library provides a history for undo/redo functionality. Just like a time machine! 🕐
Stars: ✭ 19 (-71.21%)
Mutual labels:  dom
engine
A pragmatic approach to templating for PHP 7.x+
Stars: ✭ 31 (-53.03%)
Mutual labels:  template-engine
typed-html
TypeSafe HTML templates using TypeScript. No need to learn a template library.
Stars: ✭ 92 (+39.39%)
Mutual labels:  template-engine
Hierarchy
No-dependencies package that embodies WordPress template hierarchy
Stars: ✭ 78 (+18.18%)
Mutual labels:  template-engine
gktemplate
GKTemplate - 采用Go开发的DedeCMS模板解析器
Stars: ✭ 32 (-51.52%)
Mutual labels:  template-engine
XrayDOM
🔥 X-ray your DOM using just the cursor and never open the console again!
Stars: ✭ 13 (-80.3%)
Mutual labels:  dom
vue-identify-network
⚡ Identify what kinda internet your users are using!
Stars: ✭ 60 (-9.09%)
Mutual labels:  dom
korte
Kotlin cORoutines Template Engine for Multiplatform Kotlin
Stars: ✭ 69 (+4.55%)
Mutual labels:  template-engine
wutpl
高性能模板引擎 (js template)
Stars: ✭ 85 (+28.79%)
Mutual labels:  dom
karkas
A tiny template engine based on TypeScript
Stars: ✭ 14 (-78.79%)
Mutual labels:  template-engine
django-mustache
Mustache (Pystache) template engine for Django 1.8 and newer, with support for Django context processors. Designed to support offline-capable web apps via progressive enhancement.
Stars: ✭ 20 (-69.7%)
Mutual labels:  template-engine

Logo

Shaven

Build Status

A DOM building utility and Template engine based on JsonML with syntax sugar.

Checkout shaven.ad-si.com for extensive documentation.

Example

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

<body>
  <h1 id="logo">Static Example</h1>
  <p>Some example text</p>
  <ul id="list" class="bullets">
    <li>item1</li>
    <li class="active">item2</li>
    <li><a href="#">item3</a></li>
  </ul>
  <em style="color:red;font-size:2em">Important</em>
</body>

In order to convert HTML fragments to shaven arrays html2shaven 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

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 and browser version of shaven.

  • Build website make
  • Bump version
    1. Change version number in package file (semver)
    2. Execute npm run prepublish
    3. Commit
    4. Tag commit (v<version>)
  • Publish to npm npm publish
  • Release new version of website: make deploy
Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].