A declarative router for Glimmer.js
Switch branches/tags
Nothing to show
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.
config
public
src
.editorconfig
.gitignore
.watchmanconfig
README.md
ember-cli-build.js
package.json
testem.json
tsconfig.json
yarn.lock

README.md

This is not an official Glimmer.js repo, it's the work of jkarsrud

glimmer-router

glimmer-router is a declarative router for Glimmer.js, heavily inspired by react-router. The philosophy is explained so well in React Router's documentation that I don't see why I should need to re-write everything here. If you're interested, head on over there!

How it works

By using the <g-route> component, we can declare what we want to render when the route matches:

<div class="application">
  <h1>I will always render</h1>
  <R @path="/subroute">
    <p>I will render when the path is "/subroute"</p>
  </Route>
</div>

In addition to this, the <Route> component yields a Match object:

interface Match {
  path: string,
  url: string,
  params: any,
  isExact: boolean
}

This allows you to pass information about the rendered route into sub content or child components:

<Route @path="/user" as |match|>
  <user-info @userId={{match.url}} />
<Route>

The benefit of having a component like <g-route> that can render content based on the URL, is that you can render content in different locations based on the same URL. This comes in handy when you want to render some route-specific content in ie. a sidebar:

<div class="container">
  <nav class="sidebar">
    <ul>
      <li>
        <link-to @path="/">Home</link-to>
      </li>
      <li>
        <link-to @path="/hello">Hello</link-to>
      </li>
    </ul>

    <Route @path="/hello" as |match|>
      {{match.url}} also render content in the sidebar!
    </Route>
  </nav>

  <section class="content">
    <Route @path="/hello" as |match|>
      <h1>Hello!</h1>
      <div>I am the content of the route matching '{{match.url}}'</div>
    </Route>
  </section>
</div>

Next steps

This repo's issues is more or less updated with what needs to be done.

The main thing that needs to be solved right now is how do handle dynamic segments/route-params. This will allow you to pass that data to the child components:

<Route @path="/user/:user_id" as |match|>
  <user-info @userId={{match.params.user_id}} />
<Route>

Contributing

Prerequisites

You will need the following things properly installed on your computer.

Installation

  • git clone <repository-url> this repository
  • cd glimmer-router
  • yarn

Running / Development

Building

  • ember build (development)
  • ember build --environment production (production)

Further Reading / Useful Links