hamedasemi / lit-element-router Goto Github PK

    onRoute(route, params, query, data) {
        console.log(route, params, query, data)
    }

What is params and where is it from?

Hallo, is navigation from URL directly not work? In example working correctly, i'm using webpack dev server for running project.

If using apk-link, it works normally

👋 Hi There!

I'm trying this package out for a side project. Looks nice so far.

While I'm not a TS user, my editor is ;) Please consider adding ts typings so that users can benefit from autocompletion, etc.

Hi,
i was reading the documentation and could not open some of the links (the ones with "(todo)" in the name).
Maybe the stackblitz examples don't exist anymore?

I'm trying to use multiple router instances but i'm getting weird errors where sometimes the first router isn't working correctly and sometimes the second one.

First off i'm getting the following error:

Uncaught TypeError: Cannot read property 'data' of undefined

At line 62 in the router-mixin.js file:

callback('not-found', {}, parseQuery(querystring), notFoundRoute.data);

It seems to me that it's an obvious bug.
Because there is no notFoundRoute route found.
The line should be:

callback('not-found', {}, parseQuery(querystring), {});

PS:
Great work btw.
Loving the router so far.

Hi Folks,

loving the lit-element-router!

I recently had to use hash routing in a constrained scenario (karma tests).
Found this commit that adds hashes when matching urls: 84e677a
I think it does not fully get the job done since, if i am not mistaken

• every route needs to have hash: true option
• all navigate calls are need to be adjusted as well.

Since i wanted a solution that allows to transparently switch between hash routing and proper routing i did this: sijakret@3452507#diff-455606f5cd3de66aefea6c9c80a4026eR40-R55
the location getter could even just be this by default

//..
get location() {
  return window.location
}
//..

So this change would be minimally intrusive (2 lines changed, 3 lines added) and it would allow to switch to hash routing like this (i am already doing it, it works)

const hashRouting = true; // in my case from config
class Router extends router(LitElement) {
//..
  get location() {
    return hashRouting ? {
      get pathname() {
        return window.location.hash.slice(1);
      },
      get search() {
        return window.location.search;
      }
    } : window.location
  }
//..
}
class Navigator extends navigator(LitElement) {
//..
  navigate(href) {
    super.navigate((hashRouting ? '#' :'')+href);
  }
//..
}

This change would also enable many more routing setups where state may be stored wherever the user wants.
What do you guys think?

Stay isolated,
Jan

@hamedasemi Hi. I see that multi-router demo is in the works, so just had one question. Can this be used to make every component define its own routes?

For eg.

1. <my-org> defines 2 routes /dashboard and /employees
2. <org-dashboard> and <org-employee> defines its own routes

so, if anyone goes to /org/dashboard/route1 the routes will be inferred from the nested components and navigation happens.

Is this possible? Any reference I can look into. I noticed all the routes defined in 1 component in the examples. Wanted to make sure that child components can have their routes and traverse like I mentioned above. Thanks.

I would like to change the website title according to my component and I think the router might be the best place to do so.

So my proposal would be to specify a title for every route.

router([{
    name: 'home',
    title: 'Homepage',
    pattern: ''
}, {
    name: 'news',
    title: 'Whats up?',
    pattern: 'news'
}, {
    name: 'notfound',
    title: '404 not found!',
    pattern: '*'
}], (route, title) => {
    this.route = route
    document.title = title
})

The main is library file has not been coved by tests.

• It easier to understand the library.
• It is hard to implement tests for code that uses the library.

What do you think about test at all? I see that I also do not need them much.

I noticed that the latest NPM release is still using the non-standard setImmediate method instead of setTimeout, would we able to get the latest changes packaged into a new release?

The documentation is not detailed enough. For instance, I don't know what's the differences between those route patterns.

I'm curious if there is a way for a route (which extends routerLinkMixin) to know when it becomes active (ie: visible to the user)?

