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.

Git
Node.js (with NPM)
Yarn
Ember CLI

Installation

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

Running / Development

ember serve
Visit your app at http://localhost:4200.

Building

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

jorgelainfiesta/glimmer-router