JSFiddle

  • Component signatures

    No-Library (pure JS), HTML, CSS, Babel + JSX

    const notIn = ( el, callback ) =>
    	event => {
      	if( el.contains( event.target ) )
        	callback()
      }
    
    const popup = {
    	controller( options ){  
      	this.setup = ( el, init ) => {
        	if ...
  • Enter & exit animations for Mithril components

    Demo of component exit animations in Mithril using https://github.com/barneycarroll/mithril.exitable.js/

    // Two exitable components, with different exit animations
    const block = {
      border  : '1px solid',
      margin  : '1em',
      padding : '1em'
    }
    
    const components = [
    	{
      	controller(){
        	this ...
  • Mithril exitables #3 is the latest revision

    Demo of component exit animations in Mithril using https://github.com/barneycarroll/mithril.exitable.js/

    // Two exitable components, with different exit animations
    const components = [
    	{
      	controller(){
        	this.exit = el =>
          	Velocity( el, 'fadeOut' )
        },
        
        view : () => 
          m( 'div', {
          	style ...
  • Mithril app architecture (non-blocking XHR) #5 is the latest revision

    No-Library (pure JS), HTML, CSS, JavaScript

    const getStories = () =>
      m.request({method: 'GET', url: 'https://hacker-news.firebaseio.com/v0/topstories.json', background: true})
        .then( m.redraw )
    
    const ...
  • Mithril app architecture

    No-Library (pure JS), HTML, CSS, JavaScript

    const getStories = () =>
      m.request({method: 'GET', url: 'https://hacker-news.firebaseio.com/v0/topstories.json'})
    
    const getStory = id =>
      m.request({method ...
  • End result of an asynchronous redraw with multiple strategy invocations between start and end

    MithrilJS 0.2.0, HTML, CSS, Babel + JSX

    m.mount( document.body, {
    	view : ctrl => [
    		m( 'label',
    			m( 'input[type=radio][name=strategy]', {
    				onclick : e => {
    					m.redraw.strategy( 'none ...
  • End result of an asynchronous redraw with multiple strategy invocations between start and end #1 is the latest revision

    MithrilJS 0.2.0, HTML, CSS, Babel + JSX

    m.mount( document.body, {
    	view : () =>
    		m( 'form', {
    			config : ( el, init ) =>
    				alert( 
    					'redrawn with: ' +
    					( init ? 'diff' : 'all' )
    				),
    			onsubmit : e => {
    				e.preventDefault ...
  • Is it generally safe to invoke `then( m.redraw )`?

    MithrilJS 0.2.0, HTML, CSS, Babel + JSX

    m.mount( document.body, {
    	view : ctrl =>
      	m( 'div', {
        	config : () =>
          	ctrl.draws = ( ctrl.draws || 0 ) + 1
        },
          m( 'h1', 'Silently forced redraws ...
  • class-based DOMVM with arrow view

    No-Library (pure JS), HTML, CSS, Babel + JSX

    domvm.autoRedraw = 1;
    
    class Demo {
    	constructor(){
        this.pages = [
        	{title: "Page 1", url: "#"},
          {title: "Page 2", url: "#"},
          {title: "Page 3", url ...
  • class-based DOMVM

    No-Library (pure JS), HTML, CSS, Babel + JSX

    domvm.autoRedraw = 1;
    
    class Demo {
    	constructor(){
        this.pages = [
        	{title: "Page 1", url: "#"},
          {title: "Page 2", url: "#"},
          {title: "Page 3", url ...