From c8aeb3d26306c4e114fa4deaa143e438de019c0f Mon Sep 17 00:00:00 2001
From: Todd Kennedy <todd@selfassembled.org>
Date: Wed, 29 Jun 2016 10:34:46 -0700
Subject: [PATCH] Extract html into separate module

---
 README.md                                  | 31 +++++++++++++---------
 examples/http/views/main.js                |  4 +--
 examples/mailbox/elements/email-list.js    |  6 ++---
 examples/mailbox/elements/email.js         |  6 ++---
 examples/mailbox/elements/empty-mailbox.js |  4 +--
 examples/mailbox/elements/mailbox.js       | 12 ++++-----
 examples/mailbox/elements/nav.js           |  6 ++---
 examples/mailbox/elements/pathname.js      |  4 +--
 examples/mailbox/views/email.js            |  4 +--
 examples/mailbox/views/empty.js            |  4 +--
 examples/mailbox/views/mailbox.js          |  4 +--
 examples/server-rendering/views/main.js    |  4 +--
 examples/sse/client.js                     |  3 ++-
 examples/sse/views/main.js                 |  4 +--
 examples/title/client.js                   |  3 ++-
 html.js                                    |  1 +
 index.js                                   |  1 -
 tests/browser/basic.js                     |  3 ++-
 tests/server/index.js                      |  9 ++++---
 19 files changed, 61 insertions(+), 52 deletions(-)
 create mode 100644 html.js

diff --git a/README.md b/README.md
index ca4bec29..66c55e8f 100644
--- a/README.md
+++ b/README.md
@@ -117,6 +117,7 @@ Let's create an input box that changes the content of a textbox in real time.
 First we import `choo` and create a new instance:
 ```js
 const choo = require('choo')
+const html = require('choo/html')
 const app = choo()
 ```
 
@@ -135,7 +136,7 @@ Then we create a new view. It has an `h1` tag which displays the current title,
 and an `<input>` field which sends the current value of the text box on every
 input:
 ```js
-const mainView = (params, state, send) => choo.view`
+const mainView = (params, state, send) => html`
   <main>
     <h1>${state.title}</h1>
     <input
@@ -165,6 +166,7 @@ document.body.appendChild(tree)
 And all together now:
 ```js
 const choo = require('choo')
+const html = require('choo/html')
 const app = choo()
 
 app.model({
@@ -174,7 +176,7 @@ app.model({
   }
 })
 
-const mainView = (params, state, send) => choo.view`
+const mainView = (params, state, send) => html`
   <main>
     <h1>${state.title}</h1>
     <input
@@ -337,7 +339,7 @@ Views are also passed the `send` function, which they can use to dispatch action
 
 ```javascript
 const view = (params, state, send) => {
-  return choo.view`
+  return html`
     <div>
       <h1>Total todos: ${state.todos.length}</h1>
       <button onclick=${(e) => send('add', { payload: {title: 'demo'})}>Add</button>
@@ -477,10 +479,11 @@ links they comprise most of what can be done on web pages.
 ```js
 const choo = require('choo')
 const http = require('choo/http')
+const html = require('choo/html')
 const app = choo()
 
 function view (params, state, send) {
-  return choo.view`
+  return html`
     <form onsubmit=${onSubmit}>
       <fieldset>
         <label>username</label>
@@ -520,7 +523,7 @@ app.start()
 If you want a form element to be selected when it's loaded, add the
 [`autofocus`][html-input] property.
 ```js
-const view = choo.view`
+const view = html`
   <form>
     <input type="text" autofocus>
   </form>
@@ -534,7 +537,7 @@ is clicked, the click event is caught, and the value of `href` is passed into
 the router causing a state change. If you want to disable this behavior, set
 `app.start({ href: false })`.
 ```js
-const nav = choo.view`
+const nav = html`
   <a href="/">home</a>
   <a href="/first-link">first link</a>
   <a href="/second-link">second link</a>
@@ -573,10 +576,11 @@ In order to make our `choo` app call `app.start()` in the browser and be
 `require()`-able in Node, we check if [`module.parent`][module-parent] exists:
 ```js
 const choo = require('choo')
+const html = require('choo/html')
 const app = choo()
 
 app.router((route) => [
-  route('/', (params, state, send) => choo.view`
+  route('/', (params, state, send) => html`
     <h1>${state.message}</h1>
   `)
 ])
@@ -602,10 +606,11 @@ dehydrated DOM nodes to make them dynamic, rather than a new DOM tree and
 attaching it to the DOM.
 ```js
 const choo = require('choo')
+const html = require('choo/html')
 const app = choo()
 
 app.router((route) => [
-  route('/', (params, state, send) => choo.view`
+  route('/', (params, state, send) => html`
     <h1 id="app-root">${state.message}</h1>
   `)
 ])
@@ -641,11 +646,6 @@ arguments:
   a signature of `(action, state, send)` where `send` is a reference to
   `app.send()`
 
