A library to compile and parse html to and from javascript code
npm install 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: test div tag1test div tag2test div tag3
#### 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: testing titletest div tag
#### 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,
#### 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 callback = function(error, successfullyWroteToFile) {
//handle error or successfullyWroteToFile boolean
};
var htmlString = '
var callback = function(error, successfullyWroteToFile) {
//handle error or successfullyWroteToFile boolean
};
var htmlString = '
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