Lazymodule

Watches HTML elements with a data-lazy-module attribute and mounts the module when they come into view.

Installation

npm install @cube-nl/lazymodule
# or
yarn add @cube-nl/lazymodule

Usage

import { createLazyLoader } from '@cube-nl/lazymodule';
import { preloadModules, observeInsertions, observeInteractions } from '@cube-nl/lazymodule/plugins';

createLazyLoader({
  modules: import.meta.glob('./lazymodules/**/*.ts'),
})
.use(preloadModules)
.use(observeInsertions)
.use(observeInteractions)
.start();

tsconfig.json

When using Vite make sure you add vite/client to the compilerOptions types.

{
  "compilerOptions": {
    "target": "ES2020",
    "module": "ES2020",
    "types": ["vite/client"]
  }
}

index.html:

<div data-lazy-module="example">0</div>

lazymodules/example.ts:

import type { LazyModule } from '@cube-nl/lazymodule';

export default class Example implements LazyModule {
  constructor(public element: HTMLElement) {}
  public *onMount() { console.log('mounted'); }
  public onUnmount(wasMounted: boolean) { console.log('unmounted'); }
}

Plugins

preloadModules (build-in plugin)

The preload lazy modules feature automatically, generates modulepreload links in the document head based on data-lazy-module elements. These fetch the JavaScript modules with low priority in the background, speeding up the mounting process.

observeInsertions (build-in plugin)

Monitors dynamically added data-lazy-module elements, for example, ones injected via JavaScript. When an element is added, the module is downloaded and mounted once it comes into view.

observeInteractions (build-in plugin)

This functionality captures user interactions with a lazy module before it is downloaded and replays the interaction once the module is downloaded and mounted. Useful for slow connections. The function accepts an eventTypes parameter to specify which events to track, defaulting to click and submit.

<button data-lazy-interact="click">
    refresh quote
</button>

Development

yarn install
yarn dev
cd demo && yarn dev

yarn test
yarn format

Lifecycle

• none (JavaScript module not yet loaded)
• loading (JavaScript module is loading)
• mounting (JavaScript module is mounting)
• mounted (JavaScript module is active on the element)
• unmounted (JavaScript module is inactive on the element)