Created
October 4, 2016 14:57
-
-
Save YerkoPalma/994a217bb571e1be54601f6d38337788 to your computer and use it in GitHub Desktop.
Choo title example with chooify
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
{ | |
"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" | |
} | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* 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() | |
} | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
If you really want to keep everything in one file, what's stopping you from writing
title.choo
astitle.js
?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.