Dan Dean
Fork me on GitHub

fspkg - File System Packager

Dec 28, 2011

Take a look at the fspkg repository on GitHub for more detailed documentation.

Example - package a CommonJS module from a directory of mustache.js templates:

var pkgr = new require('fspkg').Builder();
var result = pkgr.build('./views');
require('fs').writeFileSync('./views.js');

This would create the file “views.js”, and would look something like this:

module.exports = {
  'auth/login.mustache': '<input type="text" name="username" value="" placeholder="Your Username">\n<input type="password" name="password" value="" placeholder="Your Password">\n<button type="submit">Login</button>\n',
  'auth/register.mustache': '<input type="email" name="email" value="" placeholder="Email Address">\n<input type="text" name="username" value="" placeholder="Choose Username">\n<input type="password" name="password" value="" placeholder="Password">\n<input type="password" name="passwordConfirmation" value="" placeholder="Password Confirmation">\n<p>By registering you agree to Awesome\'s <a href="">terms &amp; conditions</a>.</p>\n<button type="submit"><span></span><span></span>Login</button>\n',
  'header.mustache': '\n  <div>\n    <h1><span>Awesome</span> &nbsp;&rarr;&nbsp; <span></span></h1>\n    <nav>\n      <a href="/library/work">Add Work</a>\n      <a href="/library">Library</a>\n      <a href="/profile">Profile</a>\n      <a href="/logout">Logout</a>\n    </nav>\n  </div>\n\n',
  'index.mustache': '',
  'library/collections.mustache': '<header>\n  <h1>Collections</h1>\n  <button type="button">New Collection</button>\n</header>\n<form>\n  <input type="input" name="new-collection" id="new-collection" placeholder="Enter a name for your new collection...">\n</form>\n<ul></ul>\n',
  'library/work.mustache': '<section id="work-media-well"></section>\n\n<div id="work-data">\n  <section id="work-actions">\n    <button type="button" id="save-work">Save</button>\n\n    <button type="button" class="grouped-left">Basic Information</button>\n    <button type="button" class="grouped">Editions</button>\n    <button type="button" class="grouped">Media</button>\n    <button type="button" class="grouped-right" tabindex="-1"> </button>\n\n    <button type="button" id="delete-work">Delete</button>\n  </section>\n\n  <section id="work-info">\n    <input type="text" name="title" placeholder="Title" value=""><span>,</span>\n    <input type="text" name="year" placeholder="Year" value="">\n    <br>\n\n    <input type="text" name="medium" placeholder="Medium" value="">\n\n    <fieldset>\n      <input type="text" name="width" placeholder="Width" value="">\n      x\n      <input type="text" name="height" placeholder="Height" value="">\n      x\n      <input type="text" name="depth" placeholder="Depth" value="">\n    </fieldset>\n\n    <textarea name="text" placeholder="About this piece"></textarea>\n  </section>\n  \n  <section id="work-assets">\n    <h2>Media</h2>\n    <ul></ul>\n  </section>\n</div>\n'
}

Since it’s a CommonJS module, you load it up on the client-side and use it as simply as this:

var views = require('./views.js');
var html = Mustache.to_html(views['auth/login.mustache'], data);

Example command line usage:

fspkg is also a command-line application, so you can use it from any of your programs:

fspkg -s ./views.js ./views

Installation

npm install fspkg

If you want to use the command line utility, add the -g flag:

npm install -g fspkg

blog comments powered by Disqus