@grafana/react-detect 0.1.0

package/src/results.ts

@@ -0,0 +1,170 @@
+import { AnalyzedMatch } from './types/processors.js';
+import { PluginAnalysisResults, AnalysisResult, DependencyIssue } from './types/reporters.js';
+import { getPattern } from './patterns/definitions.js';
+import { getPluginJson } from './utils/plugin.js';
+import { DependencyContext } from './utils/dependencies.js';
+import path from 'node:path';
+
+export function generateAnalysisResults(
+  matches: AnalyzedMatch[],
+  pluginRoot: string,
+  depContext: DependencyContext
+): PluginAnalysisResults {
+  const filtered = filterMatches(matches);
+  const pluginJson = getPluginJson(pluginRoot);
+  const sourceMatches = filtered.filter((m) => m.type === 'source');
+  const dependencyMatches = filtered.filter((m) => m.type === 'dependency');
+
+  const criticalMatches = filtered.filter((m) => {
+    const pattern = getPattern(m.pattern);
+    return pattern?.impactLevel === 'critical';
+  });
+
+  const warningMatches = filtered.filter((m) => {
+    const pattern = getPattern(m.pattern);
+    return pattern?.impactLevel === 'warning';
+  });
+
+  const critical = criticalMatches.map((m) => generateResult(m));
+  const warnings = warningMatches.map((m) => generateResult(m));
+  const dependencies = buildDependencyIssues(dependencyMatches, depContext);
+
+  const totalIssues = filtered.length;
+  const affectedDeps = new Set(
+    dependencyMatches.map((m) => m.packageName).filter((name): name is string => name !== undefined)
+  );
+
+  return {
+    plugin: {
+      id: pluginJson?.id || '',
+      name: pluginJson?.name || '',
+      version: pluginJson?.info.version || '',
+      type: pluginJson?.type || '',
+    },
+    summary: {
+      totalIssues,
+      critical: critical.length,
+      warnings: warnings.length,
+      sourceIssuesCount: sourceMatches.length,
+      dependencyIssuesCount: dependencyMatches.length,
+      status: totalIssues > 0 ? 'action_required' : 'no_action_required',
+      affectedDependencies: Array.from(affectedDeps),
+    },
+    issues: {
+      critical,
+      warnings,
+      dependencies,
+    },
+  };
+}
+
+function filterMatches(matches: AnalyzedMatch[]): AnalyzedMatch[] {
+  const filtered = matches.filter((match) => {
+    // TODO: add mode for strict / loose filtering
+    if (match.type === 'source' && (match.confidence === 'none' || match.confidence === 'unknown')) {
+      return false;
+    }
+
+    if (match.type === 'source') {
+      const pattern = getPattern(match.pattern);
+      // defaultProps are allowed on class components in React 19.
+      if (pattern?.functionComponentOnly && match.componentType !== 'function') {
+        return false;
+      }
+    }
+
+    // Don't report react internals from React's JSX transform. We only care about other dependencies
+    // relying on React internals.
+    if (
+      match.type === 'dependency' &&
+      match.pattern === '__SECRET_INTERNALS' &&
+      match.packageName === 'react' &&
+      (match.sourceFile.includes('jsx-runtime') || match.sourceFile.includes('jsx-dev-runtime'))
+    ) {
+      return false;
+    }
+
+    return true;
+  });
+
+  return filtered;
+}
+
+function generateResult(match: AnalyzedMatch): AnalysisResult {
+  const pattern = getPattern(match.pattern);
+
+  if (!pattern) {
+    throw new Error(`Pattern not found: ${match.pattern}`);
+  }
+
+  const cleanFilePath = cleanSourceFilePath(match.sourceFile);
+
+  const result: AnalysisResult = {
+    pattern: match.pattern,
+    severity: pattern.severity,
+    impactLevel: pattern.impactLevel,
+    location: {
+      type: match.type,
+      file: path.join(process.cwd(), cleanFilePath),
+      line: match.sourceLine,
+      column: match.sourceColumn,
+    },
+    problem: pattern.description,
+    fix: {
+      description: pattern.fix?.description || '',
+      before: pattern.fix?.before || '',
+      after: pattern.fix?.after || '',
+    },
+    link: pattern.link || '',
+  };
+
+  // Add dependency-specific fields
+  if (match.type === 'dependency') {
+    result.packageName = match.packageName;
+    result.rootDependency = match.rootDependency;
+  }
+
+  return result;
+}
+
+/**
+ * Build DependencyIssue objects grouped by package
+ */
+function buildDependencyIssues(dependencyMatches: AnalyzedMatch[], depContext: DependencyContext): DependencyIssue[] {
+  // Group by package
+  const byPackage = new Map<string, AnalyzedMatch[]>();
+  for (const match of dependencyMatches) {
+    if (match.type === 'dependency' && match.packageName) {
+      const existing = byPackage.get(match.packageName) || [];
+      existing.push(match);
+      byPackage.set(match.packageName, existing);
+    }
+  }
+
+  // Build DependencyIssue for each package
+  const issues: DependencyIssue[] = [];
+  for (const [packageName, matches] of byPackage) {
+    const rootDep = matches[0].rootDependency || packageName;
+    const version = depContext.getVersion(packageName) || null;
+
+    issues.push({
+      packageName,
+      version: version || 'unknown',
+      rootDependency: rootDep,
+      issues: matches.map((m) => generateResult(m)),
+    });
+  }
+
+  return issues;
+}
+
+function cleanSourceFilePath(filePath: string): string {
+  let cleanPath = filePath;
+  if (filePath.includes('node_modules')) {
+    cleanPath = filePath.replace(/webpack:\/\/[^/]+\/node_modules\//, './node_modules/');
+  } else {
+    cleanPath = filePath.replace(/webpack:\/\/[^/]+/, './src/');
+  }
+
+  return cleanPath;
+}

package/src/source-extractor.ts

@@ -0,0 +1,101 @@
+import { SourceMapConsumer } from 'source-map';
+import { SourceFile, SourceFileType } from './types/processors.js';
+import { readFile } from 'node:fs/promises';
+
+export async function extractSourcesFromMap(sourcemapFilePath: string): Promise<SourceFile[]> {
+  const mapContent = await readFile(sourcemapFilePath, 'utf8');
+  const sourceMap = JSON.parse(mapContent);
+  const consumer = await new SourceMapConsumer(sourceMap);
+
+  const sourceFiles: SourceFile[] = [];
+  const bundledFilePath = sourcemapFilePath.replace('.map', '');
+
+  for (const source of consumer.sources) {
+    if (shouldSkipSource(source)) {
+      continue;
+    }
+
+    const content = consumer.sourceContentFor(source, true);
+    if (!content) {
+      console.warn(`No sourceContent for ${source} in ${sourcemapFilePath}`);
+      continue;
+    }
+
+    const classified = classifySource(source);
+    sourceFiles.push({
+      path: source,
+      content,
+      type: classified.type,
+      packageName: classified.packageName,
+      bundledFilePath,
+    });
+  }
+  consumer.destroy();
+  return sourceFiles;
+}
+
+export async function extractAllSources(sourcemapFilePaths: string[]): Promise<SourceFile[]> {
+  const allSources: SourceFile[] = [];
+  // we need to dedupe paths
+  const seenPaths = new Set<string>();
+
+  for (const mapFilePath of sourcemapFilePaths) {
+    try {
+      const sources = await extractSourcesFromMap(mapFilePath);
+      for (const source of sources) {
+        if (!seenPaths.has(source.path)) {
+          seenPaths.add(source.path);
+          allSources.push(source);
+        }
+      }
+    } catch (error) {
+      console.error(`Failed to extract sources from ${mapFilePath}:`, error);
+    }
+  }
+
+  return allSources;
+}
+
+function classifySource(sourcePath: string): { type: SourceFileType; packageName?: string } {
+  if (sourcePath.includes('node_modules')) {
+    const packageName = getPackageName(sourcePath);
+    return { type: 'dependency', packageName };
+  }
+
+  return { type: 'source' };
+}
+
+function getPackageName(sourcePath: string) {
+  // PNPM has its own ideas of how to resolve dependencies, so we need to handle it differently.
+  const pnpmMatch = sourcePath.match(/\.pnpm\/[^/]+\/node_modules\/((?:@[^/]+\/)?[^/]+)/);
+  if (pnpmMatch) {
+    return pnpmMatch[1];
+  }
+  // for everything else, we can use the standard node_modules structure.
+  const match = sourcePath.match(/node_modules\/(@[^/]+\/[^/]+|[^/]+)/);
+  return match ? match[1] : undefined;
+}
+
+function shouldSkipSource(sourcePath: string): boolean {
+  // skip webpack runtime source
+  if (sourcePath.includes('webpack/bootstrap') || sourcePath.includes('webpack/runtime')) {
+    return true;
+  }
+
+  // Skip webpack entry points without actual paths
+  if (sourcePath.match(/^webpack:\/\/[^/]+\/?$/)) {
+    return true;
+  }
+
+  // Skip packages externalised by webpack
+  if (sourcePath.includes('/external%20amd')) {
+    return true;
+  }
+
+  // Skip virtual publicPath
+  if (sourcePath.includes('node_modules/grafana-public-path.js')) {
+    return true;
+  }
+
+  return false;
+}

package/src/types/patterns.ts

@@ -0,0 +1,14 @@
+export type Severity = 'removed' | 'renamed' | 'deprecated';
+
+export interface PatternDefinition {
+  severity: Severity;
+  impactLevel: 'critical' | 'warning';
+  description: string;
+  fix: {
+    description: string;
+    before?: string;
+    after?: string;
+  };
+  link: string;
+  functionComponentOnly?: boolean;
+}

package/src/types/plugins.ts

@@ -0,0 +1,6 @@
+export interface PluginMetadata {
+  id: string;
+  type: string;
+  version: string;
+  name: string;
+}

package/src/types/processors.ts

@@ -0,0 +1,40 @@
+export type Confidence = 'high' | 'medium' | 'low' | 'none' | 'unknown';
+export type ComponentType = 'class' | 'function' | 'unknown';
+
+export type PatternMatch = {
+  pattern: string;
+  line: number;
+  column: number;
+  matched: string;
+  context: string;
+};
+
+export type SourceFileType = 'source' | 'dependency' | 'external';
+export interface SourceFile {
+  path: string;
+  content: string;
+  type: SourceFileType;
+  packageName?: string;
+  bundledFilePath: string;
+}
+
+export type SourceMatch = {
+  pattern: string;
+  matched: string;
+  context: string;
+
+  sourceFile: string;
+  sourceLine: number;
+  sourceColumn: number;
+
+  type: 'source' | 'dependency';
+  packageName?: string;
+
+  bundledFilePath: string;
+};
+
+export type AnalyzedMatch = SourceMatch & {
+  confidence: Confidence;
+  componentType: ComponentType;
+  rootDependency?: string;
+};

package/src/types/reporters.ts

@@ -0,0 +1,53 @@
+import { Severity } from './patterns.js';
+import { PluginMetadata } from './plugins.js';
+
+export interface AnalysisResult {
+  pattern: string;
+  severity: Severity;
+  impactLevel: 'critical' | 'warning';
+  location: {
+    type: 'source' | 'dependency';
+    file: string;
+    line: number;
+    column: number;
+  };
+  problem: string;
+  fix: {
+    description: string;
+    before: string;
+    after: string;
+  };
+  link: string;
+  packageName?: string;
+  rootDependency?: string;
+}
+
+export interface PluginAnalysisResults {
+  plugin: PluginMetadata;
+  summary: {
+    totalIssues: number;
+    critical: number;
+    warnings: number;
+    sourceIssuesCount: number;
+    dependencyIssuesCount: number;
+    status: 'action_required' | 'no_action_required';
+    affectedDependencies: string[];
+  };
+  issues: {
+    critical: AnalysisResult[];
+    warnings: AnalysisResult[];
+    dependencies: DependencyIssue[];
+  };
+}
+
+export interface DependencyIssue {
+  packageName: string;
+  version: string;
+  rootDependency: string;
+  issues: AnalysisResult[];
+  recommendation?: {
+    action: 'update' | 'replace' | 'remove';
+    targetVersion?: string;
+    reason: string;
+  };
+}

package/src/utils/analyzer.test.ts

@@ -0,0 +1,190 @@
+import { describe, it, expect } from 'vitest';
+import { parseFile } from '../parser.js';
+import { analyzeConfidence, analyzeComponentType, hasReactComponent, hasFunctionComponentPattern } from './analyzer.js';
+
+describe('analyzeConfidence', () => {
+  it('should return high for React code with imports and JSX', () => {
+    const code = `
+      import React from 'react';
+      function MyComponent() {
+        return <div>Hello</div>;
+      }
+    `;
+    const ast = parseFile(code, 'test.tsx');
+    expect(analyzeConfidence(ast)).toBe('high');
+  });
+
+  it('should return high for class component', () => {
+    const code = `
+      import React from 'react';
+      class MyComponent extends React.Component {
+        render() { return <div>Hello</div>; }
+      }
+    `;
+    const ast = parseFile(code, 'test.tsx');
+    expect(analyzeConfidence(ast)).toBe('high');
+  });
+
+  it('should return low for hooks without imports', () => {
+    const code = `
+      function useCustomHook() {
+        const [state, setState] = useState(0);
+        return state;
+      }
+    `;
+    const ast = parseFile(code, 'test.tsx');
+    expect(analyzeConfidence(ast)).toBe('low');
+  });
+
+  it('should return medium for JSX without imports', () => {
+    const code = `
+      function Component() {
+        return <div>Hello</div>;
+      }
+    `;
+    const ast = parseFile(code, 'test.tsx');
+    expect(analyzeConfidence(ast)).toBe('medium');
+  });
+
+  it('should return medium for only React import', () => {
+    const code = `
+      import React from 'react';
+      const value = 42;
+    `;
+    const ast = parseFile(code, 'test.tsx');
+    expect(analyzeConfidence(ast)).toBe('medium');
+  });
+
+  it('should return none for non-React code', () => {
+    const code = `
+      function regularFunction() {
+        return 42;
+      }
+    `;
+    const ast = parseFile(code, 'test.js');
+    expect(analyzeConfidence(ast)).toBe('none');
+  });
+});
+
+describe('analyzeComponentType', () => {
+  it('should detect class components extending React.Component', () => {
+    const code = `
+      import React from 'react';
+      class MyComponent extends React.Component {
+        render() { return <div>Hello</div>; }
+      }
+    `;
+    const ast = parseFile(code, 'test.tsx');
+    expect(analyzeComponentType(ast)).toBe('class');
+  });
+
+  it('should detect class components extending React.PureComponent', () => {
+    const code = `
+      import React from 'react';
+      class MyComponent extends React.PureComponent {
+        render() { return <div>Hello</div>; }
+      }
+    `;
+    const ast = parseFile(code, 'test.tsx');
+    expect(analyzeComponentType(ast)).toBe('class');
+  });
+
+  it('should detect function components with JSX', () => {
+    const code = `
+      function MyComponent() {
+        return <div>Hello</div>;
+      }
+    `;
+    const ast = parseFile(code, 'test.tsx');
+    expect(analyzeComponentType(ast)).toBe('function');
+  });
+
+  it('should detect function components with hooks', () => {
+    const code = `
+      function MyComponent() {
+        const [state] = useState(0);
+        return null;
+      }
+    `;
+    const ast = parseFile(code, 'test.tsx');
+    expect(analyzeComponentType(ast)).toBe('function');
+  });
+
+  it('should detect arrow function components', () => {
+    const code = `
+      const MyComponent = () => {
+        return <div>Hello</div>;
+      };
+    `;
+    const ast = parseFile(code, 'test.tsx');
+    expect(analyzeComponentType(ast)).toBe('function');
+  });
+
+  it('should return unknown for non-component code', () => {
+    const code = `
+      function regularFunction() {
+        return 42;
+      }
+    `;
+    const ast = parseFile(code, 'test.js');
+    expect(analyzeComponentType(ast)).toBe('unknown');
+  });
+});
+
+describe('hasReactComponent', () => {
+  it('should detect React.Component', () => {
+    const code = `
+      class MyComponent extends React.Component {}
+    `;
+    const ast = parseFile(code, 'test.tsx');
+    expect(hasReactComponent(ast)).toBe(true);
+  });
+
+  it('should detect React.PureComponent', () => {
+    const code = `
+      class MyComponent extends React.PureComponent {}
+    `;
+    const ast = parseFile(code, 'test.tsx');
+    expect(hasReactComponent(ast)).toBe(true);
+  });
+
+  it('should return false for non-React classes', () => {
+    const code = `
+      class MyClass extends BaseClass {}
+    `;
+    const ast = parseFile(code, 'test.tsx');
+    expect(hasReactComponent(ast)).toBe(false);
+  });
+});
+
+describe('hasFunctionComponentPattern', () => {
+  it('should detect functions with JSX', () => {
+    const code = `
+      function MyComponent() {
+        return <div>Hello</div>;
+      }
+    `;
+    const ast = parseFile(code, 'test.tsx');
+    expect(hasFunctionComponentPattern(ast)).toBe(true);
+  });
+
+  it('should detect functions with hooks', () => {
+    const code = `
+      function MyComponent() {
+        const [state] = useState(0);
+      }
+    `;
+    const ast = parseFile(code, 'test.tsx');
+    expect(hasFunctionComponentPattern(ast)).toBe(true);
+  });
+
+  it('should return false for functions without React patterns', () => {
+    const code = `
+      function regularFunction() {
+        return 42;
+      }
+    `;
+    const ast = parseFile(code, 'test.js');
+    expect(hasFunctionComponentPattern(ast)).toBe(false);
+  });
+});

package/src/utils/analyzer.ts

@@ -0,0 +1,120 @@
+import { ComponentType, Confidence } from '../types/processors.js';
+import { walk } from './ast.js';
+import { TSESTree } from '@typescript-eslint/typescript-estree';
+
+export function analyzeConfidence(ast: TSESTree.Program): Confidence {
+  let score = 0;
+  if (hasReactImport(ast)) {
+    score += 3;
+  }
+  if (hasJSX(ast)) {
+    score += 3;
+  }
+  if (hasHooks(ast)) {
+    score += 2;
+  }
+
+  if (hasReactComponent(ast)) {
+    score += 3;
+  }
+
+  if (score >= 6) {
+    return 'high';
+  }
+  if (score >= 3) {
+    return 'medium';
+  }
+  if (score >= 1) {
+    return 'low';
+  }
+  return 'none';
+}
+
+export function analyzeComponentType(ast: TSESTree.Program): ComponentType {
+  if (hasReactComponent(ast)) {
+    return 'class';
+  }
+
+  if (hasFunctionComponentPattern(ast)) {
+    return 'function';
+  }
+
+  return 'unknown';
+}
+
+export function hasReactComponent(ast: TSESTree.Program): boolean {
+  let found = false;
+
+  walk(ast, (node) => {
+    if (
+      node.type === 'ClassDeclaration' &&
+      node.superClass?.type === 'MemberExpression' &&
+      node.superClass.object.type === 'Identifier' &&
+      node.superClass.object.name === 'React' &&
+      node.superClass.property.type === 'Identifier' &&
+      (node.superClass.property.name === 'Component' || node.superClass.property.name === 'PureComponent')
+    ) {
+      found = true;
+    }
+  });
+
+  return found;
+}
+
+export function hasFunctionComponentPattern(ast: TSESTree.Program): boolean {
+  const hasJSXInFile = hasJSX(ast);
+  const hasHooksInFile = hasHooks(ast);
+
+  if (!hasJSXInFile && !hasHooksInFile) {
+    return false;
+  }
+
+  let found = false;
+  walk(ast, (node) => {
+    if (node.type === 'FunctionDeclaration' || node.type === 'ArrowFunctionExpression') {
+      found = true;
+    }
+  });
+
+  return found;
+}
+
+function hasReactImport(ast: TSESTree.Program): boolean {
+  let found = false;
+
+  walk(ast, (node) => {
+    if (
+      node.type === 'ImportDeclaration' &&
+      node.source.type === 'Literal' &&
+      (node.source.value === 'react' || node.source.value === 'react-dom')
+    ) {
+      found = true;
+    }
+  });
+
+  return found;
+}
+
+function hasJSX(ast: TSESTree.Program): boolean {
+  let found = false;
+
+  walk(ast, (node) => {
+    if (node.type === 'JSXElement' || node.type === 'JSXFragment') {
+      found = true;
+    }
+  });
+
+  return found;
+}
+
+function hasHooks(ast: TSESTree.Program): boolean {
+  let found = false;
+
+  walk(ast, (node) => {
+    if (node.type === 'CallExpression' && node.callee.type === 'Identifier' && node.callee.name.startsWith('use')) {
+      found = true;
+    }
+  });
+
+  return found;
+}