npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

parcel-plugin-mustache-html

v1.0.2

Published

Integrates mustache (https://mustache.github.io/) into parcel.

Downloads

20

Vulnerabilities

Powered byPowered by Snyk
  • 0High
  • 0Medium
  • 0Low

Links

Git

Maintainers

r.const.devr.const.dev

Keywords

mustachemustachejshtmlparcelparceljs

Readme

parcel-plugin-mustache-html

Resolve dependencies inside mustache templates

This parcel plugin bundles mustache templates that intended primarily for server side html rendering.

parcel-plugin-mustache-html processes files with .mst extension and outputs the .mst file with {{dep:*}} links resolved. Extracts any mustache token with the format {{dep:*}}, resolve corresponding dependency and replaces it with the packaged bundle by parcel.

The main use case is to build a client side html web application that is mostly independent from server, but still allows some server side rendering. For example the client side application requires a logged-in user, which is only known by the server. To assist with this use case, parcel-plugin-mustache-html has a secondary functionality to expand .mst template into a .html page in development mode.

Installation

parcel-plugin-mustache-html is a parcel plugin which requires only to be installed in order for parcel to recognize it:

npm install --save-dev parcel-plugin-mustache-html

Usage

Consider the following random-sample.mst source mustache template with a javascript reference specified as {{dep:*}}:

<html>
  <head><title>Hello, parcel-plugin-mustache-html</title></head>
  <body>
    <p>{{message}}</p>
    <script type="text/javascript" src="{{dep:impl.js}}"></script>
  </body>
</html>

Ask parcel to bundle random-sample.mst, parcel-plugin-mustache-html is triggered by .mst file extension.

npx parcel random-sample.mst

This dist/random-sample.mst with javascript reference expanded and any other mustache token preserved:

<html>
  <head><title>Hello, parcel-plugin-mustache-html</title></head>
  <body>
    <p>{{message}}</p>
    <script type="text/javascript" src="impl.234fae32.js"></script>
  </body>
</html>

In development mode the .mst mustache template could be expanded into a .html output by providing data for the rest of mustache tokens.

In order to expand a mustache template to its html representation for development purposes, add json mustache .view containing data to use in development. The .view json file needs to be located near the corresponding .mst file and have the name composed from the original filename + .view extension.

For the example mustache template above, the json view should be named random-sample.mst.view:

{
  "message": "Html expansion demo"
}

parcel-plugin-mustache-html discovers random-sample.mst.view file and expands it to .html file, i.e. dist/random-sample.html:

<html>
  <head><title>Hello, parcel-plugin-mustache-html</title></head>
  <body>
    <p>Html expansion demo</p>
    <script type="text/javascript" src="impl.234fae32.js"></script>
  </body>
</html>

Limitations

parcel-plugin-mustache-html comes with the following known limitations:

  • Handles only .mst extension and doesn't provide a mechanism to ignore matching files, i.e. allow other plugins to handle .mst files.
  • It doesn't allow customization of tags to identify mustache tokens, uses only the defaults (["{{", "}}"]).
  • Expands mustache template only to .html and only in development.

Please file a feature request or contribute code on github if these limitations are blocking you. parcel-plugin-mustache-html@github