nexwidget/dist/directives/lazyload.js

An ESNext Web Component library.

import { AsyncDirective, directive } from 'lit-html/async-directive.js';
import { noChange } from 'lit-html/lit-html.js';
import { Debouncer } from 'nexbounce/nexbounce.js';
import { addPendingTask } from '../lib/add-pending-task.js';
export class LazyloadDirective extends AsyncDirective {
  #renderDebouncer = new Debouncer();
  #latestValue;
  #part;
  render(widgetImport, value) {
    this.#latestValue = value;
    addPendingTask(this.#part?.startNode?.parentNode, widgetImport).then(() =>
      this.#renderDebouncer.enqueue(() => {
        if (this.#latestValue === value) this.setValue(value);
      }),
    );
    return noChange;
  }
  update(part, [widgetImport, value]) {
    this.#part = part;
    return this.render(widgetImport, value);
  }
}
export const lazyload = directive(LazyloadDirective);