caseman/pagetmpl.js

## pagetmpl.js

var docTmplSrc = {
  tag: 'html',
  attr: {
    lang: {slot: 'lang',  default: 'en'}
  },
  content: [
    {tag: 'head', content: [
      {tag: 'meta', attr: {
          'http-equiv': 'Content-Type',
          content: {slot:'contentType', default: 'text/html; charset=utf-8'}
        }
      },
      '<meta http-equiv="X-UA-Compatible" content="chrome=1">',
      {tag: 'title', content: {slot: 'title'}},
      [{slot: 'css',
        template: {tag: 'link', attr: {
          rel: 'stylesheet',
          type: 'text/css',
          href: {slot: 'href'}
        }},
        unique: true
      }],
      [{slot: 'headScripts',
        template: {tag: 'script',
          attr: {src: {slot: 'src', omitEmpty: true, primary: true}},
          content: {slot: 'script', escape: false}
        },
        unique: true
      }],
      [{slot: 'head', escape: false}]
    ]},
    {tag: 'body', content: [
      [{slot: 'body', escape: false}],
      [{slot: 'bodyScripts',
        template: {tag: 'script',
          attr: {src: {slot: 'src', omitEmpty: true}},
          content: {slot: 'script', escape: false}
        },
        unique: true
      }]
    ]}
  ]
}

// Usage:

var docTmpl = dolphy.compile(docTmplSrc);
console.log(docTmpl.slots);
// => {
//      'lang': {required: false, default:'en'},
//      'contentType': {required: false, default: 'text/html; charset=utf-8'},
//      'title': {required: false},
//      'css': {required: false, array: true, template: {'href': {required: false}}},
//      'headScripts': {required: false, array: true, template: {'src': {required: false}}},
//      'head': {required: false, array: true},
//      'body': {required: false, array: true},
//      'bodyScripts': {required: false, array: true, template: {'src': {required: false}}}
//    }

docTmpl();
// => <!DOCTYPE html>
//    <html lang="en">
//    <head>
//    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
//    <meta http-equiv="X-UA-Compatible" content="chrome=1"/>
//    <title></title>
//    </head>
//    <body>
//    </body>
//    </html>

docTmpl({
  title: 'Hello World!',
  body: [
    '<h1>Hello</h1>',
    '<p>Umm yeah, hi.'
  ]
});
// => <!DOCTYPE html>
//    <html lang="en">
//    <head>
//    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
//    <meta http-equiv="X-UA-Compatible" content="chrome=1"/>
//    <title>Hello World!</title>
//    </head>
//    <body>
//    <h1>Hello</h1>
//    <p>Umm yeah, hi.
//    </body>
//    </html>

var appTmpl = docTmpl.partial({
  css: ['/css/reset.css', '/css/main.css'],
  bodyScripts: [
    {src: '//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min'},
    '/js/app.js', // Same as above since 'src' is marked `primary`
    {script: '$(document).ready(function() {startApp()})'}
  ]
});

	var docTmplSrc = {
	tag: 'html',
	attr: {
	lang: {slot: 'lang', default: 'en'}
	},
	content: [
	{tag: 'head', content: [
	{tag: 'meta', attr: {
	'http-equiv': 'Content-Type',
	content: {slot:'contentType', default: 'text/html; charset=utf-8'}
	}
	},
	'<meta http-equiv="X-UA-Compatible" content="chrome=1">',
	{tag: 'title', content: {slot: 'title'}},
	[{slot: 'css',
	template: {tag: 'link', attr: {
	rel: 'stylesheet',
	type: 'text/css',
	href: {slot: 'href'}
	}},
	unique: true
	}],
	[{slot: 'headScripts',
	template: {tag: 'script',
	attr: {src: {slot: 'src', omitEmpty: true, primary: true}},
	content: {slot: 'script', escape: false}
	},
	unique: true
	}],
	[{slot: 'head', escape: false}]
	]},
	{tag: 'body', content: [
	[{slot: 'body', escape: false}],
	[{slot: 'bodyScripts',
	template: {tag: 'script',
	attr: {src: {slot: 'src', omitEmpty: true}},
	content: {slot: 'script', escape: false}
	},
	unique: true
	}]
	]}
	]
	}

	// Usage:

	var docTmpl = dolphy.compile(docTmplSrc);
	console.log(docTmpl.slots);
	// => {
	// 'lang': {required: false, default:'en'},
	// 'contentType': {required: false, default: 'text/html; charset=utf-8'},
	// 'title': {required: false},
	// 'css': {required: false, array: true, template: {'href': {required: false}}},
	// 'headScripts': {required: false, array: true, template: {'src': {required: false}}},
	// 'head': {required: false, array: true},
	// 'body': {required: false, array: true},
	// 'bodyScripts': {required: false, array: true, template: {'src': {required: false}}}
	// }

	docTmpl();
	// => <!DOCTYPE html>
	// <html lang="en">
	// <head>
	// <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
	// <meta http-equiv="X-UA-Compatible" content="chrome=1"/>
	// <title></title>
	// </head>
	// <body>
	// </body>
	// </html>

	docTmpl({
	title: 'Hello World!',
	body: [
	'<h1>Hello</h1>',
	'<p>Umm yeah, hi.'
	]
	});
	// => <!DOCTYPE html>
	// <html lang="en">
	// <head>
	// <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
	// <meta http-equiv="X-UA-Compatible" content="chrome=1"/>
	// <title>Hello World!</title>
	// </head>
	// <body>
	// <h1>Hello</h1>
	// <p>Umm yeah, hi.
	// </body>
	// </html>

	var appTmpl = docTmpl.partial({
	css: ['/css/reset.css', '/css/main.css'],
	bodyScripts: [
	{src: '//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min'},
	'/js/app.js', // Same as above since 'src' is marked `primary`
	{script: '$(document).ready(function() {startApp()})'}
	]
	});