importWhenVisible

Use this function to import component when an element is visible.

Usage

import { importWhenVisible } from '@studiometa/js-toolkit';

importWhenVisible(() => import('./components/Component.js'), 'Component');

Parameters

• importFn (() => Promise<Base>): the function to import components
• selector (string): the name of the component or a CSS selector, the same logic as components resolution will be used
• parent (Base?): the parent Base instance used to query the selector, if not specified selector will be searched in the whole document.
• observerOptions (IntersectionObserverInit?): options for the IntersectionObserver instance

Returns

• Promise<Base>: a promise resolving to the the component's class

Examples

Import the class when the root element of the component is visible:

import { Base, importWhenVisible } from '@studiometa/js-toolkit';

class App extends Base {
  static config = {
    name: 'App',
    components: {
      Component: (app) =>
        importWhenVisible(
          () => import('./components/Component.js'),
          'Component',
          app,
        ),
    },
  };
}

Import the class when the #import-component-trigger element, which can be anywhere in the DOM, is visible:

import { Base, importWhenVisible } from '@studiometa/js-toolkit';

class App extends Base {
  static config = {
    name: 'App',
    components: {
      Component: () =>
        importWhenVisible(
          () => import('./components/Component.js'),
          '#import-component-trigger',
        ),
    },
  };
}

Import the class when the app's btn ref is visible:

import { Base, importWhenVisible } from '@studiometa/js-toolkit';

class App extends Base {
  static config = {
    name: 'App',
    refs: ['btn'],
    components: {
      Component: (app) =>
        importWhenVisible(
          () => import('./components/Component.js'),
          app.$refs.btn,
        ),
    },
  };
}