npmpackage.info

html-components

use custom tags to simplify the write of your HTML pages

0.5.4

MIT

JavaScript

14.11 kB

3,276 2.5

Installations

npm install html-components

Developer Guide

BETA

Typescript

No

Module System

CommonJS

Node Version

16.14.0

NPM Version

8.19.1 Pull Requests

Open

1

Total

2

Closed

0

Merged

1

Issues

Open

0

Total

0

Closed

0

Releases

Unable to fetch releases

Contributors

Unable to fetch Contributors

View all 1 contributors

Languages

JavaScript

HTML

Handlebars

JavaScript (89.09%)

HTML (7.13%)

Handlebars (3.78%)

Developer

arnogues

Download Statistics

Total Downloads

3,276

Last Day

Last Week

Last Month

Last Year

389

GitHub Statistics

7 Stars

63 Commits

3 Watching

7 Branches

1 Contributors

Maintainers

Package Meta Information

Latest Version

0.5.4

Package Id

html-components@0.5.4

Unpacked Size

14.11 kB

Size

5.21 kB

File Count

NPM Version

8.19.1

Node Version

16.14.0

Total Downloads

Cumulative downloads

Total Downloads

3,276

Last day

Compared to previous day

Last week

625%

Compared to previous week

Last month

-13.7%

Compared to previous month

Last year

-10.6%

389

Compared to previous year

Daily Downloads

Weekly Downloads

Monthly Downloads

Yearly Downloads

Dependencies

cheerio glob glob-all handlebars lodash mkdirp handlebars-helpers

Dev Dependencies

fs.extra grunt grunt-contrib-clean grunt-contrib-watch jshint-stylish load-grunt-tasks mocha mustache time-grunt nth-check

Versions

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

1var HtmlComponents = require("html-components");
2var htmlComponent = new HtmlComponents({
3  componentsFolder: "components",
4});

##usage

Documentation

All methods are described here : lib/html-components.js

Examples

Create a component into the components folder components/mycomp.hbs

1<div class="mycomp">
2    {{{myattr}}}
3
4    {{#if attr2}}
5        <span>I am another attribute : {{attr2}}
6    {{/if}}
7</div>

Use it in a html page

1<!DOCTYPE html>
2<html>
3<body>
4
5<mycomp myattr="custom attribute">
6    <_attr2>
7        I can also use the attribute<br> with html or another custom html <strong>components</strong>
8    </_attr2>
9</mycomp>
10
11</body>
12</html>

Result :

1<!DOCTYPE html>
2<html>
3<body>
4
5<div class="mycomp">xwxx
6    custom attribute
7
8    <span>I am another attribute : I can also use the attribute<br> with html or another custom html <strong>components</strong>
9
10</div>
11
12</body>
13</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

No vulnerabilities found.

10

Binary-Artifacts

Determines if the project has generated executable (binary) artifacts in the source repository.

10

License

Determines if the project has defined a license.

6

Vulnerabilities

Determines if the project has open, known unfixed vulnerabilities.

0

Maintained

Determines if the project is "actively maintained".

0

Code-Review

Determines if the project requires human code review before pull requests (aka merge requests) are merged.

0

CII-Best-Practices

Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.

0

Security-Policy

Determines if the project has published a security policy.

0

Fuzzing

Determines if the project uses fuzzing.

0

Branch-Protection

Determines if the default and release branches are protected with GitHub's branch protection settings.

0

SAST

Determines if the project uses static code analysis.

Score

2.5

/10

Last Scanned on 2024-12-16

The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.

Learn More

Other packages similar to html-components

is-potential-custom-element-name

1.0.1

Check whether a given string matches the `PotentialCustomElementName` production as defined in the HTML Standard.

react-html-parser

2.0.2

Parse HTML into React components

@storybook/web-components

8.4.7

Storybook web-components renderer

carbon-components

10.58.15

The Carbon Design System is IBM’s open-source design system for products and experiences.