@grafana/create-plugin 6.3.0-canary.2319.19627830170.0 → 6.3.0-canary.2320.19631436862.0

package/dist/codemods/additions/additions.js

@@ -3,6 +3,11 @@ var defaultAdditions = [
     name: "example-addition",
     description: "Adds an example addition to the plugin",
     scriptPath: import.meta.resolve("./scripts/example-addition.js")
+  },
+  {
+    name: "i18n",
+    description: "Adds internationalization (i18n) support to the plugin",
+    scriptPath: import.meta.resolve("./scripts/i18n/index.js")
   }
 ];
 

package/dist/codemods/additions/scripts/i18n/code-generation.js

@@ -0,0 +1,122 @@
+import * as recast from 'recast';
+import * as babelParser from 'recast/parsers/babel-ts.js';
+import { additionsDebug } from '../../../utils.js';
+
+const { builders } = recast.types;
+function addI18nInitialization(context, needsBackwardCompatibility) {
+  const moduleTsPath = context.doesFileExist("src/module.ts") ? "src/module.ts" : context.doesFileExist("src/module.tsx") ? "src/module.tsx" : null;
+  if (!moduleTsPath) {
+    additionsDebug("No module.ts or module.tsx found, skipping i18n initialization");
+    return;
+  }
+  const moduleContent = context.getFile(moduleTsPath);
+  if (!moduleContent) {
+    return;
+  }
+  if (moduleContent.includes("initPluginTranslations")) {
+    additionsDebug("i18n already initialized in module file");
+    return;
+  }
+  try {
+    const ast = recast.parse(moduleContent, {
+      parser: babelParser
+    });
+    const imports = [];
+    imports.push(
+      builders.importDeclaration(
+        [builders.importSpecifier(builders.identifier("initPluginTranslations"))],
+        builders.literal("@grafana/i18n")
+      )
+    );
+    imports.push(
+      builders.importDeclaration(
+        [builders.importDefaultSpecifier(builders.identifier("pluginJson"))],
+        builders.literal("plugin.json")
+      )
+    );
+    if (needsBackwardCompatibility) {
+      imports.push(
+        builders.importDeclaration(
+          [builders.importSpecifier(builders.identifier("config"))],
+          builders.literal("@grafana/runtime")
+        )
+      );
+      imports.push(
+        builders.importDeclaration(
+          [builders.importDefaultSpecifier(builders.identifier("semver"))],
+          builders.literal("semver")
+        )
+      );
+      imports.push(
+        builders.importDeclaration(
+          [builders.importSpecifier(builders.identifier("loadResources"))],
+          builders.literal("./loadResources")
+        )
+      );
+    }
+    const firstImportIndex = ast.program.body.findIndex((node) => node.type === "ImportDeclaration");
+    if (firstImportIndex !== -1) {
+      ast.program.body.splice(firstImportIndex + 1, 0, ...imports);
+    } else {
+      ast.program.body.unshift(...imports);
+    }
+    const i18nInitCode = needsBackwardCompatibility ? `// Before Grafana version 12.1.0 the plugin is responsible for loading translation resources
+// In Grafana version 12.1.0 and later Grafana is responsible for loading translation resources
+const loaders = semver.lt(config?.buildInfo?.version, '12.1.0') ? [loadResources] : [];
+
+await initPluginTranslations(pluginJson.id, loaders);` : `await initPluginTranslations(pluginJson.id);`;
+    const initAst = recast.parse(i18nInitCode, {
+      parser: babelParser
+    });
+    const lastImportIndex = ast.program.body.findLastIndex((node) => node.type === "ImportDeclaration");
+    if (lastImportIndex !== -1) {
+      ast.program.body.splice(lastImportIndex + 1, 0, ...initAst.program.body);
+    } else {
+      ast.program.body.unshift(...initAst.program.body);
+    }
+    const output = recast.print(ast, {
+      tabWidth: 2,
+      trailingComma: true,
+      lineTerminator: "\n"
+    }).code;
+    context.updateFile(moduleTsPath, output);
+    additionsDebug(`Updated ${moduleTsPath} with i18n initialization`);
+  } catch (error) {
+    additionsDebug("Error updating module file:", error);
+  }
+}
+function createLoadResourcesFile(context) {
+  const loadResourcesPath = "src/loadResources.ts";
+  if (context.doesFileExist(loadResourcesPath)) {
+    additionsDebug("loadResources.ts already exists, skipping");
+    return;
+  }
+  const pluginJsonRaw = context.getFile("src/plugin.json");
+  if (!pluginJsonRaw) {
+    additionsDebug("Cannot create loadResources.ts without plugin.json");
+    return;
+  }
+  const loadResourcesContent = `import { LANGUAGES, ResourceLoader, Resources } from '@grafana/i18n';
+import pluginJson from 'plugin.json';
+
+const resources = LANGUAGES.reduce<Record<string, () => Promise<{ default: Resources }>>>((acc, lang) => {
+  acc[lang.code] = async () => await import(\`./locales/\${lang.code}/\${pluginJson.id}.json\`);
+  return acc;
+}, {});
+
+export const loadResources: ResourceLoader = async (resolvedLanguage: string) => {
+  try {
+    const translation = await resources[resolvedLanguage]();
+    return translation.default;
+  } catch (error) {
+    // This makes sure that the plugin doesn't crash when the resolved language in Grafana isn't supported by the plugin
+    console.error(\`The plugin '\${pluginJson.id}' doesn't support the language '\${resolvedLanguage}'\`, error);
+    return {};
+  }
+};
+`;
+  context.addFile(loadResourcesPath, loadResourcesContent);
+  additionsDebug("Created src/loadResources.ts for backward compatibility");
+}
+
+export { addI18nInitialization, createLoadResourcesFile };

