[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)
This commit is contained in:
Yoshua Wuyts
+12
-9
@@ -1,7 +1,8 @@
|
||||
const test = require('tape')
|
||||
const append = require('append-child')
|
||||
const test = require('tape')
|
||||
|
||||
const choo = require('../../')
|
||||
const view = require('../../html')
|
||||
const html = require('../../html')
|
||||
|
||||
test('state is immutable', function (t) {
|
||||
t.plan(4)
|
||||
@@ -16,16 +17,16 @@ test('state is immutable', function (t) {
|
||||
state: state,
|
||||
namespace: 'test',
|
||||
reducers: {
|
||||
'no-reducer-mutate': (data, state) => {
|
||||
'no-reducer-mutate': (state, data) => {
|
||||
return {}
|
||||
},
|
||||
'mutate-on-return': (data, state) => {
|
||||
'mutate-on-return': (state, data) => {
|
||||
delete data.type
|
||||
return data
|
||||
}
|
||||
},
|
||||
effects: {
|
||||
'triggers-reducers': (data, state, send, done) => {
|
||||
'triggers-reducers': (state, data, send, done) => {
|
||||
send('test:mutate-on-return', {beep: 'barp'}, done)
|
||||
}
|
||||
}
|
||||
@@ -46,13 +47,15 @@ test('state is immutable', function (t) {
|
||||
(send) => send('test:triggers-reducers')
|
||||
]
|
||||
|
||||
app.router((route) => [
|
||||
route('/', function (state, prev, send) {
|
||||
app.router([
|
||||
['/', function (state, prev, send) {
|
||||
++loop
|
||||
asserts[loop] && asserts[loop](state.test)
|
||||
setTimeout(() => triggers[loop] && triggers[loop](send), 5)
|
||||
return view`<div><span class="test">${state.foo}:${state.beep}</span></div>`
|
||||
})
|
||||
return html`
|
||||
<div><span class="test">${state.foo}:${state.beep}</span></div>
|
||||
`
|
||||
}]
|
||||
])
|
||||
|
||||
const tree = app.start()
|
||||
|
||||
+12
-16
@@ -11,14 +11,12 @@ test('freeze (default)', function (t) {
|
||||
}
|
||||
})
|
||||
|
||||
app.router((route) => [
|
||||
route('/', function (state, prev, send) {
|
||||
state.foo = ''
|
||||
t.equal(state.foo, 'bar', 'cannot modify property')
|
||||
state.bar = 'baz'
|
||||
t.equal(state.bar, undefined, 'cannot add property')
|
||||
})
|
||||
])
|
||||
app.router(['/', function (state, prev, send) {
|
||||
state.foo = ''
|
||||
t.equal(state.foo, 'bar', 'cannot modify property')
|
||||
state.bar = 'baz'
|
||||
t.equal(state.bar, undefined, 'cannot add property')
|
||||
}])
|
||||
|
||||
app.start()
|
||||
})
|
||||
@@ -33,14 +31,12 @@ test('noFreeze', function (t) {
|
||||
}
|
||||
})
|
||||
|
||||
app.router((route) => [
|
||||
route('/', function (state, prev, send) {
|
||||
state.foo = ''
|
||||
t.equal(state.foo, '', 'can modify property')
|
||||
state.bar = 'baz'
|
||||
t.equal(state.bar, 'baz', 'can add property')
|
||||
})
|
||||
])
|
||||
app.router(['/', function (state, prev, send) {
|
||||
state.foo = ''
|
||||
t.equal(state.foo, '', 'can modify property')
|
||||
state.bar = 'baz'
|
||||
t.equal(state.bar, 'baz', 'can add property')
|
||||
}])
|
||||
|
||||
app.start()
|
||||
})
|
||||
|
||||
+13
-15
@@ -10,15 +10,15 @@ test('hooks', function (t) {
|
||||
onError: function (err) {
|
||||
t.equal(err.message, 'effect error', 'onError: receives err')
|
||||
},
|
||||
onAction: function (data, state, name, caller, createSend) {
|
||||
onAction: function (state, data, name, caller, createSend) {
|
||||
if (name === 'explodes') return
|
||||
t.deepEqual(data, {foo: 'bar'}, 'onAction: action data')
|
||||
t.equal(state.clicks, 0, 'onAction: current state: 0 clicks')
|
||||
t.equal(name, 'click', 'onAction: action name')
|
||||
t.equal(name, 'click', 'onAction: data name')
|
||||
t.equal(caller, 'view: /', 'onAction: caller name')
|
||||
t.equal(typeof createSend, 'function', 'onAction: createSend fn')
|
||||
},
|
||||
onStateChange: function (data, state, prev, createSend) {
|
||||
onStateChange: function (state, data, prev, createSend) {
|
||||
t.deepEqual(data, {foo: 'bar'}, 'onState: action data')
|
||||
t.deepEqual(state.clicks, 1, 'onState: new state: 1 clicks')
|
||||
t.deepEqual(prev.clicks, 0, 'onState: prev state: 0 clicks')
|
||||
@@ -30,26 +30,24 @@ test('hooks', function (t) {
|
||||
clicks: 0
|
||||
},
|
||||
reducers: {
|
||||
click: (data, state) => ({clicks: state.clicks + 1})
|
||||
click: (state, data) => ({clicks: state.clicks + 1})
|
||||
},
|
||||
effects: {
|
||||
explodes: (data, state, send, done) => {
|
||||
explodes: (state, data, send, done) => {
|
||||
setTimeout(() => done(new Error('effect error')), 5)
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
var sent = false
|
||||
app.router((route) => [
|
||||
route('/', function (state, prev, send) {
|
||||
if (!sent) {
|
||||
send('click', {foo: 'bar'})
|
||||
send('explodes')
|
||||
}
|
||||
sent = true
|
||||
return view`<span></span>`
|
||||
})
|
||||
])
|
||||
app.router(['/', function (state, prev, send) {
|
||||
if (!sent) {
|
||||
send('click', {foo: 'bar'})
|
||||
send('explodes')
|
||||
}
|
||||
sent = true
|
||||
return view`<span></span>`
|
||||
}])
|
||||
|
||||
const tree = app.start()
|
||||
t.on('end', append(tree))
|
||||
|
||||
@@ -1,29 +1,38 @@
|
||||
const test = require('tape')
|
||||
const onReady = require('document-ready')
|
||||
const append = require('append-child')
|
||||
const mount = require('../../mount')
|
||||
const choo = require('../../')
|
||||
const view = require('../../html')
|
||||
const html = require('../../html')
|
||||
|
||||
test('rehydration', function (t) {
|
||||
t.plan(2)
|
||||
|
||||
const app = choo()
|
||||
|
||||
app.router((route) => [
|
||||
route('/', function (state, prev, send) {
|
||||
return view`<div id="app-root" onclick=${() => send('test')}>Hello world!</span>`
|
||||
})
|
||||
])
|
||||
const node = html`
|
||||
<section id="app-root">
|
||||
<div id="app-root">Hello squirrel!</span>
|
||||
</section>
|
||||
`
|
||||
|
||||
var node = document.createElement('div')
|
||||
node.innerHTML = app.toString('/')
|
||||
node = node.childNodes[0]
|
||||
t.on('end', append(node))
|
||||
app.router(['/', function (state, prev, send) {
|
||||
return html`
|
||||
<section id="app-root">
|
||||
<div onclick=${() => send('test')}>Hello world!</span>
|
||||
</section>
|
||||
`
|
||||
}])
|
||||
|
||||
app.start('#app-root')
|
||||
append(node)
|
||||
|
||||
const tree = app.start()
|
||||
mount('#app-root', tree)
|
||||
|
||||
onReady(function () {
|
||||
t.equal(node.innerHTML, 'Hello world!', 'same content')
|
||||
t.equal(typeof node.onclick, 'function', 'attaches dom listeners')
|
||||
const newNode = document.querySelector('#app-root')
|
||||
const el = newNode.children[0]
|
||||
t.equal(el.innerHTML, 'Hello world!', 'same as it ever was')
|
||||
t.equal(typeof el.onclick, 'function', 'attaches dom listeners')
|
||||
})
|
||||
})
|
||||
|
||||
+70
-70
@@ -6,7 +6,7 @@ const view = require('../../html')
|
||||
|
||||
test('routing', function (t) {
|
||||
t.test('history', function (t) {
|
||||
t.plan(3)
|
||||
t.plan(2)
|
||||
|
||||
const history = Event()
|
||||
const choo = proxyquire('../..', {
|
||||
@@ -20,23 +20,23 @@ test('routing', function (t) {
|
||||
user: null
|
||||
},
|
||||
reducers: {
|
||||
set: (data, state) => ({user: data.id})
|
||||
set: (state, data) => ({user: data.id})
|
||||
},
|
||||
effects: {
|
||||
open: function (data, state, send, done) {
|
||||
open: function (state, data, send, done) {
|
||||
t.deepEqual(data, {id: 1})
|
||||
send('set', {id: 1}, function (err) {
|
||||
if (err) return done(err)
|
||||
history.broadcast('https://foo.com/users/1')
|
||||
history.broadcast('/users/1')
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
app.router('/users', (route) => [
|
||||
route('/users', parentView, [
|
||||
route('/:user', childView)
|
||||
])
|
||||
app.router({ default: '/users' }, [
|
||||
['/users', parentView, [
|
||||
['/:user', childView]
|
||||
]]
|
||||
])
|
||||
|
||||
const tree = app.start()
|
||||
@@ -59,74 +59,76 @@ test('routing', function (t) {
|
||||
}
|
||||
})
|
||||
|
||||
t.test('hash', function (t) {
|
||||
t.plan(1)
|
||||
// t.test('hash', function (t) {
|
||||
// t.plan(1)
|
||||
|
||||
const hash = Event()
|
||||
const choo = proxyquire('../..', {
|
||||
'sheet-router/hash': hash.listen
|
||||
})
|
||||
// resetLocation()
|
||||
// const hash = Event()
|
||||
// const choo = proxyquire('../..', {
|
||||
// 'sheet-router/hash': hash.listen
|
||||
// })
|
||||
|
||||
const app = choo()
|
||||
// const app = choo({hash: true})
|
||||
|
||||
app.model({
|
||||
state: {
|
||||
user: null
|
||||
},
|
||||
reducers: {
|
||||
set: (data, state) => ({user: data.id})
|
||||
},
|
||||
effects: {
|
||||
open: function (data, state, send, done) {
|
||||
send('set', {id: 1}, function (err) {
|
||||
if (err) return done(err)
|
||||
hash.broadcast('#users/1')
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
// app.model({
|
||||
// state: {
|
||||
// user: null
|
||||
// },
|
||||
// reducers: {
|
||||
// set: (state, data) => ({user: action.id})
|
||||
// },
|
||||
// effects: {
|
||||
// open: function (state, data, send, done) {
|
||||
// send('set', {id: 1}, function (err) {
|
||||
// if (err) return done(err)
|
||||
// hash.broadcast('#users/1')
|
||||
// })
|
||||
// }
|
||||
// }
|
||||
// })
|
||||
|
||||
app.router('/users', (route) => [
|
||||
route('/users', parentView, [
|
||||
route('/:user', childView)
|
||||
])
|
||||
])
|
||||
// app.router({ default: '/users' }, [
|
||||
// ['/users', parentView, [
|
||||
// ['/:user', childView]
|
||||
// ]]
|
||||
// ])
|
||||
|
||||
const tree = app.start({hash: true})
|
||||
t.on('end', append(tree))
|
||||
// const tree = app.start()
|
||||
// t.on('end', append(tree))
|
||||
|
||||
tree.onclick()
|
||||
// tree.onclick()
|
||||
|
||||
function parentView (state, prev, send) {
|
||||
return view`
|
||||
<button onclick=${() => send('open', {id: 1})}>
|
||||
Open
|
||||
</button>
|
||||
`
|
||||
}
|
||||
// function parentView (state, prev, send) {
|
||||
// return view`
|
||||
// <button onclick=${() => send('open', {id: 1})}>
|
||||
// Open
|
||||
// </button>
|
||||
// `
|
||||
// }
|
||||
|
||||
function childView (state, prev, send) {
|
||||
t.equal(state.user, 1)
|
||||
return view`<button>${state.user}</button>`
|
||||
}
|
||||
})
|
||||
// function childView (state, prev, send) {
|
||||
// t.equal(state.user, 1)
|
||||
// return view`<p>${state.user}</p>`
|
||||
// }
|
||||
// })
|
||||
|
||||
t.test('disabling history', function (t) {
|
||||
t.plan(1)
|
||||
|
||||
resetLocation()
|
||||
const choo = proxyquire('../..', {
|
||||
'sheet-router/history': () => t.fail('history listener attached')
|
||||
})
|
||||
|
||||
const app = choo()
|
||||
const app = choo({ history: false })
|
||||
|
||||
app.router('/', (route) => [
|
||||
route('/', function () {
|
||||
app.router('/', [
|
||||
['/', function () {
|
||||
t.pass('rendered')
|
||||
})
|
||||
}]
|
||||
])
|
||||
|
||||
app.start({history: false})
|
||||
app.start()
|
||||
})
|
||||
|
||||
t.test('disabling href', function (t) {
|
||||
@@ -136,15 +138,9 @@ test('routing', function (t) {
|
||||
'sheet-router/href': () => t.fail('href listener attached')
|
||||
})
|
||||
|
||||
const app = choo()
|
||||
|
||||
app.router('/', (route) => [
|
||||
route('/', function () {
|
||||
t.pass('rendered')
|
||||
})
|
||||
])
|
||||
|
||||
app.start({href: false})
|
||||
const app = choo({ href: false })
|
||||
app.router(['/', () => t.pass('rendered')])
|
||||
app.start()
|
||||
})
|
||||
|
||||
t.test('viewless nesting', function (t) {
|
||||
@@ -153,12 +149,12 @@ test('routing', function (t) {
|
||||
const choo = require('../..')
|
||||
const app = choo()
|
||||
|
||||
app.router('/users/123', (route) => [
|
||||
route('/users', [
|
||||
route('/:user', function (state) {
|
||||
app.router({ default: '/users/123' }, [
|
||||
['/users', [
|
||||
['/:user', function (state) {
|
||||
t.deepEqual(state.params, {user: '123'})
|
||||
})
|
||||
])
|
||||
}]
|
||||
]]
|
||||
])
|
||||
|
||||
app.start()
|
||||
@@ -181,3 +177,7 @@ test('routing', function (t) {
|
||||
app.start()
|
||||
})
|
||||
})
|
||||
|
||||
function resetLocation () {
|
||||
window.history.pushState({}, null, '/')
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user