Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Experiment Async Route support #653

Open
wants to merge 4 commits into
base: master
Choose a base branch
from
Open

Experiment Async Route support #653

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
2cd3378
async route loading
yoshuawuyts Apr 4, 2018
2ff9f3d
experimental async
yoshuawuyts Apr 4, 2018
afd1c18
fix async rendering
yoshuawuyts Apr 4, 2018
9d490af
fix async route stuff
yoshuawuyts Apr 4, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 3 additions & 0 deletions example/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
var split = require('split-require')
var css = require('sheetify')
var choo = require('../')

Expand All @@ -15,4 +16,6 @@ app.route('#active', require('./views/main'))
app.route('#completed', require('./views/main'))
app.route('*', require('./views/main'))

app.experimentalAsyncRoute('/async', () => split('./views/async'))

module.exports = app.mount('body')
3 changes: 2 additions & 1 deletion example/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,8 @@
"todomvc-common": "^1.0.3"
},
"devDependencies": {
"bankai": "^9.0.0-rc6",
"bankai": "9.10.4",
"split-require": "^3.1.0",
"standard": "^9.0.1"
}
}
11 changes: 11 additions & 0 deletions example/views/async.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
var html = require('bel') // cannot require choo/html because it's a nested repo

module.exports = mainView

function mainView (state, emit) {
return html`
<body>
Async route
</body>
`
}
60 changes: 59 additions & 1 deletion index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,6 +42,8 @@ function Choo (opts) {
this._hasWindow = typeof window !== 'undefined'
this._createLocation = nanolocation
this._cache = opts.cache
this._asyncProxy = null // proxy for async routes
this._asyncRoutes = {}
this._loaded = false
this._stores = []
this._tree = null
Expand Down Expand Up @@ -76,10 +78,66 @@ function Choo (opts) {

Choo.prototype.route = function (route, handler) {
assert.equal(typeof route, 'string', 'choo.route: route should be type string')
assert.equal(typeof handler, 'function', 'choo.handler: route should be type function')
assert.equal(typeof handler, 'function', 'choo.route: handler should be type function')
this.router.on(route, handler)
}

// Register a route to be loaded asynchronously.
Choo.prototype.experimentalAsyncRoute = function (route, loader) {
assert.equal(typeof route, 'string', 'choo.asyncRoute: asyncRoute should be type string')
assert.equal(typeof loader, 'function', 'choo.asyncRoute: loader should be type function')

var IDLE = 0
var LOADING = 1
var LOADED = 2

var loadingState = IDLE
var renderRoute = null
var view = null
var self = this

this.route(route, function (state, emit) {
if (!self._asyncProxy) self._initAsyncProxy()
// Begin loading the bundle on the first call
if (loadingState === IDLE) {
emit('choo:async-route-start', state.route)
renderRoute = state.route
loadingState = LOADING

var p = loader(onload)
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

we don't need to pass in the onload callback here if p must return a promise anyway

assert(p && p.then, 'choo.asyncRoute: async route should return a Promise')
p.then(onload.bind(null, null), onload)
return self._asyncProxy
} else if (loadingState === LOADING) {
return self._asyncProxy
} else {
// loadingState === LOADED
return view(state, emit)
}

function onload (err, _view) {
if (err) {
emit('error', err)
loadingState = IDLE
return
}

emit('choo:async-route-end', renderRoute, _view)
loadingState = LOADED
view = _view

// Only rerender if we are still on the same route
if (state.route === renderRoute) emit('render')
}
})
}

Choo.prototype._initAsyncProxy = function () {
var tagName = this._tree ? this._tree.nodeName : 'body'
this._asyncProxy = document.createElement(tagName)
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm afraid this won't work on the server

this._asyncProxy.isSameNode = function () { return true }
}

Choo.prototype.use = function (cb) {
assert.equal(typeof cb, 'function', 'choo.use: cb should be type function')
var self = this
Expand Down