@grafana/react-detect 0.1.0

package/src/utils/ast.ts

@@ -0,0 +1,19 @@
+export function walk(node: any, callback: (node: any) => void): void {
+  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);
+      }
+    }
+  }
+}
+
+export function getSurroundingCode(code: string, node: any): string {
+  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');
+}

package/src/utils/dependencies.test.ts

@@ -0,0 +1,123 @@
+import { join } from 'node:path';
+import { DependencyContext, isExternal } from './dependencies.js';
+
+describe('DependencyContext', () => {
+  let context: DependencyContext;
+  const fixturesPath = join(__dirname, '../../test/fixtures/dependencies');
+
+  beforeEach(() => {
+    context = new DependencyContext();
+  });
+
+  describe('loadDependencies', () => {
+    it('should load direct dependencies from package.json', async () => {
+      await context.loadDependencies(fixturesPath);
+
+      expect(context.isDirect('has')).toBe(true);
+      expect(context.getVersion('has')).toBe('^1.0.4');
+    });
+
+    it('should load dev dependencies from package.json', async () => {
+      await context.loadDependencies(fixturesPath);
+
+      expect(context.isDirect('debug')).toBe(true);
+      expect(context.getVersion('debug')).toBe('^4.4.3');
+    });
+  });
+
+  describe('findRootDependency', () => {
+    it('should return package name if it is a direct dependency', async () => {
+      await context.loadDependencies(fixturesPath);
+
+      expect(context.findRootDependency('has')).toBe('has');
+      expect(context.findRootDependency('debug')).toBe('debug');
+    });
+
+    it('should find root dependency for transitive packages', async () => {
+      await context.loadDependencies(fixturesPath);
+
+      const rootDep = context.findRootDependency('ms');
+      expect(rootDep).toBe('debug');
+    });
+
+    it('should return package name as fallback if not found in tree', async () => {
+      await context.loadDependencies(fixturesPath);
+
+      expect(context.findRootDependency('unknown-package')).toBe('unknown-package');
+    });
+  });
+
+  describe('isDirect', () => {
+    it('should return true for direct dependencies', async () => {
+      await context.loadDependencies(fixturesPath);
+
+      expect(context.isDirect('has')).toBe(true);
+      expect(context.isDirect('debug')).toBe(true);
+    });
+
+    it('should return false for transitive dependencies', async () => {
+      await context.loadDependencies(fixturesPath);
+
+      expect(context.isDirect('ms')).toBe(false);
+    });
+
+    it('should return false for unknown packages', async () => {
+      await context.loadDependencies(fixturesPath);
+
+      expect(context.isDirect('unknown-package')).toBe(false);
+    });
+  });
+
+  describe('getVersion', () => {
+    it('should return version for direct dependencies', async () => {
+      await context.loadDependencies(fixturesPath);
+
+      expect(context.getVersion('has')).toBe('^1.0.4');
+      expect(context.getVersion('debug')).toBe('^4.4.3');
+    });
+
+    it('should return undefined for transitive dependencies', async () => {
+      await context.loadDependencies(fixturesPath);
+
+      expect(context.getVersion('ms')).toBeUndefined();
+    });
+
+    it('should return undefined for unknown packages', async () => {
+      await context.loadDependencies(fixturesPath);
+
+      expect(context.getVersion('unknown-package')).toBeUndefined();
+    });
+  });
+
+  describe('getAllDependencies', () => {
+    it('should return combined dependencies and devDependencies', async () => {
+      await context.loadDependencies(fixturesPath);
+
+      const allDeps = context.getAllDependencies();
+      expect(allDeps.has('has')).toBe(true);
+      expect(allDeps.has('debug')).toBe(true);
+      expect(allDeps.size).toBe(2);
+    });
+  });
+
+  describe('isExternal', () => {
+    it('should return true for Grafana external packages', () => {
+      expect(isExternal('react')).toBe(true);
+      expect(isExternal('react-dom')).toBe(true);
+      expect(isExternal('@grafana/data')).toBe(true);
+      expect(isExternal('@grafana/ui')).toBe(true);
+      expect(isExternal('@emotion/css')).toBe(true);
+    });
+
+    it('should return true for sub-paths of external packages', () => {
+      expect(isExternal('react/jsx-runtime')).toBe(true);
+      expect(isExternal('@grafana/data/utils')).toBe(true);
+    });
+
+    it('should return false for non-external packages', () => {
+      expect(isExternal('axios')).toBe(false);
+      expect(isExternal('express')).toBe(false);
+      expect(isExternal('@some-org/package')).toBe(false);
+    });
+  });
+});

