Description
Which package(s) are affected?
@lit-labs/router
Description
The pathname
for URLPattern
works in @lit-labs/router
, but the hash
for some reason doesn't. See the reproduction below.
This is not a bug in the native browser implementation of URLPattern
or in the urlpattern-polyfill
:
new URLPattern({ hash: "one" }).test("http://localhost:8080")
// returns `false`
new URLPattern({ hash: "one" }).test("http://localhost:8080/#one")
// returns `true`
new URLPattern({ hash: "one" }).test("http://localhost:8080#one")
// returns `true`
new URLPattern({ hash: "one" }).test("http://localhost:8080/something/#one")
// returns `true`
In the @lit-labs/router
source code I've found this: https://github.com/lit/lit/blob/main/packages/labs/router/src/routes.ts#L32.
Does this mean that nothing except pathname
and search
including hash
is implemented?
Reproduction
Here's a playground (based on "Hello World" sample): link.
import { html, LitElement } from "lit";
import { customElement } from "lit/decorators.js";
import { Router } from "@lit-labs/router";
import "urlpattern-polyfill";
@customElement("simple-greeting")
export class SimpleGreeting extends LitElement {
private _router = new Router(this, [
{
pattern: new URLPattern({ pathname: "/" }),
render: () => html`<p>We are at /</p>`,
},
{
pattern: new URLPattern({ pathname: "/1" }),
render: () => html`<p>We are at /1</p>`,
},
{
pattern: new URLPattern({ pathname: "/2" }),
render: () => html`<p>We are at /2</p>`,
},
{
pattern: new URLPattern({ hash: "one" }),
render: () => html`<p>We are at #one</p>`,
},
{
pattern: new URLPattern({ hash: "two" }),
render: () => html`<p>We are at #two</p>`,
},
{
pattern: new URLPattern({ hash: "three" }),
render: () => html`<p>We are at #three</p>`,
},
]);
render() {
return html`
<p><a href="/">Go to /</a>
<p><a href="/1">Go to /1</a></p>
<p><a href="/2">Go to /2</a></p>
<p><a href="#one">Go to #one</a></p>
<p><a href="#two">Go to #two</a></p>
<p><a href="#three">Go to #three</a></p>
<p>Result: ${this._router.outlet()}</p>
</p>`;
}
}
Workaround
I have not found a workaround.
Is this a regression?
No or unsure. This never worked, or I haven't tried before.
Affected versions
@lit-labs/router@0.1.1
Browser/OS/Node environment
Browser: Google Chrome 110.0.5475.0.
Metadata
Metadata
Assignees
Labels
No labels
Type
Projects
Status
📋 Triaged