-### choo.view\`html\`
-Tagged template string HTML builder. See
-[`yo-yo`](https://github.com/maxogden/yo-yo) for full documentation. Views
-should be passed to `app.router()`
-
 ### app.router(params, state, send)
 Creates a new router. See
 [`sheet-router`](https://github.com/yoshuawuyts/sheet-router) for full
@@ -676,6 +676,11 @@ following values:
   changes (eg `localhost/#posts/123`). Enabling this option automatically
   disables `opts.history` and `opts.href`.
 
+### choo/html\`html\`
+Tagged template string HTML builder. See
+[`yo-yo`](https://github.com/maxogden/yo-yo) for full documentation. Views
+should be passed to `app.router()`
+
 ## Errors
 ### Could not find DOM node (#id) to update
 This means that a re-render of the DOM was triggered before the first render
diff --git a/examples/http/views/main.js b/examples/http/views/main.js
index 4d0d4358..683d3aab 100644
--- a/examples/http/views/main.js
+++ b/examples/http/views/main.js
@@ -1,9 +1,9 @@
-const choo = require('../../../')
+const html = require('../../../html')
 
 module.exports = function (params, state, send) {
   const error = state.app.error[0]
   const title = state.api.title
-  return choo.view`
+  return html`
     <section>
       <h1>${title}</h1>
       <h2>Latest error: ${error}</h2>
diff --git a/examples/mailbox/elements/email-list.js b/examples/mailbox/elements/email-list.js
index 4a03b5e0..e964108f 100644
--- a/examples/mailbox/elements/email-list.js
+++ b/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">
diff --git a/examples/mailbox/elements/email.js b/examples/mailbox/elements/email.js
index 04d9815b..ec2624b4 100644
--- a/examples/mailbox/elements/email.js
+++ b/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>
diff --git a/examples/mailbox/elements/empty-mailbox.js b/examples/mailbox/elements/empty-mailbox.js
index 4b8aa7f7..395685d1 100644
--- a/examples/mailbox/elements/empty-mailbox.js
+++ b/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>
diff --git a/examples/mailbox/elements/mailbox.js b/examples/mailbox/elements/mailbox.js
index 23a8f0ed..8accf8db 100644
--- a/examples/mailbox/elements/mailbox.js
+++ b/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>
diff --git a/examples/mailbox/elements/nav.js b/examples/mailbox/elements/nav.js
index 5c93ceca..a85b3d3a 100644
--- a/examples/mailbox/elements/nav.js
+++ b/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)}
diff --git a/examples/mailbox/elements/pathname.js b/examples/mailbox/elements/pathname.js
index 70069004..4d7220a0 100644
--- a/examples/mailbox/elements/pathname.js
+++ b/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>
diff --git a/examples/mailbox/views/email.js b/examples/mailbox/views/email.js
index 662daeba..0c009dc5 100644
--- a/examples/mailbox/views/email.js
+++ b/examples/mailbox/views/email.js
@@ -1,4 +1,4 @@
-const choo = require('../../../')
+const html = require('../../../html')
 
 const emailList = require('../elements/email-list')
 const pathname = require('../elements/pathname')
@@ -6,7 +6,7 @@ const email = require('../elements/email')
 const nav = require('../elements/nav')
 
 module.exports = function (params, state, send) {
-  return choo.view`
+  return html`
     <main class="mw5 mw7-ns center cf">
       ${pathname(params, state, send)}
       ${nav(params, state, send)}
diff --git a/examples/mailbox/views/empty.js b/examples/mailbox/views/empty.js
index 88118a85..d0190751 100644
--- a/examples/mailbox/views/empty.js
+++ b/examples/mailbox/views/empty.js
@@ -1,11 +1,11 @@
-const choo = require('../../../')
+const html = require('../../../html')
 
 const empty = require('../elements/empty-mailbox')
 const pathname = require('../elements/pathname')
 const nav = require('../elements/nav')
 
 module.exports = function (params, state, send) {
-  return choo.view`
+  return html`
     <main class="mw5 mw7-ns center cf">
       ${pathname(params, state, send)}
       ${nav(params, state, send)}
diff --git a/examples/mailbox/views/mailbox.js b/examples/mailbox/views/mailbox.js
index 24c76be7..5e84d964 100644
--- a/examples/mailbox/views/mailbox.js
+++ b/examples/mailbox/views/mailbox.js
@@ -1,11 +1,11 @@
-const choo = require('../../../')
+const html = require('../../../html')
 
 const emailList = require('../elements/email-list')
 const pathname = require('../elements/pathname')
 const nav = require('../elements/nav')
 
 module.exports = function (params, state, send) {
-  return choo.view`
+  return html`
     <main class="mw5 mw7-ns center cf">
       ${pathname(params, state, send)}
       ${nav(params, state, send)}
diff --git a/examples/server-rendering/views/main.js b/examples/server-rendering/views/main.js
index 353abccb..2dc8b225 100644
--- a/examples/server-rendering/views/main.js
+++ b/examples/server-rendering/views/main.js
@@ -1,5 +1,5 @@
 const assert = require('assert')
-const choo = require('../../../')
+const html = require('../../../html')
 
 module.exports = function (params, state, send) {
   const serverMessage = state.message.server
@@ -8,7 +8,7 @@ module.exports = function (params, state, send) {
   assert.equal(typeof serverMessage, 'string', 'server should be a string')
   assert.equal(typeof clientMessage, 'string', 'client should be a string')
 
-  return choo.view`
+  return html`
     <section id="app-root">
       <h1>server message: ${serverMessage}</h1>
       <h1>client message: ${clientMessage}</h1>
diff --git a/examples/sse/client.js b/examples/sse/client.js
index a3864134..e014f4fd 100644
--- a/examples/sse/client.js
+++ b/examples/sse/client.js
@@ -1,4 +1,5 @@
 const choo = require('../../')
+const html = require('../../html')
 
 const app = choo()
 app.model(createModel())
@@ -10,7 +11,7 @@ const tree = app.start()
 document.body.appendChild(tree)
 
 function mainView (params, state, send) {
-  return choo.view`
+  return html`
     <div>${state.logger.msg}</div>
   `
 }
diff --git a/examples/sse/views/main.js b/examples/sse/views/main.js
index 4d0d4358..683d3aab 100644
--- a/examples/sse/views/main.js
+++ b/examples/sse/views/main.js
@@ -1,9 +1,9 @@
-const choo = require('../../../')
+const html = require('../../../html')
 
 module.exports = function (params, state, send) {
   const error = state.app.error[0]
   const title = state.api.title
-  return choo.view`
+  return html`
     <section>
       <h1>${title}</h1>
       <h2>Latest error: ${error}</h2>
diff --git a/examples/title/client.js b/examples/title/client.js
index 7b6a3480..af806e27 100644
--- a/examples/title/client.js
+++ b/examples/title/client.js
@@ -1,4 +1,5 @@
 const choo = require('../../')
+const html = require('../../html')
 
 const app = choo()
 app.model({
@@ -15,7 +16,7 @@ app.model({
 })
 
 const mainView = (params, state, send) => {
-  return choo.view`
+  return html`
     <main class="app">
       <h1>${state.input.title}</h1>
       <label>Set the title</label>
diff --git a/html.js b/html.js
new file mode 100644
index 00000000..17336bc8
--- /dev/null
+++ b/html.js
@@ -0,0 +1 @@
+module.exports = require('yo-yo')
diff --git a/index.js b/index.js
index 9c87df81..92c4cd37 100644
--- a/index.js
+++ b/index.js
@@ -10,7 +10,6 @@ const assert = require('assert')
 const xtend = require('xtend')
 const yo = require('yo-yo')
 
-choo.view = yo
 module.exports = choo
 
 // framework for creating sturdy web applications
diff --git a/tests/browser/basic.js b/tests/browser/basic.js
index 4d3ecf1c..f5397fb3 100644
--- a/tests/browser/basic.js
+++ b/tests/browser/basic.js
@@ -1,5 +1,6 @@
 const tape = require('tape')
 const choo = require('../../')
+const view = require('../../html')
 
 tape('should render on the client', function (t) {
   t.test('state should not be mutable', function (t) {
@@ -50,7 +51,7 @@ tape('should render on the client', function (t) {
         ++loop
         asserts[loop] && asserts[loop](state.test)
         setTimeout(() => triggers[loop] && triggers[loop](send), 5)
-        return choo.view`<div><span class="test">${state.foo}:${state.beep}</span></div>`
+        return view`<div><span class="test">${state.foo}:${state.beep}</span></div>`
       })
     ])
 
diff --git a/tests/server/index.js b/tests/server/index.js
index ac3e049c..29d8f7f9 100644
--- a/tests/server/index.js
+++ b/tests/server/index.js
@@ -1,5 +1,6 @@
 const tape = require('tape')
 const choo = require('../../')
+const view = require('../../html')
 
 tape('should render on the server', function (t) {
   t.test('should render a static response', function (t) {
@@ -7,7 +8,7 @@ tape('should render on the server', function (t) {
 
     const app = choo()
     app.router((route) => [
-      route('/', () => choo.view`<h1>Hello Tokyo!</h1>`)
+      route('/', () => view`<h1>Hello Tokyo!</h1>`)
     ])
 
     const html = app.toString('/')
@@ -21,7 +22,7 @@ tape('should render on the server', function (t) {
     const app = choo()
     app.router((route) => [
       route('/', function (params, state) {
-        return choo.view`<h1>meow meow ${state.message}</h1>`
+        return view`<h1>meow meow ${state.message}</h1>`
       })
     ])
 
@@ -37,7 +38,7 @@ tape('should render on the server', function (t) {
     app.model({ state: { bin: 'baz', beep: 'boop' } })
     app.router((route) => [
       route('/', function (params, state) {
-        return choo.view`<h1>${state.foo} ${state.bin} ${state.beep}</h1>`
+        return view`<h1>${state.foo} ${state.bin} ${state.beep}</h1>`
       })
     ])
 
@@ -57,7 +58,7 @@ tape('should render on the server', function (t) {
     })
     app.router((route) => [
       route('/', function (params, state) {
-        return choo.view`
+        return view`
           <h1>${state.hello.foo} ${state.hello.bin} ${state.hello.beep}</h1>
         `
       })