Widget mode

Reactive Route можно отвязать от window.history и использовать в режиме виджетов, полноценно и без iframe встраивая в сайты. На этой странице показаны два виджета: первый на Solid.js и нативной реактивности (13.3 KB), второй — на Preact и Observable (11.85 KB). Оба используют соответствующий код из Примеров с заменой await router.init(location.href) на этот код:

// import { autorun } from 'kr-observable';
import { createRenderEffect } from 'solid-js';

router.historySyncStop();

await router.init(localStorage.getItem('WIDGET_URL') || '/');

// save to external storage
createRenderEffect(() => { // autorun(() => {
  const currentUrl = router.activeName
    ? router.stateToUrl(router.state[router.activeName])
    : '/';

  localStorage.setItem('WIDGET_URL', currentUrl);
});

// restore from external storage
window.addEventListener('storage', (event) => {
  if (event.key === 'WIDGET_URL') {
    router.redirect(router.urlToState(event.newValue || '/'));
  }
});

Слушать за событием 'storage' нужно если планируется управлять виджетом извне: достаточно записать новый URL в localStorage и в ряде случаев вызвать это событие вручную по спецификации браузера. Две кнопки ниже (нативные для Vue VitePress) одновременно управляют обоими виджетами:

function setWidgetUrl(url: string) {
  localStorage.setItem('WIDGET_URL', url);

  window.dispatchEvent(
    new StorageEvent('storage', {
      key: 'WIDGET_URL',
      newValue: url,
      storageArea: localStorage,
    })
  );
}

Второй пример использует другой UI-стек и систему реактивности, но управляется тем же внешним механизмом.

Разумеется, можно встраивать и крупные сайты и админ-панели, а также проектировать микрофронтенды. Главное — обеспечить изоляцию стилей и переменных, правильно настроив бандлер.

Widget mode ​