[major] choo v4 (#352)

* location: change url on location:setLocation

- [ ] don't break hashing
- [ ] allow not changing the url

fixup! move fns around

fixup! add search string

* app.start: clean

* walk: add

* location: update arg calls

* fixup! location: update

* uri-wrap: fix thunking

* router: update to latest sheet-router (#239)

* router: update to latest sheet-router

* tests: fix for latest version

* tests: fix SSR

* tests: fix history

* tests: spruce up

* docs: update example

* examples: update

* deps: bump sheet-router

* 4.0.0-0

* chore(changelog): 4.0.0 (#211)

* feat(api:) arg order (#268)

* s/data, state/state, data/

* feat(api): swap arguments

* fix(href): fix routing (#271)

* feat(http): remove (#269)

* feat(router): enable hash routing (#273)

* deps: fix mount

* 4.0.0-1

* feat(mount): copy {script,link} tags

* 4.0.0-2

* fix(mount): forEach -> for

Lol can't use forEach

* fix(router): use state.location.href (#282)

* fix(mount): use deep node clone

* 4.0.0-3

* fix(deps): remove hash-match

* 4.0.0-4

* fix(mount): return node

* 4.0.0-5

* fix(router): check if a hash is a valid selector (#339)

* 4.0.0-6

* fix(router): pass params on newstate (#343)

* 4.0.0-7

* feat(docs): update for 4.0.0 (#320)

* feat(docs): update for 4.0.0

* docs: update router example in readme (#337)

* chore(changelog): update for v4 (#351)

examples/async-counter/client.js

@@ -8,20 +8,20 @@ app.model({
     counter: 0
   },
   reducers: {
-    increment: (data, state) => ({ counter: state.counter + 1 }),
-    decrement: (data, state) => ({ counter: state.counter - 1 })
+    increment: (state, data) => ({ counter: state.counter + 1 }),
+    decrement: (state, data) => ({ counter: state.counter - 1 })
   },
   effects: {
-    incrementAsync: function (data, state, send, done) {
+    incrementAsync: function (state, data, send, done) {
       setTimeout(() => send('increment', done), 1000)
     },
-    decrementAsync: function (data, state, send, done) {
+    decrementAsync: function (state, data, send, done) {
       setTimeout(() => send('decrement', done), 1000)
     }
   }
 })
 
-const mainView = (state, prev, send) => {
+function mainView (state, prev, send) {
   const count = state.counter
 
   return html`
@@ -36,9 +36,7 @@ const mainView = (state, prev, send) => {
   `
 }
 
-app.router((route) => [
-  route('/', mainView)
-])
+app.router([ '/', mainView ])
 
 const tree = app.start()
 document.body.appendChild(tree)

examples/async-counter/package.json

@@ -4,13 +4,13 @@
   "description": "",
   "main": "client.js",
   "scripts": {
-    "start": "budo client.js -p 8080"
+    "start": "bankai start --entry=client -p 8080"
   },
   "keywords": [],
   "author": "Juan Soto <juan@juansoto.me>",
   "license": "ISC",
   "dependencies": {
-    "budo": "^8.3.0",
+    "bankai": "^3.2.0",
     "plur": "^2.1.2"
   }
 }

examples/http/client.js

@@ -4,18 +4,19 @@ const mainView = require('./views/main')
 
 const app = choo({
   onError: function (err, state, createSend) {
+    console.trace()
     console.groupCollapsed(`Error: ${err.message}`)
     console.error(err)
     console.groupEnd()
     const send = createSend('onError: ')
     send('app:error', err)
   },
-  onAction: function (data, state, name, caller, createSend) {
+  onAction: function (state, data, name, caller, createSend) {
     console.groupCollapsed(`Action: ${caller} -> ${name}`)
     console.log(data)
     console.groupEnd()
   },
-  onStateChange: function (data, state, prev, createSend) {
+  onStateChange: function (state, data, prev, createSend) {
     console.groupCollapsed('State')
     console.log(prev)
     console.log(state)
@@ -26,9 +27,7 @@ const app = choo({
 app.model(require('./models/error'))
 app.model(require('./models/api'))
 
-app.router((route) => [
-  route('/', mainView)
-])
+app.router(['/', mainView])
 
 const tree = app.start()
 document.body.appendChild(tree)

examples/http/models/api.js

@@ -6,13 +6,13 @@ module.exports = {
     title: 'Button pushing machine 3000'
   },
   reducers: {
-    set: (data, state) => ({ 'title': data })
+    set: (state, data) => ({ 'title': data })
   },
   effects: {
-    good: function (data, state, send, done) {
+    good: function (state, data, send, done) {
       request('/good', send, done)
     },
-    bad: (data, state, send, done) => request('/bad', send, done)
+    bad: (state, data, send, done) => request('/bad', send, done)
   }
 }
 

examples/http/models/error.js

@@ -15,13 +15,13 @@ module.exports = {
     triggerTime: null
   },
   reducers: {
-    setError: function (data, state) {
+    setError: function (state, data) {
       return {
         errors: state.errors.concat(data.message),
         errorTimeDone: data.errorTimeDone
       }
     },
-    'delError': function (data, state) {
+    'delError': function (state, data) {
       state.errors.shift()
       return { errors: state.errors }
     }

examples/mailbox/client.js

@@ -1,19 +1,22 @@
-const choo = require('../../')
+const log = require('choo-log')
 const sf = require('sheetify')
 
+const choo = require('../../')
+
 sf('css-wipe/dest/bundle')
 
 const app = choo()
+app.use(log())
 
 app.model(require('./models/inbox'))
 app.model(require('./models/spam'))
 app.model(require('./models/sent'))
 
-app.router((route) => [
-  route('/', require('./views/empty')),
-  route('/:mailbox', require('./views/mailbox'), [
-    route('/:message', require('./views/email'))
-  ])
+app.router([
+  ['/', require('./views/empty')],
+  ['/:mailbox', require('./views/mailbox'), [
+    ['/:message', require('./views/email')]
+  ]]
 ])
 
 const tree = app.start()

examples/mailbox/package.json

@@ -9,6 +9,7 @@
   "author": "Yoshua Wuyts <i@yoshuawuyts.com>",
   "license": "ISC",
   "dependencies": {
+    "choo-log": "^1.4.1",
     "css-wipe": "^4.2.1",
     "dateformat": "^1.0.12",
     "pathname-match": "^1.1.3",

examples/mailbox/views/mailbox.js

@@ -7,6 +7,7 @@ const nav = require('../elements/nav')
 module.exports = function (state, prev, send) {
   return html`
     <main class="mw5 mw7-ns center cf">
+      <button onclick=${goHome}>Home</button>
       ${pathname(state, prev, send)}
       ${nav(state, prev, send)}
       <section class="fl mt4 w-80 db">
@@ -14,4 +15,8 @@ module.exports = function (state, prev, send) {
       </section>
     </main>
   `
+
+  function goHome () {
+    send('location:set', { pathname: '/' })
+  }
 }

examples/server-rendering/client.js

@@ -1,6 +1,7 @@
+const mount = require('../../mount')
 const choo = require('../../')
 
-const mainView = require('./views/main')
+const mainView = require('./view')
 
 const app = choo()
 
@@ -12,12 +13,11 @@ app.model({
   }
 })
 
-app.router((route) => [
-  route('/', mainView)
-])
+app.router(['/', mainView])
 
 if (module.parent) {
   module.exports = app
 } else {
-  app.start('#app-root')
+  const tree = app.start()
+  mount('#app-root', tree)
 }

examples/server-rendering/view.js

@@ -1,5 +1,5 @@
 const assert = require('assert')
-const html = require('../../../html')
+const html = require('../../html')
 
 module.exports = function (state, prev, send) {
   const serverMessage = state.message.server

examples/sse/client.js

@@ -3,14 +3,12 @@ const html = require('../../html')
 
 const app = choo()
 app.model(createModel())
-app.router((route) => [
-  route('/', mainView)
-])
+app.router(['/', mainView])
 
 const tree = app.start()
 document.body.appendChild(tree)
 
-function mainView (params, state, send) {
+function mainView (state, prev, send) {
   return html`
     <div>${state.logger.msg}</div>
   `
@@ -24,27 +22,27 @@ function createModel () {
       msg: ''
     },
     subscriptions: [
-      function (send) {
+      function (send, done) {
         stream.onerror = (e) => {
-          send('logger:error', { payload: JSON.stringify(e) })
+          send('logger:error', { payload: JSON.stringify(e) }, done)
         }
         stream.onmessage = (e) => {
           const msg = JSON.parse(e.data).message
-          send('logger:print', { payload: msg })
+          send('logger:print', { payload: msg }, done)
         }
       }
     ],
     reducers: {
-      'print': (data, state) => {
+      'print': (state, data) => {
         return ({ msg: state.msg + ' ' + data.payload })
       }
     },
     effects: {
-      close: (data, state, send, done) => {
+      close: (state, data, send, done) => {
         stream.close()
         done()
       },
-      error: (data, state, send, done) => {
+      error: (state, data, send, done) => {
         console.error(`error: ${data.payload}`)
         done()
       }

examples/stopwatch/client.js

@@ -7,9 +7,7 @@ const app = choo()
 
 app.model(stopwatch)
 
-app.router((route) => [
-  route('/', mainView)
-])
+app.router(['/', mainView])
 
 const tree = app.start()
 document.body.appendChild(tree)

examples/stopwatch/models/stopwatch.js

@@ -8,14 +8,14 @@ module.exports = {
     laps: []
   },
   reducers: {
-    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) })
+    start: (state, data) => ({ start: true, startTime: Date.now() - state.elapsed }),
+    stop: (state, data) => ({ start: false }),
+    update: (state, data) => ({ elapsed: data }),
+    reset: (state, data) => ({ startTime: Date.now(), elapsed: 0, laps: [] }),
+    add: (state, data) => ({ laps: state.laps.concat(data) })
   },
   effects: {
-    now: (data, state, send, done) => {
+    now: (state, data, send, done) => {
       if (state.start) {
         let elapsed = data - state.startTime
         send('update', elapsed, done)

examples/stopwatch/package.json

@@ -4,13 +4,13 @@
   "description": "",
   "main": "client.js",
   "scripts": {
-    "start": "budo client.js -p 8080 -- -t es2020"
+    "start": "bankai start --entry=client.js -p 8080"
   },
   "keywords": [],
   "author": "traducer <traducer21@gmail.com>",
   "license": "ISC",
   "dependencies": {
-    "budo": "^8.3.0",
+    "bankai": "^3.2.0",
     "raf": "^3.2.0"
   },
   "devDependencies": {

examples/title/client.js

@@ -8,10 +8,10 @@ app.model({
     title: 'my demo app'
   },
   reducers: {
-    update: (data, state) => ({ title: data.payload })
+    update: (state, data) => ({ title: data.payload })
   },
   effects: {
-    update: (data, state, send, done) => {
+    update: (state, data, send, done) => {
       document.title = data.payload
       done()
     }
@@ -31,9 +31,6 @@ const mainView = (state, prev, send) => {
   `
 }
 
-app.router((route) => [
-  route('/', mainView)
-])
-
+app.router(['/', mainView])
 const tree = app.start()
 document.body.appendChild(tree)

examples/title/package.json

@@ -4,12 +4,13 @@
   "description": "",
   "main": "client.js",
   "scripts": {
-    "start": "budo client.js -p 8080"
+    "start": "bankai start --entry=client.js -p 8080 --open"
   },
   "keywords": [],
   "author": "Yoshua Wuyts <i@yoshuawuyts.com>",
   "license": "ISC",
-  "dependencies": {
-    "budo": "^8.3.0"
+  "dependencies": {},
+  "devDependencies": {
+    "bankai": "^3.2.0"
   }
 }

examples/vanilla/index.html

@@ -1,43 +1,38 @@
 <html>
-    <head>
-        <title>Vanilla example</title>
-    </head>
-    <body>
-        <script src="../../dist/choo.min.js"></script>
-        <script src="../../dist/html.min.js"></script>
-        <script>
-            const app = choo()
+  <head>
+      <title>Vanilla example</title>
+  </head>
+  <body>
+    <script src="../../dist/choo.min.js"></script>
+    <script src="../../dist/html.min.js"></script>
+    <script>
+      const app = choo()
 
-            app.model({
-              namespace: 'counter',
-              state: {
-                  count: 0
-              },
-              reducers: {
-                increment: (data, state) => ({count: state.count + 1}),
-                decrement: (data, state) => ({count: state.count - 1})
-              }
-            })
+      app.model({
+        namespace: 'counter',
+        state: { count: 0 },
+        reducers: {
+          increment: (state, data) => ({count: state.count + 1}),
+          decrement: (state, data) => ({count: state.count - 1})
+        }
+      })
 
-            const mainView = (state, prev, send) => {
-              return html`
-                <main class="app">
-                  <h1>Counter example</h1>
-                  <div>
-                      Count: ${state.counter.count}
-                      <button onclick=${(e) => send('counter:increment')}>+</button>
-                      <button onclick=${(e) => send('counter:decrement')}>-</button>
-                  </div>
-                </main>
-              `
-            }
+      const mainView = (state, prev, send) => {
+        return html`
+          <main class="app">
+            <h1>Counter example</h1>
+            <div>
+                Count: ${state.counter.count}
+                <button onclick=${(e) => send('counter:increment')}>+</button>
+                <button onclick=${(e) => send('counter:decrement')}>-</button>
+            </div>
+          </main>
+        `
+      }
 
-            app.router((route) => [
-              route('/', mainView)
-            ])
-
-            const tree = app.start()
-            document.body.appendChild(tree)
-        </script>
-    </body>
+      app.router(['/', mainView])
+      const tree = app.start()
+      document.body.appendChild(tree)
+    </script>
+  </body>
 </html>