@grafana/create-plugin 7.16.0 → 7.18.0

package/src/codemods/migrations/scripts/019-remove-glob-dependency.ts

@@ -0,0 +1,121 @@
+import type { Context } from '../../context.js';
+import * as recast from 'recast';
+import {
+  callsFunction,
+  createImport,
+  findImports,
+  findFunctionDeclaration,
+  findNamedImport,
+  insertImports,
+  parseAsTypescript,
+  printAST,
+} from '../../utils.ast.js';
+import { migrationsDebug, removeDependenciesFromPackageJson } from '../../utils.js';
+
+const OLD_PACKAGE_NAME = 'glob';
+const NEW_PACKAGE_NAME = 'node:fs/promises';
+
+const UTILS_PATHS = ['.config/webpack/utils.ts', '.config/bundler/utils.ts'];
+
+const GET_ENTRIES_SOURCE = `export async function getEntries() {
+  const plugins: string[][] = [];
+  for await (const pluginJson of glob('**/src/**/plugin.json')) {
+    const folder = path.dirname(pluginJson);
+    const modules: string[] = [];
+    for await (const module of glob(\`\${folder}/module.{ts,tsx,js,jsx}\`)) {
+      modules.push(path.resolve(module));
+    }
+    plugins.push(modules);
+  }
+
+  return plugins.reduce<Record<string, string>>((result, modules) => {
+    return modules.reduce((innerResult, module) => {
+      const pluginPath = path.dirname(module);
+      const pluginName = path.relative(process.cwd(), pluginPath).replace(/src\\/?/i, '');
+      const entryName = pluginName === '' ? 'module' : \`\${pluginName}/module\`;
+
+      innerResult[entryName] = module;
+      return innerResult;
+    }, result);
+  }, {});
+}`;
+
+export default function migrate(context: Context) {
+  const updatedPaths = UTILS_PATHS.filter((filePath) => replaceGlobWithFsGlob(context, filePath));
+  if (updatedPaths.length === 0) {
+    return context;
+  }
+
+  const isStillUsed = UTILS_PATHS.some((filePath) => {
+    const source = context.getFile(filePath);
+    if (!source) {
+      return false;
+    }
+    const parsed = parseAsTypescript(source);
+    return !parsed.success || findImports(parsed.ast, OLD_PACKAGE_NAME).length > 0;
+  });
+
+  if (context.doesFileExist('package.json') && !isStillUsed) {
+    removeDependenciesFromPackageJson(context, [OLD_PACKAGE_NAME], [OLD_PACKAGE_NAME]);
+  }
+
+  return context;
+}
+
+function replaceGlobWithFsGlob(context: Context, utilsPath: string): boolean {
+  if (!context.doesFileExist(utilsPath)) {
+    return false;
+  }
+
+  const source = context.getFile(utilsPath);
+  if (!source || !source.includes(OLD_PACKAGE_NAME)) {
+    return false;
+  }
+
+  const parsed = parseAsTypescript(source);
+  if (!parsed.success) {
+    migrationsDebug(`Failed to parse ${utilsPath}. Error: ${parsed.error.message}`);
+    return false;
+  }
+
+  const globImport = findNamedImport(parsed.ast, OLD_PACKAGE_NAME, 'glob');
+  if (!globImport) {
+    return false;
+  }
+
+  const getEntries = findFunctionDeclaration(parsed.ast, 'getEntries');
+  if (!getEntries) {
+    return false;
+  }
+
+  // The new body calls glob directly, so an aliased import (and its calls) is left alone.
+  if (!callsFunction(getEntries.body, 'glob')) {
+    return false;
+  }
+
+  const { declaration, specifier } = globImport;
+  declaration.specifiers = (declaration.specifiers ?? []).filter((candidate) => candidate !== specifier);
+  if (declaration.specifiers.length === 0) {
+    parsed.ast.program.body.splice(parsed.ast.program.body.indexOf(declaration), 1);
+  }
+  insertImports(parsed.ast, [createImport({ named: [{ name: 'glob' }] }, NEW_PACKAGE_NAME)]);
+
+  getEntries.body = getFunctionBody(GET_ENTRIES_SOURCE);
+
+  context.updateFile(utilsPath, printAST(parsed.ast));
+  return true;
+}
+
+function getFunctionBody(source: string): recast.types.namedTypes.BlockStatement {
+  const parsed = parseAsTypescript(source);
+  if (!parsed.success) {
+    throw parsed.error;
+  }
+
+  const [statement] = parsed.ast.program.body;
+  if (statement?.type !== 'ExportNamedDeclaration' || statement.declaration?.type !== 'FunctionDeclaration') {
+    throw new Error('Failed to parse target function body');
+  }
+
+  return statement.declaration.body;
+}

