1.1.5 • Published 8 years ago
arca9 v1.1.5
Arca9 
Install
npm install arca9
A simple and easy to use HTML template engine based on JSON components
Arca9 is a simple nodejs template engine that uses xml custom tags (with arca9 prefix) and JSON components to provide a well-structured dependency-based template build. Arca9 works with a dependency system that makes way easier to build your files without the need of checking for additional components that others require, connecting all dependencies recursively and including all that is necessary.
Using versions below 1.0.5 is discouraged since you can have a lot of issues with lower versions
Please note that arca9 doesn't output formatted XML, please use a tool to format your XML file
To get a full understanding about arca9, please read the tutorial
Examples
A simple example without using files (components, scripts, etc.):
const arca9 = require('arca9');
//enable logs about project build (false is default)
arca9.options.echo = true;
//A html string
var str =
`<!DOCTYPE html>
<html>
<head>
</head>
<body>
<arca9-foreach name="clients">
Name: %{k} - Age: %{v:age} - Money: %{v:money} <br />
</arc9-foreach>
</body>
</html>`;
//Builds the xml/html string
var result = arca9.buildStr(str, {
clients: {
john: {
age: 32,
money: 3000
},
mary: {
age: 19,
money: 563
},
dean: {
age: 32,
money: 45
}
}
});
console.log(result);
/*
<!DOCTYPE html>
<html>
<head>
</head>
<body>
Name: john - Age: 32 - Money: 3000 <br />
Name: mary - Age: 19 - Money: 563 <br />
Name: dean - Age: 32 - Money: 45 <br />
</body>
</html>
*/A simple example with components and external file
main.js
const arca9 = require('arca9');
arca9.options.echo = true;
arca9.build("input.html", "output.html", { author: "woodenbell" });input.html
<!DOCTYPE html>
<html>
<head>
<title>
My page - by <arca9-var name="author" />
</title>
</head>
<body>
<arca9-component src="simple_button.json"
values-content="My button" values-color="#000000" />
</body>
</html>simple_button.json
{
"import": [],
"content": [{
"tag-name": "span",
"self-closing": false,
"content": [
"%{content}"
]
}],
"attr": {
"name": "mybtn"
},
"style": {
"background-color": "%{color}"
}
}Result (output.html)
<!DOCTYPE html>
<html>
<head>
<title>
My page - by woodenbell
</title>
</head>
<body>
<button name="mybtn" style="background-color: #000000; "><span>My button
</span></button>
</body>
</html>