Assets

A tiny, zero-dependency JavaScript/TypeScript library for fetching and managing assets with in-memory caching and automatic font registration for canvas and dynamic text rendering.

Supported formats:

• fonts: woff, woff2, ttf, otf (downloaded fonts are automatically registered in the browser, making them immediately available for canvas and dynamic text rendering)
• images: png, webp, jpg, jpeg, svg, gif
• audio: webm, mp3, ogg, m4a, aac, wav
• data: json

Installation

npm install @armniko/assets

Usage

import {Assets, AssetsBatch, type Progress} from '@armniko/assets';

const assetsBatch: AssetsBatch = new AssetsBatch({
    assets: [
        'url/to/asset-1.png',            // access loaded asset: assets.image('asset-1')
        {asset2: 'url/to/asset-2.jpg'},  // access loaded asset: assets.image('asset2')
    ],
    onLoad: (name: string, progress: Progress): void => {
        console.log(`Loaded ${name}: ${progress.percents()}%`);
    },
    onComplete: (): void => {
        console.log('Done!');
    },
    onError: (url: string, error: Error): void => {
        console.log(url, error);
    }
});

const assets: Assets = new Assets();
assets.fetch(assetsBatch);

Changelog