devtools-tracing 1.2.2 → 1.3.0

package/dist/lib/front_end/third_party/codemirror.next/bundle.d.ts

@@ -0,0 +1,39 @@
+export { acceptCompletion, autocompletion, closeBrackets, closeBracketsKeymap, closeCompletion, completeAnyWord, Completion, CompletionContext, CompletionResult, CompletionSource, completionStatus, currentCompletions, ifNotIn, moveCompletionSelection, selectedCompletion, selectedCompletionIndex, startCompletion } from '@codemirror/autocomplete';
+export { cursorMatchingBracket, cursorGroupLeft, cursorGroupRight, cursorSyntaxLeft, cursorSyntaxRight, history, historyKeymap, indentLess, indentMore, insertNewlineAndIndent, redo, redoSelection, selectMatchingBracket, selectGroupLeft, selectGroupRight, selectSyntaxLeft, selectSyntaxRight, standardKeymap, toggleComment, undo, undoSelection } from '@codemirror/commands';
+export * as html from '@codemirror/lang-html';
+export * as javascript from '@codemirror/lang-javascript';
+export { bracketMatching, codeFolding, bidiIsolates, ensureSyntaxTree, foldGutter, foldKeymap, HighlightStyle, indentOnInput, indentUnit, Language, LanguageSupport, StreamLanguage, StreamParser, StringStream, syntaxHighlighting, syntaxTree, TagStyle, syntaxParserRunning, forceParsing } from '@codemirror/language';
+export { highlightSelectionMatches, selectNextOccurrence } from '@codemirror/search';
+export { Annotation, AnnotationType, ChangeDesc, ChangeSet, ChangeSpec, Compartment, EditorSelection, EditorState, EditorStateConfig, Extension, Facet, Line, MapMode, Prec, Range, RangeSet, RangeSetBuilder, SelectionRange, StateEffect, StateEffectType, StateField, Text, TextIterator, Transaction, TransactionSpec } from '@codemirror/state';
+export { Command, Decoration, DecorationSet, drawSelection, EditorView, gutter, GutterMarker, gutters, highlightSpecialChars, KeyBinding, keymap, lineNumberMarkers, lineNumbers, MatchDecorator, Panel, placeholder, repositionTooltips, scrollPastEnd, showPanel, showTooltip, Tooltip, tooltips, TooltipView, ViewPlugin, ViewUpdate, WidgetType } from '@codemirror/view';
+export { NodeProp, NodeSet, NodeType, Parser, SyntaxNode, Tree, TreeCursor } from '@lezer/common';
+export { highlightTree, Tag, tags } from '@lezer/highlight';
+export { LRParser } from '@lezer/lr';
+export { StyleModule } from 'style-mod';
+export { indentationMarkers } from '@replit/codemirror-indentation-markers';
+export declare function angular(): Promise<any>;
+export declare function clojure(): Promise<any>;
+export declare function coffeescript(): Promise<any>;
+export declare function cpp(): Promise<any>;
+export declare const css: {
+    cssCompletionSource: any;
+    cssLanguage: any;
+    css(): any;
+};
+export declare function dart(): Promise<any>;
+export declare function gss(): Promise<any>;
+export declare function go(): Promise<any>;
+export declare function java(): Promise<any>;
+export declare function kotlin(): Promise<any>;
+export declare function less(): Promise<any>;
+export declare function markdown(): Promise<any>;
+export declare function php(): Promise<any>;
+export declare function python(): Promise<any>;
+export declare function sass(): Promise<any>;
+export declare function scala(): Promise<any>;
+export declare function shell(): Promise<any>;
+export declare function svelte(): Promise<any>;
+export declare function cssStreamParser(): Promise<any>;
+export declare function vue(): Promise<any>;
+export declare function wast(): Promise<any>;
+export declare function xml(): Promise<any>;

package/dist/src/sourcemap.d.ts

@@ -0,0 +1,27 @@
+import * as Trace from '../lib/front_end/models/trace/trace.js';
+type Event = Trace.Types.Events.Event;
+type Script = Trace.Handlers.ModelHandlers.Scripts.Script;
+export interface SourceMapResolverOptions {
+    fetch?: (url: string) => Promise<Response>;
+}
+export declare function createSourceMapResolver(options?: SourceMapResolverOptions): NonNullable<Trace.Types.Configuration.ParseOptions['resolveSourceMap']>;
+export interface SymbolicateResult {
+    /** Number of individual CallFrames that were rewritten. */
+    symbolicatedFrames: number;
+    /** Number of trace events that contained at least one rewritten frame. */
+    symbolicatedEvents: number;
+}
+/**
+ * Symbolicate trace events in-place by rewriting CallFrame locations using
+ * resolved source maps. Call this after `traceModel.parse()` has resolved
+ * source maps via `resolveSourceMap`.
+ *
+ * @param traceEvents - The raw trace events array (mutated in-place).
+ * @param scripts - The parsed scripts from `parsedTrace.data.Scripts.scripts`.
+ */
+export interface SymbolicateOptions {
+    /** Rewrite the resolved source URL after symbolication. Line and column are 0-based. */
+    rewriteSourceUrl?: (url: string, lineNumber: number, columnNumber: number) => string;
+}
+export declare function symbolicateTrace(traceEvents: readonly Event[], scripts: readonly Script[], options?: SymbolicateOptions): SymbolicateResult;
+export {};

