Отправка серверной стороны + маршрутизация с помощью 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` 

, которая очевидна, так как узел не может выполнять 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> 

Благодаря GianlucaGuarini ответ https://github.com/riot/riot/issues/1450#issuecomment-165984208

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