@grafana/create-plugin 6.1.1-canary.2232.18584719214.0 → 6.2.0-canary.2233.18586197736.0

package/README.md

@@ -122,6 +122,45 @@ For more information see our [documentation](https://grafana.com/developers/plug
 
 ---
 
+## Add optional features to your existing plugin
+
+You can add optional features to your plugin using the `add` command. This allows you to enhance your plugin with additional capabilities without starting from scratch.
+
+### Add internationalization (i18n) support
+
+Add translation support to make your plugin available in multiple languages:
+
+```bash
+# Run this command from the root of your plugin
+cd ./my-plugin
+
+npx @grafana/create-plugin@latest add i18n
+```
+
+This will:
+
+- Update your `plugin.json` with the selected languages
+- Create locale folders and translation files
+- Add the necessary dependencies to `package.json`
+- Configure your docker-compose.yaml with the required feature toggle
+- Add i18n imports to your module file
+- Set up the i18n extraction script
+
+The command will prompt you to select which locales you want to support. You can choose from common locales like:
+
+- English (US) - `en-US`
+- Spanish (Spain) - `es-ES`
+- French (France) - `fr-FR`
+- German (Germany) - `de-DE`
+- Swedish (Sweden) - `sv-SE`
+- And more...
+
+You can also add custom locale codes during the interactive prompt.
+
+For more information about plugin internationalization, see our [documentation](https://grafana.com/developers/plugin-tools/how-to-guides/plugin-internationalization).
+
+---
+
 ## Contributing
 
 We are always grateful for contributions! See [CONTRIBUTING.md](../../CONTRIBUTING.md) for more information.

package/dist/additions/additions.js

@@ -0,0 +1,11 @@
+var defaultAdditions = {
+  additions: {
+    i18n: {
+      name: "i18n",
+      description: "Add internationalization (i18n) support to your plugin",
+      scriptPath: "./scripts/add-i18n.js"
+    }
+  }
+};
+
+export { defaultAdditions as default };

package/dist/additions/manager.js

@@ -0,0 +1,48 @@
+import { additionsDebug, printChanges } from './utils.js';
+import defaultAdditions from './additions.js';
+import { Context } from '../migrations/context.js';
+import { gitCommitNoVerify } from '../utils/utils.git.js';
+import { output } from '../utils/utils.console.js';
+import { formatFiles, flushChanges, installNPMDependencies } from '../migrations/utils.js';
+
+function getAvailableAdditions(additions = defaultAdditions.additions) {
+  return additions;
+}
+function getAdditionByName(name, additions = defaultAdditions.additions) {
+  return additions[name];
+}
+async function runAddition(addition, additionOptions = {}, runOptions = {}) {
+  const basePath = process.cwd();
+  output.log({
+    title: `Running addition: ${addition.name}`,
+    body: [addition.description]
+  });
+  try {
+    const context = new Context(basePath);
+    const updatedContext = await executeAddition(addition, context, additionOptions);
+    const shouldCommit = runOptions.commitChanges && updatedContext.hasChanges();
+    additionsDebug(`context for "${addition.name} (${addition.scriptPath})":`);
+    additionsDebug("%O", updatedContext.listChanges());
+    await formatFiles(updatedContext);
+    flushChanges(updatedContext);
+    printChanges(updatedContext, addition.name, addition);
+    installNPMDependencies(updatedContext);
+    if (shouldCommit) {
+      await gitCommitNoVerify(`chore: add ${addition.name} support via create-plugin`);
+    }
+    output.success({
+      title: `Successfully added ${addition.name} to your plugin.`
+    });
+  } catch (error) {
+    if (error instanceof Error) {
+      throw new Error(`Error running addition "${addition.name} (${addition.scriptPath})": ${error.message}`);
+    }
+    throw error;
+  }
+}
+async function executeAddition(addition, context, options = {}) {
+  const module = await import(addition.scriptPath);
+  return module.default(context, options);
+}
+
+export { executeAddition, getAdditionByName, getAvailableAdditions, runAddition };

package/dist/additions/utils.js

@@ -0,0 +1,28 @@
+export { addDependenciesToPackageJson, flushChanges, formatFiles, installNPMDependencies } from '../migrations/utils.js';
+import chalk from 'chalk';
+import { debug } from '../utils/utils.cli.js';
+import { output } from '../utils/utils.console.js';
+
+const additionsDebug = debug.extend("additions");
+function printChanges(context, key, addition) {
+  const changes = context.listChanges();
+  const lines = [];
+  for (const [filePath, { changeType }] of Object.entries(changes)) {
+    if (changeType === "add") {
+      lines.push(`${chalk.green("ADD")} ${filePath}`);
+    } else if (changeType === "update") {
+      lines.push(`${chalk.yellow("UPDATE")} ${filePath}`);
+    } else if (changeType === "delete") {
+      lines.push(`${chalk.red("DELETE")} ${filePath}`);
+    }
+  }
+  output.addHorizontalLine("gray");
+  output.logSingleLine(`${key} (${addition.description})`);
+  if (lines.length === 0) {
+    output.logSingleLine("No changes were made");
+  } else {
+    output.log({ title: "Changes:", withPrefix: false, body: output.bulletList(lines) });
+  }
+}
+
+export { additionsDebug, printChanges };

package/dist/bin/run.js

@@ -4,8 +4,9 @@ import { update } from '../commands/update.command.js';
 import { migrate } from '../commands/migrate.command.js';
 import { version } from '../commands/version.command.js';
 import { provisioning } from '../commands/provisioning.command.js';
-import { isUnsupportedPlatform } from '../utils/utils.os.js';
+import { add } from '../commands/add.command.js';
 import { argv, commandName } from '../utils/utils.cli.js';
+import { isUnsupportedPlatform } from '../utils/utils.os.js';
 import { output } from '../utils/utils.console.js';
 
 if (isUnsupportedPlatform()) {
@@ -21,7 +22,8 @@ const commands = {
   generate,
   update,
   version,
-  provisioning
+  provisioning,
+  add
 };
 const command = commands[commandName] || "generate";
 command(argv);

package/dist/commands/add/prompts.js

@@ -0,0 +1,72 @@
+import Enquirer from 'enquirer';
+import { output } from '../../utils/utils.console.js';
+
+const COMMON_LOCALES = [
+  { name: "en-US", message: "English (US)" },
+  { name: "es-ES", message: "Spanish (Spain)" },
+  { name: "fr-FR", message: "French (France)" },
+  { name: "de-DE", message: "German (Germany)" },
+  { name: "zh-Hans", message: "Chinese (Simplified)" },
+  { name: "pt-BR", message: "Portuguese (Brazil)" },
+  { name: "sv-SE", message: "Swedish (Sweden)" },
+  { name: "nl-NL", message: "Dutch (Netherlands)" },
+  { name: "ja-JP", message: "Japanese (Japan)" },
+  { name: "it-IT", message: "Italian (Italy)" }
+];
+async function promptI18nOptions() {
+  const enquirer = new Enquirer();
+  output.log({
+    title: "Configure internationalization (i18n) for your plugin",
+    body: [
+      "Select the locales you want to support. At least one locale must be selected.",
+      "Use space to select, enter to continue."
+    ]
+  });
+  const localeChoices = COMMON_LOCALES.map((locale) => ({
+    name: locale.name,
+    message: locale.message,
+    value: locale.name
+  }));
+  let selectedLocales = [];
+  try {
+    const result = await enquirer.prompt({
+      type: "multiselect",
+      name: "locales",
+      message: "Select locales to support:",
+      choices: localeChoices,
+      initial: [0],
+      // Pre-select en-US by default
+      validate(value) {
+        if (value.length === 0) {
+          return "At least one locale must be selected";
+        }
+        return true;
+      }
+    });
+    selectedLocales = result.locales;
+  } catch (error) {
+    output.warning({ title: "Addition cancelled by user." });
+    process.exit(0);
+  }
+  try {
+    const addMoreResult = await enquirer.prompt({
+      type: "input",
+      name: "additionalLocales",
+      message: 'Enter additional locale codes (comma-separated, e.g., "ko-KR,ru-RU") or press enter to skip:'
+    });
+    const additionalLocalesInput = addMoreResult.additionalLocales;
+    if (additionalLocalesInput && additionalLocalesInput.trim()) {
+      const additionalLocales = additionalLocalesInput.split(",").map((locale) => locale.trim()).filter((locale) => locale.length > 0 && !selectedLocales.includes(locale));
+      selectedLocales.push(...additionalLocales);
+    }
+  } catch (error) {
+  }
+  output.log({
+    title: `Selected locales: ${selectedLocales.join(", ")}`
+  });
+  return {
+    locales: selectedLocales
+  };
+}
+
+export { promptI18nOptions };

package/dist/commands/add.command.js

@@ -0,0 +1,92 @@
+import { getAvailableAdditions, getAdditionByName, runAddition } from '../additions/manager.js';
+import { isGitDirectory, isGitDirectoryClean } from '../utils/utils.git.js';
+import { isPluginDirectory } from '../utils/utils.plugin.js';
+import { output } from '../utils/utils.console.js';
+import { promptI18nOptions } from './add/prompts.js';
+
+const add = async (argv) => {
+  const subCommand = argv._[1];
+  if (!subCommand) {
+    const availableAdditions = getAvailableAdditions();
+    const additionsList = Object.values(availableAdditions).map(
+      (addition2) => `${addition2.name} - ${addition2.description}`
+    );
+    output.error({
+      title: "No addition specified",
+      body: [
+        "Usage: npx @grafana/create-plugin add <addition-name>",
+        "",
+        "Available additions:",
+        ...output.bulletList(additionsList)
+      ]
+    });
+    process.exit(1);
+  }
+  await performPreAddChecks(argv);
+  const addition = getAdditionByName(subCommand);
+  if (!addition) {
+    const availableAdditions = getAvailableAdditions();
+    const additionsList = Object.values(availableAdditions).map((addition2) => addition2.name);
+    output.error({
+      title: `Unknown addition: ${subCommand}`,
+      body: ["Available additions:", ...output.bulletList(additionsList)]
+    });
+    process.exit(1);
+  }
+  try {
+    let options = {};
+    switch (addition.name) {
+      case "i18n":
+        options = await promptI18nOptions();
+        break;
+      default:
+        break;
+    }
+    const commitChanges = argv.commit;
+    await runAddition(addition, options, { commitChanges });
+  } catch (error) {
+    if (error instanceof Error) {
+      output.error({
+        title: "Addition failed",
+        body: [error.message]
+      });
+    }
+    process.exit(1);
+  }
+};
+async function performPreAddChecks(argv) {
+  if (!await isGitDirectory() && !argv.force) {
+    output.error({
+      title: "You are not inside a git directory",
+      body: [
+        `In order to proceed please run ${output.formatCode("git init")} in the root of your project and commit your changes.`,
+        `(This check is necessary to make sure that the changes are easy to revert and don't interfere with any changes you currently have.`,
+        `In case you want to proceed as is please use the ${output.formatCode("--force")} flag.)`
+      ]
+    });
+    process.exit(1);
+  }
+  if (!await isGitDirectoryClean() && !argv.force) {
+    output.error({
+      title: "Please clean your repository working tree before adding features.",
+      body: [
+        "Commit your changes or stash them.",
+        `(This check is necessary to make sure that the changes are easy to revert and don't mess with any changes you currently have.`,
+        `In case you want to proceed as is please use the ${output.formatCode("--force")} flag.)`
+      ]
+    });
+    process.exit(1);
+  }
+  if (!isPluginDirectory() && !argv.force) {
+    output.error({
+      title: "Are you inside a plugin directory?",
+      body: [
+        `We couldn't find a "src/plugin.json" file under your current directory.`,
+        `(Please make sure to run this command from the root of your plugin folder. In case you want to proceed as is please use the ${output.formatCode("--force")} flag.)`
+      ]
+    });
+    process.exit(1);
+  }
+}
+
+export { add };

package/dist/constants.js

@@ -1,5 +1,5 @@
-import { fileURLToPath } from 'node:url';
 import path from 'node:path';
+import { fileURLToPath } from 'node:url';
 
 const __dirname = fileURLToPath(new URL(".", import.meta.url));
 const IS_DEV = process.env.CREATE_PLUGIN_DEV !== void 0;
@@ -32,10 +32,18 @@ const EXTRA_TEMPLATE_VARIABLES = {
 const DEFAULT_FEATURE_FLAGS = {
   useReactRouterV6: true,
   bundleGrafanaUI: false,
+  usePlaywright: true,
   useExperimentalRspack: false,
   useExperimentalUpdates: true
 };
-const GRAFANA_FE_PACKAGES = ["@grafana/data", "@grafana/runtime", "@grafana/schema", "@grafana/ui"];
+const GRAFANA_FE_PACKAGES = [
+  "@grafana/data",
+  "@grafana/e2e-selectors",
+  "@grafana/e2e",
+  "@grafana/runtime",
+  "@grafana/schema",
+  "@grafana/ui"
+];
 const MIGRATION_CONFIG = {
   // Files that should be overriden during a migration.
   // (paths are relative to the scaffolded projects root)

package/dist/utils/utils.config.js

@@ -1,11 +1,11 @@
-import { argv, commandName } from './utils.cli.js';
+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 { 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';
 
 let hasShownConfigWarnings = false;
 function getConfig(workDir = process.cwd()) {

package/dist/utils/utils.templates.js

@@ -1,14 +1,15 @@
-import { DEFAULT_FEATURE_FLAGS, EXTRA_TEMPLATE_VARIABLES, PLUGIN_TYPES, TEMPLATE_PATHS, EXPORT_PATH_PREFIX } from '../constants.js';
+import { lt } from 'semver';
+import { glob } from 'glob';
+import path from 'node:path';
+import fs from 'node:fs';
 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 { CURRENT_APP_VERSION } from './utils.version.js';
+import { getPluginJson } from './utils.plugin.js';
 import { debug } from './utils.cli.js';
-import fs from 'node:fs';
+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 { 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) {
@@ -56,6 +57,9 @@ 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;
@@ -82,6 +86,8 @@ 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
     };
@@ -105,6 +111,8 @@ 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,8 +1,14 @@
-import 'node:fs';
-import 'node:path';
+import { readFileSync } from 'node:fs';
+import path from 'node:path';
 import { getVersion } from '../libs/version/src/index.js';
-import '../constants.js';
+import { TEMPLATE_PATHS } from '../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 };
+export { CURRENT_APP_VERSION, getGrafanaRuntimeVersion };

package/package.json

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

package/src/additions/additions.ts

@@ -0,0 +1,19 @@
+export type AdditionMeta = {
+  name: string;
+  description: string;
+  scriptPath: string;
+};
+
+type Additions = {
+  additions: Record<string, AdditionMeta>;
+};
+
+export default {
+  additions: {
+    i18n: {
+      name: 'i18n',
+      description: 'Add internationalization (i18n) support to your plugin',
+      scriptPath: './scripts/add-i18n.js',
+    },
+  },
+} as Additions;

package/src/additions/manager.ts

@@ -0,0 +1,77 @@
+import { additionsDebug, flushChanges, formatFiles, installNPMDependencies, printChanges } from './utils.js';
+import defaultAdditions, { AdditionMeta } from './additions.js';
+
+import { Context } from '../migrations/context.js';
+import { gitCommitNoVerify } from '../utils/utils.git.js';
+import { output } from '../utils/utils.console.js';
+
+export type AdditionFn = (context: Context, options?: AdditionOptions) => Context | Promise<Context>;
+
+export type AdditionOptions = Record<string, any>;
+
+type RunAdditionOptions = {
+  commitChanges?: boolean;
+};
+
+export function getAvailableAdditions(
+  additions: Record<string, AdditionMeta> = defaultAdditions.additions
+): Record<string, AdditionMeta> {
+  return additions;
+}
+
+export function getAdditionByName(
+  name: string,
+  additions: Record<string, AdditionMeta> = defaultAdditions.additions
+): AdditionMeta | undefined {
+  return additions[name];
+}
+
+export async function runAddition(
+  addition: AdditionMeta,
+  additionOptions: AdditionOptions = {},
+  runOptions: RunAdditionOptions = {}
+): Promise<void> {
+  const basePath = process.cwd();
+
+  output.log({
+    title: `Running addition: ${addition.name}`,
+    body: [addition.description],
+  });
+
+  try {
+    const context = new Context(basePath);
+    const updatedContext = await executeAddition(addition, context, additionOptions);
+    const shouldCommit = runOptions.commitChanges && updatedContext.hasChanges();
+
+    additionsDebug(`context for "${addition.name} (${addition.scriptPath})":`);
+    additionsDebug('%O', updatedContext.listChanges());
+
+    await formatFiles(updatedContext);
+    flushChanges(updatedContext);
+    printChanges(updatedContext, addition.name, addition);
+
+    installNPMDependencies(updatedContext);
+
+    if (shouldCommit) {
+      await gitCommitNoVerify(`chore: add ${addition.name} support via create-plugin`);
+    }
+
+    output.success({
+      title: `Successfully added ${addition.name} to your plugin.`,
+    });
+  } catch (error) {
+    if (error instanceof Error) {
+      throw new Error(`Error running addition "${addition.name} (${addition.scriptPath})": ${error.message}`);
+    }
+    throw error;
+  }
+}
+
+export async function executeAddition(
+  addition: AdditionMeta,
+  context: Context,
+  options: AdditionOptions = {}
+): Promise<Context> {
+  const module: { default: AdditionFn } = await import(addition.scriptPath);
+  return module.default(context, options);
+}