package/examples/sourcemap.ts

@@ -0,0 +1,121 @@
+import * as fs from 'node:fs';
+import * as zlib from 'node:zlib';
+
+import {
+  initDevToolsTracing,
+  createSourceMapResolver,
+  symbolicateTrace,
+  Trace,
+} from '../';
+
+async function main() {
+  const tracePath = process.argv[2];
+  if (!tracePath) {
+    console.error('Usage: npm run example:sourcemap <path-to-trace-file>');
+    process.exit(1);
+  }
+  initDevToolsTracing();
+
+  const fileData = fs.readFileSync(tracePath);
+  const decompressedData = tracePath.endsWith('.gz')
+    ? zlib.gunzipSync(fileData)
+    : fileData;
+  const traceData = JSON.parse(
+    decompressedData.toString(),
+  ) as Trace.Types.File.TraceFile;
+
+  const traceModel = Trace.TraceModel.Model.createWithAllHandlers();
+  const resolveSourceMap = createSourceMapResolver({
+    fetch: verboseFetch,
+  });
+
+  await traceModel.parse(traceData.traceEvents, {
+    isCPUProfile: false,
+    isFreshRecording: false,
+    metadata: traceData.metadata,
+    showAllEvents: false,
+    resolveSourceMap,
+  });
+
+  const parsedTrace = traceModel.parsedTrace(0)!;
+  const parsedTraceData = parsedTrace.data;
+  const scripts = parsedTraceData.Scripts.scripts;
+
+  const metadataSourceMaps = traceData.metadata?.sourceMaps?.length ?? 0;
+  console.log(`Found ${scripts.length} scripts in trace`);
+  console.log(`Source maps in trace metadata: ${metadataSourceMaps}\n`);
+
+  // Diagnostic: show script properties to explain resolution results.
+  let withUrl = 0;
+  let withFrame = 0;
+  let withSourceMapUrl = 0;
+  let withElided = 0;
+  for (const script of scripts) {
+    if (script.url) withUrl++;
+    if (script.frame) withFrame++;
+    if (script.sourceMapUrl) withSourceMapUrl++;
+    if (script.sourceMapUrlElided) withElided++;
+  }
+  console.log('Script breakdown:');
+  console.log(`  with url:                ${withUrl}`);
+  console.log(`  with frame:              ${withFrame}`);
+  console.log(`  with sourceMapUrl:       ${withSourceMapUrl}`);
+  console.log(`  with sourceMapUrlElided: ${withElided}`);
+  console.log(`  (resolution requires url + frame + sourceMapUrl/elided)\n`);
+
+  let resolvedCount = 0;
+  for (const script of scripts) {
+    if (!script.sourceMap) {
+      continue;
+    }
+    resolvedCount++;
+
+    const sourceMap = script.sourceMap;
+    const sourceURLs = sourceMap.sourceURLs();
+
+    console.log(
+      `  ${script.url || script.scriptId} -> ${sourceURLs.length} sources, ${sourceMap.mappings().length} mappings`,
+    );
+  }
+
+  console.log(
+    `Resolved source maps for ${resolvedCount} of ${scripts.length} scripts\n`,
+  );
+
+  // Symbolicate the raw trace events in-place using resolved source maps.
+  const result = symbolicateTrace(traceData.traceEvents, scripts);
+  console.log(
+    `Symbolicated ${result.symbolicatedFrames} frames across ${result.symbolicatedEvents} events`,
+  );
+
+  // Write the symbolicated trace to a new file.
+  const outPath = tracePath.replace(/(\.(json|json\.gz))$/i, '.symbolicated$1');
+  if (outPath === tracePath) {
+    console.error(
+      'Could not determine output path (expected .json or .json.gz extension)',
+    );
+    process.exit(1);
+  }
+  const outputJson = JSON.stringify(traceData);
+  if (outPath.endsWith('.gz')) {
+    fs.writeFileSync(outPath, zlib.gzipSync(outputJson));
+  } else {
+    fs.writeFileSync(outPath, outputJson);
+  }
+  console.log(`Wrote symbolicated trace to ${outPath}`);
+}
+
+async function verboseFetch(url: string): Promise<Response> {
+  console.log(`[sourcemap] fetching ${url}`);
+  const response = await fetch(url);
+  if (!response.ok) {
+    console.warn(
+      `[sourcemap] ${url} -> ${response.status} ${response.statusText}`,
+    );
+  } else {
+    console.log(`[sourcemap] ${url} -> ok`);
+  }
+  return response;
+}
+
+main();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "devtools-tracing",
-  "version": "1.2.2",
+  "version": "1.3.0",
   "description": "Utilities for working with trace files",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -8,6 +8,7 @@
     "build": "tsc --emitDeclarationOnly || true; esbuild index.ts --bundle --platform=node --outfile=dist/index.js --format=cjs",
     "generate": "tsx generate.ts",
     "example:inp": "tsx examples/inp.ts",
+    "example:sourcemap": "tsx examples/sourcemap.ts",
     "example:stats": "tsx examples/stats.ts",
     "size": "du -sh dist/",
     "prepublishOnly": "npm run generate && npm run build"