Skip to content

Components, mixins, patterns and sample code for mithril (lhorie/mithril.js)

License

Notifications You must be signed in to change notification settings

eddyystop/mithril-components

Repository files navigation

Components, mixins, patterns and code for [mithril] (https://github.com/lhorie/mithril.js).

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] (https://github.com/component/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) }})
  • run m.request in background - Do not wait for completion to trigger an update of the view. MithrilJS/mithril.js#62
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

Code

First page loading

License

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

About

Components, mixins, patterns and sample code for mithril (lhorie/mithril.js)

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published