Загрузка дополнительных ресурсов виджета
В процессе разработки виджета может возникнуть необходимость загрузки дополнительных ресурсов, например, шрифтов и изображений. Для этого можно использовать различные подходы, включая запросы к внешним сервисам с использованием функции fetch, а также загрузку ресурсов из локальной директории _resources (путь и имя директории можно переопределить в файле конфигурации widgetrc.json).
В качестве примера загрузим скрипт, который добавим в директорию _resources. Создадим виджет со следующей файловой структурой:
custom_widget
_resources/
script.js
node_modules/
package/
en/
changelog.md
doc.md
resources/
Widget.png
ru/
changelog.md
doc.md
manifest.json
src/
definition/
definition.ts
panel.ts
settings.ts
App.tsx
app.d.ts
index.css
index.tsx
.eslintignore
.eslintrc
.gitignore
babel.config.js
jest.config.js
manifest.json
package.json
tsconfig.json
widgetrc.json
yarn.lock
В директории _resources могут храниться любые файлы (шрифты, иконки, json), которые виджет может запросить при работе в системе. Получить эти файлы можно путем вызова функции getWidgetAsset, которую можно получить из props виджета. Данная функция является асинхронной и при выполнении promise в результате получим Blob.
let counter = 0;
setInterval(() => {
console.warn(++counter)
}, 1000);
import type { ICustomWidgetProps } from "@infomaximum/widget-sdk";
import type { WidgetSettings } from "definition/settings";
import { useEffect, type FC } from "react";
interface AppProps extends ICustomWidgetProps<WidgetSettings> {}
export const App: FC<AppProps> = ({
getWidgetAsset
}) => {
useEffect(() => {
(async () => {
const blob = await getWidgetAsset("_resources/script.js");
if (!blob) return;
const script = document.createElement("script");
const source = await blob.text();
script.innerText = source;
document.body.appendChild(script);
})();
}, [getWidgetAsset]);
return <div> App </div>;
};
Этот код позволяет динамически загрузить и выполнить скрипт из локальной директории _resources, что может быть полезно для подключения дополнительной функциональности или зависимостей в вашем виджете.
Была ли статья полезна?