@grafana/create-plugin 6.7.1-canary.2370.20798217827.0 → 6.8.0-canary.2356.20813734793.0

package/dist/codemods/additions/additions.js

@@ -1,8 +1,8 @@
 var defaultAdditions = [
   {
-    name: "example-addition",
-    description: "Adds an example addition to the plugin",
-    scriptPath: import.meta.resolve("./scripts/example-addition.js")
+    name: "bundle-grafana-ui",
+    description: "Configures the plugin to bundle @grafana/ui instead of using the external provided by Grafana",
+    scriptPath: import.meta.resolve("./scripts/bundle-grafana-ui/index.js")
   }
 ];
 

package/dist/codemods/additions/scripts/bundle-grafana-ui/index.js

@@ -0,0 +1,230 @@
+import * as v from 'valibot';
+import * as recast from 'recast';
+import { coerce, gte } from 'semver';
+import { additionsDebug } from '../../../utils.js';
+import { updateBundlerConfig } from '../../../utils.bundler-config.js';
+import { updateExternalsArray } from '../../../utils.externals.js';
+
+const { builders } = recast.types;
+const PLUGIN_JSON_PATH = "src/plugin.json";
+const MIN_GRAFANA_VERSION = "10.2.0";
+const schema = v.object({});
+function bundleGrafanaUI(context, _options) {
+  additionsDebug("Running bundle-grafana-ui addition...");
+  ensureMinGrafanaVersion(context);
+  updateExternalsArray(context, createBundleGrafanaUIModifier());
+  updateBundlerConfig(context, createResolveModifier(), createModuleRulesModifier());
+  return context;
+}
+function isGrafanaUiRegex(element) {
+  if (element.type === "RegExpLiteral") {
+    const regexNode = element;
+    return regexNode.pattern === "^@grafana\\/ui" && regexNode.flags === "i";
+  }
+  if (element.type === "Literal" && "regex" in element && element.regex) {
+    const regex = element.regex;
+    return regex.pattern === "^@grafana\\/ui" && regex.flags === "i";
+  }
+  return false;
+}
+function isGrafanaDataRegex(element) {
+  if (element.type === "RegExpLiteral") {
+    const regexNode = element;
+    return regexNode.pattern === "^@grafana\\/data" && regexNode.flags === "i";
+  }
+  if (element.type === "Literal" && "regex" in element && element.regex) {
+    const regex = element.regex;
+    return regex.pattern === "^@grafana\\/data" && regex.flags === "i";
+  }
+  return false;
+}
+function removeGrafanaUiAndAddReactInlineSvg(externalsArray) {
+  let hasChanges = false;
+  let hasGrafanaUiExternal = false;
+  let hasReactInlineSvg = false;
+  for (const element of externalsArray.elements) {
+    if (!element) {
+      continue;
+    }
+    if (isGrafanaUiRegex(element)) {
+      hasGrafanaUiExternal = true;
+    }
+    if ((element.type === "Literal" || element.type === "StringLiteral") && "value" in element && typeof element.value === "string" && element.value === "react-inlinesvg") {
+      hasReactInlineSvg = true;
+    }
+  }
+  if (hasGrafanaUiExternal) {
+    externalsArray.elements = externalsArray.elements.filter((element) => {
+      if (!element) {
+        return true;
+      }
+      return !isGrafanaUiRegex(element);
+    });
+    hasChanges = true;
+    additionsDebug("Removed /^@grafana\\/ui/i from externals array");
+  }
+  if (!hasReactInlineSvg) {
+    let insertIndex = -1;
+    for (let i = 0; i < externalsArray.elements.length; i++) {
+      const element = externalsArray.elements[i];
+      if (element && isGrafanaDataRegex(element)) {
+        insertIndex = i + 1;
+        break;
+      }
+    }
+    if (insertIndex >= 0) {
+      externalsArray.elements.splice(insertIndex, 0, builders.literal("react-inlinesvg"));
+    } else {
+      externalsArray.elements.push(builders.literal("react-inlinesvg"));
+    }
+    hasChanges = true;
+    additionsDebug("Added 'react-inlinesvg' to externals array");
+  }
+  return hasChanges;
+}
+function createBundleGrafanaUIModifier() {
+  return (externalsArray) => {
+    return removeGrafanaUiAndAddReactInlineSvg(externalsArray);
+  };
+}
+function createResolveModifier() {
+  return (resolveObject) => {
+    if (!resolveObject.properties) {
+      return false;
+    }
+    let hasChanges = false;
+    let hasMjsExtension = false;
+    let extensionsProperty = null;
+    for (const prop of resolveObject.properties) {
+      if (!prop || prop.type !== "Property" && prop.type !== "ObjectProperty") {
+        continue;
+      }
+      const key = "key" in prop ? prop.key : null;
+      const value = "value" in prop ? prop.value : null;
+      if (key && key.type === "Identifier") {
+        if (key.name === "extensions" && value && value.type === "ArrayExpression") {
+          extensionsProperty = prop;
+          for (const element of value.elements) {
+            if (element && (element.type === "Literal" || element.type === "StringLiteral") && "value" in element && element.value === ".mjs") {
+              hasMjsExtension = true;
+              break;
+            }
+          }
+        }
+      }
+    }
+    if (!hasMjsExtension && extensionsProperty && "value" in extensionsProperty) {
+      const extensionsArray = extensionsProperty.value;
+      extensionsArray.elements.push(builders.literal(".mjs"));
+      hasChanges = true;
+      additionsDebug("Added '.mjs' to resolve.extensions");
+    }
+    return hasChanges;
+  };
+}
+function createModuleRulesModifier() {
+  return (moduleObject) => {
+    if (!moduleObject.properties) {
+      return false;
+    }
+    let hasChanges = false;
+    let hasMjsRule = false;
+    let rulesProperty = null;
+    for (const prop of moduleObject.properties) {
+      if (!prop || prop.type !== "Property" && prop.type !== "ObjectProperty") {
+        continue;
+      }
+      const key = "key" in prop ? prop.key : null;
+      const value = "value" in prop ? prop.value : null;
+      if (key && key.type === "Identifier" && key.name === "rules" && value && value.type === "ArrayExpression") {
+        rulesProperty = prop;
+        for (const element of value.elements) {
+          if (element && element.type === "ObjectExpression" && element.properties) {
+            for (const ruleProp of element.properties) {
+              if (ruleProp && (ruleProp.type === "Property" || ruleProp.type === "ObjectProperty") && "key" in ruleProp && ruleProp.key.type === "Identifier" && ruleProp.key.name === "test") {
+                const testValue = "value" in ruleProp ? ruleProp.value : null;
+                if (testValue) {
+                  if (testValue.type === "RegExpLiteral" && "pattern" in testValue && testValue.pattern === "\\.mjs$") {
+                    hasMjsRule = true;
+                    break;
+                  }
+                  if (testValue.type === "Literal" && "regex" in testValue && testValue.regex && typeof testValue.regex === "object" && "pattern" in testValue.regex && testValue.regex.pattern === "\\.mjs$") {
+                    hasMjsRule = true;
+                    break;
+                  }
+                  if (testValue.type === "Literal" && "value" in testValue && typeof testValue.value === "string" && testValue.value.includes(".mjs")) {
+                    hasMjsRule = true;
+                    break;
+                  }
+                }
+              }
+            }
+          }
+          if (hasMjsRule) {
+            break;
+          }
+        }
+        break;
+      }
+    }
+    if (!hasMjsRule && rulesProperty && "value" in rulesProperty) {
+      const rulesArray = rulesProperty.value;
+      const mjsRule = builders.objectExpression([
+        builders.property("init", builders.identifier("test"), builders.literal(/\.mjs$/)),
+        builders.property("init", builders.identifier("include"), builders.literal(/node_modules/)),
+        builders.property(
+          "init",
+          builders.identifier("resolve"),
+          builders.objectExpression([
+            builders.property("init", builders.identifier("fullySpecified"), builders.literal(false))
+          ])
+        ),
+        builders.property("init", builders.identifier("type"), builders.literal("javascript/auto"))
+      ]);
+      rulesArray.elements.splice(1, 0, mjsRule);
+      hasChanges = true;
+      additionsDebug("Added module rule for .mjs files in node_modules with resolve.fullySpecified: false");
+    }
+    return hasChanges;
+  };
+}
+function ensureMinGrafanaVersion(context) {
+  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(
+        `
+\u26A0\uFE0F  Updated grafanaDependency to ">=${MIN_GRAFANA_VERSION}" because bundling @grafana/ui is only supported from Grafana ${MIN_GRAFANA_VERSION} onwards.
+`
+      );
+    } else {
+      additionsDebug(
+        `grafanaDependency "${currentGrafanaDep}" already meets minimum requirement of ${MIN_GRAFANA_VERSION}`
+      );
+    }
+  } catch (error) {
+    additionsDebug(`Error updating ${PLUGIN_JSON_PATH}:`, error);
+  }
+}
+
+export { bundleGrafanaUI as default, schema };

