Rewrite for Mithril 1.0

[ArthurClemens]

Rewrite work is in progress in the rewrite-universal branch. Besides a pure conversion I am also taking the opportunity to make a few architectural improvements: monorepo, easier theming, lots of tests.

See Migration for some breaking changes.

Trying out

git clone https://github.com/ArthurClemens/polythene.git
cd polythene
git checkout rewrite-universal
yarn
yarn run build
cd packages/test-render-mithril
yarn run dev

Components

For each component I expect to have:

• Mithril 1 ready code
• Updated theme code
• Updated documentation
• Tests
• Fiddles to see working code

Checklist of v.0.2 components

• [x] Button - needs Fiddle example
• [X] Card -- needs Fiddle example
• [x] Checkbox - needs Fiddle example
• [ ] Common functions (these are relocated to core, css and utilities)
  • [x] easing
  • [x] events
  • [x] mixin
  • [x] multiple
  • [x] no-tap-delay
  • [x] object.assign: use a Babel plugin
  • [x] scroll-to
  • [x] styler
  • [x] timer
  • [x] transition
  • [ ] validation-helper
  • [x] webfontloader
• [x] Dialog - needs Fiddle example
• [x] FAB - needs Fiddle example
• [x] Font Roboto
• [ ] Header Panel
• [x] Icon - needs Fiddle example
• [x] Icon button - needs Fiddle example
• [x] Layout: moved to css-classes
• [x] List - needs Fiddle example
• [x] List tile - needs Fiddle example
• [x] Menu
• [x] Notification
• [x] Notification Snackbar
• [x] Radio button - needs Fiddle example
• [x] Ripple - needs Fiddle example
• [x] Search - needs Fiddle example
• [x] Selection control
• [x] Shadow - needs Fiddle example
• [x] Slider - needs Fiddle example
• [x] Spinner - needs Fiddle examples (3 spinner types)
• [x] SVG - needs Fiddle example
• [x] Tabs - needs example in stacked toolbar when ready; needs Fiddle example
• [x] Textfield - needs Fiddle example
• [x] Theme
• [x] Toolbar - needs stacked/extended toolbar

New/derived components

• [x] Raised button - needs Fiddle example
• [x] Material Design (default theme)
• [ ] Extended toolbar

New packages

The idea is to better group functionalities that were previously in Common.

• [x] core
• [x] css
• [x] css-classes
• [x] utilities

[jsguy]

I was just wondering if you've considered using a declarative bindings approach for the animations:

http://jsguy.github.io/mithril.animate/

The main benefit is that you can bind an animation to a property on the view-model, which is quite expressive and clean, for example:

m.e("div", { opacity: ctrl.opacity }, "I can fade away");

Then if you change the opacity value on the controller, the element will be animated to that value smoothly over 400ms, using easing as the transition - in the background, it's simply CSS3 animations.

Disclaimer: it's my library and you won't hurt my feelings by saying no - it is just an idea :)

[ArthurClemens]

@jsguy For the current components I need more features, such as callbacks/Promise returns when the element is removed. Perhaps it will be useful for other components not yet in Polythene, such as a side drawer or a collapse toggle. Those will have to wait until the rewrite.

[novabyte]

@ArthurClemens This project is awesome. We're just about to rewrite the dashboard within our distributed game server to use Mythril. Would love to use Polythene; how could I use this rewrite branch with our project?

[ArthurClemens]

@novabyte Good to hear! I am still figuring some things out with the Lerna setup. When do you need it?

[jsguy]

@ArthurClemens Regarding the callback/promises, that makes sense - I find that having a good amount of callbacks (or really subscribe-able events) usually makes a library more flexible, and tends to involve less "hacking" when extending features, so that sounds like a good way forward. Mithril also took that approach in their 1.0 rewrite, with the lifecycle events - I've found that very useful so far.

[novabyte]

@ArthurClemens I can't seem to pull in the project on this rewrite branch into a basic Node project. I get errors about no main file. I'm not very experienced with monolithic Node repo projects. Is it possible to import the code from your wip branch?

[ArthurClemens]

A simple method is used on https://jsfiddle.net/ArthurClemens/wL25zxpt/ It loads polythene.js from https://rawgit.com/ArthurClemens/polythene/rewrite/packages/polythene/dist/polythene.js Not a typical app setup, because it does not import components, but probably the simplest way to get started.

[dead-claudia]

@ArthurClemens Just a reminder you might also want to confirm all your rewrite links point to MithrilJS/mithril.js rather than lhorie/mithril.js.

[ArthurClemens]

Polythene 1.0 is now at 1.0.0-rc.3, available on master branch and npm.