aberdeen 2.0.0 → 2.0.1
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/src/route.d.ts +8 -8
- package/dist/src/route.js +57 -64
- package/dist/src/route.js.map +3 -3
- package/dist/src/server.d.ts +2 -2
- package/dist/src/server.js.map +1 -1
- package/dist-docs/Tutorial/index.html +2 -2
- package/dist-docs/aberdeen/Aberdeen/index.html +31 -31
- package/dist-docs/aberdeen/InitOptions/index.html +3 -3
- package/dist-docs/aberdeen/KeyToString/index.html +2 -2
- package/dist-docs/aberdeen/PromiseProxy/index.html +5 -5
- package/dist-docs/aberdeen/SortKeyType/index.html +2 -2
- package/dist-docs/aberdeen/TargetType/index.html +2 -2
- package/dist-docs/aberdeen/ValueRef/index.html +2 -2
- package/dist-docs/aberdeen/WindowLike/index.html +3 -3
- package/dist-docs/aberdeen/createA/index.html +2 -2
- package/dist-docs/aberdeen/index.html +2 -2
- package/dist-docs/assets/aberdeen/route.d.ts +8 -8
- package/dist-docs/assets/aberdeen/route.js +57 -64
- package/dist-docs/assets/aberdeen/route.js.map +3 -3
- package/dist-docs/assets/aberdeen/server.d.ts +2 -2
- package/dist-docs/assets/aberdeen/server.js.map +1 -1
- package/dist-docs/assets/navigation.js +1 -1
- package/dist-docs/assets/search.js +1 -1
- package/dist-docs/dispatcher/Dispatcher/index.html +4 -4
- package/dist-docs/dispatcher/MATCH_FAILED/index.html +2 -2
- package/dist-docs/dispatcher/MATCH_REST/index.html +2 -2
- package/dist-docs/dispatcher/index.html +2 -2
- package/dist-docs/hierarchy.html +1 -1
- package/dist-docs/index-1/index.html +2 -2
- package/dist-docs/index.html +2 -2
- package/dist-docs/media/CHANGELOG.md +1 -1
- package/dist-docs/modules.html +1 -1
- package/dist-docs/prediction/applyCanon/index.html +2 -2
- package/dist-docs/prediction/applyPrediction/index.html +2 -2
- package/dist-docs/prediction/index.html +2 -2
- package/dist-docs/route/RouteApi/index.html +14 -14
- package/dist-docs/route/{Route → RouteState}/index.html +9 -9
- package/dist-docs/route/{init → createRoute}/index.html +2 -2
- package/dist-docs/route/index.html +4 -4
- package/dist-docs/server/RenderToStringOptions/index.html +4 -4
- package/dist-docs/server/RenderToStringResult/index.html +4 -4
- package/dist-docs/server/index.html +2 -2
- package/dist-docs/server/renderToString/index.html +2 -2
- package/dist-docs/sitemap.xml +36 -36
- package/dist-docs/transitions/grow/index.html +2 -2
- package/dist-docs/transitions/index.html +2 -2
- package/dist-docs/transitions/shrink/index.html +2 -2
- package/package.json +1 -1
- package/skill/aberdeen.md +45 -45
- package/skill/dispatcher.md +6 -6
- package/skill/prediction.md +3 -3
- package/skill/route.md +90 -90
- package/skill/transitions.md +3 -3
- package/src/route.ts +295 -319
- package/src/server.ts +2 -2
package/dist/src/route.d.ts
CHANGED
|
@@ -2,7 +2,7 @@ type NavType = "load" | "back" | "forward" | "go" | "push";
|
|
|
2
2
|
/**
|
|
3
3
|
* The class for the global `route` object.
|
|
4
4
|
*/
|
|
5
|
-
export interface
|
|
5
|
+
export interface RouteState {
|
|
6
6
|
/** The current path of the URL as a string. For instance `"/"` or `"/users/123/feed"`. Paths are normalized to always start with a `/` and never end with a `/` (unless it's the root path). */
|
|
7
7
|
path: string;
|
|
8
8
|
/** An convenience array containing path segments, mapping to `path`. For instance `[]` (for `"/"`) or `['users', '123', 'feed']` (for `"/users/123/feed"`). */
|
|
@@ -24,20 +24,20 @@ export interface Route {
|
|
|
24
24
|
*/
|
|
25
25
|
nav: NavType;
|
|
26
26
|
}
|
|
27
|
-
type RouteTarget = string | (string | number)[] | Partial<Omit<Omit<
|
|
27
|
+
type RouteTarget = string | (string | number)[] | Partial<Omit<Omit<RouteState, "p">, "search"> & {
|
|
28
28
|
/** An convenience array containing path segments, mapping to `path`. For instance `[]` (for `"/"`) or `['users', 123, 'feed']` (for `"/users/123/feed"`). Values may be integers but will be converted to strings.*/
|
|
29
29
|
p: (string | number)[];
|
|
30
30
|
/** The query string interpreted as search parameters. So `"a=x&b=y"` becomes `{a: "x", b: "y", c: 42}`. Values may be integers but will be converted to strings. */
|
|
31
31
|
search: Record<string, string | number>;
|
|
32
32
|
}>;
|
|
33
33
|
/**
|
|
34
|
-
* The router API returned by {@link
|
|
34
|
+
* The router API returned by {@link createRoute}, bound to a specific Aberdeen instance's window.
|
|
35
35
|
*/
|
|
36
36
|
export interface RouteApi {
|
|
37
37
|
/**
|
|
38
|
-
* The global {@link
|
|
38
|
+
* The global {@link RouteState} object reflecting the current URL and browser history state. Changes you make to this affect the current browser history item (modifying the URL if needed).
|
|
39
39
|
*/
|
|
40
|
-
current:
|
|
40
|
+
current: RouteState;
|
|
41
41
|
/**
|
|
42
42
|
* Configure logging on route changes.
|
|
43
43
|
* @param value `true` to enable logging to console, `false` to disable logging, or a custom logging function. Defaults to `false`.
|
|
@@ -48,7 +48,7 @@ export interface RouteApi {
|
|
|
48
48
|
*
|
|
49
49
|
* Note that this happens synchronously, immediately updating `route` and processing any reactive updates based on that.
|
|
50
50
|
*
|
|
51
|
-
* @param target A subset of the {@link
|
|
51
|
+
* @param target A subset of the {@link RouteState} properties to navigate to. If neither `p` nor `path` is given, the current path is used. For other properties, an empty/default value is assumed if not given. For convenience:
|
|
52
52
|
* - You may pass a string instead of an object, which is interpreted as the `path`.
|
|
53
53
|
* - You may pass an array instead of an object, which is interpreted as the `p` array.
|
|
54
54
|
* - If you pass `p`, it may contain numbers, which will be converted to strings.
|
|
@@ -100,7 +100,7 @@ export interface RouteApi {
|
|
|
100
100
|
*
|
|
101
101
|
* Consider using {@link up} to go up in the path hierarchy.
|
|
102
102
|
*
|
|
103
|
-
* @param target The target route to go back to. May be a subset of {@link
|
|
103
|
+
* @param target The target route to go back to. May be a subset of {@link RouteState}, or a string (for `path`), or an array of strings (for `p`).
|
|
104
104
|
*/
|
|
105
105
|
back(target?: RouteTarget): void;
|
|
106
106
|
/**
|
|
@@ -146,5 +146,5 @@ export interface RouteApi {
|
|
|
146
146
|
*
|
|
147
147
|
* @param A An Aberdeen instance (the default export of `aberdeen`, or one from `init`).
|
|
148
148
|
*/
|
|
149
|
-
export declare function
|
|
149
|
+
export declare function createRoute(A: any): RouteApi;
|
|
150
150
|
export {};
|
package/dist/src/route.js
CHANGED
|
@@ -1,5 +1,8 @@
|
|
|
1
1
|
// src/route.ts
|
|
2
|
-
function
|
|
2
|
+
function createRoute(A) {
|
|
3
|
+
const window = A.window;
|
|
4
|
+
const location = window.location;
|
|
5
|
+
const history = window.history;
|
|
3
6
|
let log = () => {};
|
|
4
7
|
function setLog(value) {
|
|
5
8
|
if (value === true) {
|
|
@@ -10,16 +13,13 @@ function init(A) {
|
|
|
10
13
|
log = value;
|
|
11
14
|
}
|
|
12
15
|
}
|
|
13
|
-
const windowE = () => A.window;
|
|
14
|
-
const locationE = () => A.window.location;
|
|
15
|
-
const historyE = () => A.window.history;
|
|
16
16
|
function getRouteFromBrowser() {
|
|
17
17
|
return toCanonRoute({
|
|
18
|
-
path:
|
|
19
|
-
hash:
|
|
20
|
-
search: Object.fromEntries(new URLSearchParams(
|
|
21
|
-
state:
|
|
22
|
-
}, "load", (
|
|
18
|
+
path: location.pathname,
|
|
19
|
+
hash: location.hash,
|
|
20
|
+
search: Object.fromEntries(new URLSearchParams(location.search)),
|
|
21
|
+
state: history.state?.state || {}
|
|
22
|
+
}, "load", (history.state?.stack?.length || 0) + 1);
|
|
23
23
|
}
|
|
24
24
|
function equal(a, b, partial) {
|
|
25
25
|
if (a === b)
|
|
@@ -70,11 +70,11 @@ function init(A) {
|
|
|
70
70
|
}
|
|
71
71
|
function targetToPartial(target, undefinedOnExternal = false) {
|
|
72
72
|
if (typeof target === "string") {
|
|
73
|
-
const url = new URL(target,
|
|
74
|
-
if (url.host !==
|
|
73
|
+
const url = new URL(target, location.href);
|
|
74
|
+
if (url.host !== location.host) {
|
|
75
75
|
if (undefinedOnExternal)
|
|
76
76
|
return;
|
|
77
|
-
throw new Error(`Unexpected external URL: ${url.host} != ${
|
|
77
|
+
throw new Error(`Unexpected external URL: ${url.host} != ${location.host}`);
|
|
78
78
|
}
|
|
79
79
|
target = {
|
|
80
80
|
path: url.pathname,
|
|
@@ -96,12 +96,12 @@ function init(A) {
|
|
|
96
96
|
}
|
|
97
97
|
function go(target, nav = "go") {
|
|
98
98
|
pendingGoOffset = 0;
|
|
99
|
-
const stack =
|
|
99
|
+
const stack = history.state?.stack || [];
|
|
100
100
|
prevStack = stack.concat(JSON.stringify(A.unproxy(current)));
|
|
101
101
|
const newRoute = toCanonRoute(targetToPartial(target), nav, prevStack.length + 1);
|
|
102
102
|
A.copy(current, newRoute);
|
|
103
103
|
log(nav, newRoute);
|
|
104
|
-
|
|
104
|
+
history.pushState({ state: newRoute.state, stack: prevStack }, "", getUrl(newRoute));
|
|
105
105
|
A.runQueue();
|
|
106
106
|
}
|
|
107
107
|
function matchCurrent(target) {
|
|
@@ -131,7 +131,7 @@ function init(A) {
|
|
|
131
131
|
}
|
|
132
132
|
function back(target = {}) {
|
|
133
133
|
const partial = targetToPartial(target);
|
|
134
|
-
const stack =
|
|
134
|
+
const stack = history.state?.stack || [];
|
|
135
135
|
const effectiveLen = stack.length + pendingGoOffset;
|
|
136
136
|
for (let i = effectiveLen - 1;i >= 0; i--) {
|
|
137
137
|
const histRoute = JSON.parse(stack[i]);
|
|
@@ -148,7 +148,7 @@ function init(A) {
|
|
|
148
148
|
}
|
|
149
149
|
function up(stripCount = 1) {
|
|
150
150
|
const currentP = A.unproxy(current).p;
|
|
151
|
-
const stack =
|
|
151
|
+
const stack = history.state?.stack || [];
|
|
152
152
|
const effectiveLen = stack.length + pendingGoOffset;
|
|
153
153
|
for (let i = effectiveLen - 1;i >= 0; i--) {
|
|
154
154
|
const histRoute = JSON.parse(stack[i]);
|
|
@@ -170,65 +170,58 @@ function init(A) {
|
|
|
170
170
|
if (pendingGoOffset) {
|
|
171
171
|
const offset = pendingGoOffset;
|
|
172
172
|
pendingGoOffset = 0;
|
|
173
|
-
|
|
173
|
+
history.go(offset);
|
|
174
174
|
}
|
|
175
175
|
}, 0);
|
|
176
176
|
}
|
|
177
177
|
const current = A.proxy({});
|
|
178
178
|
const currentRouteParts = A.proxy({});
|
|
179
179
|
function reset() {
|
|
180
|
-
prevStack =
|
|
180
|
+
prevStack = history.state?.stack || [];
|
|
181
181
|
const initRoute = getRouteFromBrowser();
|
|
182
182
|
log("initial", initRoute);
|
|
183
183
|
A.copy(A.unproxy(current), initRoute);
|
|
184
184
|
}
|
|
185
|
-
|
|
186
|
-
function
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
const stack = historyE().state?.stack || [];
|
|
195
|
-
if (stack.length !== prevStack.length) {
|
|
196
|
-
const maxIndex = Math.min(prevStack.length, stack.length) - 1;
|
|
197
|
-
if (maxIndex < 0 || stack[maxIndex] === prevStack[maxIndex]) {
|
|
198
|
-
newRoute.nav = stack.length < prevStack.length ? "back" : "forward";
|
|
199
|
-
}
|
|
185
|
+
reset();
|
|
186
|
+
window.addEventListener("popstate", function(event) {
|
|
187
|
+
pendingGoOffset = 0;
|
|
188
|
+
const newRoute = getRouteFromBrowser();
|
|
189
|
+
const stack = history.state?.stack || [];
|
|
190
|
+
if (stack.length !== prevStack.length) {
|
|
191
|
+
const maxIndex = Math.min(prevStack.length, stack.length) - 1;
|
|
192
|
+
if (maxIndex < 0 || stack[maxIndex] === prevStack[maxIndex]) {
|
|
193
|
+
newRoute.nav = stack.length < prevStack.length ? "back" : "forward";
|
|
200
194
|
}
|
|
201
|
-
|
|
202
|
-
|
|
195
|
+
}
|
|
196
|
+
prevStack = stack;
|
|
197
|
+
log("popstate", newRoute);
|
|
198
|
+
A.copy(current, newRoute);
|
|
199
|
+
A.runQueue();
|
|
200
|
+
});
|
|
201
|
+
A.leakScope(() => {
|
|
202
|
+
A(() => {
|
|
203
|
+
current.path = "/" + Array.from(current.p).join("/");
|
|
204
|
+
});
|
|
205
|
+
A(() => {
|
|
206
|
+
const stack = history.state?.stack || [];
|
|
207
|
+
const newRoute = toCanonRoute(current, A.unproxy(current).nav, stack.length + 1);
|
|
203
208
|
A.copy(current, newRoute);
|
|
204
|
-
|
|
209
|
+
const state = { state: newRoute.state, stack };
|
|
210
|
+
const url = getUrl(newRoute);
|
|
211
|
+
if (url !== location.pathname + location.search + location.hash || !equal(history.state, state, false)) {
|
|
212
|
+
log("replaceState", newRoute, state, url);
|
|
213
|
+
history.replaceState(state, "", url);
|
|
214
|
+
}
|
|
205
215
|
});
|
|
206
|
-
A
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
A.copy(current, newRoute);
|
|
214
|
-
const state = { state: newRoute.state, stack };
|
|
215
|
-
const url = getUrl(newRoute);
|
|
216
|
-
if (url !== locationE().pathname + locationE().search + locationE().hash || !equal(historyE().state, state, false)) {
|
|
217
|
-
log("replaceState", newRoute, state, url);
|
|
218
|
-
historyE().replaceState(state, "", url);
|
|
219
|
-
}
|
|
220
|
-
});
|
|
221
|
-
A(() => {
|
|
222
|
-
const n = {};
|
|
223
|
-
n[current.path] = true;
|
|
224
|
-
for (const [k, v] of Object.entries(current.search)) {
|
|
225
|
-
n[`${k}=${v}`] = true;
|
|
226
|
-
}
|
|
227
|
-
A.copy(currentRouteParts, n);
|
|
228
|
-
});
|
|
216
|
+
A(() => {
|
|
217
|
+
const n = {};
|
|
218
|
+
n[current.path] = true;
|
|
219
|
+
for (const [k, v] of Object.entries(current.search)) {
|
|
220
|
+
n[`${k}=${v}`] = true;
|
|
221
|
+
}
|
|
222
|
+
A.copy(currentRouteParts, n);
|
|
229
223
|
});
|
|
230
|
-
}
|
|
231
|
-
initRouter();
|
|
224
|
+
});
|
|
232
225
|
function persistScroll(name = "main") {
|
|
233
226
|
const el = A();
|
|
234
227
|
A("scroll=", onScroll);
|
|
@@ -277,11 +270,11 @@ function init(A) {
|
|
|
277
270
|
go(href);
|
|
278
271
|
}
|
|
279
272
|
}
|
|
280
|
-
return { current, setLog, go, matchCurrent, push, back, up, reset,
|
|
273
|
+
return { current, setLog, go, matchCurrent, push, back, up, reset, persistScroll, interceptLinks };
|
|
281
274
|
}
|
|
282
275
|
export {
|
|
283
|
-
|
|
276
|
+
createRoute
|
|
284
277
|
};
|
|
285
278
|
|
|
286
|
-
//# debugId=
|
|
279
|
+
//# debugId=14FF890506B82D5064756E2164756E21
|
|
287
280
|
//# sourceMappingURL=route.js.map
|
package/dist/src/route.js.map
CHANGED
|
@@ -2,9 +2,9 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/route.ts"],
|
|
4
4
|
"sourcesContent": [
|
|
5
|
-
"type NavType = \"load\" | \"back\" | \"forward\" | \"go\" | \"push\";\n\n/**\n* The class for the global `route` object.\n*/\nexport interface Route {\n\t/** The current path of the URL as a string. For instance `\"/\"` or `\"/users/123/feed\"`. Paths are normalized to always start with a `/` and never end with a `/` (unless it's the root path). */\n\tpath: string;\n\t/** An convenience array containing path segments, mapping to `path`. For instance `[]` (for `\"/\"`) or `['users', '123', 'feed']` (for `\"/users/123/feed\"`). */\n\tp: string[];\n\t/** The hash fragment including the leading `#`, or an empty string. For instance `\"#my_section\"` or `\"\"`. */\n\thash: string;\n\t/** The query string interpreted as search parameters. So `\"a=x&b=y\"` becomes `{a: \"x\", b: \"y\"}`. */\n\tsearch: Record<string, string>;\n\t/** An object to be used for any additional data you want to associate with the current page. Data should be JSON-compatible. */\n\tstate: Record<string, any>;\n\t/** The navigation depth of the current session. Starts at 1. Writing to this property has no effect. */\n\tdepth: number;\n\t/** The navigation action that got us to this page. Writing to this property has no effect.\n\t- `\"load\"`: An initial page load.\n\t- `\"back\"` or `\"forward\"`: When we navigated backwards or forwards in the stack.\n\t- `\"go\"`: When we added a new page on top of the stack.\n\t- `\"push\"`: When we added a new page on top of the stack, merging with the current page.\n\tMostly useful for page transition animations. Writing to this property has no effect.\n\t*/\n\tnav: NavType;\n}\n\ntype RouteTarget = string | (string|number)[] | Partial<Omit<Omit<Route,\"p\">,\"search\"> & {\n\t/** An convenience array containing path segments, mapping to `path`. For instance `[]` (for `\"/\"`) or `['users', 123, 'feed']` (for `\"/users/123/feed\"`). Values may be integers but will be converted to strings.*/\n\tp: (string|number)[],\n\t/** The query string interpreted as search parameters. So `\"a=x&b=y\"` becomes `{a: \"x\", b: \"y\", c: 42}`. Values may be integers but will be converted to strings. */\n\tsearch: Record<string,string|number>,\n}>;\n\n/**\n * The router API returned by {@link init}, bound to a specific Aberdeen instance's window.\n */\nexport interface RouteApi {\n\t/**\n\t* The global {@link Route} object reflecting the current URL and browser history state. Changes you make to this affect the current browser history item (modifying the URL if needed).\n\t*/\n\tcurrent: Route;\n\t/**\n\t * Configure logging on route changes.\n\t * @param value `true` to enable logging to console, `false` to disable logging, or a custom logging function. Defaults to `false`.\n\t */\n\tsetLog(value: boolean | ((...args: any[]) => void)): void;\n\t/**\n\t* Navigate to a new URL by pushing a new history entry.\n\t* \n\t* Note that this happens synchronously, immediately updating `route` and processing any reactive updates based on that.\n\t* \n\t* @param target A subset of the {@link Route} properties to navigate to. If neither `p` nor `path` is given, the current path is used. For other properties, an empty/default value is assumed if not given. For convenience:\n\t* - You may pass a string instead of an object, which is interpreted as the `path`.\n\t* - You may pass an array instead of an object, which is interpreted as the `p` array.\n\t* - If you pass `p`, it may contain numbers, which will be converted to strings.\n\t* - If you pass `search`, its values may be numbers, which will be converted to strings.\n\t* \n\t* Examples:\n\t* ```js\n\t* // Navigate to /users/123\n\t* route.go(\"/users/123\");\n\t* \n\t* // Navigate to /users/123?tab=feed#top\n\t* route.go({p: [\"users\", 123], search: {tab: \"feed\"}, hash: \"top\"});\n\t* ```\n\t*/\n\tgo(target: RouteTarget, nav?: NavType): void;\n\t/**\n\t * Returns `true` if the current route matches `target`.\n\t *\n\t * Path must match exactly. Any search params specified in `target` must be present\n\t * in the current URL, but extra params in the current URL are allowed.\n\t *\n\t * Reactive: only reevaluates when the path changes to/from the target path, and\n\t * when target k/v search pairs are (un)set.\n\t * \n\t * Primary usage: 'active' status for menu items.\n\t *\n\t * @example\n\t * ```js\n\t * // This example assumes interceptLinks() has been called\n\t * A('a.my-button text=Users href=/users .is-active=', route.matchCurrent('/users'));\n\t * \n\t * // Alternatively a route object can be given\n\t * route.matchCurrent({path: '/users', search: {tab: 'profile'}});\n\t * ```\n\t */\n\tmatchCurrent(target: RouteTarget): boolean;\n\t/**\n\t * Modify the current route by merging `target` into it (using {@link aberdeen!Aberdeen.merge | A.merge}), pushing a new history entry.\n\t * \n\t * This is useful for things like opening modals or side panels, where you want a browser back action to return to the previous state.\n\t * \n\t * @param target Same as for {@link go}, but merged into the current route instead deleting all state.\n\t * @param nav The navigation type to use. Defaults to `undefined`, meaning the navigation type is unchanged from the current route,\n\t * preventing unwanted page transition animations.\n\t */\n\tpush(target: RouteTarget, nav?: NavType): void;\n\t/**\n\t * Try to go back in history to the first entry that matches the given target. If none is found, the given state will replace the current page. This is useful for \"cancel\" or \"close\" actions that should return to the previous page if possible, but create a new page if not (for instance when arriving at the current page through a direct link).\n\t * \n\t * Consider using {@link up} to go up in the path hierarchy.\n\t * \n\t * @param target The target route to go back to. May be a subset of {@link Route}, or a string (for `path`), or an array of strings (for `p`).\n\t */\n\tback(target?: RouteTarget): void;\n\t/**\n\t* Navigate up in the path hierarchy, by going back to the first history entry\n\t* that has a shorter path than the current one. If there's none, we just shorten\n\t* the current path.\n\t* \n\t* Note that going back in browser history happens asynchronously, so `route` will not be updated immediately.\n\t*/\n\tup(stripCount?: number): void;\n\t/** @internal */\n\treset(): void;\n\t/**\n\t * Run the router's browser-dependent setup: sync the `route` proxy to the current URL,\n\t * start listening for `popstate`, and start the observers that keep the browser URL in sync\n\t * with `route`. Safe to call multiple times (subsequent calls are no-ops).\n\t *\n\t * This runs automatically on import in a browser. Outside a browser it is a no-op until a\n\t * window has been provided via `setWindow`, after which you should call it yourself (or call\n\t * `reset` to re-sync to a new request URL). See the `aberdeen/server` SSR entry point.\n\t * @internal\n\t */\n\tinitRouter(): void;\n\t/**\n\t* Restore and store the vertical and horizontal scroll position for\n\t* the parent element to the page state.\n\t*\n\t* @param {string} name - A unique (within this page) name for this\n\t* scrollable element. Defaults to 'main'.\n\t*\n\t* The scroll position will be persisted in `route.aux.scroll.<name>`.\n\t*/\n\tpersistScroll(name?: string): void;\n\t/**\n\t * Intercept clicks and Enter key presses on links (`<a>` tags) and use Aberdeen routing\n\t * instead of browser navigation for local paths (paths without a protocol or host).\n\t * \n\t * This allows you to use regular HTML anchor tags for navigation without needing to\n\t * manually attach click handlers to each link.\n\t * \n\t * @example\n\t * ```js\n\t * // In your root component:\n\t * route.interceptLinks();\n\t * \n\t * // Now you can use regular anchor tags:\n\t * A('a text=About href=/corporate/about');\n\t * ```\n\t */\n\tinterceptLinks(): void;\n}\n\n/**\n * Initialise routing for an Aberdeen instance and return the router API, bound to that\n * instance's window. In the browser, use the default instance: `init(A)`. For server-side\n * rendering, pass the instance provided by `aberdeen/server`'s render callback.\n *\n * @param A An Aberdeen instance (the default export of `aberdeen`, or one from `init`).\n */\nexport function init(A: any): RouteApi {\n\nlet log: (...args: any) => void = () => {};\n\nfunction setLog(value: boolean | ((...args: any[]) => void)) {\n\tif (value === true) {\n\t\tlog = console.log.bind(console, 'aberdeen router');\n\t} else if (value === false) {\n\t\tlog = () => {};\n\t} else {\n\t\tlog = value;\n\t}\n}\n\n// The window/location/history are resolved lazily (rather than captured at import time) so\n// that this module can be imported in a non-browser environment and have a window injected\n// later via `setWindow` (see the `aberdeen/server` SSR entry point).\nconst windowE = () => A.window;\nconst locationE = () => A.window.location;\nconst historyE = () => A.window.history;\n\nfunction getRouteFromBrowser(): Route {\n\treturn toCanonRoute({\n\t\tpath: locationE().pathname,\n\t\thash: locationE().hash,\n\t\tsearch: Object.fromEntries(new URLSearchParams(locationE().search)),\n\t\tstate: \thistoryE().state?.state || {},\n\t}, \"load\", (historyE().state?.stack?.length || 0) + 1);\n}\n\n/**\n* Deep compare `a` and `b`. If `partial` is true, objects contained in `b` may be a subset\n* of their counterparts in `a` and still be considered equal.\n*/\nfunction equal(a: any, b: any, partial: boolean): boolean {\n\tif (a===b) return true;\n\tif (typeof a !== \"object\" || !a || typeof b !== \"object\" || !b) return false; // otherwise they would have been equal\n\tif (a.constructor !== b.constructor) return false;\n\tif (b instanceof Array) {\n\t\tif (a.length !== b.length) return false;\n\t\tfor(let i = 0; i < b.length; i++) {\n\t\t\tif (!equal(a[i], b[i], partial)) return false;\n\t\t}\n\t} else {\n\t\tfor(const k of Object.keys(b)) {\n\t\t\tif (!equal(a[k], b[k], partial)) return false;\n\t\t}\n\t\tif (!partial) {\n\t\t\tfor(const k of Object.keys(a)) {\n\t\t\t\tif (!b.hasOwnProperty(k)) return false;\n\t\t\t}\n\t\t}\n\t}\n\treturn true;\n}\n\nfunction getUrl(target: Route) {\n\tconst search = new URLSearchParams(target.search).toString();\n\treturn (search ? `${target.path}?${search}` : target.path) + target.hash;\n}\n\nfunction toCanonRoute(target: Partial<Route>, nav: NavType, depth: number): Route {\n\tlet path = target.path || (target.p || []).join(\"/\") || \"/\";\n\tpath = (\"\"+path).replace(/\\/+$/, \"\");\n\tif (!path.startsWith(\"/\")) path = `/${path}`;\n\t\n\treturn {\n\t\tpath,\n\t\thash: target.hash && target.hash !==\"#\" ? (target.hash.startsWith(\"#\") ? target.hash : \"#\" + target.hash) : \"\",\n\t\tp: path.length > 1 ? path.slice(1).replace(/\\/+$/, \"\").split(\"/\") : [],\n\t\tnav,\n\t\tsearch: typeof target.search === 'object' && target.search ? A.clone(target.search) : {},\n\t\tstate: typeof target.state === 'object' && target.state ? A.clone(target.state) : {},\n\t\tdepth,\n\t};\n}\n\n\nfunction targetToPartial(target: RouteTarget, undefinedOnExternal: true): Partial<Route> | undefined;\nfunction targetToPartial(target: RouteTarget): Partial<Route>;\n\n\nfunction targetToPartial(target: RouteTarget, undefinedOnExternal: boolean=false) {\n\t// Convert shortcut values to objects\n\tif (typeof target === 'string') {\n\t\t// Parse using URL to handle both absolute and relative paths correctly\t\t\n\t\tconst url = new URL(target, locationE().href);\n\t\tif (url.host !== locationE().host) {\n\t\t\tif (undefinedOnExternal) return;\n\t\t\tthrow new Error(`Unexpected external URL: ${url.host} != ${locationE().host}`);\n\t\t}\n\t\ttarget = {\n\t\t\tpath: url.pathname,\n\t\t\tsearch: Object.fromEntries(url.searchParams),\n\t\t\thash: url.hash,\n\t\t};\n\t} else if (target instanceof Array) {\n\t\ttarget = {p: target};\n\t}\n\t// Convert numbers in p and search to strings\n\tif (target.p) {\n\t\ttarget.p = target.p.map(String);\n\t}\n\tif (target.search) {\n\t\tfor(const key of Object.keys(target.search)) {\n\t\t\ttarget.search[key] = String(target.search[key]);\n\t\t}\n\t}\n\treturn target as Partial<Route>;\n}\n\n\nfunction go(target: RouteTarget, nav: NavType = \"go\"): void {\n\tpendingGoOffset = 0;\n\tconst stack: string[] = historyE().state?.stack || [];\n\n\tprevStack = stack.concat(JSON.stringify(A.unproxy(current)));\n\t\n\tconst newRoute: Route = toCanonRoute(targetToPartial(target), nav, prevStack.length + 1);\n\tA.copy(current, newRoute);\n\t\n\tlog(nav, newRoute);\n\thistoryE().pushState({state: newRoute.state, stack: prevStack}, \"\", getUrl(newRoute));\n\t\n\tA.runQueue();\n}\n\nfunction matchCurrent(target: RouteTarget): boolean {\n\tconst partial = targetToPartial(target, true);\n\tif (!partial) return false; // External link\n\n\tif (partial.path != null || partial.p != null) {\n\t\tlet path = partial.path || (partial.p || []).join(\"/\") || \"/\";\n\t\tpath = (\"\"+path).replace(/\\/+$/, \"\");\n\t\tif (!path.startsWith(\"/\")) path = `/${path}`;\n\t\tif (!currentRouteParts[path]) return false;\n\t}\n\n\tif (partial.search) {\n\t\tfor(const [k,v] of Object.entries(partial.search)) {\n\t\t\tif (!currentRouteParts[`${k}=${v}`]) return false;\n\t\t}\n\t}\n\treturn true;\n}\n\nfunction push(target: RouteTarget, nav?: NavType): void {\n\tconst c = A.clone(A.unproxy(current));\n\tA.merge(c, targetToPartial(target));\n\tgo(c, nav || c.nav);\n}\n\nfunction back(target: RouteTarget = {}): void {\n\tconst partial = targetToPartial(target);\n\tconst stack: string[] = historyE().state?.stack || [];\n\tconst effectiveLen = stack.length + pendingGoOffset;\n\tfor(let i = effectiveLen - 1; i >= 0; i--) {\n\t\tconst histRoute: Route = JSON.parse(stack[i]);\n\t\tif (equal(histRoute, partial, true)) {\n\t\t\tconst pages = i - effectiveLen;\n\t\t\tlog(`back`, pages, histRoute);\n\t\t\tscheduleHistoryGo(pages);\n\t\t\treturn;\n\t\t}\n\t}\n\n\tconst newRoute = toCanonRoute(partial, \"back\", effectiveLen + 1);\n\tlog(`back not found, replacing`, partial);\n\tA.copy(current, newRoute);\n}\n\nfunction up(stripCount: number = 1): void {\n\tconst currentP = A.unproxy(current).p;\n\tconst stack: string[] = historyE().state?.stack || [];\n\tconst effectiveLen = stack.length + pendingGoOffset;\n\tfor(let i = effectiveLen - 1; i >= 0; i--) {\n\t\tconst histRoute: Route = JSON.parse(stack[i]);\n\t\tif (histRoute.p.length < currentP.length && equal(histRoute.p, currentP.slice(0, histRoute.p.length), false)) {\n\t\t\t// This route is shorter and matches the start of the current path\n\t\t\tlog(`up to ${i+1} / ${effectiveLen}`, histRoute);\n\t\t\tscheduleHistoryGo(i - effectiveLen);\n\t\t\treturn;\n\t\t}\n\t}\n\t// Replace current route with /\n\tconst newRoute = toCanonRoute({p: currentP.slice(0, currentP.length - stripCount)}, \"back\", effectiveLen + 1);\n\tlog(`up not found, replacing`, newRoute);\n\tA.copy(current, newRoute);\n}\n\n\nlet prevStack: string[];\n\n// Track pending historyE().go() offset. Multiple back()/up() calls before the event loop\n// processes them are batched into a single historyE().go() via queueMicrotask.\nlet pendingGoOffset = 0;\n\nfunction scheduleHistoryGo(delta: number) {\n\tpendingGoOffset += delta;\n\t(A.window.setTimeout ?? setTimeout)(() => {\n\t\tif (pendingGoOffset) {\n\t\t\tconst offset = pendingGoOffset;\n\t\t\tpendingGoOffset = 0;\n\t\t\thistoryE().go(offset);\n\t\t}\n\t}, 0);\n}\n\nconst current: Route = A.proxy({}) as Route;\n\n// Proxied object with keys for the current path and \"k=v\" search pairs.\n// Used by matchCurrent to subscribe only to relevant route changes.\nconst currentRouteParts = A.proxy({} as Record<string,true>);\n\n/**\n * Reset the router to its initial state, based on the current browser state. Intended for testing purposes only.\n * @internal\n * */\nfunction reset() {\n\tprevStack = historyE().state?.stack || [];\n\tconst initRoute = getRouteFromBrowser();\n\tlog('initial', initRoute);\n\tA.copy(A.unproxy(current), initRoute);\n}\nlet routerInited = false;\n\nfunction initRouter() {\n\tif (routerInited || !A.window) return;\n\trouterInited = true;\n\n\treset();\n\n\t// Handle browser history back and forward\n\twindowE().addEventListener(\"popstate\", function(event: PopStateEvent) {\n\tpendingGoOffset = 0;\n\tconst newRoute = getRouteFromBrowser();\n\t\n\t// If the stack length changes, and at least the top-most shared entry is the same,\n\t// we'll interpret this as a \"back\" or \"forward\" navigation.\n\tconst stack: string[] = historyE().state?.stack || [];\n\tif (stack.length !== prevStack.length) {\n\t\tconst maxIndex = Math.min(prevStack.length, stack.length) - 1;\n\t\tif (maxIndex < 0 || stack[maxIndex] === prevStack[maxIndex]) {\n\t\t\tnewRoute.nav = stack.length < prevStack.length ? \"back\" : \"forward\";\n\t\t}\n\t}\n\t// else nav will be \"load\"\n\t\n\tprevStack = stack;\n\tlog('popstate', newRoute);\n\tA.copy(current, newRoute);\n\t\n\tA.runQueue();\n});\n\n// Make sure these observers are never cleaned up, not even by `unmountAll`.\nA.leakScope(() => {\n\t// Sync `p` to `path`. We need to do this in a separate, higher-priority observer,\n\t// so that setting `route.p` will not be immediately overruled by the pre-existing `route.path`.\n\tA(() => {\n\t\tcurrent.path = \"/\" + Array.from(current.p).join(\"/\");\n\t});\n\n\t// Do a replaceState based on changes to A.proxy\n\tA(() => {\n\t\t// First normalize `route`\n\t\tconst stack = historyE().state?.stack || [];\n\t\tconst newRoute = toCanonRoute(current, A.unproxy(current).nav, stack.length + 1);\n\t\tA.copy(current, newRoute);\n\t\t\n\t\t// Then replace the current browser state if something actually changed\n\t\tconst state = {state: newRoute.state, stack};\n\t\tconst url = getUrl(newRoute);\n\t\tif (url !== locationE().pathname + locationE().search + locationE().hash || !equal(historyE().state, state, false)) {\n\t\t\tlog('replaceState', newRoute, state, url);\n\t\t\thistoryE().replaceState(state, \"\", url);\n\t\t}\n\t});\n\n\t// Keep currentRouteParts in sync with the current path and search params.\n\tA(() => {\n\t\tconst n = {} as Record<string,true>;\n\t\tn[current.path] = true;\n\t\tfor(const [k,v] of Object.entries(current.search)) {\n\t\t\tn[`${k}=${v}`] = true;\n\t\t}\n\t\tA.copy(currentRouteParts, n);\n\t});\n});\n}\n\n// Initialise immediately in a browser; a no-op (until `setWindow`) on the server.\ninitRouter();\n\n\nfunction persistScroll(name = \"main\") {\n\tconst el = A()!;\n\tA('scroll=', onScroll);\n\t\n\tconst restore = A.unproxy(current).state.scroll?.[name];\n\tif (restore) {\n\t\tlog(\"restoring scroll\", name, restore);\n\t\tObject.assign(el, restore);\n\t}\n\t\n\tfunction onScroll() {\n\t\t(current.state.scroll ||= {})[name] = {\n\t\t\tscrollTop: el.scrollTop,\n\t\t\tscrollLeft: el.scrollLeft,\n\t\t};\n\t}\n}\n\nfunction interceptLinks() {\n\tA({\n\t\tclick: handleEvent,\n\t\tkeydown: handleKeyEvent,\n\t});\n\t\n\tfunction handleKeyEvent(e: KeyboardEvent) {\n\t\tif (e.key === \"Enter\") {\n\t\t\thandleEvent(e);\n\t\t}\n\t}\n\t\n\tfunction handleEvent(e: Event) {\n\t\t// Find the closest <a> tag\n\t\tlet target = e.target as HTMLElement | null;\n\t\twhile (target && target.tagName?.toUpperCase() !== \"A\") {\n\t\t\ttarget = target.parentElement;\n\t\t}\n\t\t\n\t\tif (!target) return;\n\t\t\n\t\tconst anchor = target as HTMLAnchorElement;\n\t\tconst href = anchor.getAttribute(\"href\");\n\t\t\n\t\tif (!href) return;\n\t\t\n\t\t// Skip hash-only links\n\t\tif (href.startsWith(\"#\")) return;\n\t\t\n\t\t// Skip if it has a protocol or is protocol-relative (// or contains : before any / ? #)\n\t\tif (href.startsWith(\"//\") || /^[^/?#]+:/.test(href)) return;\n\t\t\n\t\t// Skip if the link has target or download attribute\n\t\tif (anchor.getAttribute(\"target\") || anchor.getAttribute(\"download\")) return;\n\t\t\n\t\t// Skip if modifier keys are pressed (Ctrl/Cmd click to open in new tab)\n\t\tif (typeof MouseEvent !== 'undefined' && e instanceof MouseEvent && (e.ctrlKey || e.metaKey || e.shiftKey)) return;\n\t\t\n\t\te.preventDefault();\n\t\tgo(href);\n\t}\n}\n\n\treturn { current, setLog, go, matchCurrent, push, back, up, reset, initRouter, persistScroll, interceptLinks } as unknown as RouteApi;\n}\n"
|
|
5
|
+
"type NavType = \"load\" | \"back\" | \"forward\" | \"go\" | \"push\";\n\n/**\n* The class for the global `route` object.\n*/\nexport interface RouteState {\n\t/** The current path of the URL as a string. For instance `\"/\"` or `\"/users/123/feed\"`. Paths are normalized to always start with a `/` and never end with a `/` (unless it's the root path). */\n\tpath: string;\n\t/** An convenience array containing path segments, mapping to `path`. For instance `[]` (for `\"/\"`) or `['users', '123', 'feed']` (for `\"/users/123/feed\"`). */\n\tp: string[];\n\t/** The hash fragment including the leading `#`, or an empty string. For instance `\"#my_section\"` or `\"\"`. */\n\thash: string;\n\t/** The query string interpreted as search parameters. So `\"a=x&b=y\"` becomes `{a: \"x\", b: \"y\"}`. */\n\tsearch: Record<string, string>;\n\t/** An object to be used for any additional data you want to associate with the current page. Data should be JSON-compatible. */\n\tstate: Record<string, any>;\n\t/** The navigation depth of the current session. Starts at 1. Writing to this property has no effect. */\n\tdepth: number;\n\t/** The navigation action that got us to this page. Writing to this property has no effect.\n\t- `\"load\"`: An initial page load.\n\t- `\"back\"` or `\"forward\"`: When we navigated backwards or forwards in the stack.\n\t- `\"go\"`: When we added a new page on top of the stack.\n\t- `\"push\"`: When we added a new page on top of the stack, merging with the current page.\n\tMostly useful for page transition animations. Writing to this property has no effect.\n\t*/\n\tnav: NavType;\n}\n\ntype RouteTarget = string | (string|number)[] | Partial<Omit<Omit<RouteState,\"p\">,\"search\"> & {\n\t/** An convenience array containing path segments, mapping to `path`. For instance `[]` (for `\"/\"`) or `['users', 123, 'feed']` (for `\"/users/123/feed\"`). Values may be integers but will be converted to strings.*/\n\tp: (string|number)[],\n\t/** The query string interpreted as search parameters. So `\"a=x&b=y\"` becomes `{a: \"x\", b: \"y\", c: 42}`. Values may be integers but will be converted to strings. */\n\tsearch: Record<string,string|number>,\n}>;\n\n/**\n * The router API returned by {@link createRoute}, bound to a specific Aberdeen instance's window.\n */\nexport interface RouteApi {\n\t/**\n\t* The global {@link RouteState} object reflecting the current URL and browser history state. Changes you make to this affect the current browser history item (modifying the URL if needed).\n\t*/\n\tcurrent: RouteState;\n\t/**\n\t * Configure logging on route changes.\n\t * @param value `true` to enable logging to console, `false` to disable logging, or a custom logging function. Defaults to `false`.\n\t */\n\tsetLog(value: boolean | ((...args: any[]) => void)): void;\n\t/**\n\t* Navigate to a new URL by pushing a new history entry.\n\t* \n\t* Note that this happens synchronously, immediately updating `route` and processing any reactive updates based on that.\n\t* \n\t* @param target A subset of the {@link RouteState} properties to navigate to. If neither `p` nor `path` is given, the current path is used. For other properties, an empty/default value is assumed if not given. For convenience:\n\t* - You may pass a string instead of an object, which is interpreted as the `path`.\n\t* - You may pass an array instead of an object, which is interpreted as the `p` array.\n\t* - If you pass `p`, it may contain numbers, which will be converted to strings.\n\t* - If you pass `search`, its values may be numbers, which will be converted to strings.\n\t* \n\t* Examples:\n\t* ```js\n\t* // Navigate to /users/123\n\t* route.go(\"/users/123\");\n\t* \n\t* // Navigate to /users/123?tab=feed#top\n\t* route.go({p: [\"users\", 123], search: {tab: \"feed\"}, hash: \"top\"});\n\t* ```\n\t*/\n\tgo(target: RouteTarget, nav?: NavType): void;\n\t/**\n\t * Returns `true` if the current route matches `target`.\n\t *\n\t * Path must match exactly. Any search params specified in `target` must be present\n\t * in the current URL, but extra params in the current URL are allowed.\n\t *\n\t * Reactive: only reevaluates when the path changes to/from the target path, and\n\t * when target k/v search pairs are (un)set.\n\t * \n\t * Primary usage: 'active' status for menu items.\n\t *\n\t * @example\n\t * ```js\n\t * // This example assumes interceptLinks() has been called\n\t * A('a.my-button text=Users href=/users .is-active=', route.matchCurrent('/users'));\n\t * \n\t * // Alternatively a route object can be given\n\t * route.matchCurrent({path: '/users', search: {tab: 'profile'}});\n\t * ```\n\t */\n\tmatchCurrent(target: RouteTarget): boolean;\n\t/**\n\t * Modify the current route by merging `target` into it (using {@link aberdeen!Aberdeen.merge | A.merge}), pushing a new history entry.\n\t * \n\t * This is useful for things like opening modals or side panels, where you want a browser back action to return to the previous state.\n\t * \n\t * @param target Same as for {@link go}, but merged into the current route instead deleting all state.\n\t * @param nav The navigation type to use. Defaults to `undefined`, meaning the navigation type is unchanged from the current route,\n\t * preventing unwanted page transition animations.\n\t */\n\tpush(target: RouteTarget, nav?: NavType): void;\n\t/**\n\t * Try to go back in history to the first entry that matches the given target. If none is found, the given state will replace the current page. This is useful for \"cancel\" or \"close\" actions that should return to the previous page if possible, but create a new page if not (for instance when arriving at the current page through a direct link).\n\t * \n\t * Consider using {@link up} to go up in the path hierarchy.\n\t * \n\t * @param target The target route to go back to. May be a subset of {@link RouteState}, or a string (for `path`), or an array of strings (for `p`).\n\t */\n\tback(target?: RouteTarget): void;\n\t/**\n\t* Navigate up in the path hierarchy, by going back to the first history entry\n\t* that has a shorter path than the current one. If there's none, we just shorten\n\t* the current path.\n\t* \n\t* Note that going back in browser history happens asynchronously, so `route` will not be updated immediately.\n\t*/\n\tup(stripCount?: number): void;\n\t/** @internal */\n\treset(): void;\n\t/**\n\t* Restore and store the vertical and horizontal scroll position for\n\t* the parent element to the page state.\n\t*\n\t* @param {string} name - A unique (within this page) name for this\n\t* scrollable element. Defaults to 'main'.\n\t*\n\t* The scroll position will be persisted in `route.aux.scroll.<name>`.\n\t*/\n\tpersistScroll(name?: string): void;\n\t/**\n\t * Intercept clicks and Enter key presses on links (`<a>` tags) and use Aberdeen routing\n\t * instead of browser navigation for local paths (paths without a protocol or host).\n\t * \n\t * This allows you to use regular HTML anchor tags for navigation without needing to\n\t * manually attach click handlers to each link.\n\t * \n\t * @example\n\t * ```js\n\t * // In your root component:\n\t * route.interceptLinks();\n\t * \n\t * // Now you can use regular anchor tags:\n\t * A('a text=About href=/corporate/about');\n\t * ```\n\t */\n\tinterceptLinks(): void;\n}\n\n/**\n * Initialise routing for an Aberdeen instance and return the router API, bound to that\n * instance's window. In the browser, use the default instance: `init(A)`. For server-side\n * rendering, pass the instance provided by `aberdeen/server`'s render callback.\n *\n * @param A An Aberdeen instance (the default export of `aberdeen`, or one from `init`).\n */\nexport function createRoute(A: any): RouteApi {\n\n\tconst window = A.window;\n\tconst location = window.location;\n\tconst history = window.history;\n\n\tlet log: (...args: any) => void = () => {};\n\n\tfunction setLog(value: boolean | ((...args: any[]) => void)) {\n\t\tif (value === true) {\n\t\t\tlog = console.log.bind(console, 'aberdeen router');\n\t\t} else if (value === false) {\n\t\t\tlog = () => {};\n\t\t} else {\n\t\t\tlog = value;\n\t\t}\n\t}\n\n\tfunction getRouteFromBrowser(): RouteState {\n\t\treturn toCanonRoute({\n\t\t\tpath: location.pathname,\n\t\t\thash: location.hash,\n\t\t\tsearch: Object.fromEntries(new URLSearchParams(location.search)),\n\t\t\tstate: \thistory.state?.state || {},\n\t\t}, \"load\", (history.state?.stack?.length || 0) + 1);\n\t}\n\n\t/**\n\t* Deep compare `a` and `b`. If `partial` is true, objects contained in `b` may be a subset\n\t* of their counterparts in `a` and still be considered equal.\n\t*/\n\tfunction equal(a: any, b: any, partial: boolean): boolean {\n\t\tif (a===b) return true;\n\t\tif (typeof a !== \"object\" || !a || typeof b !== \"object\" || !b) return false; // otherwise they would have been equal\n\t\tif (a.constructor !== b.constructor) return false;\n\t\tif (b instanceof Array) {\n\t\t\tif (a.length !== b.length) return false;\n\t\t\tfor(let i = 0; i < b.length; i++) {\n\t\t\t\tif (!equal(a[i], b[i], partial)) return false;\n\t\t\t}\n\t\t} else {\n\t\t\tfor(const k of Object.keys(b)) {\n\t\t\t\tif (!equal(a[k], b[k], partial)) return false;\n\t\t\t}\n\t\t\tif (!partial) {\n\t\t\t\tfor(const k of Object.keys(a)) {\n\t\t\t\t\tif (!b.hasOwnProperty(k)) return false;\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t\treturn true;\n\t}\n\n\tfunction getUrl(target: RouteState) {\n\t\tconst search = new URLSearchParams(target.search).toString();\n\t\treturn (search ? `${target.path}?${search}` : target.path) + target.hash;\n\t}\n\n\tfunction toCanonRoute(target: Partial<RouteState>, nav: NavType, depth: number): RouteState {\n\t\tlet path = target.path || (target.p || []).join(\"/\") || \"/\";\n\t\tpath = (\"\"+path).replace(/\\/+$/, \"\");\n\t\tif (!path.startsWith(\"/\")) path = `/${path}`;\n\t\t\n\t\treturn {\n\t\t\tpath,\n\t\t\thash: target.hash && target.hash !==\"#\" ? (target.hash.startsWith(\"#\") ? target.hash : \"#\" + target.hash) : \"\",\n\t\t\tp: path.length > 1 ? path.slice(1).replace(/\\/+$/, \"\").split(\"/\") : [],\n\t\t\tnav,\n\t\t\tsearch: typeof target.search === 'object' && target.search ? A.clone(target.search) : {},\n\t\t\tstate: typeof target.state === 'object' && target.state ? A.clone(target.state) : {},\n\t\t\tdepth,\n\t\t};\n\t}\n\n\n\tfunction targetToPartial(target: RouteTarget, undefinedOnExternal: true): Partial<RouteState> | undefined;\n\tfunction targetToPartial(target: RouteTarget): Partial<RouteState>;\n\n\n\tfunction targetToPartial(target: RouteTarget, undefinedOnExternal: boolean=false) {\n\t\t// Convert shortcut values to objects\n\t\tif (typeof target === 'string') {\n\t\t\t// Parse using URL to handle both absolute and relative paths correctly\t\t\n\t\t\tconst url = new URL(target, location.href);\n\t\t\tif (url.host !== location.host) {\n\t\t\t\tif (undefinedOnExternal) return;\n\t\t\t\tthrow new Error(`Unexpected external URL: ${url.host} != ${location.host}`);\n\t\t\t}\n\t\t\ttarget = {\n\t\t\t\tpath: url.pathname,\n\t\t\t\tsearch: Object.fromEntries(url.searchParams),\n\t\t\t\thash: url.hash,\n\t\t\t};\n\t\t} else if (target instanceof Array) {\n\t\t\ttarget = {p: target};\n\t\t}\n\t\t// Convert numbers in p and search to strings\n\t\tif (target.p) {\n\t\t\ttarget.p = target.p.map(String);\n\t\t}\n\t\tif (target.search) {\n\t\t\tfor(const key of Object.keys(target.search)) {\n\t\t\t\ttarget.search[key] = String(target.search[key]);\n\t\t\t}\n\t\t}\n\t\treturn target as Partial<RouteState>;\n\t}\n\n\n\tfunction go(target: RouteTarget, nav: NavType = \"go\"): void {\n\t\tpendingGoOffset = 0;\n\t\tconst stack: string[] = history.state?.stack || [];\n\n\t\tprevStack = stack.concat(JSON.stringify(A.unproxy(current)));\n\t\t\n\t\tconst newRoute: RouteState = toCanonRoute(targetToPartial(target), nav, prevStack.length + 1);\n\t\tA.copy(current, newRoute);\n\t\t\n\t\tlog(nav, newRoute);\n\t\thistory.pushState({state: newRoute.state, stack: prevStack}, \"\", getUrl(newRoute));\n\t\t\n\t\tA.runQueue();\n\t}\n\n\tfunction matchCurrent(target: RouteTarget): boolean {\n\t\tconst partial = targetToPartial(target, true);\n\t\tif (!partial) return false; // External link\n\n\t\tif (partial.path != null || partial.p != null) {\n\t\t\tlet path = partial.path || (partial.p || []).join(\"/\") || \"/\";\n\t\t\tpath = (\"\"+path).replace(/\\/+$/, \"\");\n\t\t\tif (!path.startsWith(\"/\")) path = `/${path}`;\n\t\t\tif (!currentRouteParts[path]) return false;\n\t\t}\n\n\t\tif (partial.search) {\n\t\t\tfor(const [k,v] of Object.entries(partial.search)) {\n\t\t\t\tif (!currentRouteParts[`${k}=${v}`]) return false;\n\t\t\t}\n\t\t}\n\t\treturn true;\n\t}\n\n\tfunction push(target: RouteTarget, nav?: NavType): void {\n\t\tconst c = A.clone(A.unproxy(current));\n\t\tA.merge(c, targetToPartial(target));\n\t\tgo(c, nav || c.nav);\n\t}\n\n\tfunction back(target: RouteTarget = {}): void {\n\t\tconst partial = targetToPartial(target);\n\t\tconst stack: string[] = history.state?.stack || [];\n\t\tconst effectiveLen = stack.length + pendingGoOffset;\n\t\tfor(let i = effectiveLen - 1; i >= 0; i--) {\n\t\t\tconst histRoute: RouteState = JSON.parse(stack[i]);\n\t\t\tif (equal(histRoute, partial, true)) {\n\t\t\t\tconst pages = i - effectiveLen;\n\t\t\t\tlog(`back`, pages, histRoute);\n\t\t\t\tscheduleHistoryGo(pages);\n\t\t\t\treturn;\n\t\t\t}\n\t\t}\n\n\t\tconst newRoute = toCanonRoute(partial, \"back\", effectiveLen + 1);\n\t\tlog(`back not found, replacing`, partial);\n\t\tA.copy(current, newRoute);\n\t}\n\n\tfunction up(stripCount: number = 1): void {\n\t\tconst currentP = A.unproxy(current).p;\n\t\tconst stack: string[] = history.state?.stack || [];\n\t\tconst effectiveLen = stack.length + pendingGoOffset;\n\t\tfor(let i = effectiveLen - 1; i >= 0; i--) {\n\t\t\tconst histRoute: RouteState = JSON.parse(stack[i]);\n\t\t\tif (histRoute.p.length < currentP.length && equal(histRoute.p, currentP.slice(0, histRoute.p.length), false)) {\n\t\t\t\t// This route is shorter and matches the start of the current path\n\t\t\t\tlog(`up to ${i+1} / ${effectiveLen}`, histRoute);\n\t\t\t\tscheduleHistoryGo(i - effectiveLen);\n\t\t\t\treturn;\n\t\t\t}\n\t\t}\n\t\t// Replace current route with /\n\t\tconst newRoute = toCanonRoute({p: currentP.slice(0, currentP.length - stripCount)}, \"back\", effectiveLen + 1);\n\t\tlog(`up not found, replacing`, newRoute);\n\t\tA.copy(current, newRoute);\n\t}\n\n\n\tlet prevStack: string[];\n\n\t// Track pending historyE().go() offset. Multiple back()/up() calls before the event loop\n\t// processes them are batched into a single historyE().go() via queueMicrotask.\n\tlet pendingGoOffset = 0;\n\n\tfunction scheduleHistoryGo(delta: number) {\n\t\tpendingGoOffset += delta;\n\t\t(A.window.setTimeout ?? setTimeout)(() => {\n\t\t\tif (pendingGoOffset) {\n\t\t\t\tconst offset = pendingGoOffset;\n\t\t\t\tpendingGoOffset = 0;\n\t\t\t\thistory.go(offset);\n\t\t\t}\n\t\t}, 0);\n\t}\n\n\tconst current: RouteState = A.proxy({}) as RouteState;\n\n\t// Proxied object with keys for the current path and \"k=v\" search pairs.\n\t// Used by matchCurrent to subscribe only to relevant route changes.\n\tconst currentRouteParts = A.proxy({} as Record<string,true>);\n\n\t/**\n\t * Reset the router to its initial state, based on the current browser state. Intended for testing purposes only.\n\t * @internal\n\t * */\n\tfunction reset() {\n\t\tprevStack = history.state?.stack || [];\n\t\tconst initRoute = getRouteFromBrowser();\n\t\tlog('initial', initRoute);\n\t\tA.copy(A.unproxy(current), initRoute);\n\t}\n\n\treset();\n\n\t// Handle browser history back and forward\n\twindow.addEventListener(\"popstate\", function(event: PopStateEvent) {\n\t\tpendingGoOffset = 0;\n\t\tconst newRoute = getRouteFromBrowser();\n\t\t\n\t\t// If the stack length changes, and at least the top-most shared entry is the same,\n\t\t// we'll interpret this as a \"back\" or \"forward\" navigation.\n\t\tconst stack: string[] = history.state?.stack || [];\n\t\tif (stack.length !== prevStack.length) {\n\t\t\tconst maxIndex = Math.min(prevStack.length, stack.length) - 1;\n\t\t\tif (maxIndex < 0 || stack[maxIndex] === prevStack[maxIndex]) {\n\t\t\t\tnewRoute.nav = stack.length < prevStack.length ? \"back\" : \"forward\";\n\t\t\t}\n\t\t}\n\t\t// else nav will be \"load\"\n\t\t\n\t\tprevStack = stack;\n\t\tlog('popstate', newRoute);\n\t\tA.copy(current, newRoute);\n\t\t\n\t\tA.runQueue();\n\t});\n\n\t// Make sure these observers are never cleaned up, not even by `unmountAll`.\n\tA.leakScope(() => {\n\t\t// Sync `p` to `path`. We need to do this in a separate, higher-priority observer,\n\t\t// so that setting `route.p` will not be immediately overruled by the pre-existing `route.path`.\n\t\tA(() => {\n\t\t\tcurrent.path = \"/\" + Array.from(current.p).join(\"/\");\n\t\t});\n\n\t\t// Do a replaceState based on changes to A.proxy\n\t\tA(() => {\n\t\t\t// First normalize `route`\n\t\t\tconst stack = history.state?.stack || [];\n\t\t\tconst newRoute = toCanonRoute(current, A.unproxy(current).nav, stack.length + 1);\n\t\t\tA.copy(current, newRoute);\n\t\t\t\n\t\t\t// Then replace the current browser state if something actually changed\n\t\t\tconst state = {state: newRoute.state, stack};\n\t\t\tconst url = getUrl(newRoute);\n\t\t\tif (url !== location.pathname + location.search + location.hash || !equal(history.state, state, false)) {\n\t\t\t\tlog('replaceState', newRoute, state, url);\n\t\t\t\thistory.replaceState(state, \"\", url);\n\t\t\t}\n\t\t});\n\n\t\t// Keep currentRouteParts in sync with the current path and search params.\n\t\tA(() => {\n\t\t\tconst n = {} as Record<string,true>;\n\t\t\tn[current.path] = true;\n\t\t\tfor(const [k,v] of Object.entries(current.search)) {\n\t\t\t\tn[`${k}=${v}`] = true;\n\t\t\t}\n\t\t\tA.copy(currentRouteParts, n);\n\t\t});\n\t});\n\n\tfunction persistScroll(name = \"main\") {\n\t\tconst el = A()!;\n\t\tA('scroll=', onScroll);\n\t\t\n\t\tconst restore = A.unproxy(current).state.scroll?.[name];\n\t\tif (restore) {\n\t\t\tlog(\"restoring scroll\", name, restore);\n\t\t\tObject.assign(el, restore);\n\t\t}\n\t\t\n\t\tfunction onScroll() {\n\t\t\t(current.state.scroll ||= {})[name] = {\n\t\t\t\tscrollTop: el.scrollTop,\n\t\t\t\tscrollLeft: el.scrollLeft,\n\t\t\t};\n\t\t}\n\t}\n\n\tfunction interceptLinks() {\n\t\tA({\n\t\t\tclick: handleEvent,\n\t\t\tkeydown: handleKeyEvent,\n\t\t});\n\t\t\n\t\tfunction handleKeyEvent(e: KeyboardEvent) {\n\t\t\tif (e.key === \"Enter\") {\n\t\t\t\thandleEvent(e);\n\t\t\t}\n\t\t}\n\t\t\n\t\tfunction handleEvent(e: Event) {\n\t\t\t// Find the closest <a> tag\n\t\t\tlet target = e.target as HTMLElement | null;\n\t\t\twhile (target && target.tagName?.toUpperCase() !== \"A\") {\n\t\t\t\ttarget = target.parentElement;\n\t\t\t}\n\t\t\t\n\t\t\tif (!target) return;\n\t\t\t\n\t\t\tconst anchor = target as HTMLAnchorElement;\n\t\t\tconst href = anchor.getAttribute(\"href\");\n\t\t\t\n\t\t\tif (!href) return;\n\t\t\t\n\t\t\t// Skip hash-only links\n\t\t\tif (href.startsWith(\"#\")) return;\n\t\t\t\n\t\t\t// Skip if it has a protocol or is protocol-relative (// or contains : before any / ? #)\n\t\t\tif (href.startsWith(\"//\") || /^[^/?#]+:/.test(href)) return;\n\t\t\t\n\t\t\t// Skip if the link has target or download attribute\n\t\t\tif (anchor.getAttribute(\"target\") || anchor.getAttribute(\"download\")) return;\n\t\t\t\n\t\t\t// Skip if modifier keys are pressed (Ctrl/Cmd click to open in new tab)\n\t\t\tif (typeof MouseEvent !== 'undefined' && e instanceof MouseEvent && (e.ctrlKey || e.metaKey || e.shiftKey)) return;\n\t\t\t\n\t\t\te.preventDefault();\n\t\t\tgo(href);\n\t\t}\n\t}\n\n\treturn { current, setLog, go, matchCurrent, push, back, up, reset, persistScroll, interceptLinks } as RouteApi;\n}\n"
|
|
6
6
|
],
|
|
7
|
-
"mappings": ";
|
|
8
|
-
"debugId": "
|
|
7
|
+
"mappings": "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",
|
|
8
|
+
"debugId": "14FF890506B82D5064756E2164756E21",
|
|
9
9
|
"names": []
|
|
10
10
|
}
|
package/dist/src/server.d.ts
CHANGED
|
@@ -14,11 +14,11 @@
|
|
|
14
14
|
* @example Express
|
|
15
15
|
* ```ts
|
|
16
16
|
* import { renderToString } from 'aberdeen/server';
|
|
17
|
-
* import {
|
|
17
|
+
* import { createRoute } from 'aberdeen/route';
|
|
18
18
|
*
|
|
19
19
|
* app.get('*', (req, res) => {
|
|
20
20
|
* const { html, head } = renderToString((A) => {
|
|
21
|
-
* const route =
|
|
21
|
+
* const route = createRoute(A); // optional: routing bound to this request
|
|
22
22
|
* App(A, route);
|
|
23
23
|
* }, { url: req.originalUrl });
|
|
24
24
|
* res.send(`<!doctype html><html><head>${head}</head>` +
|
package/dist/src/server.js.map
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/server.ts"],
|
|
4
4
|
"sourcesContent": [
|
|
5
|
-
"/**\n * Server-side rendering entry point for Aberdeen (`aberdeen/server`).\n *\n * It renders an Aberdeen component to an HTML string against a fresh, isolated instance (via\n * {@link createA}) bound to a dependency-free server DOM. Because each call gets its own instance\n * and window, concurrent renders never share reactive state.\n *\n * This produces the initial, synchronous render — ideal for fast first paint, link-preview\n * bots and crawlers that don't run JavaScript. Reactive updates driven by asynchronously\n * arriving data are not awaited; the output reflects the component's initial state (including\n * any loading placeholders). Orchestrating async data and instance lifecycles is left to the\n * caller (the higher level in the stack).\n *\n * @example Express\n * ```ts\n * import { renderToString } from 'aberdeen/server';\n * import {
|
|
5
|
+
"/**\n * Server-side rendering entry point for Aberdeen (`aberdeen/server`).\n *\n * It renders an Aberdeen component to an HTML string against a fresh, isolated instance (via\n * {@link createA}) bound to a dependency-free server DOM. Because each call gets its own instance\n * and window, concurrent renders never share reactive state.\n *\n * This produces the initial, synchronous render — ideal for fast first paint, link-preview\n * bots and crawlers that don't run JavaScript. Reactive updates driven by asynchronously\n * arriving data are not awaited; the output reflects the component's initial state (including\n * any loading placeholders). Orchestrating async data and instance lifecycles is left to the\n * caller (the higher level in the stack).\n *\n * @example Express\n * ```ts\n * import { renderToString } from 'aberdeen/server';\n * import { createRoute } from 'aberdeen/route';\n *\n * app.get('*', (req, res) => {\n * const { html, head } = renderToString((A) => {\n * const route = createRoute(A); // optional: routing bound to this request\n * App(A, route);\n * }, { url: req.originalUrl });\n * res.send(`<!doctype html><html><head>${head}</head>` +\n * `<body><div id=\"app\">${html}</div><script type=\"module\" src=\"/client.js\"></script></body></html>`);\n * });\n * ```\n */\nimport { createA } from \"./aberdeen.js\";\nimport { createWindow, serializeChildren } from \"./server-dom.js\";\nimport type { ServerWindow } from \"./server-dom.js\";\n\nexport { createDocument, createWindow, serializeHtml, serializeChildren } from \"./server-dom.js\";\nexport type { ServerDocument, ServerWindow } from \"./server-dom.js\";\n\n/** Options for {@link renderToString}. */\nexport interface RenderToStringOptions {\n\t/** The request URL used to populate `window.location` so routing renders the right page. Defaults to `http://localhost/`. */\n\turl?: string;\n\t/** Use an existing server window instead of creating a fresh one (advanced). */\n\twindow?: ServerWindow;\n}\n\n/** The result of {@link renderToString}. */\nexport interface RenderToStringResult {\n\t/** The rendered HTML of the mounted content (the children of the internal root container). */\n\thtml: string;\n\t/** The serialized `<head>` content Aberdeen produced for this render (the `<style>` tag from `cssVars`/{@link aberdeen!Aberdeen.insertCss}), ready to drop into your document's `<head>`. */\n\thead: string;\n}\n\n/**\n * Render an Aberdeen component function to an HTML string.\n *\n * @param render Builds the DOM. It receives the fresh Aberdeen instance `A` for this render;\n * use it (and pass it to your components) so everything renders against this isolated instance.\n * @param options See {@link RenderToStringOptions}.\n * @returns The rendered `html` and `head`. See {@link RenderToStringResult}.\n */\nexport function renderToString(render: (A: ReturnType<typeof createA>) => void, options: RenderToStringOptions = {}): RenderToStringResult {\n\tconst win = options.window ?? createWindow(options.url);\n\t// A fresh, isolated instance per render. `transitions: false` keeps SSR output stable\n\t// (no transient `create` classes baked into the HTML).\n\tconst A = createA(win as any, { transitions: false });\n\n\tconst root = win.document.createElement(\"div\");\n\tA.mount(root as any, () => render(A));\n\tA.runQueue();\n\n\treturn {\n\t\thtml: serializeChildren(root as any),\n\t\thead: serializeChildren(win.document.head as any),\n\t};\n}\n"
|
|
6
6
|
],
|
|
7
7
|
"mappings": ";AA4BA;AACA;AAGA,yCAAyB,mDAA6B;AA2B/C,SAAS,cAAc,CAAC,QAAiD,UAAiC,CAAC,GAAyB;AAAA,EAC1I,MAAM,MAAM,QAAQ,UAAU,aAAa,QAAQ,GAAG;AAAA,EAGtD,MAAM,IAAI,QAAQ,KAAY,EAAE,aAAa,MAAM,CAAC;AAAA,EAEpD,MAAM,OAAO,IAAI,SAAS,cAAc,KAAK;AAAA,EAC7C,EAAE,MAAM,MAAa,MAAM,OAAO,CAAC,CAAC;AAAA,EACpC,EAAE,SAAS;AAAA,EAEX,OAAO;AAAA,IACN,MAAM,kBAAkB,IAAW;AAAA,IACnC,MAAM,kBAAkB,IAAI,SAAS,IAAW;AAAA,EACjD;AAAA;",
|
|
8
8
|
"debugId": "88D7E8BD3ACDEE2864756E2164756E21",
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
<!DOCTYPE html><html class="default" lang="en" data-base="../"><head><meta charset="utf-8"/><meta http-equiv="x-ua-compatible" content="IE=edge"/><title>Tutorial | Aberdeen - v2.0.
|
|
1
|
+
<!DOCTYPE html><html class="default" lang="en" data-base="../"><head><meta charset="utf-8"/><meta http-equiv="x-ua-compatible" content="IE=edge"/><title>Tutorial | Aberdeen - v2.0.1</title><link rel="icon" href="../assets/favicon.png" type="image/png"/><meta name="description" content="Documentation for Aberdeen"/><meta name="viewport" content="width=device-width, initial-scale=1"/><link rel="stylesheet" href="../assets/style.css"/><link rel="stylesheet" href="../assets/highlight.css"/><script defer src="../assets/main.js"></script><script defer src="../assets/custom.js"></script><script async src="../assets/icons.js" id="tsd-icons-script"></script><script async src="../assets/search.js" id="tsd-search-script"></script><script async src="../assets/navigation.js" id="tsd-nav-script"></script></head><body><script>document.documentElement.dataset.theme = localStorage.getItem("tsd-theme") || "os";document.body.style.display="none";setTimeout(() => window.app?app.showPage():document.body.style.removeProperty("display"),500)</script><header class="tsd-page-toolbar"><div class="tsd-toolbar-contents container"><a href="../index.html" class="title">Aberdeen - v2.0.1</a><div id="tsd-toolbar-links"><a href="https://aberdeenjs.org/">What's this?</a><a href="https://aberdeenjs.org/Tutorial/">Tutorial</a><a href="https://github.com/vanviegen/aberdeen">GitHub</a></div><button id="tsd-search-trigger" class="tsd-widget" aria-label="Search"><svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true"><use href="../assets/icons.svg#icon-search"></use></svg></button><dialog id="tsd-search" aria-label="Search"><input role="combobox" id="tsd-search-input" aria-controls="tsd-search-results" aria-autocomplete="list" aria-expanded="true" autocapitalize="off" autocomplete="off" placeholder="Search the docs" maxLength="100"/><ul role="listbox" id="tsd-search-results"></ul><div id="tsd-search-status" aria-live="polite" aria-atomic="true"><div>Preparing search index...</div></div></dialog><a href="#" class="tsd-widget menu" id="tsd-toolbar-menu-trigger" data-toggle="menu" aria-label="Menu"><svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true"><use href="../assets/icons.svg#icon-menu"></use></svg></a></div></header><div class="container container-main"><div class="col-content"><div class="tsd-page-title"><ul class="tsd-breadcrumb" aria-label="Breadcrumb"><li><a href="" aria-current="page">Tutorial</a></li></ul></div><div class="tsd-panel tsd-typography"><h1 id="tutorial" class="tsd-anchor-link">Tutorial<a href="#tutorial" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h1><h2 id="creating-elements" class="tsd-anchor-link">Creating elements<a href="#creating-elements" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h2><p>This is a complete Aberdeen application:</p>
|
|
2
2
|
<pre><code class="javascript"><span class="hl-0">import</span><span class="hl-1"> </span><span class="hl-2">A</span><span class="hl-1"> </span><span class="hl-0">from</span><span class="hl-1"> </span><span class="hl-3">'aberdeen'</span><span class="hl-1">;</span><br/><span class="hl-7">A</span><span class="hl-1">(</span><span class="hl-3">'h3#Hello world'</span><span class="hl-1">);</span>
|
|
3
3
|
</code><button type="button">Copy</button></pre>
|
|
4
4
|
|
|
@@ -302,4 +302,4 @@
|
|
|
302
302
|
<li><a href="https://aberdeenjs.org/modules.html">Reference documentation</a></li>
|
|
303
303
|
<li><a href="https://aberdeenjs.org/#examples">Examples</a></li>
|
|
304
304
|
</ul>
|
|
305
|
-
</div></div><div class="col-sidebar"><div class="page-menu"><div class="tsd-navigation settings"><details class="tsd-accordion"><summary class="tsd-accordion-summary"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" aria-hidden="true"><use href="../assets/icons.svg#icon-chevronDown"></use></svg><h3>Settings</h3></summary><div class="tsd-accordion-details"><div class="tsd-filter-visibility"><span class="settings-label">Member Visibility</span><ul id="tsd-filter-options"><li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-protected" name="protected"/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>Protected</span></label></li><li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-inherited" name="inherited" checked/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>Inherited</span></label></li><li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-external" name="external"/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>External</span></label></li></ul></div><div class="tsd-theme-toggle"><label class="settings-label" for="tsd-theme">Theme</label><select id="tsd-theme"><option value="os">OS</option><option value="light">Light</option><option value="dark">Dark</option></select></div></div></details></div><details open class="tsd-accordion tsd-page-navigation"><summary class="tsd-accordion-summary"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" aria-hidden="true"><use href="../assets/icons.svg#icon-chevronDown"></use></svg><h3>On This Page</h3></summary><div class="tsd-accordion-details"><a href="#tutorial"><span>Tutorial</span></a><ul><li><a href="#creating-elements"><span>Creating elements</span></a></li><li><a href="#inline-styles"><span>Inline styles</span></a></li><li><ul><li><a href="#property-shortcuts"><span>Property shortcuts</span></a></li><li><a href="#css-variables"><span>CSS variables</span></a></li><li><a href="#spacing-variables"><span>Spacing variables</span></a></li></ul></li><li><a href="#nesting-content"><span>Nesting content</span></a></li><li><a href="#observable-objects"><span>Observable objects</span></a></li><li><a href="#conditional-rendering"><span>Conditional rendering</span></a></li><li><a href="#observable-primitive-values"><span>Observable primitive values</span></a></li><li><a href="#observable-arrays-and-sets"><span>Observable arrays and sets</span></a></li><li><a href="#typescript-and-classes"><span>Type<wbr/>Script and classes</span></a></li><li><a href="#efficient-list-rendering-with-aoneach"><span>Efficient list rendering with <wbr/>A.on<wbr/>Each</span></a></li><li><a href="#two-way-binding"><span>Two-<wbr/>way binding</span></a></li><li><a href="#css"><span>CSS</span></a></li><li><a href="#transitions"><span>Transitions</span></a></li><li><a href="#advanced-peeking-without-subscribing"><span>Advanced: <wbr/>Peeking without subscribing</span></a></li><li><a href="#derived-values"><span>Derived values</span></a></li><li><a href="#ui-components"><span>UI <wbr/>Components</span></a></li><li><a href="#debugging-with-adump"><span>Debugging with <wbr/>A.dump()</span></a></li><li><a href="#html-to-aberdeen"><span>html-<wbr/>to-<wbr/>aberdeen</span></a></li><li><a href="#routing"><span>Routing</span></a></li><li><a href="#prediction"><span>Prediction</span></a></li><li><a href="#full-example-multi-page-app"><span>Full <wbr/>Example: <wbr/>Multi-<wbr/>page <wbr/>App</span></a></li><li><a href="#further-reading"><span>Further reading</span></a></li></ul></div></details></div><div class="site-menu"><nav id="tsd-sidebar-links" class="tsd-navigation"><a href="https://aberdeenjs.org/" class="tsd-nav-link">What's this?</a><a href="https://aberdeenjs.org/Tutorial/" class="tsd-nav-link">Tutorial</a><a href="https://github.com/vanviegen/aberdeen" class="tsd-nav-link">GitHub</a></nav><nav class="tsd-navigation"><a href="../modules.html">Aberdeen - v2.0.
|
|
305
|
+
</div></div><div class="col-sidebar"><div class="page-menu"><div class="tsd-navigation settings"><details class="tsd-accordion"><summary class="tsd-accordion-summary"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" aria-hidden="true"><use href="../assets/icons.svg#icon-chevronDown"></use></svg><h3>Settings</h3></summary><div class="tsd-accordion-details"><div class="tsd-filter-visibility"><span class="settings-label">Member Visibility</span><ul id="tsd-filter-options"><li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-protected" name="protected"/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>Protected</span></label></li><li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-inherited" name="inherited" checked/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>Inherited</span></label></li><li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-external" name="external"/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>External</span></label></li></ul></div><div class="tsd-theme-toggle"><label class="settings-label" for="tsd-theme">Theme</label><select id="tsd-theme"><option value="os">OS</option><option value="light">Light</option><option value="dark">Dark</option></select></div></div></details></div><details open class="tsd-accordion tsd-page-navigation"><summary class="tsd-accordion-summary"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" aria-hidden="true"><use href="../assets/icons.svg#icon-chevronDown"></use></svg><h3>On This Page</h3></summary><div class="tsd-accordion-details"><a href="#tutorial"><span>Tutorial</span></a><ul><li><a href="#creating-elements"><span>Creating elements</span></a></li><li><a href="#inline-styles"><span>Inline styles</span></a></li><li><ul><li><a href="#property-shortcuts"><span>Property shortcuts</span></a></li><li><a href="#css-variables"><span>CSS variables</span></a></li><li><a href="#spacing-variables"><span>Spacing variables</span></a></li></ul></li><li><a href="#nesting-content"><span>Nesting content</span></a></li><li><a href="#observable-objects"><span>Observable objects</span></a></li><li><a href="#conditional-rendering"><span>Conditional rendering</span></a></li><li><a href="#observable-primitive-values"><span>Observable primitive values</span></a></li><li><a href="#observable-arrays-and-sets"><span>Observable arrays and sets</span></a></li><li><a href="#typescript-and-classes"><span>Type<wbr/>Script and classes</span></a></li><li><a href="#efficient-list-rendering-with-aoneach"><span>Efficient list rendering with <wbr/>A.on<wbr/>Each</span></a></li><li><a href="#two-way-binding"><span>Two-<wbr/>way binding</span></a></li><li><a href="#css"><span>CSS</span></a></li><li><a href="#transitions"><span>Transitions</span></a></li><li><a href="#advanced-peeking-without-subscribing"><span>Advanced: <wbr/>Peeking without subscribing</span></a></li><li><a href="#derived-values"><span>Derived values</span></a></li><li><a href="#ui-components"><span>UI <wbr/>Components</span></a></li><li><a href="#debugging-with-adump"><span>Debugging with <wbr/>A.dump()</span></a></li><li><a href="#html-to-aberdeen"><span>html-<wbr/>to-<wbr/>aberdeen</span></a></li><li><a href="#routing"><span>Routing</span></a></li><li><a href="#prediction"><span>Prediction</span></a></li><li><a href="#full-example-multi-page-app"><span>Full <wbr/>Example: <wbr/>Multi-<wbr/>page <wbr/>App</span></a></li><li><a href="#further-reading"><span>Further reading</span></a></li></ul></div></details></div><div class="site-menu"><nav id="tsd-sidebar-links" class="tsd-navigation"><a href="https://aberdeenjs.org/" class="tsd-nav-link">What's this?</a><a href="https://aberdeenjs.org/Tutorial/" class="tsd-nav-link">Tutorial</a><a href="https://github.com/vanviegen/aberdeen" class="tsd-nav-link">GitHub</a></nav><nav class="tsd-navigation"><a href="../modules.html">Aberdeen - v2.0.1</a><ul class="tsd-small-nested-navigation" id="tsd-nav-container"><li>Loading...</li></ul></nav></div></div></div><footer></footer><div class="overlay"></div></body></html>
|