@tanstack/router-devtools 0.0.1-beta.214 → 0.0.1-beta.216

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.
Files changed (12) hide show
  1. package/build/cjs/devtools.js +24 -15
  2. package/build/cjs/devtools.js.map +1 -1
  3. package/build/esm/index.js +24 -15
  4. package/build/esm/index.js.map +1 -1
  5. package/build/stats-html.html +1 -1
  6. package/build/stats-react.json +108 -108
  7. package/build/umd/index.development.js +24 -15
  8. package/build/umd/index.development.js.map +1 -1
  9. package/build/umd/index.production.js +2 -2
  10. package/build/umd/index.production.js.map +1 -1
  11. package/package.json +2 -2
  12. package/src/devtools.tsx +38 -19
package/build/stats-react.json CHANGED
@@ -7,53 +7,53 @@
7
7
  "name": "index.production.js",
8
8
  "children": [
9
9
  {
10
- "uid": "2900-130",
10
+ "uid": "ac8e-130",
11
11
  "name": "\u0000rollupPluginBabelHelpers.js"
12
12
  },
13
13
  {
14
14
  "name": "node_modules/.pnpm/tiny-invariant@1.3.1/node_modules/tiny-invariant/dist/esm/tiny-invariant.js",
15
- "uid": "2900-132"
15
+ "uid": "ac8e-132"
16
16
  },
17
17
  {
18
18
  "name": "packages",
19
19
  "children": [
20
20
  {
21
21
  "name": "react-router/build/esm/index.js",
22
- "uid": "2900-134"
22
+ "uid": "ac8e-134"
23
23
  },
24
24
  {
25
25
  "name": "router-devtools/src",
26
26
  "children": [
27
27
  {
28
- "uid": "2900-136",
28
+ "uid": "ac8e-136",
29
29
  "name": "useLocalStorage.ts"
30
30
  },
31
31
  {
32
- "uid": "2900-138",
32
+ "uid": "ac8e-138",
33
33
  "name": "theme.tsx"
34
34
  },
35
35
  {
36
- "uid": "2900-140",
36
+ "uid": "ac8e-140",
37
37
  "name": "useMediaQuery.ts"
38
38
  },
39
39
  {
40
- "uid": "2900-142",
40
+ "uid": "ac8e-142",
41
41
  "name": "utils.ts"
42
42
  },
43
43
  {
44
- "uid": "2900-144",
44
+ "uid": "ac8e-144",
45
45
  "name": "styledComponents.ts"
46
46
  },
47
47
  {
48
- "uid": "2900-146",
48
+ "uid": "ac8e-146",
49
49
  "name": "Explorer.tsx"
50
50
  },
51
51
  {
52
- "uid": "2900-148",
52
+ "uid": "ac8e-148",
53
53
  "name": "devtools.tsx"
54
54
  },
55
55
  {
56
- "uid": "2900-150",
56
+ "uid": "ac8e-150",
57
57
  "name": "index.tsx"
58
58
  }
59
59
  ]
@@ -66,345 +66,345 @@
66
66
  "isRoot": true
67
67
  },
68
68
  "nodeParts": {
69
- "2900-130": {
69
+ "ac8e-130": {
70
70
  "renderedLength": 429,
71
71
  "gzipLength": 238,
72
72
  "brotliLength": 0,
73
- "mainUid": "2900-129"
73
+ "mainUid": "ac8e-129"
74
74
  },
75
- "2900-132": {
75
+ "ac8e-132": {
76
76
  "renderedLength": 181,
77
77
  "gzipLength": 129,
78
78
  "brotliLength": 0,
79
- "mainUid": "2900-131"
79
+ "mainUid": "ac8e-131"
80
80
  },
81
- "2900-134": {
81
+ "ac8e-134": {
82
82
  "renderedLength": 881,
83
83
  "gzipLength": 424,
84
84
  "brotliLength": 0,
85
- "mainUid": "2900-133"
85
+ "mainUid": "ac8e-133"
86
86
  },
87
- "2900-136": {
87
+ "ac8e-136": {
88
88
  "renderedLength": 1083,
89
89
  "gzipLength": 410,
90
90
  "brotliLength": 0,
91
- "mainUid": "2900-135"
91
+ "mainUid": "ac8e-135"
92
92
  },
93
- "2900-138": {
93
+ "ac8e-138": {
94
94
  "renderedLength": 686,
95
95
  "gzipLength": 344,
96
96
  "brotliLength": 0,
97
- "mainUid": "2900-137"
97
+ "mainUid": "ac8e-137"
98
98
  },
99
- "2900-140": {
99
+ "ac8e-140": {
100
100
  "renderedLength": 970,
101
101
  "gzipLength": 386,
102
102
  "brotliLength": 0,
103
- "mainUid": "2900-139"
103
+ "mainUid": "ac8e-139"
104
104
  },
105
- "2900-142": {
105
+ "ac8e-142": {
106
106
  "renderedLength": 2893,
107
107
  "gzipLength": 1122,
108
108
  "brotliLength": 0,
109
- "mainUid": "2900-141"
109
+ "mainUid": "ac8e-141"
110
110
  },
111
- "2900-144": {
111
+ "ac8e-144": {
112
112
  "renderedLength": 1378,
113
113
  "gzipLength": 576,
114
114
  "brotliLength": 0,
115
- "mainUid": "2900-143"
115
+ "mainUid": "ac8e-143"
116
116
  },
117
- "2900-146": {
117
+ "ac8e-146": {
118
118
  "renderedLength": 6243,
119
119
  "gzipLength": 1853,
120
120
  "brotliLength": 0,
121
- "mainUid": "2900-145"
121
+ "mainUid": "ac8e-145"
122
122
  },
123
- "2900-148": {
124
- "renderedLength": 23510,
125
- "gzipLength": 4477,
123
+ "ac8e-148": {
124
+ "renderedLength": 23890,
125
+ "gzipLength": 4498,
126
126
  "brotliLength": 0,
127
- "mainUid": "2900-147"
127
+ "mainUid": "ac8e-147"
128
128
  },
129
- "2900-150": {
129
+ "ac8e-150": {
130
130
  "renderedLength": 0,
131
131
  "gzipLength": 0,
132
132
  "brotliLength": 0,
133
- "mainUid": "2900-149"
133
+ "mainUid": "ac8e-149"
134
134
  }
135
135
  },
136
136
  "nodeMetas": {
137
- "2900-129": {
137
+ "ac8e-129": {
138
138
  "id": "\u0000rollupPluginBabelHelpers.js",
139
139
  "moduleParts": {
140
- "index.production.js": "2900-130"
140
+ "index.production.js": "ac8e-130"
141
141
  },
142
142
  "imported": [],
143
143
  "importedBy": [
144
144
  {
145
- "uid": "2900-147"
145
+ "uid": "ac8e-147"
146
146
  },
147
147
  {
148
- "uid": "2900-137"
148
+ "uid": "ac8e-137"
149
149
  },
150
150
  {
151
- "uid": "2900-145"
151
+ "uid": "ac8e-145"
152
152
  }
153
153
  ]
154
154
  },
155
- "2900-131": {
155
+ "ac8e-131": {
156
156
  "id": "/node_modules/.pnpm/tiny-invariant@1.3.1/node_modules/tiny-invariant/dist/esm/tiny-invariant.js",
157
157
  "moduleParts": {
158
- "index.production.js": "2900-132"
158
+ "index.production.js": "ac8e-132"
159
159
  },
160
160
  "imported": [],
161
161
  "importedBy": [
162
162
  {
163
- "uid": "2900-133"
163
+ "uid": "ac8e-133"
164
164
  }
165
165
  ]
166
166
  },
167
- "2900-133": {
167
+ "ac8e-133": {
168
168
  "id": "/packages/react-router/build/esm/index.js",
169
169
  "moduleParts": {
170
- "index.production.js": "2900-134"
170
+ "index.production.js": "ac8e-134"
171
171
  },
172
172
  "imported": [
173
173
  {
174
- "uid": "2900-152"
174
+ "uid": "ac8e-152"
175
175
  },
176
176
  {
177
- "uid": "2900-131"
177
+ "uid": "ac8e-131"
178
178
  },
179
179
  {
180
- "uid": "2900-153"
180
+ "uid": "ac8e-153"
181
181
  },
182
182
  {
183
- "uid": "2900-151"
183
+ "uid": "ac8e-151"
184
184
  }
185
185
  ],
186
186
  "importedBy": [
187
187
  {
188
- "uid": "2900-147"
188
+ "uid": "ac8e-147"
189
189
  }
190
190
  ]
191
191
  },
192
- "2900-135": {
192
+ "ac8e-135": {
193
193
  "id": "/packages/router-devtools/src/useLocalStorage.ts",
194
194
  "moduleParts": {
195
- "index.production.js": "2900-136"
195
+ "index.production.js": "ac8e-136"
196
196
  },
197
197
  "imported": [
198
198
  {
199
- "uid": "2900-151"
199
+ "uid": "ac8e-151"
200
200
  }
201
201
  ],
202
202
  "importedBy": [
203
203
  {
204
- "uid": "2900-147"
204
+ "uid": "ac8e-147"
205
205
  }
206
206
  ]
207
207
  },
208
- "2900-137": {
208
+ "ac8e-137": {
209
209
  "id": "/packages/router-devtools/src/theme.tsx",
210
210
  "moduleParts": {
211
- "index.production.js": "2900-138"
211
+ "index.production.js": "ac8e-138"
212
212
  },
213
213
  "imported": [
214
214
  {
215
- "uid": "2900-129"
215
+ "uid": "ac8e-129"
216
216
  },
217
217
  {
218
- "uid": "2900-151"
218
+ "uid": "ac8e-151"
219
219
  }
220
220
  ],
221
221
  "importedBy": [
222
222
  {
223
- "uid": "2900-147"
223
+ "uid": "ac8e-147"
224
224
  },
225
225
  {
226
- "uid": "2900-141"
226
+ "uid": "ac8e-141"
227
227
  }
228
228
  ]
229
229
  },
230
- "2900-139": {
230
+ "ac8e-139": {
231
231
  "id": "/packages/router-devtools/src/useMediaQuery.ts",
232
232
  "moduleParts": {
233
- "index.production.js": "2900-140"
233
+ "index.production.js": "ac8e-140"
234
234
  },
235
235
  "imported": [
236
236
  {
237
- "uid": "2900-151"
237
+ "uid": "ac8e-151"
238
238
  }
239
239
  ],
240
240
  "importedBy": [
241
241
  {
242
- "uid": "2900-141"
242
+ "uid": "ac8e-141"
243
243
  }
244
244
  ]
245
245
  },
246
- "2900-141": {
246
+ "ac8e-141": {
247
247
  "id": "/packages/router-devtools/src/utils.ts",
248
248
  "moduleParts": {
249
- "index.production.js": "2900-142"
249
+ "index.production.js": "ac8e-142"
250
250
  },
251
251
  "imported": [
252
252
  {
253
- "uid": "2900-151"
253
+ "uid": "ac8e-151"
254
254
  },
255
255
  {
256
- "uid": "2900-137"
256
+ "uid": "ac8e-137"
257
257
  },
258
258
  {
259
- "uid": "2900-139"
259
+ "uid": "ac8e-139"
260
260
  }
261
261
  ],
262
262
  "importedBy": [
263
263
  {
264
- "uid": "2900-147"
264
+ "uid": "ac8e-147"
265
265
  },
266
266
  {
267
- "uid": "2900-143"
267
+ "uid": "ac8e-143"
268
268
  },
269
269
  {
270
- "uid": "2900-145"
270
+ "uid": "ac8e-145"
271
271
  }
272
272
  ]
273
273
  },
274
- "2900-143": {
274
+ "ac8e-143": {
275
275
  "id": "/packages/router-devtools/src/styledComponents.ts",
276
276
  "moduleParts": {
277
- "index.production.js": "2900-144"
277
+ "index.production.js": "ac8e-144"
278
278
  },
279
279
  "imported": [
280
280
  {
281
- "uid": "2900-141"
281
+ "uid": "ac8e-141"
282
282
  }
283
283
  ],
284
284
  "importedBy": [
285
285
  {
286
- "uid": "2900-147"
286
+ "uid": "ac8e-147"
287
287
  }
288
288
  ]
289
289
  },
290
- "2900-145": {
290
+ "ac8e-145": {
291
291
  "id": "/packages/router-devtools/src/Explorer.tsx",
292
292
  "moduleParts": {
293
- "index.production.js": "2900-146"
293
+ "index.production.js": "ac8e-146"
294
294
  },
295
295
  "imported": [
296
296
  {
297
- "uid": "2900-129"
297
+ "uid": "ac8e-129"
298
298
  },
299
299
  {
300
- "uid": "2900-151"
300
+ "uid": "ac8e-151"
301
301
  },
302
302
  {
303
- "uid": "2900-141"
303
+ "uid": "ac8e-141"
304
304
  }
305
305
  ],
306
306
  "importedBy": [
307
307
  {
308
- "uid": "2900-147"
308
+ "uid": "ac8e-147"
309
309
  }
310
310
  ]
311
311
  },
312
- "2900-147": {
312
+ "ac8e-147": {
313
313
  "id": "/packages/router-devtools/src/devtools.tsx",
314
314
  "moduleParts": {
315
- "index.production.js": "2900-148"
315
+ "index.production.js": "ac8e-148"
316
316
  },
317
317
  "imported": [
318
318
  {
319
- "uid": "2900-129"
319
+ "uid": "ac8e-129"
320
320
  },
321
321
  {
322
- "uid": "2900-151"
322
+ "uid": "ac8e-151"
323
323
  },
324
324
  {
325
- "uid": "2900-133"
325
+ "uid": "ac8e-133"
326
326
  },
327
327
  {
328
- "uid": "2900-135"
328
+ "uid": "ac8e-135"
329
329
  },
330
330
  {
331
- "uid": "2900-141"
331
+ "uid": "ac8e-141"
332
332
  },
333
333
  {
334
- "uid": "2900-143"
334
+ "uid": "ac8e-143"
335
335
  },
336
336
  {
337
- "uid": "2900-137"
337
+ "uid": "ac8e-137"
338
338
  },
339
339
  {
340
- "uid": "2900-145"
340
+ "uid": "ac8e-145"
341
341
  }
342
342
  ],
343
343
  "importedBy": [
344
344
  {
345
- "uid": "2900-149"
345
+ "uid": "ac8e-149"
346
346
  }
347
347
  ]
348
348
  },
349
- "2900-149": {
349
+ "ac8e-149": {
350
350
  "id": "/packages/router-devtools/src/index.tsx",
351
351
  "moduleParts": {
352
- "index.production.js": "2900-150"
352
+ "index.production.js": "ac8e-150"
353
353
  },
354
354
  "imported": [
355
355
  {
356
- "uid": "2900-147"
356
+ "uid": "ac8e-147"
357
357
  }
358
358
  ],
359
359
  "importedBy": [],
360
360
  "isEntry": true
361
361
  },
362
- "2900-151": {
362
+ "ac8e-151": {
363
363
  "id": "react",
364
364
  "moduleParts": {},
365
365
  "imported": [],
366
366
  "importedBy": [
367
367
  {
368
- "uid": "2900-147"
368
+ "uid": "ac8e-147"
369
369
  },
370
370
  {
371
- "uid": "2900-133"
371
+ "uid": "ac8e-133"
372
372
  },
373
373
  {
374
- "uid": "2900-135"
374
+ "uid": "ac8e-135"
375
375
  },
376
376
  {
377
- "uid": "2900-141"
377
+ "uid": "ac8e-141"
378
378
  },
379
379
  {
380
- "uid": "2900-137"
380
+ "uid": "ac8e-137"
381
381
  },
382
382
  {
383
- "uid": "2900-145"
383
+ "uid": "ac8e-145"
384
384
  },
385
385
  {
386
- "uid": "2900-139"
386
+ "uid": "ac8e-139"
387
387
  }
388
388
  ],
389
389
  "isExternal": true
390
390
  },
391
- "2900-152": {
391
+ "ac8e-152": {
392
392
  "id": "/packages/history/build/esm/index.js",
393
393
  "moduleParts": {},
394
394
  "imported": [],
395
395
  "importedBy": [
396
396
  {
397
- "uid": "2900-133"
397
+ "uid": "ac8e-133"
398
398
  }
399
399
  ]
400
400
  },
401
- "2900-153": {
401
+ "ac8e-153": {
402
402
  "id": "/node_modules/.pnpm/tiny-warning@1.0.3/node_modules/tiny-warning/dist/tiny-warning.esm.js",
403
403
  "moduleParts": {},
404
404
  "imported": [],
405
405
  "importedBy": [
406
406
  {
407
- "uid": "2900-133"
407
+ "uid": "ac8e-133"
408
408
  }
409
409
  ]
410
410
  }
package/build/umd/index.development.js CHANGED
@@ -766,12 +766,10 @@
766
766
  route,
767
767
  isRoot,
768
768
  activeRouteId,
769
- activeMatchId,
770
- setActiveRouteId,
771
- setActiveMatchId
769
+ setActiveRouteId
772
770
  }) {
773
771
  const router = useRouter();
774
- const matches = [...router.state.pendingMatches, ...router.state.matches];
772
+ const matches = router.state.status === 'pending' ? router.state.pendingMatches : router.state.matches;
775
773
  const match = router.state.matches.find(d => d.routeId === route.id);
776
774
  return /*#__PURE__*/React__default["default"].createElement("div", null, /*#__PURE__*/React__default["default"].createElement("div", {
777
775
  role: "button",
@@ -779,7 +777,6 @@
779
777
  onClick: () => {
780
778
  if (match) {
781
779
  setActiveRouteId(activeRouteId === route.id ? '' : route.id);
782
- setActiveMatchId(match.id);
783
780
  }
784
781
  },
785
782
  style: {
@@ -828,9 +825,7 @@
828
825
  key: r.id,
829
826
  route: r,
830
827
  activeRouteId: activeRouteId,
831
- activeMatchId: activeMatchId,
832
- setActiveRouteId: setActiveRouteId,
833
- setActiveMatchId: setActiveMatchId
828
+ setActiveRouteId: setActiveRouteId
834
829
  }))) : null);
835
830
  }
836
831
  const TanStackRouterDevtoolsPanel = /*#__PURE__*/React__default["default"].forwardRef(function TanStackRouterDevtoolsPanel(props, ref) {
@@ -849,8 +844,7 @@
849
844
 
850
845
  const [showMatches, setShowMatches] = useLocalStorage('tanstackRouterDevtoolsShowMatches', true);
851
846
  const [activeRouteId, setActiveRouteId] = useLocalStorage('tanstackRouterDevtoolsActiveRouteId', '');
852
- const [activeMatchId, setActiveMatchId] = useLocalStorage('tanstackRouterDevtoolsActiveMatchId', '');
853
- const activeMatch = React__default["default"].useMemo(() => matches.find(d => d.id === activeRouteId) || matches.find(d => d.id === activeMatchId), [activeRouteId, activeMatchId]);
847
+ const activeMatch = React__default["default"].useMemo(() => matches.find(d => d.routeId === activeRouteId), [matches, activeRouteId]);
854
848
  const hasSearch = Object.keys(router.state.location.search || {}).length;
855
849
 
856
850
  // const preloadMatches = matches.filter((match) => {
@@ -1074,10 +1068,8 @@
1074
1068
  route: router.routeTree,
1075
1069
  isRoot: true,
1076
1070
  activeRouteId: activeRouteId,
1077
- activeMatchId: activeMatchId,
1078
- setActiveRouteId: setActiveRouteId,
1079
- setActiveMatchId: setActiveMatchId
1080
- }) : /*#__PURE__*/React__default["default"].createElement("div", null, router.state.matches.map((match, i) => {
1071
+ setActiveRouteId: setActiveRouteId
1072
+ }) : /*#__PURE__*/React__default["default"].createElement("div", null, (router.state.status === 'pending' ? router.state.pendingMatches : router.state.matches).map((match, i) => {
1081
1073
  return /*#__PURE__*/React__default["default"].createElement("div", {
1082
1074
  key: match.routeId || i,
1083
1075
  role: "button",
@@ -1134,7 +1126,24 @@
1134
1126
  style: {
1135
1127
  opacity: '.5'
1136
1128
  }
1137
- }, "Last Updated"), /*#__PURE__*/React__default["default"].createElement("td", null, activeMatch.updatedAt ? new Date(activeMatch.updatedAt).toLocaleTimeString() : 'N/A'))))), /*#__PURE__*/React__default["default"].createElement("div", {
1129
+ }, "Last Updated"), /*#__PURE__*/React__default["default"].createElement("td", null, activeMatch.updatedAt ? new Date(activeMatch.updatedAt).toLocaleTimeString() : 'N/A'))))), activeMatch.loaderData ? /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement("div", {
1130
+ style: {
1131
+ background: defaultTheme.backgroundAlt,
1132
+ padding: '.5em',
1133
+ position: 'sticky',
1134
+ top: 0,
1135
+ bottom: 0,
1136
+ zIndex: 1
1137
+ }
1138
+ }, "Loader Data"), /*#__PURE__*/React__default["default"].createElement("div", {
1139
+ style: {
1140
+ padding: '.5em'
1141
+ }
1142
+ }, /*#__PURE__*/React__default["default"].createElement(Explorer, {
1143
+ label: "loaderData",
1144
+ value: activeMatch.loaderData,
1145
+ defaultExpanded: {}
1146
+ }))) : null, /*#__PURE__*/React__default["default"].createElement("div", {
1138
1147
  style: {
1139
1148
  background: defaultTheme.backgroundAlt,
1140
1149
  padding: '.5em',