@flight-framework/devtools 1.0.2 → 2.0.0
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/LICENSE +21 -0
- package/README.md +220 -220
- package/dist/bundle-panel.js +189 -189
- package/dist/cache-panel.js +189 -189
- package/dist/hydration-panel.js +142 -142
- package/dist/panel.js +721 -721
- package/package.json +49 -49
package/dist/bundle-panel.js
CHANGED
|
@@ -167,64 +167,64 @@ export function renderBundlePanel(chunksList, metrics) {
|
|
|
167
167
|
const sortedChunks = [...chunksList].sort((a, b) => b.size - a.size);
|
|
168
168
|
// Calculate bar widths relative to largest chunk
|
|
169
169
|
const maxSize = metrics.largestChunk?.size || 1;
|
|
170
|
-
return `
|
|
171
|
-
<div class="flight-dt-bundle-panel">
|
|
172
|
-
<div class="flight-dt-bundle-summary">
|
|
173
|
-
<div class="flight-dt-metric">
|
|
174
|
-
<span class="flight-dt-metric-value">${formatBytes(metrics.totalSize)}</span>
|
|
175
|
-
<span class="flight-dt-metric-label">Total Size</span>
|
|
176
|
-
</div>
|
|
177
|
-
<div class="flight-dt-metric">
|
|
178
|
-
<span class="flight-dt-metric-value">${formatBytes(metrics.totalGzipSize)}</span>
|
|
179
|
-
<span class="flight-dt-metric-label">Gzip Size</span>
|
|
180
|
-
</div>
|
|
181
|
-
<div class="flight-dt-metric">
|
|
182
|
-
<span class="flight-dt-metric-value">${metrics.totalChunks}</span>
|
|
183
|
-
<span class="flight-dt-metric-label">Chunks</span>
|
|
184
|
-
</div>
|
|
185
|
-
<div class="flight-dt-metric">
|
|
186
|
-
<span class="flight-dt-metric-value">${metrics.totalLoadTime.toFixed(0)}ms</span>
|
|
187
|
-
<span class="flight-dt-metric-label">Load Time</span>
|
|
188
|
-
</div>
|
|
189
|
-
</div>
|
|
190
|
-
|
|
191
|
-
<div class="flight-dt-bundle-breakdown">
|
|
192
|
-
<div class="flight-dt-breakdown-row">
|
|
193
|
-
<span class="flight-dt-breakdown-label">Entry</span>
|
|
194
|
-
<div class="flight-dt-breakdown-bar">
|
|
195
|
-
<div class="flight-dt-breakdown-fill flight-dt-breakdown-fill--entry"
|
|
196
|
-
style="width: ${(metrics.entrySize / metrics.totalSize) * 100}%"></div>
|
|
197
|
-
</div>
|
|
198
|
-
<span class="flight-dt-breakdown-value">${formatBytes(metrics.entrySize)}</span>
|
|
199
|
-
</div>
|
|
200
|
-
<div class="flight-dt-breakdown-row">
|
|
201
|
-
<span class="flight-dt-breakdown-label">Dynamic</span>
|
|
202
|
-
<div class="flight-dt-breakdown-bar">
|
|
203
|
-
<div class="flight-dt-breakdown-fill flight-dt-breakdown-fill--dynamic"
|
|
204
|
-
style="width: ${(metrics.dynamicSize / metrics.totalSize) * 100}%"></div>
|
|
205
|
-
</div>
|
|
206
|
-
<span class="flight-dt-breakdown-value">${formatBytes(metrics.dynamicSize)}</span>
|
|
207
|
-
</div>
|
|
208
|
-
</div>
|
|
209
|
-
|
|
210
|
-
<div class="flight-dt-chunks-list">
|
|
211
|
-
${sortedChunks.slice(0, 10).map(chunk => `
|
|
212
|
-
<div class="flight-dt-chunk ${chunk.isEntry ? 'flight-dt-chunk--entry' : ''} ${chunk.isDynamic ? 'flight-dt-chunk--dynamic' : ''}">
|
|
213
|
-
<div class="flight-dt-chunk-header">
|
|
214
|
-
<span class="flight-dt-chunk-name" title="${escapeHtml(chunk.url)}">${escapeHtml(chunk.name)}</span>
|
|
215
|
-
<span class="flight-dt-chunk-size">${formatBytes(chunk.size)}</span>
|
|
216
|
-
</div>
|
|
217
|
-
<div class="flight-dt-chunk-bar">
|
|
218
|
-
<div class="flight-dt-chunk-bar-fill" style="width: ${(chunk.size / maxSize) * 100}%"></div>
|
|
219
|
-
</div>
|
|
220
|
-
${chunk.loadTime ? `<span class="flight-dt-chunk-time">${chunk.loadTime.toFixed(0)}ms</span>` : ''}
|
|
221
|
-
</div>
|
|
222
|
-
`).join('')}
|
|
223
|
-
${sortedChunks.length > 10 ? `<div class="flight-dt-chunks-more">+ ${sortedChunks.length - 10} more chunks</div>` : ''}
|
|
224
|
-
</div>
|
|
225
|
-
|
|
226
|
-
${sortedChunks.length === 0 ? '<div class="flight-dt-empty">No chunks detected</div>' : ''}
|
|
227
|
-
</div>
|
|
170
|
+
return `
|
|
171
|
+
<div class="flight-dt-bundle-panel">
|
|
172
|
+
<div class="flight-dt-bundle-summary">
|
|
173
|
+
<div class="flight-dt-metric">
|
|
174
|
+
<span class="flight-dt-metric-value">${formatBytes(metrics.totalSize)}</span>
|
|
175
|
+
<span class="flight-dt-metric-label">Total Size</span>
|
|
176
|
+
</div>
|
|
177
|
+
<div class="flight-dt-metric">
|
|
178
|
+
<span class="flight-dt-metric-value">${formatBytes(metrics.totalGzipSize)}</span>
|
|
179
|
+
<span class="flight-dt-metric-label">Gzip Size</span>
|
|
180
|
+
</div>
|
|
181
|
+
<div class="flight-dt-metric">
|
|
182
|
+
<span class="flight-dt-metric-value">${metrics.totalChunks}</span>
|
|
183
|
+
<span class="flight-dt-metric-label">Chunks</span>
|
|
184
|
+
</div>
|
|
185
|
+
<div class="flight-dt-metric">
|
|
186
|
+
<span class="flight-dt-metric-value">${metrics.totalLoadTime.toFixed(0)}ms</span>
|
|
187
|
+
<span class="flight-dt-metric-label">Load Time</span>
|
|
188
|
+
</div>
|
|
189
|
+
</div>
|
|
190
|
+
|
|
191
|
+
<div class="flight-dt-bundle-breakdown">
|
|
192
|
+
<div class="flight-dt-breakdown-row">
|
|
193
|
+
<span class="flight-dt-breakdown-label">Entry</span>
|
|
194
|
+
<div class="flight-dt-breakdown-bar">
|
|
195
|
+
<div class="flight-dt-breakdown-fill flight-dt-breakdown-fill--entry"
|
|
196
|
+
style="width: ${(metrics.entrySize / metrics.totalSize) * 100}%"></div>
|
|
197
|
+
</div>
|
|
198
|
+
<span class="flight-dt-breakdown-value">${formatBytes(metrics.entrySize)}</span>
|
|
199
|
+
</div>
|
|
200
|
+
<div class="flight-dt-breakdown-row">
|
|
201
|
+
<span class="flight-dt-breakdown-label">Dynamic</span>
|
|
202
|
+
<div class="flight-dt-breakdown-bar">
|
|
203
|
+
<div class="flight-dt-breakdown-fill flight-dt-breakdown-fill--dynamic"
|
|
204
|
+
style="width: ${(metrics.dynamicSize / metrics.totalSize) * 100}%"></div>
|
|
205
|
+
</div>
|
|
206
|
+
<span class="flight-dt-breakdown-value">${formatBytes(metrics.dynamicSize)}</span>
|
|
207
|
+
</div>
|
|
208
|
+
</div>
|
|
209
|
+
|
|
210
|
+
<div class="flight-dt-chunks-list">
|
|
211
|
+
${sortedChunks.slice(0, 10).map(chunk => `
|
|
212
|
+
<div class="flight-dt-chunk ${chunk.isEntry ? 'flight-dt-chunk--entry' : ''} ${chunk.isDynamic ? 'flight-dt-chunk--dynamic' : ''}">
|
|
213
|
+
<div class="flight-dt-chunk-header">
|
|
214
|
+
<span class="flight-dt-chunk-name" title="${escapeHtml(chunk.url)}">${escapeHtml(chunk.name)}</span>
|
|
215
|
+
<span class="flight-dt-chunk-size">${formatBytes(chunk.size)}</span>
|
|
216
|
+
</div>
|
|
217
|
+
<div class="flight-dt-chunk-bar">
|
|
218
|
+
<div class="flight-dt-chunk-bar-fill" style="width: ${(chunk.size / maxSize) * 100}%"></div>
|
|
219
|
+
</div>
|
|
220
|
+
${chunk.loadTime ? `<span class="flight-dt-chunk-time">${chunk.loadTime.toFixed(0)}ms</span>` : ''}
|
|
221
|
+
</div>
|
|
222
|
+
`).join('')}
|
|
223
|
+
${sortedChunks.length > 10 ? `<div class="flight-dt-chunks-more">+ ${sortedChunks.length - 10} more chunks</div>` : ''}
|
|
224
|
+
</div>
|
|
225
|
+
|
|
226
|
+
${sortedChunks.length === 0 ? '<div class="flight-dt-empty">No chunks detected</div>' : ''}
|
|
227
|
+
</div>
|
|
228
228
|
`;
|
|
229
229
|
}
|
|
230
230
|
function escapeHtml(str) {
|
|
@@ -236,136 +236,136 @@ function escapeHtml(str) {
|
|
|
236
236
|
/**
|
|
237
237
|
* CSS styles for the bundle panel
|
|
238
238
|
*/
|
|
239
|
-
export const bundlePanelStyles = `
|
|
240
|
-
.flight-dt-bundle-panel {
|
|
241
|
-
padding: 8px;
|
|
242
|
-
}
|
|
243
|
-
|
|
244
|
-
.flight-dt-bundle-summary {
|
|
245
|
-
display: flex;
|
|
246
|
-
gap: 16px;
|
|
247
|
-
padding: 8px;
|
|
248
|
-
background: rgba(255, 255, 255, 0.05);
|
|
249
|
-
border-radius: 6px;
|
|
250
|
-
margin-bottom: 12px;
|
|
251
|
-
}
|
|
252
|
-
|
|
253
|
-
.flight-dt-bundle-breakdown {
|
|
254
|
-
margin-bottom: 12px;
|
|
255
|
-
}
|
|
256
|
-
|
|
257
|
-
.flight-dt-breakdown-row {
|
|
258
|
-
display: flex;
|
|
259
|
-
align-items: center;
|
|
260
|
-
gap: 8px;
|
|
261
|
-
margin-bottom: 6px;
|
|
262
|
-
}
|
|
263
|
-
|
|
264
|
-
.flight-dt-breakdown-label {
|
|
265
|
-
width: 60px;
|
|
266
|
-
font-size: 11px;
|
|
267
|
-
color: #888;
|
|
268
|
-
}
|
|
269
|
-
|
|
270
|
-
.flight-dt-breakdown-bar {
|
|
271
|
-
flex: 1;
|
|
272
|
-
height: 8px;
|
|
273
|
-
background: rgba(255, 255, 255, 0.1);
|
|
274
|
-
border-radius: 4px;
|
|
275
|
-
overflow: hidden;
|
|
276
|
-
}
|
|
277
|
-
|
|
278
|
-
.flight-dt-breakdown-fill {
|
|
279
|
-
height: 100%;
|
|
280
|
-
border-radius: 4px;
|
|
281
|
-
}
|
|
282
|
-
|
|
283
|
-
.flight-dt-breakdown-fill--entry {
|
|
284
|
-
background: #3b82f6;
|
|
285
|
-
}
|
|
286
|
-
|
|
287
|
-
.flight-dt-breakdown-fill--dynamic {
|
|
288
|
-
background: #8b5cf6;
|
|
289
|
-
}
|
|
290
|
-
|
|
291
|
-
.flight-dt-breakdown-value {
|
|
292
|
-
width: 70px;
|
|
293
|
-
text-align: right;
|
|
294
|
-
font-size: 11px;
|
|
295
|
-
color: #888;
|
|
296
|
-
font-family: monospace;
|
|
297
|
-
}
|
|
298
|
-
|
|
299
|
-
.flight-dt-chunks-list {
|
|
300
|
-
display: flex;
|
|
301
|
-
flex-direction: column;
|
|
302
|
-
gap: 6px;
|
|
303
|
-
max-height: 200px;
|
|
304
|
-
overflow-y: auto;
|
|
305
|
-
}
|
|
306
|
-
|
|
307
|
-
.flight-dt-chunk {
|
|
308
|
-
padding: 6px 8px;
|
|
309
|
-
background: rgba(255, 255, 255, 0.03);
|
|
310
|
-
border-radius: 4px;
|
|
311
|
-
border-left: 2px solid #666;
|
|
312
|
-
}
|
|
313
|
-
|
|
314
|
-
.flight-dt-chunk--entry {
|
|
315
|
-
border-left-color: #3b82f6;
|
|
316
|
-
}
|
|
317
|
-
|
|
318
|
-
.flight-dt-chunk--dynamic {
|
|
319
|
-
border-left-color: #8b5cf6;
|
|
320
|
-
}
|
|
321
|
-
|
|
322
|
-
.flight-dt-chunk-header {
|
|
323
|
-
display: flex;
|
|
324
|
-
justify-content: space-between;
|
|
325
|
-
align-items: center;
|
|
326
|
-
margin-bottom: 4px;
|
|
327
|
-
}
|
|
328
|
-
|
|
329
|
-
.flight-dt-chunk-name {
|
|
330
|
-
font-family: monospace;
|
|
331
|
-
font-size: 11px;
|
|
332
|
-
color: #e0e0e0;
|
|
333
|
-
overflow: hidden;
|
|
334
|
-
text-overflow: ellipsis;
|
|
335
|
-
white-space: nowrap;
|
|
336
|
-
max-width: 200px;
|
|
337
|
-
}
|
|
338
|
-
|
|
339
|
-
.flight-dt-chunk-size {
|
|
340
|
-
font-family: monospace;
|
|
341
|
-
font-size: 11px;
|
|
342
|
-
color: #888;
|
|
343
|
-
}
|
|
344
|
-
|
|
345
|
-
.flight-dt-chunk-bar {
|
|
346
|
-
height: 4px;
|
|
347
|
-
background: rgba(255, 255, 255, 0.1);
|
|
348
|
-
border-radius: 2px;
|
|
349
|
-
overflow: hidden;
|
|
350
|
-
}
|
|
351
|
-
|
|
352
|
-
.flight-dt-chunk-bar-fill {
|
|
353
|
-
height: 100%;
|
|
354
|
-
background: #22c55e;
|
|
355
|
-
border-radius: 2px;
|
|
356
|
-
}
|
|
357
|
-
|
|
358
|
-
.flight-dt-chunk-time {
|
|
359
|
-
font-size: 10px;
|
|
360
|
-
color: #666;
|
|
361
|
-
font-family: monospace;
|
|
362
|
-
}
|
|
363
|
-
|
|
364
|
-
.flight-dt-chunks-more {
|
|
365
|
-
text-align: center;
|
|
366
|
-
font-size: 11px;
|
|
367
|
-
color: #666;
|
|
368
|
-
padding: 8px;
|
|
369
|
-
}
|
|
239
|
+
export const bundlePanelStyles = `
|
|
240
|
+
.flight-dt-bundle-panel {
|
|
241
|
+
padding: 8px;
|
|
242
|
+
}
|
|
243
|
+
|
|
244
|
+
.flight-dt-bundle-summary {
|
|
245
|
+
display: flex;
|
|
246
|
+
gap: 16px;
|
|
247
|
+
padding: 8px;
|
|
248
|
+
background: rgba(255, 255, 255, 0.05);
|
|
249
|
+
border-radius: 6px;
|
|
250
|
+
margin-bottom: 12px;
|
|
251
|
+
}
|
|
252
|
+
|
|
253
|
+
.flight-dt-bundle-breakdown {
|
|
254
|
+
margin-bottom: 12px;
|
|
255
|
+
}
|
|
256
|
+
|
|
257
|
+
.flight-dt-breakdown-row {
|
|
258
|
+
display: flex;
|
|
259
|
+
align-items: center;
|
|
260
|
+
gap: 8px;
|
|
261
|
+
margin-bottom: 6px;
|
|
262
|
+
}
|
|
263
|
+
|
|
264
|
+
.flight-dt-breakdown-label {
|
|
265
|
+
width: 60px;
|
|
266
|
+
font-size: 11px;
|
|
267
|
+
color: #888;
|
|
268
|
+
}
|
|
269
|
+
|
|
270
|
+
.flight-dt-breakdown-bar {
|
|
271
|
+
flex: 1;
|
|
272
|
+
height: 8px;
|
|
273
|
+
background: rgba(255, 255, 255, 0.1);
|
|
274
|
+
border-radius: 4px;
|
|
275
|
+
overflow: hidden;
|
|
276
|
+
}
|
|
277
|
+
|
|
278
|
+
.flight-dt-breakdown-fill {
|
|
279
|
+
height: 100%;
|
|
280
|
+
border-radius: 4px;
|
|
281
|
+
}
|
|
282
|
+
|
|
283
|
+
.flight-dt-breakdown-fill--entry {
|
|
284
|
+
background: #3b82f6;
|
|
285
|
+
}
|
|
286
|
+
|
|
287
|
+
.flight-dt-breakdown-fill--dynamic {
|
|
288
|
+
background: #8b5cf6;
|
|
289
|
+
}
|
|
290
|
+
|
|
291
|
+
.flight-dt-breakdown-value {
|
|
292
|
+
width: 70px;
|
|
293
|
+
text-align: right;
|
|
294
|
+
font-size: 11px;
|
|
295
|
+
color: #888;
|
|
296
|
+
font-family: monospace;
|
|
297
|
+
}
|
|
298
|
+
|
|
299
|
+
.flight-dt-chunks-list {
|
|
300
|
+
display: flex;
|
|
301
|
+
flex-direction: column;
|
|
302
|
+
gap: 6px;
|
|
303
|
+
max-height: 200px;
|
|
304
|
+
overflow-y: auto;
|
|
305
|
+
}
|
|
306
|
+
|
|
307
|
+
.flight-dt-chunk {
|
|
308
|
+
padding: 6px 8px;
|
|
309
|
+
background: rgba(255, 255, 255, 0.03);
|
|
310
|
+
border-radius: 4px;
|
|
311
|
+
border-left: 2px solid #666;
|
|
312
|
+
}
|
|
313
|
+
|
|
314
|
+
.flight-dt-chunk--entry {
|
|
315
|
+
border-left-color: #3b82f6;
|
|
316
|
+
}
|
|
317
|
+
|
|
318
|
+
.flight-dt-chunk--dynamic {
|
|
319
|
+
border-left-color: #8b5cf6;
|
|
320
|
+
}
|
|
321
|
+
|
|
322
|
+
.flight-dt-chunk-header {
|
|
323
|
+
display: flex;
|
|
324
|
+
justify-content: space-between;
|
|
325
|
+
align-items: center;
|
|
326
|
+
margin-bottom: 4px;
|
|
327
|
+
}
|
|
328
|
+
|
|
329
|
+
.flight-dt-chunk-name {
|
|
330
|
+
font-family: monospace;
|
|
331
|
+
font-size: 11px;
|
|
332
|
+
color: #e0e0e0;
|
|
333
|
+
overflow: hidden;
|
|
334
|
+
text-overflow: ellipsis;
|
|
335
|
+
white-space: nowrap;
|
|
336
|
+
max-width: 200px;
|
|
337
|
+
}
|
|
338
|
+
|
|
339
|
+
.flight-dt-chunk-size {
|
|
340
|
+
font-family: monospace;
|
|
341
|
+
font-size: 11px;
|
|
342
|
+
color: #888;
|
|
343
|
+
}
|
|
344
|
+
|
|
345
|
+
.flight-dt-chunk-bar {
|
|
346
|
+
height: 4px;
|
|
347
|
+
background: rgba(255, 255, 255, 0.1);
|
|
348
|
+
border-radius: 2px;
|
|
349
|
+
overflow: hidden;
|
|
350
|
+
}
|
|
351
|
+
|
|
352
|
+
.flight-dt-chunk-bar-fill {
|
|
353
|
+
height: 100%;
|
|
354
|
+
background: #22c55e;
|
|
355
|
+
border-radius: 2px;
|
|
356
|
+
}
|
|
357
|
+
|
|
358
|
+
.flight-dt-chunk-time {
|
|
359
|
+
font-size: 10px;
|
|
360
|
+
color: #666;
|
|
361
|
+
font-family: monospace;
|
|
362
|
+
}
|
|
363
|
+
|
|
364
|
+
.flight-dt-chunks-more {
|
|
365
|
+
text-align: center;
|
|
366
|
+
font-size: 11px;
|
|
367
|
+
color: #666;
|
|
368
|
+
padding: 8px;
|
|
369
|
+
}
|
|
370
370
|
`;
|
|
371
371
|
//# sourceMappingURL=bundle-panel.js.map
|