Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/davidjamesstone/superviews.js
Template engine targeting incremental-dom
https://github.com/davidjamesstone/superviews.js
customelements incremental-dom template-language virtual-dom webcomponents
Last synced: about 1 month ago
JSON representation
Template engine targeting incremental-dom
- Host: GitHub
- URL: https://github.com/davidjamesstone/superviews.js
- Owner: davidjamesstone
- Created: 2015-01-22T20:43:58.000Z (over 9 years ago)
- Default Branch: master
- Last Pushed: 2019-01-11T13:00:44.000Z (over 5 years ago)
- Last Synced: 2024-08-06T20:03:17.525Z (about 2 months ago)
- Topics: customelements, incremental-dom, template-language, virtual-dom, webcomponents
- Language: JavaScript
- Homepage: http://davidjamesstone.github.io/superviews.js/playground/
- Size: 3.07 MB
- Stars: 246
- Watchers: 13
- Forks: 15
- Open Issues: 15
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
NEW! Try [hyperviews](https://github.com/davidjamesstone/hyperviews) instead. The same declarative template language as `superviews.js` but for any `h(tag, props, children)` compliant framework like `React`, `hyperapp`, `preact`....
# superviews.js
On the server `superviews.js` is used as a template engine for google's [incremental-dom](http://google.github.io/incremental-dom).
It can also now be used [in the browser](#client) to help build web applications based on [Custom Elements V1](https://www.w3.org/TR/custom-elements/)
Try it out [live in your browser](http://davidjamesstone.github.io/superviews.js/playground/index.html)
`npm install superviews.js --save`
## API
`tmplstr` (required) - The template string.
`name` - The output function name (will be overridden with a `` element).
`argstr` - The output function arguments (will be overridden with a `` element).
`mode` - The output format. Can be one of ['es6', 'cjs', 'browser', 'amd'], if any other value is passed the function is exported as a variable with that name.
`superviews(tmplstr, name, argstr, mode)`
## CLI
`cat examples/test.html | superviews --mode=es6 --name=foo --argstr=bar > examples/test.js`
## Client
NEW! superviews can now be [used in the browser](docs/client.md).
Use it as a clientside library with a set of helpful classes and methods for building web applications based on the Web Components spec, specifically [Custom Elements V1](https://www.w3.org/TR/custom-elements/).
## Example
Create a file called `tmpl.html`
```html
function add (item) {
todos.push(item)
}
function remove () {
todos.pop()
}
My name is {data.name} my age is {data.age}
I live at {data.address}
Hover for json
Say hi
Some link
I'm in an `if` block.
1
2
Default
My style changes
-
{$item}
-
{item.name}
-
{key} - {data.obj[key]}
-
{product.name}
-
{item.name}
-
No items found
```
`cat tmpl.html | superviews > tmpl.js`
Converts the template above to this [incremental-dom](http://google.github.io/incremental-dom) code:
```js
;(function () {
var hoisted1 = ["type", "text"]
var hoisted2 = ["type", "text"]
var hoisted3 = ["href", "#"]
var hoisted4 = ["title", "hello"]
var hoisted5 = ["class", "list-header"]
var __target
return function myWidget (data, todos, foo, bar) {
function add (item) {
todos.push(item)
}
function remove () {
todos.pop()
}
elementOpen("div", null, null, "class", data.cssClass)
elementOpen("input", "ba1d808c-0069-43bc-a345-89d8a60fa494", hoisted1, "disabled", data.isDisabled)
elementClose("input")
elementOpen("a", null, null, "href", "http://www.google.co.uk?q=" + (data.query) + "")
elementClose("a")
text(" \
My name is " + (data.name) + " my age is " + (data.age) + " \
I live at " + (data.address) + " \
\
")
elementOpen("div", null, null, "title", JSON.stringify(data))
text("Hover for json")
elementClose("div")
elementOpen("button", null, null, "onclick", function ($event) {
var $element = this;
alert(hi)})
text("Say hi")
elementClose("button")
elementOpen("input", "0887e662-2503-4669-b314-2d155cc72cad", hoisted2, "value", data.val, "onchange", function ($event) {
var $element = this;
data.val = this.value})
elementClose("input")
elementOpen("a", "4308eec1-f2dc-4247-a8d6-c07e81db0c3e", hoisted3, "onclick", function ($event) {
var $element = this;
$event.preventDefault(); model.doSomething();})
text("Some link")
elementClose("a")
if (data.showMe) {
elementOpen("p")
elementOpen("span", null, null, "class", data.bar + ' other-css')
text("description")
elementClose("span")
elementClose("p")
}
if (data.showMe) {
text(" \
I'm in an `if` block. \
")
}
if (data.foo === 1) {
elementOpen("span")
text("1")
elementClose("span")
} else if (data.foo === 2) {
elementOpen("span")
text("2")
elementClose("span")
} else {
text(" \
Default \
")
}
elementOpen("aside")
elementOpen("div")
if (data.skipMe) {
skip()
} else {
elementOpen("span", null, null, "id", data.id)
elementClose("span")
}
elementClose("div")
elementClose("aside")
elementOpen("span", null, null, "style", { color: data.foo, backgroundColor: data.bar })
text("My style changes")
elementClose("span")
elementOpen("ul")
__target = data.items
if (__target) {
;(__target.forEach ? __target : Object.keys(__target)).forEach(function($value, $item, $target) {
var item = $value
var $key = "163c079d-6890-40f1-8983-b4119652d7ca_" + $item
elementOpen("li", $key)
elementOpen("span", null, null, "class", $item % 2 ? 'odd' : 'even' )
text("" + ($item) + "")
elementClose("span")
elementOpen("input", null, null, "value", item.name)
elementClose("input")
elementClose("li")
}, this)
}
elementClose("ul")
elementOpen("ul")
__target = data.arr
if (__target) {
;(__target.forEach ? __target : Object.keys(__target)).forEach(function($value, $item, $target) {
var item = $value
var $key = "9ee2a95c-ce40-4c43-9e1b-bb1e3771c72f_" + $item
elementOpen("li", $key)
elementOpen("span")
text("" + (item.name) + "")
elementClose("span")
elementClose("li")
}, this)
}
elementClose("ul")
elementOpen("ul")
__target = data.obj
if (__target) {
;(__target.forEach ? __target : Object.keys(__target)).forEach(function($value, $item, $target) {
var key = $value
var $key = "07608362-dc5c-4fca-9f46-381ffc62a929_" + $item
elementOpen("li", $key)
elementOpen("span", "4bf05389-7b34-4184-9ae5-2f1371d46d05_" + $key, hoisted4)
text("" + (key) + " - " + (data.obj[key]) + "")
elementClose("span")
elementClose("li")
}, this)
}
elementClose("ul")
elementOpen("ul")
__target = data.products
if (__target) {
;(__target.forEach ? __target : Object.keys(__target)).forEach(function($value, $item, $target) {
var product = $value
var $key = "494094aa-b914-405e-b489-31348c78a2f7_" + product.id
elementOpen("li", $key)
text(" \
" + (product.name) + " \
")
elementClose("li")
}, this)
}
elementClose("ul")
elementOpen("ul")
if (data.items.length) {
__target = data.arr
if (__target) {
;(__target.forEach ? __target : Object.keys(__target)).forEach(function($value, $item, $target) {
var item = $value
var $key = "f53fcb3e-8035-4108-91bc-1d7661d41681_" + item.id
elementOpen("li", $key)
text(" \
" + (item.name) + " \
")
elementClose("li")
}, this)
}
}
if (!data.items.length) {
elementOpen("li", "39dad44a-39c4-4d2d-bb31-7daf5bef8b73", hoisted5)
text(" \
No items found \
")
elementClose("li")
}
elementClose("ul")
elementClose("div")
}
})()
```
## browserify
Using [browserify](http://browserify.org/)? There's the [superviewify](https://github.com/davidjamesstone/superviewify) transform allowing you to simply require your templates and have them automatically compiled to incremental-dom javascript.
`npm install superviewify --save`
# License
MIT