Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
wants to merge 2 commits into
base: main
Choose a base branch
from

Conversation

thebug404
Copy link

@thebug404 thebug404 commented Dec 28, 2023

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)
  }
]);

Copy link

google-cla bot commented Dec 28, 2023

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
Copy link

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
Copy link
Author

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants