mirror of https://github.com/sveltejs/svelte
feat: add $inspect.trace rune (#14290)
* feat: add $trace rune WIP WIP WIP WIP WIP WIP WIP WIP WIP WIP WIP WIP WIP WIP WIP WIP WIP WIP WIP WIP * lint * fix * fix * fix * fix * fix * fix * fix * more tweaks * lint * improve label for derived cached * improve label for derived cached * lint * better stacks * complete redesign * fixes * dead code * dead code * improve change detection * rename rune * lint * lint * fix bug * tweaks * Update packages/svelte/src/internal/client/dev/tracing.js Co-authored-by: Rich Harris <rich.harris@vercel.com> * Update packages/svelte/src/internal/client/dev/tracing.js Co-authored-by: Rich Harris <rich.harris@vercel.com> * Update packages/svelte/src/internal/client/dev/tracing.js Co-authored-by: Rich Harris <rich.harris@vercel.com> * Update packages/svelte/src/internal/client/dev/tracing.js Co-authored-by: Rich Harris <rich.harris@vercel.com> * todos * add test + some docs * changeset * update messages * address feedback * address feedback * limit to first statement of function * remove unreachable trace_rune_duplicate error * tweak message * remove the expression statement, not the expression * revert * make label optional * relax restriction on label - no longer necessary with new design * update errors * newline * tweak * add some docs * fix playground * fix playground * tweak message when function runs outside an effect * unused * tweak * handle async functions * fail on generators * regenerate, update docs * better labelling --------- Co-authored-by: Rich Harris <rich.harris@vercel.com>pull/14715/head
Dominic Gannaway
1 week ago
committed by
GitHub
parent
64a32cec38
commit
5483495c8d
@ -0,0 +1,5 @@
|
|||||||
|
---
|
||||||
|
'svelte': minor
|
||||||
|
---
|
||||||
|
|
||||||
|
feat: adds $inspect.trace rune
|
||||||
@ -1,25 +0,0 @@
|
|||||||
import { DEV } from 'esm-env';
|
|
||||||
import { FILENAME } from '../../../constants.js';
|
|
||||||
import { dev_current_component_function } from '../runtime.js';
|
|
||||||
|
|
||||||
/**
|
|
||||||
*
|
|
||||||
* @param {number} [line]
|
|
||||||
* @param {number} [column]
|
|
||||||
*/
|
|
||||||
export function get_location(line, column) {
|
|
||||||
if (!DEV || line === undefined) return undefined;
|
|
||||||
|
|
||||||
var filename = dev_current_component_function?.[FILENAME];
|
|
||||||
var location = filename && `${filename}:${line}:${column}`;
|
|
||||||
|
|
||||||
return sanitize_location(location);
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Prevent devtools trying to make `location` a clickable link by inserting a zero-width space
|
|
||||||
* @param {string | undefined} location
|
|
||||||
*/
|
|
||||||
export function sanitize_location(location) {
|
|
||||||
return location?.replace(/\//g, '/\u200b');
|
|
||||||
}
|
|
||||||
@ -0,0 +1,180 @@
|
|||||||
|
/** @import { Derived, Reaction, Signal, Value } from '#client' */
|
||||||
|
import { UNINITIALIZED } from '../../../constants.js';
|
||||||
|
import { snapshot } from '../../shared/clone.js';
|
||||||
|
import { define_property } from '../../shared/utils.js';
|
||||||
|
import { DERIVED, STATE_SYMBOL } from '../constants.js';
|
||||||
|
import { effect_tracking } from '../reactivity/effects.js';
|
||||||
|
import { active_reaction, captured_signals, set_captured_signals, untrack } from '../runtime.js';
|
||||||
|
|
||||||
|
/** @type { any } */
|
||||||
|
export let tracing_expressions = null;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @param { Value } signal
|
||||||
|
* @param { { read: Error[] } } [entry]
|
||||||
|
*/
|
||||||
|
function log_entry(signal, entry) {
|
||||||
|
const debug = signal.debug;
|
||||||
|
const value = signal.v;
|
||||||
|
|
||||||
|
if (value === UNINITIALIZED) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (debug) {
|
||||||
|
var previous_captured_signals = captured_signals;
|
||||||
|
var captured = new Set();
|
||||||
|
set_captured_signals(captured);
|
||||||
|
try {
|
||||||
|
untrack(() => {
|
||||||
|
debug();
|
||||||
|
});
|
||||||
|
} finally {
|
||||||
|
set_captured_signals(previous_captured_signals);
|
||||||
|
}
|
||||||
|
if (captured.size > 0) {
|
||||||
|
for (const dep of captured) {
|
||||||
|
log_entry(dep);
|
||||||
|
}
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const type = (signal.f & DERIVED) !== 0 ? '$derived' : '$state';
|
||||||
|
const current_reaction = /** @type {Reaction} */ (active_reaction);
|
||||||
|
const status =
|
||||||
|
signal.version > current_reaction.version || current_reaction.version === 0 ? 'dirty' : 'clean';
|
||||||
|
|
||||||
|
// eslint-disable-next-line no-console
|
||||||
|
console.groupCollapsed(
|
||||||
|
`%c${type}`,
|
||||||
|
status !== 'clean'
|
||||||
|
? 'color: CornflowerBlue; font-weight: bold'
|
||||||
|
: 'color: grey; font-weight: bold',
|
||||||
|
typeof value === 'object' && STATE_SYMBOL in value ? snapshot(value, true) : value
|
||||||
|
);
|
||||||
|
|
||||||
|
if (type === '$derived') {
|
||||||
|
const deps = new Set(/** @type {Derived} */ (signal).deps);
|
||||||
|
for (const dep of deps) {
|
||||||
|
log_entry(dep);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
if (signal.created) {
|
||||||
|
// eslint-disable-next-line no-console
|
||||||
|
console.log(signal.created);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (signal.updated) {
|
||||||
|
// eslint-disable-next-line no-console
|
||||||
|
console.log(signal.updated);
|
||||||
|
}
|
||||||
|
|
||||||
|
const read = entry?.read;
|
||||||
|
|
||||||
|
if (read && read.length > 0) {
|
||||||
|
for (var stack of read) {
|
||||||
|
// eslint-disable-next-line no-console
|
||||||
|
console.log(stack);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// eslint-disable-next-line no-console
|
||||||
|
console.groupEnd();
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @template T
|
||||||
|
* @param {() => string} label
|
||||||
|
* @param {() => T} fn
|
||||||
|
*/
|
||||||
|
export function trace(label, fn) {
|
||||||
|
var previously_tracing_expressions = tracing_expressions;
|
||||||
|
try {
|
||||||
|
tracing_expressions = { entries: new Map(), reaction: active_reaction };
|
||||||
|
|
||||||
|
var start = performance.now();
|
||||||
|
var value = fn();
|
||||||
|
var time = (performance.now() - start).toFixed(2);
|
||||||
|
|
||||||
|
if (!effect_tracking()) {
|
||||||
|
// eslint-disable-next-line no-console
|
||||||
|
console.log(`${label()} %cran outside of an effect (${time}ms)`, 'color: grey');
|
||||||
|
} else if (tracing_expressions.entries.size === 0) {
|
||||||
|
// eslint-disable-next-line no-console
|
||||||
|
console.log(`${label()} %cno reactive dependencies (${time}ms)`, 'color: grey');
|
||||||
|
} else {
|
||||||
|
// eslint-disable-next-line no-console
|
||||||
|
console.group(`${label()} %c(${time}ms)`, 'color: grey');
|
||||||
|
|
||||||
|
var entries = tracing_expressions.entries;
|
||||||
|
|
||||||
|
tracing_expressions = null;
|
||||||
|
|
||||||
|
for (const [signal, entry] of entries) {
|
||||||
|
log_entry(signal, entry);
|
||||||
|
}
|
||||||
|
// eslint-disable-next-line no-console
|
||||||
|
console.groupEnd();
|
||||||
|
}
|
||||||
|
|
||||||
|
if (previously_tracing_expressions !== null) {
|
||||||
|
for (const [signal, entry] of tracing_expressions.entries) {
|
||||||
|
var prev_entry = previously_tracing_expressions.get(signal);
|
||||||
|
|
||||||
|
if (prev_entry === undefined) {
|
||||||
|
previously_tracing_expressions.set(signal, entry);
|
||||||
|
} else {
|
||||||
|
prev_entry.read.push(...entry.read);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return value;
|
||||||
|
} finally {
|
||||||
|
tracing_expressions = previously_tracing_expressions;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @param {string} label
|
||||||
|
*/
|
||||||
|
export function get_stack(label) {
|
||||||
|
let error = Error();
|
||||||
|
const stack = error.stack;
|
||||||
|
|
||||||
|
if (stack) {
|
||||||
|
const lines = stack.split('\n');
|
||||||
|
const new_lines = ['\n'];
|
||||||
|
|
||||||
|
for (let i = 0; i < lines.length; i++) {
|
||||||
|
const line = lines[i];
|
||||||
|
|
||||||
|
if (line === 'Error') {
|
||||||
|
continue;
|
||||||
|
}
|
||||||
|
if (line.includes('validate_each_keys')) {
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
if (line.includes('svelte/src/internal')) {
|
||||||
|
continue;
|
||||||
|
}
|
||||||
|
new_lines.push(line);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (new_lines.length === 1) {
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
|
||||||
|
define_property(error, 'stack', {
|
||||||
|
value: new_lines.join('\n')
|
||||||
|
});
|
||||||
|
|
||||||
|
define_property(error, 'name', {
|
||||||
|
// 'Error' suffix is required for stack traces to be rendered properly
|
||||||
|
value: `${label}Error`
|
||||||
|
});
|
||||||
|
}
|
||||||
|
return error;
|
||||||
|
}
|
||||||
@ -0,0 +1,19 @@
|
|||||||
|
import { test } from '../../test';
|
||||||
|
|
||||||
|
export default test({
|
||||||
|
compileOptions: {
|
||||||
|
dev: true
|
||||||
|
},
|
||||||
|
|
||||||
|
async test({ assert, target, logs }) {
|
||||||
|
assert.deepEqual(logs, []);
|
||||||
|
|
||||||
|
const [b1, b2] = target.querySelectorAll('button');
|
||||||
|
b1.click();
|
||||||
|
b2.click();
|
||||||
|
await Promise.resolve();
|
||||||
|
|
||||||
|
assert.ok(logs[0].stack.startsWith('Error:') && logs[0].stack.includes('HTMLButtonElement.'));
|
||||||
|
assert.deepEqual(logs[1], 1);
|
||||||
|
}
|
||||||
|
});
|
||||||
@ -0,0 +1,11 @@
|
|||||||
|
<script>
|
||||||
|
let x = $state(0);
|
||||||
|
let y = $state(0);
|
||||||
|
|
||||||
|
$inspect(x).with((type, x) => {
|
||||||
|
if (type === 'update') console.log(new Error(), x);
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<button on:click={() => x++}>{x}</button>
|
||||||
|
<button on:click={() => y++}>{y}</button>
|
||||||
@ -1,19 +1,41 @@
|
|||||||
|
import { flushSync } from 'svelte';
|
||||||
import { test } from '../../test';
|
import { test } from '../../test';
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @param {any[]} logs
|
||||||
|
*/
|
||||||
|
function normalise_trace_logs(logs) {
|
||||||
|
let normalised = [];
|
||||||
|
for (let i = 0; i < logs.length; i++) {
|
||||||
|
const log = logs[i];
|
||||||
|
|
||||||
|
if (typeof log === 'string' && log.includes('%c')) {
|
||||||
|
const split = log.split('%c');
|
||||||
|
normalised.push((split[0].length !== 0 ? split[0] : split[1]).trim());
|
||||||
|
i++;
|
||||||
|
} else if (log instanceof Error) {
|
||||||
|
continue;
|
||||||
|
} else {
|
||||||
|
normalised.push(log);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return normalised;
|
||||||
|
}
|
||||||
|
|
||||||
export default test({
|
export default test({
|
||||||
compileOptions: {
|
compileOptions: {
|
||||||
dev: true
|
dev: true
|
||||||
},
|
},
|
||||||
|
|
||||||
async test({ assert, target, logs }) {
|
test({ assert, target, logs }) {
|
||||||
assert.deepEqual(logs, []);
|
assert.deepEqual(normalise_trace_logs(logs), ['effect', '$derived', 0, '$state', 0]);
|
||||||
|
|
||||||
|
logs.length = 0;
|
||||||
|
|
||||||
const [b1, b2] = target.querySelectorAll('button');
|
const button = target.querySelector('button');
|
||||||
b1.click();
|
button?.click();
|
||||||
b2.click();
|
flushSync();
|
||||||
await Promise.resolve();
|
|
||||||
|
|
||||||
assert.ok(logs[0].stack.startsWith('Error:') && logs[0].stack.includes('HTMLButtonElement.'));
|
assert.deepEqual(normalise_trace_logs(logs), ['effect', '$derived', 2, '$state', 1]);
|
||||||
assert.deepEqual(logs[1], 1);
|
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|||||||
@ -1,11 +1,12 @@
|
|||||||
<script>
|
<script>
|
||||||
let x = $state(0);
|
let count = $state(0);
|
||||||
let y = $state(0);
|
let double = $derived(count * 2);
|
||||||
|
|
||||||
$inspect(x).with((type, x) => {
|
$effect(() => {
|
||||||
if (type === 'update') console.log(new Error(), x);
|
$inspect.trace('effect');
|
||||||
});
|
|
||||||
|
double;
|
||||||
|
})
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<button on:click={() => x++}>{x}</button>
|
<button onclick={() => count++}>{double}</button>
|
||||||
<button on:click={() => y++}>{y}</button>
|
|
||||||
|
|||||||
Loading…
Reference in new issue