Resource

A base resource abstraction for creating, connecting and observing DOM-loaded assets.

Import

import { Resource } from "@schukai/monster/source/dom/resource.mjs";

Source

View source code

Package

@schukai/monster

Since

1.25.0

Resource is the shared base contract for DOM-loaded assets such as scripts, links and data tags. It owns the common lifecycle: create an element, connect it into the document and observe whether it has loaded or failed.

Use it when you need a reusable loading abstraction instead of manually creating elements in feature code. Most applications work with derived resource classes, not with the base class directly.

Create And Connect A DOM Resource

import {
    referenceSymbol,
    Resource,
} from "@schukai/monster/source/dom/resource.mjs";

class DemoResource extends Resource {
    static getURLAttribute() {
        return "src";
    }

    create() {
        const element = document.createElement("div");
        element.textContent = `resource: ${this.getOption("src")}`;
        element.className = "monster-card";
        this[referenceSymbol] = element;
        return this;
    }
}

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

document.getElementById("resource-run").addEventListener("click", () => {
    const resource = new DemoResource({
        src: "/demo.json",
        document,
        query: "#resource-output",
    });

    resource.connect();

    output.textContent = JSON.stringify(
        {
            source: resource.getOption("src"),
            connected: resource.isConnected(),
        },
        null,
        2,
    );
});

Open in playground

Exported

Resource, KEY_DOCUMENT, KEY_QUERY, referenceSymbol

Derived from

BaseWithOptions

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 BaseWithOptions.

Option

Type

Default

Description

document

undefined

the document object into which the node is to be appended

src/href

string

undefined

url to the corresponding resource

query

string

undefined

defines the location where the resource is to be hooked into the dom.

string

undefined

element attribute id

title

string

undefined

element attribute title

class

string

undefined

element attribute class

timeout

number

undefined

timeout

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 BaseWithOptions.

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 BaseWithOptions.

Constructor

constructor(options)

Parameters

options {object|undefined}: options

Behavioral methods

create()

Returns

{Monster.DOM.Resource}

Throws

{Error} this method must be implemented by derived classes

This method is overridden by the special classes and creates the DOM object. This method is also called implicitly, if not yet done explicitly, by calling connect().

State query methods

isConnected()

Returns

{boolean}

Static methods

[instanceSymbol]()

Returns

{symbol}

getURLAttribute()

Returns

{string}

Other methods

available()

Returns

{Promise}

With available() you can check if a resource is available. This is the case when the tag is included and the resource is loaded.

connect()

Returns

{Monster.DOM.Resource}

This method appends the HTMLElement to the specified document. If the element has not yet been created, create() is called implicitly. throws {Error} target not found

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.