@grafana/react-detect 0.1.0

package/src/patterns/matcher.test.ts

@@ -0,0 +1,221 @@
+import { parseFile } from '../parser.js';
+import {
+  findDefaultProps,
+  findPropTypes,
+  findContextTypes,
+  findGetChildContext,
+  findSecretInternals,
+  findStringRefs,
+  findFindDOMNode,
+  findReactDOMRender,
+  findReactDOMUnmountComponentAtNode,
+  findCreateFactory,
+} from './matcher.js';
+
+describe('matcher', () => {
+  describe('findDefaultProps', () => {
+    it('should find defaultProps assignments in source code', () => {
+      const code = `
+      function MyComponent() {}
+      MyComponent.defaultProps = { foo: 'bar' };
+    `;
+      const ast = parseFile(code, 'module.js');
+      const matches = findDefaultProps(ast, code);
+
+      expect(matches).toHaveLength(1);
+      expect(matches[0].pattern).toBe('defaultProps');
+      expect(matches[0].line).toBe(3);
+    });
+  });
+
+  describe('findPropTypes', () => {
+    it('should find propTypes assignments in source code', () => {
+      const code = `
+    function MyComponent() {}
+    MyComponent.propTypes = { name: PropTypes.string };
+  `;
+      const ast = parseFile(code, 'test.js');
+      const matches = findPropTypes(ast, code);
+
+      expect(matches).toHaveLength(1);
+      expect(matches[0].pattern).toBe('propTypes');
+      expect(matches[0].matched).toContain('propTypes');
+    });
+  });
+
+  describe('findContextTypes', () => {
+    it('should find contextTypes assignments in source code', () => {
+      const code = `
+    class MyComponent extends React.Component {}
+    MyComponent.contextTypes = { theme: PropTypes.object };
+  `;
+      const ast = parseFile(code, 'test.js');
+      const matches = findContextTypes(ast, code);
+
+      expect(matches).toHaveLength(1);
+      expect(matches[0].pattern).toBe('contextTypes');
+      expect(matches[0].matched).toContain('contextTypes');
+    });
+  });
+
+  describe('findGetChildContext', () => {
+    it('should find getChildContext assignments in source code', () => {
+      const code = `
+    class MyComponent extends React.Component {
+      getChildContext() { return { theme: 'dark' }; }
+    }
+    MyComponent.getChildContext = function() {};
+  `;
+      const ast = parseFile(code, 'test.js');
+      const matches = findGetChildContext(ast, code);
+
+      expect(matches).toHaveLength(1);
+      expect(matches[0].pattern).toBe('getChildContext');
+      expect(matches[0].matched).toContain('getChildContext');
+    });
+  });
+
+  describe('findSecretInternals', () => {
+    it('should find secretInternals assignments in source code', () => {
+      const code = `
+    const internals = React.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;
+  `;
+      const ast = parseFile(code, 'test.js');
+      const matches = findSecretInternals(ast, code);
+
+      expect(matches).toHaveLength(1);
+      expect(matches[0].pattern).toBe('__SECRET_INTERNALS');
+      expect(matches[0].matched).toContain('__SECRET_INTERNALS');
+    });
+  });
+
+  describe('findStringRefs', () => {
+    it('should find stringRefs assignments in source code', () => {
+      const code = `
+    class MyComponent extends React.Component {
+      componentDidMount() {
+        this.refs.input.focus();
+      }
+      render() {
+        return <input ref="input" />;
+      }
+    }
+  `;
+      const ast = parseFile(code, 'test.js');
+      const matches = findStringRefs(ast, code);
+
+      expect(matches).toHaveLength(1);
+      expect(matches[0].pattern).toBe('stringRefs');
+      expect(matches[0].matched).toContain('this.refs');
+    });
+
+    it('should find bracket notation refs access', () => {
+      const code = `
+      class MyComponent extends React.Component {
+        componentDidMount() {
+          this.refs['input'].focus();
+        }
+        render() {
+          return <input ref="input" />;
+        }
+      }
+    `;
+      const ast = parseFile(code, 'test.js');
+      const matches = findStringRefs(ast, code);
+
+      expect(matches).toHaveLength(1);
+      expect(matches[0].pattern).toBe('stringRefs');
+      expect(matches[0].matched).toContain('this.refs');
+    });
+  });
+
+  describe('findFindDOMNode', () => {
+    it('should find React.findDOMNode calls', () => {
+      const code = `
+      const node = React.findDOMNode(component);
+    `;
+      const ast = parseFile(code, 'test.js');
+      const matches = findFindDOMNode(ast, code);
+
+      expect(matches).toHaveLength(1);
+      expect(matches[0].pattern).toBe('findDOMNode');
+      expect(matches[0].matched).toContain('React.findDOMNode');
+    });
+
+    it('should find ReactDOM.findDOMNode calls', () => {
+      const code = `
+      const node = ReactDOM.findDOMNode(this);
+    `;
+      const ast = parseFile(code, 'test.js');
+      const matches = findFindDOMNode(ast, code);
+
+      expect(matches).toHaveLength(1);
+      expect(matches[0].pattern).toBe('findDOMNode');
+      expect(matches[0].matched).toContain('ReactDOM.findDOMNode');
+    });
+
+    it('should find direct findDOMNode calls', () => {
+      const code = `
+      import { findDOMNode } from 'react-dom';
+      const node = findDOMNode(component);
+    `;
+      const ast = parseFile(code, 'test.js');
+      const matches = findFindDOMNode(ast, code);
+
+      expect(matches).toHaveLength(1);
+      expect(matches[0].pattern).toBe('findDOMNode');
+    });
+  });
+
+  describe('findReactDOMRender', () => {
+    it('should find ReactDOM.render with 2 arguments', () => {
+      const code = `
+      ReactDOM.render(<App />, document.getElementById('root'));
+    `;
+      const ast = parseFile(code, 'test.js');
+      const matches = findReactDOMRender(ast, code);
+
+      expect(matches).toHaveLength(1);
+      expect(matches[0].pattern).toBe('ReactDOM.render');
+      expect(matches[0].matched).toContain('render');
+    });
+
+    it('should find ReactDOM.render with 3 arguments (callback)', () => {
+      const code = `
+      ReactDOM.render(<App />, container, () => console.log('done'));
+    `;
+      const ast = parseFile(code, 'test.js');
+      const matches = findReactDOMRender(ast, code);
+
+      expect(matches).toHaveLength(1);
+      expect(matches[0].pattern).toBe('ReactDOM.render');
+    });
+  });
+
+  describe('findReactDOMUnmountComponentAtNode', () => {
+    it('should find ReactDOM.unmountComponentAtNode calls', () => {
+      const code = `
+      ReactDOM.unmountComponentAtNode(container);
+    `;
+      const ast = parseFile(code, 'test.js');
+      const matches = findReactDOMUnmountComponentAtNode(ast, code);
+      expect(matches).toHaveLength(1);
+      expect(matches[0].pattern).toBe('ReactDOM.unmountComponentAtNode');
+      expect(matches[0].matched).toContain('ReactDOM.unmountComponentAtNode');
+    });
+  });
+
+  describe('findCreateFactory', () => {
+    it('should find React.createFactory', () => {
+      const code = `
+      const Button = React.createFactory('button');
+    `;
+      const ast = parseFile(code, 'test.js');
+      const matches = findCreateFactory(ast, code);
+
+      expect(matches).toHaveLength(1);
+      expect(matches[0].pattern).toBe('createFactory');
+      expect(matches[0].matched).toContain('createFactory');
+    });
+  });
+});

