shama / base-router Goto Github PK
View Code? Open in Web Editor NEW:station: A simple and portable router for the client and server.
:station: A simple and portable router for the client and server.
Right now if you click a link your entire application reloads. Thoughts on having base-router prevent this by default?
Something like:
if (usePush) {
function preventLinkReload(e) {
if (e.target.tagName !== 'A') return
e.preventDefault()
self.transitionTo(e.target.pathname)
}
document.addEventListener('click', preventLinkReload, false)
// etc
Will PR if there's interest ;)
Right now base-router calls window.history.pushState
whenever window.onpopstate
is called.
This should never happen since it duplicates history entries and breaks the back button
I'm thinking that Router.route should be deprecated in favor of a new Router.addRoute
and removed whenever v2 roles around.
Seems like it might make more sense, especially since base-router
is depending on routes for now
Hi @shama I got an issue while following the example to run base-router with yo-yo.
Here's the code http://requirebin.com/?gist=4463cb79b10a06a62e28a294f7ca7013
var yo = require('yo-yo')
var createRouter = require('base-router')
var element = yo`<div></div>`
var app = document.body.appendChild(element)
var router = createRouter({
'/': function () {
console.log('home page...')
return yo`<div>home page</div>`
},
'/about': function () {
console.log('about page...')
return yo`<div>about page</div>`
}
}, {
location: 'hash'
})
router.on('transition', function (route, childNode) {
yo.update(element, childNode)
})
router.transtionTo('/')
Somehow I always get Uncaught TypeError: router.transtionTo is not a function
from the browser at the initial run. But it works if I console the router
in the devtool and call router.transtionTo('/')
from there.
I've debug it for a while but still don't know what's going wrong here, do I miss something?
Currently .serve()
returns a middleware but that makes it a little difficult if you want to integrate with other middleware. Such as:
var useBaseRouter = app.router.serve(function (page, data) {
app.render(page, data)
this.response.writeHead(200, { 'Content-Type': 'text/html' })
this.response.end(toHTML(app.element.vtree))
})
require('http').createServer(function (req, res) {
if (req.url == 'something else') res.end('Error!')
else useBaseRouter(req, res)
}).listen(1337)
Also the context with this.response
and this.request
is a little awkward.
Implement using @yoshuawuyts https://github.com/yoshuawuyts/wayfarer
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.