wsc-moduleloader

The purpose of this module is to abstract the module loader and base module components so they can be implemented independently.

Setup

The module can be installed by running:

npm i -D @netvlies/wsc-js-moduleloader

Usage

Create modules in your HTML using the module selector (default: [data-module="Name"]).

<nav data-module="Navigation">
    <ul>...</ul>
</nav>

Initialize the module loader in your source code using this setup:

import ModuleLoader from '@netvlies/wsc-js-moduleloader';

import Navigation from './modules/Navigation';

const moduleLoader = new ModuleLoader({
    Navigation
});

Create the modules using the default framework in the Base module.

Module initialization priority

Starting at v1.1.0, you may use the new attribute data-module-priority to decide on the initialization priority of modules. By default all modules are executed on an idle callback. This means the default behavior is initializing modules when the browser is idle. Sometimes you may need to give priority initialization to a module. For example, because it is the first thing that's visible in a users window, like the Navigation example. You can bypass the idle callback by setting the data-module-priority attribute to instant:

<nav data-module="Navigation" data-module-priority="instant">
    <ul>...</ul>
</nav>

Instant means: do not wait for an idle moment and initialize this module instantly, asap.