Migrate to mithril 1.x

content/content.js

@@ -29,11 +29,22 @@ chrome.extension.onMessage.addListener((req, sender, sendResponse) => {
   }
 })
 
+var oncreate = {
+  markdown: () => {
+    document.body.scrollTop = parseInt(localStorage.getItem('scrolltop'))
+  },
+  html: () => {
+    document.body.scrollTop = parseInt(localStorage.getItem('scrolltop'))
+    setTimeout(() => Prism.highlightAll(), 20)
+  }
+}
+
 function mount () {
   $('pre').style.display = 'none'
+  var md = $('pre').innerText
 
   m.mount($('body'), {
-    controller: function () {
+    oninit: () => {
       ;((done) => {
         if (document.charset === 'UTF-8') {
           done()
@@ -46,7 +57,7 @@ function mount () {
           }
         })
       })((data) => {
-        state.markdown = data || $('pre').innerText
+        state.markdown = data || md
 
         chrome.extension.sendMessage({
           message: 'markdown',
@@ -56,27 +67,13 @@ function mount () {
           m.redraw()
         })
       })
-
-      return {
-        markdown: (element, initialized, context) => {
-          if (!initialized) {
-            document.body.scrollTop = parseInt(localStorage.getItem('scrolltop'))
-          }
-        },
-        html: (element, initialized, context) => {
-          if (!initialized) {
-            document.body.scrollTop = parseInt(localStorage.getItem('scrolltop'))
-            setTimeout(() => Prism.highlightAll(), 20)
-          }
-        }
-      }
     },
-    view: (ctrl) => {
+    view: () => {
       var dom = []
 
       if (state.raw) {
         updateStyles()
-        dom.push(m('pre#markdown', {config: ctrl.markdown}, state.markdown))
+        dom.push(m('pre#markdown', {oncreate: oncreate.markdown}, state.markdown))
       }
       if (state.theme && !state.raw) {
         updateStyles()
@@ -84,7 +81,7 @@ function mount () {
           {href: state.getURL()}))
       }
       if (state.html && !state.raw) {
-        dom.push(m('#html', {config: ctrl.html}, m.trust(state.html)))
+        dom.push(m('#html', {oncreate: oncreate.html}, m.trust(state.html)))
       }
 
       return (dom.length ? dom : m('div'))

content/options.js

@@ -1,53 +1,58 @@
 
-m.mount(document.querySelector('body'), {
-  controller: function () {
-    var ctrl = {
-      origins: []
-    }
-    ctrl.add = () => {
-      chrome.permissions.request({
-        origins: [document.querySelector('input').value]
-      }, (granted) => {
-        if (granted) {
-          ctrl.all()
-          document.querySelector('input').value = ''
-        }
-      })
-    }
-    ctrl.remove = (origin) => () => {
-      chrome.permissions.remove({
-        origins: [origin]
-      }, (removed) => {
-        if (removed) {
-          var index = ctrl.origins.indexOf(origin)
-          ctrl.origins.splice(index, 1)
-          m.redraw()
-        }
-      })
-    }
-    ctrl.all = () => {
-      chrome.permissions.getAll((res) => {
-        ctrl.origins = res.origins
+var state = {
+  origins: []
+}
+
+var events = {
+  add: () => {
+    chrome.permissions.request({
+      origins: [document.querySelector('input').value]
+    }, (granted) => {
+      if (granted) {
+        all()
+        document.querySelector('input').value = ''
+      }
+    })
+  },
+
+  remove: (origin) => () => {
+    chrome.permissions.remove({
+      origins: [origin]
+    }, (removed) => {
+      if (removed) {
+        var index = state.origins.indexOf(origin)
+        state.origins.splice(index, 1)
         m.redraw()
-      })
-    }
-    ctrl.all()
-    return ctrl
+      }
+    })
+  }
+}
+
+function all () {
+  chrome.permissions.getAll((res) => {
+    state.origins = res.origins
+    m.redraw()
+  })
+}
+
+m.mount(document.querySelector('body'), {
+  oninit: () => {
+    all()
   },
-  view: (ctrl) =>
+  view: () =>
     m('div', [
       m('h1', 'Permissions'),
       m('p', 'Read and change your data on:'),
-      m('table', ctrl.origins.map((origin) =>
+      m('table', state.origins.map((origin) =>
         m('tr', [
           m('td', origin),
-          m('td', m('button', {onclick: ctrl.remove(origin)}, 'Remove'))
+          m('td', m('button', {onclick: events.remove(origin)}, 'Remove'))
         ])
       )),
       m('form', [
         m('label', 'Origin'),
         m('input[placeholder="https://raw.githubusercontent.com"]'),
-        m('button[type=button]', {onclick: ctrl.add}, 'Add')
+        m('button[type=button]', {onclick: events.add}, 'Add')
       ])
     ])
 })

content/popup.js

@@ -1,78 +1,76 @@
 
-m.mount(document.querySelector('body'), {
-  controller: function () {
-    var state = {
-      options: [],
-      themes: [],
-      theme: '',
-      raw: false
-    }
-
-    function init (res) {
-      state.options = res.options
-      state.theme = res.theme
+var state = {
+  options: [],
+  themes: [],
+  theme: '',
+  raw: false
+}
 
-      state.themes = chrome.runtime.getManifest().web_accessible_resources
-        .filter((file) => (file.indexOf('/themes/') === 0))
-        .map((file) => (file.replace(/\/themes\/(.*)\.css/, '$1')))
+var events = {
+  changeOptions: (e) => {
+    state.options[e.target.name] = !state.options[e.target.name]
+    chrome.extension.sendMessage({
+      message: 'options',
+      options: state.options
+    }, (res) => {})
+  },
 
-      state.raw = res.raw
-      m.endComputation()
-    }
+  changeTheme: (e) => {
+    state.theme = state.themes[e.target.selectedIndex]
+    chrome.extension.sendMessage({
+      message: 'theme',
+      theme: state.theme
+    }, (res) => {})
+  },
 
-    // init
-    m.startComputation()
-    chrome.extension.sendMessage({message: 'settings'}, init)
+  viewRaw: () => {
+    state.raw = !state.raw
+    chrome.extension.sendMessage({
+      message: 'raw',
+      raw: state.raw,
+      theme: state.theme
+    }, (res) => {})
+    return false
+  },
 
-    return {
-      state: state,
-      changeOptions: (e) => {
-        state.options[e.target.name] = !state.options[e.target.name]
-        chrome.extension.sendMessage({
-          message: 'options',
-          options: state.options
-        }, (res) => {})
-      },
-      changeTheme: (e) => {
-        state.theme = state.themes[e.target.selectedIndex]
-        chrome.extension.sendMessage({
-          message: 'theme',
-          theme: state.theme
-        }, (res) => {})
-      },
-      viewRaw: () => {
-        state.raw = !state.raw
-        chrome.extension.sendMessage({
-          message: 'raw',
-          raw: state.raw,
-          theme: state.theme
-        }, (res) => {})
-        return false
-      },
-      setDefaults: () => {
-        chrome.extension.sendMessage({
-          message: 'defaults'
-        }, (res) => {
-          m.startComputation()
-          chrome.extension.sendMessage({message: 'settings'}, init)
-        })
-        return false
-      },
-      advancedOptions: () => {
-        chrome.extension.sendMessage({message: 'advanced'})
-        return false
-      }
-    }
+  setDefaults: () => {
+    chrome.extension.sendMessage({
+      message: 'defaults'
+    }, (res) => {
+      chrome.extension.sendMessage({message: 'settings'}, init)
+    })
+    return false
   },
-  view: (ctrl) => {
-    var state = ctrl.state
 
-    return m('#options', [
-      m('a[href=""]', {onclick: ctrl.viewRaw}, (state.raw ? 'Html' : 'Markdown')),
-      m('a[href=""]', {onclick: ctrl.setDefaults}, 'Defaults'),
+  advancedOptions: () => {
+    chrome.extension.sendMessage({message: 'advanced'})
+    return false
+  }
+}
+
+function init (res) {
+  state.options = res.options
+  state.theme = res.theme
+
+  state.themes = chrome.runtime.getManifest().web_accessible_resources
+    .filter((file) => (file.indexOf('/themes/') === 0))
+    .map((file) => (file.replace(/\/themes\/(.*)\.css/, '$1')))
+
+  state.raw = res.raw
+  m.redraw()
+}
+
+m.mount(document.querySelector('body'), {
+  oninit: () => {
+    chrome.extension.sendMessage({message: 'settings'}, init)
+  },
+  view: () =>
+    m('#options', [
+      m('a[href=""]', {onclick: events.viewRaw}, (state.raw ? 'Html' : 'Markdown')),
+      m('a[href=""]', {onclick: events.setDefaults}, 'Defaults'),
 
       m('h4', 'Theme'),
-      m('select', {onchange: ctrl.changeTheme}, state.themes.map((theme) =>
+      m('select', {onchange: events.changeTheme}, state.themes.map((theme) =>
         m('option', {selected: state.theme === theme}, theme)
       )),
 
@@ -83,14 +81,13 @@ m.mount(document.querySelector('body'), {
             m('input[type="checkbox"]', {
               name: key,
               checked: state.options[key],
-              onchange: ctrl.changeOptions
+              onchange: events.changeOptions
             }),
             ' ' + key
           )
         )
       )),
 
-      m('a[href=""]', {onclick: ctrl.advancedOptions}, 'Advanced Options')
+      m('a[href=""]', {onclick: events.advancedOptions}, 'Advanced Options')
     ])
-  }
 })