importOnInteraction

Use the importOnInteraction function to import component when the user interacts with an element.

Usage

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

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

Parameters

• importFn (() => Promise<typeof 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
• events (string|string[]): one or many events which should trigger the import
• parent (Base): the parent Base instance used to query the selector, if not specified selector will be searched in the whole document.

Returns

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

Examples

Import the class when clicking on the root element of the component:

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

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

Import the class when clicking on the #import-component-trigger element which can be anywhere in the DOM:

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

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

Import the class when clicking on the app's btn ref:

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

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