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 `` 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}

@@ -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`
@@ -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` @@ -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` home first link second link @@ -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`

${state.message}

`) ]) @@ -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`

${state.message}

`) ]) @@ -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`

${title}

Latest error: ${error}

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`
Date @@ -20,7 +20,7 @@ module.exports = function (params, state, send) { } function createMessage (message, mailbox) { - return choo.view` + return html`