CLI tool to parse html custom components with mustache sintax to pure html views
Place multiple HTML components inside a folder:
- top-menu.html
<div class="top-menu">
<ul class="top-menu-items">
{{{children}}}
</ul>
</div>
- menu-item.html
<li class="menu-item>
<a href="{{link}}">
{{name}}
</a>
</li>
Create a view that uses the custom HTML components:
...
<body>
<top-menu>
<menu-item link="/home" name="Home" />
<menu-item link="/profile" name="Profile" />
</top-menu>
</body>
...
Run this tool to parse your view and generate this HTML:
...
<body>
<div class="top-menu">
<ul class="top-menu-items">
<li class="menu-item>
<a href="/home">
Home
</a>
</li>
<li class="menu-item>
<a href="/profile">
Profile
</a>
</li>
</ul>
</div>
</body>
...
- inside your project
npm install --save-dev mustag
- globally
npm install -g mustag
mustag --components <path/to/components/folder> --views <path/to/views/folder> <path/to/dist/folder>
- components folder should include sub-folders with the name of the components
- each sub-folder must include a html file with the same name
- do not choose component names equal to reserved html tags
- views folder must should include html files that use the custom html tags
- the compiled views will be saved inside dist folder
...
"scripts": {
...
"mustag": "mustag --components ./components --views ./views ./dist",
...
},
...