@grafana/react-detect 0.1.0

package/dist/utils/dependencies.js

@@ -0,0 +1,97 @@
+import { join } from 'node:path';
+import { parsePnpmProject, parseNpmLockV2Project, parseYarnLockV2Project } from 'snyk-nodejs-lockfile-parser';
+import { readFileSync, existsSync } from 'node:fs';
+import { readJsonFile } from './plugin.js';
+
+var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+class DependencyContext {
+  constructor() {
+    __publicField(this, "dependencies", /* @__PURE__ */ new Map());
+    __publicField(this, "devDependencies", /* @__PURE__ */ new Map());
+    __publicField(this, "depGraph", null);
+  }
+  async loadDependencies(pluginRoot = process.cwd()) {
+    const lockfile = this.findLockfile(pluginRoot);
+    const packageJsonPath = join(pluginRoot, "package.json");
+    if (lockfile) {
+      const pkgJsonContent = readJsonFile(packageJsonPath);
+      const lockfileContent = readFileSync(join(pluginRoot, lockfile), "utf8");
+      const pkgJsonContentString = JSON.stringify(pkgJsonContent);
+      if (lockfile === "pnpm-lock.yaml") {
+        this.depGraph = await parsePnpmProject(pkgJsonContentString, lockfileContent, {
+          includeDevDeps: true,
+          includeOptionalDeps: true,
+          strictOutOfSync: false,
+          pruneWithinTopLevelDeps: false
+        });
+      } else if (lockfile === "package-lock.json") {
+        this.depGraph = await parseNpmLockV2Project(pkgJsonContentString, lockfileContent, {
+          includeDevDeps: true,
+          includeOptionalDeps: true,
+          strictOutOfSync: false,
+          pruneCycles: false
+        });
+      } else if (lockfile === "yarn.lock") {
+        this.depGraph = await parseYarnLockV2Project(pkgJsonContentString, lockfileContent, {
+          includeDevDeps: true,
+          includeOptionalDeps: true,
+          strictOutOfSync: false,
+          pruneWithinTopLevelDeps: true
+        });
+      }
+      if (pkgJsonContent.dependencies) {
+        Object.entries(pkgJsonContent.dependencies).forEach(([name, version]) => {
+          this.dependencies.set(name, version);
+        });
+      }
+      if (pkgJsonContent.devDependencies) {
+        Object.entries(pkgJsonContent.devDependencies).forEach(([name, version]) => {
+          this.devDependencies.set(name, version);
+        });
+      }
+    } else {
+      throw new Error(`No lockfile found in ${pluginRoot}`);
+    }
+  }
+  findLockfile(pluginRoot) {
+    const lockfiles = ["package-lock.json", "pnpm-lock.yaml", "yarn.lock"];
+    for (const lockfile of lockfiles) {
+      if (existsSync(join(pluginRoot, lockfile))) {
+        return lockfile;
+      }
+    }
+    return null;
+  }
+  findRootDependency(packageName) {
+    if (this.isDirect(packageName)) {
+      return packageName;
+    }
+    if (this.depGraph) {
+      try {
+        const pkgs = this.depGraph.getPkgs().filter((p) => p.name === packageName);
+        if (pkgs.length > 0) {
+          const paths = this.depGraph.pkgPathsToRoot(pkgs[0]);
+          if (paths.length > 0 && paths[0].length > 1) {
+            return paths[0][paths[0].length - 2].name;
+          }
+        }
+      } catch (error) {
+        console.error(error);
+      }
+    }
+    return packageName;
+  }
+  isDirect(packageName) {
+    return this.dependencies.has(packageName) || this.devDependencies.has(packageName);
+  }
+  getVersion(packageName) {
+    return this.dependencies.get(packageName) || this.devDependencies.get(packageName);
+  }
+  getAllDependencies() {
+    return new Map([...this.dependencies, ...this.devDependencies]);
+  }
+}
+
+export { DependencyContext };

package/dist/utils/output.js

@@ -0,0 +1,5 @@
+import { Output } from '../libs/output/src/index.js';
+
+const output = new Output("@grafana/react-detect");
+
+export { output };

package/dist/utils/plugin.js

