html-components
v0.5.4
Published
Create html components from templates with a simple way
Downloads
41
Readme
Create html components from templates in a simple way
NPM 8 mandatory
This package use the overrides propertie available in NPM 8. Please update your NPM version to 8.x or higher if you want to use this package.
Getting Started
Install the module with: npm install html-components --save-dev
var HtmlComponents = require("html-components");
var htmlComponent = new HtmlComponents({
componentsFolder: "components",
});##usage
Documentation
All methods are described here : lib/html-components.js
Examples
- Create a component into the components folder components/mycomp.hbs
<div class="mycomp">
{{{myattr}}}
{{#if attr2}}
<span>I am another attribute : {{attr2}}
{{/if}}
</div>Use it in a html page
<!DOCTYPE html>
<html>
<body>
<mycomp myattr="custom attribute">
<_attr2>
I can also use the attribute<br> with html or another custom html <strong>components</strong>
</_attr2>
</mycomp>
</body>
</html>Result :
<!DOCTYPE html>
<html>
<body>
<div class="mycomp">xwxx
custom attribute
<span>I am another attribute : I can also use the attribute<br> with html or another custom html <strong>components</strong>
</div>
</body>
</html>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 using Grunt.
Todo list
- BUG : if component file is call "line.hbs", it doesn't work
- TODO : add possibility to create data-dummy and data-foo object in addition to the data object. example : become an object data-dummy and a string if necessary
- TODO : add cache for templates
- TODO : extract handlebars as a plugin
- TODO : manage boolean attributes (if attribute="false" or attribute="true" become boolean)
- TODO : manage single attributes like
- TODO : add option to remove empty lines when there are more than 2 lines
- TODO : add option for template language (possibility to replace handlebars by another template engine)
- TODO : check if code formatting can be added easily
- TODO : documentation
License
Copyright (c) 2014 Arnaud Gueras
Licensed under the MIT license.