barneycarroll/Refresher.js

## app.js
import {m} from './deps.js'

import Refresher from './Refresher.js'

const model = window.model = {}

m.mount(document.body, {
  view: v => [
    m('#Config',
      m(Refresher, refresh =>
        m('input[type=file]', {
          onchange: e => {
            const {target: {files: [source]}} = e

                if(!source) {}
            else if(source.type != 'text/xml'){
              alert(badFile)

              refresh()
            }
            else {
              const reader = Object.assign(new FileReader()

              reader.onload = () => {
                model.source = (new DOMParser()).parseFromString(
                  reader.result,
                  'application/xml',
                )

                alert('Success!')
              }

              reader.onerror = () => {
                alert(badFile)
              }

              reader.readAsText(source)
            }
          },
        }),
      ),
    ),
  ],
})

## deps.js
export const m = window.m
export const O = window.O

## index.html
<!doctype html>
<html>
  <head>
    <meta charset=utf-8>
    <title>
      Charfinder
    </title>

    <link rel=stylesheet src=./styles.css/>
  </head>
  <body>
    <script src=//unpkg.com/mithril></script>
    <script src=//unpkg.com/patchinko/immutable.js></script>
    <script type=module src=./deps.js></script>
    <script type=module src=./app.js></script>
  </body>
</html>

## Refresher.js
import {m} from './deps.js'

import viewOf from './viewOf.js'

// View component exposing a single function:
// Once invoked, the function causes the subtree to be reinitialised
export default () => {
  let timestamp

  const refresh = () => {
    timestamp = Date.now()
  }

  return {
    view: v => [
      m.fragment({
        key: timestamp,
      }, [
        viewOf(v)(refresh),
      ]),
    ],
  }
}

## viewOf.js
export default v => (
    typeof v.attrs.view == 'function'
  ?
    v.attrs.view
  :
    typeof v.children[0] == 'function'
  ?
    v.children[0]
  :
    typeof v.children[0].children == 'function'
  ?
    v.children[0].children
  :
    () => v.children
)
	import {m} from './deps.js'

	import Refresher from './Refresher.js'

	const model = window.model = {}

	m.mount(document.body, {
	view: v => [
	m('#Config',
	m(Refresher, refresh =>
	m('input[type=file]', {
	onchange: e => {
	const {target: {files: [source]}} = e

	if(!source) {}
	else if(source.type != 'text/xml'){
	alert(badFile)

	refresh()
	}
	else {
	const reader = Object.assign(new FileReader()

	reader.onload = () => {
	model.source = (new DOMParser()).parseFromString(
	reader.result,
	'application/xml',
	)

	alert('Success!')
	}

	reader.onerror = () => {
	alert(badFile)
	}

	reader.readAsText(source)
	}
	},
	}),
	),
	),
	],
	})
	<!doctype html>
	<html>
	<head>
	<meta charset=utf-8>
	<title>
	Charfinder
	</title>

	<link rel=stylesheet src=./styles.css/>
	</head>
	<body>
	<script src=//unpkg.com/mithril></script>
	<script src=//unpkg.com/patchinko/immutable.js></script>
	<script type=module src=./deps.js></script>
	<script type=module src=./app.js></script>
	</body>
	</html>
	import {m} from './deps.js'

	import viewOf from './viewOf.js'

	// View component exposing a single function:
	// Once invoked, the function causes the subtree to be reinitialised
	export default () => {
	let timestamp

	const refresh = () => {
	timestamp = Date.now()
	}

	return {
	view: v => [
	m.fragment({
	key: timestamp,
	}, [
	viewOf(v)(refresh),
	]),
	],
	}
	}
	export default v => (
	typeof v.attrs.view == 'function'
	?
	v.attrs.view
	:
	typeof v.children[0] == 'function'
	?
	v.children[0]
	:
	typeof v.children[0].children == 'function'
	?
	v.children[0].children
	:
	() => v.children
	)