hyperjs

1.0.2 • Public • Published

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:<div></div> and some tags are generated without a closing tag like this <br/>. In the case of the <html> the <!DOCTYPE html> 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:

<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.

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 = '<div class="testClass">test div tag</div>';
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 = '<div class="testClass">test div tag</div>';
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 = '<div class="testClass">test div tag</div>';
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

Package Sidebar

Install

npm i hyperjs

Weekly Downloads

3

Version

1.0.2

License

MIT

Last publish

Collaborators

  • jsystemstech