Currently, all routes are rendered at load time and then attached/detatched from the Shadow DOM. I would like to defer some data loading and rendering until the time when the route becomes visible to the user. I have come up with a solution, but I'm not sure if I'm missing something, or if something like the following should be added to the docs and possibly even added to the implementation of routerLinkMixin?

class Page extends routerLinkMixin(LitElement) {
    // Router Links are swapped between light & shadow DOM.
    // Trigger the connected event when the parent does NOT have a shadowRoot
    connectedCallback() {
        if (!this.parentNode.shadowRoot) {
            this.dispatchEvent(new CustomEvent("connected"))
        }
        super.connectedCallback()
    }
    // Trigger the disconnected event when the parent has a shadowRoot
    disconnectedCallback() {
        if (this.parentNode.shadowRoot) {
            this.dispatchEvent(new CustomEvent("disconnected"))
        }
        super.disconnectedCallback()
    }
}

I'd be happy to put together a pull request if this is a feature that seems reasonable.

Thanks!

I think it would be great, if we could specify multiple patterns for the same route name by using a optional array structure for the pattern property:

router([{
    name: 'home',
    pattern: ['', 'home']
}, {
    name: 'news',
    pattern: 'news'
}, {
    name: 'notfound',
    pattern: '*'
}], (route, params, query) => {
    this.route = route
})

Hi I'm currently implementing your library into my lit-element web app and its pretty amazing :)
👍 👍

But I just found some weird bug when making the structure inside a router-link element to complex:

For example I have this code:
<router-link href="/test"><span>foo</span><span>bar</span></router-link>

When ever I click on it, it changes the url to "undefined".

If I remove the html elements inside router-link, everything works finde.
But I really need to have some html inside there.

Thanks in advance :)

Hi, I dont know if the problem is of my setting or the dependency. But I get a error on lit-element-router.js:137:40.
The querySelectorAll get a null element. The router is working because there are a previous array. But I receive the error by console.
The error is not control the posibility that the querySelectorAll return null. I tried create a new branch with the correction and push the changes but I dont have permission to execute this actions.

Are there any plans to upgrade? can I help?

My router looks like this:

router([{
    name: 'news',
    pattern: 'news'',
    data: { title: 'News' }
}, {
    name: 'notfound',
    pattern: '*',
    data: { title: 'Error 404!' }
}], (route, params, query, data) => {
    this.route = route
    console.log(data)
})

When I go to /news, everything works as expected and the console logs:

{
    title: "News"
}

But when ever I open any link that will show my 404 page like "/sdf", my console logs:

{}

For some reason the search parameters are added to every navigate call.
href + window.location.search

Because of this bug we can't navigate to a URL with search params inside if the page already had search params. Because you would end up with an invalid URL.
https://test.nl?foo=bar?foo=bar

export let routerLinkMixin = (superclass) => class extends superclass {

    navigate(href) {
        window.history.pushState({}, null, href + window.location.search);
        window.dispatchEvent(new CustomEvent('route'));

        if (super.navigate) super.navigate();
    }
};

I have this structure:

router([{
    name: 'home',
    pattern: ['', 'home']
}, {
    name: 'news',
    pattern: 'news'
}, {
    name: 'notfound',
    pattern: '*'
}], (route, params, query) => {
    this.route = route
})

When I go to "/news", it shows my news. That's finde.

But when I go to "/whatevernews", it still shows my news. That should not be the case.

Is there any way to have this project support baseURI ? It seems like this works for hardcoded paths but not relative paths such as placing a PWA on a sub-domain when we don't know the sub-domain ahead of time. Is there a way to support this internal to lit-element-router or should we just ensure all calls to anything in routing dynamically generate this entry-way value?

Instead of letting developers to define a new class from routerOutletMixin, it's better to provide a ready-to-use RoutOutlet class directly.

Hi, thanks for this component!.

I've setup a couple of routes, but it looks like all pages are rendered in the dom.