package/src/codemods/migrations/scripts/020-rename-rspack-feature-flag.test.ts

@@ -0,0 +1,94 @@
+import { describe, expect, it } from 'vitest';
+import migrate from './020-rename-rspack-feature-flag.js';
+import { Context } from '../../context.js';
+
+const ROOT_CPRC_PATH = '.config/.cprc.json';
+const USER_CPRC_PATH = '.cprc.json';
+
+function setupContext(files: { root?: object; user?: object }) {
+  const context = new Context('/virtual');
+  if (files.root) {
+    context.addFile(ROOT_CPRC_PATH, JSON.stringify(files.root, null, 2));
+  }
+  if (files.user) {
+    context.addFile(USER_CPRC_PATH, JSON.stringify(files.user, null, 2));
+  }
+  return context;
+}
+
+function readFeatures(context: Context, path: string) {
+  return JSON.parse(context.getFile(path) || '{}').features;
+}
+
+describe('020-rename-rspack-feature-flag', () => {
+  it('should rename the flag in .config/.cprc.json', () => {
+    const result = migrate(setupContext({ root: { version: '7.9.0', features: { useExperimentalRspack: true } } }));
+
+    expect(readFeatures(result, ROOT_CPRC_PATH)).toEqual({ useRspack: true });
+  });
+
+  it('should move the flag from the plugin .cprc.json to .config/.cprc.json', () => {
+    const result = migrate(
+      setupContext({
+        root: { version: '7.9.0', features: {} },
+        user: { features: { bundleGrafanaUI: false, useExperimentalRspack: true } },
+      })
+    );
+
+    expect(readFeatures(result, ROOT_CPRC_PATH)).toEqual({ useRspack: true });
+    expect(readFeatures(result, USER_CPRC_PATH)).toEqual({ bundleGrafanaUI: false });
+  });
+
+  it('should remove a disabled flag without turning rspack on', () => {
+    const result = migrate(
+      setupContext({
+        root: { version: '7.9.0', features: {} },
+        user: { features: { bundleGrafanaUI: false, useExperimentalRspack: false } },
+      })
+    );
+
+    expect(readFeatures(result, ROOT_CPRC_PATH)).toEqual({});
+    expect(readFeatures(result, USER_CPRC_PATH)).toEqual({ bundleGrafanaUI: false });
+  });
+
+  it('should keep the version and other feature flags', () => {
+    const result = migrate(
+      setupContext({ root: { version: '7.9.0', features: { bundleGrafanaUI: true, useExperimentalRspack: true } } })
+    );
+
+    expect(JSON.parse(result.getFile(ROOT_CPRC_PATH) || '{}')).toEqual({
+      version: '7.9.0',
+      features: { bundleGrafanaUI: true, useRspack: true },
+    });
+  });
+
+  it('should not rewrite config files that never had the flag', () => {
+    const context = setupContext({
+      root: { version: '7.9.0', features: {} },
+      user: { features: { bundleGrafanaUI: false } },
+    });
+    // formatting a rewrite would change, so an untouched file keeps it
+    context.updateFile(ROOT_CPRC_PATH, '{"version":"7.9.0","features":{}}');
+    context.updateFile(USER_CPRC_PATH, '{"features":{"bundleGrafanaUI":false}}');
+
+    const result = migrate(context);
+
+    expect(result.getFile(ROOT_CPRC_PATH)).toBe('{"version":"7.9.0","features":{}}');
+    expect(result.getFile(USER_CPRC_PATH)).toBe('{"features":{"bundleGrafanaUI":false}}');
+  });
+
+  it('should not fail when neither config file exists', () => {
+    const result = migrate(new Context('/virtual'));
+
+    expect(result.hasChanges()).toBe(false);
+  });
+
+  it('should be idempotent', async () => {
+    await expect(migrate).toBeIdempotent(
+      setupContext({
+        root: { version: '7.9.0', features: { useExperimentalRspack: true } },
+        user: { features: { bundleGrafanaUI: false, useExperimentalRspack: false } },
+      })
+    );
+  });
+});

package/src/codemods/migrations/scripts/020-rename-rspack-feature-flag.ts

