Web Loader

WARNING: This project is under development. Current use is not recommended!

Modular asset loader for web applications.

Table of Contents

• Installation
• API
• Modules
  • Operators
  • Loaders
  • Parsers
  • Custom

Installation

With NPM

$ npm install --save @wault/web-loader

API

import {
    load,
    Chain,
    XHRLoader,
    ImageElementLoader,
    WebAudioParser,
    TypeDetector
} from '@wault/web-loader'

load(Chain([
    TypeDetector,
    XHRLoader(),
    ImageElementLoader,
    WebAudioParser(audioContext)
]), [
    'assets/textures/background.jpg',
    'assets/sfx/theme.mp3'
], progress => console.log(`Loading ${100 * progress}%`))
.then(assets => {
    const image = assets[0].data
    const music = assets[1].data
})
.catch(error => console.error(error))

Modules

Loader is composed out of different modules, each providing it's own functionality.

Operators

| Module | Example | Description | | ------ | ------ | ------ | | Chain | Chain([ ...modules ]) | For each block. | | Filter | Filter(module, material => true/false) | If block. | | Catch | Catch(module, (error, material) => material) | Try catch block. | | Throttle | Throttle(16)(module) | Limit the number of concurrent requests. | | Store | Store(internal?) | Cache. Internal resolve assumes that no additional requests should be made. | | Fallback | Fallback() | In case of failure will resort to fallbacks if supplied. | | Order | Order(module) | Execute in strict order. |

Loaders

| Module | Example | Description | | ------ | ------ | ------ | | XHRLoader | XHRLoader() | Load files using http request. | | ImageElementLoader | ImageElementLoader | Load image into <img>. | | AudioElementLoader | AudioElementLoader | Load audio into <audio>. | | ScriptElementLoader | ScriptElementLoader() | Load and execute javascript asynchronously into <script>. | | StylesheetLoader | StylesheetLoader() | Load CSS asynchronously into <link>. |

Parsers

| Module | Example | Description | | ------ | ------ | ------ | | TypeDetector | TypeDetector() | Detect file extension. | | JSONParser | JSONParser | Parse JSON data. | | XMLParser | XMLParser | Parse XML data. | | ScriptExecutor | ScriptExecutor() | Execute script. | | StylesheetParser | StylesheetParser() | Apply CSS. | | SVGParser | SVGParser | Convert SVG to image. | | WebAudioDecoder | WebAudioDecoder(audioContext) | Decode web audio buffer. | | Base64Unpacker | Base64Unpacker(material => material.data) | Unpack base64 encoded assets from json bundle. |

Custom

Any function or async function can be used as a loading module.

async function customLoader(material){
    const response = await fetch(material.path)
    const data = await response.json()
    return { ...material, data }
}