package/dist/codemods/additions/scripts/i18n/config-updates.js

@@ -0,0 +1,113 @@
+import { coerce, gte } from 'semver';
+import { parseDocument, stringify } from 'yaml';
+import { additionsDebug } from '../../../utils.js';
+
+function updateDockerCompose(context) {
+  if (!context.doesFileExist("docker-compose.yaml")) {
+    additionsDebug("docker-compose.yaml not found, skipping");
+    return;
+  }
+  const composeContent = context.getFile("docker-compose.yaml");
+  if (!composeContent) {
+    return;
+  }
+  try {
+    const composeDoc = parseDocument(composeContent);
+    const currentEnv = composeDoc.getIn(["services", "grafana", "environment"]);
+    if (!currentEnv) {
+      additionsDebug("No environment section found in docker-compose.yaml, skipping");
+      return;
+    }
+    if (typeof currentEnv === "object") {
+      const envMap = currentEnv;
+      const toggleValue = envMap.get("GF_FEATURE_TOGGLES_ENABLE");
+      if (toggleValue) {
+        const toggleStr = toggleValue.toString();
+        if (toggleStr.includes("localizationForPlugins")) {
+          additionsDebug("localizationForPlugins already in GF_FEATURE_TOGGLES_ENABLE");
+          return;
+        }
+        composeDoc.setIn(
+          ["services", "grafana", "environment", "GF_FEATURE_TOGGLES_ENABLE"],
+          `${toggleStr},localizationForPlugins`
+        );
+      } else {
+        composeDoc.setIn(["services", "grafana", "environment", "GF_FEATURE_TOGGLES_ENABLE"], "localizationForPlugins");
+      }
+      context.updateFile("docker-compose.yaml", stringify(composeDoc));
+      additionsDebug("Updated docker-compose.yaml with localizationForPlugins feature toggle");
+    }
+  } catch (error) {
+    additionsDebug("Error updating docker-compose.yaml:", error);
+  }
+}
+function updatePluginJson(context, locales, needsBackwardCompatibility) {
+  if (!context.doesFileExist("src/plugin.json")) {
+    additionsDebug("src/plugin.json not found, skipping");
+    return;
+  }
+  const pluginJsonRaw = context.getFile("src/plugin.json");
+  if (!pluginJsonRaw) {
+    return;
+  }
+  try {
+    const pluginJson = JSON.parse(pluginJsonRaw);
+    const existingLanguages = Array.isArray(pluginJson.languages) ? pluginJson.languages : [];
+    const mergedLanguages = [.../* @__PURE__ */ new Set([...existingLanguages, ...locales])];
+    pluginJson.languages = mergedLanguages;
+    if (!pluginJson.dependencies) {
+      pluginJson.dependencies = {};
+    }
+    const currentGrafanaDep = pluginJson.dependencies.grafanaDependency || ">=11.0.0";
+    const targetVersion = needsBackwardCompatibility ? "11.0.0" : "12.1.0";
+    const minVersion = coerce(targetVersion);
+    const currentVersion = coerce(currentGrafanaDep.replace(/^[><=]+/, ""));
+    if (!currentVersion || !minVersion || !gte(currentVersion, minVersion)) {
+      pluginJson.dependencies.grafanaDependency = `>=${targetVersion}`;
+      additionsDebug(`Updated grafanaDependency to >=${targetVersion}`);
+    }
+    context.updateFile("src/plugin.json", JSON.stringify(pluginJson, null, 2));
+    additionsDebug("Updated src/plugin.json with languages:", locales);
+  } catch (error) {
+    additionsDebug("Error updating src/plugin.json:", error);
+  }
+}
+function createI18nextConfig(context) {
+  if (context.doesFileExist("i18next.config.ts")) {
+    additionsDebug("i18next.config.ts already exists, skipping");
+    return;
+  }
+  const pluginJsonRaw = context.getFile("src/plugin.json");
+  if (!pluginJsonRaw) {
+    additionsDebug("Cannot create i18next.config.ts without plugin.json");
+    return;
+  }
+  try {
+    const pluginJson = JSON.parse(pluginJsonRaw);
+    const pluginId = pluginJson.id;
+    if (!pluginId) {
+      additionsDebug("No plugin ID found in plugin.json");
+      return;
+    }
+    const i18nextConfig = `import { defineConfig } from 'i18next-cli';
+import pluginJson from './src/plugin.json';
+
+export default defineConfig({
+  locales: pluginJson.languages,
+  extract: {
+    input: ['src/**/*.{tsx,ts}'],
+    output: 'src/locales/{{language}}/{{namespace}}.json',
+    defaultNS: pluginJson.id,
+    functions: ['t', '*.t'],
+    transComponents: ['Trans'],
+  },
+});
+`;
+    context.addFile("i18next.config.ts", i18nextConfig);
+    additionsDebug("Created i18next.config.ts");
+  } catch (error) {
+    additionsDebug("Error creating i18next.config.ts:", error);
+  }
+}
+
+export { createI18nextConfig, updateDockerCompose, updatePluginJson };