package/src/utils/dependencies.ts

@@ -0,0 +1,141 @@
+import { join } from 'node:path';
+import { parsePnpmProject, parseNpmLockV2Project, parseYarnLockV2Project } from 'snyk-nodejs-lockfile-parser';
+import type { DepGraph } from '@snyk/dep-graph';
+import { existsSync, readFileSync } from 'node:fs';
+import { readJsonFile } from './plugin.js';
+
+export class DependencyContext {
+  private dependencies: Map<string, string> = new Map();
+  private devDependencies: Map<string, string> = new Map();
+  private depGraph: DepGraph | null = null;
+
+  async loadDependencies(pluginRoot = process.cwd()): Promise<void> {
+    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 as string);
+        });
+      }
+      if (pkgJsonContent.devDependencies) {
+        Object.entries(pkgJsonContent.devDependencies).forEach(([name, version]) => {
+          this.devDependencies.set(name, version as string);
+        });
+      }
+    } else {
+      throw new Error(`No lockfile found in ${pluginRoot}`);
+    }
+  }
+
+  private findLockfile(pluginRoot: string): string | null {
+    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: string): string {
+    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: string): boolean {
+    return this.dependencies.has(packageName) || this.devDependencies.has(packageName);
+  }
+
+  getVersion(packageName: string): string | undefined {
+    return this.dependencies.get(packageName) || this.devDependencies.get(packageName);
+  }
+
+  getAllDependencies(): Map<string, string> {
+    return new Map([...this.dependencies, ...this.devDependencies]);
+  }
+}
+
+export 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',
+];
+
+/**
+ * Check if a package is externalized by Grafana
+ */
+export function isExternal(packageName: string): boolean {
+  // Direct match
+  if (GRAFANA_EXTERNALS.includes(packageName)) {
+    return true;
+  }
+
+  return GRAFANA_EXTERNALS.some((external) => packageName.startsWith(external + '/'));
+}

package/src/utils/output.ts

@@ -0,0 +1,3 @@
+import { Output } from '@libs/output';
+
+export const output = new Output('@grafana/react-detect');

package/src/utils/plugin.ts

@@ -0,0 +1,72 @@
+import path from 'node:path';
+import fs from 'node:fs';
+
+interface PluginJson {
+  id: string;
+  type: string;
+  info: {
+    version: string;
+  };
+  name: string;
+}
+
+let cachedPluginJson: PluginJson | null = null;
+
+export function getPluginJson(dir?: string) {
+  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(path: string) {
+  try {
+    return fs.lstatSync(path).isFile();
+  } catch (e) {
+    return false;
+  }
+}
+
+export function readJsonFile(filename: string) {
+  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: unknown) {
+    throw new Error(`Failed to load json file ${filename}: ${error instanceof Error ? error.message : String(error)}`);
+  }
+}
+
+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'];
+  for (const webpackConfigPath of webpackConfigPathsToCheck) {
+    const webpackConfig = fs.readFileSync(path.join(process.cwd(), webpackConfigPath)).toString();
+    if (webpackConfig.includes("runtime: 'automatic'")) {
+      return true;
+    }
+  }
+  return false;
+}

package/test/fixtures/dependencies/package-lock.json

