shama / base-router

:station: A simple and portable router for the client and server.

shama

Things for helping me build other things.

Have an opinion on my things? Great! Fork and publish your own thing.

quick start

npm init
npm i shama --save-dev
./node_modules/.bin/shama
npm run watch

require('shama')

Create something like this or use ./node_modules/.bin/shama:

./
├── app
│   ├── css
│   │   └── index.styl
│   └── index.js
├── bin
│   └── build.js
└── package.json

bin/build.js

var path = require('path')
require('shama')(path.resolve(__dirname, '..'))

package.json

{
  "name": "thing",
  "version": "1.0.0",
  "description": "",
  "scripts": {
    "build": "node bin/build.js",
    "watch": "node bin/build.js watch"
  }
}

require('shama/build')

// Compile a index.html, index.js and index.css file
// using browserify and stylus
var build = require('shama/build')()
build.css().js().html()

// or more simply
build.all()

// or more complexly
build.all({
  js: { src: 'app/index.js', dest: 'dist/index.js' },
  css: { src: 'app/index.styl', dest: 'dist/index.css' },
  html: { dest: 'dist/index.html', title: 'My website' },
}, function(err) {
  console.log('done!')
})

require('shama/server')

// Starts a server using jaws on port 8080
var server = require('shama/server')({
  // Default is index.html
  '/': 'index.html',
  // Serve up static files from cwd
  '/*': './',
  // Write your own req/res handlers
  '/api/:endpoint': function(req, res) {
    var params = req.extras.params
    res.json({ params.endpoint: true })
  }
})
server.start(8080)

require('shama/watch')

require('shama/watch')({
  'app/**/*': build.all.bind(build),
})

license

Copyright (c) 2015 Kyle Robinson Young
Licensed under the MIT license.

base-router's Issues

Implement on wayfarer

Implement using @yoshuawuyts https://github.com/yoshuawuyts/wayfarer

Preventing page reload on link click

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 ;)

issue running with yo-yo

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?

Don't push new state onpopstate

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

Revisit API for serve

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.

route vs addRoute

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