1.1 Автоматический поиск плагиновlink

SFLoaderPlugin определяет, какие модули нужны текущей странице, и загружает только их JS/CSS. Основной источник правил для поиска — объект SF.RuleLoader. В него попадают правила для разных смысловых наборов:

• component — обычные UI-компоненты из src/component/*;
• smart — Smart-компоненты из src/smart/* и связанный с ними runtime;
• utility — утилитарные классы из src/utility/*.

Тип модуля и способ его обнаружения — разные вещи. Например, Smart-компонент может находиться по тегу <sf-tooltip>, а обычный компонент — по регулярному выражению в HTML. Это не делает один подход «новее» другого: loader просто использует разные каналы поиска.

Основной контракт SF.RuleLoaderlink

Правило описывает имя модуля, способ его обнаружения, тип и нужные ресурсы:

SF.RuleLoader['dropdown'] = {
  regex: /sf-dropdown|sf-list-item/,
  type: 'component',
  js: true,
  css: true,
  relation: [{ name: 'icon-buttons' }],
};

SF.RuleLoader['cl-tooltip'] = {
  tags: ['sf-tooltip'],
  type: 'smart',
  mode: 'smart',
  js: true,
  relation: [{ name: 'tooltip' }],
};

Частые поля:

• tags — список custom-element тегов, по которым модуль ищется в живом DOM;
• regex — регулярное выражение для поиска признаков модуля в HTML;
• type — смысловой тип модуля: component, smart, utility;
• mode — режим загрузки, если он отличается или должен быть указан явно;
• js, css — какие ресурсы нужно подключить;
• relation — зависимости, которые должны быть загружены вместе с модулем.

Как проходит первичный поискlink

После инициализации loader ждёт готовности страницы и выполняет несколько проверок:

1. Ищет shortcodes в тексте страницы.
2. Ищет custom elements по правилам tags.
3. Ищет статические иконки.
4. Проверяет атрибуты элементов по regex-правилам.
5. Проверяет явные подключения через sf-asset.
6. Выполняет общий regex-поиск по HTML.
7. Запускает MutationObserver для динамических изменений DOM.

Если во время этих проверок найден новый модуль, loader добавляет его в очередь и вызывает загрузку ресурсов.

Поиск по tagslink

Правила с полем tags используются для компонентов, которые представлены в DOM отдельным тегом:

<sf-tooltip text="Подсказка"></sf-tooltip>

SF.RuleLoader['cl-tooltip'] = {
  tags: ['sf-tooltip'],
  type: 'smart',
  mode: 'smart',
  js: true,
  relation: [{ name: 'tooltip' }],
};

Loader строит карту sf-* тег -> имя модуля, сканирует DOM и при встрече <sf-tooltip> отмечает модуль cl-tooltip как необходимый. После загрузки JS браузер сам обновляет уже существующий custom element через customElements.define(...).

Поиск через regexlink

Правила с regex используются, когда у компонента нет отдельного custom-element тега или модуль нужно определить по классу, атрибуту либо другому фрагменту HTML:

<button data-fancybox="gallery">Открыть</button>

SF.RuleLoader['fancybox'] = {
  regex: /data-fancybox/,
  type: 'attribute',
  mode: 'component',
  js: true,
  css: true,
  relation: [{ name: 'jquery', mode: 'component', js: true }],
};

Regex-поиск работает по отфильтрованному HTML. Блоки, которые не должны влиять на загрузку, например pre, code и элементы с игнорируемыми областями наблюдения, исключаются перед проверкой.

Явное подключение через sf-assetlink

Атрибут sf-asset остаётся поддерживаемым способом явно указать модуль:

<div sf-asset="modal"></div>

В этом случае loader напрямую добавит modal в список модулей. Этот механизм полезен для ручного подключения, но для компонентов с устойчивым DOM-признаком обычно удобнее описывать правило в SF.RuleLoader.

Зависимостиlink

Поле relation позволяет загрузить связанные модули вместе с найденным:

SF.RuleLoader['dropdown'] = {
  regex: /sf-dropdown|sf-list-item/,
  type: 'component',
  js: true,
  css: true,
  relation: [{ name: 'icon-buttons' }],
};

Если на странице найден dropdown, loader также подготовит icon-buttons. Зависимости не являются отдельным способом поиска: они расширяют список загрузки после того, как найден основной модуль.

Динамические изменения DOMlink

После первичной загрузки SFLoaderPlugin запускает MutationObserver. Он отслеживает добавленные узлы и изменения атрибутов, затем повторяет нужные проверки только для изменившейся части DOM:

• ищет shortcodes;
• проверяет custom elements по tags;
• проверяет статические иконки;
• анализирует атрибуты и regex-правила;
• при необходимости запускает загрузку новых модулей.

Это позволяет подгружать компоненты, которые появились после AJAX-запроса, Turbo-перехода или ручной вставки HTML.

Внутренние методыlink

Основные методы текущего поиска:

• prepare() — запускает первичный поиск и подготовку загрузки;
• scanCustomElements() — ищет sf-* теги по правилам tags;
• scanAttributes() — проверяет атрибуты элементов;
• searchAttr() — обрабатывает явные sf-asset;
• searchRegexp() — выполняет общий regex-поиск по HTML;
• search() — подключает MutationObserver и обрабатывает динамические изменения.

Особенностиlink

• Один и тот же модуль не загружается повторно.
• Правила component, smart и utility живут в одном SF.RuleLoader, но обозначают разные смысловые наборы.
• tags, regex и sf-asset — это каналы обнаружения, а не типы компонентов.
• Для динамически вставленных sf-* тегов важно, чтобы они находились в живом DOM.
• Дочерние sf-* элементы внутри shadow DOM не обнаруживаются обычным сканированием страницы.