This package has been deprecated

Author message:

WARNING: This project has been renamed to HyperJS. Install using npm install hyperjs instead.

html-template-generator

A simple library to generate html from javascript

Installation

npm install html-template-generator --save

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;

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:

<div class="testClass"><div class="testClass">test div tag1</div><br/><div class="testClass">test div tag2</div></div>

Compile using tree structure with user defined functions

var htmlTemplate1 = compile(functionTag)  

outputs:

<div class="testClass"><div class="testClass">test div tag1</div><div class="testClass">test div tag2</div><div class="testClass">test div tag3</div></div>

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:

<div><div>testing title</div><div class="testClass">test div tag</div></div>

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(<file path>);

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, <file path>, 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.

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

• 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