@b9g/assets

Static asset pipeline with content-based hashing.

Import Attributes

Import assets using import attributes:

import logo from "./logo.svg" with { assetBase: "/assets/" };
import styles from "./styles.css" with { assetBase: "/assets/" };
import client from "./client.ts" with { assetBase: "/assets/" };

// logo = "/assets/logo-a1b2c3d4.svg"
// styles = "/assets/styles-e5f6g7h8.css"
// client = "/assets/client-i9j0k1l2.js"

Attributes

Attribute Type Description
assetBase string Required. URL path prefix
assetName string Override output filename
type "css" Extract CSS from JS bundle

Custom Filenames

import favicon from "./favicon.ico" with {
  assetBase: "/",
  assetName: "favicon.ico"
};
// Returns: "/favicon.ico" (no hash)

CSS Extraction

import clientJs from "./client.ts" with { assetBase: "/assets/" };
import clientCss from "./client.ts" with { assetBase: "/assets/", type: "css" };

Supported File Types

Transpiled

Static

Assets Middleware

import { assets } from "@b9g/assets/middleware";

router.use(assets());

Options

Option Type Default
manifestPath string "assets.json"
cacheControl string "public, max-age=31536000, immutable"

Asset Manifest

Generated at [outdir]/server/assets.json:

{
  "assets": {
    "./logo.svg": {
      "source": "./logo.svg",
      "output": "assets/logo-a1b2c3d4.svg",
      "url": "/assets/logo-a1b2c3d4.svg",
      "hash": "a1b2c3d4",
      "size": 1234,
      "type": "image/svg+xml"
    }
  }
}

Build Output

dist/
├── public/
│   ├── assets/
│   │   ├── app-abc123.js
│   │   └── styles-xyz789.css
│   └── favicon.ico
└── server/
    └── assets.json

See Also