package/dist/codemods/additions/scripts/i18n/index.js

@@ -0,0 +1,49 @@
+import * as v from 'valibot';
+import { additionsDebug } from '../../../utils.js';
+import { updateDockerCompose, updatePluginJson, createI18nextConfig } from './config-updates.js';
+import { addI18nInitialization, createLoadResourcesFile } from './code-generation.js';
+import { addI18nDependency, addSemverDependency, updateEslintConfig, addI18nextCli } from './tooling.js';
+import { checkNeedsBackwardCompatibility, createLocaleFiles } from './utils.js';
+
+const schema = v.object(
+  {
+    locales: v.pipe(
+      v.union([v.string(), v.array(v.string())]),
+      v.transform((input) => {
+        return typeof input === "string" ? input.split(",").map((s) => s.trim()) : input;
+      }),
+      v.array(
+        v.pipe(
+          v.string(),
+          v.regex(/^[a-z]{2}-[A-Z]{2}$/, "Locale must be in format xx-XX (e.g., en-US, es-ES, sv-SE)")
+        ),
+        'Please provide a comma-separated list of all supported locales, e.g., "en-US,es-ES,sv-SE"'
+      ),
+      v.minLength(1, 'Please provide a comma-separated list of all supported locales, e.g., "en-US,es-ES,sv-SE"')
+    )
+  },
+  'Please provide a comma-separated list of all supported locales, e.g., "en-US,es-ES,sv-SE"'
+);
+function i18nAddition(context, options) {
+  const { locales } = options;
+  additionsDebug("Adding i18n support with locales:", locales);
+  const needsBackwardCompatibility = checkNeedsBackwardCompatibility(context);
+  additionsDebug("Needs backward compatibility:", needsBackwardCompatibility);
+  updateDockerCompose(context);
+  updatePluginJson(context, locales, needsBackwardCompatibility);
+  createLocaleFiles(context, locales);
+  addI18nDependency(context);
+  if (needsBackwardCompatibility) {
+    addSemverDependency(context);
+  }
+  updateEslintConfig(context);
+  addI18nInitialization(context, needsBackwardCompatibility);
+  if (needsBackwardCompatibility) {
+    createLoadResourcesFile(context);
+  }
+  addI18nextCli(context);
+  createI18nextConfig(context);
+  return context;
+}
+
+export { i18nAddition as default, schema };

