Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Javascript HTML/XML generator
JavaScript
branch: master

This branch is 19 commits behind hij1nx:master

Fetching latest commit…

Cannot retrieve the latest commit at this time

Failed to load latest commit information.
examples
lib
test
.DS_Store
.gitignore
LICENCE
README.md
package.json
test.html

README.md

Alt text

** JUP: Javascript IN, markup OUT. ** JUP generates HTML/XML, elements are queued up to be generated by declaring nested arrays, for instance:

["div", { "class": "foo" }, "some text", ["br"]]

Args can come in any order as long as the first is a tag name. Any arbitrary string can become an element, no registering templates you can simply assign the jup-array to a variable and reuse it. If an object literal is provided in your jup-array, it's directly mapped to attributes of the element. Also, since all values in the JUP structure are strings, they can be stubbed out with mustache style {{tokens}}, they'll get filled in each time you use your jup-array, for instance:

["{{tag}}", { "class": "foo" }, "some {{value}}", ["br"]]

This allows jup-arrays be data driven. No special keys or cryptic symbols like "cls" for class. Works great for SSJS and CSJS. JUP weighs in currently with most functionality done at about less than 100 lines of code, its really simple.

There are so many of '<%=these_template_engines%>' out there!! Theres a number of micro-templating and markup generation solutions, but very few address Separation Of Concerns. Designers should never need to confront script code, and markup strings look awful in JS. JUP attempts to take the simplest approach to mapping javascript and data to markup production. Here are some examples (more on the wiki page)...

["div"] // Renders: <div></div>

["div", { "class": "foo" }] // Renders: <div class="foo"></div>

["div", { "class": "foo" }, "content"] // Renders: <div class="foo">content</div>

["div", { "class": "{{someclass}}" }, ["div"], "content"] // Renders: <div class="foo"><div></div>content</div>

["{{namespace}}:{{tag}}", { "{{somekey}}": "foo" }, "content", ["div"]] // Renders: <ns:tag bar="foo">content<div></div></div>
Something went wrong with that request. Please try again.