Загрузка дополнительных ресурсов виджета
8 800 555-89-02
Войти
For developers
CTRL+K
Standalone2407

Загрузка дополнительных ресурсов виджета

В этой статье
  • Загрузка дополнительных ресурсов виджета

В процессе разработки виджета может возникнуть необходимость загрузки дополнительных ресурсов, например, шрифтов и изображений. Для этого можно использовать различные подходы, включая запросы к внешним сервисам с использованием функции 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.

_resources/script.js
let counter = 0;

setInterval(() => {
    console.warn(++counter)
}, 1000);
src/App.tsx
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, что может быть полезно для подключения дополнительной функциональности или зависимостей в вашем виджете.

Была ли статья полезна?

Да
Нет
Предыдущая
Локализация
8 (800) 555-89-028 (495) 150-31-45team@infomaximum.com
Для бизнеса
© 20102024. ООО «Инфомаксимум»
Мы используем файлы cookies, чтобы сайт был лучше для вас.