@grafana/react-detect 0.1.0

package/dist/patterns/matcher.js

@@ -0,0 +1,146 @@
+import { walk, getSurroundingCode } from '../utils/ast.js';
+
+function findPatternMatches(ast, code) {
+  const matches = [];
+  matches.push(...findDefaultProps(ast, code));
+  matches.push(...findPropTypes(ast, code));
+  matches.push(...findContextTypes(ast, code));
+  matches.push(...findGetChildContext(ast, code));
+  matches.push(...findSecretInternals(ast, code));
+  matches.push(...findJsxRuntimeImports(ast, code));
+  matches.push(...findStringRefs(ast, code));
+  matches.push(...findFindDOMNode(ast, code));
+  matches.push(...findReactDOMRender(ast, code));
+  matches.push(...findReactDOMUnmountComponentAtNode(ast, code));
+  matches.push(...findCreateFactory(ast, code));
+  return matches;
+}
+function findDefaultProps(ast, code) {
+  const matches = [];
+  walk(ast, (node) => {
+    if (node && node.type === "AssignmentExpression" && node.left.type === "MemberExpression" && node.left.property.type === "Identifier" && node.left.property.name === "defaultProps") {
+      matches.push(createPatternMatch(node, "defaultProps", code));
+    }
+  });
+  return matches;
+}
+function findPropTypes(ast, code) {
+  const matches = [];
+  walk(ast, (node) => {
+    if (node && node.type === "AssignmentExpression" && node.left.type === "MemberExpression" && node.left.property.type === "Identifier" && node.left.property.name === "propTypes") {
+      matches.push(createPatternMatch(node, "propTypes", code));
+    }
+  });
+  return matches;
+}
+function findContextTypes(ast, code) {
+  const matches = [];
+  walk(ast, (node) => {
+    if (node && node.type === "AssignmentExpression" && node.left.type === "MemberExpression" && node.left.property.type === "Identifier" && node.left.property.name === "contextTypes") {
+      matches.push(createPatternMatch(node, "contextTypes", code));
+    }
+  });
+  return matches;
+}
+function findGetChildContext(ast, code) {
+  const matches = [];
+  walk(ast, (node) => {
+    if (node && node.type === "AssignmentExpression" && node.left.type === "MemberExpression" && node.left.property.type === "Identifier" && node.left.property.name === "getChildContext") {
+      matches.push(createPatternMatch(node, "getChildContext", code));
+    }
+  });
+  return matches;
+}
+function findSecretInternals(ast, code) {
+  const matches = [];
+  walk(ast, (node) => {
+    if (node && node.type === "MemberExpression" && node.property.type === "Identifier" && node.property.name === "__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED") {
+      matches.push(createPatternMatch(node, "__SECRET_INTERNALS", code));
+    }
+  });
+  return matches;
+}
+function findJsxRuntimeImports(ast, code) {
+  const matches = [];
+  walk(ast, (node) => {
+    if (node && node.type === "ImportDeclaration") {
+      const source = node.source.value;
+      if (source === "react/jsx-runtime" || source === "react/jsx-dev-runtime") {
+        matches.push(createPatternMatch(node, "jsxRuntimeImport", code));
+      }
+    }
+  });
+  return matches;
+}
+function findStringRefs(ast, code) {
+  const matches = [];
+  walk(ast, (node) => {
+    if (node && node.type === "MemberExpression" && node.object.type === "ThisExpression" && node.property.type === "Identifier" && node.property.name === "refs") {
+      matches.push(createPatternMatch(node, "stringRefs", code));
+    }
+  });
+  return matches;
+}
+function findFindDOMNode(ast, code) {
+  const matches = [];
+  walk(ast, (node) => {
+    if (node && node.type === "CallExpression") {
+      if (node.callee.type === "MemberExpression" && node.callee.object.type === "Identifier" && (node.callee.object.name === "ReactDOM" || node.callee.object.name === "React") && node.callee.property.type === "Identifier" && node.callee.property.name === "findDOMNode") {
+        matches.push(createPatternMatch(node, "findDOMNode", code));
+      } else if (node.callee.type === "Identifier" && node.callee.name === "findDOMNode") {
+        matches.push(createPatternMatch(node, "findDOMNode", code));
+      }
+    }
+  });
+  return matches;
+}
+function findReactDOMRender(ast, code) {
+  const matches = [];
+  walk(ast, (node) => {
+    if (node && node.type === "CallExpression") {
+      if (node.callee.type === "MemberExpression" && node.callee.object.type === "Identifier" && node.callee.object.name === "ReactDOM" && node.callee.property.type === "Identifier" && node.callee.property.name === "render" && (node.arguments.length === 2 || node.arguments.length === 3)) {
+        matches.push(createPatternMatch(node, "ReactDOM.render", code));
+      } else if (node.callee.type === "Identifier" && node.callee.name === "render" && (node.arguments.length === 2 || node.arguments.length === 3)) {
+        matches.push(createPatternMatch(node, "ReactDOM.render", code));
+      }
+    }
+  });
+  return matches;
+}
+function findReactDOMUnmountComponentAtNode(ast, code) {
+  const matches = [];
+  walk(ast, (node) => {
+    if (node && node.type === "CallExpression") {
+      if (node.callee.type === "MemberExpression" && node.callee.object.type === "Identifier" && node.callee.object.name === "ReactDOM" && node.callee.property.type === "Identifier" && node.callee.property.name === "unmountComponentAtNode" && node.arguments.length === 1) {
+        matches.push(createPatternMatch(node, "ReactDOM.unmountComponentAtNode", code));
+      } else if (node.callee.type === "Identifier" && node.callee.name === "unmountComponentAtNode" && node.arguments.length === 1) {
+        matches.push(createPatternMatch(node, "ReactDOM.unmountComponentAtNode", code));
+      }
+    }
+  });
+  return matches;
+}
+function findCreateFactory(ast, code) {
+  const matches = [];
+  walk(ast, (node) => {
+    if (node && node.type === "CallExpression") {
+      if (node.callee.type === "MemberExpression" && node.callee.object.type === "Identifier" && node.callee.object.name === "React" && node.callee.property.type === "Identifier" && node.callee.property.name === "createFactory" && node.arguments.length === 1) {
+        matches.push(createPatternMatch(node, "createFactory", code));
+      } else if (node.callee.type === "Identifier" && node.callee.name === "createFactory" && node.arguments.length === 1) {
+        matches.push(createPatternMatch(node, "createFactory", code));
+      }
+    }
+  });
+  return matches;
+}
+function createPatternMatch(node, pattern, code) {
+  return {
+    pattern,
+    line: node.loc.start.line,
+    column: node.loc.start.column,
+    matched: code.slice(node.range[0], node.range[1]),
+    context: getSurroundingCode(code, node)
+  };
+}
+
+export { createPatternMatch, findContextTypes, findCreateFactory, findDefaultProps, findFindDOMNode, findGetChildContext, findJsxRuntimeImports, findPatternMatches, findPropTypes, findReactDOMRender, findReactDOMUnmountComponentAtNode, findSecretInternals, findStringRefs };

