Choo title example with chooify

client.js

const choo = require('choo')
const component = require('./title.choo')

const app = choo()
app.model(component.model)

app.router((route) => [
  route('/', component.view)
])

const tree = app.start()
document.body.appendChild(tree)

package.json

{
  "name": "title-chooify",
  "version": "1.0.0",
  "description": "",
  "main": "client.js",
  "scripts": {
    "start": "budo client.js --host 0.0.0.0 -p 8080 -- -t chooify"
  },
  "keywords": [],
  "author": "Yoshua Wuyts <i@yoshuawuyts.com>",
  "license": "ISC",
  "dependencies": {
    "bel": "^4.5.0",
    "browserify": "^13.1.0",
    "budo": "^8.3.0",
    "choo": "^3.3.0",
    "chooify": "^0.1.3"
  }
}

title.choo

/* choo-view */
`<main class="app">
  <h1>${state.input.title}</h1>
  <label>Set the title</label>
  <input
    type="text"
    placeholder=${state.input.title}
    oninput=${(e) => send('input:update', { payload: e.target.value })}>
</main>`

/* choo-model */

{
  namespace: 'input',
  state: {
    title: 'my demo app'
  },
  reducers: {
    update: (data, state) => ({ title: data.payload })
  },
  effects: {
    update: (data, state, send, done) => {
      document.title = data.payload
      done()
    }
  }
}

If you really want to keep everything in one file, what's stopping you from writing title.choo as title.js?

const html = require('choo/html')

exports.view = (state, prev, send) => html`<main class="app">
  <h1>${state.input.title}</h1>
  <label>Set the title</label>
  <input
    type="text"
    placeholder=${state.input.title}
    oninput=${(e) => send('input:update', { title: e.target.value })}>
</main>`

exports.model = {
  namespace: 'input',
  state: {
    title: 'my demo app'
  },
  reducers: {
    updateTitle: (data, state) => data
  },
  effects: {
    update: (data, state, send, done) => {
      document.title = data.title
      send('input:updateTitle', data, done)
    }
  }
}

No parser required! If the main reason is to experiment with browserify I don't want to stop you from learning, but I think in practice chooify might be more work to maintain than it's worth.