@@ -0,0 +1,36 @@
+import path from 'node:path';
+import fs from 'node:fs';
+
+let cachedPluginJson = null;
+function getPluginJson(dir) {
+  if (cachedPluginJson) {
+    return cachedPluginJson;
+  }
+  const srcPath = dir ? path.join(dir, "dist") : path.join(process.cwd(), "dist");
+  const pluginJsonPath = path.join(srcPath, "plugin.json");
+  cachedPluginJson = readJsonFile(pluginJsonPath);
+  return cachedPluginJson;
+}
+function isFile(path2) {
+  try {
+    return fs.lstatSync(path2).isFile();
+  } catch (e) {
+    return false;
+  }
+}
+function readJsonFile(filename) {
+  if (!isFile(filename)) {
+    throw new Error(
+      `There is no "${path.basename(
+        filename
+      )}" file found at "${filename}". Make sure you run this command from a plugins root directory.`
+    );
+  }
+  try {
+    return JSON.parse(fs.readFileSync(filename).toString());
+  } catch (error) {
+    throw new Error(`Failed to load json file ${filename}: ${error instanceof Error ? error.message : String(error)}`);
+  }
+}
+
+export { getPluginJson, readJsonFile };

package/package.json

@@ -0,0 +1,42 @@
+{
+  "name": "@grafana/react-detect",
+  "description": "Run various checks to detect if a Grafana plugin is compatible with React.",
+  "version": "0.1.0",
+  "repository": {
+    "directory": "packages/react-detect",
+    "url": "https://github.com/grafana/plugin-tools"
+  },
+  "author": "Grafana",
+  "license": "Apache-2.0",
+  "bin": "./dist/bin/run.js",
+  "type": "module",
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org/",
+    "access": "public"
+  },
+  "scripts": {
+    "clean": "rm -rf ./dist",
+    "build": "rollup -c ../../rollup.config.ts --configPlugin esbuild",
+    "dev": "npm run build -- -w",
+    "lint": "eslint --cache ./src",
+    "lint:fix": "npm run lint -- --fix",
+    "lint:package": "publint",
+    "test": "vitest",
+    "typecheck": "tsc --noEmit"
+  },
+  "dependencies": {
+    "@typescript-eslint/parser": "^8.46.2",
+    "@typescript-eslint/typescript-estree": "^8.46.2",
+    "fast-glob": "^3.3.2",
+    "minimist": "^1.2.8",
+    "snyk-nodejs-lockfile-parser": "^2.4.4",
+    "source-map": "^0.7.4"
+  },
+  "devDependencies": {
+    "@libs/output": "1.0.3",
+    "@types/minimist": "^1.2.5"
+  },
+  "engines": {
+    "node": ">=20"
+  }
+}

package/src/analyzer.test.ts

@@ -0,0 +1,14 @@
+import { join } from 'node:path';
+import { analyzeSourceFiles } from './analyzer.js';
+import { extractAllSources } from './source-extractor.js';
+
+describe('analyzeSourceFiles', () => {
+  it('should analyze a source match with React code', async () => {
+    const fixturePath = join(__dirname, '..', 'test', 'fixtures', 'patterns', 'module.js.map');
+    const sourceFile = await extractAllSources([fixturePath]);
+    const result = await analyzeSourceFiles(sourceFile);
+
+    expect(result[0].confidence).toBe('high');
+    expect(result[0].componentType).toBe('function');
+  });
+});

package/src/analyzer.ts

@@ -0,0 +1,42 @@
+import { AnalyzedMatch, SourceFile } from './types/processors.js';
+import { parseFile } from './parser.js';
+import { analyzeConfidence, analyzeComponentType } from './utils/analyzer.js';
+import { findPatternMatches } from './patterns/matcher.js';
+
+export async function analyzeSourceFiles(sourceFiles: SourceFile[]): Promise<AnalyzedMatch[]> {
+  const matches: AnalyzedMatch[] = [];
+
+  for (const source of sourceFiles) {
+    if (source.type === 'external') {
+      continue;
+    }
+
+    try {
+      const ast = parseFile(source.content, source.path);
+      const patternMatches = findPatternMatches(ast, source.content);
+
+      for (const match of patternMatches) {
+        const analyzed = {
+          pattern: match.pattern,
+          matched: match.matched,
+          context: match.context,
+          sourceFile: source.path,
+          sourceLine: match.line,
+          sourceColumn: match.column,
+          type: source.type,
+          packageName: source.packageName,
+          bundledFilePath: source.bundledFilePath,
+
+          confidence: analyzeConfidence(ast),
+          componentType: analyzeComponentType(ast),
+        };
+
+        matches.push(analyzed);
+      }
+    } catch (error) {
+      console.error(`Failed to analyze ${source.path}:`, error);
+    }
+  }
+
+  return matches;
+}

package/src/bin/run.ts

