From 5f858cfdf5c93ee24b31b018be77e9d425568dbf Mon Sep 17 00:00:00 2001 From: traducer Date: Sun, 10 Jul 2016 15:54:11 +0000 Subject: [PATCH 1/2] added stopwatch example added requestAnimationFrame polyfill moved raf logic into a subscription separated logic into multiple files, all state lives in a global namespaced model, reset no longer sends multiple actions only one --- examples/stopwatch/client.js | 15 +++++++++++ examples/stopwatch/models/stopwatch.js | 34 ++++++++++++++++++++++++ examples/stopwatch/package.json | 20 ++++++++++++++ examples/stopwatch/utilities/format.js | 15 +++++++++++ examples/stopwatch/views/main.js | 36 ++++++++++++++++++++++++++ 5 files changed, 120 insertions(+) create mode 100644 examples/stopwatch/client.js create mode 100644 examples/stopwatch/models/stopwatch.js create mode 100644 examples/stopwatch/package.json create mode 100644 examples/stopwatch/utilities/format.js create mode 100644 examples/stopwatch/views/main.js diff --git a/examples/stopwatch/client.js b/examples/stopwatch/client.js new file mode 100644 index 0000000..abf3d1f --- /dev/null +++ b/examples/stopwatch/client.js @@ -0,0 +1,15 @@ +const choo = require('../../') + +const stopwatch = require('./models/stopwatch') +const mainView = require('./views/main') + +const app = choo() + +app.model(stopwatch) + +app.router((route) => [ + route('/', mainView) +]) + +const tree = app.start() +document.body.appendChild(tree) diff --git a/examples/stopwatch/models/stopwatch.js b/examples/stopwatch/models/stopwatch.js new file mode 100644 index 0000000..9823df8 --- /dev/null +++ b/examples/stopwatch/models/stopwatch.js @@ -0,0 +1,34 @@ +const xtend = require('xtend') +const raf = require('raf') + +module.exports = { + state: { + elapsed: 0, + startTime: 0, + start: false, + laps: [] + }, + reducers: { + start: (data, state) => xtend(state, { start: true, startTime: Date.now() - state.elapsed }), + stop: (data, state) => xtend(state, { start: false }), + update: (data, state) => xtend(state, { elapsed: data }), + reset: (data, state) => xtend(state, { startTime: Date.now(), elapsed: 0, laps: [] }), + add: (data, state) => xtend(state, { laps: state.laps.concat(data) }) + }, + effects: { + now: (data, state, send, done) => { + if (state.start) { + let elapsed = data - state.startTime + send('update', elapsed, done) + } + } + }, + subscriptions: [ + (send, done) => { + raf(function loop () { + send('now', Date.now(), done) + raf(loop) + }) + } + ] +} diff --git a/examples/stopwatch/package.json b/examples/stopwatch/package.json new file mode 100644 index 0000000..91c6818 --- /dev/null +++ b/examples/stopwatch/package.json @@ -0,0 +1,20 @@ +{ + "name": "stopwatch", + "version": "1.0.0", + "description": "", + "main": "client.js", + "scripts": { + "start": "budo client.js -p 8080 -- -t es2020" + }, + "keywords": [], + "author": "traducer ", + "license": "ISC", + "dependencies": { + "budo": "^8.3.0", + "raf": "^3.2.0", + "xtend": "^4.0.1" + }, + "devDependencies": { + "es2020": "^1.1.7" + } +} diff --git a/examples/stopwatch/utilities/format.js b/examples/stopwatch/utilities/format.js new file mode 100644 index 0000000..f251c6a --- /dev/null +++ b/examples/stopwatch/utilities/format.js @@ -0,0 +1,15 @@ +function formatMinutes (minutes) { + return `${minutes >= 10 ? minutes : (minutes < 10) ? '0' + minutes : '00'}` +} + +function formatSeconds (seconds) { + return `${seconds < 10 ? '0' + seconds : seconds}` +} + +module.exports = function format (elapsed) { + const minutes = formatMinutes(Math.floor((elapsed / 1000) / 60)) + const seconds = formatSeconds(Math.floor((elapsed / 1000) % 60)) + const ms = formatSeconds(Math.floor((elapsed % 1000) / 10)) + + return `${minutes}:${seconds}.${ms}` +} diff --git a/examples/stopwatch/views/main.js b/examples/stopwatch/views/main.js new file mode 100644 index 0000000..d7734e5 --- /dev/null +++ b/examples/stopwatch/views/main.js @@ -0,0 +1,36 @@ +const html = require('../../../html') +const format = require('../utilities/format') + +function toggle (state, send) { + if (state.start) { + send('stop') + } else { + send('start') + } +} + +module.exports = (state, prev, send) => { + const start = state.start + const elapsed = state.elapsed + + return html` +
+

stopwatch

+

${format(elapsed)}

+ + + +
    + ${state.laps.map(lap => html`
  1. ${lap}
    2. `)} +
+
+ ` +} From c412b9604a7a62b275b80d386187856f165fa390 Mon Sep 17 00:00:00 2001 From: traducer Date: Wed, 13 Jul 2016 23:54:29 +0000 Subject: [PATCH 2/2] xtend not needed, removed --- examples/stopwatch/models/stopwatch.js | 11 +++++------ examples/stopwatch/package.json | 3 +-- 2 files changed, 6 insertions(+), 8 deletions(-) diff --git a/examples/stopwatch/models/stopwatch.js b/examples/stopwatch/models/stopwatch.js index 9823df8..cb54071 100644 --- a/examples/stopwatch/models/stopwatch.js +++ b/examples/stopwatch/models/stopwatch.js @@ -1,4 +1,3 @@ -const xtend = require('xtend') const raf = require('raf') module.exports = { @@ -9,11 +8,11 @@ module.exports = { laps: [] }, reducers: { - start: (data, state) => xtend(state, { start: true, startTime: Date.now() - state.elapsed }), - stop: (data, state) => xtend(state, { start: false }), - update: (data, state) => xtend(state, { elapsed: data }), - reset: (data, state) => xtend(state, { startTime: Date.now(), elapsed: 0, laps: [] }), - add: (data, state) => xtend(state, { laps: state.laps.concat(data) }) + start: (data, state) => ({ start: true, startTime: Date.now() - state.elapsed }), + stop: (data, state) => ({ start: false }), + update: (data, state) => ({ elapsed: data }), + reset: (data, state) => ({ startTime: Date.now(), elapsed: 0, laps: [] }), + add: (data, state) => ({ laps: state.laps.concat(data) }) }, effects: { now: (data, state, send, done) => { diff --git a/examples/stopwatch/package.json b/examples/stopwatch/package.json index 91c6818..8011f0e 100644 --- a/examples/stopwatch/package.json +++ b/examples/stopwatch/package.json @@ -11,8 +11,7 @@ "license": "ISC", "dependencies": { "budo": "^8.3.0", - "raf": "^3.2.0", - "xtend": "^4.0.1" + "raf": "^3.2.0" }, "devDependencies": { "es2020": "^1.1.7"