Extract html into separate module (#103)

examples/mailbox/elements/email-list.js

@@ -1,10 +1,10 @@
 const dateformat = require('dateformat')
-const choo = require('../../../')
+const html = require('../../../html')
 
 module.exports = function (params, state, send) {
   const mailbox = params.mailbox
   const messages = state[mailbox].messages
-  return choo.view`
+  return html`
     <div>
       <div class="db cf w-100">
         <div class="fl mb3 w-25 mt0 b">Date</th>
@@ -20,7 +20,7 @@ module.exports = function (params, state, send) {
 }
 
 function createMessage (message, mailbox) {
-  return choo.view`
+  return html`
     <div class="db cf w-100">
       <a href="${'/' + mailbox + '/' + message.id}">
         <div class="fl mb3 w-25 f6 link">

examples/mailbox/elements/email.js

@@ -1,4 +1,4 @@
-const choo = require('../../../')
+const html = require('../../../html')
 
 module.exports = function (params, state, send) {
   const mailbox = params.mailbox
@@ -8,7 +8,7 @@ module.exports = function (params, state, send) {
     return String(msg.id) === message
   })[0]
 
-  return choo.view`
+  return html`
     <div>
       ${email ? createEmail(email) : 'error: no email found'}
     </div
@@ -16,7 +16,7 @@ module.exports = function (params, state, send) {
 }
 
 function createEmail (message) {
-  return choo.view`
+  return html`
     <div class="mail">
       <dl>
         <dt>From</dt>

examples/mailbox/elements/empty-mailbox.js

@@ -1,7 +1,7 @@
-const choo = require('../../../')
+const html = require('../../../html')
 
 module.exports = function (params, state, send) {
-  return choo.view`
+  return html`
     <section>
       <p>Select a mailbox</p>
     </section>

examples/mailbox/elements/mailbox.js

@@ -1,5 +1,5 @@
 const dateformat = require('dateformat')
-const choo = require('../../../')
+const html = require('../../../html')
 
 module.exports = function () {
   return function (params, state, send) {
@@ -12,7 +12,7 @@ module.exports = function () {
         return String(msg.id) === message
       })[0]
 
-      return choo.view`
+      return html`
         <section class="fl mt4 w-80 db">
           <div>
             ${createHeader()}
@@ -26,7 +26,7 @@ module.exports = function () {
         </section>
       `
     } else {
-      return choo.view`
+      return html`
         <section class="fl mt4 w-80 db">
           ${createHeader()}
           ${messages.map(function (msg) {
@@ -39,7 +39,7 @@ module.exports = function () {
 }
 
 function createHeader () {
-  return choo.view`
+  return html`
     <div class="db cf w-100">
       <div class="fl mb3 w-25 mt0 b">Date</th>
       <div class="fl mb3 w-25 mt0 b">Subject</th>
@@ -50,7 +50,7 @@ function createHeader () {
 }
 
 function createMessage (message, mailbox) {
-  return choo.view`
+  return html`
     <div class="db cf w-100">
       <a href="${'/' + mailbox + '/' + message.id}">
         <div class="fl mb3 w-25 f6 link">
@@ -65,7 +65,7 @@ function createMessage (message, mailbox) {
 }
 
 function createEmail (message) {
-  return choo.view`
+  return html`
     <div class="mail">
       <dl>
         <dt>From</dt>

examples/mailbox/elements/nav.js

@@ -1,9 +1,9 @@
-const choo = require('../../../')
+const html = require('../../../html')
 
 const mailboxes = [ 'inbox', 'spam', 'sent' ]
 
 module.exports = function (params, state, send) {
-  return choo.view`
+  return html`
     <aside class="fl mt4 w-20 db">
       <ul>
         <li>
@@ -19,7 +19,7 @@ module.exports = function (params, state, send) {
 }
 
 function createLi (mailbox, messages) {
-  return choo.view`
+  return html`
     <li class="mt4 f6">
       <a href="/${mailbox}">
         ${mailbox.charAt(0).toUpperCase() + mailbox.slice(1)}

examples/mailbox/elements/pathname.js

@@ -1,9 +1,9 @@
 const pathname = require('pathname-match')
-const choo = require('../../../')
+const html = require('../../../html')
 
 module.exports = function (params, state, send) {
   const location = state.app.location
-  return choo.view`
+  return html`
     <span class="fl mt4 w-100 f4 b">
       URL: ${pathname(location) || '/'}
     </span>