@@ -0,0 +1,49 @@
+{
+  "name": "simple-npm-check",
+  "version": "1.0.0",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {
+    "": {
+      "name": "simple-npm-check",
+      "version": "1.0.0",
+      "license": "ISC",
+      "dependencies": {
+        "debug": "^4.4.3",
+        "has": "^1.0.4"
+      }
+    },
+    "node_modules/debug": {
+      "version": "4.4.3",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-4.4.3.tgz",
+      "integrity": "sha512-RGwwWnwQvkVfavKVt22FGLw+xYSdzARwm0ru6DhTVA3umU5hZc28V3kO4stgYryrTlLpuvgI9GiijltAjNbcqA==",
+      "license": "MIT",
+      "dependencies": {
+        "ms": "^2.1.3"
+      },
+      "engines": {
+        "node": ">=6.0"
+      },
+      "peerDependenciesMeta": {
+        "supports-color": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/has": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/has/-/has-1.0.4.tgz",
+      "integrity": "sha512-qdSAmqLF6209RFj4VVItywPMbm3vWylknmB3nvNiUIs72xAimcM8nVYxYr7ncvZq5qzk9MKIZR8ijqD/1QuYjQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4.0"
+      }
+    },
+    "node_modules/ms": {
+      "version": "2.1.3",
+      "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
+      "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==",
+      "license": "MIT"
+    }
+  }
+}

package/test/fixtures/dependencies/package.json

@@ -0,0 +1,16 @@
+{
+  "name": "simple-npm-check",
+  "version": "1.0.0",
+  "description": "",
+  "license": "ISC",
+  "author": "",
+  "type": "commonjs",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "dependencies": {
+    "debug": "^4.4.3",
+    "has": "^1.0.4"
+  }
+}

