Mithril: how to use multiple root elements? - mithril.js

Question

When using m.route, does everything under it have to be rendered using Hyperscript (not counting JSX)? Is it possible to mix pure HTML with multiple separate parts rendered using Hyperscript?
Suppose I have this HTML code:
<div id="root">
<div class="header">
<h3 id="header-text">Header Text</h3>
</div>
<div class="container">
<div id="content"></div>
<div id="sidebar"></div>
</div>
<div id="footer"></div>
</div>
Is it possible to use Mithril to render multiple parts of the HTML sections? Like so (pseudo code):
var root = document.getElementById('root');
var header = document.getElementById('header');
var content = document.getElementById('content');
var sidebar = document.getElementById('sidebar');
var footer = document.getElementById('footer');
var HeaderComponent = ...; // to render header text
var ContentComponent = ...; // main page content
var SidebarComponent = ...; // show links, bio, etc.
var Footer = ...; // contact info, etc.
var index = {
view: function(){
return [
{el: header, component: HeaderComponent},
{el: content, component: ContentComponent},
{el: sidebar, component: SidebarComponent},
{el: footer, component: FooterComponent}
];
}
};
m.route(root, '/', {
'/': index
});
so that multiple separate parts in the HTML code are rendered instead of just having a single root element? I really don't want to render the whole HTML skeleton template in Mithril as well, like this:
❌ DO NOT WANT:
// I DON'T want this
m('div#root', [
m('div.header', [
m('h3#header-text', m(HeaderComponent))
]),
m('div.container', [
m('div#content', m(ContentComponent)),
m('div#sidebar', m(SidebarComponent))
]),
m('div#footer', m(FooterComponent))
]);
I know it's manageable, but I'd really like the base skeleton template to be inside the .HTML file, so that I can seamlessly wrap more HTML tags later on, like using Bootstrap classes (cards, container, rows, extra wrapping divs needed, etc.). Thanks :)!

Answer 1

There's nothing stopping you from using the m.mount function several times, and several mount-points can be initialised this way:
var count = 0
m.mount(root1, {
view: () =>
m('button', {
onclick: () => count++,
textContent: 'Increase count',
}),
})
m.mount(root2, {
view: () =>
m('p', 'Count: ', count)
})
<h1>
Static page with multiple roots
</h1>
<div id=root1>
</div>
<p>
Intermediary static content
</p>
<div id=root2>
</div>
<script src="https://unpkg.com/mithril#2.0.4/mithril.min.js"></script>

Answer 2

Using #Barney's answer below, I managed to solve this using a mix of m.route for the main content and multiple m.mount's for the other components:
var header = document.getElementById('header');
var content = document.getElementById('content');
var sidebar = document.getElementById('sidebar');
var footer = document.getElementById('footer');
var HeaderComponent = ...; // to render header text
var SidebarComponent = ...; // show links, bio, etc.
var Footer = ...; // contact info, etc.
// this will be shown under content
var HomePage = {
view: function(){
return m('p', [
'Lorem ipusom dolor amit ',
m(m.route.Link, {href: '/about'}, 'About')
]);
}
};
var AboutPage = {
view: function(){
return m('p', 'This is the About page!');
}
};
//// MAIN SOLUTION ////
var Layout = {
// oninit is only run once
oninit: function(){
m.mount(header, HeaderComponent);
m.mount(sidebar, SidebarComponent);
m.mount(footer, FooterComponent);
},
// run on every route change:
view: function(vnode){
return m('div', vnode.children);
}
};
m.route(content, '/', {
// using RouteResolver
'/': {
render: function(){
return m(Layout, m(HomePage));
},
onmatch: function(){
// this will be called on route change, so update your mounted components as needed
HeaderComponent.title = "Home Page";
}
},
'/about': {
render: function(){
return m(Layout, m(AboutPage));
},
onmatch: function(){
HeaderComponent.title = "About Page";
}
}
});
m.route is only used for <div id="content">, while all the other separate components (header, sidebar, footer) are instantiated using m.mount. I've wrapped the router with a Layout component that's used for all the routes, as this allows me to init and mount the separate components that will remain when routes change and not be affected by the main router. The router had to be modified to use RouteResolver to allow for more control and flexbility.
Notes:
Only a single m.route allowed per application, but multiple m.mount's allowed
When the same component is assigned multiple routes (in this case, Layout), the subtree will NOT be deleted and rebuilt from ground up -- it will only be diffed and updated (source). This way, we can use Layout component's oninit lifecycle hook to mount our other separate components, because oninit will only be called once.
We must use a RouteResolver for the routes in m.route, which gives us more control over how the routes should be rendered and we also get hooks like onmatch, which fires BEFORE the route is initialized -- this is the perfect place to update our mounted components as needed!