Рендеринг на стороне сервера + маршрутизация с Riot.js?

Question

Я использую библиотеку маршрутизации Node + Riot.js + Grapnel (которая может работать как на клиенте, так и на сервере). Мне удалось настроить маршрутизацию на клиенте, но я не могу понять, как заставить его работать на сервере.

Текущая функциональность моего клиентского маршрутизатора проста. Я просто отправляю opts.route к соответствующему компоненту, а затем монтирует запрошенную страницу (которая также является компонентом) к div,

<x-layout>
  <div id="app-body"></div>

  <script>
    this.on('mount update', function() {
      riot.mount('#app-body', 'x-page-' + opts.route);
    });
  </script>
</x-layout>

Но с riot.render(tag, {page: 'dashboard'}) это не монтирует <x-page-dashboard> в #app-body,

Когда я удаляю this.on('mount update' ... обертка это дает мне ошибку

.../node_modules/riot/riot.js:1918
TypeError: (ctx || document).querySelectorAll is not a function`

что очевидно, потому что Node не может выполнять манипуляции с DOM.

Я также пытался динамически загружать компоненты, как это

// Riot doesn't compiles such expressions `<x-page-{opts.route}>`
var tag = riot.tag2('x-layout', '<div id="app-body"><x-page-{opts.route}></x-page-{opts.route}></div>');
riot.render(tag, {route: 'dashboard'}); // --> <x-layout><div id="app-body"><x-page-{opts.route}></x-page-{opts.route}></div></x-layout>

// Compiles but not mounts (empty tag)
var tag = riot.tag2('x-layout', '<div id="app-body" riot-tag="x-page-{opts.route}"></div>');
riot.render(tag, {route: 'dashboard'}); // --> <x-layout><div id="app-body" riot-tag="x-page-dashboard"></div></x-layout>

// It's only working when I hard coded the tag name
var tag = riot.tag2('x-layout', '<x-page-dashboard></x-page-dashboard>');
riot.render(tag, {route: 'dashboard'}); // <x-layout><x-page-dashboard>___ CHILDREN COMPONENTS... ____</x-page-dashboard></x-layout>

Есть ли возможный способ реализовать изоморфный рендеринг + маршрутизация? Я почти там, просто нужно как-то динамически передать имя компонента через опц

Answer 1

Я наконец решил это. Решение было использовать name="app_body" атрибут, но не id="app-body" как я пытался сделать.

<x-layout>
  <div name="app_body"></div>

  <script>
    this.mountPage = (page) => {
      riot.mount(this.app_body, 'x-page-' + page);
    }

    if (opts.route)
      this.mountPage(opts.route)
  </script>
</x-layout>

Благодаря ответу Джанлуки Гуарини https://github.com/riot/riot/issues/1450

Рабочий пример https://github.com/GianlucaGuarini/riot-app-example