Хук app.pluginHook

Этот хук определяет какие именно файлы (CSS и JS) нужно отправить для загрузки на страницах, URL которых соответствует заданным условиям, в нашем случае это, начинающихся с /teach/control/stream.

app.pluginHook('@store/plugin/gc-script-configs', async (ctx, params) => {
  return {
    [String.raw `/teach\/control\/stream*/`]: {
      css: [ctx.account.url(`/app/${slug}/tranings/css/main.css`)],
      js: [ctx.account.url(`/app/${slug}/tranings/js/main.js`)]
    },
  }
});

Разберем подробнее

• Идентификатор хука:
  @store/plugin/gc-script-configs — это адрес хука, который "опрашивает" плагины, какие файлы нужно подключать к системе.

• Функция-обработчик:
  Функция возвращает объект с ключами, где каждый ключ — это строка с регулярным выражением для сопоставления маршрутов, а значения — массивы адрессов на CSS и JS файлов для загрузки.

• Регулярное выражение маршрута:
  [String.raw `/teach\/control\/stream*/`] — это строка, которая соответствует URL-адресам, начинающимся с /teach/control/stream. Это используется для возможности указать динамические части URL.

• Добавляемые ресурсы:

  • css: массив CSS-файлов, которые нужно подключить на страницах, соответствующих маршруту.
  • js: массив JS-файлов, которые также подключаются на этих страницах.

• Путь к файлам:

  • ctx.account.url(...) генерирует полный URL для указанного файла, основываясь на аккаунте пользователя или другом контексте.
  • В данном случае подключаются файлы:
    • CSS: /app/${slug}/tranings/css/main.css
    • JS: /app/${slug}/tranings/js/main.js

Если пользователь откроет страницу, чей URL соответствует /teach/control/stream1, то эти файлы добавятся в документ и будут выполнены на стороне клиента.