Mitts
Helpful tools to quickly add server side rendering and dynamically imported components into a Mithril application.
Plugins
There are 2 plugins that are provided for ensuring a proper management of loaded component modules, and bundles on the server.
Webpack
// webpack.config.js; plugins: filename: "./build/mitts.json" ;
Babel
// server.jsglobal; // required to ensure mithril can be used on the server ; // adapt as required, the options provided assume your server to be a project root dir and your client src is a project root dir `src` ignore: /\/build\// presets: "@babel/preset-env" targets: node: "current" plugins: "babel-plugin-module-resolver" root: "../" alias: "@": "./src" "@babel/syntax-dynamic-import" "babel-plugin-dynamic-import-node" // ... "mitts/babel" ; // ... declare server below
Server Side Rendering
Loader
Builds atop the mithril-node-render library and provides a Loader
interface which can be adapted to run with your specific Node.JS server as a routing middleware.
An example express middleware is provided by default
// server/index.js;; // retrieve your clientside mithril entrypoint; // set the target output dir of your static buildconst buildDir = path; // path to the entrypoint html templateconst html = `/app.html`; // path to the module manifest provided by mitts pluginconst manifest = `/mitts.json`; // [Optional] handle sessions however you need for usersconst createSession = {}; // express serverconst app = ; // create a loader for expressconst mitts = ; // register the middlewareapp;app;
But handling for your own server type can be added easily by implementing an adapter and creating a new Loader object providing your server adapter.
// server/index.js;; const adapter = request: req response: res; const mitts = adapter // same options as above MittsLoader; const server = http; // ...
Dynamic Component Loading
Loadable
Implementation credit and big thanks to the wonderful React based library react-loadable for providing a quality solution to dynamic import and code splitting/loading. The documentation they provide will be mostly correct for this mithril adapatation.
This adapatation aims to provide a nice experience for loading mithril components dynamically using import()
. There is a provided Loadable
interface which handles loading in a component with proper lifecycle management.
;; const Loading = { const error retry pastDelay = vnodeattrs; if propserror return ; else if pastDelay return ; else return null; }; const LoadableWidget = ; m;
Examples
For a working sample you can reference the latest version of the mithril starter app I have been maintaining over here mithril-redux-starter
WIP
This is highly experimental and unfinished. Everything mostly works, but there are no tests or guarantees of any kind at this time. The documentation is also lacking. If there are bugs, suggestions or improvements please feel free to open an issue and send a pull request.