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 элемент.
addLink
Вставляет тег 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;
}