package/dist/codemods/additions/scripts/i18n/tooling.js

@@ -0,0 +1,119 @@
+import * as recast from 'recast';
+import * as babelParser from 'recast/parsers/babel-ts.js';
+import { addDependenciesToPackageJson, additionsDebug } from '../../../utils.js';
+
+const { builders } = recast.types;
+function addI18nDependency(context) {
+  addDependenciesToPackageJson(context, { "@grafana/i18n": "12.2.2" }, {});
+  additionsDebug("Added @grafana/i18n dependency version 12.2.2");
+}
+function addSemverDependency(context) {
+  addDependenciesToPackageJson(context, { semver: "^7.6.0" }, { "@types/semver": "^7.5.0" });
+  additionsDebug("Added semver dependency");
+}
+function addI18nextCli(context) {
+  addDependenciesToPackageJson(context, {}, { "i18next-cli": "^1.1.1" });
+  const packageJsonRaw = context.getFile("package.json");
+  if (!packageJsonRaw) {
+    return;
+  }
+  try {
+    const packageJson = JSON.parse(packageJsonRaw);
+    if (!packageJson.scripts) {
+      packageJson.scripts = {};
+    }
+    if (!packageJson.scripts["i18n-extract"]) {
+      packageJson.scripts["i18n-extract"] = "i18next-cli extract --sync-primary";
+      context.updateFile("package.json", JSON.stringify(packageJson, null, 2));
+      additionsDebug("Added i18n-extract script to package.json");
+    } else {
+      additionsDebug("i18n-extract script already exists, skipping");
+    }
+  } catch (error) {
+    additionsDebug("Error adding i18n-extract script:", error);
+  }
+}
+function updateEslintConfig(context) {
+  if (!context.doesFileExist("eslint.config.mjs")) {
+    additionsDebug("eslint.config.mjs not found, skipping");
+    return;
+  }
+  const eslintConfigRaw = context.getFile("eslint.config.mjs");
+  if (!eslintConfigRaw) {
+    return;
+  }
+  if (eslintConfigRaw.includes("@grafana/i18n/eslint-plugin")) {
+    additionsDebug("ESLint i18n rule already configured");
+    return;
+  }
+  try {
+    const ast = recast.parse(eslintConfigRaw, {
+      parser: babelParser
+    });
+    const imports = ast.program.body.filter((node) => node.type === "ImportDeclaration");
+    const lastImport = imports[imports.length - 1];
+    if (lastImport) {
+      const pluginImport = builders.importDeclaration(
+        [builders.importDefaultSpecifier(builders.identifier("grafanaI18nPlugin"))],
+        builders.literal("@grafana/i18n/eslint-plugin")
+      );
+      const lastImportIndex = ast.program.body.indexOf(lastImport);
+      ast.program.body.splice(lastImportIndex + 1, 0, pluginImport);
+    }
+    recast.visit(ast, {
+      visitCallExpression(path) {
+        if (path.node.callee.name === "defineConfig" && path.node.arguments[0]?.type === "ArrayExpression") {
+          const configArray = path.node.arguments[0];
+          const i18nConfig = builders.objectExpression([
+            builders.property("init", builders.identifier("name"), builders.literal("grafana/i18n-rules")),
+            builders.property(
+              "init",
+              builders.identifier("plugins"),
+              builders.objectExpression([
+                builders.property("init", builders.literal("@grafana/i18n"), builders.identifier("grafanaI18nPlugin"))
+              ])
+            ),
+            builders.property(
+              "init",
+              builders.identifier("rules"),
+              builders.objectExpression([
+                builders.property(
+                  "init",
+                  builders.literal("@grafana/i18n/no-untranslated-strings"),
+                  builders.arrayExpression([
+                    builders.literal("error"),
+                    builders.objectExpression([
+                      builders.property(
+                        "init",
+                        builders.identifier("calleesToIgnore"),
+                        builders.arrayExpression([builders.literal("^css$"), builders.literal("use[A-Z].*")])
+                      )
+                    ])
+                  ])
+                ),
+                builders.property(
+                  "init",
+                  builders.literal("@grafana/i18n/no-translation-top-level"),
+                  builders.literal("error")
+                )
+              ])
+            )
+          ]);
+          configArray.elements.push(i18nConfig);
+        }
+        this.traverse(path);
+      }
+    });
+    const output = recast.print(ast, {
+      tabWidth: 2,
+      trailingComma: true,
+      lineTerminator: "\n"
+    }).code;
+    context.updateFile("eslint.config.mjs", output);
+    additionsDebug("Updated eslint.config.mjs with i18n linting rules");
+  } catch (error) {
+    additionsDebug("Error updating eslint.config.mjs:", error);
+  }
+}
+
+export { addI18nDependency, addI18nextCli, addSemverDependency, updateEslintConfig };

