primjs

prim

Pure Recursive Interface Markup

Natural and extensible interface markup for the web.

Prim is a new templating language that implements only the most intuitive and natural concepts of interface structure, allowing for developers to efficiently create platform-agnostic user interfaces.

It leaves out specific rules like img tags are self closing to achieve maximum performance and transparency. The simple, unopinionated design of Prim allows for a healthy balance between recyclability and output certainty.

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.

Install

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:

<script src="/js/prim.js"></script>

Now you can convert Prim to HTML:

prim.parse('div(class="article") { p { "Lorem ipsum dolor sit amet" } }');
// "<div class="article"><p>Lorem ipsum dolor sit amet</p></div>"

You can also define a Prim template in your head:

<script id='primbody' type='text/x-prim'>
	div(class='container-fluid') {
		br/
		div(class='panel panel-default') {
			div(class='panel-heading') { 'Prim' }
			div(class='panel-body') { 'Natural, fat free, and extensible interface markup for the web.' }
			div(class='panel-footer') {
				a(href='https://github.com/edge/prim') { 'Get it now' }
			}
		}
	}
</script>

And grab the text to use as a template:

body.append(prim.parse($('#primbody').text()));

Congratulations! You've made your first page in Prim.

Server

npm install --save primjs

var prim = require('primjs');

prim.parse('div(class="article") { p { "Lorem ipsum dolor sit amet" } }');
// "<div class="article"><p>Lorem ipsum dolor sit amet</p></div>"

Test

npm install -g testem
npm test

Todo

• Implement metacharacter for raw strings
• Implement end-of-markup short hand
• Plan future features