package/src/patterns/matcher.ts

@@ -0,0 +1,268 @@
+import { TSESTree } from '@typescript-eslint/typescript-estree';
+import { PatternMatch } from '../types/processors.js';
+import { getSurroundingCode, walk } from '../utils/ast.js';
+
+export function findPatternMatches(ast: TSESTree.Program, code: string): PatternMatch[] {
+  const matches: PatternMatch[] = [];
+
+  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;
+}
+
+export function findDefaultProps(ast: TSESTree.Program, code: string): PatternMatch[] {
+  const matches: PatternMatch[] = [];
+
+  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;
+}
+
+export function findPropTypes(ast: TSESTree.Program, code: string): PatternMatch[] {
+  const matches: PatternMatch[] = [];
+
+  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;
+}
+
+export function findContextTypes(ast: TSESTree.Program, code: string): PatternMatch[] {
+  const matches: PatternMatch[] = [];
+
+  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;
+}
+
+export function findGetChildContext(ast: TSESTree.Program, code: string): PatternMatch[] {
+  const matches: PatternMatch[] = [];
+
+  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;
+}
+
+export function findSecretInternals(ast: TSESTree.Program, code: string): PatternMatch[] {
+  const matches: PatternMatch[] = [];
+
+  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;
+}
+
+export function findJsxRuntimeImports(ast: TSESTree.Program, code: string): PatternMatch[] {
+  const matches: PatternMatch[] = [];
+
+  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;
+}
+
+export function findStringRefs(ast: TSESTree.Program, code: string): PatternMatch[] {
+  const matches: PatternMatch[] = [];
+
+  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;
+}
+
+export function findFindDOMNode(ast: TSESTree.Program, code: string): PatternMatch[] {
+  const matches: PatternMatch[] = [];
+
+  walk(ast, (node) => {
+    if (node && node.type === 'CallExpression') {
+      // React.findDOMNode() or ReactDOM.findDOMNode()
+      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));
+      }
+      // findDOMNode() (direct import)
+      else if (node.callee.type === 'Identifier' && node.callee.name === 'findDOMNode') {
+        matches.push(createPatternMatch(node, 'findDOMNode', code));
+      }
+    }
+  });
+
+  return matches;
+}
+
+export function findReactDOMRender(ast: TSESTree.Program, code: string): PatternMatch[] {
+  const matches: PatternMatch[] = [];
+
+  walk(ast, (node) => {
+    if (node && node.type === 'CallExpression') {
+      // ReactDOM.render()
+      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));
+      }
+      // render() (direct import from 'react-dom')
+      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;
+}
+
+export function findReactDOMUnmountComponentAtNode(ast: TSESTree.Program, code: string): PatternMatch[] {
+  const matches: PatternMatch[] = [];
+
+  walk(ast, (node) => {
+    if (node && node.type === 'CallExpression') {
+      // ReactDOM.unmountComponentAtNode()
+      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));
+      }
+      // unmountComponentAtNode() (direct import)
+      else if (
+        node.callee.type === 'Identifier' &&
+        node.callee.name === 'unmountComponentAtNode' &&
+        node.arguments.length === 1
+      ) {
+        matches.push(createPatternMatch(node, 'ReactDOM.unmountComponentAtNode', code));
+      }
+    }
+  });
+
+  return matches;
+}
+
+export function findCreateFactory(ast: TSESTree.Program, code: string): PatternMatch[] {
+  const matches: PatternMatch[] = [];
+
+  walk(ast, (node) => {
+    if (node && node.type === 'CallExpression') {
+      // React.createFactory()
+      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));
+      }
+      // createFactory() (direct import)
+      else if (
+        node.callee.type === 'Identifier' &&
+        node.callee.name === 'createFactory' &&
+        node.arguments.length === 1
+      ) {
+        matches.push(createPatternMatch(node, 'createFactory', code));
+      }
+    }
+  });
+
+  return matches;
+}
+
+export function createPatternMatch(node: any, pattern: string, code: string): PatternMatch {
+  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),
+  };
+}

