@grafana/react-detect 0.1.0 → 0.2.0-canary.2358.20374737796.0

package/dist/patterns/definitions.js

@@ -4,25 +4,25 @@ const PATTERN_DEFINITIONS = {
     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"
+      description: "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",
+    description: "Bundling react/jsx-runtime will break with React 19 due to `__SECRET_INTERNALS...` renamed to `_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE`",
     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"
+    link: "https://react.dev/blog/2024/04/25/react-19-upgrade-guide#libraries-depending-on-react-internals-may-block-upgrades"
   },
   defaultProps: {
     severity: "removed",
     impactLevel: "critical",
-    description: "Default props removed in favour of function components",
+    description: "Default props removed from function components",
     fix: {
-      description: "Use ES6 default parameters",
+      description: "Use ES6 default parameters or pass default values to dependencies to keep consistent behavior",
       before: 'MyComponent.defaultProps = { value: "test" }',
       after: 'function MyComponent({ value = "test" }) { ... }'
     },
@@ -62,7 +62,7 @@ const PATTERN_DEFINITIONS = {
     impactLevel: "critical",
     description: "String refs removed in React 19",
     fix: {
-      description: "Run the codemod to migrate to ref callbacks.",
+      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"
@@ -70,7 +70,7 @@ const PATTERN_DEFINITIONS = {
   findDOMNode: {
     severity: "removed",
     impactLevel: "critical",
-    description: "findDOMNode removed from React and ReactDOM in React 19",
+    description: "findDOMNode removed from ReactDOM in React 19",
     fix: {
       description: "Replace ReactDOM.findDOMNode with DOM refs",
       before: "const node = findDOMNode(this);",
@@ -94,7 +94,7 @@ const PATTERN_DEFINITIONS = {
     impactLevel: "critical",
     description: "ReactDOM.render removed in React 19 (use createRoot)",
     fix: {
-      description: "Use createRoot instead.",
+      description: "Use createRoot instead",
       before: 'ReactDOM.render(<App />, document.getElementById("root"));',
       after: 'const root = createRoot(document.getElementById("root")); root.render(<App />);'
     },
@@ -105,7 +105,7 @@ const PATTERN_DEFINITIONS = {
     impactLevel: "critical",
     description: "ReactDOM.unmountComponentAtNode removed in React 19",
     fix: {
-      description: "Use createRoot instead.",
+      description: "Use createRoot instead",
       before: "ReactDOM.unmountComponentAtNode(container);",
       after: "const root = createRoot(container); root.unmount();"
     },

package/dist/reporters/console.js

@@ -1,28 +1,33 @@
+import { isExternal } from '../utils/dependencies.js';
 import { output } from '../utils/output.js';
 
+const summaryMsg = [
+  `We strongly recommend testing your plugin using the React 19 Grafana docker image: ${output.formatCode("grafana/grafana:12.4.0-react19")}`,
+  ...output.bulletList([
+    `Start the server with ${output.formatCode("GRAFANA_VERSION=12.4.0-react19 GRAFANA_IMAGE=grafana docker compose up --build")} flag and manually test your plugin.`,
+    "Run any e2e tests to try and catch any potential issues.",
+    "Manually test your plugin in the browser. Look for any console warnings or errors related to React."
+  ]),
+  "",
+  "For more information, please refer to:",
+  `React 19 blog post: ${output.formatUrl("https://react.dev/blog/2024/04/25/react-19-upgrade-guide")}.`,
+  `Grafana developer documentation: ${output.formatUrl("https://grafana.com/developers/plugin-tools/set-up/set-up-docker")}`
+];
 function consoleReporter(results) {
   if (results.summary.totalIssues === 0) {
     output.success({
-      title: "No React 19 breaking changes detected!",
+      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!"
+        ...summaryMsg
       ]
     });
     return;
   }
   output.error({
-    title: "React 19 breaking changes detected!",
+    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."
@@ -66,7 +71,7 @@ function consoleReporter(results) {
       title: "Dependency issues",
       body: [
         "The following issues were found in bundled dependencies.",
-        "We recommend checking for dependency updates which are compatible with React 19."
+        "Please check for dependency updates that are compatible with React 19."
       ],
       withPrefix: false
     });
@@ -74,15 +79,26 @@ function consoleReporter(results) {
     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)}`
+          (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));
+      const rootDependencies = issues.filter(
+        (issue) => issue.rootDependency !== void 0 && issue.rootDependency !== pkgName && !isExternal(issue.rootDependency)
+      ).map((issue) => issue.rootDependency);
+      const uniqueDependencies = new Set(rootDependencies.filter((dep) => dep !== void 0));
+      const body = ["issues found:", ...patternInfoList, ""];
+      if (uniqueDependencies.size) {
+        body.push(`Bundled by dependenc${uniqueDependencies.size > 1 ? "ies" : "y"}:`);
+        body.push(...output.bulletList(Array.from(uniqueDependencies)));
+      }
+      body.push("found in:", ...fileLocationList);
       output.error({
         title: `\u{1F4E6} ${pkgName}`,
-        body: ["issues found:", ...patternInfoList, "", "found in:", ...fileLocationList],
+        body,
         withPrefix: false
       });
       output.addHorizontalLine("red");
@@ -90,17 +106,7 @@ function consoleReporter(results) {
   }
   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!"
-    ],
+    body: summaryMsg,
     withPrefix: false
   });
 }

package/dist/results.js

@@ -1,5 +1,5 @@
 import { getPattern } from './patterns/definitions.js';
-import { getPluginJson } from './utils/plugin.js';
+import { getPluginJson, hasExternalisedJsxRuntime } from './utils/plugin.js';
 import path from 'node:path';
 
 function generateAnalysisResults(matches, pluginRoot, depContext) {
@@ -46,6 +46,7 @@ function generateAnalysisResults(matches, pluginRoot, depContext) {
   };
 }
 function filterMatches(matches) {
+  const externalisedJsxRuntime = hasExternalisedJsxRuntime();
   const filtered = matches.filter((match) => {
     if (match.type === "source" && (match.confidence === "none" || match.confidence === "unknown")) {
       return false;
@@ -59,6 +60,9 @@ function filterMatches(matches) {
     if (match.type === "dependency" && match.pattern === "__SECRET_INTERNALS" && match.packageName === "react" && (match.sourceFile.includes("jsx-runtime") || match.sourceFile.includes("jsx-dev-runtime"))) {
       return false;
     }
+    if (match.type === "dependency" && (match.pattern === "jsxRuntimeImport" || match.pattern === "__SECRET_INTERNALS")) {
+      return !externalisedJsxRuntime;
+    }
     return true;
   });
   return filtered;

package/dist/utils/dependencies.js

@@ -93,5 +93,36 @@ class DependencyContext {
     return new Map([...this.dependencies, ...this.devDependencies]);
   }
 }
+const GRAFANA_EXTERNALS = [
+  "@emotion/css",
+  "@emotion/react",
+  "@grafana/data",
+  "@grafana/runtime",
+  "@grafana/slate-react",
+  "@grafana/ui",
+  "angular",
+  "d3",
+  "emotion",
+  "i18next",
+  "jquery",
+  "lodash",
+  "moment",
+  "prismjs",
+  "react-dom",
+  "react-redux",
+  "react-router-dom",
+  "react-router",
+  "react",
+  "redux",
+  "rxjs",
+  "slate-plain-serializer",
+  "slate"
+];
+function isExternal(packageName) {
+  if (GRAFANA_EXTERNALS.includes(packageName)) {
+    return true;
+  }
+  return GRAFANA_EXTERNALS.some((external) => packageName.startsWith(external + "/"));
+}
 
-export { DependencyContext };
+export { DependencyContext, GRAFANA_EXTERNALS, isExternal };

package/dist/utils/plugin.js

@@ -1,5 +1,7 @@
 import path from 'node:path';
 import fs from 'node:fs';
+import { parseFile } from '../parser.js';
+import { walk } from './ast.js';
 
 let cachedPluginJson = null;
 function getPluginJson(dir) {
@@ -32,5 +34,25 @@ function readJsonFile(filename) {
     throw new Error(`Failed to load json file ${filename}: ${error instanceof Error ? error.message : String(error)}`);
   }
 }
+function hasExternalisedJsxRuntime() {
+  const webpackConfigPathsToCheck = ["webpack.config.ts", ".config/webpack/webpack.config.ts"];
+  let found = false;
+  for (const webpackConfigPath of webpackConfigPathsToCheck) {
+    if (isFile(path.join(process.cwd(), webpackConfigPath))) {
+      const webpackConfig = fs.readFileSync(path.join(process.cwd(), webpackConfigPath)).toString();
+      const webpackConfigAst = parseFile(webpackConfig, webpackConfigPath);
+      walk(webpackConfigAst, (node) => {
+        if (node.type === "Property" && node.key.type === "Identifier" && node.key.name === "externals" && node.value.type === "ArrayExpression") {
+          for (const element of node.value.elements) {
+            if (element && element.type === "Literal" && typeof element.value === "string" && element.value.includes("react/jsx-runtime")) {
+              found = true;
+            }
+          }
+        }
+      });
+    }
+  }
+  return found;
+}
 
-export { getPluginJson, readJsonFile };
+export { getPluginJson, hasExternalisedJsxRuntime, readJsonFile };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@grafana/react-detect",
   "description": "Run various checks to detect if a Grafana plugin is compatible with React.",
-  "version": "0.1.0",
+  "version": "0.2.0-canary.2358.20374737796.0",
   "repository": {
     "directory": "packages/react-detect",
     "url": "https://github.com/grafana/plugin-tools"
@@ -12,7 +12,8 @@
   "type": "module",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/",
-    "access": "public"
+    "access": "public",
+    "provenance": true
   },
   "scripts": {
     "clean": "rm -rf ./dist",
@@ -38,5 +39,6 @@
   },
   "engines": {
     "node": ">=20"
-  }
+  },
+  "gitHead": "834f9e9577721255794b2257955d96d0faf967ae"
 }

package/src/patterns/definitions.ts

@@ -7,7 +7,7 @@ export const PATTERN_DEFINITIONS: Record<string, PatternDefinition> = {
     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',
+        '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',
   },
@@ -15,19 +15,19 @@ export const PATTERN_DEFINITIONS: Record<string, PatternDefinition> = {
     severity: 'renamed',
     impactLevel: 'critical',
     description:
-      'Dependency bundles react/jsx-runtime which will break with React 19 due to `__SECRET_INTERNALS` being renamed',
+      'Bundling react/jsx-runtime will break with React 19 due to `__SECRET_INTERNALS...` renamed to `_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE`',
     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',
+    link: 'https://react.dev/blog/2024/04/25/react-19-upgrade-guide#libraries-depending-on-react-internals-may-block-upgrades',
   },
   defaultProps: {
     severity: 'removed',
     impactLevel: 'critical',
-    description: 'Default props removed in favour of function components',
+    description: 'Default props removed from function components',
     fix: {
-      description: 'Use ES6 default parameters',
+      description: 'Use ES6 default parameters or pass default values to dependencies to keep consistent behavior',
       before: 'MyComponent.defaultProps = { value: "test" }',
       after: 'function MyComponent({ value = "test" }) { ... }',
     },
@@ -67,7 +67,7 @@ export const PATTERN_DEFINITIONS: Record<string, PatternDefinition> = {
     impactLevel: 'critical',
     description: 'String refs removed in React 19',
     fix: {
-      description: 'Run the codemod to migrate to ref callbacks.',
+      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',
@@ -75,7 +75,7 @@ export const PATTERN_DEFINITIONS: Record<string, PatternDefinition> = {
   findDOMNode: {
     severity: 'removed',
     impactLevel: 'critical',
-    description: 'findDOMNode removed from React and ReactDOM in React 19',
+    description: 'findDOMNode removed from ReactDOM in React 19',
     fix: {
       description: 'Replace ReactDOM.findDOMNode with DOM refs',
       before: 'const node = findDOMNode(this);',
@@ -100,7 +100,7 @@ export const PATTERN_DEFINITIONS: Record<string, PatternDefinition> = {
     impactLevel: 'critical',
     description: 'ReactDOM.render removed in React 19 (use createRoot)',
     fix: {
-      description: 'Use createRoot instead.',
+      description: 'Use createRoot instead',
       before: 'ReactDOM.render(<App />, document.getElementById("root"));',
       after: 'const root = createRoot(document.getElementById("root")); root.render(<App />);',
     },
@@ -112,7 +112,7 @@ export const PATTERN_DEFINITIONS: Record<string, PatternDefinition> = {
     impactLevel: 'critical',
     description: 'ReactDOM.unmountComponentAtNode removed in React 19',
     fix: {
-      description: 'Use createRoot instead.',
+      description: 'Use createRoot instead',
       before: 'ReactDOM.unmountComponentAtNode(container);',
       after: 'const root = createRoot(container); root.unmount();',
     },

package/src/patterns/matcher.test.ts

@@ -130,18 +130,6 @@ describe('matcher', () => {
   });
 
   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);

package/src/reporters/console.ts

@@ -1,30 +1,36 @@
 import { AnalysisResult, PluginAnalysisResults } from '../types/reporters.js';
+import { isExternal } from '../utils/dependencies.js';
 import { output } from '../utils/output.js';
 
+const summaryMsg = [
+  `We strongly recommend testing your plugin using the React 19 Grafana docker image: ${output.formatCode('grafana/grafana:12.4.0-react19')}`,
+  ...output.bulletList([
+    `Start the server with ${output.formatCode('GRAFANA_VERSION=12.4.0-react19 GRAFANA_IMAGE=grafana docker compose up --build')} flag and manually test your plugin.`,
+    'Run any e2e tests to try and catch any potential issues.',
+    'Manually test your plugin in the browser. Look for any console warnings or errors related to React.',
+  ]),
+  '',
+  'For more information, please refer to:',
+  `React 19 blog post: ${output.formatUrl('https://react.dev/blog/2024/04/25/react-19-upgrade-guide')}.`,
+  `Grafana developer documentation: ${output.formatUrl('https://grafana.com/developers/plugin-tools/set-up/set-up-docker')}`,
+];
+
 export function consoleReporter(results: PluginAnalysisResults) {
   if (results.summary.totalIssues === 0) {
     output.success({
-      title: 'No React 19 breaking changes detected!',
+      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!',
+        ...summaryMsg,
       ],
     });
     return;
   }
 
   output.error({
-    title: 'React 19 breaking changes detected!',
+    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.',
@@ -71,7 +77,7 @@ export function consoleReporter(results: PluginAnalysisResults) {
       title: 'Dependency issues',
       body: [
         'The following issues were found in bundled dependencies.',
-        'We recommend checking for dependency updates which are compatible with React 19.',
+        'Please check for dependency updates that are compatible with React 19.',
       ],
       withPrefix: false,
     });
@@ -80,15 +86,31 @@ export function consoleReporter(results: PluginAnalysisResults) {
     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)}`
+          (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));
+      const rootDependencies = issues
+        .filter(
+          (issue) =>
+            issue.rootDependency !== undefined && issue.rootDependency !== pkgName && !isExternal(issue.rootDependency)
+        )
+        .map((issue) => issue.rootDependency);
+      const uniqueDependencies = new Set(rootDependencies.filter((dep) => dep !== undefined));
+
+      const body = ['issues found:', ...patternInfoList, ''];
+      if (uniqueDependencies.size) {
+        body.push(`Bundled by dependenc${uniqueDependencies.size > 1 ? 'ies' : 'y'}:`);
+        body.push(...output.bulletList(Array.from(uniqueDependencies)));
+      }
+
+      body.push('found in:', ...fileLocationList);
       output.error({
         title: `📦 ${pkgName}`,
-        body: ['issues found:', ...patternInfoList, '', 'found in:', ...fileLocationList],
+        body,
         withPrefix: false,
       });
       output.addHorizontalLine('red');
@@ -97,17 +119,7 @@ export function consoleReporter(results: PluginAnalysisResults) {
 
   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!',
-    ],
+    body: summaryMsg,
     withPrefix: false,
   });
 }

package/src/results.ts

@@ -1,7 +1,7 @@
 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 { getPluginJson, hasExternalisedJsxRuntime } from './utils/plugin.js';
 import { DependencyContext } from './utils/dependencies.js';
 import path from 'node:path';
 
@@ -59,6 +59,7 @@ export function generateAnalysisResults(
 }
 
 function filterMatches(matches: AnalyzedMatch[]): AnalyzedMatch[] {
+  const externalisedJsxRuntime = hasExternalisedJsxRuntime();
   const filtered = matches.filter((match) => {
     // TODO: add mode for strict / loose filtering
     if (match.type === 'source' && (match.confidence === 'none' || match.confidence === 'unknown')) {
@@ -84,6 +85,14 @@ function filterMatches(matches: AnalyzedMatch[]): AnalyzedMatch[] {
       return false;
     }
 
+    // JSX runtime imports are only an issue if they are not externalised in webpack config.
+    if (
+      match.type === 'dependency' &&
+      (match.pattern === 'jsxRuntimeImport' || match.pattern === '__SECRET_INTERNALS')
+    ) {
+      return !externalisedJsxRuntime;
+    }
+
     return true;
   });
 

package/src/utils/plugin.ts

@@ -1,5 +1,7 @@
 import path from 'node:path';
 import fs from 'node:fs';
+import { parseFile } from '../parser.js';
+import { walk } from './ast.js';
 
 interface PluginJson {
   id: string;
@@ -47,26 +49,35 @@ export function readJsonFile(filename: string) {
   }
 }
 
-export function hasTsConfigAutomaticJsx(): boolean {
-  const tsConfigPathsToCheck = ['tsconfig.json', '.config/tsconfig.json'];
-
-  for (const tsConfigPath of tsConfigPathsToCheck) {
-    const jsxConfig = readJsonFile(path.join(process.cwd(), tsConfigPath));
-    const jsx = jsxConfig?.compilerOptions?.jsx;
-    if (jsx === 'react-jsx' || jsx === 'react-jsxdev') {
-      return true;
-    }
-  }
-  return false;
-}
-
-export function hasSwcAutomaticJsx(): boolean {
-  const webpackConfigPathsToCheck = ['webpack.config.js', '.config/webpack/webpack.config.js'];
+export function hasExternalisedJsxRuntime(): boolean {
+  const webpackConfigPathsToCheck = ['webpack.config.ts', '.config/webpack/webpack.config.ts'];
+  let found = false;
   for (const webpackConfigPath of webpackConfigPathsToCheck) {
-    const webpackConfig = fs.readFileSync(path.join(process.cwd(), webpackConfigPath)).toString();
-    if (webpackConfig.includes("runtime: 'automatic'")) {
-      return true;
+    if (isFile(path.join(process.cwd(), webpackConfigPath))) {
+      const webpackConfig = fs.readFileSync(path.join(process.cwd(), webpackConfigPath)).toString();
+      const webpackConfigAst = parseFile(webpackConfig, webpackConfigPath);
+
+      walk(webpackConfigAst, (node) => {
+        // check for 'react/jsx-runtime' in externals: [array]
+        if (
+          node.type === 'Property' &&
+          node.key.type === 'Identifier' &&
+          node.key.name === 'externals' &&
+          node.value.type === 'ArrayExpression'
+        ) {
+          for (const element of node.value.elements) {
+            if (
+              element &&
+              element.type === 'Literal' &&
+              typeof element.value === 'string' &&
+              element.value.includes('react/jsx-runtime')
+            ) {
+              found = true;
+            }
+          }
+        }
+      });
     }
   }
-  return false;
+  return found;
 }