@grafana/create-plugin 6.2.0-canary.2233.18586197736.0 → 6.2.0-canary.2233.18936109308.0

package/dist/utils/utils.config.js

@@ -1,11 +1,12 @@
-import fs from 'node:fs';
-import { writeFile } from 'node:fs/promises';
-import path from 'node:path';
-import { CURRENT_APP_VERSION } from './utils.version.js';
 import { argv, commandName } from './utils.cli.js';
+import { CURRENT_APP_VERSION } from './utils.version.js';
 import { DEFAULT_FEATURE_FLAGS } from '../constants.js';
+import fs from 'node:fs';
 import { output } from './utils.console.js';
 import { partitionArr } from './utils.helpers.js';
+import path from 'node:path';
+import { writeFile } from 'node:fs/promises';
+import { EOL } from 'node:os';
 
 let hasShownConfigWarnings = false;
 function getConfig(workDir = process.cwd()) {
@@ -88,7 +89,7 @@ async function setRootConfig(configOverride = {}) {
   const rootConfig = getRootConfig();
   const rootConfigPath = path.resolve(process.cwd(), ".config/.cprc.json");
   const updatedConfig = { ...rootConfig, ...configOverride };
-  await writeFile(rootConfigPath, JSON.stringify(updatedConfig, null, 2));
+  await writeFile(rootConfigPath, JSON.stringify(updatedConfig, null, 2) + EOL);
   return updatedConfig;
 }
 

package/dist/utils/utils.templates.js

@@ -1,15 +1,14 @@
-import { lt } from 'semver';
-import { glob } from 'glob';
-import path from 'node:path';
-import fs from 'node:fs';
+import { DEFAULT_FEATURE_FLAGS, 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';
-import { getPluginJson } from './utils.plugin.js';
+import { CURRENT_APP_VERSION } from './utils.version.js';
 import { debug } from './utils.cli.js';
-import { DEFAULT_FEATURE_FLAGS, EXTRA_TEMPLATE_VARIABLES, PLUGIN_TYPES, TEMPLATE_PATHS, EXPORT_PATH_PREFIX } from '../constants.js';
-import { getPackageManagerFromUserAgent, getPackageManagerInstallCmd, getPackageManagerWithFallback } from './utils.packageManager.js';
-import { getGrafanaRuntimeVersion, CURRENT_APP_VERSION } from './utils.version.js';
+import fs from 'node:fs';
 import { getConfig } from './utils.config.js';
+import { getPluginJson } from './utils.plugin.js';
+import { glob } from 'glob';
+import path from 'node:path';
 
 const templatesDebugger = debug.extend("templates");
 function getTemplateFiles(pluginType, filter) {
@@ -57,9 +56,6 @@ function renderTemplateFromFile(templateFile, data) {
 function getTemplateData(cliArgs) {
   const { features } = getConfig();
   const currentVersion = CURRENT_APP_VERSION;
-  const grafanaVersion = getGrafanaRuntimeVersion();
-  const usePlaywright = features.usePlaywright === true || isFile(path.join(process.cwd(), "playwright.config.ts"));
-  const useCypress = !usePlaywright && lt(grafanaVersion, "11.0.0") && fs.existsSync(path.join(process.cwd(), "cypress"));
   const bundleGrafanaUI = features.bundleGrafanaUI ?? DEFAULT_FEATURE_FLAGS.bundleGrafanaUI;
   const getReactRouterVersion = () => features.useReactRouterV6 ? "6.22.0" : "5.2.0";
   const isAppType = (pluginType) => pluginType === PLUGIN_TYPES.app || pluginType === PLUGIN_TYPES.scenes;
@@ -86,8 +82,6 @@ function getTemplateData(cliArgs) {
       useReactRouterV6: features.useReactRouterV6 ?? DEFAULT_FEATURE_FLAGS.useReactRouterV6,
       reactRouterVersion: getReactRouterVersion(),
       scenesVersion: features.useReactRouterV6 ? "^6.10.4" : "^5.41.3",
-      usePlaywright,
-      useCypress,
       useExperimentalRspack: Boolean(features.useExperimentalRspack),
       frontendBundler
     };
@@ -111,8 +105,6 @@ function getTemplateData(cliArgs) {
       useReactRouterV6: features.useReactRouterV6 ?? DEFAULT_FEATURE_FLAGS.useReactRouterV6,
       reactRouterVersion: getReactRouterVersion(),
       scenesVersion: features.useReactRouterV6 ? "^6.10.4" : "^5.41.3",
-      usePlaywright,
-      useCypress,
       pluginExecutable: pluginJson.executable,
       useExperimentalRspack: Boolean(features.useExperimentalRspack),
       frontendBundler

package/dist/utils/utils.version.js

@@ -1,14 +1,8 @@
-import { readFileSync } from 'node:fs';
-import path from 'node:path';
+import 'node:fs';
+import 'node:path';
 import { getVersion } from '../libs/version/src/index.js';
-import { TEMPLATE_PATHS } from '../constants.js';
+import '../constants.js';
 
 const CURRENT_APP_VERSION = getVersion();
-function getGrafanaRuntimeVersion() {
-  const packageJsonPath = path.join(TEMPLATE_PATHS.common, "_package.json");
-  const pkg = readFileSync(packageJsonPath, "utf8");
-  const { version } = /\"(@grafana\/runtime)\":\s\"\^(?<version>.*)\"/.exec(pkg)?.groups ?? {};
-  return version;
-}
 
-export { CURRENT_APP_VERSION, getGrafanaRuntimeVersion };
+export { CURRENT_APP_VERSION };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@grafana/create-plugin",
-  "version": "6.2.0-canary.2233.18586197736.0",
+  "version": "6.2.0-canary.2233.18936109308.0",
   "repository": {
     "directory": "packages/create-plugin",
     "url": "https://github.com/grafana/plugin-tools"
@@ -61,5 +61,5 @@
   "engines": {
     "node": ">=20"
   },
-  "gitHead": "0e9c9708ed87727b5956b44fcdaa3bbc0d8221f8"
+  "gitHead": "94a6935ff89c5160c02a8031167731268431b004"
 }

package/src/additions/additions.ts

@@ -4,10 +4,6 @@ export type AdditionMeta = {
   scriptPath: string;
 };
 
-type Additions = {
-  additions: Record<string, AdditionMeta>;
-};
-
 export default {
   additions: {
     i18n: {
@@ -16,4 +12,4 @@ export default {
       scriptPath: './scripts/add-i18n.js',
     },
   },
-} as Additions;
+};

package/src/additions/manager.ts

@@ -26,6 +26,73 @@ export function getAdditionByName(
   return additions[name];
 }
 
+export async function getAdditionFlags(addition: AdditionMeta): Promise<any[]> {
+  try {
+    const module = await import(addition.scriptPath);
+    return module.flags || [];
+  } catch (error) {
+    return [];
+  }
+}
+
+export async function parseAdditionFlags(addition: AdditionMeta, argv: any): Promise<AdditionOptions> {
+  try {
+    const module = await import(addition.scriptPath);
+    if (module.parseFlags && typeof module.parseFlags === 'function') {
+      return module.parseFlags(argv);
+    }
+    return {};
+  } catch (error) {
+    return {};
+  }
+}
+
+async function validateAdditionOptions(addition: AdditionMeta, options: AdditionOptions): Promise<void> {
+  const flags = await getAdditionFlags(addition);
+
+  if (!flags || flags.length === 0) {
+    return;
+  }
+
+  const missingFlags: string[] = [];
+
+  for (const flag of flags) {
+    if (flag.required) {
+      const value = options[flag.name];
+      if (value === undefined || value === null || (Array.isArray(value) && value.length === 0)) {
+        missingFlags.push(flag.name);
+      }
+    }
+  }
+
+  if (missingFlags.length > 0) {
+    const flagDocs = flags.filter((f) => missingFlags.includes(f.name)).map((f) => `  --${f.name}: ${f.description}`);
+
+    throw new Error(
+      `Missing required flag${missingFlags.length > 1 ? 's' : ''}:\n\n` +
+        flagDocs.join('\n') +
+        `\n\nExample: npx @grafana/create-plugin add ${addition.name} --${missingFlags[0]}=value`
+    );
+  }
+}
+
+export async function runAdditionByName(
+  additionName: string,
+  argv: any,
+  runOptions: RunAdditionOptions = {}
+): Promise<void> {
+  const addition = getAdditionByName(additionName);
+  if (!addition) {
+    const availableAdditions = getAvailableAdditions();
+    const additionsList = Object.keys(availableAdditions);
+    throw new Error(`Unknown addition: ${additionName}\n\nAvailable additions: ${additionsList.join(', ')}`);
+  }
+
+  const options = await parseAdditionFlags(addition, argv);
+  await validateAdditionOptions(addition, options);
+  await runAddition(addition, options, runOptions);
+}
+
 export async function runAddition(
   addition: AdditionMeta,
   additionOptions: AdditionOptions = {},

package/src/additions/scripts/add-i18n.test.ts

@@ -34,10 +34,10 @@ describe('add-i18n', () => {
     await expect(migrateWithOptions).toBeIdempotent(context);
   });
 
-  it('should add i18n support with a single locale', () => {
+  it('should add i18n support with a single locale (backward compatibility for Grafana < 12.1.0)', () => {
     const context = new Context('/virtual');
 
-    // Set up a minimal plugin structure
+    // Set up a minimal plugin structure with Grafana 11.0.0 (needs backward compatibility)
     context.addFile(
       'src/plugin.json',
       JSON.stringify({
@@ -71,26 +71,38 @@ describe('add-i18n', () => {
     // Check plugin.json was updated
     const pluginJson = JSON.parse(result.getFile('src/plugin.json') || '{}');
     expect(pluginJson.languages).toEqual(['en-US']);
-    expect(pluginJson.dependencies.grafanaDependency).toBe('>=12.1.0');
+    // Should stay at 11.0.0 for backward compatibility
+    expect(pluginJson.dependencies.grafanaDependency).toBe('>=11.0.0');
 
-    // Check locale file was created
+    // Check locale file was created with example translations
     expect(result.doesFileExist('src/locales/en-US/test-plugin.json')).toBe(true);
     const localeContent = result.getFile('src/locales/en-US/test-plugin.json');
-    expect(JSON.parse(localeContent || '{}')).toEqual({});
+    const localeData = JSON.parse(localeContent || '{}');
+    expect(localeData).toHaveProperty('components');
+    expect(localeData).toHaveProperty('config');
 
     // Check package.json was updated with dependencies
     const packageJson = JSON.parse(result.getFile('package.json') || '{}');
-    expect(packageJson.dependencies['@grafana/i18n']).toBeDefined();
+    expect(packageJson.dependencies['@grafana/i18n']).toBe('12.2.2');
+    expect(packageJson.dependencies['semver']).toBe('^7.6.0');
+    expect(packageJson.devDependencies['@types/semver']).toBe('^7.5.0');
     expect(packageJson.devDependencies['i18next-cli']).toBeDefined();
     expect(packageJson.scripts['i18n-extract']).toBe('i18next-cli extract --sync-primary');
 
-    // Check docker-compose.yaml was updated
+    // Check docker-compose.yaml was NOT updated (backward compat doesn't add feature toggle)
     const dockerCompose = result.getFile('docker-compose.yaml');
-    expect(dockerCompose).toContain('localizationForPlugins');
+    expect(dockerCompose).not.toContain('localizationForPlugins');
 
-    // Check module.ts was updated
+    // Check module.ts was updated with backward compatibility code
     const moduleTs = result.getFile('src/module.ts');
-    expect(moduleTs).toContain('@grafana/i18n');
+    expect(moduleTs).toContain('initPluginTranslations');
+    expect(moduleTs).toContain('semver');
+    expect(moduleTs).toContain('loadResources');
+
+    // Check loadResources.ts was created for backward compatibility
+    expect(result.doesFileExist('src/loadResources.ts')).toBe(true);
+    const loadResources = result.getFile('src/loadResources.ts');
+    expect(loadResources).toContain('ResourceLoader');
 
     // Check i18next.config.ts was created
     expect(result.doesFileExist('i18next.config.ts')).toBe(true);
@@ -185,7 +197,7 @@ describe('add-i18n', () => {
     expect(finalChanges).toBe(initialChanges);
   });
 
-  it('should handle existing feature toggles in docker-compose.yaml', () => {
+  it('should handle existing feature toggles in docker-compose.yaml (Grafana >= 12.1.0)', () => {
     const context = new Context('/virtual');
 
     context.addFile(
@@ -195,7 +207,7 @@ describe('add-i18n', () => {
         type: 'panel',
         name: 'Test Plugin',
         dependencies: {
-          grafanaDependency: '>=11.0.0',
+          grafanaDependency: '>=12.1.0',
         },
       })
     );

package/src/additions/scripts/add-i18n.ts

@@ -12,6 +12,22 @@ export type I18nOptions = {
   locales: string[];
 };
 
+// Flag schema for CLI
+export const flags = [
+  {
+    name: 'locales',
+    description: 'Comma-separated list of locales (e.g., en-US,es-ES)',
+    required: true,
+  },
+];
+
+// Parse CLI flags to options
+export function parseFlags(argv: any): I18nOptions {
+  return {
+    locales: argv.locales ? argv.locales.split(',').map((l: string) => l.trim()) : [],
+  };
+}
+
 export default function migrate(context: Context, options: I18nOptions = { locales: ['en-US'] }): Context {
   const { locales } = options;
 
@@ -23,28 +39,44 @@ export default function migrate(context: Context, options: I18nOptions = { local
     return context;
   }
 
-  // 1. Update docker-compose.yaml with feature toggle
-  updateDockerCompose(context);
+  // Determine if we need backward compatibility (Grafana < 12.1.0)
+  const needsBackwardCompatibility = checkNeedsBackwardCompatibility(context);
+  additionsDebug('Needs backward compatibility:', needsBackwardCompatibility);
+
+  // 1. Update docker-compose.yaml with feature toggle (only if >= 12.1.0)
+  if (!needsBackwardCompatibility) {
+    updateDockerCompose(context);
+  }
 
   // 2. Update plugin.json with languages and grafanaDependency
-  updatePluginJson(context, locales);
+  updatePluginJson(context, locales, needsBackwardCompatibility);
 
-  // 3. Create locale folders and files
+  // 3. Create locale folders and files with example translations
   createLocaleFiles(context, locales);
 
   // 4. Add @grafana/i18n dependency
   addI18nDependency(context);
 
-  // 5. Update eslint.config.mjs if needed
+  // 5. Add semver dependency for backward compatibility
+  if (needsBackwardCompatibility) {
+    addSemverDependency(context);
+  }
+
+  // 6. Update eslint.config.mjs if needed
   updateEslintConfig(context);
 
-  // 6. Add i18n initialization to module file
-  addI18nInitialization(context);
+  // 7. Add i18n initialization to module file
+  addI18nInitialization(context, needsBackwardCompatibility);
 
-  // 7. Add i18next-cli as dev dependency and add script
+  // 8. Create loadResources.ts for backward compatibility
+  if (needsBackwardCompatibility) {
+    createLoadResourcesFile(context);
+  }
+
+  // 9. Add i18next-cli as dev dependency and add script
   addI18nextCli(context);
 
-  // 8. Create i18next.config.ts
+  // 10. Create i18next.config.ts
   createI18nextConfig(context);
 
   return context;
@@ -74,6 +106,29 @@ function isI18nConfigured(context: Context): boolean {
   return false;
 }
 
+function checkNeedsBackwardCompatibility(context: Context): boolean {
+  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 current version is less than 12.1.0, we need backward compatibility
+    if (currentVersion && minVersion && gte(currentVersion, minVersion)) {
+      return false; // Already >= 12.1.0, no backward compat needed
+    }
+    return true; // < 12.1.0, needs backward compat
+  } catch (error) {
+    additionsDebug('Error checking backward compatibility:', error);
+    return true; // Default to backward compat on error
+  }
+}
+
 function updateDockerCompose(context: Context): void {
   if (!context.doesFileExist('docker-compose.yaml')) {
     additionsDebug('docker-compose.yaml not found, skipping');
@@ -123,7 +178,7 @@ function updateDockerCompose(context: Context): void {
   }
 }
 
-function updatePluginJson(context: Context, locales: string[]): void {
+function updatePluginJson(context: Context, locales: string[], needsBackwardCompatibility: boolean): void {
   if (!context.doesFileExist('src/plugin.json')) {
     additionsDebug('src/plugin.json not found, skipping');
     return;
@@ -140,18 +195,19 @@ function updatePluginJson(context: Context, locales: string[]): void {
     // Add languages array
     pluginJson.languages = locales;
 
-    // Ensure grafanaDependency is >= 12.1.0
+    // Update grafanaDependency based on backward compatibility needs
     if (!pluginJson.dependencies) {
       pluginJson.dependencies = {};
     }
 
     const currentGrafanaDep = pluginJson.dependencies.grafanaDependency || '>=11.0.0';
-    const minVersion = coerce('12.1.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 = '>=12.1.0';
-      additionsDebug('Updated grafanaDependency to >=12.1.0');
+      pluginJson.dependencies.grafanaDependency = `>=${targetVersion}`;
+      additionsDebug(`Updated grafanaDependency to >=${targetVersion}`);
     }
 
     context.updateFile('src/plugin.json', JSON.stringify(pluginJson, null, 2));
@@ -172,19 +228,37 @@ function createLocaleFiles(context: Context, locales: string[]): void {
   try {
     const pluginJson = JSON.parse(pluginJsonRaw);
     const pluginId = pluginJson.id;
+    const pluginName = pluginJson.name || pluginId;
 
     if (!pluginId) {
       additionsDebug('No plugin ID found in plugin.json');
       return;
     }
 
+    // Create example translation structure
+    const exampleTranslations = {
+      components: {
+        exampleComponent: {
+          title: `${pluginName} component title`,
+          description: 'Example description',
+        },
+      },
+      config: {
+        title: `${pluginName} configuration`,
+        apiUrl: {
+          label: 'API URL',
+          placeholder: 'Enter API URL',
+        },
+      },
+    };
+
     // Create locale files for each locale
     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}`);
+        context.addFile(localePath, JSON.stringify(exampleTranslations, null, 2));
+        additionsDebug(`Created ${localePath} with example translations`);
       }
     }
   } catch (error) {
@@ -193,8 +267,14 @@ function createLocaleFiles(context: Context, locales: string[]): void {
 }
 
 function addI18nDependency(context: Context): void {
-  addDependenciesToPackageJson(context, { '@grafana/i18n': '^1.0.0' }, {});
-  additionsDebug('Added @grafana/i18n dependency');
+  addDependenciesToPackageJson(context, { '@grafana/i18n': '12.2.2' }, {});
+  additionsDebug('Added @grafana/i18n dependency version 12.2.2');
+}
+
+function addSemverDependency(context: Context): void {
+  // Add semver as regular dependency and @types/semver as dev dependency for backward compatibility
+  addDependenciesToPackageJson(context, { semver: '^7.6.0' }, { '@types/semver': '^7.5.0' });
+  additionsDebug('Added semver dependency for backward compatibility');
 }
 
 function addI18nextCli(context: Context): void {
@@ -355,7 +435,7 @@ export default defineConfig({
   }
 }
 
-function addI18nInitialization(context: Context): void {
+function addI18nInitialization(context: Context, needsBackwardCompatibility: boolean): void {
   // Find module.ts or module.tsx
   const moduleTsPath = context.doesFileExist('src/module.ts')
     ? 'src/module.ts'
@@ -374,7 +454,7 @@ function addI18nInitialization(context: Context): void {
   }
 
   // Check if i18n is already initialized
-  if (moduleContent.includes('@grafana/i18n')) {
+  if (moduleContent.includes('initPluginTranslations')) {
     additionsDebug('i18n already initialized in module file');
     return;
   }
@@ -384,18 +464,72 @@ function addI18nInitialization(context: Context): void {
       parser: require('recast/parsers/babel-ts'),
     });
 
-    // Add import for i18n
-    const i18nImport = builders.importDeclaration(
-      [builders.importSpecifier(builders.identifier('i18n'))],
-      builders.literal('@grafana/i18n')
+    const imports = [];
+
+    // Add necessary imports based on backward compatibility
+    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')
+      )
     );
 
-    // Add the import after the first import statement
+    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')
+        )
+      );
+    }
+
+    // Add imports after the first import statement
     const firstImportIndex = ast.program.body.findIndex((node: any) => node.type === 'ImportDeclaration');
     if (firstImportIndex !== -1) {
-      ast.program.body.splice(firstImportIndex + 1, 0, i18nImport);
+      ast.program.body.splice(firstImportIndex + 1, 0, ...imports);
     } else {
-      ast.program.body.unshift(i18nImport);
+      ast.program.body.unshift(...imports);
+    }
+
+    // Add i18n initialization code
+    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);`;
+
+    // Parse the initialization code and insert it at the top level (after imports)
+    const initAst = recast.parse(i18nInitCode, {
+      parser: require('recast/parsers/babel-ts'),
+    });
+
+    // Find the last import index
+    const lastImportIndex = ast.program.body.findLastIndex((node: any) => 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, {
@@ -405,8 +539,46 @@ function addI18nInitialization(context: Context): void {
     }).code;
 
     context.updateFile(moduleTsPath, output);
-    additionsDebug(`Updated ${moduleTsPath} with i18n import`);
+    additionsDebug(`Updated ${moduleTsPath} with i18n initialization`);
   } catch (error) {
     additionsDebug('Error updating module file:', error);
   }
 }
+
+function createLoadResourcesFile(context: Context): void {
+  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');
+}