ResourceManager

A resource coordinator for registering and connecting scripts, stylesheets and data assets.

Import

import { ResourceManager } from "@schukai/monster/source/dom/resourcemanager.mjs";

Source

View source code

Package

@schukai/monster

Since

1.25.0

Introduction

ResourceManager coordinates scripts, stylesheets and data resources as one managed bundle. Use it when a feature needs several assets and should register, connect and verify them through one contract.

Core Responsibilities

Surface	What it solves
`addScript()`	Registers a script resource with the manager.
`addStylesheet()`	Registers a stylesheet resource with the manager.
`addData()`	Registers a data resource that fetches and injects text content.
`connect()`	Creates and appends all registered resources to the target document.
`available()`	Waits until the registered resources report their availability.

Why It Matters

Instead of scattering resource injection across unrelated modules, the manager makes the full dependency set visible and testable in one place.

Register And Connect Multiple Resources

import { ResourceManager } from "@schukai/monster/source/dom/resourcemanager.mjs";

const output = document.getElementById("manager-output");

document.getElementById("manager-run").addEventListener("click", () => {
    const manager = new ResourceManager({ document });
    manager
        .addScript("/assets/app.js", { type: "module" })
        .addStylesheet("/assets/app.css", { rel: "stylesheet" })
        .addData("/assets/config.json", { type: "application/json" });

    const resources = manager.getInternal("resources");
    output.textContent = JSON.stringify(
        {
            scripts: resources.scripts.length,
            stylesheets: resources.stylesheets.length,
            data: resources.data.length,
        },
        null,
        2,
    );
});

Open in playground

Connect Script Stylesheet And Data Resources From Inline Urls

import { ResourceManager } from "@schukai/monster/source/dom/resourcemanager.mjs";

const output = document.getElementById("resource-manager-bundle-output");

document.getElementById("resource-manager-bundle-run").addEventListener("click", async () => {
    const manager = new ResourceManager({ document });
    manager
        .addStylesheet("data:text/css,body%7B--resource-manager-demo:1;%7D")
        .addScript("data:text/javascript,window.__resourceManagerScriptLoaded%20%3D%20true%3B")
        .addData("data:application/json,%7B%22status%22%3A%22ready%22%7D");

    manager.connect();
    await manager.available();

    const resources = manager.getInternal("resources");
    output.textContent = JSON.stringify({
        stylesheets: resources.stylesheets.length,
        scripts: resources.scripts.length,
        data: resources.data.length,
        scriptLoaded: window.__resourceManagerScriptLoaded === true,
    }, null, 2);
});

Open in playground

Register Resources In Separate Steps And Inspect The Internal Groups

import { ResourceManager } from "@schukai/monster/source/dom/resourcemanager.mjs";

document.getElementById("resource-manager-separate-run").addEventListener("click", () => {
    const manager = new ResourceManager({ document });
    manager.addScript("/assets/app.js", { type: "module" });
    manager.addStylesheet("/assets/app.css", { rel: "stylesheet" });
    manager.addData("/assets/config.json", { type: "application/json" });

    const resources = manager.getInternal("resources");
    document.getElementById("resource-manager-separate-output").textContent = JSON.stringify({
        scriptSources: resources.scripts.map((entry) => entry.getOption("src")),
        stylesheetTargets: resources.stylesheets.map((entry) => entry.getOption("href")),
        dataSources: resources.data.map((entry) => entry.getOption("src")),
    }, null, 2);
});

Open in playground

Wait For Registered Resources To Report Availability

import { ResourceManager } from "@schukai/monster/source/dom/resourcemanager.mjs";

document.getElementById("resource-manager-availability-run").addEventListener("click", async () => {
    const manager = new ResourceManager({ document });
    manager
        .addStylesheet("data:text/css,body%7B--resource-manager-availability:1;%7D")
        .addScript("data:text/javascript,window.__resourceManagerAvailability%20%3D%20'ok'%3B");

    manager.connect();
    const result = await manager.available();

    document.getElementById("resource-manager-availability-output").textContent = JSON.stringify({
        resolvedEntries: result.length,
        marker: window.__resourceManagerAvailability ?? "missing",
    }, null, 2);
});

Open in playground

Exported

ResourceManager

Derived from

Base

Options

The Options listed in this section are defined directly within the class. This class is derived from several parent classes. Therefore, it inherits Options from these parent classes. If you cannot find a specific Options in this list, we recommend consulting the documentation of the Base.

Option

Type

Default

Description

string

baseurl

Properties

The Properties listed in this section are defined directly within the class. This class is derived from several parent classes. Therefore, it inherits Properties from these parent classes. If you cannot find a specific Properties in this list, we recommend consulting the documentation of the Base.

Methods

The methods listed in this section are defined directly within the class. This class is derived from several parent classes. Therefore, it inherits methods from these parent classes. If you cannot find a specific method in this list, we recommend consulting the documentation of the Base.

Constructor

constructor(options)

Parameters

options {object}: options

throw {Error} unsupported document type

Behavioral methods

addData(url,options)

Parameters

url {string|url}: url
options {[object|undefined}: options

Returns

{Monster.DOM.ResourceManager}

Add Data Tag

addScript(url,options)

Parameters

url {string|url}: url
options {[object|undefined}: options

Returns

{Monster.DOM.ResourceManager}

Add a script

addStylesheet(url,options)

Parameters

url {string|url}: url
options {[object|undefined}: options

Returns

{Monster.DOM.ResourceManager}

Add Stylesheet

Structural methods

getBaseURL()

getOption(key)

Parameters

key

Other methods

available()

Returns

{Promise}

Throws

{Error} unsupported resource definition

Check if available

connect()

Returns

{Monster.DOM.ResourceManager}

Throws

{Error} unsupported resource definition

Append Tags to DOM

internalDefaults()

Events

This component does not fire any public events. It may fire events that are inherited from its parent classes.

The current width of the area is too small to display the content correctly.