Components, mixins, patterns and sample code for mithril (lhorie/mithril.js)
JavaScript CSS
Latest commit 8f636de Jul 10, 2014 eddyystop Adding necessities to gulp build
- dist/ is now cleaned before files are transformed
- gulp dev dependencies added to package.json

README.md

mithril-components

Components, mixins, patterns and code for mithril.

Installation

bower install git://github.com/eddyystop/mithril-components

Running examples

Many examples may be run without the server. Just run the HTML file.

Others require the node.js server. You can install it from http://nodejs.org/. Then load the this repo's dependencies with npm install.

Start the server with node app.js and point your browser to http://localhost:3000/public/FormMixin.html for example.

Components

You may extract the files you need with a build tool, or you may use the front-end packaging tool component.

UI Components

Occlusion components

Occlusion implementations helps you implement efficient components that render only what is visible on the screen. They are useful for large tables, large lists, infinite scrolling, deferring rendering of below-the-fold content, and parallax sites.

  • occlusionList - Simple list, rendering only what is visible. (readme)
  • occlusionTable - Table which scrolls vertically and horizontally. Optional header rows always displayed. Pinned columns always appear. Responsive to width changes from CSS media queries. (readme)

Mixins

Mixin ValidationMixin resides in mixins/ValidationMixins/. Docs are in the readme. A working example, if any, is located at public/ValidationMixin.html.

  • mixins/Solder.js - A simple dependency injector for mixins. Mixin extension is supported.
  • Solder-extend - Extending a mixin with new features.
  • ValidationMixin - A data validator, for one field or the entire form. Can be used to display error messages as user is entering data, e.g. onchange. Integrated with validator.js.
  • FormMixin - Adds support for forms, with or without a < form >. Example requires the server.

Patterns

Pattern seo-by-cleanup resides in patterns/seo-by-cleanup.js . A working example, if any, is located at public/seo-by-cleanup.html

Basic

  • service-error-handling - Handle web-server and app errors

Services - just throwing things inline for now

  • progress bars - How to show a progress bar.
var Thing = {
  list: function(options) {
    return m.request({method: "GET", url: "/thing", config: function(xhr) { xhr.onprogress = options.progress }})
  }
}
Thing.list({progress: function(e) { console.log("progress: ", e) }})
m.request({method: "GET", url: "/foo", background: true})
    .then(m.redraw); //force redraw
var transport = m.prop();
m.request({method: "GET", url: "/foo", config: transport}); // transport <- xhr
transport().abort();

More obscure

function requestWithXhr(options) {
  var xhr
  options.config = function(x) {xhr = x};
  var req = m.request(options);
  req.xhr = xhr;
  return req;
}
ChainedAndXhrPromise(requestWithXhr(args))
  .then(foo)
  .then(bar)
  .xhr.agawjkgahwjkg

SEO / server rendered first page

  • seo-by-noscript - Server serves SEO the first page within a noscript tag.
  • seo-by-cleanup - Remove server generated DOM so Mithril can re-render the first page.
  • One Proof of concept for Mithril itself to handle this efficiently.
  • A different Proof of concept

Code

First page loading

License

Copyright (c) 2014 John Szwaronek (johnsz9999@gmail.com). Distributed under the MIT license. See LICENSE.md for details.