Skip to main content

module-loader-client

Загрузчик модулей для браузерного окружения. Загружает js по урлу опционально вместе с css. Встроена дедубликация загрузки через атрибут скрипта loaded.

Установка​

Для yarn:

yarn add @tinkoff/module-loader-client

Для npm:

npm install @tinkoff/module-loader-client

Подключение и использование​

loadModule​

В loadModule встроена дедубликация загрузки через поиск уже вставленного скрипта с тем же урлом, что позволяет инициировать загрузку скриптов на этапе разбора html, в этом случае вы должны самостоятельно навесить атрибут loaded скрипту, чтобы метод loadModule понимал загружен скрипт или еще нет:

<script
  src="https://cdn.example.com/bundle.js"
  onload="this.setAttribute('loaded', true)"
  onerror="this.setAttribute('loaded', 'error')"
/>

Пример использования:

import { loadModule } from '@tinkoff/module-loader-client';

loadModule('https://cdn.example.com/js/module.js', {
  cssUrl: 'https://cdn.example.com/js/module.css', // опционально
}).then(() => {
  // ...
});

addScript​

Вставляет тег script без какой-либо дополнительной логики по дедубликации:

import { addScript } from '@tinkoff/module-loader-client';

addScript(src, maybeAttrs, maybeScriptHandler).then(() => something());

Коллбэк вызывается синхронно и принимает непосредственно script элемент.

Вставляет тег link без какой-либо дополнительной логики по дедубликации:

import { addLink } from '@tinkoff/module-loader-client';

addLink(type, href, maybeAttrs).then(() => something());

Интерфейс и типы​

type LogFunction = (...args: unknown[]) => void;

export interface Logger {
  trace: LogFunction;
  debug: LogFunction;
  info: LogFunction;
  warn: LogFunction;
  error: LogFunction;
}

export interface LoadModuleOptions {
  cssUrl?: string;
  resolveOnCssFailed?: boolean;
}