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
      ),
    },
  };
}