@@ -0,0 +1,17 @@
+#!/usr/bin/env node
+
+import minimist from 'minimist';
+import { detect19 } from '../commands/detect19.js';
+
+const args = process.argv.slice(2);
+const argv = minimist(args);
+
+const commands: Record<string, (argv: minimist.ParsedArgs) => Promise<void>> = {
+  detect19,
+};
+
+// Default to detect19 if no command specified
+const commandName = argv._[0] || 'detect19';
+const command = commands[commandName];
+
+command(argv);

package/src/commands/detect19.ts

@@ -0,0 +1,53 @@
+import minimist from 'minimist';
+import { findSourceMapFiles } from '../file-scanner.js';
+import { generateAnalysisResults } from '../results.js';
+import { DependencyContext } from '../utils/dependencies.js';
+import { jsonReporter } from '../reporters/json.js';
+import { consoleReporter } from '../reporters/console.js';
+import { extractAllSources } from '../source-extractor.js';
+import { analyzeSourceFiles } from '../analyzer.js';
+/**
+ * Main detect command for finding React 19 breaking changes
+ */
+export async function detect19(argv: minimist.ParsedArgs) {
+  const pluginRoot = argv.pluginRoot || process.cwd();
+
+  const allMatches = await getAllMatches(pluginRoot);
+  const depContext = new DependencyContext();
+  await depContext.loadDependencies(pluginRoot);
+
+  const matchesWithRootDependency = allMatches.map((match) => {
+    if (match.type === 'dependency' && match.packageName) {
+      return { ...match, rootDependency: depContext.findRootDependency(match.packageName) };
+    }
+    return match;
+  });
+
+  const results = generateAnalysisResults(matchesWithRootDependency, pluginRoot, depContext);
+
+  if (argv.json) {
+    jsonReporter(results);
+  } else {
+    consoleReporter(results);
+  }
+
+  process.exit(results.summary.totalIssues > 0 ? 1 : 0);
+}
+
+async function getAllMatches(pluginRoot: string) {
+  const sourcemapPaths = await findSourceMapFiles(pluginRoot);
+
+  if (sourcemapPaths.length === 0) {
+    throw new Error('No source map files found in dist directory. Make sure to build your plugin first.');
+  }
+
+  const sources = await extractAllSources(sourcemapPaths);
+
+  if (sources.length === 0) {
+    throw new Error('No sources found in source maps.');
+  }
+
+  const matches = await analyzeSourceFiles(sources);
+
+  return matches;
+}

package/src/file-scanner.ts

@@ -0,0 +1,19 @@
+import fg from 'fast-glob';
+import { join } from 'node:path';
+
+export async function findSourceMapFiles(directory: string): Promise<string[]> {
+  const distDirectory = join(directory, 'dist');
+
+  try {
+    const files = await fg('**/*.js.map', {
+      cwd: distDirectory,
+      absolute: true,
+      ignore: ['**/node_modules/**'],
+    });
+    return files;
+  } catch (error) {
+    throw new Error(
+      `Error finding source map files in ${distDirectory}: ${error instanceof Error ? error.message : 'Unknown error'}`
+    );
+  }
+}

package/src/parser.ts

@@ -0,0 +1,22 @@
+import { parse, TSESTree } from '@typescript-eslint/typescript-estree';
+
+const PARSER_OPTIONS = {
+  jsx: true,
+  loc: true,
+  range: true,
+  comment: false,
+  tokens: false,
+  ecmaVersion: 'latest' as const,
+  sourceType: 'module' as const,
+};
+
+export function parseFile(code: string, filePath: string): TSESTree.Program {
+  try {
+    return parse(code, {
+      ...PARSER_OPTIONS,
+      filePath,
+    });
+  } catch (error) {
+    throw new Error(`Failed to parse ${filePath}: ${error instanceof Error ? error.message : 'Unknown error'}`);
+  }
+}

package/src/patterns/definitions.ts

