Proposal for a New API @lit-labs/router package

[thebug404]

Hi, guys! 👋

First of all, I want to congratulate you on the tremendous work you're doing. I love the idea of being able to collaborate with you and learn from your experience. 🚀

For a little over 1 year and a half, I've been working quite a bit with Lit, whether on personal projects or at my job. It strikes me as an exquisite library for creating Web Components. It's easy to use, has good documentation, and the community is very active. However, I've encountered certain limitations when it comes to using routers, something quite common in web applications. In other frameworks like React, Angular, or Vue, this is very easy to implement.

While it's true that Lit already has a package called @lit-labs/router that allows creating routes, this package provides very basic functionality. Additionally, it has an API that isn't very intuitive, especially when nesting routes.

Therefore, I've decided to create a router that integrates with Lit and provides a significant portion of the functionalities expected from a modern router, such as:

• Backwards Compatibility.
• Define routes using a declarative API.
• Programmatic navigation.
• Support nested routes.
• Lazy loading.
• Route params & query.
• Route guards.

With that said, I would be delighted to contribute to the Lit team with this project and have this router become part of the official library. 🤝

Basic Usage

HTML Template

<lit-router></lit-router>

Javascript/Typescript

// Import package.
import '@lit-labs/router';

// Import your static pages.
import {HomePage} from './pages/home-page.js';
import './pages/about-page.js';

// Get a router.
const $router = document.querySelector('lit-router');

// Register your routes.
$router.setRoutes([
  {path: '/', component: HomePage},
  {path: '/about', component: 'about-page'},
  {
    path: '/terms',
    component: () => import('./pages/terms-page.js').then((module) => module.TermsPage)
  }
]);

[google-cla]

Thanks for your pull request! It looks like this may be your first contribution to a Google open source project. Before we can look at your pull request, you'll need to sign a Contributor License Agreement (CLA).

View this failed invocation of the CLA check for more information.

For the most up to date status, view the checks section at the bottom of the pull request.

[jrandolf]

Hi, just a passerby. I think the motivation is great, but I think it would make more sense to publish your idea in a separate package then to ask maintainers to merge this API and maintain it.

The reason I say this is not due to anything in the PR, but because routing is extremely hard to get right because every application has different requirements. The fact that router is still a labs package implies the maintainers are also experimenting, so replacing the entire library would just restart the experiment for maintainers. It would make more sense if this API was published separately and see if the package gains traction.

It would provide insight for maintainers about usage and you'd have made a fantastic contribution to the community! Both sides win :)

[thebug404]

I find your point of view interesting, I'll consider it. Thanks bro.