• This repository has been archived on 29/Apr/2023
  • Stars
    star
    257
  • Rank 158,728 (Top 4 %)
  • Language
    JavaScript
  • License
    MIT License
  • Created over 9 years ago
  • Updated over 5 years ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

Declarative routing for Hyperapp V1 using the History API.

Hyperapp Router

Travis CI Codecov npm Slack

Hyperapp Router provides declarative routing for Hyperapp using the History API.

Try this example online.

import { h, app } from "hyperapp"
import { Link, Route, location } from "@hyperapp/router"

const Home = () => <h2>Home</h2>
const About = () => <h2>About</h2>
const Topic = ({ match }) => <h3>{match.params.topicId}</h3>
const TopicsView = ({ match }) => (
  <div key="topics">
    <h2>Topics</h2>
    <ul>
      <li>
        <Link to={`${match.url}/components`}>Components</Link>
      </li>
      <li>
        <Link to={`${match.url}/single-state-tree`}>Single State Tree</Link>
      </li>
      <li>
        <Link to={`${match.url}/routing`}>Routing</Link>
      </li>
    </ul>

    {match.isExact && <h3>Please select a topic.</h3>}

    <Route parent path={`${match.path}/:topicId`} render={Topic} />
  </div>
)

const state = {
  location: location.state
}

const actions = {
  location: location.actions
}

const view = state => (
  <div>
    <ul>
      <li>
        <Link to="/">Home</Link>
      </li>
      <li>
        <Link to="/about">About</Link>
      </li>
      <li>
        <Link to="/topics">Topics</Link>
      </li>
    </ul>

    <hr />

    <Route path="/" render={Home} />
    <Route path="/about" render={About} />
    <Route parent path="/topics" render={TopicsView} />
  </div>
)

const main = app(state, actions, view, document.body)

const unsubscribe = location.subscribe(main.location)

Installation

npm i @hyperapp/router

Then with a module bundler like Rollup or Webpack, use as you would anything else.

import { Link, Route, Switch, Redirect, location } from "@hyperapp/router"

If you don't want to set up a build environment, you can download Hyperapp Router from a CDN like unpkg.com and it will be globally available through the window.hyperappRouter object. We support all ES5-compliant browsers, including Internet Explorer 10 and above.

Usage

Add the location module to your state and actions and start the application.

const state = {
  location: location.state
}

const actions = {
  location: location.actions
}

const main = app(
  state,
  actions,
  (state, actions) => <Route render={() => <h1>Hello!</h1>} />,
  document.body
)

Then call subscribe to listen to location change events.

const unsubscribe = location.subscribe(main.location)

Components

Route

Render a component when the given path matches the current window location. A route without a path is always a match. Routes can have nested routes.

<Route path="/" render={Home} />
<Route path="/about" render={About} />
<Route parent path="/topics" render={TopicsView} />

parent

The route contains child routes.

path

The path to match against the current location.

render

The component to render when there is a match.

Render Props

Rendered components are passed the following props.

const RouteInfo = ({ location, match }) => (
  <div>
    <h3>Url: {match.url}</h3>
    <h3>Path: {match.path}</h3>
    <ul>
      {Object.keys(match.params).map(key => (
        <li>
          {key}: {match.params[key]}
        </li>
      ))}
    </ul>
    <h3>Location: {location.pathname}</h3>
  </div>
)

location

The window location.

match.url

The matched part of the url. Use to assemble links inside routes. See Link.

match.path

The route path.

match.isExact

Indicates whether the given path matched the url exactly or not.

Link

Use the Link component to update the current window location and navigate between views without a page reload. The new location will be pushed to the history stack using history.pushState.

const Navigation = (
  <ul>
    <li>
      <Link to="/">Home</Link>
    </li>
    <li>
      <Link to="/about">About</Link>
    </li>
    <li>
      <Link to="/topics">Topics</Link>
    </li>
  </ul>
)

to

The link's destination url.

Redirect

Use the Redirect component to navigate to a new location. The new location will override the current location in the history stack using history.replaceState.

const Login = ({ from, login, redirectToReferrer }) => props => {
  if (redirectToReferrer) {
    return <Redirect to={from} />
  }

  return (
    <div>
      <p>You must log in to view the page at {from}.</p>
      <button
        onclick={() => {
          auth.authenticate(userId => login(userId))
        }}
      >
        Log in
      </button>
    </div>
  )
}

to

The redirect's destination url.

from

Overwrite the previous pathname. See location.previous.

Switch

Use the Switch component when you want to ensure only one out of several routes is rendered. It always renders the first matching child.

const NoMatchExample = (
  <Switch>
    <Route path="/" render={Home} />
    <Route
      path="/old-match"
      render={() => <Redirect from="/old-match" to="/will-match" />}
    />
    <Route path="/will-match" render={WillMatch} />
    <Route render={NoMatch} />
  </Switch>
)

Modules

location

pathname

Same as window.location.pathname.

previous

The previous location.pathname. Useful when redirecting back to the referrer url/pathname after leaving a protected route.

go(url)

Navigate to the given url.

License

Hyperapp Router is MIT licensed. See LICENSE.

More Repositories

1

hyperapp

1kB-ish JavaScript framework for building hypertext applications
JavaScript
19,043
star
2

fisher

A plugin manager for Fish
Shell
7,560
star
3

awsm.fish

A curation of prompts, plugins & other Fish treasures ๐Ÿš๐Ÿ’Ž
4,066
star
4

nvm.fish

The Node.js version manager you'll adore, crafted just for Fish
Shell
2,033
star
5

cookbook.fish

From Shell to Plate: Savor the Zest of Fish ๐Ÿฆž
2,002
star
6

colorette

๐ŸŒˆEasily set your terminal text color & styles
JavaScript
1,595
star
7

superfine

Absolutely minimal view layer for building web interfaces
JavaScript
1,564
star
8

classcat

Build a class attribute string quickly
JavaScript
905
star
9

getopts

Node.js CLI options parser
JavaScript
633
star
10

hydro

Ultra-pure, lag-free prompt with async Git statusโ€”just for Fish
Shell
609
star
11

hyperawesome

A curated list of awesome projects built with Hyperapp + more
492
star
12

replay.fish

Run Bash commands, replay changes in Fish ๐Ÿค
Shell
392
star
13

twist

Declarative JavaScript Testing
JavaScript
378
star
14

autopair.fish

Auto-complete matching pairs in the Fish command line
Shell
369
star
15

fishtape

100% pure-Fish test runner
Shell
345
star
16

spark.fish

โ–โ–‚โ–„โ–†โ–‡โ–ˆโ–‡โ–†โ–„โ–‚โ–
Shell
335
star
17

getopts.fish

Parse CLI options in Fish
Shell
220
star
18

gitio.fish

Create a custom git.io URL
Shell
88
star
19

hyperapp-html

Html helper functions for Hyperapp V1
JavaScript
81
star
20

pyenv

Pyenv support plugin for fish-shell
Shell
62
star
21

humantime.fish

Turn milliseconds into a human-readable string in Fish
Shell
21
star
22

.github

My health files
1
star
23

jorgebucaran.github.io

HTML
1
star