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