hyperjs

A library to compile and parse html to and from javascript code
Installation
------------------------
npm install hyperjs --save

bower install hyperjs

Usage
----------

### Tag Object Attributes Valid Types
* tag
String: HTML tag type
Function: Returns HTML tag type string
Tag types can be any HTML tag. The HTML tags are generated with a closing tag like this:

and some tags are generated without a closing tag like this
. In the case of the the tag will be automatically appended before the tag.
* properties
Object: HTML tag attributes with HTML tag attribute as the key and string or function which returns a string as the value.
Function: Returns Object in the format as described above
* attrs
An Alias for properties. If both properties and attrs is declared properties will be the default attribute used.
Object: HTML tag attributes with HTML tag attribute as the key and string or function which returns a string as the value.
Function: Returns Object in the format as described above
* comment
String: Comment text to be applied before the HTML tag
Function: Returns comment string
* body
String: Text Content of the HTML tag.
Array: An Array of tag objects. Will generate the tags that are within the tag.
Function: Returns String text or an array of tag objects as described above.

### Examples
var htmlTemplateGenerator = require('html-template-generator'),
compile = htmlTemplateGenerator.compile,
load = htmlTemplateGenerator.load,
registerTemplate = htmlTemplateGenerator.registerTemplate,
generateHtmlFile = jhtml.generateHtmlFile,
generateHtmlTemplatesDir = jhtml.generateHtmlTemplatesDir,
parser = jhtml.parser;

var complexTag = {
tag: 'div',
properties: {
class: 'testClass'
},
body: [{
tag: 'div',
properties: {
class: 'testClass'
},
body: 'test div tag1'
}, {
tag: 'br'
}, {
tag: 'div',
properties: {
class: 'testClass'
},
body: 'test div tag2'
}]
};
var functionTag = {
tag: function() {
return 'div';
},
properties: function() {
return {
class: 'testClass'
};
},
body: function() {
var body = [];
for (var i = 1; i <= 3; i++) {
body.push({
tag: 'div',
properties: {
class: 'testClass'
},
body: 'test div tag' + i
})
}
return body;
}
};
var template = function(params) {
return {
tag: params.tag,
body: [{
tag: 'div',
body: params.subTitle
}, singleTag]
}
};
#### 1. Compile Template
Compile using tree structure

var htmlTemplate1 = compile(complexTag)
outputs:

Compile using tree structure with user defined functions

var htmlTemplate1 = compile(functionTag)
outputs:

#### 2. Register Template
Register user defined template to be used in other files.

registerTemplate('exampleTemplate', template);
compile({
template: 'exampleTemplate',
params: {
tag: 'div',
subTitle: 'testing title'
}
});
outputs:

#### 3. Load Template
Requires and compiles to html from file that returns an object like the examples above.
The File can be a .js or .json file

var htmlTemplateFromFile = load();

#### 4. Generate HTML File

var destinationPath = 'tempates/html/testTemplate1';
Do not include '.html' extention in the path since it is handled by the function already.

generateHtmlFile(destinationPath, complexTag);
Or load from file

generateHtmlFile(destinationPath, , true);

#### 5. Generate HTML Template Directory
Takes only the .js and .json files of a given directory and generates HTML files in another directory.

var sourceDirPath = 'tempates/html/templates;
var destinationDirPath = 'tempates/html/generatedHtml';
generateHtmlTemplatesDir(sourceDirPath, destinationDirPath);
Note that the names of the HTML files will ne the same as the names of the .js and .json files.

#### 6. HTML Parser
Works on pure html code. Does not work with embedded Handlebars helpers and the like.

##### a. parse
Takes in an HTML string or path to HTML file of a given directory and generates a JS object template in the format used. Do not include '.html' extention in the path since it is handled by the function already.

var callback = function(error, data) {
//handle error or data
};
var htmlString = '

';
var sourcePath = 'tempates/html/generatedHtml';
parser.parse(htmlString, callback, false);
parser.parse(sourcePath, callback, true);
##### b. parseToJS
Takes in an HTML string or path to HTML file of a given directory and generates a .js file at the chosen desinationPath. Do not include '.js' extention in the path since it is handled by the function already.

var callback = function(error, successfullyWroteToFile) {
//handle error or successfullyWroteToFile boolean
};
var htmlString = '

';
var sourcePath = 'tempates/html/generatedHtml';
var destinationPath = './test/htmlTemplatesTest/parseFiles/testParseToJS';
parser.parseToJS(destinationPath, htmlString, callback, false);
parser.parseToJS(destinationPath, sourcePath, callback, true);
##### b. parseToJson
Takes in an HTML string or path to HTML file of a given directory and generates a .json file at the chosen desinationPath. Do not include '.json' extention in the path since it is handled by the function already.

var callback = function(error, successfullyWroteToFile) {
//handle error or successfullyWroteToFile boolean
};
var htmlString = '

';
var sourcePath = 'tempates/html/generatedHtml';
var destinationPath = './test/htmlTemplatesTest/parseFiles/testParseToJson';
parser.parseToJson(destinationPath, htmlString, callback, false);
parser.parseToJson(destinationPath, sourcePath, callback, true);

Tests
----
npm test
Contributing
-----
In lieu of a formal styleguide, take care to maintain the existing coding style.
Add unit tests for any new or changed functionality. Lint and test your code.
Release History
----
* 1.0.2 Fix README format again
* 1.0.1 Fix README format
* 1.0.0 First major release
#### Released under html-template-generator
* 0.3.1 Fix README format
* 0.3.0 Expand Tag Functionality
* 0.2.0 Add HTML File Generation functionality
* 0.1.0 Initial release