@tanstack/react-router 0.0.1-beta.38 → 0.0.1-beta.39
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/build/cjs/_virtual/_rollupPluginBabelHelpers.js +0 -13
- package/build/cjs/_virtual/_rollupPluginBabelHelpers.js.map +1 -1
- package/build/cjs/index.js +306 -241
- package/build/cjs/index.js.map +1 -1
- package/build/esm/index.js +296 -252
- package/build/esm/index.js.map +1 -1
- package/build/stats-html.html +1 -1
- package/build/stats-react.json +87 -56
- package/build/types/index.d.ts +50 -42
- package/build/umd/index.development.js +1368 -858
- package/build/umd/index.development.js.map +1 -1
- package/build/umd/index.production.js +2 -2
- package/build/umd/index.production.js.map +1 -1
- package/package.json +3 -2
- package/src/index.tsx +468 -421
- package/src/uSES/useSyncExternalStore.ts +16 -0
- package/src/uSES/useSyncExternalStoreShim.ts +20 -0
- package/src/uSES/useSyncExternalStoreShimClient.ts +87 -0
- package/src/uSES/useSyncExternalStoreShimServer.ts +20 -0
package/build/cjs/index.js
CHANGED
|
@@ -15,6 +15,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
|
|
|
15
15
|
var _rollupPluginBabelHelpers = require('./_virtual/_rollupPluginBabelHelpers.js');
|
|
16
16
|
var React = require('react');
|
|
17
17
|
var shim = require('use-sync-external-store/shim');
|
|
18
|
+
var reactivity = require('@solidjs/reactivity');
|
|
18
19
|
var routerCore = require('@tanstack/router-core');
|
|
19
20
|
|
|
20
21
|
function _interopNamespace(e) {
|
|
@@ -37,267 +38,315 @@ function _interopNamespace(e) {
|
|
|
37
38
|
|
|
38
39
|
var React__namespace = /*#__PURE__*/_interopNamespace(React);
|
|
39
40
|
|
|
40
|
-
const _excluded = ["type", "children", "target", "activeProps", "inactiveProps", "activeOptions", "disabled", "hash", "search", "params", "to", "preload", "preloadDelay", "preloadMaxAge", "replace", "style", "className", "onClick", "onFocus", "onMouseEnter", "onMouseLeave", "onTouchStart", "onTouchEnd"],
|
|
41
|
-
_excluded2 = ["pending", "caseSensitive", "children"],
|
|
42
|
-
_excluded3 = ["router"];
|
|
43
41
|
function lazy(importer) {
|
|
44
42
|
const lazyComp = /*#__PURE__*/React__namespace.lazy(importer);
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
return /*#__PURE__*/React__namespace.createElement(resolvedCompRef.current, _rollupPluginBabelHelpers["extends"]({}, ref ? {
|
|
50
|
-
ref
|
|
51
|
-
} : {}, props));
|
|
52
|
-
});
|
|
53
|
-
const finalComp = forwardedComp;
|
|
54
|
-
finalComp.preload = () => {
|
|
55
|
-
if (!promise) {
|
|
56
|
-
promise = importer().then(module => {
|
|
57
|
-
resolvedComp = module.default;
|
|
58
|
-
return resolvedComp;
|
|
59
|
-
});
|
|
43
|
+
const finalComp = lazyComp;
|
|
44
|
+
finalComp.preload = async () => {
|
|
45
|
+
{
|
|
46
|
+
await importer();
|
|
60
47
|
}
|
|
61
|
-
return promise;
|
|
62
48
|
};
|
|
63
49
|
return finalComp;
|
|
64
50
|
}
|
|
65
51
|
//
|
|
66
52
|
|
|
67
|
-
function
|
|
53
|
+
function useLinkProps(options) {
|
|
68
54
|
const router = useRouter();
|
|
69
|
-
|
|
55
|
+
const {
|
|
56
|
+
// custom props
|
|
57
|
+
type,
|
|
58
|
+
children,
|
|
59
|
+
target,
|
|
60
|
+
activeProps = () => ({
|
|
61
|
+
className: 'active'
|
|
62
|
+
}),
|
|
63
|
+
inactiveProps = () => ({}),
|
|
64
|
+
activeOptions,
|
|
65
|
+
disabled,
|
|
66
|
+
// fromCurrent,
|
|
67
|
+
hash,
|
|
68
|
+
search,
|
|
69
|
+
params,
|
|
70
|
+
to,
|
|
71
|
+
preload,
|
|
72
|
+
preloadDelay,
|
|
73
|
+
preloadMaxAge,
|
|
74
|
+
replace,
|
|
75
|
+
// element props
|
|
76
|
+
style,
|
|
77
|
+
className,
|
|
78
|
+
onClick,
|
|
79
|
+
onFocus,
|
|
80
|
+
onMouseEnter,
|
|
81
|
+
onMouseLeave,
|
|
82
|
+
onTouchStart,
|
|
83
|
+
onTouchEnd,
|
|
84
|
+
...rest
|
|
85
|
+
} = options;
|
|
86
|
+
const linkInfo = router.buildLink(options);
|
|
87
|
+
if (linkInfo.type === 'external') {
|
|
88
|
+
const {
|
|
89
|
+
href
|
|
90
|
+
} = linkInfo;
|
|
91
|
+
return {
|
|
92
|
+
href
|
|
93
|
+
};
|
|
94
|
+
}
|
|
95
|
+
const {
|
|
96
|
+
handleClick,
|
|
97
|
+
handleFocus,
|
|
98
|
+
handleEnter,
|
|
99
|
+
handleLeave,
|
|
100
|
+
isActive,
|
|
101
|
+
next
|
|
102
|
+
} = linkInfo;
|
|
103
|
+
const reactHandleClick = e => {
|
|
104
|
+
if (React__namespace.startTransition) {
|
|
105
|
+
// This is a hack for react < 18
|
|
106
|
+
React__namespace.startTransition(() => {
|
|
107
|
+
handleClick(e);
|
|
108
|
+
});
|
|
109
|
+
} else {
|
|
110
|
+
handleClick(e);
|
|
111
|
+
}
|
|
112
|
+
};
|
|
113
|
+
const composeHandlers = handlers => e => {
|
|
114
|
+
if (e.persist) e.persist();
|
|
115
|
+
handlers.filter(Boolean).forEach(handler => {
|
|
116
|
+
if (e.defaultPrevented) return;
|
|
117
|
+
handler(e);
|
|
118
|
+
});
|
|
119
|
+
};
|
|
120
|
+
|
|
121
|
+
// Get the active props
|
|
122
|
+
const resolvedActiveProps = isActive ? routerCore.functionalUpdate(activeProps, {}) ?? {} : {};
|
|
123
|
+
|
|
124
|
+
// Get the inactive props
|
|
125
|
+
const resolvedInactiveProps = isActive ? {} : routerCore.functionalUpdate(inactiveProps, {}) ?? {};
|
|
126
|
+
return {
|
|
127
|
+
...resolvedActiveProps,
|
|
128
|
+
...resolvedInactiveProps,
|
|
129
|
+
...rest,
|
|
130
|
+
href: disabled ? undefined : next.href,
|
|
131
|
+
onClick: composeHandlers([onClick, reactHandleClick]),
|
|
132
|
+
onFocus: composeHandlers([onFocus, handleFocus]),
|
|
133
|
+
onMouseEnter: composeHandlers([onMouseEnter, handleEnter]),
|
|
134
|
+
onMouseLeave: composeHandlers([onMouseLeave, handleLeave]),
|
|
135
|
+
target,
|
|
136
|
+
style: {
|
|
137
|
+
...style,
|
|
138
|
+
...resolvedActiveProps.style,
|
|
139
|
+
...resolvedInactiveProps.style
|
|
140
|
+
},
|
|
141
|
+
className: [className, resolvedActiveProps.className, resolvedInactiveProps.className].filter(Boolean).join(' ') || undefined,
|
|
142
|
+
...(disabled ? {
|
|
143
|
+
role: 'link',
|
|
144
|
+
'aria-disabled': true
|
|
145
|
+
} : undefined),
|
|
146
|
+
['data-status']: isActive ? 'active' : undefined
|
|
147
|
+
};
|
|
70
148
|
}
|
|
149
|
+
const Link = /*#__PURE__*/React__namespace.forwardRef((props, ref) => {
|
|
150
|
+
const linkProps = useLinkProps(props);
|
|
151
|
+
return /*#__PURE__*/React__namespace.createElement("a", _rollupPluginBabelHelpers["extends"]({
|
|
152
|
+
ref: ref
|
|
153
|
+
}, linkProps, {
|
|
154
|
+
children: typeof props.children === 'function' ? props.children({
|
|
155
|
+
isActive: linkProps['data-status'] === 'active'
|
|
156
|
+
}) : props.children
|
|
157
|
+
}));
|
|
158
|
+
});
|
|
71
159
|
const matchesContext = /*#__PURE__*/React__namespace.createContext(null);
|
|
72
160
|
const routerContext = /*#__PURE__*/React__namespace.createContext(null);
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
const useRouterSubscription = router => {
|
|
77
|
-
shim.useSyncExternalStore(cb => router.subscribe(() => cb()), () => router.state, () => router.state);
|
|
78
|
-
};
|
|
79
|
-
function createReactRouter(opts) {
|
|
80
|
-
const makeRouteExt = (route, router) => {
|
|
81
|
-
return {
|
|
82
|
-
useRoute: function useRoute(subRouteId) {
|
|
83
|
-
if (subRouteId === void 0) {
|
|
84
|
-
subRouteId = '.';
|
|
85
|
-
}
|
|
86
|
-
const resolvedRouteId = router.resolvePath(route.routeId, subRouteId);
|
|
87
|
-
const resolvedRoute = router.getRoute(resolvedRouteId);
|
|
88
|
-
useRouterSubscription(router);
|
|
89
|
-
routerCore.invariant(resolvedRoute, "Could not find a route for route \"" + resolvedRouteId + "\"! Did you forget to add it to your route config?");
|
|
90
|
-
return resolvedRoute;
|
|
91
|
-
},
|
|
92
|
-
linkProps: options => {
|
|
93
|
-
var _functionalUpdate, _functionalUpdate2;
|
|
94
|
-
const {
|
|
95
|
-
// custom props
|
|
161
|
+
const EMPTY = {};
|
|
162
|
+
const __useStoreValue = (seed, selector) => {
|
|
163
|
+
const valueRef = React__namespace.useRef(EMPTY);
|
|
96
164
|
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
}),
|
|
101
|
-
inactiveProps = () => ({}),
|
|
102
|
-
disabled,
|
|
103
|
-
// element props
|
|
104
|
-
style,
|
|
105
|
-
className,
|
|
106
|
-
onClick,
|
|
107
|
-
onFocus,
|
|
108
|
-
onMouseEnter,
|
|
109
|
-
onMouseLeave
|
|
110
|
-
} = options,
|
|
111
|
-
rest = _rollupPluginBabelHelpers.objectWithoutPropertiesLoose(options, _excluded);
|
|
112
|
-
const linkInfo = route.buildLink(options);
|
|
113
|
-
if (linkInfo.type === 'external') {
|
|
114
|
-
const {
|
|
115
|
-
href
|
|
116
|
-
} = linkInfo;
|
|
117
|
-
return {
|
|
118
|
-
href
|
|
119
|
-
};
|
|
120
|
-
}
|
|
121
|
-
const {
|
|
122
|
-
handleClick,
|
|
123
|
-
handleFocus,
|
|
124
|
-
handleEnter,
|
|
125
|
-
handleLeave,
|
|
126
|
-
isActive,
|
|
127
|
-
next
|
|
128
|
-
} = linkInfo;
|
|
129
|
-
const reactHandleClick = e => {
|
|
130
|
-
if (React__namespace.startTransition)
|
|
131
|
-
// This is a hack for react < 18
|
|
132
|
-
React__namespace.startTransition(() => {
|
|
133
|
-
handleClick(e);
|
|
134
|
-
});else handleClick(e);
|
|
135
|
-
};
|
|
136
|
-
const composeHandlers = handlers => e => {
|
|
137
|
-
if (e.persist) e.persist();
|
|
138
|
-
handlers.forEach(handler => {
|
|
139
|
-
if (e.defaultPrevented) return;
|
|
140
|
-
if (handler) handler(e);
|
|
141
|
-
});
|
|
142
|
-
};
|
|
165
|
+
// If there is no selector, track the seed
|
|
166
|
+
// If there is a selector, do not track the seed
|
|
167
|
+
const getValue = () => !selector ? seed() : selector(reactivity.untrack(() => seed()));
|
|
143
168
|
|
|
144
|
-
|
|
145
|
-
|
|
169
|
+
// If empty, initialize the value
|
|
170
|
+
if (valueRef.current === EMPTY) {
|
|
171
|
+
valueRef.current = routerCore.sharedClone(undefined, getValue());
|
|
172
|
+
}
|
|
146
173
|
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
};
|
|
193
|
-
const coreRouter = routerCore.createRouter(_rollupPluginBabelHelpers["extends"]({}, opts, {
|
|
194
|
-
createRouter: router => {
|
|
195
|
-
const routerExt = {
|
|
196
|
-
useState: () => {
|
|
197
|
-
useRouterSubscription(router);
|
|
198
|
-
return router.state;
|
|
199
|
-
},
|
|
200
|
-
useMatch: (routeId, opts) => {
|
|
201
|
-
var _opts$strict;
|
|
202
|
-
useRouterSubscription(router);
|
|
203
|
-
const nearestMatch = useNearestMatch();
|
|
204
|
-
const match = router.state.currentMatches.find(d => d.routeId === routeId);
|
|
205
|
-
if ((_opts$strict = opts == null ? void 0 : opts.strict) != null ? _opts$strict : true) {
|
|
206
|
-
routerCore.invariant(match, "Could not find an active match for \"" + routeId + "\"!");
|
|
207
|
-
routerCore.invariant(nearestMatch.routeId == (match == null ? void 0 : match.routeId), "useMatch(\"" + (match == null ? void 0 : match.routeId) + "\") is being called in a component that is meant to render the '" + nearestMatch.routeId + "' route. Did you mean to 'useMatch(\"" + (match == null ? void 0 : match.routeId) + "\", { strict: false })' or 'useRoute(\"" + (match == null ? void 0 : match.routeId) + "\")' instead?");
|
|
208
|
-
}
|
|
209
|
-
return match;
|
|
210
|
-
}
|
|
211
|
-
};
|
|
212
|
-
const routeExt = makeRouteExt(router.getRoute(routerCore.rootRouteId), router);
|
|
213
|
-
Object.assign(router, routerExt, routeExt);
|
|
214
|
-
},
|
|
215
|
-
createRoute: _ref => {
|
|
216
|
-
let {
|
|
217
|
-
router,
|
|
218
|
-
route
|
|
219
|
-
} = _ref;
|
|
220
|
-
const routeExt = makeRouteExt(route, router);
|
|
221
|
-
Object.assign(route, routeExt);
|
|
222
|
-
},
|
|
174
|
+
// Snapshot should just return the current cached value
|
|
175
|
+
const getSnapshot = React__namespace.useCallback(() => valueRef.current, []);
|
|
176
|
+
const getStore = React__namespace.useCallback(cb => {
|
|
177
|
+
// A root is necessary to track effects
|
|
178
|
+
return reactivity.createRoot(() => {
|
|
179
|
+
reactivity.createEffect(() => {
|
|
180
|
+
// Read and update the value
|
|
181
|
+
// getValue will handle which values are accessed and
|
|
182
|
+
// thus tracked.
|
|
183
|
+
// sharedClone will both recursively track the end result
|
|
184
|
+
// and ensure that the previous value is structurally shared
|
|
185
|
+
// into the new version.
|
|
186
|
+
valueRef.current = reactivity.unwrap(
|
|
187
|
+
// Unwrap the value to get rid of any proxy structures
|
|
188
|
+
routerCore.sharedClone(valueRef.current, getValue()));
|
|
189
|
+
cb();
|
|
190
|
+
});
|
|
191
|
+
});
|
|
192
|
+
}, []);
|
|
193
|
+
return shim.useSyncExternalStore(getStore, getSnapshot, getSnapshot);
|
|
194
|
+
};
|
|
195
|
+
const [store, setStore] = reactivity.createStore({
|
|
196
|
+
foo: 'foo',
|
|
197
|
+
bar: {
|
|
198
|
+
baz: 'baz'
|
|
199
|
+
}
|
|
200
|
+
});
|
|
201
|
+
reactivity.createRoot(() => {
|
|
202
|
+
let prev;
|
|
203
|
+
reactivity.createEffect(() => {
|
|
204
|
+
console.log('effect');
|
|
205
|
+
const next = routerCore.sharedClone(prev, store);
|
|
206
|
+
console.log(next);
|
|
207
|
+
prev = reactivity.untrack(() => next);
|
|
208
|
+
});
|
|
209
|
+
});
|
|
210
|
+
setStore(s => {
|
|
211
|
+
s.foo = '1';
|
|
212
|
+
});
|
|
213
|
+
setStore(s => {
|
|
214
|
+
s.bar.baz = '2';
|
|
215
|
+
});
|
|
216
|
+
function createReactRouter(opts) {
|
|
217
|
+
const coreRouter = routerCore.createRouter({
|
|
218
|
+
...opts,
|
|
223
219
|
loadComponent: async component => {
|
|
224
|
-
if (component.preload
|
|
225
|
-
component.preload();
|
|
226
|
-
// return await component.preload()
|
|
220
|
+
if (component.preload) {
|
|
221
|
+
await component.preload();
|
|
227
222
|
}
|
|
228
|
-
|
|
229
223
|
return component;
|
|
230
224
|
}
|
|
231
|
-
})
|
|
225
|
+
});
|
|
232
226
|
return coreRouter;
|
|
233
227
|
}
|
|
234
|
-
function RouterProvider(
|
|
228
|
+
function RouterProvider(_ref) {
|
|
235
229
|
let {
|
|
236
|
-
|
|
237
|
-
|
|
238
|
-
|
|
230
|
+
router,
|
|
231
|
+
...rest
|
|
232
|
+
} = _ref;
|
|
239
233
|
router.update(rest);
|
|
240
|
-
|
|
241
|
-
React__namespace.useEffect(
|
|
242
|
-
|
|
243
|
-
}, [router]);
|
|
234
|
+
const [,, currentMatches] = __useStoreValue(() => router.store, s => [s.status, s.pendingMatches, s.currentMatches]);
|
|
235
|
+
React__namespace.useEffect(router.mount, [router]);
|
|
236
|
+
console.log('current', currentMatches);
|
|
244
237
|
return /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.createElement(routerContext.Provider, {
|
|
245
238
|
value: {
|
|
246
239
|
router: router
|
|
247
240
|
}
|
|
248
|
-
}, /*#__PURE__*/React__namespace.createElement(
|
|
249
|
-
value: [undefined, ...
|
|
241
|
+
}, /*#__PURE__*/React__namespace.createElement(matchesContext.Provider, {
|
|
242
|
+
value: [undefined, ...currentMatches]
|
|
250
243
|
}, /*#__PURE__*/React__namespace.createElement(Outlet, null))));
|
|
251
244
|
}
|
|
252
245
|
function useRouter() {
|
|
253
246
|
const value = React__namespace.useContext(routerContext);
|
|
254
247
|
routerCore.warning(!value, 'useRouter must be used inside a <Router> component!');
|
|
255
|
-
useRouterSubscription(value.router);
|
|
256
248
|
return value.router;
|
|
257
249
|
}
|
|
250
|
+
function useRouterStore(selector) {
|
|
251
|
+
const router = useRouter();
|
|
252
|
+
return __useStoreValue(() => router.store, selector);
|
|
253
|
+
}
|
|
258
254
|
function useMatches() {
|
|
259
255
|
return React__namespace.useContext(matchesContext);
|
|
260
256
|
}
|
|
261
|
-
function useMatch(
|
|
257
|
+
function useMatch(opts) {
|
|
262
258
|
const router = useRouter();
|
|
263
|
-
|
|
264
|
-
|
|
265
|
-
|
|
266
|
-
|
|
267
|
-
|
|
268
|
-
|
|
259
|
+
const nearestMatch = useMatches()[0];
|
|
260
|
+
const match = opts != null && opts.from ? router.store.currentMatches.find(d => d.routeId === (opts == null ? void 0 : opts.from)) : nearestMatch;
|
|
261
|
+
routerCore.invariant(match, `Could not find ${opts != null && opts.from ? `an active match from "${opts.from}"` : 'a nearest match!'}`);
|
|
262
|
+
if ((opts == null ? void 0 : opts.strict) ?? true) {
|
|
263
|
+
routerCore.invariant(nearestMatch.routeId == (match == null ? void 0 : match.routeId), `useMatch("${match == null ? void 0 : match.routeId}") is being called in a component that is meant to render the '${nearestMatch.routeId}' route. Did you mean to 'useMatch("${match == null ? void 0 : match.routeId}", { strict: false })' or 'useRoute("${match == null ? void 0 : match.routeId}")' instead?`);
|
|
264
|
+
}
|
|
265
|
+
__useStoreValue(() => match.store);
|
|
266
|
+
return match;
|
|
269
267
|
}
|
|
270
268
|
function useRoute(routeId) {
|
|
271
269
|
const router = useRouter();
|
|
272
|
-
|
|
270
|
+
const resolvedRoute = router.getRoute(routeId);
|
|
271
|
+
routerCore.invariant(resolvedRoute, `Could not find a route for route "${routeId}"! Did you forget to add it to your route config?`);
|
|
272
|
+
return resolvedRoute;
|
|
273
273
|
}
|
|
274
|
-
function
|
|
275
|
-
|
|
274
|
+
function useLoaderData(opts) {
|
|
275
|
+
const match = useMatch(opts);
|
|
276
|
+
return __useStoreValue(() => match == null ? void 0 : match.store.loaderData, opts == null ? void 0 : opts.select);
|
|
276
277
|
}
|
|
277
|
-
function
|
|
278
|
-
|
|
279
|
-
return (
|
|
278
|
+
function useSearch(opts) {
|
|
279
|
+
const match = useMatch(opts);
|
|
280
|
+
return __useStoreValue(() => match == null ? void 0 : match.store.search, opts == null ? void 0 : opts.select);
|
|
280
281
|
}
|
|
281
|
-
function
|
|
282
|
+
function useParams(opts) {
|
|
282
283
|
const router = useRouter();
|
|
283
|
-
return
|
|
284
|
+
return __useStoreValue(() => {
|
|
285
|
+
var _last;
|
|
286
|
+
return (_last = routerCore.last(router.store.currentMatches)) == null ? void 0 : _last.params;
|
|
287
|
+
}, opts == null ? void 0 : opts.select);
|
|
284
288
|
}
|
|
285
|
-
function
|
|
289
|
+
function useNavigate(defaultOpts) {
|
|
290
|
+
return opts => {
|
|
291
|
+
const router = useRouter();
|
|
292
|
+
return router.navigate({
|
|
293
|
+
...defaultOpts,
|
|
294
|
+
...opts
|
|
295
|
+
});
|
|
296
|
+
};
|
|
297
|
+
}
|
|
298
|
+
function useAction(opts) {
|
|
299
|
+
const route = useRoute(opts.from);
|
|
300
|
+
const action = route.action;
|
|
301
|
+
__useStoreValue(() => action);
|
|
302
|
+
return action;
|
|
303
|
+
}
|
|
304
|
+
function useMatchRoute() {
|
|
286
305
|
const router = useRouter();
|
|
287
|
-
return
|
|
306
|
+
return opts => {
|
|
307
|
+
const {
|
|
308
|
+
pending,
|
|
309
|
+
caseSensitive,
|
|
310
|
+
...rest
|
|
311
|
+
} = opts;
|
|
312
|
+
return router.matchRoute(rest, {
|
|
313
|
+
pending,
|
|
314
|
+
caseSensitive
|
|
315
|
+
});
|
|
316
|
+
};
|
|
317
|
+
}
|
|
318
|
+
function MatchRoute(props) {
|
|
319
|
+
const matchRoute = useMatchRoute();
|
|
320
|
+
const params = matchRoute(props);
|
|
321
|
+
if (!params) {
|
|
322
|
+
return null;
|
|
323
|
+
}
|
|
324
|
+
return /*#__PURE__*/React__namespace.createElement(typeof props.children === 'function' ? props.children(params) : props.children, props);
|
|
288
325
|
}
|
|
289
326
|
function Outlet() {
|
|
290
|
-
var _ref3, _match$__$pendingComp, _match$__$errorCompon;
|
|
291
327
|
const router = useRouter();
|
|
292
328
|
const matches = useMatches().slice(1);
|
|
293
329
|
const match = matches[0];
|
|
294
330
|
const defaultPending = React__namespace.useCallback(() => null, []);
|
|
331
|
+
__useStoreValue(() => match == null ? void 0 : match.store);
|
|
332
|
+
const Inner = React__namespace.useCallback(props => {
|
|
333
|
+
if (props.match.store.status === 'error') {
|
|
334
|
+
throw props.match.store.error;
|
|
335
|
+
}
|
|
336
|
+
if (props.match.store.status === 'success') {
|
|
337
|
+
return /*#__PURE__*/React__namespace.createElement(props.match.__.component ?? router.options.defaultComponent ?? Outlet);
|
|
338
|
+
}
|
|
339
|
+
if (props.match.store.status === 'loading') {
|
|
340
|
+
throw props.match.__.loadPromise;
|
|
341
|
+
}
|
|
342
|
+
routerCore.invariant(false, 'Idle routeMatch status encountered during rendering! You should never see this. File an issue!');
|
|
343
|
+
}, []);
|
|
295
344
|
if (!match) {
|
|
296
345
|
return null;
|
|
297
346
|
}
|
|
298
|
-
const PendingComponent =
|
|
299
|
-
const errorComponent =
|
|
300
|
-
return /*#__PURE__*/React__namespace.createElement(
|
|
347
|
+
const PendingComponent = match.__.pendingComponent ?? router.options.defaultPendingComponent ?? defaultPending;
|
|
348
|
+
const errorComponent = match.__.errorComponent ?? router.options.defaultErrorComponent;
|
|
349
|
+
return /*#__PURE__*/React__namespace.createElement(matchesContext.Provider, {
|
|
301
350
|
value: matches
|
|
302
351
|
}, /*#__PURE__*/React__namespace.createElement(React__namespace.Suspense, {
|
|
303
352
|
fallback: /*#__PURE__*/React__namespace.createElement(PendingComponent, null)
|
|
@@ -305,27 +354,17 @@ function Outlet() {
|
|
|
305
354
|
key: match.routeId,
|
|
306
355
|
errorComponent: errorComponent,
|
|
307
356
|
match: match
|
|
308
|
-
}, (
|
|
309
|
-
|
|
310
|
-
|
|
311
|
-
}
|
|
312
|
-
if (match.status === 'success') {
|
|
313
|
-
var _ref4, _ref5;
|
|
314
|
-
return /*#__PURE__*/React__namespace.createElement((_ref4 = (_ref5 = match.__.component) != null ? _ref5 : router.options.defaultComponent) != null ? _ref4 : Outlet);
|
|
315
|
-
}
|
|
316
|
-
throw match.__.loadPromise;
|
|
317
|
-
})())));
|
|
357
|
+
}, /*#__PURE__*/React__namespace.createElement(Inner, {
|
|
358
|
+
match: match
|
|
359
|
+
}))));
|
|
318
360
|
}
|
|
319
361
|
class CatchBoundary extends React__namespace.Component {
|
|
320
|
-
|
|
321
|
-
|
|
322
|
-
|
|
323
|
-
|
|
324
|
-
info: undefined
|
|
325
|
-
};
|
|
326
|
-
}
|
|
362
|
+
state = {
|
|
363
|
+
error: false,
|
|
364
|
+
info: undefined
|
|
365
|
+
};
|
|
327
366
|
componentDidCatch(error, info) {
|
|
328
|
-
console.error(
|
|
367
|
+
console.error(`Error in route match: ${this.props.match.matchId}`);
|
|
329
368
|
console.error(error);
|
|
330
369
|
this.setState({
|
|
331
370
|
error,
|
|
@@ -344,19 +383,18 @@ class CatchBoundary extends React__namespace.Component {
|
|
|
344
383
|
// there has to be a better way to reset error boundaries when the
|
|
345
384
|
// router's location key changes.
|
|
346
385
|
function CatchBoundaryInner(props) {
|
|
347
|
-
var _props$errorComponent;
|
|
348
386
|
const [activeErrorState, setActiveErrorState] = React__namespace.useState(props.errorState);
|
|
349
387
|
const router = useRouter();
|
|
350
|
-
const errorComponent =
|
|
388
|
+
const errorComponent = props.errorComponent ?? DefaultErrorBoundary;
|
|
351
389
|
React__namespace.useEffect(() => {
|
|
352
390
|
if (activeErrorState) {
|
|
353
|
-
let prevKey = router.
|
|
354
|
-
return
|
|
355
|
-
if (router.
|
|
356
|
-
prevKey = router.
|
|
391
|
+
let prevKey = router.store.currentLocation.key;
|
|
392
|
+
return reactivity.createRoot(() => reactivity.createEffect(() => {
|
|
393
|
+
if (router.store.currentLocation.key !== prevKey) {
|
|
394
|
+
prevKey = router.store.currentLocation.key;
|
|
357
395
|
setActiveErrorState({});
|
|
358
396
|
}
|
|
359
|
-
});
|
|
397
|
+
}));
|
|
360
398
|
}
|
|
361
399
|
return;
|
|
362
400
|
}, [activeErrorState]);
|
|
@@ -366,15 +404,15 @@ function CatchBoundaryInner(props) {
|
|
|
366
404
|
}
|
|
367
405
|
props.reset();
|
|
368
406
|
}, [props.errorState.error]);
|
|
369
|
-
if (
|
|
407
|
+
if (props.errorState.error) {
|
|
370
408
|
return /*#__PURE__*/React__namespace.createElement(errorComponent, activeErrorState);
|
|
371
409
|
}
|
|
372
410
|
return props.children;
|
|
373
411
|
}
|
|
374
|
-
function DefaultErrorBoundary(
|
|
412
|
+
function DefaultErrorBoundary(_ref2) {
|
|
375
413
|
let {
|
|
376
414
|
error
|
|
377
|
-
} =
|
|
415
|
+
} = _ref2;
|
|
378
416
|
return /*#__PURE__*/React__namespace.createElement("div", {
|
|
379
417
|
style: {
|
|
380
418
|
padding: '.5rem',
|
|
@@ -407,42 +445,69 @@ function usePrompt(message, when) {
|
|
|
407
445
|
unblock();
|
|
408
446
|
transition.retry();
|
|
409
447
|
} else {
|
|
410
|
-
router.
|
|
448
|
+
router.store.currentLocation.pathname = window.location.pathname;
|
|
411
449
|
}
|
|
412
450
|
});
|
|
413
451
|
return unblock;
|
|
414
452
|
}, [when, message]);
|
|
415
453
|
}
|
|
416
|
-
function Prompt(
|
|
454
|
+
function Prompt(_ref3) {
|
|
417
455
|
let {
|
|
418
456
|
message,
|
|
419
457
|
when,
|
|
420
458
|
children
|
|
421
|
-
} =
|
|
422
|
-
usePrompt(message, when
|
|
423
|
-
return children
|
|
459
|
+
} = _ref3;
|
|
460
|
+
usePrompt(message, when ?? true);
|
|
461
|
+
return children ?? null;
|
|
424
462
|
}
|
|
425
463
|
|
|
464
|
+
// function circularStringify(obj: any) {
|
|
465
|
+
// const seen = new Set()
|
|
466
|
+
|
|
467
|
+
// return (
|
|
468
|
+
// JSON.stringify(obj, (_, value) => {
|
|
469
|
+
// if (typeof value === 'function') {
|
|
470
|
+
// return undefined
|
|
471
|
+
// }
|
|
472
|
+
// if (typeof value === 'object' && value !== null) {
|
|
473
|
+
// if (seen.has(value)) return
|
|
474
|
+
// seen.add(value)
|
|
475
|
+
// }
|
|
476
|
+
// return value
|
|
477
|
+
// }) || ''
|
|
478
|
+
// )
|
|
479
|
+
// }
|
|
480
|
+
|
|
426
481
|
exports.DefaultErrorBoundary = DefaultErrorBoundary;
|
|
427
482
|
exports.Link = Link;
|
|
428
483
|
exports.MatchRoute = MatchRoute;
|
|
429
|
-
exports.MatchesProvider = MatchesProvider;
|
|
430
484
|
exports.Outlet = Outlet;
|
|
431
485
|
exports.Prompt = Prompt;
|
|
432
486
|
exports.RouterProvider = RouterProvider;
|
|
487
|
+
exports.__useStoreValue = __useStoreValue;
|
|
433
488
|
exports.createReactRouter = createReactRouter;
|
|
434
489
|
exports.lazy = lazy;
|
|
435
|
-
exports.linkProps = linkProps;
|
|
436
490
|
exports.matchesContext = matchesContext;
|
|
437
491
|
exports.routerContext = routerContext;
|
|
492
|
+
exports.useAction = useAction;
|
|
493
|
+
exports.useLinkProps = useLinkProps;
|
|
494
|
+
exports.useLoaderData = useLoaderData;
|
|
438
495
|
exports.useMatch = useMatch;
|
|
496
|
+
exports.useMatchRoute = useMatchRoute;
|
|
439
497
|
exports.useMatches = useMatches;
|
|
440
|
-
exports.
|
|
498
|
+
exports.useNavigate = useNavigate;
|
|
441
499
|
exports.useParams = useParams;
|
|
442
500
|
exports.usePrompt = usePrompt;
|
|
443
501
|
exports.useRoute = useRoute;
|
|
444
502
|
exports.useRouter = useRouter;
|
|
503
|
+
exports.useRouterStore = useRouterStore;
|
|
445
504
|
exports.useSearch = useSearch;
|
|
505
|
+
Object.keys(reactivity).forEach(function (k) {
|
|
506
|
+
if (k !== 'default' && !exports.hasOwnProperty(k)) Object.defineProperty(exports, k, {
|
|
507
|
+
enumerable: true,
|
|
508
|
+
get: function () { return reactivity[k]; }
|
|
509
|
+
});
|
|
510
|
+
});
|
|
446
511
|
Object.keys(routerCore).forEach(function (k) {
|
|
447
512
|
if (k !== 'default' && !exports.hasOwnProperty(k)) Object.defineProperty(exports, k, {
|
|
448
513
|
enumerable: true,
|