devtools-tracing 1.1.0 → 1.2.0

package/package.json

@@ -1,14 +1,16 @@
 {
   "name": "devtools-tracing",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "description": "Utilities for working with trace files",
-  "main": "index.js",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
   "scripts": {
-    "start": "tsx index.ts",
-    "postinstall": "patch-package",
+    "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:stats": "tsx examples/stats.ts"
+    "example:stats": "tsx examples/stats.ts",
+    "size": "du -sh dist/",
+    "prepublishOnly": "npm run generate && npm run build"
   },
   "author": "Samuel Maddock <sam@samuelmaddock.com>",
   "repository": {
@@ -18,8 +20,8 @@
   "license": "BSD-3-Clause",
   "devDependencies": {
     "@typescript-eslint/typescript-estree": "^8.46.2",
-    "chrome-devtools-frontend": "^1.0.1533544",
-    "patch-package": "^8.0.1",
+    "chrome-devtools-frontend": "^1.0.1603822",
+    "esbuild": "^0.27.4",
     "tsx": "^4.20.6",
     "typescript": "^5.9.3"
   },
@@ -27,4 +29,4 @@
     "tabWidth": 2,
     "singleQuote": true
   }
-}
+}

package/generate.ts

@@ -1,649 +0,0 @@
-#!/usr/bin/env tsx
-
-import * as fs from 'fs';
-import * as path from 'path';
-import { parse } from '@typescript-eslint/typescript-estree';
-
-/**
- * Script to copy files and directories from chrome-devtools-frontend dependency
- * into a local lib/ directory for easier development and customization.
- *
- * Features:
- * - Automatic dependency resolution
- * - Transitive dependency copying
- * - Handles both .ts and .js imports
- * - Supports barrel exports (index files)
- */
-
-const SOURCE_BASE = path.join(
-  __dirname,
-  'node_modules',
-  'chrome-devtools-frontend'
-);
-const TARGET_BASE = path.join(__dirname, 'lib');
-
-interface CopyItem {
-  source: string;
-  target?: string; // Optional custom target path, defaults to same relative path
-  resolveDependencies?: boolean; // Whether to automatically resolve and copy dependencies
-  exportFilter?: string[]; // Optional: only trace dependencies for these specific exports
-  excludeCategories?: string[]; // Optional: exclude dependencies matching these path patterns
-}
-
-const COMMON_EXCLUSION_CATEGORIES = [
-  // Conservative exclusions - only exclude what we're sure is not needed
-  'models/emulation', // Device emulation
-  'models/persistence', // File system features
-  'models/ai_assistance', // AI features
-  'models/live-metrics', // Live metrics
-  'models/crux-manager', // CrUX data
-
-  // Panel exclusions - exclude other panels (this is safe)
-  'panels/(?!timeline)', // All panels except timeline
-
-  // UI exclusions - exclude most UI components but keep essentials
-  'ui/legacy/(?!components/linkifier|components/utils|legacy|theme_support|perf_ui)', // Keep essential components
-  'ui/components/(?!code_highlighter)', // Keep only code highlighter
-
-  // Third-party exclusions - only clearly unused libraries
-  // 'third_party/marked',     // Markdown rendering
-  // 'third_party/web-vitals', // Web vitals metrics
-  // 'third_party/acorn',      // JavaScript parser
-  // 'third_party/lighthouse', // Lighthouse integration
-  'third_party/(?!codemirror.next|i18n|intl-messageformat|legacy-javascript|source-map-scopes-codec|third-party-web)',
-
-  // Note: This is more aggressive - excluding all UI components
-  // May need to add back specific UI components if errors occur
-];
-
-// List of files and directories to copy
-const COPY_LIST: CopyItem[] = [
-  {
-    source: 'front_end/models/trace/trace.ts',
-    resolveDependencies: true,
-    // Optional: specify which exports to trace (if not specified, traces all)
-    // exportFilter: [
-    //   'eventTitle',
-    //   'eventColor',
-    //   'eventStyle',
-    //   'buildTraceEventDetails',
-    //   // Add only the functions you actually need
-    // ],
-    // Optional: exclude certain dependency categories
-    excludeCategories: COMMON_EXCLUSION_CATEGORIES,
-  },
-  {
-    source: 'front_end/panels/timeline/TimelineUIUtils.ts',
-    resolveDependencies: true,
-    excludeCategories: COMMON_EXCLUSION_CATEGORIES,
-  },
-];
-
-// Track processed files to avoid infinite loops and duplicates
-const processedFiles = new Set<string>();
-const dependencyQueue: string[] = [];
-const cssStubsGenerated = new Set<string>();
-const generatedFileStubsGenerated = new Set<string>();
-const thirdPartyDirsCopied = new Set<string>();
-
-/**
- * Resolves import path to actual file path, handling .js/.ts extensions and barrel exports
- */
-function resolveImportPath(
-  importPath: string,
-  fromFile: string
-): string | null {
-  const fromDir = path.dirname(fromFile);
-  let resolvedPath = path.resolve(path.join(SOURCE_BASE, fromDir), importPath);
-
-  // Make path relative to SOURCE_BASE
-  resolvedPath = path.relative(SOURCE_BASE, resolvedPath);
-
-  // Handle CSS imports by generating stubs
-  if (isCssImport(importPath)) {
-    generateCssStub(resolvedPath);
-    return resolvedPath; // Return the path so it's tracked as processed
-  }
-
-  // Handle generated file imports by generating stubs
-  if (isGeneratedFileImport(importPath)) {
-    generateGeneratedFileStub(resolvedPath);
-    return resolvedPath; // Return the path so it's tracked as processed
-  }
-
-  // Try different extensions and patterns
-  const candidates = [
-    resolvedPath,
-    resolvedPath.replace(/\.js$/, '.ts'),
-    resolvedPath.replace(/\.js$/, '.d.ts'),
-    resolvedPath + '.ts',
-    resolvedPath + '.d.ts',
-    resolvedPath + '.js',
-    path.join(resolvedPath, 'index.ts'),
-    path.join(resolvedPath, 'index.d.ts'),
-    path.join(resolvedPath, resolvedPath.split('/').pop() + '.ts'), // barrel export pattern
-    path.join(resolvedPath, resolvedPath.split('/').pop() + '.d.ts'), // barrel export pattern for .d.ts
-  ];
-
-  for (const candidate of candidates) {
-    const fullPath = path.join(SOURCE_BASE, candidate);
-    if (fs.existsSync(fullPath) && fs.statSync(fullPath).isFile()) {
-      return candidate;
-    }
-  }
-
-  return null;
-}
-
-/**
- * Extracts import and export statements from a TypeScript file using AST parsing
- */
-function extractImports(filePath: string): string[] {
-  const fullPath = path.join(SOURCE_BASE, filePath);
-  if (!fs.existsSync(fullPath)) {
-    return [];
-  }
-
-  const content = fs.readFileSync(fullPath, 'utf-8');
-  const imports: string[] = [];
-
-  try {
-    // Parse the TypeScript file into an AST
-    const ast = parse(content, {
-      loc: true,
-      range: true,
-      comment: false,
-      tokens: false,
-      errorOnUnknownASTType: false,
-      errorOnTypeScriptSyntacticAndSemanticIssues: false,
-      jsx: false,
-    });
-
-    // Walk the AST to find import and export declarations
-    function walkNode(node: any): void {
-      if (!node || typeof node !== 'object') {
-        return;
-      }
-
-      // Handle ImportDeclaration nodes
-      if (node.type === 'ImportDeclaration' && node.source?.value) {
-        const importPath = node.source.value;
-        // Only process relative imports (not node_modules)
-        if (importPath.startsWith('./') || importPath.startsWith('../')) {
-          imports.push(importPath);
-        }
-      }
-
-      // Handle ExportNamedDeclaration and ExportAllDeclaration nodes
-      if (
-        (node.type === 'ExportNamedDeclaration' ||
-          node.type === 'ExportAllDeclaration') &&
-        node.source?.value
-      ) {
-        const importPath = node.source.value;
-        // Only process relative imports (not node_modules)
-        if (importPath.startsWith('./') || importPath.startsWith('../')) {
-          imports.push(importPath);
-        }
-      }
-
-      // Handle dynamic imports: import('path')
-      if (
-        node.type === 'CallExpression' &&
-        node.callee?.type === 'Import' &&
-        node.arguments?.[0]?.type === 'Literal'
-      ) {
-        const importPath = node.arguments[0].value;
-        if (
-          typeof importPath === 'string' &&
-          (importPath.startsWith('./') || importPath.startsWith('../'))
-        ) {
-          imports.push(importPath);
-        }
-      }
-
-      // Recursively walk child nodes
-      for (const key in node) {
-        if (key === 'parent') continue; // Avoid circular references
-        const child = node[key];
-        if (Array.isArray(child)) {
-          child.forEach(walkNode);
-        } else if (child && typeof child === 'object') {
-          walkNode(child);
-        }
-      }
-    }
-
-    walkNode(ast);
-  } catch (error) {
-    console.warn(
-      `Failed to parse ${filePath} with AST, falling back to regex:`,
-      error.message
-    );
-
-    // Fallback to regex for files that can't be parsed
-    const importRegexes = [
-      /import\s+.*?\s+from\s+['"`]([^'"`]+)['"`]/gs,
-      /import\s+['"`]([^'"`]+)['"`]/g,
-      /import\s*\(\s*['"`]([^'"`]+)['"`]\s*\)/g,
-    ];
-
-    for (const regex of importRegexes) {
-      let match;
-      while ((match = regex.exec(content)) !== null) {
-        const importPath = match[1];
-        if (importPath.startsWith('./') || importPath.startsWith('../')) {
-          imports.push(importPath);
-        }
-      }
-    }
-  }
-
-  return [...new Set(imports)]; // Remove duplicates
-}
-
-/**
- * Recursively finds all dependencies of a file
- */
-function findDependencies(
-  filePath: string,
-  visited = new Set<string>(),
-  excludeCategories: string[] = []
-): string[] {
-  if (visited.has(filePath)) {
-    return [];
-  }
-  visited.add(filePath);
-
-  const dependencies: string[] = [];
-  const imports = extractImports(filePath);
-
-  for (const importPath of imports) {
-    const resolvedPath = resolveImportPath(importPath, filePath);
-    if (resolvedPath && !visited.has(resolvedPath)) {
-      // Check if this dependency should be excluded
-      if (shouldExcludeDependency(resolvedPath, excludeCategories)) {
-        console.log(
-          `Excluding dependency: ${resolvedPath} (matches exclusion pattern)`
-        );
-        continue;
-      }
-
-      dependencies.push(resolvedPath);
-      // Recursively find dependencies of this dependency
-      dependencies.push(
-        ...findDependencies(resolvedPath, visited, excludeCategories)
-      );
-    }
-  }
-
-  return dependencies;
-}
-
-/**
- * Checks if a dependency should be excluded based on category patterns
- */
-function shouldExcludeDependency(
-  filePath: string,
-  excludeCategories: string[]
-): boolean {
-  if (!excludeCategories.length) {
-    return false;
-  }
-
-  return excludeCategories.some((category) => {
-    // Convert category pattern to a more flexible match
-    const pattern = category.replace(/\*/g, '.*');
-    const regex = new RegExp(pattern);
-    return regex.test(filePath);
-  });
-}
-
-/**
- * Checks if an import path is a CSS file that should be stubbed
- */
-function isCssImport(importPath: string): boolean {
-  return importPath.endsWith('.css.js') || importPath.endsWith('.css');
-}
-
-/**
- * Checks if an import path is a generated file that should be stubbed
- */
-function isGeneratedFileImport(importPath: string): boolean {
-  // Handle specific generated files
-  return importPath.endsWith('/locales.js') || importPath === './locales.js';
-}
-
-/**
- * Checks if a file path is part of a third-party library that needs its entire directory copied
- */
-function isThirdPartyDirectory(filePath: string): boolean {
-  // Third-party libraries that need their entire directory structure
-  return (
-    filePath.includes('/third_party/codemirror.next/') ||
-    filePath.includes('/third_party/marked/') ||
-    filePath.includes('/third_party/acorn/') ||
-    filePath.includes('/third_party/')
-  );
-}
-
-/**
- * Generates a stub file for CSS imports
- */
-function generateCssStub(cssPath: string): void {
-  if (cssStubsGenerated.has(cssPath)) {
-    return;
-  }
-
-  cssStubsGenerated.add(cssPath);
-
-  const fullPath = path.join(TARGET_BASE, cssPath);
-  const targetDir = path.dirname(fullPath);
-  ensureDir(targetDir);
-
-  // Generate a simple CSS stub that exports an empty CSSStyleSheet
-  const stubContent = `// Auto-generated CSS stub for ${path.basename(cssPath)}
-// This file replaces the original CSS-in-JS file for standalone usage
-
-export default {};
-`;
-
-  fs.writeFileSync(fullPath, stubContent);
-  console.log(`Generated CSS stub: ${cssPath}`);
-}
-
-/**
- * Generates a stub file for generated files like locales.js
- */
-function generateGeneratedFileStub(filePath: string): void {
-  if (generatedFileStubsGenerated.has(filePath)) {
-    return;
-  }
-
-  generatedFileStubsGenerated.add(filePath);
-
-  const fullPath = path.join(TARGET_BASE, filePath);
-  const targetDir = path.dirname(fullPath);
-  ensureDir(targetDir);
-
-  let stubContent = '';
-
-  // Handle specific generated files
-  if (filePath.endsWith('/locales.js') || filePath === './locales.js') {
-    stubContent = `// Auto-generated stub for locales.js
-// This file replaces the original generated locales file for standalone usage
-
-/** The list of all supported locales of DevTools */
-export const LOCALES = ['en-US'];
-
-/** A subset of LOCALES that are bundled with Chromium. The rest is fetched remotely */
-export const BUNDLED_LOCALES = ['en-US'];
-
-export const DEFAULT_LOCALE = 'en-US';
-
-export const REMOTE_FETCH_PATTERN = 'https://devtools://devtools/@VERSION@/locales/@LOCALE@.json';
-
-export const LOCAL_FETCH_PATTERN = './locales/@LOCALE@.json';
-`;
-  } else {
-    // Generic stub for other generated files
-    stubContent = `// Auto-generated stub for ${path.basename(filePath)}
-// This file replaces the original generated file for standalone usage
-
-export default {};
-`;
-  }
-
-  fs.writeFileSync(fullPath, stubContent);
-  console.log(`Generated generated file stub: ${filePath}`);
-}
-
-/**
- * Copies an entire third-party directory to preserve its structure
- */
-function copyThirdPartyDirectory(filePath: string): void {
-  // Extract the third-party directory path (e.g., front_end/third_party/codemirror.next)
-  const thirdPartyMatch = filePath.match(/(.*\/third_party\/[^/]+)/);
-  if (!thirdPartyMatch) {
-    return;
-  }
-
-  const thirdPartyDir = thirdPartyMatch[1];
-
-  if (thirdPartyDirsCopied.has(thirdPartyDir)) {
-    return;
-  }
-
-  thirdPartyDirsCopied.add(thirdPartyDir);
-
-  const sourcePath = path.join(SOURCE_BASE, thirdPartyDir);
-  const targetPath = path.join(TARGET_BASE, thirdPartyDir);
-
-  if (!fs.existsSync(sourcePath)) {
-    console.warn(`Third-party directory not found: ${sourcePath}`);
-    return;
-  }
-
-  console.log(`Copying entire third-party directory: ${thirdPartyDir}`);
-  copyDirectory(sourcePath, targetPath);
-}
-
-/**
- * Ensures a directory exists, creating it recursively if needed
- */
-function ensureDir(dirPath: string): void {
-  if (!fs.existsSync(dirPath)) {
-    fs.mkdirSync(dirPath, { recursive: true });
-    console.log(`Created directory: ${dirPath}`);
-  }
-}
-
-/**
- * Copies a file from source to target, creating directories as needed
- */
-function copyFile(sourcePath: string, targetPath: string): void {
-  const targetDir = path.dirname(targetPath);
-  ensureDir(targetDir);
-
-  fs.copyFileSync(sourcePath, targetPath);
-  console.log(`Copied: ${sourcePath} -> ${targetPath}`);
-}
-
-/**
- * Recursively copies a directory and all its contents
- */
-function copyDirectory(sourcePath: string, targetPath: string): void {
-  ensureDir(targetPath);
-
-  const items = fs.readdirSync(sourcePath);
-
-  for (const item of items) {
-    const sourceItemPath = path.join(sourcePath, item);
-    const targetItemPath = path.join(targetPath, item);
-
-    const stat = fs.statSync(sourceItemPath);
-
-    if (stat.isDirectory()) {
-      copyDirectory(sourceItemPath, targetItemPath);
-    } else {
-      copyFile(sourceItemPath, targetItemPath);
-    }
-  }
-}
-
-/**
- * Copies a single file if not already processed
- */
-function copyFileIfNeeded(filePath: string): void {
-  if (processedFiles.has(filePath)) {
-    return;
-  }
-
-  processedFiles.add(filePath);
-
-  // Check if this is part of a third-party directory that needs full copying
-  if (isThirdPartyDirectory(filePath)) {
-    copyThirdPartyDirectory(filePath);
-    return;
-  }
-
-  const sourcePath = path.join(SOURCE_BASE, filePath);
-  const targetPath = path.join(TARGET_BASE, filePath);
-
-  if (!fs.existsSync(sourcePath)) {
-    console.warn(`Dependency not found: ${sourcePath}`);
-    return;
-  }
-
-  console.log(`Copying dependency: ${filePath}`);
-  copyFile(sourcePath, targetPath);
-}
-
-/**
- * Processes a single copy item from the COPY_LIST
- */
-function processCopyItem(item: CopyItem): void {
-  const sourcePath = path.join(SOURCE_BASE, item.source);
-  const targetRelativePath = item.target || item.source;
-  const targetPath = path.join(TARGET_BASE, targetRelativePath);
-
-  if (!fs.existsSync(sourcePath)) {
-    console.error(`Source not found: ${sourcePath}`);
-    return;
-  }
-
-  const stat = fs.statSync(sourcePath);
-
-  if (stat.isDirectory()) {
-    console.log(`Copying directory: ${item.source}`);
-    copyDirectory(sourcePath, targetPath);
-  } else {
-    console.log(`Copying file: ${item.source}`);
-    copyFile(sourcePath, targetPath);
-    processedFiles.add(item.source);
-
-    // Resolve and copy dependencies if requested
-    if (item.resolveDependencies) {
-      console.log(`Resolving dependencies for: ${item.source}`);
-      const dependencies = findDependencies(
-        item.source,
-        new Set(),
-        item.excludeCategories || []
-      );
-
-      if (item.excludeCategories?.length) {
-        console.log(
-          `Excluding categories: ${item.excludeCategories.join(', ')}`
-        );
-      }
-
-      console.log(`Found ${dependencies.length} dependencies`);
-      for (const dep of dependencies) {
-        copyFileIfNeeded(dep);
-      }
-    }
-  }
-}
-
-/**
- * Main function to process all copy items
- */
-function main(): void {
-  console.log(
-    'Starting copy process with dependency resolution and stubbing...'
-  );
-  console.log(`Source base: ${SOURCE_BASE}`);
-  console.log(`Target base: ${TARGET_BASE}`);
-  console.log('');
-
-  // Clear processed files for fresh run
-  processedFiles.clear();
-  cssStubsGenerated.clear();
-  generatedFileStubsGenerated.clear();
-  thirdPartyDirsCopied.clear();
-
-  // Ensure target base directory exists
-  ensureDir(TARGET_BASE);
-
-  // Process each copy item
-  for (const item of COPY_LIST) {
-    try {
-      console.log(`\n--- Processing: ${item.source} ---`);
-      processCopyItem(item);
-    } catch (error) {
-      console.error(`Error processing ${item.source}:`, error);
-    }
-  }
-
-  console.log('');
-  console.log(`Copy process completed!`);
-  console.log(`- Processed ${processedFiles.size} files total`);
-  console.log(`- Generated ${cssStubsGenerated.size} CSS stubs`);
-  console.log(
-    `- Generated ${generatedFileStubsGenerated.size} generated file stubs`
-  );
-  console.log(`- Copied ${thirdPartyDirsCopied.size} third-party directories`);
-}
-
-// Run the script if called directly
-if (require.main === module) {
-  main();
-}
-
-/**
- * Analyzes dependencies without copying them - useful for understanding what would be included
- */
-function analyzeDependencies(
-  filePath: string,
-  excludeCategories: string[] = []
-): {
-  total: number;
-  byCategory: Record<string, number>;
-  excluded: string[];
-  included: string[];
-} {
-  const dependencies = findDependencies(filePath, new Set(), excludeCategories);
-  const excluded: string[] = [];
-  const included: string[] = [];
-  const byCategory: Record<string, number> = {};
-
-  // Analyze all possible dependencies (without exclusions)
-  const allDependencies = findDependencies(filePath, new Set(), []);
-
-  for (const dep of allDependencies) {
-    if (shouldExcludeDependency(dep, excludeCategories)) {
-      excluded.push(dep);
-    } else {
-      included.push(dep);
-    }
-
-    // Categorize by path
-    const parts = dep.split('/');
-    const category = parts.slice(0, 2).join('/'); // e.g., "ui/legacy", "models/trace"
-    byCategory[category] = (byCategory[category] || 0) + 1;
-  }
-
-  return {
-    total: allDependencies.length,
-    byCategory,
-    excluded,
-    included,
-  };
-}
-
-export {
-  main,
-  COPY_LIST,
-  processCopyItem,
-  findDependencies,
-  resolveImportPath,
-  extractImports,
-  generateCssStub,
-  isCssImport,
-  generateGeneratedFileStub,
-  isGeneratedFileImport,
-  copyThirdPartyDirectory,
-  isThirdPartyDirectory,
-  analyzeDependencies,
-  shouldExcludeDependency,
-};

package/index.ts

@@ -1,17 +0,0 @@
-import { DevToolsLocale } from './lib/front_end/core/i18n/DevToolsLocale';
-import { registerLocaleDataForTest } from './lib/front_end/core/i18n/i18nImpl';
-
-export function initDevToolsTracing() {
-  registerLocaleDataForTest('en-US', {});
-
-  const identity = (locale: string) => locale;
-  const data = {
-    settingLanguage: 'en-US',
-    navigatorLanguage: '',
-    lookupClosestDevToolsLocale: identity,
-  };
-  DevToolsLocale.instance({ create: true, data });
-}
-
-export * as TimelineUIUtils from './lib/front_end/panels/timeline/TimelineUIUtils';
-export * as Trace from './lib/front_end/models/trace/trace';