@koordinates/xstate-tree 4.3.0-beta.1 → 4.3.0-beta.3
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/lib/builders.js +18 -7
- package/lib/index.js +40 -8
- package/lib/lazy.js +20 -13
- package/lib/routing/Link.js +12 -5
- package/lib/routing/createRoute/createRoute.js +15 -11
- package/lib/routing/createRoute/index.js +5 -1
- package/lib/routing/handleLocationChange/handleLocationChange.js +11 -7
- package/lib/routing/handleLocationChange/index.js +5 -1
- package/lib/routing/index.js +21 -8
- package/lib/routing/joinRoutes.js +5 -1
- package/lib/routing/matchRoute/index.js +5 -1
- package/lib/routing/matchRoute/matchRoute.js +5 -1
- package/lib/routing/providers.js +23 -7
- package/lib/routing/routingEvent.js +2 -1
- package/lib/routing/useHref.js +7 -3
- package/lib/routing/useIsRouteActive.js +7 -3
- package/lib/routing/useRouteArgsIfActive.js +11 -7
- package/lib/setupScript.js +3 -1
- package/lib/slots/index.js +17 -1
- package/lib/slots/slots.js +9 -4
- package/lib/testingUtilities.js +54 -25
- package/lib/types.js +2 -1
- package/lib/useConstant.js +7 -3
- package/lib/useService.js +16 -11
- package/lib/utils.js +17 -7
- package/lib/xstateTree.js +105 -61
- package/package.json +4 -3
package/lib/builders.js
CHANGED
|
@@ -1,4 +1,10 @@
|
|
|
1
|
-
|
|
1
|
+
"use strict";
|
|
2
|
+
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
3
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
4
|
+
};
|
|
5
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
|
+
exports.createXStateTreeMachine = exports.buildXStateTreeMachine = exports.buildView = exports.buildActions = exports.buildSelectors = void 0;
|
|
7
|
+
const react_1 = __importDefault(require("react"));
|
|
2
8
|
/**
|
|
3
9
|
* @public
|
|
4
10
|
*
|
|
@@ -16,7 +22,7 @@ import React from "react";
|
|
|
16
22
|
* @returns The selectors - ready to be passed to {@link buildActions}
|
|
17
23
|
* @deprecated use {@link createXStateTreeMachine} instead
|
|
18
24
|
*/
|
|
19
|
-
|
|
25
|
+
function buildSelectors(__machine, selectors) {
|
|
20
26
|
let lastState = undefined;
|
|
21
27
|
let lastCachedResult = undefined;
|
|
22
28
|
let lastCtxRef = undefined;
|
|
@@ -39,6 +45,7 @@ export function buildSelectors(__machine, selectors) {
|
|
|
39
45
|
}
|
|
40
46
|
};
|
|
41
47
|
}
|
|
48
|
+
exports.buildSelectors = buildSelectors;
|
|
42
49
|
/**
|
|
43
50
|
* @public
|
|
44
51
|
*
|
|
@@ -55,9 +62,10 @@ export function buildSelectors(__machine, selectors) {
|
|
|
55
62
|
* @returns The actions function - ready to be passed to {@link buildView}
|
|
56
63
|
* @deprecated use {@link createXStateTreeMachine} instead
|
|
57
64
|
* */
|
|
58
|
-
|
|
65
|
+
function buildActions(__machine, __selectors, actions) {
|
|
59
66
|
return actions;
|
|
60
67
|
}
|
|
68
|
+
exports.buildActions = buildActions;
|
|
61
69
|
/**
|
|
62
70
|
* @public
|
|
63
71
|
*
|
|
@@ -77,9 +85,10 @@ export function buildActions(__machine, __selectors, actions) {
|
|
|
77
85
|
* @returns The React view
|
|
78
86
|
* @deprecated use {@link createXStateTreeMachine} instead
|
|
79
87
|
*/
|
|
80
|
-
|
|
81
|
-
return
|
|
88
|
+
function buildView(__machine, __selectors, __actions, __slots, view) {
|
|
89
|
+
return react_1.default.memo(view);
|
|
82
90
|
}
|
|
91
|
+
exports.buildView = buildView;
|
|
83
92
|
/**
|
|
84
93
|
* @public
|
|
85
94
|
*
|
|
@@ -90,7 +99,7 @@ export function buildView(__machine, __selectors, __actions, __slots, view) {
|
|
|
90
99
|
* @returns The xstate-tree machine, ready to be invoked by other xstate-machines or used with `buildRootComponent`
|
|
91
100
|
* @deprecated use {@link createXStateTreeMachine} instead
|
|
92
101
|
*/
|
|
93
|
-
|
|
102
|
+
function buildXStateTreeMachine(machine, meta) {
|
|
94
103
|
const copiedMeta = { ...meta };
|
|
95
104
|
copiedMeta.xstateTreeMachine = true;
|
|
96
105
|
machine.config.meta = {
|
|
@@ -101,6 +110,7 @@ export function buildXStateTreeMachine(machine, meta) {
|
|
|
101
110
|
machine.meta = { ...machine.meta, ...copiedMeta, builderVersion: 1 };
|
|
102
111
|
return machine;
|
|
103
112
|
}
|
|
113
|
+
exports.buildXStateTreeMachine = buildXStateTreeMachine;
|
|
104
114
|
/**
|
|
105
115
|
* @public
|
|
106
116
|
* Creates an xstate-tree machine from an xstate-machine
|
|
@@ -115,7 +125,7 @@ export function buildXStateTreeMachine(machine, meta) {
|
|
|
115
125
|
* @param machine - The xstate machine to create the xstate-tree machine from
|
|
116
126
|
* @param options - the xstate-tree options
|
|
117
127
|
*/
|
|
118
|
-
|
|
128
|
+
function createXStateTreeMachine(machine, options) {
|
|
119
129
|
var _a, _b, _c;
|
|
120
130
|
const selectors = (_a = options.selectors) !== null && _a !== void 0 ? _a : (({ ctx }) => ctx);
|
|
121
131
|
const actions = (_b = options.actions) !== null && _b !== void 0 ? _b : (() => ({}));
|
|
@@ -137,3 +147,4 @@ export function createXStateTreeMachine(machine, options) {
|
|
|
137
147
|
};
|
|
138
148
|
return machine;
|
|
139
149
|
}
|
|
150
|
+
exports.createXStateTreeMachine = createXStateTreeMachine;
|
package/lib/index.js
CHANGED
|
@@ -1,8 +1,40 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
1
|
+
"use strict";
|
|
2
|
+
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
|
3
|
+
if (k2 === undefined) k2 = k;
|
|
4
|
+
var desc = Object.getOwnPropertyDescriptor(m, k);
|
|
5
|
+
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
|
|
6
|
+
desc = { enumerable: true, get: function() { return m[k]; } };
|
|
7
|
+
}
|
|
8
|
+
Object.defineProperty(o, k2, desc);
|
|
9
|
+
}) : (function(o, m, k, k2) {
|
|
10
|
+
if (k2 === undefined) k2 = k;
|
|
11
|
+
o[k2] = m[k];
|
|
12
|
+
}));
|
|
13
|
+
var __exportStar = (this && this.__exportStar) || function(m, exports) {
|
|
14
|
+
for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
|
|
15
|
+
};
|
|
16
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
17
|
+
exports.lazy = exports.loggingMetaOptions = exports.TestRoutingContext = exports.useRouteArgsIfActive = exports.useIsRouteActive = exports.matchRoute = exports.buildCreateRoute = exports.Link = exports.slotTestingDummyFactory = exports.genericSlotsTestingDummy = exports.buildViewProps = exports.buildTestRootComponent = exports.onBroadcast = exports.buildRootComponent = exports.broadcast = void 0;
|
|
18
|
+
__exportStar(require("./builders"), exports);
|
|
19
|
+
__exportStar(require("./slots"), exports);
|
|
20
|
+
var xstateTree_1 = require("./xstateTree");
|
|
21
|
+
Object.defineProperty(exports, "broadcast", { enumerable: true, get: function () { return xstateTree_1.broadcast; } });
|
|
22
|
+
Object.defineProperty(exports, "buildRootComponent", { enumerable: true, get: function () { return xstateTree_1.buildRootComponent; } });
|
|
23
|
+
Object.defineProperty(exports, "onBroadcast", { enumerable: true, get: function () { return xstateTree_1.onBroadcast; } });
|
|
24
|
+
__exportStar(require("./types"), exports);
|
|
25
|
+
var testingUtilities_1 = require("./testingUtilities");
|
|
26
|
+
Object.defineProperty(exports, "buildTestRootComponent", { enumerable: true, get: function () { return testingUtilities_1.buildTestRootComponent; } });
|
|
27
|
+
Object.defineProperty(exports, "buildViewProps", { enumerable: true, get: function () { return testingUtilities_1.buildViewProps; } });
|
|
28
|
+
Object.defineProperty(exports, "genericSlotsTestingDummy", { enumerable: true, get: function () { return testingUtilities_1.genericSlotsTestingDummy; } });
|
|
29
|
+
Object.defineProperty(exports, "slotTestingDummyFactory", { enumerable: true, get: function () { return testingUtilities_1.slotTestingDummyFactory; } });
|
|
30
|
+
var routing_1 = require("./routing");
|
|
31
|
+
Object.defineProperty(exports, "Link", { enumerable: true, get: function () { return routing_1.Link; } });
|
|
32
|
+
Object.defineProperty(exports, "buildCreateRoute", { enumerable: true, get: function () { return routing_1.buildCreateRoute; } });
|
|
33
|
+
Object.defineProperty(exports, "matchRoute", { enumerable: true, get: function () { return routing_1.matchRoute; } });
|
|
34
|
+
Object.defineProperty(exports, "useIsRouteActive", { enumerable: true, get: function () { return routing_1.useIsRouteActive; } });
|
|
35
|
+
Object.defineProperty(exports, "useRouteArgsIfActive", { enumerable: true, get: function () { return routing_1.useRouteArgsIfActive; } });
|
|
36
|
+
Object.defineProperty(exports, "TestRoutingContext", { enumerable: true, get: function () { return routing_1.TestRoutingContext; } });
|
|
37
|
+
var useService_1 = require("./useService");
|
|
38
|
+
Object.defineProperty(exports, "loggingMetaOptions", { enumerable: true, get: function () { return useService_1.loggingMetaOptions; } });
|
|
39
|
+
var lazy_1 = require("./lazy");
|
|
40
|
+
Object.defineProperty(exports, "lazy", { enumerable: true, get: function () { return lazy_1.lazy; } });
|
package/lib/lazy.js
CHANGED
|
@@ -1,7 +1,13 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
1
|
+
"use strict";
|
|
2
|
+
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
3
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
4
|
+
};
|
|
5
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
|
+
exports.lazy = void 0;
|
|
7
|
+
const react_1 = __importDefault(require("react"));
|
|
8
|
+
const xstate_1 = require("xstate");
|
|
9
|
+
const builders_1 = require("./builders");
|
|
10
|
+
const slots_1 = require("./slots");
|
|
5
11
|
/**
|
|
6
12
|
* @public
|
|
7
13
|
*
|
|
@@ -12,10 +18,10 @@ import { singleSlot } from "./slots";
|
|
|
12
18
|
* @param options - configure loading component and context to invoke machine with
|
|
13
19
|
* @returns an xstate-tree machine that wraps the promise, invoking the resulting machine when it resolves
|
|
14
20
|
*/
|
|
15
|
-
|
|
16
|
-
const loadedMachineSlot = singleSlot("loadedMachine");
|
|
21
|
+
function lazy(factory, { Loader = () => null, withContext = () => ({}), } = {}) {
|
|
22
|
+
const loadedMachineSlot = (0, slots_1.singleSlot)("loadedMachine");
|
|
17
23
|
const slots = [loadedMachineSlot];
|
|
18
|
-
const machine = createMachine({
|
|
24
|
+
const machine = (0, xstate_1.createMachine)({
|
|
19
25
|
initial: "loading",
|
|
20
26
|
states: {
|
|
21
27
|
loading: {
|
|
@@ -34,18 +40,19 @@ export function lazy(factory, { Loader = () => null, withContext = () => ({}), }
|
|
|
34
40
|
},
|
|
35
41
|
},
|
|
36
42
|
});
|
|
37
|
-
const selectors = buildSelectors(machine, (ctx) => ctx);
|
|
38
|
-
const actions = buildActions(machine, selectors, (_send, _selectors) => { });
|
|
39
|
-
const view = buildView(machine, selectors, actions, slots, ({ slots, inState }) => {
|
|
43
|
+
const selectors = (0, builders_1.buildSelectors)(machine, (ctx) => ctx);
|
|
44
|
+
const actions = (0, builders_1.buildActions)(machine, selectors, (_send, _selectors) => { });
|
|
45
|
+
const view = (0, builders_1.buildView)(machine, selectors, actions, slots, ({ slots, inState }) => {
|
|
40
46
|
if (inState("loading")) {
|
|
41
|
-
return
|
|
47
|
+
return react_1.default.createElement(Loader, null);
|
|
42
48
|
}
|
|
43
|
-
return
|
|
49
|
+
return react_1.default.createElement(slots.loadedMachine, null);
|
|
44
50
|
});
|
|
45
|
-
return buildXStateTreeMachine(machine, {
|
|
51
|
+
return (0, builders_1.buildXStateTreeMachine)(machine, {
|
|
46
52
|
actions,
|
|
47
53
|
selectors,
|
|
48
54
|
slots,
|
|
49
55
|
view,
|
|
50
56
|
});
|
|
51
57
|
}
|
|
58
|
+
exports.lazy = lazy;
|
package/lib/routing/Link.js
CHANGED
|
@@ -1,5 +1,11 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
1
|
+
"use strict";
|
|
2
|
+
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
3
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
4
|
+
};
|
|
5
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
|
+
exports.Link = void 0;
|
|
7
|
+
const react_1 = __importDefault(require("react"));
|
|
8
|
+
const useHref_1 = require("./useHref");
|
|
3
9
|
/**
|
|
4
10
|
* @public
|
|
5
11
|
*
|
|
@@ -8,12 +14,12 @@ import { useHref } from "./useHref";
|
|
|
8
14
|
* The query/params/meta props are conditionally required based on the
|
|
9
15
|
* route passed as the To parameter
|
|
10
16
|
*/
|
|
11
|
-
|
|
17
|
+
function Link({ to, children, testId, preloadOnHoverMs, preloadOnInteraction, onMouseDown: _onMouseDown, onMouseEnter: _onMouseEnter, onMouseLeave: _onMouseLeave, ...rest }) {
|
|
12
18
|
// @ts-ignore, these fields _might_ exist, so typechecking doesn't believe they exist
|
|
13
19
|
// and everything that consumes params/query already checks for undefined
|
|
14
20
|
const { params, query, meta, ...props } = rest;
|
|
15
21
|
let timeout;
|
|
16
|
-
const href = useHref(to, params, query);
|
|
22
|
+
const href = (0, useHref_1.useHref)(to, params, query);
|
|
17
23
|
const onMouseDown = preloadOnInteraction
|
|
18
24
|
? (e) => {
|
|
19
25
|
_onMouseDown === null || _onMouseDown === void 0 ? void 0 : _onMouseDown(e);
|
|
@@ -36,7 +42,7 @@ export function Link({ to, children, testId, preloadOnHoverMs, preloadOnInteract
|
|
|
36
42
|
}
|
|
37
43
|
}
|
|
38
44
|
: undefined;
|
|
39
|
-
return (
|
|
45
|
+
return (react_1.default.createElement("a", { ...props, href: href, "data-testid": testId, onMouseDown: onMouseDown !== null && onMouseDown !== void 0 ? onMouseDown : _onMouseDown, onMouseEnter: onMouseEnter !== null && onMouseEnter !== void 0 ? onMouseEnter : _onMouseEnter, onMouseLeave: onMouseLeave !== null && onMouseLeave !== void 0 ? onMouseLeave : _onMouseLeave, onClick: (e) => {
|
|
40
46
|
var _a;
|
|
41
47
|
e.preventDefault();
|
|
42
48
|
if (((_a = props.onClick) === null || _a === void 0 ? void 0 : _a.call(props, e)) === false) {
|
|
@@ -50,3 +56,4 @@ export function Link({ to, children, testId, preloadOnHoverMs, preloadOnInteract
|
|
|
50
56
|
to.navigate({ params, query, meta });
|
|
51
57
|
} }, children));
|
|
52
58
|
}
|
|
59
|
+
exports.Link = Link;
|
|
@@ -1,6 +1,9 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.buildCreateRoute = void 0;
|
|
4
|
+
const path_to_regexp_1 = require("path-to-regexp");
|
|
5
|
+
const query_string_1 = require("query-string");
|
|
6
|
+
const joinRoutes_1 = require("../joinRoutes");
|
|
4
7
|
/**
|
|
5
8
|
* @public
|
|
6
9
|
*
|
|
@@ -9,7 +12,7 @@ import { joinRoutes } from "../joinRoutes";
|
|
|
9
12
|
* @param history - the history object to use for this route factory, this needs to be the same one used in the trees root component
|
|
10
13
|
* @param basePath - the base path for this route factory
|
|
11
14
|
*/
|
|
12
|
-
|
|
15
|
+
function buildCreateRoute(history, basePath) {
|
|
13
16
|
function navigate({ history, url, meta, }) {
|
|
14
17
|
const method = (meta === null || meta === void 0 ? void 0 : meta.replace) ? history.replace : history.push;
|
|
15
18
|
method(url, {
|
|
@@ -20,8 +23,8 @@ export function buildCreateRoute(history, basePath) {
|
|
|
20
23
|
return {
|
|
21
24
|
simpleRoute(baseRoute) {
|
|
22
25
|
return ({ url, paramsSchema, querySchema, ...args }) => {
|
|
23
|
-
const matcher = match(url, { end: false });
|
|
24
|
-
const reverser = compile(url);
|
|
26
|
+
const matcher = (0, path_to_regexp_1.match)(url, { end: false });
|
|
27
|
+
const reverser = (0, path_to_regexp_1.compile)(url);
|
|
25
28
|
return this.route(baseRoute)({
|
|
26
29
|
...args,
|
|
27
30
|
paramsSchema,
|
|
@@ -49,7 +52,7 @@ export function buildCreateRoute(history, basePath) {
|
|
|
49
52
|
reverser: (args) => {
|
|
50
53
|
const url = reverser(args.params);
|
|
51
54
|
if (args.query) {
|
|
52
|
-
return `${url}?${stringify(args.query)}`;
|
|
55
|
+
return `${url}?${(0, query_string_1.stringify)(args.query)}`;
|
|
53
56
|
}
|
|
54
57
|
return url;
|
|
55
58
|
},
|
|
@@ -114,7 +117,7 @@ export function buildCreateRoute(history, basePath) {
|
|
|
114
117
|
}
|
|
115
118
|
params = { ...params, ...((_a = parentMatch.params) !== null && _a !== void 0 ? _a : {}) };
|
|
116
119
|
}
|
|
117
|
-
const matches = matcher(url, parse(search));
|
|
120
|
+
const matches = matcher(url, (0, query_string_1.parse)(search));
|
|
118
121
|
// if there is any URL left after matching this route, the last to match
|
|
119
122
|
// that means the match isn't actually a match
|
|
120
123
|
if (matches === false || matches.matchLength !== url.length) {
|
|
@@ -143,15 +146,15 @@ export function buildCreateRoute(history, basePath) {
|
|
|
143
146
|
const parentRoutes = getParentArray();
|
|
144
147
|
const baseUrl = parentRoutes
|
|
145
148
|
.map((route) => route.reverser({ params }))
|
|
146
|
-
.reduce((fullUrl, urlPartial) => joinRoutes(fullUrl, urlPartial), "");
|
|
147
|
-
return `${joinRoutes(baseUrl, reverser({ params, query }))}`;
|
|
149
|
+
.reduce((fullUrl, urlPartial) => (0, joinRoutes_1.joinRoutes)(fullUrl, urlPartial), "");
|
|
150
|
+
return `${(0, joinRoutes_1.joinRoutes)(baseUrl, reverser({ params, query }))}`;
|
|
148
151
|
},
|
|
149
152
|
// @ts-ignore :cry:
|
|
150
153
|
navigate(args) {
|
|
151
154
|
const { params, query, meta } = args !== null && args !== void 0 ? args : {};
|
|
152
155
|
const url = this.reverse({ params, query });
|
|
153
156
|
navigate({
|
|
154
|
-
url: joinRoutes(this.basePath, url),
|
|
157
|
+
url: (0, joinRoutes_1.joinRoutes)(this.basePath, url),
|
|
155
158
|
meta,
|
|
156
159
|
history: this.history(),
|
|
157
160
|
});
|
|
@@ -169,3 +172,4 @@ export function buildCreateRoute(history, basePath) {
|
|
|
169
172
|
},
|
|
170
173
|
};
|
|
171
174
|
}
|
|
175
|
+
exports.buildCreateRoute = buildCreateRoute;
|
|
@@ -1 +1,5 @@
|
|
|
1
|
-
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.buildCreateRoute = void 0;
|
|
4
|
+
var createRoute_1 = require("./createRoute");
|
|
5
|
+
Object.defineProperty(exports, "buildCreateRoute", { enumerable: true, get: function () { return createRoute_1.buildCreateRoute; } });
|
|
@@ -1,11 +1,14 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.handleLocationChange = void 0;
|
|
4
|
+
const xstateTree_1 = require("../../xstateTree");
|
|
5
|
+
const matchRoute_1 = require("../matchRoute");
|
|
3
6
|
/**
|
|
4
7
|
* @internal
|
|
5
8
|
*/
|
|
6
|
-
|
|
9
|
+
function handleLocationChange(routes, basePath, path, search, meta) {
|
|
7
10
|
console.debug("[xstate-tree] Matching routes", basePath, path, search, meta);
|
|
8
|
-
const match = matchRoute(routes, basePath, path, search);
|
|
11
|
+
const match = (0, matchRoute_1.matchRoute)(routes, basePath, path, search);
|
|
9
12
|
console.debug("[xstate-tree] Match result", match);
|
|
10
13
|
if (match.type === "no-matches") {
|
|
11
14
|
const fourOhFour = {
|
|
@@ -13,7 +16,7 @@ export function handleLocationChange(routes, basePath, path, search, meta) {
|
|
|
13
16
|
url: path,
|
|
14
17
|
};
|
|
15
18
|
// @ts-ignore the event won't match GlobalEvents
|
|
16
|
-
broadcast(fourOhFour);
|
|
19
|
+
(0, xstateTree_1.broadcast)(fourOhFour);
|
|
17
20
|
return;
|
|
18
21
|
}
|
|
19
22
|
else if (match.type === "match-error") {
|
|
@@ -38,13 +41,14 @@ export function handleLocationChange(routes, basePath, path, search, meta) {
|
|
|
38
41
|
// copy the originalUrl to all parent events
|
|
39
42
|
event.originalUrl = match.event.originalUrl;
|
|
40
43
|
// @ts-ignore the event won't match GlobalEvents
|
|
41
|
-
broadcast(event);
|
|
44
|
+
(0, xstateTree_1.broadcast)(event);
|
|
42
45
|
}
|
|
43
46
|
// @ts-ignore the event won't match GlobalEvents
|
|
44
|
-
broadcast(matchedEvent);
|
|
47
|
+
(0, xstateTree_1.broadcast)(matchedEvent);
|
|
45
48
|
return {
|
|
46
49
|
events: [...clonedRoutingEvents, match.event],
|
|
47
50
|
matchedRoute: match.route,
|
|
48
51
|
};
|
|
49
52
|
}
|
|
50
53
|
}
|
|
54
|
+
exports.handleLocationChange = handleLocationChange;
|
|
@@ -1 +1,5 @@
|
|
|
1
|
-
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.handleLocationChange = void 0;
|
|
4
|
+
var handleLocationChange_1 = require("./handleLocationChange");
|
|
5
|
+
Object.defineProperty(exports, "handleLocationChange", { enumerable: true, get: function () { return handleLocationChange_1.handleLocationChange; } });
|
package/lib/routing/index.js
CHANGED
|
@@ -1,8 +1,21 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.useInRoutingContext = exports.TestRoutingContext = exports.RoutingContext = exports.useRouteArgsIfActive = exports.useIsRouteActive = exports.handleLocationChange = exports.matchRoute = exports.Link = exports.joinRoutes = exports.buildCreateRoute = void 0;
|
|
4
|
+
var createRoute_1 = require("./createRoute");
|
|
5
|
+
Object.defineProperty(exports, "buildCreateRoute", { enumerable: true, get: function () { return createRoute_1.buildCreateRoute; } });
|
|
6
|
+
var joinRoutes_1 = require("./joinRoutes");
|
|
7
|
+
Object.defineProperty(exports, "joinRoutes", { enumerable: true, get: function () { return joinRoutes_1.joinRoutes; } });
|
|
8
|
+
var Link_1 = require("./Link");
|
|
9
|
+
Object.defineProperty(exports, "Link", { enumerable: true, get: function () { return Link_1.Link; } });
|
|
10
|
+
var matchRoute_1 = require("./matchRoute");
|
|
11
|
+
Object.defineProperty(exports, "matchRoute", { enumerable: true, get: function () { return matchRoute_1.matchRoute; } });
|
|
12
|
+
var handleLocationChange_1 = require("./handleLocationChange");
|
|
13
|
+
Object.defineProperty(exports, "handleLocationChange", { enumerable: true, get: function () { return handleLocationChange_1.handleLocationChange; } });
|
|
14
|
+
var useIsRouteActive_1 = require("./useIsRouteActive");
|
|
15
|
+
Object.defineProperty(exports, "useIsRouteActive", { enumerable: true, get: function () { return useIsRouteActive_1.useIsRouteActive; } });
|
|
16
|
+
var useRouteArgsIfActive_1 = require("./useRouteArgsIfActive");
|
|
17
|
+
Object.defineProperty(exports, "useRouteArgsIfActive", { enumerable: true, get: function () { return useRouteArgsIfActive_1.useRouteArgsIfActive; } });
|
|
18
|
+
var providers_1 = require("./providers");
|
|
19
|
+
Object.defineProperty(exports, "RoutingContext", { enumerable: true, get: function () { return providers_1.RoutingContext; } });
|
|
20
|
+
Object.defineProperty(exports, "TestRoutingContext", { enumerable: true, get: function () { return providers_1.TestRoutingContext; } });
|
|
21
|
+
Object.defineProperty(exports, "useInRoutingContext", { enumerable: true, get: function () { return providers_1.useInRoutingContext; } });
|
|
@@ -1,4 +1,7 @@
|
|
|
1
|
-
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.joinRoutes = void 0;
|
|
4
|
+
function joinRoutes(base, route) {
|
|
2
5
|
const realBase = base.endsWith("/") ? base.slice(0, -1) : base;
|
|
3
6
|
const realRoute = route.startsWith("/") ? route : `/${route}`;
|
|
4
7
|
const joinedUrl = realBase + realRoute;
|
|
@@ -13,3 +16,4 @@ export function joinRoutes(base, route) {
|
|
|
13
16
|
}
|
|
14
17
|
return joinedUrl;
|
|
15
18
|
}
|
|
19
|
+
exports.joinRoutes = joinRoutes;
|
|
@@ -1 +1,5 @@
|
|
|
1
|
-
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.matchRoute = void 0;
|
|
4
|
+
var matchRoute_1 = require("./matchRoute");
|
|
5
|
+
Object.defineProperty(exports, "matchRoute", { enumerable: true, get: function () { return matchRoute_1.matchRoute; } });
|
|
@@ -1,7 +1,10 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.matchRoute = void 0;
|
|
1
4
|
/**
|
|
2
5
|
* @public
|
|
3
6
|
*/
|
|
4
|
-
|
|
7
|
+
function matchRoute(routes, basePath, path, search) {
|
|
5
8
|
var _a;
|
|
6
9
|
const realBase = basePath.endsWith("/") ? basePath.slice(0, -1) : basePath;
|
|
7
10
|
const realPath = (() => {
|
|
@@ -34,3 +37,4 @@ export function matchRoute(routes, basePath, path, search) {
|
|
|
34
37
|
}
|
|
35
38
|
return { type: "matched", route: matchingRoute, event: event };
|
|
36
39
|
}
|
|
40
|
+
exports.matchRoute = matchRoute;
|
package/lib/routing/providers.js
CHANGED
|
@@ -1,14 +1,28 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
1
|
+
"use strict";
|
|
2
|
+
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
3
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
4
|
+
};
|
|
5
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
|
+
exports.TestRoutingContext = exports.useActiveRouteEvents = exports.useInRoutingContext = exports.RoutingContext = void 0;
|
|
7
|
+
const react_1 = __importDefault(require("react"));
|
|
8
|
+
const react_2 = require("react");
|
|
9
|
+
exports.RoutingContext = (0, react_2.createContext)(undefined);
|
|
4
10
|
function useRoutingContext() {
|
|
5
|
-
const context = useContext(RoutingContext);
|
|
11
|
+
const context = (0, react_2.useContext)(exports.RoutingContext);
|
|
6
12
|
if (context === undefined) {
|
|
7
13
|
throw new Error("useRoutingContext must be used within a RoutingContext provider");
|
|
8
14
|
}
|
|
9
15
|
return context;
|
|
10
16
|
}
|
|
11
|
-
|
|
17
|
+
/**
|
|
18
|
+
* @private
|
|
19
|
+
*/
|
|
20
|
+
function useInRoutingContext() {
|
|
21
|
+
const context = (0, react_2.useContext)(exports.RoutingContext);
|
|
22
|
+
return context !== undefined;
|
|
23
|
+
}
|
|
24
|
+
exports.useInRoutingContext = useInRoutingContext;
|
|
25
|
+
function useActiveRouteEvents() {
|
|
12
26
|
var _a;
|
|
13
27
|
try {
|
|
14
28
|
const context = useRoutingContext();
|
|
@@ -18,6 +32,7 @@ export function useActiveRouteEvents() {
|
|
|
18
32
|
return undefined;
|
|
19
33
|
}
|
|
20
34
|
}
|
|
35
|
+
exports.useActiveRouteEvents = useActiveRouteEvents;
|
|
21
36
|
/**
|
|
22
37
|
* @public
|
|
23
38
|
*
|
|
@@ -26,6 +41,7 @@ export function useActiveRouteEvents() {
|
|
|
26
41
|
*
|
|
27
42
|
* @param activeRouteEvents - The active route events to use in the context
|
|
28
43
|
*/
|
|
29
|
-
|
|
30
|
-
return (
|
|
44
|
+
function TestRoutingContext({ activeRouteEvents, children, }) {
|
|
45
|
+
return (react_1.default.createElement(exports.RoutingContext.Provider, { value: { activeRouteEvents: { current: activeRouteEvents } } }, children));
|
|
31
46
|
}
|
|
47
|
+
exports.TestRoutingContext = TestRoutingContext;
|
|
@@ -1 +1,2 @@
|
|
|
1
|
-
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
package/lib/routing/useHref.js
CHANGED
|
@@ -1,14 +1,18 @@
|
|
|
1
|
-
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.useHref = void 0;
|
|
4
|
+
const joinRoutes_1 = require("./joinRoutes");
|
|
2
5
|
/**
|
|
3
6
|
* Returns a string created by joining the base path and routes URL
|
|
4
7
|
*/
|
|
5
|
-
|
|
8
|
+
function useHref(to, params, query) {
|
|
6
9
|
try {
|
|
7
10
|
const routePath = to.reverse({ params, query });
|
|
8
|
-
return joinRoutes(to.basePath, routePath);
|
|
11
|
+
return (0, joinRoutes_1.joinRoutes)(to.basePath, routePath);
|
|
9
12
|
}
|
|
10
13
|
catch (e) {
|
|
11
14
|
console.error(e);
|
|
12
15
|
}
|
|
13
16
|
return "";
|
|
14
17
|
}
|
|
18
|
+
exports.useHref = useHref;
|
|
@@ -1,4 +1,7 @@
|
|
|
1
|
-
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.useIsRouteActive = void 0;
|
|
4
|
+
const providers_1 = require("./providers");
|
|
2
5
|
/**
|
|
3
6
|
* @public
|
|
4
7
|
* Accepts Routes and returns true if any route is currently active. False if not.
|
|
@@ -8,8 +11,8 @@ import { useActiveRouteEvents } from "./providers";
|
|
|
8
11
|
* @returns true if any route is active, false if not
|
|
9
12
|
* @throws if used outside of an xstate-tree root
|
|
10
13
|
*/
|
|
11
|
-
|
|
12
|
-
const activeRouteEvents = useActiveRouteEvents();
|
|
14
|
+
function useIsRouteActive(...routes) {
|
|
15
|
+
const activeRouteEvents = (0, providers_1.useActiveRouteEvents)();
|
|
13
16
|
if (!activeRouteEvents) {
|
|
14
17
|
throw new Error("useIsRouteActive must be used within a RoutingContext. Are you using it outside of an xstate-tree Root?");
|
|
15
18
|
}
|
|
@@ -17,3 +20,4 @@ export function useIsRouteActive(...routes) {
|
|
|
17
20
|
return routes.some((route) => activeRouteEvent.type === route.event);
|
|
18
21
|
});
|
|
19
22
|
}
|
|
23
|
+
exports.useIsRouteActive = useIsRouteActive;
|
|
@@ -1,6 +1,9 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.useRouteArgsIfActive = void 0;
|
|
4
|
+
const utils_1 = require("../utils");
|
|
5
|
+
const providers_1 = require("./providers");
|
|
6
|
+
const useIsRouteActive_1 = require("./useIsRouteActive");
|
|
4
7
|
/**
|
|
5
8
|
* @public
|
|
6
9
|
* Returns the arguments for the given route if the route is active.
|
|
@@ -10,17 +13,18 @@ import { useIsRouteActive } from "./useIsRouteActive";
|
|
|
10
13
|
* @returns the arguments for the given route if the route is active, undefined otherwise
|
|
11
14
|
* @throws if used outside of an xstate-tree root
|
|
12
15
|
*/
|
|
13
|
-
|
|
14
|
-
const isActive = useIsRouteActive(route);
|
|
15
|
-
const activeRoutes = useActiveRouteEvents();
|
|
16
|
+
function useRouteArgsIfActive(route) {
|
|
17
|
+
const isActive = (0, useIsRouteActive_1.useIsRouteActive)(route);
|
|
18
|
+
const activeRoutes = (0, providers_1.useActiveRouteEvents)();
|
|
16
19
|
if (!isActive) {
|
|
17
20
|
return undefined;
|
|
18
21
|
}
|
|
19
22
|
const activeRoute = activeRoutes === null || activeRoutes === void 0 ? void 0 : activeRoutes.find((activeRoute) => activeRoute.type === route.event);
|
|
20
|
-
assertIsDefined(activeRoute, "active route is not defined, but the route is active??");
|
|
23
|
+
(0, utils_1.assertIsDefined)(activeRoute, "active route is not defined, but the route is active??");
|
|
21
24
|
return {
|
|
22
25
|
params: activeRoute.params,
|
|
23
26
|
query: activeRoute.query,
|
|
24
27
|
meta: activeRoute.meta,
|
|
25
28
|
};
|
|
26
29
|
}
|
|
30
|
+
exports.useRouteArgsIfActive = useRouteArgsIfActive;
|
package/lib/setupScript.js
CHANGED
package/lib/slots/index.js
CHANGED
|
@@ -1 +1,17 @@
|
|
|
1
|
-
|
|
1
|
+
"use strict";
|
|
2
|
+
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
|
3
|
+
if (k2 === undefined) k2 = k;
|
|
4
|
+
var desc = Object.getOwnPropertyDescriptor(m, k);
|
|
5
|
+
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
|
|
6
|
+
desc = { enumerable: true, get: function() { return m[k]; } };
|
|
7
|
+
}
|
|
8
|
+
Object.defineProperty(o, k2, desc);
|
|
9
|
+
}) : (function(o, m, k, k2) {
|
|
10
|
+
if (k2 === undefined) k2 = k;
|
|
11
|
+
o[k2] = m[k];
|
|
12
|
+
}));
|
|
13
|
+
var __exportStar = (this && this.__exportStar) || function(m, exports) {
|
|
14
|
+
for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
|
|
15
|
+
};
|
|
16
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
17
|
+
__exportStar(require("./slots"), exports);
|