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

@pingy/middleware

v4.3.0

Published

Express/Connect middleware for transpiling to html/css/js on-the-fly

Downloads

10

Readme

Piggy In The Middle

npm version Build Status

Express/Connect middleware for transpiling to html/css/js on-the-fly. Also gives you sourcemaps, caching for unchanged files and integrates well with live reload tools like browser-sync and live-reload.

Currently supports: LiveScript, babel, coco, coffee-script, dogescript, less, marked, myth, jade, node-sass, stylus, swig.

It works a bit like this:

  1. A request comes in for app.js
  2. app.js can not be found (404)
  3. PITM will look for files that compile to app.js
  4. It finds app.coffee
  5. app.coffee is compiled on-the-fly
  6. The compiled output is served to the browser as app.js

Subsequent requests will not force a recompile file because PITM will cache the output. PITM is smart and will watch the source file(s) for changes, if you change a source file then it will do a recompile on next request.

Try it out

The easiest way to try this out is to clone the repo, cd into it and do:

npm install
npm run example

This will start a basic demo site using PITM.

Use as middleware

Here's a really simple example:

var connect = require('connect');
var serveStatic = require('serve-static');
var pitm = require('piggy-in-the-middle');

var app = connect();

app.use(serveStatic('/path/to/your/site'));
app.use(pitm('/path/to/your/site'));

app.listen(3000);

Once initialized PITM will also emit 'fileChanged' events whenever a watched file is changed, this is useful for doing live reloading of the browser. For example, to integrate PITM with browser-sync you can do something like this:

var pitm = require('piggy-in-the-middle');
var browserSync = require('browser-sync').create();

var piggy = pitm('/path/to/your/site');
piggy.events.on('fileChanged', browserSync.reload);

Custom Path To node_modules

global.babyTolkCompilerModulePath = '/some/folder/node_modules';
pitm('/path/to/your/site');

By default PITM will look for compatible modules in the node_modules dir inside of /path/to/your/site. You can set global.babyTolkCompilerModulePath to look for compatible node modules in a different dir, like in the example above: /some/other/dir/node_modules.