Labs Feedback: @lit-labs/router #3354
Replies: 14 comments 6 replies
-
It's okay. 💯 |
Beta Was this translation helpful? Give feedback.
-
I've been using the router since it appeared and it's great: simple, intuitive, and close to the metal--all the things I love about Lit in general. The only major issue for me: observability (partially raised here #2512). I'd like to know when a route is matched (preferably with an event) and what the current route is. For example, to highlight the currently active element in navbar. At the moment, one has to add enter methods to each route to achieve this. I understand that for some people this router might seem too simplistic, maybe they want more magic akin to Remix--those people are wrong. |
Beta Was this translation helpful? Give feedback.
-
I'm just trying this package and i get bit confused about how i can goto to routes i've declared on main component (eg. app-lite), in child component (eg. home-view, one-view etc) i set method to respond to click event so i'm used to trigger an action on main Router as with @vaadin/router calling window.Router.go('/other-view') in the child method to trigger the routing in the main component ... i'm actually try to implement @lit-labs/router but i'm not able to trigger main component routing from child .... |
Beta Was this translation helpful? Give feedback.
-
Just to let you know .... i'm trying with the same code i'm using with other router and seems with @lit-labs/router only miss to update the top bar URL when i'm triggering from child with this code .... window.router.goto( |
Beta Was this translation helpful? Give feedback.
-
What I am missing the most is some kind of My Use-Case is, that I would for example always reset the scroll position to 0, or scroll to some specific place regarding the current route. Right now, I would have to call my scroll function on every single class MyElement extends LitElement {
private _routes = new Routes(this, {
routes: [
{path: '/', render: () => html`<h1>Home</h1>`},
{path: '/projects', render: () => html`<h1>Projects</h1>`},
{path: '/about', render: () => html`<h1>About</h3>`},
],
routeChanged: (route) => { // <----------------------------- See here
window.scroll({
top: 0,
left: 0,
});
},
});
render() {
return html`
<header>...</header>
<main>${this._routes.outlet()}</main>
<footer>...</footer>
`;
}
} I already created a discussion about this some time ago with more information: #2529 |
Beta Was this translation helpful? Give feedback.
-
In general I would say that I like it. It's very simple to use for basic purposes. Nice job :)! Unfortunately I tried to implement a navigation drawer with two levels and got a bit confused. At first I used nested routes, but they require a new configuration, new container and provide an additional outlet. I ended up registering the routes like this:
It works fine, but the base path gets duplicated and I think it would be pretty handy to be able to distinguish where a route belongs not only judging by the path - e.g. to render the navigation elements based on the router configuration. I think it would be useful to support child routes in the configurations.
|
Beta Was this translation helpful? Give feedback.
-
This is a great idea for sure. I think if you look at one of the most used routers for Lit right now, vaadin, that implementation is pretty full featured, but not actively maintained on the javascript side (that i can see, it is still used, but it does not have active commits happening). I would love something built by the Lit community to be the router of choice. with that said, i have tried this lit-labs package and so far it works pretty well. I can't opt to use it in my packages until it is closer to GA, but i have it in a couple of personal projects and it works as a basic router for now. :) |
Beta Was this translation helpful? Give feedback.
-
@justinfagnani Does this currently work with search? While this works as expected with const p = new URLPattern({ pathname: '/:collection', search: ':param=:value' })
const results = p.exec('https://example.com/about?tags=foo')
console.log(results.search.groups.param) // "tags"
console.log(results.search.groups.value) // "foo" I'm having trouble getting it to work with the lit labs router (v pattern: new URLPattern({ pathname: '/:collection' }), if I add the pattern: new URLPattern({ pathname: '/:collection', search: ':param=:value' }), |
Beta Was this translation helpful? Give feedback.
-
Are there examples of how this is all meant to work? I feel like it's aimed at people who are already very familiar with certain implementations of routers. Some parts aren't clear to me, like how a route is supposed to access the controller router (specifically to use |
Beta Was this translation helpful? Give feedback.
-
I added a minimalist example of how I got it to work* here: https://github.com/vid/lit-router-example I am not an expert in any of this so probably got parts wrong, in particular it seems odd to have to pass around the router manually, but it does work.
|
Beta Was this translation helpful? Give feedback.
-
The router does currently not listen to "pushstate" changes. Then the following code at lit/packages/labs/router/src/router.ts Line 69 in f60a3a2 could just omit the this.goto(...) line as it would be automatically handled:
|
Beta Was this translation helpful? Give feedback.
-
@justinfagnani - interested to know if there are any plans to work on the router in a near future ? |
Beta Was this translation helpful? Give feedback.
-
I appreciate the work on this new lit router a lot. However, I miss documentation for the following use case with a main-component implementing routing like this:
The current documentation covers only nested routes. Is it possible to do routing for the same non-nested routes at multiple points (in multiple components)? It would be nice to have documentation on this topic. |
Beta Was this translation helpful? Give feedback.
-
I have been using the router for some weeks now and at first, I was looking for something like a
First, I gave it a thumbs up, but now I realized that the My use case was adding a general scroll-to mechanism when a hash was specified in the URL: #router = new Router(this, [
{ path: PATHS.home, render: () => html`<home-page ${ref(this.#currentPageRef)}></home-page>` },
{ path: PATHS.otherPage, render: () => html`<other-page ${ref(this.#currentPageRef)}></other-page>` },
]); ... updated(){
const targetElement = this.#currentPageRef.value?.shadowRoot.getElementById(location.hash.slice(1));
targetElement?.scrollIntoView({behavior: 'smooth'});
} Obviously, using |
Beta Was this translation helpful? Give feedback.
-
The
@lit-labs/router
package is a set of controllers for client-side routing. The controllers allow for a declarative configuration of routes with associated templates, and update their host element when the route changes. We are experimenting with a Lit-specific router as opposed to using a generic routing library because using reactive controllers simplifies the host/router integration, and we can use new platform features like URLPattern.We want to collect your feedback on your experiences with
@lit-labs/router
as we iterate on it according to our Lit Labs process and move the package towards possible graduation or retirement.Please try
@lit-labs/router
and tell us about your experience. Leave comments with your thoughts; highlight what issues or missing features you're blocked on; give a link to a project that uses it; etc.And so we can have some numbers to look at, you can add reactions to this comment to indicate your experience with this package:
🚀 I have tried this package and it works great. I need it. Ship it!
👍 I have tried this package and it seems like a good idea.
😕 I have tried this package and would use it, but it has serious bugs or missing features.
👀 I am interested, but haven't tried the package yet.
👎 I'm not interested in this package.
Note: other reactions like 😄, 🎉, and ❤️ don't mean anything as part of this scheme. You probably mean, and please use, 🚀, 👍, or 👀.
Beta Was this translation helpful? Give feedback.
All reactions