@wavelengthusaf/client-router 0.0.4 → 0.0.6
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"RouterElement.d.ts","sourceRoot":"","sources":["../../src/elements/RouterElement.ts"],"names":[],"mappings":"AAIA,qBAAa,aAAc,SAAQ,WAAW;;IAC5C,gBAAuB,GAAG,uBAAuB;
|
|
1
|
+
{"version":3,"file":"RouterElement.d.ts","sourceRoot":"","sources":["../../src/elements/RouterElement.ts"],"names":[],"mappings":"AAIA,qBAAa,aAAc,SAAQ,WAAW;;IAC5C,gBAAuB,GAAG,uBAAuB;IAUjD,WAAkB,kBAAkB,IAAI,MAAM,EAAE,CAE/C;IAEM,iBAAiB,IAAI,IAAI;IAKzB,oBAAoB,IAAI,IAAI;IAK5B,wBAAwB,CAAC,IAAI,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,GAAG,IAAI,EAAE,QAAQ,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI;IAK9F,QAAQ,CAAC,IAAI,EAAE,MAAM,GAAG,IAAI;IAI5B,OAAO,CAAC,IAAI,EAAE,MAAM,GAAG,IAAI;IAI3B,IAAI,IAAI,IAAI;CAqHpB"}
|
|
@@ -1,14 +1,20 @@
|
|
|
1
1
|
import { Router } from '../router/Router.js';
|
|
2
|
+
import { RouteElement } from './RouteElement.js';
|
|
2
3
|
export class RouterElement extends HTMLElement {
|
|
3
4
|
static tag = 'wavelength-router';
|
|
4
5
|
#router;
|
|
6
|
+
#outlet;
|
|
7
|
+
#routeObserver;
|
|
8
|
+
#waitingForRouteUpgrade = false;
|
|
5
9
|
static get observedAttributes() {
|
|
6
10
|
return ['hash-mode', 'guard'];
|
|
7
11
|
}
|
|
8
12
|
connectedCallback() {
|
|
13
|
+
this.#observeRoutes();
|
|
9
14
|
this.#bootstrap();
|
|
10
15
|
}
|
|
11
16
|
disconnectedCallback() {
|
|
17
|
+
this.#routeObserver?.disconnect();
|
|
12
18
|
this.#teardown();
|
|
13
19
|
}
|
|
14
20
|
attributeChangedCallback(name, oldValue, newValue) {
|
|
@@ -26,15 +32,22 @@ export class RouterElement extends HTMLElement {
|
|
|
26
32
|
this.#router?.back();
|
|
27
33
|
}
|
|
28
34
|
#bootstrap() {
|
|
35
|
+
const outlet = this.#ensureOutlet();
|
|
36
|
+
const routeCandidates = Array.from(this.querySelectorAll(RouteElement.tag)).filter((routeElement) => !outlet.contains(routeElement));
|
|
37
|
+
const routeElements = routeCandidates.filter((routeElement) => routeElement instanceof RouteElement);
|
|
38
|
+
if (routeElements.length !== routeCandidates.length) {
|
|
39
|
+
this.#waitForRouteUpgrade();
|
|
40
|
+
return;
|
|
41
|
+
}
|
|
29
42
|
this.#teardown();
|
|
30
|
-
const routes = this.#collectRoutes();
|
|
43
|
+
const routes = this.#collectRoutes(routeElements);
|
|
31
44
|
if (routes.length === 0) {
|
|
32
45
|
console.warn('[wavelength-router] No <wavelength-route> children found.');
|
|
33
46
|
return;
|
|
34
47
|
}
|
|
35
48
|
const guard = this.#resolveGuard();
|
|
36
49
|
this.#router = new Router(routes, {
|
|
37
|
-
outlet
|
|
50
|
+
outlet,
|
|
38
51
|
hashMode: this.hasAttribute('hash-mode'),
|
|
39
52
|
...(guard ? { beforeEach: guard } : {}),
|
|
40
53
|
}, {
|
|
@@ -45,13 +58,47 @@ export class RouterElement extends HTMLElement {
|
|
|
45
58
|
}
|
|
46
59
|
#teardown() {
|
|
47
60
|
this.#router?.destroy();
|
|
61
|
+
this.#router = undefined;
|
|
48
62
|
}
|
|
49
|
-
#collectRoutes() {
|
|
50
|
-
const routeElements = Array.from(this.querySelectorAll('wavelength-route'));
|
|
63
|
+
#collectRoutes(routeElements) {
|
|
51
64
|
return routeElements
|
|
52
65
|
.map((routeElement) => routeElement.toDefinition({ document }))
|
|
53
66
|
.filter((routeDefinition) => routeDefinition !== null);
|
|
54
67
|
}
|
|
68
|
+
#observeRoutes() {
|
|
69
|
+
this.#routeObserver = new MutationObserver((records) => {
|
|
70
|
+
const hasRouteChange = records.some((record) => !this.#isInOutlet(record.target) &&
|
|
71
|
+
[...record.addedNodes, ...record.removedNodes].some((node) => this.#containsRouteElement(node)));
|
|
72
|
+
if (hasRouteChange)
|
|
73
|
+
this.#bootstrap();
|
|
74
|
+
});
|
|
75
|
+
this.#routeObserver.observe(this, { childList: true, subtree: true });
|
|
76
|
+
}
|
|
77
|
+
#containsRouteElement(node) {
|
|
78
|
+
return (node instanceof Element &&
|
|
79
|
+
(node.localName === RouteElement.tag ||
|
|
80
|
+
node.querySelector(RouteElement.tag) !== null));
|
|
81
|
+
}
|
|
82
|
+
#isInOutlet(node) {
|
|
83
|
+
return node === this.#outlet || this.#outlet?.contains(node) === true;
|
|
84
|
+
}
|
|
85
|
+
#ensureOutlet() {
|
|
86
|
+
if (this.#outlet?.parentElement === this)
|
|
87
|
+
return this.#outlet;
|
|
88
|
+
this.#outlet = document.createElement('div');
|
|
89
|
+
this.appendChild(this.#outlet);
|
|
90
|
+
return this.#outlet;
|
|
91
|
+
}
|
|
92
|
+
#waitForRouteUpgrade() {
|
|
93
|
+
if (this.#waitingForRouteUpgrade)
|
|
94
|
+
return;
|
|
95
|
+
this.#waitingForRouteUpgrade = true;
|
|
96
|
+
void customElements.whenDefined(RouteElement.tag).then(() => {
|
|
97
|
+
this.#waitingForRouteUpgrade = false;
|
|
98
|
+
if (this.isConnected)
|
|
99
|
+
this.#bootstrap();
|
|
100
|
+
});
|
|
101
|
+
}
|
|
55
102
|
#resolveGuard() {
|
|
56
103
|
const guardName = this.getAttribute('guard');
|
|
57
104
|
if (!guardName)
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"RouterElement.js","sourceRoot":"","sources":["../../src/elements/RouterElement.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;
|
|
1
|
+
{"version":3,"file":"RouterElement.js","sourceRoot":"","sources":["../../src/elements/RouterElement.ts"],"names":[],"mappings":"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"}
|