diff --git a/README.md b/README.md index 82f8ecd..ab21013 100644 --- a/README.md +++ b/README.md @@ -52,6 +52,8 @@ const tree = app.start() document.body.appendChild(tree) ``` +## Perform HTTP requests + ## Concepts - __state:__ a single object that contains all application state, should only ever be modified by `reducers` @@ -69,7 +71,7 @@ Create a new model. Models modify data and perform IO. Obj takes the following arguments: - __state:__ object. Key value store of initial values - __reducers:__ object. Syncronous functions that modify state. Each function - has a signature of `(action, state)` + has a signature of `(action, state)` - __effects:__ object. Asyncronous functions that perform IO. Each function has a signature of `(action, state, send)` where `send` is a reference to `app.send()` diff --git a/examples/http/client.js b/examples/http/client.js new file mode 100644 index 0000000..32c32cf --- /dev/null +++ b/examples/http/client.js @@ -0,0 +1,21 @@ +const choo = require('../../') +const sf = require('sheetify') + +sf('css-wipe/dest/bundle') +sf('tachyons') + +const mainView = require('./views/main') +const navElement = require('./elements/nav') + +const app = choo() + +app.model('inbox', require('./models/inbox')) +app.model('spam', require('./models/spam')) +app.model('sent', require('./models/sent')) + +app.router((route) => [ + route('/', mainView(navElement)) +]) + +const tree = app.start() +document.body.appendChild(tree) diff --git a/examples/http/elements/nav.js b/examples/http/elements/nav.js new file mode 100644 index 0000000..14ba03e --- /dev/null +++ b/examples/http/elements/nav.js @@ -0,0 +1,14 @@ +const choo = require('../../../') + +module.exports = function (params, state, send) { + return choo.view` + + ` +} diff --git a/examples/http/models/inbox.js b/examples/http/models/inbox.js new file mode 100644 index 0000000..8de6ffb --- /dev/null +++ b/examples/http/models/inbox.js @@ -0,0 +1,22 @@ +module.exports = { + state: { + messages: [ + { + id: 1, + subject: 'Welcome to Ember', + from: 'tomster@emberjs.com', + to: 'user@example.com', + date: new Date(), + body: 'Welcome to Ember. We hope you enjoy your stay' + }, { + id: 2, + subject: 'Great Ember Resources', + from: 'tomster@emberjs.com', + to: 'user@example.com', + date: new Date(), + body: 'Have you seen embercasts.com? How about emberaddons.com?' + } + ] + }, + reducers: { } +} diff --git a/examples/http/models/sent.js b/examples/http/models/sent.js new file mode 100644 index 0000000..e69de29 diff --git a/examples/http/models/spam.js b/examples/http/models/spam.js new file mode 100644 index 0000000..451e74d --- /dev/null +++ b/examples/http/models/spam.js @@ -0,0 +1,15 @@ +module.exports = { + state: { + messages: [ + { + id: 3, + subject: 'You have one the lottery!!!111ONEONE', + from: '419@thereallotteryhonest.com', + to: 'user@example.com', + date: new Date(), + body: 'You have ONE the lottery! You only have to send us a small amount of monies to claim your prize' + } + ] + }, + reducers: { } +} diff --git a/examples/http/package.json b/examples/http/package.json new file mode 100644 index 0000000..e7bc1c6 --- /dev/null +++ b/examples/http/package.json @@ -0,0 +1,20 @@ +{ + "name": "http", + "version": "1.0.0", + "private": "true", + "main": "client.js", + "scripts": { + "start": "node server.js" + }, + "browserify": { + "transform": [ + "sheetify/transform" + ] + }, + "author": "Yoshua Wuyts ", + "license": "ISC", + "devDependencies": { + "css-wipe": "^4.2.1", + "pathname-match": "^1.1.3" + } +} diff --git a/examples/http/server.js b/examples/http/server.js new file mode 100644 index 0000000..231b770 --- /dev/null +++ b/examples/http/server.js @@ -0,0 +1,27 @@ +const serverRouter = require('server-router') +const browserify = require('browserify') +const bankai = require('bankai') +const http = require('http') + +const PORT = 8080 + +const server = http.createServer(createRouter()) +server.listen(PORT, () => console.log(`listening on port ${PORT}`)) + +function createRouter () { + const router = serverRouter('/404') + + const html = bankai.html({ css: false }) + router.on('/', (req, res) => html(req, res).pipe(res)) + + const js = bankai.js(browserify, require.resolve('./client.js')) + router.on('/bundle.js', (req, res) => js(req, res).pipe(res)) + + router.on('/hi', (req, res) => res.end('{ "message": "hi back!" }')) + router.on('/404', (req, res) => { + res.statusCode = 404 + res.end('{ "message": "the server is confused" }') + }) + + return router +} diff --git a/examples/http/views/main.js b/examples/http/views/main.js new file mode 100644 index 0000000..7335529 --- /dev/null +++ b/examples/http/views/main.js @@ -0,0 +1,23 @@ +const pathname = require('pathname-match') +const choo = require('../../../') + +module.exports = function (nav) { + return function (params, state, send) { + return choo.view` +
+ URL: ${pathname(state.location) || '/'} + ${nav(params, state, send)} +
+ + + + + + + +
DataSubjectFromTo
+
+
+ ` + } +} diff --git a/package.json b/package.json index ff314d5..746cdea 100644 --- a/package.json +++ b/package.json @@ -26,9 +26,15 @@ "yo-yo": "^1.2.0" }, "devDependencies": { + "bankai": "^2.0.2", + "browserify": "^13.0.1", "dependency-check": "^2.5.1", + "insert-css": "^0.2.0", "istanbul": "^0.4.3", + "server-router": "^2.1.0", + "sheetify": "^5.0.0", "standard": "^6.0.8", + "tachyons": "^4.0.0-beta.19", "tape": "^4.5.1" } } diff --git a/site/index.js b/site/index.js new file mode 100644 index 0000000..e69de29