# Assets

[![npm](https://img.shields.io/npm/v/@armniko/assets)](https://www.npmjs.com/package/@armniko/assets)
![last published](https://img.shields.io/npm/last-update/@armniko/assets)
![zero dependencies](https://img.shields.io/badge/zero-dependencies-brightgreen)
[![types](https://img.shields.io/npm/types/@armniko/assets)](https://www.npmjs.com/package/@armniko/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`

<hr>

### Installation

```bash
npm install @armniko/assets
```

### Usage

```typescript
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

<table>
<tr>
    <td>v1.5.0</td>
    <td>
      Removed minification of build.<br>
      Added <code>exports</code> field for proper module resolution and types.<br>
      Marked package as side-effect free.
    </td>
</tr>
<tr>
    <td>v1.4.1</td>
    <td>
        Updated readme.
    </td>
</tr>
<tr>
    <td>v1.4.0</td>
    <td>
        Added JSON loader.<br>
        Added asset() method to get assets without knowing type.
    </td>
</tr>
<tr>
    <td>v1.3.0</td>
    <td>
        Added audio loader.<br>
        Added webp format.<br>
        Migrated from webpack to vite.
    </td>
</tr>
<tr>
    <td>v1.2.0</td>
    <td>
        Option to specify custom asset name.<br>
        Added font loader.
    </td>
</tr>
<tr>
    <td>v1.1.0</td>
    <td>
        Precompiled UMD and ESM.
    </td>
</tr>
<tr>
    <td>v1.0.0</td>
    <td>
        Initial version.
    </td>
</tr>
</table>