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 🙏

© 2026 – Pkg Stats / Ryan Hefner

@lastshotlabs/slingshot-image

v0.0.2

Published

On-the-fly image optimization and transform pipeline for Slingshot

Readme


title: Human Guide description: Human-maintained guidance for @lastshotlabs/slingshot-image

@lastshotlabs/slingshot-image handles on-the-fly image optimization behind a single Snapshot route. It fetches an approved source image, validates transform parameters, optionally transforms with sharp, and caches generated variants.

When To Use It

Use this package when your app needs:

  • responsive image resizing behind a stable app-owned endpoint
  • format conversion such as AVIF, WebP, JPEG, or PNG
  • origin allow-list enforcement for remote image fetches
  • a default cache so repeat image variants are cheap

Do not use it as a full media pipeline. It is request-time optimization, not offline asset processing.

Minimum Setup

The plugin is mostly zero-config. Defaults are:

  • routePrefix: '/_snapshot/image'
  • maxWidth: 4096
  • maxHeight: 4096
  • allowedOrigins: []
  • an in-memory LRU cache with 500 entries when no custom cache is provided

If allowedOrigins is empty, only relative URLs are effectively useful for remote safety. Add explicit hostnames before allowing absolute upstream image URLs.

What You Get

The plugin mounts:

  • GET {routePrefix}

The route supports query parameters for:

  • url
  • w
  • optional h
  • optional f
  • optional q

It also:

  • validates width and height against hard upper bounds
  • rejects disallowed source URLs before any fetch happens
  • fetches relative paths through the current app host
  • returns long-lived immutable cache headers on generated variants

When sharp is available, the plugin performs actual transforms. When sharp is absent, the package falls back to serving originals with a warning instead of crashing startup.

Common Customization

The main extension points are:

  • allowedOrigins for remote-source policy
  • maxWidth and maxHeight for transform limits
  • routePrefix if your app wants a different public image URL
  • cache if you need a custom cache adapter instead of the default in-memory LRU

If you need to change behavior, start in:

  • src/plugin.ts for defaults and cache wiring
  • src/routes.ts for request validation and response behavior
  • src/transform.ts for format conversion logic
  • src/cache.ts for the default memory cache

Gotchas

  • Width is required. Missing or invalid w returns 400.
  • Relative URLs are always allowed and are fetched from the current app host. Be deliberate about what local routes can return image bytes.
  • The route validates requested dimensions against absolute limits first, then applies your plugin config limits during transform.
  • The default cache is process-local. Multi-instance deployments need a custom shared cache if you want cross-instance reuse.

Key Files

  • src/index.ts
  • src/plugin.ts
  • src/config.schema.ts
  • src/routes.ts
  • src/transform.ts
  • src/cache.ts