Commit 0d411a17e9d1db713a8a19aafa6b9f72aa3df943
migrate to choo v5
jekrb committed on 3/11/2017, 8:23:14 PMParent: b92fe929130f0e06be1cce8bb003f55c8a425681
Files changed
| index.js | changed |
| package.json | changed |
| server.js | changed |
| model.js | added |
| routes.js | added |
| views/article.js | added |
| views/main.js | added |
| views/nav.js | added |
| index.js | ||
|---|---|---|
| @@ -1,108 +1,9 @@ | ||
| 1 | 1 … | var choo = require('choo') |
| 2 | -var html = require('choo/html') | |
| 3 | -var mount = require('choo/mount') | |
| 4 | -var css = require('sheetify') | |
| 5 | -var xhr = require('xhr') | |
| 6 | -var isNode = require('is-node') | |
| 7 | -var strftime = require('strftime') | |
| 8 | 2 … | |
| 9 | -css('tachyons') | |
| 10 | - | |
| 11 | 3 … | var app = choo() |
| 12 | 4 … | |
| 13 | -if (process.env.NODE_ENV !== 'production') { | |
| 14 | - const log = require('choo-log') | |
| 15 | - app.use(log()) | |
| 16 | -} | |
| 5 … | +app.use(require('./model')) | |
| 6 … | +app.router(require('./routes')) | |
| 17 | 7 … | |
| 18 | -var state = {} | |
| 19 | -if (!isNode && window.__setstate__) { | |
| 20 | - state = window.__setstate__ | |
| 21 | -} | |
| 22 | - | |
| 23 | -app.model({ | |
| 24 | - state: state, | |
| 25 | - reducers: { | |
| 26 | - setArticles: function (state, data) { | |
| 27 | - return { articles: JSON.parse(data)} | |
| 28 | - } | |
| 29 | - }, | |
| 30 | - effects: { | |
| 31 | - callArticles : function (state, data, send, done) { | |
| 32 | - xhr('api/articles', function (err, res, body) { | |
| 33 | - if (err) return console.error(err) | |
| 34 | - send('setArticles', body, done) | |
| 35 | - }) | |
| 36 | - } | |
| 37 | - }, | |
| 38 | - subscriptions: { | |
| 39 | - onload : function (send, done) { | |
| 40 | - send('callArticles', done) | |
| 41 | - } | |
| 42 | - } | |
| 43 | -}) | |
| 44 | - | |
| 45 | -app.router([ | |
| 46 | - ['/', mainView], | |
| 47 | - ['/:article', articleView] | |
| 48 | -]) | |
| 49 | - | |
| 50 | -if (!module.parent) mount('main', app.start()) | |
| 8 … | +if (!module.parent) app.mount('main') | |
| 51 | 9 … | else module.exports = app |
| 52 | - | |
| 53 | -function mainView (state, prev, send) { | |
| 54 | - return html` | |
| 55 | - <main> | |
| 56 | - ${nav(state, prev, send)} | |
| 57 | - <h1>wow</h1> | |
| 58 | - <a href='/hello-world'>aaay lmao</a> | |
| 59 | - </main> | |
| 60 | - ` | |
| 61 | -} | |
| 62 | - | |
| 63 | -function articleView (state, prev, send) { | |
| 64 | - var name = state.location.params.article | |
| 65 | - var article = state.articles[name].html | |
| 66 | - if (article) { | |
| 67 | - var placeholder = html`<div></div>` | |
| 68 | - placeholder.innerHTML = article | |
| 69 | - var content = html` | |
| 70 | - <main> | |
| 71 | - ${nav(state, prev, send, true)} | |
| 72 | - <div> | |
| 73 | - ${placeholder} | |
| 74 | - </div> | |
| 75 | - </main> | |
| 76 | - ` | |
| 77 | - return content | |
| 78 | - } | |
| 79 | -} | |
| 80 | - | |
| 81 | -function nav (state, prev, send, slashHome) { | |
| 82 | - var articles = state.articles | |
| 83 | - if (articles) { | |
| 84 | - var keys = Object.keys(articles) | |
| 85 | - var slash = slashHome | |
| 86 | - ? html`<li><a href='/'>./</a></li>` | |
| 87 | - : '' | |
| 88 | - | |
| 89 | - return html` | |
| 90 | - <ul> | |
| 91 | - ${slash} | |
| 92 | - ${keys.map(function (key) { | |
| 93 | - var article = articles[key] | |
| 94 | - var title = article.data.title | |
| 95 | - var timestamp = Date.parse(article.created) | |
| 96 | - var created = new Date(timestamp) | |
| 97 | - var date = strftime('%d %B %Y', created) | |
| 98 | - return html`<li> | |
| 99 | - <a href='/${key}'> | |
| 100 | - <strong>${title}</strong> | |
| 101 | - <span>${date}</span> | |
| 102 | - </a> | |
| 103 | - </li>` | |
| 104 | - })} | |
| 105 | - </ul> | |
| 106 | - ` | |
| 107 | - } | |
| 108 | -} | |
| package.json | ||
|---|---|---|
| @@ -10,14 +10,14 @@ | ||
| 10 | 10 … | "license": "MIT", |
| 11 | 11 … | "dependencies": { |
| 12 | 12 … | "bankai": "^5.2.1", |
| 13 | 13 … | "beldown": "^1.1.0", |
| 14 | - "choo": "^4.1.0", | |
| 14 … | + "choo": "github:yoshuawuyts/choo#v5", | |
| 15 | 15 … | "choo-log": "^3.0.1", |
| 16 | 16 … | "ecstatic": "^2.1.0", |
| 17 | 17 … | "is-node": "^1.0.2", |
| 18 | 18 … | "markdown-reader": "^1.0.1", |
| 19 | - "merry": "^4.6.0", | |
| 19 … | + "merry": "^4.7.2", | |
| 20 | 20 … | "sheetify": "^6.0.1", |
| 21 | 21 … | "strftime": "^0.10.0", |
| 22 | 22 … | "tachyons": "^4.6.2", |
| 23 | 23 … | "xhr": "^2.3.3" |
| server.js | ||
|---|---|---|
| @@ -64,15 +64,15 @@ | ||
| 64 | 64 … | function articlePath (req, res, ctx, done) { |
| 65 | 65 … | var pathname = url.parse(req.url).pathname |
| 66 | 66 … | if (contents[pathname.slice(1)]) { |
| 67 | 67 … | var state = { articles: contents } |
| 68 | - | |
| 68 … | + | |
| 69 | 69 … | // set needed state for client |
| 70 | 70 … | var nanostate = {} |
| 71 | 71 … | nanostate.articles = {} |
| 72 | 72 … | nanostate.articles[pathname.slice(1)] = contents[pathname.slice(1)] |
| 73 | 73 … | nanostate = JSON.stringify(nanostate) |
| 74 | - | |
| 74 … | + | |
| 75 | 75 … | var setState = `<script>window.__setstate__ = ${nanostate}</script>` |
| 76 | 76 … | var article = index.toString(pathname, state) |
| 77 | 77 … | var b = bankai(client, { |
| 78 | 78 … | html: { |
| @@ -84,21 +84,20 @@ | ||
| 84 | 84 … | ['envify'] |
| 85 | 85 … | ] |
| 86 | 86 … | } |
| 87 | 87 … | }) |
| 88 | - | |
| 89 | - done(null, b.html(req, res)) | |
| 88 … | + | |
| 89 … | + done(null, b.html(req, res)) | |
| 90 | 90 … | } |
| 91 | 91 … | } |
| 92 | 92 … | |
| 93 | 93 … | function serveCSS (req, res, ctx, done) { |
| 94 | - done(null, assets.css(req, res)) | |
| 94 … | + done(null, assets.css(req, res)) | |
| 95 | 95 … | } |
| 96 | 96 … | |
| 97 | 97 … | function serveJS (req, res, ctx, done) { |
| 98 | 98 … | done(null, assets.js(req, res)) |
| 99 | 99 … | } |
| 100 | 100 … | |
| 101 | 101 … | function serveAPI (req, res, ctx, done) { |
| 102 | - done(null, contents) | |
| 103 | - } | |
| 104 | - | |
| 102 … | + done(null, contents) | |
| 103 … | +} | |
| model.js | ||
|---|---|---|
| @@ -1,0 +1,31 @@ | ||
| 1 … | +var xhr = require('xhr') | |
| 2 … | +var isNode = require('is-node') | |
| 3 … | + | |
| 4 … | +function model (state, bus) { | |
| 5 … | + if (!isNode && window.__setstate__) { | |
| 6 … | + state = window.__setstate__ | |
| 7 … | + } | |
| 8 … | + | |
| 9 … | + bus.on('setArticles', function (data) { | |
| 10 … | + state.articles = JSON.parse(data) | |
| 11 … | + bus.emit('render') | |
| 12 … | + }) | |
| 13 … | + | |
| 14 … | + bus.on('getArticles', function () { | |
| 15 … | + xhr('api/articles', function (err, res, body) { | |
| 16 … | + if (err) return console.error(err) | |
| 17 … | + bus.emit('setArticles', body) | |
| 18 … | + }) | |
| 19 … | + }) | |
| 20 … | + | |
| 21 … | + bus.on('DOMContentLoaded', function (data) { | |
| 22 … | + bus.emit('getArticles') | |
| 23 … | + }) | |
| 24 … | + | |
| 25 … | + // call render on back button click | |
| 26 … | + bus.on('pushState', function () { | |
| 27 … | + bus.emit('render') | |
| 28 … | + }) | |
| 29 … | +} | |
| 30 … | + | |
| 31 … | +module.exports = model | |
| routes.js | ||
|---|---|---|
| @@ -1,0 +1,6 @@ | ||
| 1 … | +var routes = [ | |
| 2 … | + ['/', require('./views/main')], | |
| 3 … | + ['/:article', require('./views/article')] | |
| 4 … | +] | |
| 5 … | + | |
| 6 … | +module.exports = routes | |
| views/article.js | ||
|---|---|---|
| @@ -1,0 +1,24 @@ | ||
| 1 … | +var html = require('choo/html') | |
| 2 … | +var nav = require('./nav') | |
| 3 … | + | |
| 4 … | +function articleView (state, emit) { | |
| 5 … | + var articles = state.articles | |
| 6 … | + var name = state.params.article | |
| 7 … | + var article = articles[name].html | |
| 8 … | + if (article) { | |
| 9 … | + var placeholder = html`<div></div>` | |
| 10 … | + placeholder.innerHTML = article | |
| 11 … | + var content = html` | |
| 12 … | + <main> | |
| 13 … | + ${nav(state, emit, true)} | |
| 14 … | + <div> | |
| 15 … | + ${placeholder} | |
| 16 … | + </div> | |
| 17 … | + </main> | |
| 18 … | + ` | |
| 19 … | + | |
| 20 … | + return content | |
| 21 … | + } | |
| 22 … | +} | |
| 23 … | + | |
| 24 … | +module.exports = articleView | |
| views/main.js | ||
|---|---|---|
| @@ -1,0 +1,14 @@ | ||
| 1 … | +var html = require('choo/html') | |
| 2 … | +var nav = require('./nav') | |
| 3 … | + | |
| 4 … | +function mainView (state, emit) { | |
| 5 … | + return html` | |
| 6 … | + <main> | |
| 7 … | + ${nav(state, emit)} | |
| 8 … | + <h1>wow</h1> | |
| 9 … | + <a href='/hello-world'>aaay lmao</a> | |
| 10 … | + </main> | |
| 11 … | + ` | |
| 12 … | +} | |
| 13 … | + | |
| 14 … | +module.exports = mainView | |
| views/nav.js | ||
|---|---|---|
| @@ -1,0 +1,31 @@ | ||
| 1 … | +var html = require('choo/html') | |
| 2 … | +var strftime = require('strftime') | |
| 3 … | + | |
| 4 … | +function nav (state, emit, slashHome) { | |
| 5 … | + var articles = state.articles | |
| 6 … | + var keys = Object.keys(articles) | |
| 7 … | + var slash = slashHome | |
| 8 … | + ? html`<li><a href='/'>./</a></li>` | |
| 9 … | + : '' | |
| 10 … | + | |
| 11 … | + return html` | |
| 12 … | + <ul> | |
| 13 … | + ${slash} | |
| 14 … | + ${keys.map(function (key) { | |
| 15 … | + var article = articles[key] | |
| 16 … | + var title = article.data.title | |
| 17 … | + var timestamp = Date.parse(article.created) | |
| 18 … | + var created = new Date(timestamp) | |
| 19 … | + var date = strftime('%d %B %Y', created) | |
| 20 … | + return html`<li> | |
| 21 … | + <a href='/${key}'> | |
| 22 … | + <strong>${title}</strong> | |
| 23 … | + <span>${date}</span> | |
| 24 … | + </a> | |
| 25 … | + </li>` | |
| 26 … | + })} | |
| 27 … | + </ul> | |
| 28 … | + ` | |
| 29 … | +} | |
| 30 … | + | |
| 31 … | +module.exports = nav | |
Built with git-ssb-web