package/src/reporters/console.ts

@@ -0,0 +1,139 @@
+import { AnalysisResult, PluginAnalysisResults } from '../types/reporters.js';
+import { output } from '../utils/output.js';
+
+export function consoleReporter(results: PluginAnalysisResults) {
+  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)) {
+      // dedupe file locations
+      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: `📦 ${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: AnalysisResult[]): Record<string, AnalysisResult[]> {
+  return issues.reduce(
+    (groups, issue) => {
+      if (!groups[issue.pattern]) {
+        groups[issue.pattern] = [];
+      }
+      groups[issue.pattern].push(issue);
+      return groups;
+    },
+    {} as Record<string, AnalysisResult[]>
+  );
+}
+
+function groupByPackage(issues: AnalysisResult[]): Record<string, AnalysisResult[]> {
+  return issues.reduce(
+    (groups, issue) => {
+      if (!groups[issue.packageName!]) {
+        groups[issue.packageName!] = [];
+      }
+      groups[issue.packageName!].push(issue);
+      return groups;
+    },
+    {} as Record<string, AnalysisResult[]>
+  );
+}

package/src/reporters/json.ts

@@ -0,0 +1,13 @@
+import { PluginAnalysisResults } from '../types/reporters.js';
+
+export function jsonReporter(results: PluginAnalysisResults) {
+  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));
+}