crelte 0.1.0 → 0.1.2
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.
- package/dist/Crelte.d.ts +89 -25
- package/dist/Crelte.d.ts.map +1 -1
- package/dist/Crelte.js +79 -38
- package/dist/CrelteRequest.d.ts +63 -0
- package/dist/CrelteRequest.d.ts.map +1 -0
- package/dist/CrelteRequest.js +94 -0
- package/dist/blocks/Blocks.d.ts +27 -3
- package/dist/blocks/Blocks.d.ts.map +1 -1
- package/dist/blocks/Blocks.js +8 -0
- package/dist/blocks/Blocks.svelte +1 -1
- package/dist/blocks/Blocks.svelte.d.ts +36 -4
- package/dist/blocks/Blocks.svelte.d.ts.map +1 -1
- package/dist/blocks/index.d.ts +6 -3
- package/dist/blocks/index.d.ts.map +1 -1
- package/dist/blocks/index.js +3 -2
- package/dist/cookies/ServerCookies.d.ts +1 -1
- package/dist/cookies/ServerCookies.d.ts.map +1 -1
- package/dist/cookies/index.d.ts +7 -0
- package/dist/cookies/index.d.ts.map +1 -1
- package/dist/graphql/GraphQl.d.ts +53 -14
- package/dist/graphql/GraphQl.d.ts.map +1 -1
- package/dist/graphql/GraphQl.js +44 -23
- package/dist/graphql/index.d.ts +1 -1
- package/dist/graphql/index.d.ts.map +1 -1
- package/dist/graphql/index.js +2 -2
- package/dist/index.d.ts +55 -22
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +50 -23
- package/dist/init/client.d.ts +43 -2
- package/dist/init/client.d.ts.map +1 -1
- package/dist/init/client.js +26 -6
- package/dist/init/server.d.ts +49 -2
- package/dist/init/server.d.ts.map +1 -1
- package/dist/init/server.js +56 -6
- package/dist/init/shared.d.ts +5 -4
- package/dist/init/shared.d.ts.map +1 -1
- package/dist/init/shared.js +3 -3
- package/dist/loadData/Globals.d.ts +41 -2
- package/dist/loadData/Globals.d.ts.map +1 -1
- package/dist/loadData/Globals.js +33 -5
- package/dist/loadData/index.d.ts +74 -11
- package/dist/loadData/index.d.ts.map +1 -1
- package/dist/loadData/index.js +5 -8
- package/dist/plugins/Events.d.ts +18 -5
- package/dist/plugins/Events.d.ts.map +1 -1
- package/dist/plugins/Events.js +3 -0
- package/dist/plugins/Plugins.d.ts +28 -2
- package/dist/plugins/Plugins.d.ts.map +1 -1
- package/dist/plugins/Plugins.js +8 -0
- package/dist/routing/History.d.ts +6 -3
- package/dist/routing/History.d.ts.map +1 -1
- package/dist/routing/History.js +7 -1
- package/dist/routing/InnerRouter.d.ts +10 -9
- package/dist/routing/InnerRouter.d.ts.map +1 -1
- package/dist/routing/InnerRouter.js +47 -35
- package/dist/routing/PageLoader.d.ts +5 -5
- package/dist/routing/PageLoader.d.ts.map +1 -1
- package/dist/routing/PageLoader.js +7 -7
- package/dist/routing/Request.d.ts +102 -0
- package/dist/routing/Request.d.ts.map +1 -0
- package/dist/routing/Request.js +128 -0
- package/dist/routing/Route.d.ts +73 -5
- package/dist/routing/Route.d.ts.map +1 -1
- package/dist/routing/Route.js +71 -6
- package/dist/routing/Router.d.ts +59 -52
- package/dist/routing/Router.d.ts.map +1 -1
- package/dist/routing/Router.js +95 -116
- package/dist/routing/Site.d.ts +1 -1
- package/dist/routing/Site.js +1 -1
- package/dist/routing/index.d.ts +4 -3
- package/dist/routing/index.d.ts.map +1 -1
- package/dist/routing/index.js +2 -1
- package/dist/ssr/SsrCache.d.ts +17 -0
- package/dist/ssr/SsrCache.d.ts.map +1 -1
- package/dist/ssr/SsrCache.js +17 -4
- package/dist/ssr/SsrComponents.d.ts +1 -0
- package/dist/ssr/SsrComponents.d.ts.map +1 -1
- package/dist/ssr/SsrComponents.js +1 -0
- package/package.json +6 -6
- package/src/Crelte.ts +124 -52
- package/src/CrelteRequest.ts +124 -0
- package/src/blocks/Blocks.svelte +35 -18
- package/src/blocks/Blocks.ts +38 -6
- package/src/blocks/index.ts +19 -10
- package/src/cookies/ServerCookies.ts +1 -1
- package/src/cookies/index.ts +7 -1
- package/src/graphql/GraphQl.ts +79 -27
- package/src/graphql/index.ts +7 -1
- package/src/index.ts +65 -29
- package/src/init/client.ts +55 -10
- package/src/init/server.ts +70 -10
- package/src/init/shared.ts +8 -7
- package/src/loadData/Globals.ts +43 -7
- package/src/loadData/index.ts +76 -13
- package/src/plugins/Events.ts +16 -5
- package/src/plugins/Plugins.ts +28 -2
- package/src/routing/History.ts +13 -4
- package/src/routing/InnerRouter.ts +55 -39
- package/src/routing/PageLoader.ts +10 -10
- package/src/routing/Request.ts +175 -0
- package/src/routing/Route.ts +73 -8
- package/src/routing/Router.ts +108 -162
- package/src/routing/Site.ts +1 -1
- package/src/routing/index.ts +12 -3
- package/src/ssr/SsrCache.ts +17 -4
- package/src/ssr/SsrComponents.ts +1 -0
- package/dist/CrelteBase.d.ts +0 -16
- package/dist/CrelteBase.d.ts.map +0 -1
- package/dist/CrelteBase.js +0 -1
- package/dist/CrelteRouted.d.ts +0 -50
- package/dist/CrelteRouted.d.ts.map +0 -1
- package/dist/CrelteRouted.js +0 -88
- package/src/CrelteBase.ts +0 -24
- package/src/CrelteRouted.ts +0 -128
|
@@ -0,0 +1,128 @@
|
|
|
1
|
+
import { Barrier } from 'crelte-std/sync';
|
|
2
|
+
import Route from './Route.js';
|
|
3
|
+
/**
|
|
4
|
+
* A Request is a Route with some extra options
|
|
5
|
+
* you get a Request from the onRequest event or
|
|
6
|
+
* in a loadGlobal function.
|
|
7
|
+
*/
|
|
8
|
+
export default class Request extends Route {
|
|
9
|
+
/**
|
|
10
|
+
* Disable scrolling for this request
|
|
11
|
+
* @default false
|
|
12
|
+
*/
|
|
13
|
+
disableScroll;
|
|
14
|
+
/** @hidden */
|
|
15
|
+
_renderBarrier;
|
|
16
|
+
/**
|
|
17
|
+
* Create a new Request
|
|
18
|
+
*/
|
|
19
|
+
constructor(url, site, opts = {}) {
|
|
20
|
+
super(url, site, opts);
|
|
21
|
+
this.disableScroll = opts.disableScroll ?? false;
|
|
22
|
+
this._renderBarrier = new RenderBarrier();
|
|
23
|
+
}
|
|
24
|
+
/**
|
|
25
|
+
* Create a Request from a Route
|
|
26
|
+
*/
|
|
27
|
+
static fromRoute(route) {
|
|
28
|
+
return new Request(route.url.href, route.site, {
|
|
29
|
+
scrollY: route.scrollY ?? undefined,
|
|
30
|
+
index: route.index,
|
|
31
|
+
origin: route.origin,
|
|
32
|
+
});
|
|
33
|
+
}
|
|
34
|
+
/**
|
|
35
|
+
* With delayRender you can make sure that the render waits
|
|
36
|
+
* until you are ready. This is useful for building page transitions.
|
|
37
|
+
*
|
|
38
|
+
* ## Important
|
|
39
|
+
* If you call delayRender you need to call `ready/remove` or the render
|
|
40
|
+
* will never happen
|
|
41
|
+
*
|
|
42
|
+
* ## Example
|
|
43
|
+
* ```
|
|
44
|
+
* import { onRequest } from 'crelte';
|
|
45
|
+
* import { animate } from 'motion';
|
|
46
|
+
*
|
|
47
|
+
* onRequest(async req => {
|
|
48
|
+
* if (req.origin !== 'click' && req.origin !== 'manual') return;
|
|
49
|
+
*
|
|
50
|
+
* const delay = req.delayRender();
|
|
51
|
+
*
|
|
52
|
+
* await animate(plane, { x: '0%' });
|
|
53
|
+
*
|
|
54
|
+
* // wait until the new page is ready to be rendered
|
|
55
|
+
* // if the render was cancelled we return
|
|
56
|
+
* if (await delay.ready()) return;
|
|
57
|
+
*
|
|
58
|
+
* await animate(plane, { x: '100%' });
|
|
59
|
+
* });
|
|
60
|
+
* ```
|
|
61
|
+
*/
|
|
62
|
+
delayRender() {
|
|
63
|
+
return this._renderBarrier.add();
|
|
64
|
+
}
|
|
65
|
+
/**
|
|
66
|
+
* Create a copy of the request
|
|
67
|
+
*/
|
|
68
|
+
clone() {
|
|
69
|
+
return new Request(this.url.href, this.site, {
|
|
70
|
+
scrollY: this.scrollY ?? undefined,
|
|
71
|
+
index: this.index,
|
|
72
|
+
origin: this.origin,
|
|
73
|
+
disableScroll: this.disableScroll,
|
|
74
|
+
});
|
|
75
|
+
}
|
|
76
|
+
/**
|
|
77
|
+
* Create a Route from the Request
|
|
78
|
+
*/
|
|
79
|
+
toRoute() {
|
|
80
|
+
return new Route(this.url.href, this.site, {
|
|
81
|
+
scrollY: this.scrollY ?? undefined,
|
|
82
|
+
index: this.index,
|
|
83
|
+
origin: this.origin,
|
|
84
|
+
});
|
|
85
|
+
}
|
|
86
|
+
}
|
|
87
|
+
export function isRequest(req) {
|
|
88
|
+
return typeof req === 'object' && req !== null && req instanceof Request;
|
|
89
|
+
}
|
|
90
|
+
class RenderBarrier {
|
|
91
|
+
inner;
|
|
92
|
+
cancelled;
|
|
93
|
+
root;
|
|
94
|
+
constructor() {
|
|
95
|
+
this.inner = new Barrier();
|
|
96
|
+
this.cancelled = false;
|
|
97
|
+
this.root = this.add();
|
|
98
|
+
}
|
|
99
|
+
isOpen() {
|
|
100
|
+
return this.inner.isOpen();
|
|
101
|
+
}
|
|
102
|
+
add() {
|
|
103
|
+
const action = this.inner.add();
|
|
104
|
+
return {
|
|
105
|
+
ready: async () => {
|
|
106
|
+
if (!this.inner.isOpen())
|
|
107
|
+
await action.ready(null);
|
|
108
|
+
return this.cancelled;
|
|
109
|
+
},
|
|
110
|
+
remove: () => {
|
|
111
|
+
if (!this.inner.isOpen())
|
|
112
|
+
action.remove();
|
|
113
|
+
},
|
|
114
|
+
};
|
|
115
|
+
}
|
|
116
|
+
/** @hidden */
|
|
117
|
+
cancel() {
|
|
118
|
+
if (this.inner.isOpen())
|
|
119
|
+
return;
|
|
120
|
+
this.cancelled = true;
|
|
121
|
+
this.root.remove();
|
|
122
|
+
}
|
|
123
|
+
// returns if the render was cancelled
|
|
124
|
+
/** @hidden */
|
|
125
|
+
ready() {
|
|
126
|
+
return this.root.ready();
|
|
127
|
+
}
|
|
128
|
+
}
|
package/dist/routing/Route.d.ts
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import Site from './Site.js';
|
|
2
|
-
export type
|
|
2
|
+
export type RouteOptions = {
|
|
3
3
|
scrollY?: number;
|
|
4
4
|
index?: number;
|
|
5
5
|
origin?: RouteOrigin;
|
|
@@ -41,27 +41,74 @@ export default class Route {
|
|
|
41
41
|
*/
|
|
42
42
|
index: number;
|
|
43
43
|
/**
|
|
44
|
-
* The origin of this route
|
|
45
|
-
*
|
|
46
|
-
* Might pop, click or init (non exclusive)
|
|
44
|
+
* The origin of this route, See [[RouteOrigin]]
|
|
47
45
|
*/
|
|
48
46
|
origin: RouteOrigin;
|
|
49
47
|
/**
|
|
50
48
|
* Creates a new Route
|
|
51
49
|
*/
|
|
52
|
-
constructor(url: string | URL, site: Site | null, opts?:
|
|
50
|
+
constructor(url: string | URL, site: Site | null, opts?: RouteOptions);
|
|
53
51
|
/**
|
|
54
52
|
* Returns the uri of the route
|
|
55
53
|
*
|
|
56
54
|
* Never ends with a slash
|
|
55
|
+
*
|
|
56
|
+
* ## Example
|
|
57
|
+
* ```
|
|
58
|
+
* const route = new Route('https://example.com/foo/bar/', null);
|
|
59
|
+
* console.log(route.uri); // '/foo/bar'
|
|
60
|
+
*
|
|
61
|
+
* const site = _; // site with url https://example.com/foo
|
|
62
|
+
* const route2 = new Route('https://example.com/foo/bar/?a=1', site);
|
|
63
|
+
* console.log(route2.uri); // '/bar'
|
|
64
|
+
* ```
|
|
57
65
|
*/
|
|
58
66
|
get uri(): string;
|
|
59
67
|
/**
|
|
68
|
+
* Returns the base url of the route
|
|
69
|
+
*
|
|
60
70
|
* Never ends with a slash
|
|
71
|
+
*
|
|
72
|
+
* ## Example
|
|
73
|
+
* ```
|
|
74
|
+
* const route = new Route('https://example.com/foo/bar/', null);
|
|
75
|
+
* console.log(route.baseUrl); // 'https://example.com'
|
|
76
|
+
*
|
|
77
|
+
* const site = _; // site with url https://example.com/foo
|
|
78
|
+
* const route2 = new Route('https://example.com/foo/bar/', site);
|
|
79
|
+
* console.log(route2.baseUrl); // 'https://example.com/foo'
|
|
80
|
+
* ```
|
|
61
81
|
*/
|
|
62
82
|
get baseUrl(): string;
|
|
83
|
+
/**
|
|
84
|
+
* Returns the search params
|
|
85
|
+
*
|
|
86
|
+
* ## Note
|
|
87
|
+
* You might also have a look at `getSearchParam` and `setSearchParam`
|
|
88
|
+
*
|
|
89
|
+
* ## Example
|
|
90
|
+
* ```
|
|
91
|
+
* const route = new Route('https://example.com/foo/bar/?a=1&b=2', null);
|
|
92
|
+
* console.log(route.search.get('a')); // '1'
|
|
93
|
+
* ```
|
|
94
|
+
*/
|
|
63
95
|
get search(): URLSearchParams;
|
|
96
|
+
/**
|
|
97
|
+
* Returns the hash of the route
|
|
98
|
+
*
|
|
99
|
+
* ## Example
|
|
100
|
+
* ```
|
|
101
|
+
* const route = new Route('https://example.com/foo/bar/#hash', null);
|
|
102
|
+
* console.log(route.hash); // '#hash'
|
|
103
|
+
* ```
|
|
104
|
+
*/
|
|
64
105
|
get hash(): string;
|
|
106
|
+
/**
|
|
107
|
+
* Checks if the route is equal to another route
|
|
108
|
+
*
|
|
109
|
+
* This checks all properties of the url but search params do not have to be
|
|
110
|
+
* in the same order
|
|
111
|
+
*/
|
|
65
112
|
eq(route: Route): boolean;
|
|
66
113
|
/**
|
|
67
114
|
* Checks if there are previous routes which would allow it to go back
|
|
@@ -69,14 +116,35 @@ export default class Route {
|
|
|
69
116
|
canGoBack(): boolean;
|
|
70
117
|
/**
|
|
71
118
|
* Gets the search param
|
|
119
|
+
*
|
|
120
|
+
* ## Example
|
|
121
|
+
* ```
|
|
122
|
+
* const route = new Route('https://example.com/foo/bar/?a=1&b=2', null);
|
|
123
|
+
* console.log(route.getSearchParam('a')); // '1'
|
|
124
|
+
* ```
|
|
72
125
|
*/
|
|
73
126
|
getSearchParam(key: string): string | null;
|
|
74
127
|
/**
|
|
75
128
|
* Sets the search param or removes it if the value is null or undefined
|
|
129
|
+
*
|
|
130
|
+
* ## Example
|
|
131
|
+
* ```
|
|
132
|
+
* const route = new Route('https://example.com/foo/bar/?a=1&b=2', null);
|
|
133
|
+
* route.setSearchParam('a', '3');
|
|
134
|
+
* console.log(route.url.href); // 'https://example.com/foo/bar/?a=3&b=2'
|
|
135
|
+
*
|
|
136
|
+
* route.setSearchParam('a', null);
|
|
137
|
+
* console.log(route.url.href); // 'https://example.com/foo/bar/?b=2'
|
|
138
|
+
* ```
|
|
76
139
|
*/
|
|
77
140
|
setSearchParam(key: string, value?: string | number | null): void;
|
|
141
|
+
/**
|
|
142
|
+
* Create a copy of the request
|
|
143
|
+
*/
|
|
78
144
|
clone(): Route;
|
|
145
|
+
/** @hidden */
|
|
79
146
|
_fillFromState(state: any): void;
|
|
147
|
+
/** @hidden */
|
|
80
148
|
_toState(): any;
|
|
81
149
|
}
|
|
82
150
|
//# sourceMappingURL=Route.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Route.d.ts","sourceRoot":"","sources":["../../../../src/routing/Route.ts"],"names":[],"mappings":"AACA,OAAO,IAAI,MAAM,WAAW,CAAC;AAE7B,MAAM,MAAM,
|
|
1
|
+
{"version":3,"file":"Route.d.ts","sourceRoot":"","sources":["../../../../src/routing/Route.ts"],"names":[],"mappings":"AACA,OAAO,IAAI,MAAM,WAAW,CAAC;AAE7B,MAAM,MAAM,YAAY,GAAG;IAC1B,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,WAAW,CAAC;CACrB,CAAC;AAEF;;;;;;;;;GASG;AACH,MAAM,MAAM,WAAW,GACpB,MAAM,GACN,mBAAmB,GACnB,QAAQ,GACR,OAAO,GACP,KAAK,CAAC;AAET;;;;;;GAMG;AACH,MAAM,CAAC,OAAO,OAAO,KAAK;IACzB;;OAEG;IACH,GAAG,EAAE,GAAG,CAAC;IAET;;OAEG;IACH,IAAI,EAAE,IAAI,GAAG,IAAI,CAAC;IAElB;;OAEG;IACH,OAAO,EAAE,MAAM,GAAG,IAAI,CAAC;IAEvB;;;OAGG;IACH,KAAK,EAAE,MAAM,CAAC;IAEd;;OAEG;IACH,MAAM,EAAE,WAAW,CAAC;IAEpB;;OAEG;gBACS,GAAG,EAAE,MAAM,GAAG,GAAG,EAAE,IAAI,EAAE,IAAI,GAAG,IAAI,EAAE,IAAI,GAAE,YAAiB;IASzE;;;;;;;;;;;;;;OAcG;IACH,IAAI,GAAG,IAAI,MAAM,CAShB;IAED;;;;;;;;;;;;;;OAcG;IACH,IAAI,OAAO,IAAI,MAAM,CAIpB;IAED;;;;;;;;;;;OAWG;IACH,IAAI,MAAM,IAAI,eAAe,CAE5B;IAED;;;;;;;;OAQG;IACH,IAAI,IAAI,IAAI,MAAM,CAEjB;IAED;;;;;OAKG;IACH,EAAE,CAAC,KAAK,EAAE,KAAK;IAwBf;;OAEG;IACH,SAAS,IAAI,OAAO;IAIpB;;;;;;;;OAQG;IACH,cAAc,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI;IAI1C;;;;;;;;;;;;OAYG;IACH,cAAc,CAAC,GAAG,EAAE,MAAM,EAAE,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI;IAQ1D;;OAEG;IACH,KAAK;IAQL,cAAc;IACd,cAAc,CAAC,KAAK,EAAE,GAAG;IAQzB,cAAc;IACd,QAAQ,IAAI,GAAG;CAQf"}
|
package/dist/routing/Route.js
CHANGED
|
@@ -25,9 +25,7 @@ export default class Route {
|
|
|
25
25
|
*/
|
|
26
26
|
index;
|
|
27
27
|
/**
|
|
28
|
-
* The origin of this route
|
|
29
|
-
*
|
|
30
|
-
* Might pop, click or init (non exclusive)
|
|
28
|
+
* The origin of this route, See [[RouteOrigin]]
|
|
31
29
|
*/
|
|
32
30
|
origin;
|
|
33
31
|
/**
|
|
@@ -44,6 +42,16 @@ export default class Route {
|
|
|
44
42
|
* Returns the uri of the route
|
|
45
43
|
*
|
|
46
44
|
* Never ends with a slash
|
|
45
|
+
*
|
|
46
|
+
* ## Example
|
|
47
|
+
* ```
|
|
48
|
+
* const route = new Route('https://example.com/foo/bar/', null);
|
|
49
|
+
* console.log(route.uri); // '/foo/bar'
|
|
50
|
+
*
|
|
51
|
+
* const site = _; // site with url https://example.com/foo
|
|
52
|
+
* const route2 = new Route('https://example.com/foo/bar/?a=1', site);
|
|
53
|
+
* console.log(route2.uri); // '/bar'
|
|
54
|
+
* ```
|
|
47
55
|
*/
|
|
48
56
|
get uri() {
|
|
49
57
|
// todo check if this is correct
|
|
@@ -52,21 +60,59 @@ export default class Route {
|
|
|
52
60
|
}
|
|
53
61
|
return trimSlashEnd(this.url.pathname);
|
|
54
62
|
}
|
|
55
|
-
// todo is this correct and do we wan't it?
|
|
56
63
|
/**
|
|
64
|
+
* Returns the base url of the route
|
|
65
|
+
*
|
|
57
66
|
* Never ends with a slash
|
|
67
|
+
*
|
|
68
|
+
* ## Example
|
|
69
|
+
* ```
|
|
70
|
+
* const route = new Route('https://example.com/foo/bar/', null);
|
|
71
|
+
* console.log(route.baseUrl); // 'https://example.com'
|
|
72
|
+
*
|
|
73
|
+
* const site = _; // site with url https://example.com/foo
|
|
74
|
+
* const route2 = new Route('https://example.com/foo/bar/', site);
|
|
75
|
+
* console.log(route2.baseUrl); // 'https://example.com/foo'
|
|
76
|
+
* ```
|
|
58
77
|
*/
|
|
59
78
|
get baseUrl() {
|
|
60
79
|
if (this.site)
|
|
61
80
|
return trimSlashEnd(this.site.url.href);
|
|
62
81
|
return this.url.origin;
|
|
63
82
|
}
|
|
83
|
+
/**
|
|
84
|
+
* Returns the search params
|
|
85
|
+
*
|
|
86
|
+
* ## Note
|
|
87
|
+
* You might also have a look at `getSearchParam` and `setSearchParam`
|
|
88
|
+
*
|
|
89
|
+
* ## Example
|
|
90
|
+
* ```
|
|
91
|
+
* const route = new Route('https://example.com/foo/bar/?a=1&b=2', null);
|
|
92
|
+
* console.log(route.search.get('a')); // '1'
|
|
93
|
+
* ```
|
|
94
|
+
*/
|
|
64
95
|
get search() {
|
|
65
96
|
return this.url.searchParams;
|
|
66
97
|
}
|
|
98
|
+
/**
|
|
99
|
+
* Returns the hash of the route
|
|
100
|
+
*
|
|
101
|
+
* ## Example
|
|
102
|
+
* ```
|
|
103
|
+
* const route = new Route('https://example.com/foo/bar/#hash', null);
|
|
104
|
+
* console.log(route.hash); // '#hash'
|
|
105
|
+
* ```
|
|
106
|
+
*/
|
|
67
107
|
get hash() {
|
|
68
108
|
return this.url.hash;
|
|
69
109
|
}
|
|
110
|
+
/**
|
|
111
|
+
* Checks if the route is equal to another route
|
|
112
|
+
*
|
|
113
|
+
* This checks all properties of the url but search params do not have to be
|
|
114
|
+
* in the same order
|
|
115
|
+
*/
|
|
70
116
|
eq(route) {
|
|
71
117
|
const searchEq = (a, b) => {
|
|
72
118
|
if (a.size !== b.size)
|
|
@@ -93,12 +139,28 @@ export default class Route {
|
|
|
93
139
|
}
|
|
94
140
|
/**
|
|
95
141
|
* Gets the search param
|
|
142
|
+
*
|
|
143
|
+
* ## Example
|
|
144
|
+
* ```
|
|
145
|
+
* const route = new Route('https://example.com/foo/bar/?a=1&b=2', null);
|
|
146
|
+
* console.log(route.getSearchParam('a')); // '1'
|
|
147
|
+
* ```
|
|
96
148
|
*/
|
|
97
149
|
getSearchParam(key) {
|
|
98
150
|
return this.search.get(key);
|
|
99
151
|
}
|
|
100
152
|
/**
|
|
101
153
|
* Sets the search param or removes it if the value is null or undefined
|
|
154
|
+
*
|
|
155
|
+
* ## Example
|
|
156
|
+
* ```
|
|
157
|
+
* const route = new Route('https://example.com/foo/bar/?a=1&b=2', null);
|
|
158
|
+
* route.setSearchParam('a', '3');
|
|
159
|
+
* console.log(route.url.href); // 'https://example.com/foo/bar/?a=3&b=2'
|
|
160
|
+
*
|
|
161
|
+
* route.setSearchParam('a', null);
|
|
162
|
+
* console.log(route.url.href); // 'https://example.com/foo/bar/?b=2'
|
|
163
|
+
* ```
|
|
102
164
|
*/
|
|
103
165
|
setSearchParam(key, value) {
|
|
104
166
|
if (typeof value !== 'undefined' && value !== null) {
|
|
@@ -108,6 +170,9 @@ export default class Route {
|
|
|
108
170
|
this.search.delete(key);
|
|
109
171
|
}
|
|
110
172
|
}
|
|
173
|
+
/**
|
|
174
|
+
* Create a copy of the request
|
|
175
|
+
*/
|
|
111
176
|
clone() {
|
|
112
177
|
return new Route(this.url.href, this.site, {
|
|
113
178
|
scrollY: this.scrollY ?? undefined,
|
|
@@ -115,14 +180,14 @@ export default class Route {
|
|
|
115
180
|
origin: this.origin,
|
|
116
181
|
});
|
|
117
182
|
}
|
|
118
|
-
|
|
183
|
+
/** @hidden */
|
|
119
184
|
_fillFromState(state) {
|
|
120
185
|
if (typeof state?.route?.scrollY === 'number')
|
|
121
186
|
this.scrollY = state.route.scrollY;
|
|
122
187
|
if (typeof state?.route?.index === 'number')
|
|
123
188
|
this.index = state.route.index;
|
|
124
189
|
}
|
|
125
|
-
|
|
190
|
+
/** @hidden */
|
|
126
191
|
_toState() {
|
|
127
192
|
return {
|
|
128
193
|
route: {
|
package/dist/routing/Router.d.ts
CHANGED
|
@@ -2,7 +2,8 @@ import Route from './Route.js';
|
|
|
2
2
|
import Site, { SiteFromGraphQl } from './Site.js';
|
|
3
3
|
import { LoadFn } from './PageLoader.js';
|
|
4
4
|
import { Readable } from 'crelte-std/stores';
|
|
5
|
-
|
|
5
|
+
import Request from './Request.js';
|
|
6
|
+
export type RouterOptions = {
|
|
6
7
|
preloadOnMouseOver?: boolean;
|
|
7
8
|
debugTiming?: boolean;
|
|
8
9
|
};
|
|
@@ -10,26 +11,20 @@ export type RouterOpts = {
|
|
|
10
11
|
* internal only
|
|
11
12
|
*/
|
|
12
13
|
type Internal = {
|
|
13
|
-
onLoaded: (success: boolean,
|
|
14
|
+
onLoaded: (success: boolean, req: Request, site: Site, ready: () => any) => void;
|
|
14
15
|
onLoad: LoadFn;
|
|
15
|
-
domReady: (
|
|
16
|
+
domReady: (req: Request) => void;
|
|
16
17
|
initClient: () => void;
|
|
17
18
|
initServer: (url: string, acceptLang?: string) => Promise<ServerInited>;
|
|
18
19
|
};
|
|
19
20
|
type ServerInited = {
|
|
20
21
|
success: boolean;
|
|
21
22
|
redirect: boolean;
|
|
22
|
-
|
|
23
|
+
req: Request;
|
|
23
24
|
site: Site;
|
|
24
25
|
props: any;
|
|
25
26
|
};
|
|
26
27
|
export declare function trimSlashEnd(str: string): string;
|
|
27
|
-
export type OnNextRouteOpts = {
|
|
28
|
-
/**
|
|
29
|
-
* If you call delayRender you need to call ready or the render will never happen
|
|
30
|
-
*/
|
|
31
|
-
delayRender: () => DelayRender;
|
|
32
|
-
};
|
|
33
28
|
export default class Router {
|
|
34
29
|
/**
|
|
35
30
|
* The current route
|
|
@@ -39,14 +34,7 @@ export default class Router {
|
|
|
39
34
|
* The current site
|
|
40
35
|
*/
|
|
41
36
|
private _site;
|
|
42
|
-
|
|
43
|
-
* The next route which is currently being loaded
|
|
44
|
-
*/
|
|
45
|
-
private _nextRoute;
|
|
46
|
-
/**
|
|
47
|
-
* The next site which is currently being loaded
|
|
48
|
-
*/
|
|
49
|
-
private _nextSite;
|
|
37
|
+
private _request;
|
|
50
38
|
/**
|
|
51
39
|
* The loading flag, specifies if a page is currently
|
|
52
40
|
* getting loaded
|
|
@@ -57,41 +45,30 @@ export default class Router {
|
|
|
57
45
|
*/
|
|
58
46
|
private _loadingProgress;
|
|
59
47
|
private _onRouteEv;
|
|
60
|
-
private
|
|
61
|
-
|
|
48
|
+
private _onRequest;
|
|
49
|
+
/** @hidden */
|
|
62
50
|
_internal: Internal;
|
|
63
51
|
private inner;
|
|
64
52
|
private pageLoader;
|
|
65
|
-
constructor(sites: SiteFromGraphQl[], opts?:
|
|
53
|
+
constructor(sites: SiteFromGraphQl[], opts?: RouterOptions);
|
|
66
54
|
/**
|
|
67
|
-
*
|
|
68
|
-
*
|
|
69
|
-
* this is a svelte store
|
|
55
|
+
* returns a store with the current route
|
|
70
56
|
*/
|
|
71
57
|
get route(): Readable<Route>;
|
|
72
58
|
/**
|
|
73
|
-
*
|
|
59
|
+
* returns a store with the current site
|
|
74
60
|
*/
|
|
75
61
|
get site(): Readable<Site>;
|
|
76
|
-
/**
|
|
77
|
-
* The next route which is currently being loaded
|
|
78
|
-
*/
|
|
79
|
-
get nextRoute(): Readable<Route>;
|
|
80
|
-
/**
|
|
81
|
-
* The next site which is currently being loaded
|
|
82
|
-
*/
|
|
83
|
-
get nextSite(): Readable<Site>;
|
|
84
62
|
/**
|
|
85
63
|
* The sites which are available
|
|
86
64
|
*/
|
|
87
65
|
get sites(): Site[];
|
|
88
66
|
/**
|
|
89
|
-
*
|
|
90
|
-
* getting loaded
|
|
67
|
+
* returns a store which indicates if the a page is loading
|
|
91
68
|
*/
|
|
92
69
|
get loading(): Readable<boolean>;
|
|
93
70
|
/**
|
|
94
|
-
*
|
|
71
|
+
* returns a store which indicates the loading progress between 0 and 1
|
|
95
72
|
*/
|
|
96
73
|
get loadingProgress(): Readable<number>;
|
|
97
74
|
/**
|
|
@@ -100,6 +77,17 @@ export default class Router {
|
|
|
100
77
|
* @param target the target to open can be an url or a route
|
|
101
78
|
* the url needs to start with http or with a / which will be considered as
|
|
102
79
|
* the site baseUrl
|
|
80
|
+
*
|
|
81
|
+
* ## Example
|
|
82
|
+
* ```
|
|
83
|
+
* import { getRouter } from 'crelte';
|
|
84
|
+
*
|
|
85
|
+
* const router = getRouter();
|
|
86
|
+
* console.log(router.site.get().url.href); // 'https://example.com/de';
|
|
87
|
+
*
|
|
88
|
+
* router.open('/foo/bar');
|
|
89
|
+
* // the following page will be opened https://example.com/de/foo/bar
|
|
90
|
+
* ```
|
|
103
91
|
*/
|
|
104
92
|
open(target: string | URL | Route): void;
|
|
105
93
|
/**
|
|
@@ -108,13 +96,35 @@ export default class Router {
|
|
|
108
96
|
* You can use this when using pagination for example change the route object
|
|
109
97
|
* (search argument) and then call pushState
|
|
110
98
|
*
|
|
111
|
-
*
|
|
99
|
+
* ## Example
|
|
100
|
+
* ```
|
|
101
|
+
* import { getRouter } from 'crelte';
|
|
102
|
+
*
|
|
103
|
+
* const router = getRouter();
|
|
104
|
+
*
|
|
105
|
+
* const page = 1;
|
|
106
|
+
* const route = router.route.get();
|
|
107
|
+
* route.setSearchParam('page', page > 0 ? page : null);
|
|
108
|
+
* router.pushState(route);
|
|
109
|
+
* ```
|
|
112
110
|
*/
|
|
113
111
|
pushState(route: Route): void;
|
|
114
112
|
/**
|
|
115
113
|
* This replaces the state of the route without triggering an event
|
|
116
114
|
*
|
|
117
|
-
*
|
|
115
|
+
* You can use this when using some filters for example a search filter
|
|
116
|
+
*
|
|
117
|
+
* ## Example
|
|
118
|
+
* ```
|
|
119
|
+
* import { getRouter } from 'crelte';
|
|
120
|
+
*
|
|
121
|
+
* const router = getRouter();
|
|
122
|
+
*
|
|
123
|
+
* const search = 'foo';
|
|
124
|
+
* const route = router.route.get();
|
|
125
|
+
* route.setSearchParam('search', search ? search : null);
|
|
126
|
+
* router.replaceState(route);
|
|
127
|
+
* ```
|
|
118
128
|
*/
|
|
119
129
|
replaceState(route: Route): void;
|
|
120
130
|
/**
|
|
@@ -134,29 +144,26 @@ export default class Router {
|
|
|
134
144
|
*
|
|
135
145
|
* This differs from router.route.subscribe in the way that
|
|
136
146
|
* it will only trigger if a new render / load will occur
|
|
147
|
+
*
|
|
148
|
+
* @returns a function to remove the listener
|
|
137
149
|
*/
|
|
138
150
|
onRoute(fn: (route: Route, site: Site) => void): () => void;
|
|
139
|
-
|
|
151
|
+
/**
|
|
152
|
+
* Add a listener for the onRequest event
|
|
153
|
+
*
|
|
154
|
+
* This will trigger every time a new route is requested
|
|
155
|
+
*
|
|
156
|
+
* @returns a function to remove the listener
|
|
157
|
+
*/
|
|
158
|
+
onRequest(fn: (req: Request, site: Site) => void): () => void;
|
|
140
159
|
private setNewRoute;
|
|
141
160
|
private _initClient;
|
|
142
161
|
private _initServer;
|
|
143
162
|
private _onRoute;
|
|
163
|
+
private destroyRequest;
|
|
144
164
|
private _onPreload;
|
|
145
165
|
private _onLoaded;
|
|
146
166
|
private _onProgress;
|
|
147
167
|
}
|
|
148
|
-
export type DelayRender = {
|
|
149
|
-
/**
|
|
150
|
-
* Call this when you're ready for the render to happen
|
|
151
|
-
* the promise will resolve when the render is done or was cancelled
|
|
152
|
-
*
|
|
153
|
-
* @returns if the render was cancelled
|
|
154
|
-
*/
|
|
155
|
-
ready: () => Promise<boolean>;
|
|
156
|
-
/**
|
|
157
|
-
* If youre not interested in the render anymore
|
|
158
|
-
*/
|
|
159
|
-
remove: () => void;
|
|
160
|
-
};
|
|
161
168
|
export {};
|
|
162
169
|
//# sourceMappingURL=Router.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Router.d.ts","sourceRoot":"","sources":["../../../../src/routing/Router.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,YAAY,CAAC;AAC/B,OAAO,IAAI,EAAE,EAAE,eAAe,EAAE,MAAM,WAAW,CAAC;AAElD,OAAmB,EAAE,MAAM,EAAgB,MAAM,iBAAiB,CAAC;AAEnE,OAAO,EAAE,QAAQ,EAAY,MAAM,mBAAmB,CAAC;
|
|
1
|
+
{"version":3,"file":"Router.d.ts","sourceRoot":"","sources":["../../../../src/routing/Router.ts"],"names":[],"mappings":"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"}
|