![github-actions[bot]](https://avatars.githubusercontent.com/in/15368?v=4&size=40){kind=avatar}
Пакет, упрощающий работу с модулями в arui-scripts
yarn add @alfalab/scripts-modulescreateModuleLoadercreateClientResourcesFetchercreateServerResourcesFetchergetServerFetcherParamsuseModuleLoaderuseModuleMounter- `useModuleFactory
executeModuleFactory
Функция, которая создает загрузчик для модуля.
import { createModuleLoader } from '@alfalab/scripts-modules';
const loader = createModuleLoader({
hostAppId: 'my-app', // id вашего приложения, оно будет передаваться в серверную ручку модуля
moduleId: 'test', // id модуля, который вы хотите подключить
// функция, которая должна вернуть описание модуля.
getModuleResources: async ({ moduleId, hostAppId, params }) => ({
scripts: ['http://localhost:8081/static/js/main.js'], // скрипты модуля
styles: ['http://localhost:8081/static/css/main.css'], // стили модуля
moduleVersion: '1.0.0', // версия модуля
appName: 'moduleSourceAppName', // имя приложения, которое является источником модуля
mountMode: 'compat', // режим монтирования модуля
moduleRunParams: { // параметры, которые будут доступны при инициализации модуля
baseUrl: 'http://localhost:8081',
},
}),
// опциональные параметры
resourceCache: 'single-item', // политика кеширования ресурсов модуля. Если 'none' - ресурсы модуля будут удалены из кеша после его удаления со страницы. Если 'single-item' - в кеше будет храниться значения для текущего значения loaderParams.
resourcesTargetNode: document.head, // DOM-нода, в которую будут монтироваться ресурсы модуля (css и js)
onBeforeResourcesMount: (moduleId, resources) => {}, // коллбек, который будет вызван перед монтированием ресурсов
onBeforeModuleMount: (moduleId, resources) => {}, // коллбек, который будет вызван перед монтированием модуля
onAfterModuleMount: (moduleId, resources, module) => {}, // коллбек, который будет вызван после монтирования модуля
onBeforeModuleUnmount: (moduleId, resources, module) => {}, // коллбек, который будет вызван перед размонтированием модуля
onAfterModuleUnmount: (moduleId, resources, module) => {}, // коллбек, который будет вызван после размонтирования модуля
});
const result = await loader({
cssTargetSelector: 'head', // опциональный параметр, селектор по которому будет производиться поиск DOM-ноды, в которую будут монтироваться стили модуля
getResourcesParams: { ... }, // опциональные параметры, которые будут переданы в getModuleResources
});
console.log(result); // { module, moduleResources, unmount }Функция, которая создает функцию getModuleResources для загрузки клиентских модулей.
import { createModuleFetcher } from '@alfalab/scripts-modules';
const getModuleResources = createModuleFetcher({
baseUrl: '', // Базовый адрес приложения, которое предоставляет модули. Может быть как относительным, так и абсолютным.
assetsUrl: '/assets/webpack-assets.json', // опциональный параметр для переопределения пути до файла с манифестом
});Функция, которая создает функцию getModuleResources для загрузки серверных модулей.
import { createServerStateModuleFetcher } from '@alfalab/scripts-modules';
const getModuleResources = createServerStateModuleFetcher({
baseUrl: '', // Базовый адрес приложения, которое предоставляет модули. Может быть как относительным, так и абсолютным.
headers: {}, // опциональный параметр для передачи дополнительных заголовков в запрос
});Функция, которая возвращает параметры для запроса серверных модулей.
import { getServerStateModuleFetcherParams } from '@alfalab/scripts-modules';
const params = getServerStateModuleFetcherParams(); // { method: 'POST', relativePath: '/api/getModuleResources' }React-хук, который позволяет загружать модули в компонентах.
import { createClientLoader, useModuleLoader } from '@alfalab/scripts-modules';
const loader = createModuleLoader({ ... });
const MyApp = () => {
const {
loadingState, // состояние загрузки модуля, 'unknown' | 'pending' | 'fulfilled' | 'rejected'
module, // экспортированный модуль, если загрузка прошла успешно
resources, // ресурсы модуля, если загрузка прошла успешно (css, js, ответ сервера)
} = useModuleLoader({
loader, // загручик модуля, полученный с помощью createModuleLoader
loaderParams: {} // опциональные параметры, которые будут переданы в getModuleResources
});
return (
<div>
{loadingState === 'pending' && <div>Загрузка...</div>}
{loadingState === 'rejected' && <div>Ошибка загрузки</div>}
{loadingState === 'fulfilled' && <div>Модуль загружен</div>}
<pre>{JSON.stringify(module, null, 4)}</pre>
</div>
);
}React-хук, который позволяет использовать монтируемые модули в компонентах.
import { createClientLoader, useModuleMounter } from '@alfalab/scripts-modules';
const loader = createModuleLoader({ ... });
const MyApp = () => {
const {
loadingState, // состояние загрузки модуля, 'unknown' | 'pending' | 'fulfilled' | 'rejected'
targetElementRef, // ссылка на DOM-ноду, в которую будет монтироваться модуль
} = useModuleMounter({
loader, // загручик модуля, полученный с помощью createModuleLoader
loaderParams: {}, // опциональные параметры, которые будут переданы в getModuleResources
runParams: {}, // опциональные параметры, которые будут переданы в модуль при инициализации
createTargetNode: () => document.createElement('div'), // опциональная функция, которая должна вернуть DOM-ноду, в которую будет монтироваться модуль
useShadowDom: false, // опциональный флаг, если true - внутри targetElementRef будет создан shadowRoot, и модуль будет монтироваться туда
});
return (
<div>
{loadingState === 'pending' && <div>Загрузка...</div>}
{loadingState === 'rejected' && <div>Ошибка загрузки</div>}
<div ref={ targetElementRef } />
</div>
);
}React-хук, который позволяет использовать модули-фабрики в компонентах
import { createClientLoader, useModuleFactory } from '@alfalab/scripts-modules';
const loader = createModuleLoader({ ... });
const MyApp = () => {
const {
loadingState, // состояние загрузки модуля, 'unknown' | 'pending' | 'fulfilled' | 'rejected'
module, // Результат выполнения фабрики
} = useModuleFactory({
loader, // загручик модуля, полученный с помощью createModuleLoader
loaderParams: {}, // опциональные параметры, которые будут переданы в getModuleResources
runParams: {}, // опциональные параметры, которые будут переданы в модуль при инициализации
getFactoryParams: (serverState) => serverState, // опциональная функция, которая позволяет модифицировать серверное состояние модуля
});
return (
<div>
{loadingState === 'pending' && <div>Загрузка...</div>}
{loadingState === 'rejected' && <div>Ошибка загрузки</div>}
{loadingState === 'fulfilled' && <pre>{JSON.stringify(module)}</pre>}
</div>
);
}Хелпер, позволяющий "выполнить" модуль-фабрику, полезен при использовании фабрик вне реакт-компонентов
import { createModuleLoader, executeModuleFactory } from '@alfalab/scripts-modules';
const loader = createModuleLoader({...});
async function mySuperMethod() {
const result = await loader();
const executionResult = executeModuleFactory(
result.module,
result.moduleResources.moduleState,
{}, // опциональные run-параметры модуля
);
console.log(executionResult); // Тут будет то, что возвращает модуль-фабрика
}