package/test/fixtures/patterns/module.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"module.js","mappings":";;oEAAAA,EAAOC,QAAUC,C,UCAjBF,EAAOC,QAAUE,C,GCCbC,EAA2B,CAAC,EAGhC,SAASC,EAAoBC,GAE5B,IAAIC,EAAeH,EAAyBE,GAC5C,QAAqBE,IAAjBD,EACH,OAAOA,EAAaN,QAGrB,IAAID,EAASI,EAAyBE,GAAY,CAGjDL,QAAS,CAAC,GAOX,OAHAQ,EAAoBH,GAAUN,EAAQA,EAAOC,QAASI,GAG/CL,EAAOC,OACf,CCrBAI,EAAoBK,EAAKV,IACxB,IAAIW,EAASX,GAAUA,EAAOY,WAC7B,IAAOZ,EAAiB,QACxB,IAAM,EAEP,OADAK,EAAoBQ,EAAEF,EAAQ,CAAEG,EAAGH,IAC5BA,CAAM,ECLdN,EAAoBQ,EAAI,CAACZ,EAASc,KACjC,IAAI,IAAIC,KAAOD,EACXV,EAAoBY,EAAEF,EAAYC,KAASX,EAAoBY,EAAEhB,EAASe,IAC5EE,OAAOC,eAAelB,EAASe,EAAK,CAAEI,YAAY,EAAMC,IAAKN,EAAWC,IAE1E,ECNDX,EAAoBY,EAAI,CAACK,EAAKC,IAAUL,OAAOM,UAAUC,eAAeC,KAAKJ,EAAKC,GCClFlB,EAAoBsB,EAAK1B,IACH,oBAAX2B,QAA0BA,OAAOC,aAC1CX,OAAOC,eAAelB,EAAS2B,OAAOC,YAAa,CAAEC,MAAO,WAE7DZ,OAAOC,eAAelB,EAAS,aAAc,CAAE6B,OAAO,GAAO,ECL9DzB,EAAoB0B,EAAI,8C,+ECGxB,IACE,KAAiB,QACb,QAAkBC,MAAM,EAAG,QAAkBC,YAAY,KAAO,GAChE,8C,sBCJC,MAAMC,EAAc,EAAGC,UACrB,kBAACC,MAAAA,KAAKD,GAGfD,EAAYG,aAAe,CACzBF,KAAM,gBAGR,U","sources":["webpack://heywesty-trafficlight-panel/external amd \"module\"","webpack://heywesty-trafficlight-panel/external amd \"react\"","webpack://heywesty-trafficlight-panel/webpack/bootstrap","webpack://heywesty-trafficlight-panel/webpack/runtime/compat get default export","webpack://heywesty-trafficlight-panel/webpack/runtime/define property getters","webpack://heywesty-trafficlight-panel/webpack/runtime/hasOwnProperty shorthand","webpack://heywesty-trafficlight-panel/webpack/runtime/make namespace object","webpack://heywesty-trafficlight-panel/webpack/runtime/publicPath","webpack://heywesty-trafficlight-panel/./node_modules/grafana-public-path.js","webpack://heywesty-trafficlight-panel/./module.tsx"],"sourcesContent":["module.exports = __WEBPACK_EXTERNAL_MODULE__308__;","module.exports = __WEBPACK_EXTERNAL_MODULE__959__;","// The module cache\nvar __webpack_module_cache__ = {};\n\n// The require function\nfunction __webpack_require__(moduleId) {\n\t// Check if module is in cache\n\tvar cachedModule = __webpack_module_cache__[moduleId];\n\tif (cachedModule !== undefined) {\n\t\treturn cachedModule.exports;\n\t}\n\t// Create a new module (and put it into the cache)\n\tvar module = __webpack_module_cache__[moduleId] = {\n\t\t// no module.id needed\n\t\t// no module.loaded needed\n\t\texports: {}\n\t};\n\n\t// Execute the module function\n\t__webpack_modules__[moduleId](module, module.exports, __webpack_require__);\n\n\t// Return the exports of the module\n\treturn module.exports;\n}\n\n","// getDefaultExport function for compatibility with non-harmony modules\n__webpack_require__.n = (module) => {\n\tvar getter = module && module.__esModule ?\n\t\t() => (module['default']) :\n\t\t() => (module);\n\t__webpack_require__.d(getter, { a: getter });\n\treturn getter;\n};","// define getter functions for harmony exports\n__webpack_require__.d = (exports, definition) => {\n\tfor(var key in definition) {\n\t\tif(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) {\n\t\t\tObject.defineProperty(exports, key, { enumerable: true, get: definition[key] });\n\t\t}\n\t}\n};","__webpack_require__.o = (obj, prop) => (Object.prototype.hasOwnProperty.call(obj, prop))","// define __esModule on exports\n__webpack_require__.r = (exports) => {\n\tif(typeof Symbol !== 'undefined' && Symbol.toStringTag) {\n\t\tObject.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });\n\t}\n\tObject.defineProperty(exports, '__esModule', { value: true });\n};","__webpack_require__.p = \"public/plugins/heywesty-trafficlight-panel/\";","\nimport amdMetaModule from 'amd-module';\n\n__webpack_public_path__ =\n  amdMetaModule && amdMetaModule.uri\n    ? amdMetaModule.uri.slice(0, amdMetaModule.uri.lastIndexOf('/') + 1)\n    : 'public/plugins/heywesty-trafficlight-panel/';\n","import React from 'react';\n\nexport const MyComponent = ({ name }: { name: string }) => {\n  return <div>{name}</div>;\n};\n\nMyComponent.defaultProps = {\n  name: 'My Component',\n};\n\nexport default MyComponent;\n"],"names":["module","exports","__WEBPACK_EXTERNAL_MODULE__308__","__WEBPACK_EXTERNAL_MODULE__959__","__webpack_module_cache__","__webpack_require__","moduleId","cachedModule","undefined","__webpack_modules__","n","getter","__esModule","d","a","definition","key","o","Object","defineProperty","enumerable","get","obj","prop","prototype","hasOwnProperty","call","r","Symbol","toStringTag","value","p","slice","lastIndexOf","MyComponent","name","div","defaultProps"],"sourceRoot":""}

package/tsconfig.json

@@ -0,0 +1,9 @@
+{
+  "$schema": "https://json.schemastore.org/tsconfig",
+  "compilerOptions": {
+    "outDir": "./dist"
+  },
+  "exclude": ["node_modules"],
+  "extends": "../../tsconfig.base.json",
+  "include": ["src"]
+}

package/vitest.config.ts

@@ -0,0 +1,12 @@
+import { resolve } from 'node:path';
+import { defineProject, mergeConfig } from 'vitest/config';
+import configShared from '../../vitest.config.base.js';
+
+export default mergeConfig(
+  configShared,
+  defineProject({
+    test: {
+      root: resolve(__dirname),
+    },
+  })
+);