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

locator-handlebars

v0.3.2

Published

Handlebars template compiler for locator

Downloads

14

Readme

locator-handlebars

Handlebars template compiler for Locator.

Build Status

locator-handlebars can be plugged into the Locator component to compile Handlebars templates. These compiled templates could then be used both on the server in an express application using express-view, and on the client using your favorite module loader. locator-handlebars supports the YUI module format out of the box to be able to use the templates with YAF, but can be extended to support any module format.

The beauty of this approach is that you will not need the handlebars parser nor the handlebars template on the client. Instead, you use a module loader to provision handlebars templates in the form of compiled templates (JavaScript functions) that will produce HTML fragments upon execution.

Installation

Install using npm:

$ npm install locator-handlebars

By installing this module in your express application folder, you should be able to use it as a Locator plugin.

Usage

Integration with locator

By plugging an instance of locator-handlebars into a locator instance, locator will be able to analyze and compile every *.hb, *.hbs or *.handlebars file into memory, making them available to your application through express-view.

Optionally, it will be able to compile it into the locator build folder using one of the supported output formats. Today it supports yui, but it will support amd and es6 in the future as well.

The example below describes how to use the plugin with locator:

var Locator = require('locator'),
    LocatorHandlebars = require('locator-handlebars'),
    loc = new Locator();

// using locator-handlebars plugin
loc.plug(new LocatorHandlebars());

// walking the filesystem for an express app
loc.parseBundle(__dirname, {});

Integration with express, express-view and yui

You can try a working example here:

https://github.com/yahoo/locator-handlebars/tree/master/example

This example explores how to use locator-handlebars on the server side with express and express-view, while using yui on the client side as a medium to load the compiled templates on demand to refresh parts of the page without hitting the server to render the templates.

Configuration

A configuration object can be passed into the constructor to tweak the way the plugin works.

Properties that may be used include:

  • format - The output format in case you plan to use the templates from the client side.
  • handlebars - Instance of handlebars to use server-side. Default is require('yui/handlebars').Handlebars.

Here is an example:

// using locator-handlebars plugin
loc.plug(new LocatorHandlebars({
    format: 'yui',
    handlebars: CustomHandlebarsEngine
}));

Compiling to YUI modules for client side

Optionally, if you plan to use the templates on the client side, you can specify format: "yui", and any Handlebars template will be accessible thru YUI as a regular yui module. Here is an example of how to use them from the client side:

<script src="http://yui.yahooapis.com/3.12.0/build/yui/yui-debug.js"></script>
<script src="/static/path/to/build/<package-name>-<version>/<package-name>-template-bar.js"></script>
<script>
YUI().use('<package-name>-template-bar', function (Y) {

    var html = Y.Template.get('<package-name>/bar')({
        tagline: 'testing with some data for template bar'
    });

});
</script>

In the example above, <package-name> and <version> correspond to the name field and the version field specified in package.json for the npm package that contains the template. This is usually the express application itself. Then, bar comes from bar.handlebars where the filename without the extension is used as the name to register the template under Y.Template. After useing the YUI module, you will be able to invoke the render action to produce a html fragment.

Partials

This component supports handlebars partials:

  • A partial is just another template.

  • If a template uses another template (in the form of partial) it will be added to the dependency tree and will be loaded automatically.

  • The name used to register the template under Y.Template is based on the filename by default, but can be customized to avoid collisions.

If you want to use a different template name, you can write your own parser:

var plugin = new LocatorHandlebars();
// using locator-handlebars yui plugin
loc.plug(plugin);

// monkey patch the plugin instance
plugin.nameParser = function (source_path) {
    var libpath = require('path'),
        name = libpath.basename(source_path, libpath.extname(source_path));
    if (source_path.indexOf('partials') > 0) {
        name += '-partial';
    }
    return name;
};

In the example above, when trying to parse /path/to/foo.hbs it will return foo, but when trying to /path/to/partials/bar.hbs it will return foo-partial. In this way, you have control over the naming resolution for compiled templates and namespace collisions can be avoided.

License

This software is free to use under the Yahoo! Inc. BSD license. See the LICENSE file for license text and copyright information.

Contribute

See the CONTRIBUTE file for info.