Skip to content

Latest commit

 

History

History
127 lines (96 loc) · 2.48 KB

README.md

File metadata and controls

127 lines (96 loc) · 2.48 KB
Raw

Mustag

CLI tool to parse html custom components with mustache sintax to pure html views

node npm version dependencies Status devDependencies Status PRs Welcome GitHub

Example

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

Install

  • inside your project
npm install --save-dev mustag
  • globally
npm install -g mustag

Using

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",
  ...
},
...