Mithril JS + Quasar CSS? Here is the proof.

This is my 3rd write up on dev.to site. This article shows proof-of-concept joining Mithril JS and Quasar CSS.

Quasar CSS

Quasar is an excellent framework for web and mobile apps. It consists of two parts: JS (depends on VueJS) and CSS.
CSS part of Quasar defines large number of classes (css rules) and practically covers everything we need to write nice and user-friendly apps.

Mithril JS

Mithril is another JS framework for building web and mobile apps.
As mentioned on it's site:

Mithril.js is a modern client-side JavaScript framework for building Single Page Applications. It's small (< 10kb gzip), fast and provides routing and XHR utilities out of the box.

Mithril's components, definition

As with other frameworks we can define components. Combining Mithril JS code (component) with Quasar CSS we are able to use them together.

For example:

• qslider

// mithril component qslider
var qslider = {
  view: function (vnode) {
    return m("input[type=range]", {oninput: vnode.attrs.oninput, min: vnode.attrs.min, max: vnode.attrs.max, step: vnode.attrs.step, value: vnode.attrs.value})
  }
};

• qbtn

// mithril component qbtn
var qbtn = {
    view: function(vnode) {
        return m("button", {class: "q-btn q-btn-item non-selectable no-outline q-btn--standard q-btn--rectangle q-btn--actionable q-focusable q-hoverable q-btn--no-uppercase btn-roll q-btn__content text-center items-center q-anchor--skip justify-center row q-focus-helper " + vnode.attrs.class, onclick: vnode.attrs.onclick, disabled: vnode.attrs.disabled}, vnode.attrs.title)
    }
};

As you can see we define components with Quasar's CSS classes and we can even pass attributes.

A few notes:
Pay attention to class attribute...

{class: "class1 class2 class3 " + vnode.attrs.class}

... values end with space; this way we can append another classes via vnode.attrs.class

Function called on click event is passed as another attribute

onclick: vnode.attrs.onclick

Using those attributes we can modify and define behaviour of components.

Mithril's components, use

An app written with Mithril JS is a view function which returns virtual DOM. Uses special Mithril's m() function.
We can use our new components as they were normal HTML tags.

m(qslider, {oninput: function(e){count2 = e.target.value}, min: -20, max: 20, step: step, value: count2})

m(qbtn, {onclick: function(){count1 = 0}, disabled: count1 == 0, class: "full-width bg-primary text-white", title: "reset value 1"})

Real example

As I said before, this is proof-of-concept only. I have written an small demonstration of this two components, here is a very small code at my replit.

Improvements?

There is a fully functional solution (link above) but... maybe I'm complicated and awkward so your comments are welcome!