package/dist/codemods/additions/scripts/i18n/utils.js

@@ -0,0 +1,50 @@
+import { coerce, gte } from 'semver';
+import { additionsDebug } from '../../../utils.js';
+
+function checkNeedsBackwardCompatibility(context) {
+  const pluginJsonRaw = context.getFile("src/plugin.json");
+  if (!pluginJsonRaw) {
+    return false;
+  }
+  try {
+    const pluginJson = JSON.parse(pluginJsonRaw);
+    const currentGrafanaDep = pluginJson.dependencies?.grafanaDependency || ">=11.0.0";
+    const minVersion = coerce("12.1.0");
+    const currentVersion = coerce(currentGrafanaDep.replace(/^[><=]+/, ""));
+    if (currentVersion && minVersion && gte(currentVersion, minVersion)) {
+      return false;
+    }
+    return true;
+  } catch (error) {
+    additionsDebug("Error checking backward compatibility:", error);
+    return true;
+  }
+}
+function createLocaleFiles(context, locales) {
+  const pluginJsonRaw = context.getFile("src/plugin.json");
+  if (!pluginJsonRaw) {
+    additionsDebug("Cannot create locale files without plugin.json");
+    return;
+  }
+  try {
+    const pluginJson = JSON.parse(pluginJsonRaw);
+    const pluginId = pluginJson.id;
+    if (!pluginId) {
+      additionsDebug("No plugin ID found in plugin.json");
+      return;
+    }
+    for (const locale of locales) {
+      const localePath = `src/locales/${locale}/${pluginId}.json`;
+      if (!context.doesFileExist(localePath)) {
+        context.addFile(localePath, JSON.stringify({}, null, 2));
+        additionsDebug(`Created ${localePath}`);
+      } else {
+        additionsDebug(`${localePath} already exists, skipping`);
+      }
+    }
+  } catch (error) {
+    additionsDebug("Error creating locale files:", error);
+  }
+}
+
+export { checkNeedsBackwardCompatibility, createLocaleFiles };

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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@grafana/create-plugin",
-  "version": "6.3.0-canary.2319.19627830170.0",
+  "version": "6.3.0-canary.2320.19631436862.0",
   "repository": {
     "directory": "packages/create-plugin",
     "url": "https://github.com/grafana/plugin-tools"
@@ -61,5 +61,5 @@
   "engines": {
     "node": ">=20"
   },
-  "gitHead": "e62bbbc7de46e7d822179afb84d620b5e809b50e"
+  "gitHead": "7076bccb19de370a195a80655558f600ee067d25"
 }