@@ -0,0 +1,125 @@
+import { PatternDefinition } from '../types/patterns.js';
+
+export const PATTERN_DEFINITIONS: Record<string, PatternDefinition> = {
+  __SECRET_INTERNALS: {
+    severity: 'renamed',
+    impactLevel: 'critical',
+    description: 'React internals __SECRET_INTERNALS renamed to _DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE',
+    fix: {
+      description:
+        'Check the list of libraries depending on React internals. Alternatively externalise react/jsx-runtime in webpack config. Your plugin will only be compatible with Grafana >=12.3.0',
+    },
+    link: 'https://react.dev/blog/2024/04/25/react-19-upgrade-guide#libraries-depending-on-react-internals-may-block-upgrades',
+  },
+  jsxRuntimeImport: {
+    severity: 'renamed',
+    impactLevel: 'critical',
+    description:
+      'Dependency bundles react/jsx-runtime which will break with React 19 due to `__SECRET_INTERNALS` being renamed',
+    fix: {
+      description:
+        'Externalize react/jsx-runtime in webpack config. Your plugin will only be compatible with Grafana >=12.3.0',
+    },
+    link: 'https://grafana.com/developers/plugin-tools/how-to-guides/extend-configurations#extend-the-webpack-config',
+  },
+  defaultProps: {
+    severity: 'removed',
+    impactLevel: 'critical',
+    description: 'Default props removed in favour of function components',
+    fix: {
+      description: 'Use ES6 default parameters',
+      before: 'MyComponent.defaultProps = { value: "test" }',
+      after: 'function MyComponent({ value = "test" }) { ... }',
+    },
+    link: 'https://react.dev/blog/2024/04/25/react-19-upgrade-guide#removed-deprecated-react-apis',
+    functionComponentOnly: true,
+  },
+  propTypes: {
+    severity: 'removed',
+    impactLevel: 'warning',
+    description: 'Prop types removed in favour of typescript or other type-checking solution',
+    link: 'https://react.dev/blog/2024/04/25/react-19-upgrade-guide#removed-deprecated-react-apis',
+    fix: {
+      description: 'Run the codemod to migrate to Typescript',
+      before: 'npx codemod@latest react/prop-types-typescript',
+    },
+  },
+  contextTypes: {
+    severity: 'removed',
+    impactLevel: 'critical',
+    description: 'Legacy Context contextTypes removed in React 19',
+    fix: {
+      description: 'Migrate to the new contextType API.',
+    },
+    link: 'https://react.dev/blog/2024/04/25/react-19-upgrade-guide#removed-removing-legacy-context',
+  },
+  getChildContext: {
+    severity: 'removed',
+    impactLevel: 'critical',
+    description: 'Legacy Context getChildContext removed in React 19',
+    fix: {
+      description: 'Migrate to the new contextType API.',
+    },
+    link: 'https://react.dev/blog/2024/04/25/react-19-upgrade-guide#removed-removing-legacy-context',
+  },
+  stringRefs: {
+    severity: 'removed',
+    impactLevel: 'critical',
+    description: 'String refs removed in React 19',
+    fix: {
+      description: 'Run the codemod to migrate to ref callbacks.',
+      before: 'npx codemod@latest react/19/replace-string-ref',
+    },
+    link: 'https://react.dev/blog/2024/04/25/react-19-upgrade-guide#removed-string-refs',
+  },
+  findDOMNode: {
+    severity: 'removed',
+    impactLevel: 'critical',
+    description: 'findDOMNode removed from React and ReactDOM in React 19',
+    fix: {
+      description: 'Replace ReactDOM.findDOMNode with DOM refs',
+      before: 'const node = findDOMNode(this);',
+      after: 'const node = useRef(null);',
+    },
+    link: 'https://react.dev/blog/2024/04/25/react-19-upgrade-guide#removed-reactdom-finddomnode',
+  },
+  createFactory: {
+    severity: 'removed',
+    impactLevel: 'critical',
+    description: 'React.createFactory removed in React 19',
+    fix: {
+      description: 'Use JSX instead',
+      before: "const button = createFactory('button');",
+      after: 'const button = <button />;',
+    },
+    link: 'https://react.dev/blog/2024/04/25/react-19-upgrade-guide#removed-createfactory',
+  },
+
+  'ReactDOM.render': {
+    severity: 'removed',
+    impactLevel: 'critical',
+    description: 'ReactDOM.render removed in React 19 (use createRoot)',
+    fix: {
+      description: 'Use createRoot instead.',
+      before: 'ReactDOM.render(<App />, document.getElementById("root"));',
+      after: 'const root = createRoot(document.getElementById("root")); root.render(<App />);',
+    },
+    link: 'https://react.dev/blog/2024/04/25/react-19-upgrade-guide#removed-reactdom-render',
+  },
+
+  'ReactDOM.unmountComponentAtNode': {
+    severity: 'removed',
+    impactLevel: 'critical',
+    description: 'ReactDOM.unmountComponentAtNode removed in React 19',
+    fix: {
+      description: 'Use createRoot instead.',
+      before: 'ReactDOM.unmountComponentAtNode(container);',
+      after: 'const root = createRoot(container); root.unmount();',
+    },
+    link: 'https://react.dev/blog/2024/04/25/react-19-upgrade-guide#removed-reactdom-render',
+  },
+};
+
+export function getPattern(name: string): PatternDefinition | undefined {
+  return PATTERN_DEFINITIONS[name];
+}