Mithril
#JavaScript #Framework
概要
軽量・高速なJavaScriptフレームワーク
Component
Pojo Component
code:javascript
const PojoComponent = {
view(vnode) {
return m('div', vnode.attrs.text);
}
};
Closure Component
Pojo Componentを返却する関数。
code:javascript
const ClosureComponent = arg => ({
view(vnode) {
return m('div', arg);
}
});
Routing
参考: https://mithril.js.org/route.html
m.route(root, defaultRoute, routes)
root - マウント対象のDOMノード。
routes - パスを文字列、コンポーネントまたはRouteResolverを値として保持するオブジェクト。
m.route.link
a要素を生成する際に、oncreateに設定しておくと、リンクがクリックされた際に、hrefで指定したルートを切り替えることができる。
code:javascript
m('a', { oncreate: m.route.link, href: '/path/to/route' });
hrefが固定値でない場合は、onupdateにも設定する必要がある。
code:javascript
m('a', {
href: someRoute,
oncreate: m.route.link,
onupdate: m.route.link
});
RouteResolver
onmatchまたはrenderメソッドのどちらかを定義したオブジェクト(両方持っていても良い)
routeResolver.onmatch(args, requestedPath)
描画対象のComponentまたはComponentに解決されるPromiseを返却する。
HTTPクライアント
参考: https://mithril.js.org/request.html
m.request([url, ]options)
options.method - HTTPメソッドを大文字で指定する("GET", "POST"等。デフォルトは"GET")
options.url - リクエストの送信先URL
options.data - GETリクエストの際はクエリ文字列、それ以外の際はリクエストボディとして扱う。
options.headers - リクエストヘッダ。
options.background - false(デフォルト)が指定された場合、リクエスト完了後に再描画を行う。
ユニットテスト
ospec
mithril-query
dom-testing-library-with-anything
ライブラリ
polythene
Material Design component library for Mithril and React
mithril-hooks
Use hooks in Mithril
mithril-node-render
Use mithril views to render server side
Construct-UI
A Mithril.js UI library
チュートリアル
how-to-mithril
awesome-mithril