prim
Pure Recursive Interface Markup
Natural and extensible interface markup for the web.
Prim is a new and extremely fast templating language that implements only the most intuitive and natural concepts of interface structure, allowing for developers to efficiently create platform-agnostic user interfaces.
Bearing a simple syntax and leaving out specific rules like img tags are self-closing
, Prim achieves maximum performance and readability. The simple, unopinionated design of Prim allows for a healthy balance between recyclability and output transparency.
Prim is great for creating web applications. The parser returns a plain HTML string that can be treated as a reusable atomic DOM node. It plays well with client-side MVC frameworks such as AngularJS and Backbone, and servers like Express (Node.js).
Prim may be implemented in the future as an interface language for software beyond web applications.
Table of Contents
Installing
To use as a module on your server:
npm install --save primjs
To use the client runtime, download the latest build from git HEAD.
Browser
In your HTML, link to your Prim runtime:
Now you can convert Prim to HTML:
prim;// '<div class="article"><p>Lorem ipsum dolor sit amet</p></div>'
You can also define a Prim template in your head:
And grab the text to use as a template:
body;
Congratulations! You've made your first page in Prim.
Server
npm install --save primjs
var prim = ; prim;// '<div class="article"><p>Lorem ipsum dolor sit amet</p></div>'
Documentation
Prim is whitespace-agnostic.
Basic
identifier
creates an HTML element with identifier
as tag name
div
identifier/
creates a self closing HTML element with identifier
as tag name
img/
identifier(attributes...)
creates an HTML element with identifier
as tag name and attributes
as attributes
div(ng-app='myApp')
identifier { nodes... }
creates an HTML element with identifier
as tag name and nodes
as child elements
div { span hr/}
#{ code }
creates a virtual HTML element with the return value of code
as contents
#{ Math.log(Math.E) }
1
#{ code }
object
creates a virtual HTML element with the return value of code
as contents, using second object
as context
prim;
#{ user } ':' #{ id }
Steve:306
"string"
creates a virtual HTML element with string
as contents
"Hello"
Hello
identifier | content |
creates an HTML element with identifier
as tag name and content
as raw text
div |Hello|
Hello
End of Markup (%) short circuits template and automatically closes all levels of nesting
div { div { div { 'Hello'%
Hello
Combinations
Self-closing element with attributes
input(type='text' placeholder='Username')/
Mixed elements and strings
prim;
div { 'Welcome back, ' div(id='name' class='username') { #{ user } } button |Log Out|}
Welcome back, UsernameLog Out
Multiplexing
Nodebuilding
Children, property, and attribute segments can be concatenated, allowing for more templating flexibility.
div (attr='someattr' ref='someref') { div div } (data='somedata') |Text| { span }
Text
EOM
Because the EOM character resets the parse tree to the first node to the beginning of the current parse stream, it makes it easy to concatenate templates.
div { div { div { 'Hello'%span { span { span { 'Hello'%
HelloHello
Testing
npm install -g testemnpm test
Todo/Roadmap to v1.0
- Embed templates in code (allowing for conditionals and looping)
- Compiled templates
- Generate README docs directly from code
- Create Gulp plugin
- Create React plugin
- Add badges
- Catch Jison up to PEG
- Write Atom/Sublime syntax package
- Implement "prim strict mode"