package/dist/codemods/utils.bundler-config.js

@@ -0,0 +1,102 @@
+import * as recast from 'recast';
+import * as typeScriptParser from 'recast/parsers/typescript.js';
+import { additionsDebug } from './utils.js';
+
+const WEBPACK_CONFIG_PATH = ".config/webpack/webpack.config.ts";
+const RSPACK_CONFIG_PATH = ".config/rspack/rspack.config.ts";
+function updateBundlerConfig(context, resolveModifier, moduleRulesModifier) {
+  if (!resolveModifier && !moduleRulesModifier) {
+    return;
+  }
+  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;
+                  if (resolveModifier && key && key.type === "Identifier" && key.name === "resolve" && value && value.type === "ObjectExpression") {
+                    hasChanges = resolveModifier(value) || hasChanges;
+                  }
+                  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;
+  }
+  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;
+                  if (resolveModifier && key && key.type === "Identifier" && key.name === "resolve" && value && value.type === "ObjectExpression") {
+                    hasChanges = resolveModifier(value) || hasChanges;
+                  }
+                  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);
+      }
+    }
+  }
+}
+
+export { updateBundlerConfig };

package/dist/codemods/utils.externals.js

@@ -0,0 +1,116 @@
+import * as recast from 'recast';
+import * as typeScriptParser from 'recast/parsers/typescript.js';
+import { additionsDebug } from './utils.js';
+
+const EXTERNALS_PATH = ".config/bundler/externals.ts";
+const WEBPACK_CONFIG_PATH = ".config/webpack/webpack.config.ts";
+function updateExternalsArray(context, modifier) {
+  if (context.doesFileExist(EXTERNALS_PATH)) {
+    additionsDebug(`Found ${EXTERNALS_PATH}, updating externals array...`);
+    const externalsContent = context.getFile(EXTERNALS_PATH);
+    if (externalsContent) {
+      try {
+        const ast = recast.parse(externalsContent, {
+          parser: typeScriptParser
+        });
+        let hasChanges = false;
+        recast.visit(ast, {
+          visitVariableDeclarator(path) {
+            const { node } = path;
+            if (node.id.type === "Identifier" && node.id.name === "externals" && node.init && node.init.type === "ArrayExpression") {
+              additionsDebug("Found externals array in externals.ts");
+              if (modifier(node.init)) {
+                hasChanges = true;
+              }
+            }
+            return this.traverse(path);
+          }
+        });
+        if (hasChanges) {
+          const output = recast.print(ast, {
+            tabWidth: 2,
+            trailingComma: true,
+            lineTerminator: "\n"
+          });
+          context.updateFile(EXTERNALS_PATH, output.code);
+          additionsDebug(`Updated ${EXTERNALS_PATH}`);
+          return true;
+        }
+        return false;
+      } catch (error) {
+        additionsDebug(`Error updating ${EXTERNALS_PATH}:`, error);
+        return false;
+      }
+    }
+  }
+  additionsDebug(`Checking for ${WEBPACK_CONFIG_PATH}...`);
+  if (context.doesFileExist(WEBPACK_CONFIG_PATH)) {
+    additionsDebug(`Found ${WEBPACK_CONFIG_PATH}, checking for inline externals...`);
+    const webpackContent = context.getFile(WEBPACK_CONFIG_PATH);
+    if (webpackContent) {
+      try {
+        const ast = recast.parse(webpackContent, {
+          parser: typeScriptParser
+        });
+        let hasChanges = false;
+        let foundExternals = 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;
+                  if (key && key.type === "Identifier" && key.name === "externals" && value && value.type === "ArrayExpression") {
+                    foundExternals = true;
+                    additionsDebug("Found externals property in webpack.config.ts");
+                    if (modifier(value)) {
+                      hasChanges = true;
+                    }
+                  }
+                }
+              }
+            }
+            return this.traverse(path);
+          },
+          visitProperty(path) {
+            const { node } = path;
+            if (node.key && node.key.type === "Identifier" && node.key.name === "externals" && node.value && node.value.type === "ArrayExpression") {
+              if (!foundExternals) {
+                foundExternals = true;
+                additionsDebug("Found externals property in webpack.config.ts (via visitProperty)");
+              }
+              if (modifier(node.value)) {
+                hasChanges = true;
+              }
+            }
+            return this.traverse(path);
+          }
+        });
+        if (!foundExternals) {
+          additionsDebug("No externals property found in webpack.config.ts");
+        }
+        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}`);
+          return true;
+        }
+        return false;
+      } catch (error) {
+        additionsDebug(`Error updating ${WEBPACK_CONFIG_PATH}:`, error);
+        return false;
+      }
+    }
+  }
+  additionsDebug("No externals configuration found");
+  return false;
+}
+
+export { updateExternalsArray };

package/dist/codemods/utils.js

@@ -205,6 +205,6 @@ function sortObjectByKeys(obj) {
   return Object.keys(obj).sort().reduce((acc, key) => ({ ...acc, [key]: obj[key] }), {});
 }
 const migrationsDebug = debug.extend("migrations");
-debug.extend("additions");
+const additionsDebug = debug.extend("additions");
 
-export { addDependenciesToPackageJson, flushChanges, formatFiles, installNPMDependencies, isVersionGreater, migrationsDebug, printChanges, readJsonFile, removeDependenciesFromPackageJson };
+export { addDependenciesToPackageJson, additionsDebug, flushChanges, formatFiles, installNPMDependencies, isVersionGreater, migrationsDebug, printChanges, readJsonFile, removeDependenciesFromPackageJson };

package/dist/constants.js

@@ -30,7 +30,6 @@ const EXTRA_TEMPLATE_VARIABLES = {
   grafanaImage: "grafana-enterprise"
 };
 const DEFAULT_FEATURE_FLAGS = {
-  bundleGrafanaUI: false,
   useExperimentalRspack: false,
   useExperimentalUpdates: true
 };

package/dist/utils/utils.templates.js

@@ -1,4 +1,4 @@
-import { DEFAULT_FEATURE_FLAGS, EXTRA_TEMPLATE_VARIABLES, PLUGIN_TYPES, TEMPLATE_PATHS, EXPORT_PATH_PREFIX } from '../constants.js';
+import { EXTRA_TEMPLATE_VARIABLES, PLUGIN_TYPES, TEMPLATE_PATHS, EXPORT_PATH_PREFIX } from '../constants.js';
 import { isFile, getExportFileName, filterOutCommonFiles, isFileStartingWith } from './utils.files.js';
 import { getPackageManagerFromUserAgent, getPackageManagerInstallCmd, getPackageManagerWithFallback } from './utils.packageManager.js';
 import { normalizeId, renderHandlebarsTemplate } from './utils.handlebars.js';
@@ -56,7 +56,6 @@ function renderTemplateFromFile(templateFile, data) {
 function getTemplateData(cliArgs) {
   const { features } = getConfig();
   const currentVersion = CURRENT_APP_VERSION;
-  const bundleGrafanaUI = features.bundleGrafanaUI ?? DEFAULT_FEATURE_FLAGS.bundleGrafanaUI;
   const isAppType = (pluginType) => pluginType === PLUGIN_TYPES.app || pluginType === PLUGIN_TYPES.scenes;
   const isNPM = (packageManagerName) => packageManagerName === "npm";
   const frontendBundler = features.useExperimentalRspack ? "rspack" : "webpack";
@@ -77,7 +76,6 @@ function getTemplateData(cliArgs) {
       isAppType: isAppType(cliArgs.pluginType),
       isNPM: isNPM(packageManagerName),
       version: currentVersion,
-      bundleGrafanaUI,
       scenesVersion: "^6.10.4",
       useExperimentalRspack: Boolean(features.useExperimentalRspack),
       frontendBundler
@@ -98,7 +96,6 @@ function getTemplateData(cliArgs) {
       isAppType: isAppType(pluginJson.type),
       isNPM: isNPM(packageManagerName),
       version: currentVersion,
-      bundleGrafanaUI,
       scenesVersion: "^6.10.4",
       pluginExecutable: pluginJson.executable,
       useExperimentalRspack: Boolean(features.useExperimentalRspack),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@grafana/create-plugin",
-  "version": "6.7.1-canary.2370.20798217827.0",
+  "version": "6.8.0-canary.2356.20813734793.0",
   "repository": {
     "directory": "packages/create-plugin",
     "url": "https://github.com/grafana/plugin-tools"
@@ -55,5 +55,5 @@
   "engines": {
     "node": ">=20"
   },
-  "gitHead": "bb9cbddbe1ddc57c7343dcaa5671238c128be212"
+  "gitHead": "7dc0a04f78794e1d23d24b13fa2dfaa5a4312bc3"
 }

package/src/codemods/additions/additions.ts

@@ -2,8 +2,8 @@ import { Codemod } from '../types.js';
 
 export default [
   {
-    name: 'example-addition',
-    description: 'Adds an example addition to the plugin',
-    scriptPath: import.meta.resolve('./scripts/example-addition.js'),
+    name: 'bundle-grafana-ui',
+    description: 'Configures the plugin to bundle @grafana/ui instead of using the external provided by Grafana',
+    scriptPath: import.meta.resolve('./scripts/bundle-grafana-ui/index.js'),
   },
 ] satisfies Codemod[];

package/src/codemods/additions/scripts/bundle-grafana-ui/README.md

@@ -0,0 +1,68 @@
+# Bundle Grafana UI Addition
+
+Configures a Grafana plugin to bundle `@grafana/ui` instead of using the version of `@grafana/ui` provided by the Grafana runtime environment.
+
+## Usage
+
+```bash
+npx @grafana/create-plugin add bundle-grafana-ui
+```
+
+## Requirements
+
+- **Grafana >= 10.2.0**: Bundling `@grafana/ui` is only supported from Grafana 10.2.0 onwards. If your plugin's `grafanaDependency` is set to a version lower than 10.2.0, the script will automatically update it to `>=10.2.0` and display a warning message.
+
+## What This Addition Does
+
+By default, Grafana plugins use `@grafana/ui` as an external dependency provided by Grafana at runtime. This addition modifies your plugin's bundler configuration to include `@grafana/ui` in your plugin bundle instead.
+
+This addition:
+
+1. **Updates `src/plugin.json`** - Ensures `grafanaDependency` is set to `>=10.2.0` or higher
+2. **Removes `/^@grafana\/ui/i` from externals** - This tells the bundler to include `@grafana/ui` in your plugin bundle rather than expecting Grafana to provide it
+3. **Adds `'react-inlinesvg'` to externals** - Since `@grafana/ui` uses `react-inlinesvg` internally and Grafana provides it at runtime, we add it to externals to avoid bundling it twice
+4. **Updates bundler resolve configuration** - Adds `.mjs` to `resolve.extensions` and sets `resolve.fullySpecified: false` to handle ESM imports from `@grafana/ui` and its dependencies (e.g., `rc-picker`, `ol/format/WKT`)
+
+## When to Use This
+
+Consider bundling `@grafana/ui` when:
+
+- You want to ensure consistent behavior across different Grafana versions
+- You're experiencing compatibility issues with the Grafana-provided `@grafana/ui`
+
+## Trade-offs
+
+**Pros:**
+
+- Full control over the `@grafana/ui` version your plugin uses
+- Consistent behavior regardless of Grafana version
+
+**Cons:**
+
+- Larger plugin bundle size
+- Potential visual inconsistencies if your bundled version differs significantly from Grafana's version
+- You'll need to manually update `@grafana/ui` in your plugin dependencies
+
+## Files Modified
+
+```
+your-plugin/
+├── src/
+│   └── plugin.json             # Modified: grafanaDependency updated if needed
+├── .config/
+│   ├── bundler/
+│   │   └── externals.ts        # Modified: removes @grafana/ui, adds react-inlinesvg
+│   └── rspack/
+│       └── rspack.config.ts     # Modified: resolve.extensions and resolve.fullySpecified updated
+```
+
+Or for legacy structure:
+
+```
+your-plugin/
+├── src/
+│   └── plugin.json             # Modified: grafanaDependency updated if needed
+├── .config/
+│   └── webpack/
+│       └── webpack.config.ts   # Modified: externals array and resolve configuration updated
+```