Skip to content
Tiny higher-order app providing top-level routing for Hyperapp
JavaScript HTML CSS
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
src
test
.gitignore
README.md
package-lock.json
package.json
webpack.prod.js

README.md

Hyperapp Top-Level Router

@geordiep/h_tlrouter

Tiny higher-order app providing top-level routing for Hyperapp.

The offical router (@hyperapp/router) was overkill for one of my use cases, and this simple alternative gets the job done.


This module...

Does
  • Switch between top-level components according to app state
  • Allow navigation between top-level components from anywhere you can render a Link component
  • Make an effort to stay out of your way
Does Not
  • Use the browser history API (location only maintained in app state) (this may change)
  • Sanitize route strings (/example/ will not match a route /example) (this may change)
  • Implement redirects, URL parameters, nested routes, or many other features you may need

Install

  • yarn add @geordiep/h_tlrouter or npm i @geordiep/h_tlrouter

Use

Step-by-step (Full single-file app example available later in this README):

  • Import Router and higher-order app (HOA) function into app entrypoint file
import { Router, withTlRouter } from '@geordiep/h_tlrouter'
  • Set up router component
// Map each route string to the component it should render.
// This object acts as your top-level view, passed to hyperapp.app()
const router = Router({
  '/': IndexPg,
  '/details': DetailsPg
})
  • Call HOA function to create your app. Partially applied function takes the same args as hyperapp.app(). Pass the above router object as the view argument.
const dispatch = withTlRouter(app)(
  state,
  actions,
  router,
  document.body
)
  • Render Link components inside any components that should link elsewhere
import { Link } from '@geordiep/h_tlrouter'

const myComponent = (state, actions) => (
  <div>
    <p>Hello</p>
    <Link to='/details'>See Details</Link>
  </div>
)

That's it!

Test App

An example multi-file app using the module is provided in the repository under test/test-app/. To run it from this repository, follow these steps:

  • Clone repo
git clone https://github.com/GeordieP/h_tlrouter.git
  • Install dependencies
npm i
  • Run webpack-dev-server on configuration file test/test-app/webpack.testapp.js
npm run dev

Full App Example

Example of a working (single file) app using the module.

See "point of interest" comments for the use of module features.

import { app, h } from 'hyperapp'
import { Router, withTlRouter, Link } from '@geordiep/h_tlrouter'

// Components
const IndexPg = (state, actions) => (
  <div>
    <NavBar />
    <h1>Index Page</h1>
    <p>Date: { state.date }</p>
  </div>
)

const DetailsPg = (state, actions) => (
  <div>
    <NavBar />
    <h1>Details Page</h1>
    <p>Date: { state.date }</p>
    <button onclick={ actions.refreshDate }>Refresh Date</button>
  </div>
)

/*** Point Of Interest ***/
/// Using the router Link component
const NavBar = () => (
  <span>
    <Link to='/'>Home</Link>
    <Link to='/details'>Details</Link>
  </span>
)

// app state and actions
const stateBase = { date: '' }
const actionsBase = { refreshDate: () => ({ date: new Date().toGMTString() }) }

/*** Point Of Interest ***/
/// Creating the router
// Map each route string to the component it should render.
// This object acts as your top-level view, passed to hyperapp.app()
const router = Router({
  '/': IndexPg,
  '/details': DetailsPg
})

/*** Point Of Interest ***/
/// Creating app using provided HOA function, passing router object as view
const dispatch = withTlRouter(app)(
  stateBase,
  actionsBase,
  router,
  document.body
)

// Initially call refresh action
dispatch.refreshDate()
You can’t perform that action at this time.