@@ -0,0 +1,8 @@
+import type { Context } from '../../context.js';
+import { replaceExperimentalRspackFlag } from '../../utils.rspack.js';
+
+// only renames the flag. plugins on the experimental rspack setup move to rspack 2 by running `add rspack`
+export default function migrate(context: Context): Context {
+  replaceExperimentalRspackFlag(context, { enable: false });
+  return context;
+}

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

@@ -7,6 +7,10 @@ import {
   findObjectProperty,
   createImport,
   insertImports,
+  findImports,
+  findNamedImport,
+  findFunctionDeclaration,
+  callsFunction,
 } from './utils.ast.js';
 
 // Helper to create a simple test AST from source code
@@ -31,6 +35,58 @@ function findFirstNode<T extends recast.types.namedTypes.Node>(ast: recast.types
 }
 
 describe('utils.ast', () => {
+  describe('Declaration Utilities', () => {
+    describe('findFunctionDeclaration', () => {
+      it('should find a function declaration by name', () => {
+        const ast = createTestAST(`function foo() {}\nfunction bar() {}`);
+
+        const declaration = findFunctionDeclaration(ast, 'bar');
+
+        expect(declaration?.id?.name).toBe('bar');
+      });
+
+      it('should find an exported function declaration', () => {
+        const ast = createTestAST(`export async function getEntries() {}`);
+
+        const declaration = findFunctionDeclaration(ast, 'getEntries');
+
+        expect(declaration?.async).toBe(true);
+      });
+
+      it('should return null when the function is not declared', () => {
+        const ast = createTestAST(`const getEntries = () => {};`);
+
+        expect(findFunctionDeclaration(ast, 'getEntries')).toBeNull();
+      });
+    });
+
+    describe('callsFunction', () => {
+      it('should return true when the function is called', () => {
+        const ast = createTestAST(`async function run() { const files = await glob('**/*.ts'); }`);
+
+        expect(callsFunction(ast, 'glob')).toBe(true);
+      });
+
+      it('should return true for nested calls', () => {
+        const ast = createTestAST(`items.map((item) => wrap(glob(item)));`);
+
+        expect(callsFunction(ast, 'glob')).toBe(true);
+      });
+
+      it('should return false when the function is only referenced', () => {
+        const ast = createTestAST(`const fn = glob;`);
+
+        expect(callsFunction(ast, 'glob')).toBe(false);
+      });
+
+      it('should return false for a method with the same name', () => {
+        const ast = createTestAST(`fs.glob('**/*.ts');`);
+
+        expect(callsFunction(ast, 'glob')).toBe(false);
+      });
+    });
+  });
+
   describe('Property Utilities', () => {
     describe('isProperty', () => {
       it('should return true for Property nodes', () => {
@@ -191,5 +247,100 @@ describe('utils.ast', () => {
         expect(output).toBe(`import React from 'react';\nimport { map } from 'lodash';\nconst x = 1;`);
       });
     });
+
+    describe('findImports', () => {
+      it('should return an empty array when the package is not imported', () => {
+        const ast = createTestAST(`import React from 'react';\nconst x = 1;`);
+
+        expect(findImports(ast, 'glob')).toEqual([]);
+      });
+
+      it('should return the matching import declaration', () => {
+        const ast = createTestAST(`import React from 'react';\nimport { glob } from 'glob';`);
+
+        const imports = findImports(ast, 'glob');
+
+        expect(imports).toHaveLength(1);
+        expect(imports[0].source.value).toBe('glob');
+      });
+
+      it('should return every declaration importing the package', () => {
+        const ast = createTestAST(`import { glob } from 'glob';\nimport type { GlobOptions } from 'glob';`);
+
+        expect(findImports(ast, 'glob')).toHaveLength(2);
+      });
+
+      it('should not match packages with a similar name', () => {
+        const ast = createTestAST(`import globParent from 'glob-parent';\nimport { glob } from 'node:fs/promises';`);
+
+        expect(findImports(ast, 'glob')).toEqual([]);
+      });
+    });
+
+    describe('findNamedImport', () => {
+      it('should find a named import', () => {
+        const ast = createTestAST(`import { glob } from 'glob';`);
+
+        const match = findNamedImport(ast, 'glob', 'glob');
+
+        expect(match).toBeDefined();
+        expect(match?.declaration.source.value).toBe('glob');
+        expect(match?.specifier.imported.name).toBe('glob');
+        expect(match?.specifier.local?.name).toBe('glob');
+      });
+
+      it('should find an aliased named import by its imported name', () => {
+        const ast = createTestAST(`import { glob as g } from 'glob';`);
+
+        const match = findNamedImport(ast, 'glob', 'glob');
+
+        expect(match).toBeDefined();
+        expect(match?.specifier.local?.name).toBe('g');
+      });
+
+      it('should find the specifier among other specifiers', () => {
+        const ast = createTestAST(`import { globSync, glob } from 'glob';`);
+
+        const match = findNamedImport(ast, 'glob', 'glob');
+
+        expect(match).toBeDefined();
+        expect(match?.declaration.specifiers).toHaveLength(2);
+        expect(match?.specifier.imported.name).toBe('glob');
+      });
+
+      it('should find the specifier in a later declaration of the same package', () => {
+        const ast = createTestAST(`import type { GlobOptions } from 'glob';\nimport { glob } from 'glob';`);
+        const [, secondDeclaration] = findImports(ast, 'glob');
+
+        const match = findNamedImport(ast, 'glob', 'glob');
+
+        expect(match).toBeDefined();
+        expect(match?.declaration).toBe(secondDeclaration);
+      });
+
+      it('should return undefined when only other named imports exist', () => {
+        const ast = createTestAST(`import { globSync } from 'glob';`);
+
+        expect(findNamedImport(ast, 'glob', 'glob')).toBeUndefined();
+      });
+
+      it('should return undefined for a default import', () => {
+        const ast = createTestAST(`import glob from 'glob';`);
+
+        expect(findNamedImport(ast, 'glob', 'glob')).toBeUndefined();
+      });
+
+      it('should return undefined for a namespace import', () => {
+        const ast = createTestAST(`import * as glob from 'glob';`);
+
+        expect(findNamedImport(ast, 'glob', 'glob')).toBeUndefined();
+      });
+
+      it('should return undefined when the package is not imported', () => {
+        const ast = createTestAST(`import { glob } from 'node:fs/promises';`);
+
+        expect(findNamedImport(ast, 'glob', 'glob')).toBeUndefined();
+      });
+    });
   });
 });

package/src/codemods/utils.ast.ts

@@ -45,6 +45,42 @@ export function findVariableDeclaration(
   return found;
 }
 
+export function findFunctionDeclaration(
+  ast: recast.types.ASTNode,
+  functionName: string
+): recast.types.namedTypes.FunctionDeclaration | null {
+  let found = null;
+
+  recast.types.visit(ast, {
+    visitFunctionDeclaration(path) {
+      if (path.node.id?.name === functionName) {
+        found = path.node;
+        return false; // Stop traversal
+      }
+      return this.traverse(path);
+    },
+  });
+
+  return found;
+}
+
+export function callsFunction(ast: recast.types.ASTNode, functionName: string): boolean {
+  let isCalled = false;
+
+  recast.types.visit(ast, {
+    visitCallExpression(path) {
+      const { callee } = path.node;
+      if (callee.type === 'Identifier' && callee.name === functionName) {
+        isCalled = true;
+        return false; // Stop traversal
+      }
+      return this.traverse(path);
+    },
+  });
+
+  return isCalled;
+}
+
 export function isProperty(
   node: recast.types.ASTNode
 ): node is recast.types.namedTypes.Property | recast.types.namedTypes.ObjectProperty {
@@ -108,3 +144,27 @@ export function insertImports(
     ast.program.body.unshift(...imports);
   }
 }
+
+export function findImports(
+  ast: recast.types.namedTypes.File,
+  packageName: string
+): recast.types.namedTypes.ImportDeclaration[] {
+  return ast.program.body.filter(
+    (node): node is recast.types.namedTypes.ImportDeclaration =>
+      node.type === 'ImportDeclaration' && node.source.value === packageName
+  );
+}
+
+export function findNamedImport(ast: recast.types.namedTypes.File, packageName: string, importedName: string) {
+  for (const declaration of findImports(ast, packageName)) {
+    const specifier = declaration.specifiers?.find(
+      (candidate): candidate is recast.types.namedTypes.ImportSpecifier =>
+        candidate.type === 'ImportSpecifier' && candidate.imported.name === importedName
+    );
+    if (specifier) {
+      return { declaration, specifier };
+    }
+  }
+
+  return undefined;
+}

package/src/codemods/utils.rspack.ts

@@ -0,0 +1,58 @@
+import type { Context } from './context.js';
+import { readJsonFile } from './utils.js';
+
+const ROOT_CPRC_PATH = '.config/.cprc.json';
+const USER_CPRC_PATH = '.cprc.json';
+const EXPERIMENTAL_RSPACK_FLAG = 'useExperimentalRspack';
+
+interface CprcConfig {
+  features?: Record<string, unknown>;
+}
+
+/**
+ * Replaces the `useExperimentalRspack` feature flag with `useRspack` in `.config/.cprc.json`, and removes the old flag
+ * from both config files. Every generated plugin's own `.cprc.json` carried the old flag as `false`, and that file
+ * overrides `.config/.cprc.json`. `useRspack` is set when the old flag was on in either file, or when `enable` is true.
+ * Files that need no change are left untouched.
+ */
+export function replaceExperimentalRspackFlag(context: Context, { enable }: { enable: boolean }): void {
+  const wasRspack = [ROOT_CPRC_PATH, USER_CPRC_PATH].some(
+    (path) => readCprc(context, path)?.features?.[EXPERIMENTAL_RSPACK_FLAG] === true
+  );
+
+  updateFeatures(context, USER_CPRC_PATH, (features) => withoutExperimentalFlag(features));
+  updateFeatures(context, ROOT_CPRC_PATH, (features) => {
+    const cleaned = withoutExperimentalFlag(features);
+    return enable || wasRspack ? { ...cleaned, useRspack: true } : cleaned;
+  });
+}
+
+function readCprc(context: Context, path: string): CprcConfig | undefined {
+  if (!context.doesFileExist(path)) {
+    return undefined;
+  }
+  return readJsonFile<CprcConfig>(context, path);
+}
+
+function updateFeatures(
+  context: Context,
+  path: string,
+  update: (features: Record<string, unknown>) => Record<string, unknown>
+): void {
+  const config = readCprc(context, path);
+  if (!config) {
+    return;
+  }
+
+  const features = config.features ?? {};
+  const updatedFeatures = update(features);
+  if (JSON.stringify(updatedFeatures) === JSON.stringify(features)) {
+    return;
+  }
+
+  context.updateFile(path, JSON.stringify({ ...config, features: updatedFeatures }, null, 2));
+}
+
+function withoutExperimentalFlag(features: Record<string, unknown>): Record<string, unknown> {
+  return Object.fromEntries(Object.entries(features).filter(([name]) => name !== EXPERIMENTAL_RSPACK_FLAG));
+}

package/src/codemods/utils.test.ts

@@ -236,8 +236,11 @@ describe('utils', () => {
 
     it('reads feature flags from the .cprc.json files', async () => {
       await mkdir(join(tmpDir, '.config'));
-      await writeFile(join(tmpDir, '.config/.cprc.json'), JSON.stringify({ features: { bundleGrafanaUI: true } }));
-      await writeFile(join(tmpDir, '.cprc.json'), JSON.stringify({ features: { useExperimentalRspack: true } }));
+      await writeFile(
+        join(tmpDir, '.config/.cprc.json'),
+        JSON.stringify({ features: { bundleGrafanaUI: true, useRspack: true } })
+      );
+      await writeFile(join(tmpDir, '.cprc.json'), JSON.stringify({ features: { bundleGrafanaUI: true } }));
       expect(getTemplateDataFromContext(pluginContext())).toMatchObject({
         bundleGrafanaUI: true,
         frontendBundler: 'rspack',

package/src/commands/generate.command.ts

@@ -140,16 +140,8 @@ function getActionsForTemplateFolder({
     files = files.filter((file) => path.basename(file) !== 'npmrc');
   }
 
-  // filter out frontend bundler based on user choice
-  files = files.filter((file) => {
-    if (file.includes('webpack') && templateData.useExperimentalRspack) {
-      return false;
-    }
-    if (file.includes('rspack') && !templateData.useExperimentalRspack) {
-      return false;
-    }
-    return true;
-  });
+  // new plugins always use webpack. the rspack templates are only rendered by `add rspack`
+  files = files.filter((file) => !file.includes('rspack'));
 
   function getFileExportPath(f: string) {
     return path.relative(folderPath, path.dirname(f));

package/src/constants.ts

@@ -56,7 +56,6 @@ export const EXTRA_TEMPLATE_VARIABLES = {
 
 export const DEFAULT_FEATURE_FLAGS = {
   bundleGrafanaUI: false,
-  useExperimentalRspack: false,
   useExperimentalUpdates: true,
 };
 

package/src/types.ts

@@ -23,7 +23,7 @@ export type TemplateData = {
   version: string;
   bundleGrafanaUI: boolean;
   scenesVersion: string;
-  useExperimentalRspack: boolean;
+  useRspack: boolean;
   pluginExecutable?: string;
   frontendBundler: 'webpack' | 'rspack';
 };

package/src/utils/tests/utils.config.test.ts

@@ -44,6 +44,16 @@ describe('getConfig', () => {
       });
     });
 
+    it('should not let cli args switch new plugins to rspack', async () => {
+      mocks.argv = {
+        'feature-flags': 'useRspack',
+      };
+      const config = getConfig(tmpDir);
+
+      expect(config.features).toEqual(DEFAULT_FEATURE_FLAGS);
+      expect(config.features).not.toHaveProperty('useRspack');
+    });
+
     it('should override default feature flags via cli args', async () => {
       mocks.argv = {
         'feature-flags': 'bundleGrafanaUI',

package/src/utils/utils.config.ts

@@ -11,7 +11,8 @@ import { EOL } from 'node:os';
 
 export type FeatureFlags = {
   bundleGrafanaUI?: boolean;
-  useExperimentalRspack?: boolean;
+  // set by `add rspack` in .config/.cprc.json. not a default flag, so --feature-flags cannot set it
+  useRspack?: boolean;
   useExperimentalUpdates?: boolean;
 };
 

package/src/utils/utils.templates.ts

@@ -123,8 +123,8 @@ export function buildTemplateData({
     bundleGrafanaUI: features.bundleGrafanaUI ?? DEFAULT_FEATURE_FLAGS.bundleGrafanaUI,
     scenesVersion: '^8.17.0',
     pluginExecutable: pluginJson.executable,
-    useExperimentalRspack: Boolean(features.useExperimentalRspack),
-    frontendBundler: features.useExperimentalRspack ? 'rspack' : 'webpack',
+    useRspack: Boolean(features.useRspack),
+    frontendBundler: features.useRspack ? 'rspack' : 'webpack',
   };
 }
 
@@ -140,7 +140,7 @@ export function getTemplateData(cliArgs?: GenerateCliArgs): TemplateData {
   const { features } = getConfig();
   const currentVersion = CURRENT_APP_VERSION;
   const bundleGrafanaUI = features.bundleGrafanaUI ?? DEFAULT_FEATURE_FLAGS.bundleGrafanaUI;
-  const frontendBundler = features.useExperimentalRspack ? 'rspack' : 'webpack';
+  const frontendBundler = features.useRspack ? 'rspack' : 'webpack';
 
   let templateData: TemplateData;
 
@@ -164,7 +164,7 @@ export function getTemplateData(cliArgs?: GenerateCliArgs): TemplateData {
       version: currentVersion,
       bundleGrafanaUI,
       scenesVersion: '^8.17.0',
-      useExperimentalRspack: Boolean(features.useExperimentalRspack),
+      useRspack: Boolean(features.useRspack),
       frontendBundler,
     };
     // Updating or migrating a plugin

package/templates/common/.config/AGENTS/instructions.md

@@ -28,7 +28,7 @@ Your training data about the Grafana API is out of date. Use the official docume
 - **Do not change plugin ID or plugin type** in `plugin.json`.
 - Any modifications to `plugin.json` require a **restart of the Grafana server**. Remind the user of this.
 - Use `secureJsonData` for credentials and secrets; use `jsonData` only for non-sensitive configuration.
-- **You must use webpack** with the configuration provided in `.config/` for frontend builds.
+- **You must use {{frontendBundler}}** with the configuration provided in `.config/` for frontend builds.
 - **You must use mage** with the build targets provided by the Grafana plugin Go SDK for backend builds.
-- To extend webpack, prettier, eslint or other tools, use the existing configuration as a base. Follow the guide: https://grafana.com/developers/plugin-tools/how-to-guides/extend-configurations.md
+- To extend {{frontendBundler}}, prettier, eslint or other tools, use the existing configuration as a base. Follow the guide: https://grafana.com/developers/plugin-tools/how-to-guides/extend-configurations.md
 - Use **`@grafana/plugin-e2e`** for end-to-end testing. Read @./.config/AGENTS/e2e-testing.md before writing or modifying e2e tests.