Metamorphosis / HTML

AbsurdJS was made really flexible. It is so flexible that you can use it as HTML preprocessor. I.e. you may write JavaScript, JSON or YAML and receive HTML at the end.

api.morph("html");
api.add({
	html: {
	    head: {
	    	title: "title"
	    },
	    body: {}
	}
}).compile(function(err, html) {
	// use the html here
});
The result of the above compilation is:
<html>
	<head>
		<title>
			title
		</title>
	</head>
	<body/>
</html>

There are three special properties that you may set:

_ (underscore) is interpreted as node value.
body: {
	_: "page text"
}
Will be compiled to:
<body>page text</body>
_attrs accepts an object, which is used to define node attributes.
body: {
	_attrs: { class: "black" }
}
The result is:
<body class="black"/>
_tpl is used when you have a template defined. During the usage of add method you may pass a template name. For example:
api.add({
	title: "AbsurdJS preprocessor"
}, "title");

api.add({
	html: {
		head: {
			_tpl: "title"
		}
	}
})
The above code is compiled to:
<html>
	<head>
		<title>
			AbsurdJS preprocessor
		</title>
	</head>
</html>
_include accepts an object or array of objects. It acts as templates. Just compiles the included objects.
var paragraph = { p: "Paragraph text." };
var footer = { footer: "Footer text." };
var body = {
	_include: [
		{ h1: "Title here" },
		paragraph, 
		footer
	]
}
api.morph("html");
api.add({
	html: {
		_include: body
	}
});
The result is:
<html>
	<h1>
		Title here
	</h1>
	<p>
		Paragraph text.
	</p>
	<footer>
		Footer text.
	</footer>
</html>

If you want to speed up your writing you will be glad to see that Absurd supports Emmet like syntax.

api.morph("html");
api.add({
	html: {
		head: {
			title: "AbsurdJS is awesome"
		},
		body: {
			'.content.left#wrapper': {
				'a[href="http://krasimir.github.io/absurd/"]': "AbsurdJS documentation",
				'p.text[title="description" data-type="selectable"]': "CSS preprocessor"
			}
		}
	}
});
The code produces:
<html>
	<head>
		<title>
			AbsurdJS is awesome
		</title>
	</head>
	<body>
		<div class="content left" id="wrapper">
			<a href="http://krasimir.github.io/absurd/">
				AbsurdJS documentation
			</a>
			<p class="text" title="description" data-type="selectable">
				CSS preprocessor
			</p>
		</div>
	</body>
</html>

AbsurdJS could act as a template engine. Use <% and %> as place holders. The data is passed along with the callback in the .compile method.

api.morph("html").add({
  body: {
    p: "Hello, my name is <% this.data.name %>!",
      small: "I'm <% this.data.profile.age %> years old",
      ul: [        
        '<% for(var skill in this.data.skills) { %>',
        { li: {
          'a[href="#"]': 'I do <% this.data.skills[skill] %>'
        }},
        '<% } %>'
      ]
    }
}).compile(function(err, html) {
	/* html:
	<body>
		<p>Hello, my name is John!</p>
		<small>I\'m 29 years old</small>
		<ul>
			<li><a href="#">I do javascript</a></li>
			<li><a href="#">I do html</a></li>
			<li><a href="#">I do css</a></li>
		</ul>
	</body>
	*/
}, {
    data: {
	    name: "John",
	    profile: { age: 29 },
        skills: ['javascript', 'html', 'css']
    }
});