@grafana/create-plugin 6.8.0-canary.2356.20815895884.0 → 6.8.0

package/src/codemods/additions/scripts/bundle-grafana-ui/index.ts

@@ -1,259 +0,0 @@
-import * as v from 'valibot';
-import * as recast from 'recast';
-import { coerce, gte } from 'semver';
-
-import type { Context } from '../../../context.js';
-import { additionsDebug } from '../../../utils.js';
-import { getBundlerConfig } from '../../../utils.bundler-config.js';
-import { updateExternalsArray, type ExternalsArrayModifier } from '../../../utils.externals.js';
-
-const { builders } = recast.types;
-
-const PLUGIN_JSON_PATH = 'src/plugin.json';
-const MIN_GRAFANA_VERSION = '10.2.0';
-
-export const schema = v.object({});
-type BundleGrafanaUIOptions = v.InferOutput<typeof schema>;
-
-export default function bundleGrafanaUI(context: Context, _options: BundleGrafanaUIOptions): Context {
-  additionsDebug('Running bundle-grafana-ui addition...');
-
-  // Ensure minimum Grafana version requirement
-  ensureMinGrafanaVersion(context);
-
-  // Update externals array using the shared utility
-  updateExternalsArray(context, createBundleGrafanaUIModifier());
-
-  // Update bundler resolve configuration to handle ESM imports
-  updateResolveExtensions(context);
-
-  // Update module rules directly with simple string manipulation
-  updateModuleRules(context);
-
-  return context;
-}
-
-/**
- * Checks if an AST node is a regex matching a Grafana package pattern
- * @param element - The AST node to check
- * @param pattern - The regex pattern to match (e.g., "^@grafana\\/ui" or "^@grafana\\/data")
- */
-function isGrafanaRegex(element: recast.types.namedTypes.ASTNode, pattern: string): boolean {
-  // Handle RegExpLiteral (TypeScript parser)
-  if (element.type === 'RegExpLiteral') {
-    const regexNode = element as recast.types.namedTypes.RegExpLiteral;
-    return regexNode.pattern === pattern && regexNode.flags === 'i';
-  }
-  // Handle Literal with regex property (other parsers)
-  if (element.type === 'Literal' && 'regex' in element && element.regex) {
-    const regex = element.regex as { pattern: string; flags: string };
-    return regex.pattern === pattern && regex.flags === 'i';
-  }
-  return false;
-}
-
-/**
- * Removes /^@grafana\/ui/i regex from externals array and adds 'react-inlinesvg'
- * @returns true if changes were made, false otherwise
- */
-function removeGrafanaUiAndAddReactInlineSvg(externalsArray: recast.types.namedTypes.ArrayExpression): boolean {
-  let hasChanges = false;
-  let hasGrafanaUiExternal = false;
-  let hasReactInlineSvg = false;
-
-  // Check current state
-  for (const element of externalsArray.elements) {
-    if (!element) {
-      continue;
-    }
-
-    // Check for /^@grafana\/ui/i regex
-    if (isGrafanaRegex(element, '^@grafana\\/ui')) {
-      hasGrafanaUiExternal = true;
-    }
-
-    // Check for 'react-inlinesvg' string
-    if (
-      (element.type === 'Literal' || element.type === 'StringLiteral') &&
-      'value' in element &&
-      typeof element.value === 'string' &&
-      element.value === 'react-inlinesvg'
-    ) {
-      hasReactInlineSvg = true;
-    }
-  }
-
-  // Remove /^@grafana\/ui/i if present
-  if (hasGrafanaUiExternal) {
-    externalsArray.elements = externalsArray.elements.filter((element) => {
-      if (!element) {
-        return true;
-      }
-      return !isGrafanaRegex(element, '^@grafana\\/ui');
-    });
-    hasChanges = true;
-    additionsDebug('Removed /^@grafana\\/ui/i from externals array');
-  }
-
-  // Add 'react-inlinesvg' if not present
-  if (!hasReactInlineSvg) {
-    // Find the index of /^@grafana\/data/i to insert after it
-    let insertIndex = -1;
-    for (let i = 0; i < externalsArray.elements.length; i++) {
-      const element = externalsArray.elements[i];
-      if (element && isGrafanaRegex(element, '^@grafana\\/data')) {
-        insertIndex = i + 1;
-        break;
-      }
-    }
-
-    if (insertIndex >= 0) {
-      externalsArray.elements.splice(insertIndex, 0, builders.literal('react-inlinesvg'));
-    } else {
-      // Fallback: append to end
-      externalsArray.elements.push(builders.literal('react-inlinesvg'));
-    }
-    hasChanges = true;
-    additionsDebug("Added 'react-inlinesvg' to externals array");
-  }
-
-  return hasChanges;
-}
-
-/**
- * Creates a modifier function for updateExternalsArray that removes @grafana/ui
- * and adds react-inlinesvg
- */
-function createBundleGrafanaUIModifier(): ExternalsArrayModifier {
-  return (externalsArray: recast.types.namedTypes.ArrayExpression) => {
-    return removeGrafanaUiAndAddReactInlineSvg(externalsArray);
-  };
-}
-
-/**
- * Updates resolve extensions to add .mjs using string manipulation
- */
-function updateResolveExtensions(context: Context): void {
-  const config = getBundlerConfig(context);
-  if (!config) {
-    return;
-  }
-
-  const { path: configPath, content } = config;
-
-  // Check if .mjs already exists
-  if (content.includes("'.mjs'") || content.includes('".mjs"')) {
-    return;
-  }
-
-  // Add .mjs to extensions array
-  const updated = content.replace(/(extensions:\s*\[)([^\]]+)(\])/, (match, prefix, extensions, suffix) => {
-    if (extensions.includes('.mjs')) {
-      return match;
-    }
-    return `${prefix}${extensions}, '.mjs'${suffix}`;
-  });
-
-  if (updated !== content) {
-    context.updateFile(configPath, updated);
-    additionsDebug("Added '.mjs' to resolve.extensions");
-  }
-}
-
-/**
- * Updates module rules to add .mjs rule using string manipulation
- */
-function updateModuleRules(context: Context): void {
-  const config = getBundlerConfig(context);
-  if (!config) {
-    return;
-  }
-
-  const { path: configPath, content } = config;
-
-  // Check if rule already exists
-  if (content.includes('test: /\\.mjs$') || content.includes('test: /\\\\.mjs$')) {
-    return;
-  }
-
-  const mjsRule = `{
-        test: /\\.mjs$/,
-        include: /node_modules/,
-        resolve: {
-          fullySpecified: false,
-        },
-        type: 'javascript/auto',
-      },`;
-
-  // Simple approach: find rules array and insert after first rule
-  let updated = content;
-
-  // Case 1: Empty array - insert at start
-  if (content.match(/rules:\s*\[\s*\]/)) {
-    updated = content.replace(/(rules:\s*\[\s*)(\])/, `$1${mjsRule}\n      $2`);
-  }
-  // Case 2: Find first rule and insert after it
-  else {
-    // Match: rules: [ { ... }, and insert mjs rule after the first rule
-    // The regex finds the first complete rule object (balanced braces)
-    updated = content.replace(/(rules:\s*\[\s*)(\{[\s\S]*?\}),(\s*)/, (match, prefix, firstRule, suffix) => {
-      // Check if we already inserted (avoid double insertion)
-      if (match.includes('test: /\\.mjs$')) {
-        return match;
-      }
-      // Insert mjs rule after first rule
-      return `${prefix}${firstRule},\n      ${mjsRule}${suffix}`;
-    });
-  }
-
-  if (updated !== content) {
-    context.updateFile(configPath, updated);
-    additionsDebug('Added module rule for .mjs files in node_modules with resolve.fullySpecified: false');
-  }
-}
-
-/**
- * Ensures plugin.json has grafanaDependency >= 10.2.0
- * Bundling @grafana/ui is only supported from Grafana 10.2.0 onwards
- */
-function ensureMinGrafanaVersion(context: Context): void {
-  if (!context.doesFileExist(PLUGIN_JSON_PATH)) {
-    additionsDebug(`${PLUGIN_JSON_PATH} not found, skipping version check`);
-    return;
-  }
-
-  const pluginJsonRaw = context.getFile(PLUGIN_JSON_PATH);
-  if (!pluginJsonRaw) {
-    return;
-  }
-
-  try {
-    const pluginJson = JSON.parse(pluginJsonRaw);
-
-    if (!pluginJson.dependencies) {
-      pluginJson.dependencies = {};
-    }
-
-    const currentGrafanaDep = pluginJson.dependencies.grafanaDependency || '>=9.0.0';
-    const currentVersion = coerce(currentGrafanaDep.replace(/^[><=]+/, ''));
-    const minVersion = coerce(MIN_GRAFANA_VERSION);
-
-    if (!currentVersion || !minVersion || !gte(currentVersion, minVersion)) {
-      const oldVersion = pluginJson.dependencies.grafanaDependency || 'not set';
-      pluginJson.dependencies.grafanaDependency = `>=${MIN_GRAFANA_VERSION}`;
-      context.updateFile(PLUGIN_JSON_PATH, JSON.stringify(pluginJson, null, 2));
-      additionsDebug(
-        `Updated grafanaDependency from "${oldVersion}" to ">=${MIN_GRAFANA_VERSION}" - bundling @grafana/ui requires Grafana ${MIN_GRAFANA_VERSION} or higher`
-      );
-      console.log(
-        `\n⚠️  Updated grafanaDependency to ">=${MIN_GRAFANA_VERSION}" because bundling @grafana/ui is only supported from Grafana ${MIN_GRAFANA_VERSION} onwards.\n`
-      );
-    } else {
-      additionsDebug(
-        `grafanaDependency "${currentGrafanaDep}" already meets minimum requirement of ${MIN_GRAFANA_VERSION}`
-      );
-    }
-  } catch (error) {
-    additionsDebug(`Error updating ${PLUGIN_JSON_PATH}:`, error);
-  }
-}

package/src/codemods/utils.bundler-config.ts

@@ -1,203 +0,0 @@
-import * as recast from 'recast';
-import * as typeScriptParser from 'recast/parsers/typescript.js';
-
-import type { Context } from './context.js';
-import { additionsDebug } from './utils.js';
-
-const WEBPACK_CONFIG_PATH = '.config/webpack/webpack.config.ts';
-const RSPACK_CONFIG_PATH = '.config/rspack/rspack.config.ts';
-
-/**
- * Gets the bundler config file path and content, preferring rspack over webpack
- * @returns Object with path and content, or null if no config file exists
- */
-export function getBundlerConfig(context: Context): { path: string; content: string } | null {
-  const configPath = context.doesFileExist(RSPACK_CONFIG_PATH)
-    ? RSPACK_CONFIG_PATH
-    : context.doesFileExist(WEBPACK_CONFIG_PATH)
-      ? WEBPACK_CONFIG_PATH
-      : null;
-
-  if (!configPath) {
-    return null;
-  }
-
-  const content = context.getFile(configPath);
-  if (!content) {
-    return null;
-  }
-
-  return { path: configPath, content };
-}
-
-/**
- * Type for a function that modifies a resolve object expression
- * @param resolveObject - The AST node representing the resolve configuration
- * @returns true if changes were made, false otherwise
- */
-export type ResolveModifier = (resolveObject: recast.types.namedTypes.ObjectExpression) => boolean;
-
-/**
- * Type for a function that modifies a module rules array
- * @param moduleObject - The AST node representing the module configuration
- * @returns true if changes were made, false otherwise
- */
-export type ModuleRulesModifier = (moduleObject: recast.types.namedTypes.ObjectExpression) => boolean;
-
-/**
- * Updates the bundler's resolve and module configuration.
- *
- * This utility handles both webpack and rspack configurations, preferring rspack when both exist.
- *
- * @param context - The codemod context
- * @param resolveModifier - Optional function to modify the resolve configuration
- * @param moduleRulesModifier - Optional function to modify the module rules configuration
- */
-export function updateBundlerConfig(
-  context: Context,
-  resolveModifier?: ResolveModifier,
-  moduleRulesModifier?: ModuleRulesModifier
-): void {
-  if (!resolveModifier && !moduleRulesModifier) {
-    return;
-  }
-
-  // Try rspack config first (newer structure)
-  if (context.doesFileExist(RSPACK_CONFIG_PATH)) {
-    additionsDebug(`Found ${RSPACK_CONFIG_PATH}, updating bundler configuration...`);
-    const rspackContent = context.getFile(RSPACK_CONFIG_PATH);
-    if (rspackContent) {
-      try {
-        const ast = recast.parse(rspackContent, {
-          parser: typeScriptParser,
-        });
-
-        let hasChanges = false;
-
-        recast.visit(ast, {
-          visitObjectExpression(path) {
-            const { node } = path;
-            const properties = node.properties;
-
-            if (properties) {
-              for (const prop of properties) {
-                if (prop && (prop.type === 'Property' || prop.type === 'ObjectProperty')) {
-                  const key = 'key' in prop ? prop.key : null;
-                  const value = 'value' in prop ? prop.value : null;
-
-                  // Find the resolve property
-                  if (
-                    resolveModifier &&
-                    key &&
-                    key.type === 'Identifier' &&
-                    key.name === 'resolve' &&
-                    value &&
-                    value.type === 'ObjectExpression'
-                  ) {
-                    hasChanges = resolveModifier(value) || hasChanges;
-                  }
-
-                  // Find the module property
-                  if (
-                    moduleRulesModifier &&
-                    key &&
-                    key.type === 'Identifier' &&
-                    key.name === 'module' &&
-                    value &&
-                    value.type === 'ObjectExpression'
-                  ) {
-                    hasChanges = moduleRulesModifier(value) || hasChanges;
-                  }
-                }
-              }
-            }
-
-            return this.traverse(path);
-          },
-        });
-
-        if (hasChanges) {
-          const output = recast.print(ast, {
-            tabWidth: 2,
-            trailingComma: true,
-            lineTerminator: '\n',
-          });
-          context.updateFile(RSPACK_CONFIG_PATH, output.code);
-          additionsDebug(`Updated ${RSPACK_CONFIG_PATH}`);
-        }
-      } catch (error) {
-        additionsDebug(`Error updating ${RSPACK_CONFIG_PATH}:`, error);
-      }
-    }
-    return;
-  }
-
-  // Fall back to webpack config (legacy structure)
-  if (context.doesFileExist(WEBPACK_CONFIG_PATH)) {
-    additionsDebug(`Found ${WEBPACK_CONFIG_PATH}, updating bundler configuration...`);
-    const webpackContent = context.getFile(WEBPACK_CONFIG_PATH);
-    if (webpackContent) {
-      try {
-        const ast = recast.parse(webpackContent, {
-          parser: typeScriptParser,
-        });
-
-        let hasChanges = false;
-
-        recast.visit(ast, {
-          visitObjectExpression(path) {
-            const { node } = path;
-            const properties = node.properties;
-
-            if (properties) {
-              for (const prop of properties) {
-                if (prop && (prop.type === 'Property' || prop.type === 'ObjectProperty')) {
-                  const key = 'key' in prop ? prop.key : null;
-                  const value = 'value' in prop ? prop.value : null;
-
-                  // Find the resolve property
-                  if (
-                    resolveModifier &&
-                    key &&
-                    key.type === 'Identifier' &&
-                    key.name === 'resolve' &&
-                    value &&
-                    value.type === 'ObjectExpression'
-                  ) {
-                    hasChanges = resolveModifier(value) || hasChanges;
-                  }
-
-                  // Find the module property
-                  if (
-                    moduleRulesModifier &&
-                    key &&
-                    key.type === 'Identifier' &&
-                    key.name === 'module' &&
-                    value &&
-                    value.type === 'ObjectExpression'
-                  ) {
-                    hasChanges = moduleRulesModifier(value) || hasChanges;
-                  }
-                }
-              }
-            }
-
-            return this.traverse(path);
-          },
-        });
-
-        if (hasChanges) {
-          const output = recast.print(ast, {
-            tabWidth: 2,
-            trailingComma: true,
-            lineTerminator: '\n',
-          });
-          context.updateFile(WEBPACK_CONFIG_PATH, output.code);
-          additionsDebug(`Updated ${WEBPACK_CONFIG_PATH}`);
-        }
-      } catch (error) {
-        additionsDebug(`Error updating ${WEBPACK_CONFIG_PATH}:`, error);
-      }
-    }
-  }
-}

package/src/codemods/utils.externals.test.ts

@@ -1,87 +0,0 @@
-import { describe, expect, it } from 'vitest';
-import * as recast from 'recast';
-
-import { Context } from './context.js';
-import { updateExternalsArray, type ExternalsArrayModifier } from './utils.externals.js';
-
-describe('updateExternalsArray', () => {
-  describe('new structure (.config/bundler/externals.ts)', () => {
-    it('should update externals array in externals.ts', () => {
-      const context = new Context('/virtual');
-      context.addFile('.config/bundler/externals.ts', `export const externals = ['react', 'react-dom'];`);
-
-      const modifier: ExternalsArrayModifier = (array) => {
-        array.elements.push(recast.types.builders.literal('i18next'));
-        return true;
-      };
-
-      const result = updateExternalsArray(context, modifier);
-
-      expect(result).toBe(true);
-      const content = context.getFile('.config/bundler/externals.ts') || '';
-      expect(content).toMatch(/['"]i18next['"]/);
-      expect(content).toContain("'react'");
-      expect(content).toContain("'react-dom'");
-    });
-
-    it('should return false if no changes were made', () => {
-      const context = new Context('/virtual');
-      context.addFile('.config/bundler/externals.ts', `export const externals = ['react', 'react-dom'];`);
-
-      const modifier: ExternalsArrayModifier = () => {
-        return false; // No changes
-      };
-
-      const result = updateExternalsArray(context, modifier);
-
-      expect(result).toBe(false);
-    });
-  });
-
-  describe('legacy structure (.config/webpack/webpack.config.ts)', () => {
-    it('should update externals array in webpack.config.ts when externals.ts does not exist', () => {
-      const context = new Context('/virtual');
-      context.addFile(
-        '.config/webpack/webpack.config.ts',
-        `import { Configuration } from 'webpack';
-export const config: Configuration = {
-  externals: ['react', 'react-dom'],
-};`
-      );
-
-      const modifier: ExternalsArrayModifier = (array) => {
-        array.elements.push(recast.types.builders.literal('i18next'));
-        return true;
-      };
-
-      const result = updateExternalsArray(context, modifier);
-
-      expect(result).toBe(true);
-      const content = context.getFile('.config/webpack/webpack.config.ts') || '';
-      expect(content).toMatch(/['"]i18next['"]/);
-      expect(content).toContain("'react'");
-      expect(content).toContain("'react-dom'");
-    });
-
-    it('should prefer externals.ts over webpack.config.ts', () => {
-      const context = new Context('/virtual');
-      context.addFile('.config/bundler/externals.ts', `export const externals = ['react'];`);
-      context.addFile('.config/webpack/webpack.config.ts', `export const config = { externals: ['react-dom'] };`);
-
-      const modifier: ExternalsArrayModifier = (array) => {
-        array.elements.push(recast.types.builders.literal('i18next'));
-        return true;
-      };
-
-      const result = updateExternalsArray(context, modifier);
-
-      expect(result).toBe(true);
-      // Should update externals.ts, not webpack.config.ts
-      const externalsContent = context.getFile('.config/bundler/externals.ts') || '';
-      expect(externalsContent).toMatch(/['"]i18next['"]/);
-
-      const webpackContent = context.getFile('.config/webpack/webpack.config.ts') || '';
-      expect(webpackContent).not.toMatch(/['"]i18next['"]/);
-    });
-  });
-});