@tanstack/react-router 0.0.1-beta.37 → 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 +308 -238
- package/build/cjs/index.js.map +1 -1
- package/build/esm/index.js +297 -249
- 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 -41
- package/build/umd/index.development.js +1369 -854
- 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 +470 -420
- 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,263 +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
|
+
}
|
|
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);
|
|
273
277
|
}
|
|
274
|
-
function useSearch(
|
|
275
|
-
|
|
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);
|
|
276
281
|
}
|
|
277
|
-
function
|
|
282
|
+
function useParams(opts) {
|
|
278
283
|
const router = useRouter();
|
|
279
|
-
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);
|
|
280
288
|
}
|
|
281
|
-
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() {
|
|
282
305
|
const router = useRouter();
|
|
283
|
-
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);
|
|
284
325
|
}
|
|
285
326
|
function Outlet() {
|
|
286
|
-
var _ref3, _match$__$pendingComp, _match$__$errorCompon;
|
|
287
327
|
const router = useRouter();
|
|
288
328
|
const matches = useMatches().slice(1);
|
|
289
329
|
const match = matches[0];
|
|
290
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
|
+
}, []);
|
|
291
344
|
if (!match) {
|
|
292
345
|
return null;
|
|
293
346
|
}
|
|
294
|
-
const PendingComponent =
|
|
295
|
-
const errorComponent =
|
|
296
|
-
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, {
|
|
297
350
|
value: matches
|
|
298
351
|
}, /*#__PURE__*/React__namespace.createElement(React__namespace.Suspense, {
|
|
299
352
|
fallback: /*#__PURE__*/React__namespace.createElement(PendingComponent, null)
|
|
@@ -301,27 +354,17 @@ function Outlet() {
|
|
|
301
354
|
key: match.routeId,
|
|
302
355
|
errorComponent: errorComponent,
|
|
303
356
|
match: match
|
|
304
|
-
}, (
|
|
305
|
-
|
|
306
|
-
|
|
307
|
-
}
|
|
308
|
-
if (match.status === 'success') {
|
|
309
|
-
var _ref4, _ref5;
|
|
310
|
-
return /*#__PURE__*/React__namespace.createElement((_ref4 = (_ref5 = match.__.component) != null ? _ref5 : router.options.defaultComponent) != null ? _ref4 : Outlet);
|
|
311
|
-
}
|
|
312
|
-
throw match.__.loadPromise;
|
|
313
|
-
})())));
|
|
357
|
+
}, /*#__PURE__*/React__namespace.createElement(Inner, {
|
|
358
|
+
match: match
|
|
359
|
+
}))));
|
|
314
360
|
}
|
|
315
361
|
class CatchBoundary extends React__namespace.Component {
|
|
316
|
-
|
|
317
|
-
|
|
318
|
-
|
|
319
|
-
|
|
320
|
-
info: undefined
|
|
321
|
-
};
|
|
322
|
-
}
|
|
362
|
+
state = {
|
|
363
|
+
error: false,
|
|
364
|
+
info: undefined
|
|
365
|
+
};
|
|
323
366
|
componentDidCatch(error, info) {
|
|
324
|
-
console.error(
|
|
367
|
+
console.error(`Error in route match: ${this.props.match.matchId}`);
|
|
325
368
|
console.error(error);
|
|
326
369
|
this.setState({
|
|
327
370
|
error,
|
|
@@ -340,19 +383,18 @@ class CatchBoundary extends React__namespace.Component {
|
|
|
340
383
|
// there has to be a better way to reset error boundaries when the
|
|
341
384
|
// router's location key changes.
|
|
342
385
|
function CatchBoundaryInner(props) {
|
|
343
|
-
var _props$errorComponent;
|
|
344
386
|
const [activeErrorState, setActiveErrorState] = React__namespace.useState(props.errorState);
|
|
345
387
|
const router = useRouter();
|
|
346
|
-
const errorComponent =
|
|
388
|
+
const errorComponent = props.errorComponent ?? DefaultErrorBoundary;
|
|
347
389
|
React__namespace.useEffect(() => {
|
|
348
390
|
if (activeErrorState) {
|
|
349
|
-
let prevKey = router.
|
|
350
|
-
return
|
|
351
|
-
if (router.
|
|
352
|
-
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;
|
|
353
395
|
setActiveErrorState({});
|
|
354
396
|
}
|
|
355
|
-
});
|
|
397
|
+
}));
|
|
356
398
|
}
|
|
357
399
|
return;
|
|
358
400
|
}, [activeErrorState]);
|
|
@@ -362,15 +404,15 @@ function CatchBoundaryInner(props) {
|
|
|
362
404
|
}
|
|
363
405
|
props.reset();
|
|
364
406
|
}, [props.errorState.error]);
|
|
365
|
-
if (
|
|
407
|
+
if (props.errorState.error) {
|
|
366
408
|
return /*#__PURE__*/React__namespace.createElement(errorComponent, activeErrorState);
|
|
367
409
|
}
|
|
368
410
|
return props.children;
|
|
369
411
|
}
|
|
370
|
-
function DefaultErrorBoundary(
|
|
412
|
+
function DefaultErrorBoundary(_ref2) {
|
|
371
413
|
let {
|
|
372
414
|
error
|
|
373
|
-
} =
|
|
415
|
+
} = _ref2;
|
|
374
416
|
return /*#__PURE__*/React__namespace.createElement("div", {
|
|
375
417
|
style: {
|
|
376
418
|
padding: '.5rem',
|
|
@@ -403,41 +445,69 @@ function usePrompt(message, when) {
|
|
|
403
445
|
unblock();
|
|
404
446
|
transition.retry();
|
|
405
447
|
} else {
|
|
406
|
-
router.
|
|
448
|
+
router.store.currentLocation.pathname = window.location.pathname;
|
|
407
449
|
}
|
|
408
450
|
});
|
|
409
451
|
return unblock;
|
|
410
452
|
}, [when, message]);
|
|
411
453
|
}
|
|
412
|
-
function Prompt(
|
|
454
|
+
function Prompt(_ref3) {
|
|
413
455
|
let {
|
|
414
456
|
message,
|
|
415
457
|
when,
|
|
416
458
|
children
|
|
417
|
-
} =
|
|
418
|
-
usePrompt(message, when
|
|
419
|
-
return children
|
|
459
|
+
} = _ref3;
|
|
460
|
+
usePrompt(message, when ?? true);
|
|
461
|
+
return children ?? null;
|
|
420
462
|
}
|
|
421
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
|
+
|
|
422
481
|
exports.DefaultErrorBoundary = DefaultErrorBoundary;
|
|
423
482
|
exports.Link = Link;
|
|
424
483
|
exports.MatchRoute = MatchRoute;
|
|
425
|
-
exports.MatchesProvider = MatchesProvider;
|
|
426
484
|
exports.Outlet = Outlet;
|
|
427
485
|
exports.Prompt = Prompt;
|
|
428
486
|
exports.RouterProvider = RouterProvider;
|
|
487
|
+
exports.__useStoreValue = __useStoreValue;
|
|
429
488
|
exports.createReactRouter = createReactRouter;
|
|
430
489
|
exports.lazy = lazy;
|
|
431
|
-
exports.linkProps = linkProps;
|
|
432
490
|
exports.matchesContext = matchesContext;
|
|
433
491
|
exports.routerContext = routerContext;
|
|
492
|
+
exports.useAction = useAction;
|
|
493
|
+
exports.useLinkProps = useLinkProps;
|
|
494
|
+
exports.useLoaderData = useLoaderData;
|
|
434
495
|
exports.useMatch = useMatch;
|
|
496
|
+
exports.useMatchRoute = useMatchRoute;
|
|
435
497
|
exports.useMatches = useMatches;
|
|
436
|
-
exports.
|
|
498
|
+
exports.useNavigate = useNavigate;
|
|
499
|
+
exports.useParams = useParams;
|
|
437
500
|
exports.usePrompt = usePrompt;
|
|
438
501
|
exports.useRoute = useRoute;
|
|
439
502
|
exports.useRouter = useRouter;
|
|
503
|
+
exports.useRouterStore = useRouterStore;
|
|
440
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
|
+
});
|
|
441
511
|
Object.keys(routerCore).forEach(function (k) {
|
|
442
512
|
if (k !== 'default' && !exports.hasOwnProperty(k)) Object.defineProperty(exports, k, {
|
|
443
513
|
enumerable: true,
|