@hkdigital/lib-core 0.5.52 → 0.5.53
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -1,61 +1,3 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* Base class for page state machines with URL route mapping
|
|
3
|
-
*
|
|
4
|
-
* Simple state tracker that maps states to URL routes.
|
|
5
|
-
* Does NOT enforce FSM transitions - allows free navigation
|
|
6
|
-
* (because users can navigate to any URL via browser).
|
|
7
|
-
*
|
|
8
|
-
* Features:
|
|
9
|
-
* - State-to-route mapping and sync
|
|
10
|
-
* - Start path management
|
|
11
|
-
* - Data properties for business/domain state
|
|
12
|
-
* - Visited states tracking
|
|
13
|
-
* - onEnter hooks with abort/complete handlers for animations
|
|
14
|
-
*
|
|
15
|
-
* Basic usage:
|
|
16
|
-
* ```javascript
|
|
17
|
-
* const machine = new PageMachine({
|
|
18
|
-
* startPath: '/intro/start',
|
|
19
|
-
* routeMap: {
|
|
20
|
-
* [STATE_START]: '/intro/start',
|
|
21
|
-
* [STATE_PROFILE]: '/intro/profile'
|
|
22
|
-
* }
|
|
23
|
-
* });
|
|
24
|
-
*
|
|
25
|
-
* // Sync machine state with URL changes
|
|
26
|
-
* $effect(() => {
|
|
27
|
-
* machine.syncFromPath($page.url.pathname);
|
|
28
|
-
* });
|
|
29
|
-
* ```
|
|
30
|
-
*
|
|
31
|
-
* With onEnter hooks (for animations):
|
|
32
|
-
* ```javascript
|
|
33
|
-
* const machine = new PageMachine({
|
|
34
|
-
* startPath: '/game/animate',
|
|
35
|
-
* routeMap: {
|
|
36
|
-
* [STATE_ANIMATE]: '/game/animate',
|
|
37
|
-
* [STATE_PLAY]: '/game/play'
|
|
38
|
-
* },
|
|
39
|
-
* onEnterHooks: {
|
|
40
|
-
* [STATE_ANIMATE]: (done) => {
|
|
41
|
-
* const animation = playAnimation(1000);
|
|
42
|
-
* animation.finished.then(() => done(STATE_PLAY));
|
|
43
|
-
*
|
|
44
|
-
* return {
|
|
45
|
-
* abort: () => animation.cancel(),
|
|
46
|
-
* complete: () => animation.finish()
|
|
47
|
-
* };
|
|
48
|
-
* }
|
|
49
|
-
* }
|
|
50
|
-
* });
|
|
51
|
-
*
|
|
52
|
-
* // Fast-forward animation
|
|
53
|
-
* machine.completeTransitions();
|
|
54
|
-
*
|
|
55
|
-
* // Cancel animation
|
|
56
|
-
* machine.abortTransitions();
|
|
57
|
-
* ```
|
|
58
|
-
*/
|
|
59
1
|
export default class PageMachine {
|
|
60
2
|
/**
|
|
61
3
|
* Constructor
|
|
@@ -123,9 +65,15 @@ export default class PageMachine {
|
|
|
123
65
|
*
|
|
124
66
|
* @param {string} state - State name
|
|
125
67
|
*
|
|
126
|
-
* @returns {string
|
|
68
|
+
* @returns {string} Route path or null if no mapping
|
|
69
|
+
*/
|
|
70
|
+
getPathForState(state: string): string;
|
|
71
|
+
/**
|
|
72
|
+
* Navigate to the route path for a given state
|
|
73
|
+
*
|
|
74
|
+
* @param {string} state - State name
|
|
127
75
|
*/
|
|
128
|
-
|
|
76
|
+
navigateToState(state: string): void;
|
|
129
77
|
/**
|
|
130
78
|
* Get route path for current state
|
|
131
79
|
*
|
|
@@ -56,6 +56,8 @@
|
|
|
56
56
|
* machine.abortTransitions();
|
|
57
57
|
* ```
|
|
58
58
|
*/
|
|
59
|
+
import { switchToPage } from '../../../util/sveltekit.js';
|
|
60
|
+
|
|
59
61
|
export default class PageMachine {
|
|
60
62
|
/**
|
|
61
63
|
* Logger instance for state machine
|
|
@@ -252,7 +254,9 @@ export default class PageMachine {
|
|
|
252
254
|
|
|
253
255
|
if (targetState && targetState !== this.#current) {
|
|
254
256
|
// Log state transition from URL sync
|
|
255
|
-
this.logger?.debug(
|
|
257
|
+
this.logger?.debug(
|
|
258
|
+
`syncFromPath: ${currentPath} → targetState: ${targetState}`
|
|
259
|
+
);
|
|
256
260
|
|
|
257
261
|
// Use #setState to handle onEnter hooks
|
|
258
262
|
this.#setState(targetState);
|
|
@@ -299,7 +303,7 @@ export default class PageMachine {
|
|
|
299
303
|
// Create done callback for auto-transition
|
|
300
304
|
let doneCalled = false;
|
|
301
305
|
|
|
302
|
-
const done = (
|
|
306
|
+
const done = (/** @type {string} */ nextState) => {
|
|
303
307
|
if (!doneCalled && nextState && nextState !== newState) {
|
|
304
308
|
doneCalled = true;
|
|
305
309
|
this.#isTransitioning = false;
|
|
@@ -365,10 +369,26 @@ export default class PageMachine {
|
|
|
365
369
|
*
|
|
366
370
|
* @param {string} state - State name
|
|
367
371
|
*
|
|
368
|
-
* @returns {string
|
|
372
|
+
* @returns {string} Route path or null if no mapping
|
|
369
373
|
*/
|
|
370
374
|
getPathForState(state) {
|
|
371
|
-
|
|
375
|
+
const path = this.#routeMap[state];
|
|
376
|
+
|
|
377
|
+
if (!path) {
|
|
378
|
+
throw new Error(`No path found for state [${state}]`);
|
|
379
|
+
}
|
|
380
|
+
|
|
381
|
+
return path;
|
|
382
|
+
}
|
|
383
|
+
|
|
384
|
+
/**
|
|
385
|
+
* Navigate to the route path for a given state
|
|
386
|
+
*
|
|
387
|
+
* @param {string} state - State name
|
|
388
|
+
*/
|
|
389
|
+
navigateToState(state) {
|
|
390
|
+
const path = this.getPathForState(state);
|
|
391
|
+
switchToPage(path);
|
|
372
392
|
}
|
|
373
393
|
|
|
374
394
|
/**
|