Add support for declarative routes #67

frenzzy · 2016-11-03T13:41:25Z

Declarative Routes

resolve(routes, { path, ...context }) ⇒ Promise<any>
resolve(routes, { path, ...context }, handleRouteFn) ⇒ Promise<any>

routes.js

const routes = [
  {
    path: '/',
    page: './pages/home'
  },
  {
    path: '/about',
    page: './pages/about' // code splitting or lazy loading
  },
  {
    path: '/posts',
    children: [
      {
        path: '/',
        page: './pages/posts'
      },
      {
        path: '/:id', // url params
        page: './pages/post'
      }
    ]
  },
  {
    path: '/tasks/:status(pending|completed)?',
    page: './pages/tasks',
    data: '/api/tasks/$status' // declarative api requests
  },
  {
    path: '*',
    page: './pages/not-found'
  }
]

export default routes

client.js

import { resolve } from 'universal-router'
import routes from './routes'

resolve(routes, window.location.pathname, ({ route, params }) => {
  // request all page resources in parallel
  return Promise.all([
    // load page asynchronously by webpack or browserify or just fetch
    System.import(route.page),

    // api request
    route.data && fetch(route.data.replace('$status', params.status))
  ])

  .then((module, data) => module(params, data))
})

.then(result => {
  document.title = result.title
  document.body.innerHTML = result.page
})

server.js

import express from 'express'
import { resolve } from 'universal-router'
import routes from './routes'

const server = express()

server.get('*', (req, res, next) => {
  resolve(routes, req.path, ({ route, params }) => {
    // load page synchronously by node.js
    const module = require(route.page)

    if (route.data) {
      // api request
      return fetch(route.data.replace('$status', params.status))

        .then(data => module(params, data))
    }
    return module(params)
  })

  .then(result => {
    res.status(result.status).send(`
      <!doctype html>
      <html>
        <head><title>${result.title}</title></head>
        <body>${result.page}</body>
      </html>
    `);
  })
})

server.listen(3000)

pages/not-found.js

function getNotFoundPage(params, data) {
  return {
    title: 'Page not found',
    page: '<h1>Not Found 😢</h1>',
    status: 404
  }
}

export default getNotFoundPage

coveralls · 2016-11-03T14:04:13Z

Coverage remained the same at 100.0% when pulling f249285 on frenzzy:declarative-routes into 071e624 on kriasoft:master.

koistya · 2016-11-03T15:39:39Z

Guys, what do you think about introducing a new API for advanced usage in addition to resolve(routes, location) function. It would look something like this:

import Router from 'universal-router';
import history from './history';
import routes from './routes';

const router = new Router(routes, { baseUrl: ..., resolve: ... });

...

history.listen((location) => {
  router.resolve(location).then(render);
});

Add support for declarative routes

f249285

frenzzy force-pushed the declarative-routes branch from fad73e5 to f249285 Compare November 3, 2016 14:01

frenzzy mentioned this pull request Mar 23, 2017

Update Router API #83

Merged

frenzzy closed this in #83 Mar 25, 2017

frenzzy mentioned this pull request Mar 27, 2017

Add code recipes #86

Open

20 tasks

frenzzy deleted the declarative-routes branch April 18, 2017 12:47

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add support for declarative routes #67

Add support for declarative routes #67

frenzzy commented Nov 3, 2016 •

edited

Loading

coveralls commented Nov 3, 2016

koistya commented Nov 3, 2016 •

edited

Loading

Add support for declarative routes #67

Add support for declarative routes #67

Conversation

frenzzy commented Nov 3, 2016 • edited Loading

Declarative Routes

routes.js

client.js

server.js

pages/not-found.js

coveralls commented Nov 3, 2016

koistya commented Nov 3, 2016 • edited Loading

frenzzy commented Nov 3, 2016 •

edited

Loading

koistya commented Nov 3, 2016 •

edited

Loading