package/dist/reporters/console.js

@@ -0,0 +1,132 @@
+import { output } from '../utils/output.js';
+
+function consoleReporter(results) {
+  if (results.summary.totalIssues === 0) {
+    output.success({
+      title: "No React 19 breaking changes detected!",
+      body: [
+        `Plugin: ${results.plugin.name} version: ${results.plugin.version}`,
+        "Good news! Your plugin appears to be compatible with React 19.",
+        "",
+        "Even so we recommend testing your plugin using the following steps:",
+        ...output.bulletList([
+          `1. Use the React 19 Grafana docker image: ${output.formatCode("grafana/grafana-enterprise-dev:10.0.0-255911")}`,
+          "2. Start the server and manually test your plugin."
+        ]),
+        "",
+        `For more information, please refer to the React 19 blog post: ${output.formatUrl("https://react.dev/blog/2024/04/25/react-19-upgrade-guide")}.`,
+        "",
+        "Thank you for using Grafana!"
+      ]
+    });
+    return;
+  }
+  output.error({
+    title: "React 19 breaking changes detected!",
+    body: [
+      `Plugin: ${results.plugin.name} version: ${results.plugin.version}`,
+      "Your plugin appears to be incompatible with React 19. Note that this tool can give false positives, please review the issues carefully."
+    ]
+  });
+  const criticalSourceIssues = results.issues.critical.filter((issue) => issue.location.type === "source");
+  const warningSourceIssues = results.issues.warnings.filter((issue) => issue.location.type === "source");
+  const sourceCodeIssues = [...criticalSourceIssues, ...warningSourceIssues];
+  if (sourceCodeIssues.length > 0) {
+    output.error({
+      title: "Source code issues",
+      body: ["The following source code issues were found. Please refer to the suggestions to help resolve them."],
+      withPrefix: false
+    });
+    const groupedByPattern = groupByPattern(sourceCodeIssues);
+    for (const [pattern, issues] of Object.entries(groupedByPattern)) {
+      const uniqueFileLocations = new Set(issues.map((issue) => issue.location.file));
+      const fileLocationList = output.bulletList(Array.from(uniqueFileLocations));
+      const patternInfo = issues[0];
+      output.error({
+        title: `${pattern} (${patternInfo.problem})`,
+        body: [
+          `fix: ${patternInfo.fix.description}.`,
+          ...patternInfo.fix.before ? [`before: ${output.formatCode(patternInfo.fix.before)}`] : [],
+          ...patternInfo.fix.after ? [`after: ${output.formatCode(patternInfo.fix.after)}`] : [],
+          `link: ${output.formatUrl(patternInfo.link)}`,
+          "",
+          "found in:",
+          ...fileLocationList
+        ],
+        withPrefix: false
+      });
+      output.addHorizontalLine("red");
+    }
+  }
+  const criticalDependencyIssues = results.issues.critical.filter((issue) => issue.location.type === "dependency");
+  const warningDependencyIssues = results.issues.warnings.filter((issue) => issue.location.type === "dependency");
+  const dependencyIssues = [...criticalDependencyIssues, ...warningDependencyIssues];
+  if (dependencyIssues.length > 0) {
+    output.error({
+      title: "Dependency issues",
+      body: [
+        "The following issues were found in bundled dependencies.",
+        "We recommend checking for dependency updates which are compatible with React 19."
+      ],
+      withPrefix: false
+    });
+    const groupedByPackage = groupByPackage(dependencyIssues);
+    for (const [pkgName, issues] of Object.entries(groupedByPackage)) {
+      const uniquePatterns = new Set(
+        issues.map(
+          (issue) => `${issue.problem}. ${issue.fix.description}. Further information: ${output.formatUrl(issue.link)}`
+        )
+      );
+      const uniqueFileLocations = new Set(issues.map((issue) => issue.location.file));
+      const fileLocationList = output.bulletList(Array.from(uniqueFileLocations));
+      const patternInfoList = output.bulletList(Array.from(uniquePatterns));
+      output.error({
+        title: `\u{1F4E6} ${pkgName}`,
+        body: ["issues found:", ...patternInfoList, "", "found in:", ...fileLocationList],
+        withPrefix: false
+      });
+      output.addHorizontalLine("red");
+    }
+  }
+  output.error({
+    title: "Next steps",
+    body: [
+      "We recommend testing your plugin using the following steps to ensure it is compatible with React 19:",
+      ...output.bulletList([
+        `1. Use the React 19 Grafana docker image: ${output.formatCode("grafana/grafana-enterprise-dev:10.0.0-255911")}`,
+        "2. Start the server and manually test your plugin."
+      ]),
+      "",
+      `For more information, please refer to the React 19 blog post: ${output.formatUrl("https://react.dev/blog/2024/04/25/react-19-upgrade-guide")}.`,
+      "",
+      "Thank you for using Grafana!"
+    ],
+    withPrefix: false
+  });
+}
+function groupByPattern(issues) {
+  return issues.reduce(
+    (groups, issue) => {
+      if (!groups[issue.pattern]) {
+        groups[issue.pattern] = [];
+      }
+      groups[issue.pattern].push(issue);
+      return groups;
+    },
+    {}
+  );
+}
+function groupByPackage(issues) {
+  return issues.reduce(
+    (groups, issue) => {
+      if (!groups[issue.packageName]) {
+        groups[issue.packageName] = [];
+      }
+      groups[issue.packageName].push(issue);
+      return groups;
+    },
+    {}
+  );
+}
+
+export { consoleReporter };

