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';
|
||||
|
||||
/**
|
||||
* @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({
|
||||
compileOptions: {
|
||||
dev: true
|
||||
},
|
||||
|
||||
async test({ assert, target, logs }) {
|
||||
assert.deepEqual(logs, []);
|
||||
test({ assert, target, logs }) {
|
||||
assert.deepEqual(normalise_trace_logs(logs), ['effect', '$derived', 0, '$state', 0]);
|
||||
|
||||
logs.length = 0;
|
||||
|
||||
const [b1, b2] = target.querySelectorAll('button');
|
||||
b1.click();
|
||||
b2.click();
|
||||
await Promise.resolve();
|
||||
const button = target.querySelector('button');
|
||||
button?.click();
|
||||
flushSync();
|
||||
|
||||
assert.ok(logs[0].stack.startsWith('Error:') && logs[0].stack.includes('HTMLButtonElement.'));
|
||||
assert.deepEqual(logs[1], 1);
|
||||
assert.deepEqual(normalise_trace_logs(logs), ['effect', '$derived', 2, '$state', 1]);
|
||||
}
|
||||
});
|
||||
|
||||
@ -1,11 +1,12 @@
|
||||
<script>
|
||||
let x = $state(0);
|
||||
let y = $state(0);
|
||||
let count = $state(0);
|
||||
let double = $derived(count * 2);
|
||||
|
||||
$inspect(x).with((type, x) => {
|
||||
if (type === 'update') console.log(new Error(), x);
|
||||
});
|
||||
$effect(() => {
|
||||
$inspect.trace('effect');
|
||||
|
||||
double;
|
||||
})
|
||||
</script>
|
||||
|
||||
<button on:click={() => x++}>{x}</button>
|
||||
<button on:click={() => y++}>{y}</button>
|
||||
<button onclick={() => count++}>{double}</button>
|
||||
|
||||
Loading…
Reference in new issue