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

@bit-js/blitz

v1.4.0

Published

The fastest JavaScript URL router

Downloads

78

Readme

Blitz

The fastest JavaScript router.

import Blitz from "@bit-js/blitz";

// Create the router
const router = new Blitz();

// Register paths
router.on("GET", "/", () => new Response("Hi"));

// Wildcard parameter
router.on("GET", "/search/*", (ctx) => new Response(ctx.params.$));

// Path parameters
router.on("PUT", "/update/:id", (ctx) => new Response(ctx.params.id));

// Register another router with the same type as a subrouter
router.route("/api", anotherRouter);

// Get the fetch function (use with Bun and Deno)
const fetch = router.build();

Patterns

Blitz supports URL params and wildcards. Wildcard like /* does not match /.

Context

The request context contains:

  • path: The request pathname (Always start with a slash).
  • pathStart: The request pathname start index in the request URL.
  • pathEnd: The request pathname end index in the request URL.
  • params: Request URL parameters.
  • req: The raw request object.

Other routers

Other utility routers.

Edge router

The basic Blitz router only works on non-edge runtimes as those block the use of the Function constructor for code generation.

EdgeRouter works everywhere as it matches routes using a recursive approach.

import { EdgeRouter } from "@bit-js/blitz";

// Create the router
const router = new EdgeRouter();

API usage is the same as Blitz. EdgeRouter should be used in edge runtimes as Blitz is around 1.5x faster and use less memory in other scenarios.

It is possible to re-use the matcher of EdgeRouter after adding more routes, unlike Blitz.

// Add some routes (need to be both static and dynamic routes)
router.on("GET", "/", () => new Response("Hi"));
router.on("GET", "/user/:id", (ctx) => new Response(ctx.params.id));

// Match '/' and '/user/:id'
const fetch = router.build();

// Add another route
router.on("GET", "/user/*", (ctx) => new Response(ctx.params.$));

// Fetch now handles '/', '/user/:id'
fetch(req);

URL routers

These are internals router built for path matching only.

import { internal } from "@bit-js/blitz";

// Blitz router with only path matching
const router = new internal.Radix<number>();

// EdgeRouter with only path matching;
const router = new internal.Edge<number>();

// Register routes
router.on("/", 0);
router.on("/:id", 1);
router.on("/*", 2);

// Merging routes
router.route("/api", otherInternalRouter);

// Get the matching function
const f = router.buildMatcher({}, 3);

f(ctx);

The match context only has:

  • ctx.path: The parsed pathname.
  • ctx.params: The output parameters.

FS router

A cross-runtime file system router API.

Example usage with Bun:

import { FileSystemRouter } from "@bit-js/blitz";

// A directory scanner
const glob = new Bun.Glob("**/*");

// Router prototype
const router = new FileSystemRouter({
  // on(path): Return the metadata associated to the path to match later
  // This only run once while scanning to retrieve the metadata
  on: Bun.file,

  // Scan synchronously and return the paths as an iterator
  scan: (dir) => glob.scanSync(dir),

  // style(path): Convert relative file path to route pathname (optional)
  // Default to NextJS route path style
  style: "basic",
});

// Get the matcher
const match = router.scan(`${import.meta.dir}/internals`);

// Serve with Bun
export default {
  fetch(req: Request) {
    // Result is the metadata returned by on(path)
    // In this case it is the file blob
    return new Response(match(req).result);
  },
};

Route style

Route style is a function that accepts a relative path and returns the correct route pattern.

type Style = (path: string) => string | null;

If the return result is null the path will be ignored.

Default style

  • basic: NextJS route style (wildcard only supports [...] and wildcard parameter name is always $).
  • preserve: No modifications to the path.

Result

The result is a request context with result property is the matched result.