package/dist/reporters/json.js

@@ -0,0 +1,11 @@
+function jsonReporter(results) {
+  const {
+    // Remove the duplicated dependencies issues
+    issues: { dependencies, ...issues },
+    ...rest
+  } = results;
+  const flattenedIssues = [...issues.critical, ...issues.warnings];
+  console.log(JSON.stringify({ ...rest, issues: flattenedIssues }, null, 2));
+}
+
+export { jsonReporter };

package/dist/results.js

@@ -0,0 +1,128 @@
+import { getPattern } from './patterns/definitions.js';
+import { getPluginJson } from './utils/plugin.js';
+import path from 'node:path';
+
+function generateAnalysisResults(matches, pluginRoot, depContext) {
+  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 !== void 0)
+  );
+  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) {
+  const filtered = matches.filter((match) => {
+    if (match.type === "source" && (match.confidence === "none" || match.confidence === "unknown")) {
+      return false;
+    }
+    if (match.type === "source") {
+      const pattern = getPattern(match.pattern);
+      if (pattern?.functionComponentOnly && match.componentType !== "function") {
+        return false;
+      }
+    }
+    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) {
+  const pattern = getPattern(match.pattern);
+  if (!pattern) {
+    throw new Error(`Pattern not found: ${match.pattern}`);
+  }
+  const cleanFilePath = cleanSourceFilePath(match.sourceFile);
+  const result = {
+    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 || ""
+  };
+  if (match.type === "dependency") {
+    result.packageName = match.packageName;
+    result.rootDependency = match.rootDependency;
+  }
+  return result;
+}
+function buildDependencyIssues(dependencyMatches, depContext) {
+  const byPackage = /* @__PURE__ */ new Map();
+  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);
+    }
+  }
+  const issues = [];
+  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) {
+  let cleanPath = filePath;
+  if (filePath.includes("node_modules")) {
+    cleanPath = filePath.replace(/webpack:\/\/[^/]+\/node_modules\//, "./node_modules/");
+  } else {
+    cleanPath = filePath.replace(/webpack:\/\/[^/]+/, "./src/");
+  }
+  return cleanPath;
+}
+
+export { generateAnalysisResults };

package/dist/source-extractor.js

@@ -0,0 +1,80 @@
+import { SourceMapConsumer } from 'source-map';
+import { readFile } from 'node:fs/promises';
+
+async function extractSourcesFromMap(sourcemapFilePath) {
+  const mapContent = await readFile(sourcemapFilePath, "utf8");
+  const sourceMap = JSON.parse(mapContent);
+  const consumer = await new SourceMapConsumer(sourceMap);
+  const sourceFiles = [];
+  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;
+}
+async function extractAllSources(sourcemapFilePaths) {
+  const allSources = [];
+  const seenPaths = /* @__PURE__ */ new Set();
+  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) {
+  if (sourcePath.includes("node_modules")) {
+    const packageName = getPackageName(sourcePath);
+    return { type: "dependency", packageName };
+  }
+  return { type: "source" };
+}
+function getPackageName(sourcePath) {
+  const pnpmMatch = sourcePath.match(/\.pnpm\/[^/]+\/node_modules\/((?:@[^/]+\/)?[^/]+)/);
+  if (pnpmMatch) {
+    return pnpmMatch[1];
+  }
+  const match = sourcePath.match(/node_modules\/(@[^/]+\/[^/]+|[^/]+)/);
+  return match ? match[1] : void 0;
+}
+function shouldSkipSource(sourcePath) {
+  if (sourcePath.includes("webpack/bootstrap") || sourcePath.includes("webpack/runtime")) {
+    return true;
+  }
+  if (sourcePath.match(/^webpack:\/\/[^/]+\/?$/)) {
+    return true;
+  }
+  if (sourcePath.includes("/external%20amd")) {
+    return true;
+  }
+  if (sourcePath.includes("node_modules/grafana-public-path.js")) {
+    return true;
+  }
+  return false;
+}
+
+export { extractAllSources, extractSourcesFromMap };

package/dist/utils/analyzer.js

@@ -0,0 +1,88 @@
+import { walk } from './ast.js';
+
+function analyzeConfidence(ast) {
+  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";
+}
+function analyzeComponentType(ast) {
+  if (hasReactComponent(ast)) {
+    return "class";
+  }
+  if (hasFunctionComponentPattern(ast)) {
+    return "function";
+  }
+  return "unknown";
+}
+function hasReactComponent(ast) {
+  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;
+}
+function hasFunctionComponentPattern(ast) {
+  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) {
+  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) {
+  let found = false;
+  walk(ast, (node) => {
+    if (node.type === "JSXElement" || node.type === "JSXFragment") {
+      found = true;
+    }
+  });
+  return found;
+}
+function hasHooks(ast) {
+  let found = false;
+  walk(ast, (node) => {
+    if (node.type === "CallExpression" && node.callee.type === "Identifier" && node.callee.name.startsWith("use")) {
+      found = true;
+    }
+  });
+  return found;
+}
+
+export { analyzeComponentType, analyzeConfidence, hasFunctionComponentPattern, hasReactComponent };

package/dist/utils/ast.js

@@ -0,0 +1,20 @@
+function walk(node, callback) {
+  callback(node);
+  for (const key in node) {
+    if (node[key] && typeof node[key] === "object") {
+      if (Array.isArray(node[key])) {
+        node[key].forEach((child) => walk(child, callback));
+      } else if (node[key].type) {
+        walk(node[key], callback);
+      }
+    }
+  }
+}
+function getSurroundingCode(code, node) {
+  const lines = code.split("\n");
+  const startLine = Math.max(0, node.loc.start.line - 3);
+  const endLine = Math.min(lines.length, node.loc.end.line + 2);
+  return lines.slice(startLine, endLine).join("\n");
+}
+
+export { getSurroundingCode, walk };