diff --git a/README.md b/README.md index e3fb64d..ac92891 100644 --- a/README.md +++ b/README.md @@ -118,6 +118,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() ``` @@ -136,7 +137,7 @@ Then we create a new view. It has an `h1` tag which displays the current title, and an `` 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`

${state.title}

choo.view` +const mainView = (params, state, send) => html`

${state.title}

{ - return choo.view` + return html`

Total todos: ${state.todos.length}

@@ -478,10 +480,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`
@@ -521,7 +524,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` @@ -535,7 +538,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` home first link second link @@ -574,10 +577,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`

${state.message}

`) ]) @@ -603,10 +607,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`

${state.message}

`) ]) @@ -642,11 +647,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 @@ -677,6 +677,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 4d0d435..683d3aa 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`

${title}

Latest error: ${error}

diff --git a/examples/mailbox/elements/email-list.js b/examples/mailbox/elements/email-list.js index 4a03b5e..e964108 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`
Date @@ -20,7 +20,7 @@ module.exports = function (params, state, send) { } function createMessage (message, mailbox) { - return choo.view` + return html`