package/src/codemods/additions/additions.ts

@@ -6,4 +6,9 @@ export default [
     description: 'Adds an example addition to the plugin',
     scriptPath: import.meta.resolve('./scripts/example-addition.js'),
   },
+  {
+    name: 'i18n',
+    description: 'Adds internationalization (i18n) support to the plugin',
+    scriptPath: import.meta.resolve('./scripts/i18n/index.js'),
+  },
 ] satisfies Codemod[];

package/src/codemods/additions/scripts/i18n/README.md

@@ -0,0 +1,157 @@
+# I18n Addition
+
+Adds internationalization (i18n) support to a Grafana plugin.
+
+## Usage
+
+```bash
+npx @grafana/create-plugin add i18n --locales <locales>
+```
+
+## Required Flags
+
+### `--locales`
+
+A comma-separated list of locale codes to support in your plugin.
+
+**Format:** Locale codes must follow the `xx-XX` pattern (e.g., `en-US`, `es-ES`, `sv-SE`)
+
+**Example:**
+
+```bash
+npx @grafana/create-plugin add i18n --locales en-US,es-ES,sv-SE
+```
+
+## What This Addition Does
+
+This addition configures your plugin for internationalization by:
+
+1. **Updating `docker-compose.yaml`** - Adds the `localizationForPlugins` feature toggle to your local Grafana instance
+2. **Updating `src/plugin.json`** - Adds the `languages` array and updates `grafanaDependency`
+3. **Creating locale files** - Creates empty JSON files for each locale at `src/locales/{locale}/{pluginId}.json`
+4. **Adding dependencies** - Installs `@grafana/i18n` and optionally `semver` (for backward compatibility)
+5. **Updating ESLint config** - Adds i18n linting rules to catch untranslated strings
+6. **Initializing i18n in module.ts** - Adds `initPluginTranslations()` call to your plugin's entry point
+7. **Creating support files**:
+   - `i18next.config.ts` - Configuration for extracting translations
+   - `src/loadResources.ts` - (Only for Grafana < 12.1.0) Custom resource loader
+8. **Adding npm scripts** - Adds `i18n-extract` script to extract translations from your code
+
+## Backward Compatibility
+
+The addition automatically detects your plugin's `grafanaDependency` version:
+
+### Grafana >= 12.1.0 (Modern)
+
+- Sets `grafanaDependency` to `>=12.1.0`
+- Grafana handles loading translations automatically
+- Simple initialization: `await initPluginTranslations(pluginJson.id)`
+- No `loadResources.ts` file needed
+- No `semver` dependency needed
+
+### Grafana 11.0.0 - 12.0.x (Backward Compatible)
+
+- Keeps or sets `grafanaDependency` to `>=11.0.0`
+- Plugin handles loading translations
+- Creates `src/loadResources.ts` for custom resource loading
+- Adds runtime version check using `semver`
+- Initialization with loaders: `await initPluginTranslations(pluginJson.id, loaders)`
+
+## Running Multiple Times (Idempotent)
+
+This addition is **defensive** and can be run multiple times safely. Each operation checks if it's already been done:
+
+### Adding New Locales
+
+You can run the command again with additional locales to add them:
+
+```bash
+# First run
+npx @grafana/create-plugin add i18n --locales en-US
+
+# Later, add more locales
+npx @grafana/create-plugin add i18n --locales en-US,es-ES,sv-SE
+```
+
+The addition will:
+
+- ✅ Merge new locales into `plugin.json` without duplicates
+- ✅ Create only the new locale files (won't overwrite existing ones)
+- ✅ Skip updating files that already have i18n configured
+
+### What Won't Be Duplicated
+
+- **Locale files**: Existing locale JSON files are never overwritten (preserves your translations)
+- **Dependencies**: Won't re-add dependencies that already exist
+- **ESLint config**: Won't duplicate the i18n plugin import or rules
+- **Module initialization**: Won't add `initPluginTranslations` if it's already present
+- **Support files**: Won't overwrite `i18next.config.ts` or `loadResources.ts` if they exist
+- **npm scripts**: Won't overwrite the `i18n-extract` script if it exists
+- **Docker feature toggle**: Won't duplicate the feature toggle
+
+## Files Created
+
+```
+your-plugin/
+├── docker-compose.yaml              # Modified: adds localizationForPlugins toggle
+├── src/
+│   ├── plugin.json                  # Modified: adds languages array
+│   ├── module.ts                    # Modified: adds i18n initialization
+│   ├── loadResources.ts            # Created: (Grafana 11.x only) resource loader
+│   └── locales/
+│       ├── en-US/
+│       │   └── your-plugin-id.json # Created: empty translation file
+│       ├── es-ES/
+│       │   └── your-plugin-id.json # Created: empty translation file
+│       └── sv-SE/
+│           └── your-plugin-id.json # Created: empty translation file
+├── i18next.config.ts                # Created: extraction config
+├── eslint.config.mjs                # Modified: adds i18n linting rules
+└── package.json                     # Modified: adds dependencies and scripts
+```
+
+## Dependencies Added
+
+**Always:**
+
+- `@grafana/i18n` (v12.2.2) - i18n utilities and types
+- `i18next-cli` (dev) - Translation extraction tool
+
+**For Grafana 11.x only:**
+
+- `semver` - Runtime version checking
+- `@types/semver` (dev) - TypeScript types for semver
+
+## Next Steps
+
+After running this addition:
+
+1. **Extract translations**: Run `npm run i18n-extract` to scan your code for translatable strings
+2. **Add translations**: Fill in your locale JSON files with translated strings
+3. **Use in code**: Import and use the translation functions:
+
+   ```typescript
+   import { t, Trans } from '@grafana/i18n';
+
+   // Use t() for simple strings
+   const title = t('components.myComponent.title', 'Default Title');
+
+   // Use Trans for JSX
+   <Trans i18nKey="components.myComponent.description">
+     This is a description
+   </Trans>
+   ```
+
+## Debug Output
+
+Enable debug logging to see what the addition is doing:
+
+```bash
+DEBUG=create-plugin:additions npx @grafana/create-plugin add i18n --locales en-US,es-ES
+```
+
+## References
+
+- [Grafana i18n Documentation](https://grafana.com/developers/plugin-tools/how-to-guides/plugin-internationalization)
+- [Grafana 11.x i18n Documentation](https://grafana.com/developers/plugin-tools/how-to-guides/plugin-internationalization-grafana-11)
+- [Available Languages](https://github.com/grafana/grafana/blob/main/packages/grafana-i18n/src/constants.ts)