@grafana/create-plugin 2.10.0 → 2.11.0-canary.602.81e7a0e.0

package/dist/utils/utils.handlebars.js

@@ -27,12 +27,15 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 var _this = this;
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.renderHandlebarsTemplate = exports.registerHandlebarsHelpers = exports.normalizeId = exports.ifEq = void 0;
+exports.renderHandlebarsTemplate = exports.normalizeId = exports.ifEq = void 0;
 var handlebars_1 = __importDefault(require("handlebars"));
 var changeCase = __importStar(require("change-case"));
 var title_case_1 = __importDefault(require("title-case"));
 var upper_case_1 = __importDefault(require("upper-case"));
 var lower_case_1 = __importDefault(require("lower-case"));
+var constants_1 = require("../constants");
+var fs_1 = require("fs");
+var path_1 = require("path");
 var ifEq = function (a, b, options) {
     return a === b ? options.fn(_this) : options.inverse(_this);
 };
@@ -45,6 +48,8 @@ var normalizeId = function (pluginName, orgName, type) {
     return changeCase.lowerCase(newOrgName) + '-' + changeCase.lowerCase(newPluginName) + "-".concat(type);
 };
 exports.normalizeId = normalizeId;
+registerHandlebarsHelpers();
+registerHandlebarsPartials();
 function registerHandlebarsHelpers() {
     var helpers = {
         camelCase: changeCase.camelCase,
@@ -68,9 +73,15 @@ function registerHandlebarsHelpers() {
         return handlebars_1.default.registerHelper(helperName, helpers[helperName]);
     });
 }
-exports.registerHandlebarsHelpers = registerHandlebarsHelpers;
+function registerHandlebarsPartials() {
+    var partialFiles = (0, fs_1.readdirSync)(constants_1.PARTIALS_DIR);
+    partialFiles.forEach(function (fileName) {
+        var name = (0, path_1.basename)(fileName, '.md');
+        var template = (0, fs_1.readFileSync)((0, path_1.join)(constants_1.PARTIALS_DIR, fileName), 'utf-8');
+        handlebars_1.default.registerPartial(name, template);
+    });
+}
 function renderHandlebarsTemplate(template, data) {
-    registerHandlebarsHelpers();
     return handlebars_1.default.compile(template)(data);
 }
 exports.renderHandlebarsTemplate = renderHandlebarsTemplate;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@grafana/create-plugin",
-  "version": "2.10.0",
+  "version": "2.11.0-canary.602.81e7a0e.0",
   "main": "index.js",
   "repository": {
     "directory": "packages/create-plugin",
@@ -17,17 +17,17 @@
     "clean": "rm -rf ./dist ./generated",
     "clean-generated": "find ./generated -not -path \"./generated/node_modules*\" -not -path \"./generated\" -not -path \"./generated/package-lock.json\" -maxdepth 1 -print0 | xargs -0  -I {} rm -rf {}",
     "build": "npm run clean && tsc && chmod +x ./dist/bin/run.js",
-    "dev": "CREATE_PLUGIN_DEV=true nodemon --exec 'tsc'",
-    "dev-app": "CREATE_PLUGIN_DEV=true nodemon --exec 'npm run generate-app'",
-    "dev-scenes-app": "CREATE_PLUGIN_DEV=true nodemon --exec 'npm run generate-scenes-app'",
-    "dev-panel": "CREATE_PLUGIN_DEV=true nodemon --exec 'npm run generate-panel'",
-    "dev-datasource": "CREATE_PLUGIN_DEV=true nodemon --exec 'npm run generate-datasource'",
-    "generate-app": "tsc && npm run clean-generated && CREATE_PLUGIN_DEV=true node ./scripts/generate-app.js",
-    "generate-scenes-app": "tsc && npm run clean-generated && CREATE_PLUGIN_DEV=true node ./scripts/generate-scenes-app.js",
-    "generate-app-backend": "tsc && npm run clean-generated && CREATE_PLUGIN_DEV=true node ./scripts/generate-app-backend.js",
-    "generate-panel": "tsc && npm run clean-generated && CREATE_PLUGIN_DEV=true node ./scripts/generate-panel.js",
-    "generate-datasource": "tsc && npm run clean-generated && CREATE_PLUGIN_DEV=true node ./scripts/generate-datasource-without-backend.js",
-    "generate-datasource-backend": "tsc && npm run clean-generated && CREATE_PLUGIN_DEV=true node ./scripts/generate-datasource-with-backend.js",
+    "dev": "nodemon --exec 'tsc'",
+    "dev-app": "nodemon --exec 'npm run generate-app'",
+    "dev-scenes-app": "nodemon --exec 'npm run generate-scenes-app'",
+    "dev-panel": "nodemon --exec 'npm run generate-panel'",
+    "dev-datasource": "nodemon --exec 'npm run generate-datasource'",
+    "generate-app": "tsc && npm run clean-generated && CREATE_PLUGIN_DEV=true node ./dist/bin/run.js --pluginName='Sample app' --orgName='sample-org' --pluginDescription='This is a sample app.' --pluginType='app' --no-hasBackend --hasGithubWorkflows --hasGithubLevitateWorkflow",
+    "generate-scenes-app": "tsc && npm run clean-generated && CREATE_PLUGIN_DEV=true node ./dist/bin/run.js --pluginName='Sample scenesapp' --orgName='sample-org' --pluginDescription='This is a sample scenes app.' --pluginType='scenesapp' --no-hasBackend --hasGithubWorkflows --hasGithubLevitateWorkflow",
+    "generate-app-backend": "tsc && npm run clean-generated && CREATE_PLUGIN_DEV=true node ./dist/bin/run.js --pluginName='Sample app' --orgName='sample-org' --pluginDescription='This is a sample backend app.' --pluginType='app' --hasBackend --hasGithubWorkflows --hasGithubLevitateWorkflow",
+    "generate-panel": "tsc && npm run clean-generated && CREATE_PLUGIN_DEV=true node ./dist/bin/run.js --pluginName='Sample panel' --orgName='sample-org' --pluginDescription='This is a sample panel.' --pluginType='panel' --hasGithubWorkflows --hasGithubLevitateWorkflow",
+    "generate-datasource": "tsc && npm run clean-generated && CREATE_PLUGIN_DEV=true node ./dist/bin/run.js --pluginName='Sample datasource' --orgName='sample-org' --pluginDescription='This is a sample datasource.' --pluginType='datasource' --no-hasBackend --hasGithubWorkflows --hasGithubLevitateWorkflow",
+    "generate-datasource-backend": "tsc && npm run clean-generated && CREATE_PLUGIN_DEV=true node ./dist/bin/run.js --pluginName='Sample datasource' --orgName='sample-org' --pluginDescription='This is a sample datasource.' --pluginType='datasource' --hasBackend --hasGithubWorkflows --hasGithubLevitateWorkflow",
     "lint": "eslint --cache --ext .js,.jsx,.ts,.tsx ./src",
     "lint:fix": "npm run lint -- --fix",
     "test": "jest",
@@ -38,14 +38,18 @@
     "@types/mkdirp": "^1.0.2",
     "@types/semver": "^7.3.9",
     "@types/which": "^2.0.2",
-    "enquirer": "^2.3.6",
+    "chalk": "^4.1.2",
+    "change-case": "^3.1.0",
+    "enquirer": "^2.4.1",
     "find-up": "^5.0.0",
     "glob": "^7.1.7",
+    "handlebars": "^4.7.8",
     "marked": "^10.0.0",
     "marked-terminal": "^5.1.1",
+    "minimist": "^1.2.8",
     "mkdirp": "^1.0.4",
-    "plop": "^2.7.4",
     "semver": "^7.3.5",
+    "title-case": "^2.1.1",
     "which": "^3.0.0"
   },
   "devDependencies": {
@@ -61,10 +65,13 @@
     "ext": "*",
     "events": {
       "start": "cls || clear"
+    },
+    "env": {
+      "CREATE_PLUGIN_DEV": true
     }
   },
   "engines": {
     "node": ">=20"
   },
-  "gitHead": "5a5226f5a561f7a050dc26387d48f10def9c1de0"
+  "gitHead": "81e7a0e9e06ec8f596722bd14f25f9ae6a640803"
 }

package/src/commands/{generate-actions → generate}/prettify-files.ts

@@ -1,14 +1,10 @@
 import { exec as nodeExec } from 'node:child_process';
 import { promisify } from 'node:util';
 import fs from 'fs';
-import { getExportPath } from '../../utils/utils.path';
-import { CliArgs } from '../types';
 
 const exec = promisify(nodeExec);
 
-export async function prettifyFiles({ pluginName, orgName, pluginType }: CliArgs) {
-  const exportPath = getExportPath(pluginName, orgName, pluginType);
-
+export async function prettifyFiles(exportPath: string) {
   if (!fs.existsSync(exportPath)) {
     return '';
   }

package/src/commands/{generate-actions → generate}/print-success-message.ts

@@ -19,8 +19,7 @@ export function printGenerateSuccessMessage(answers: CliArgs) {
     '- Open http://localhost:3000 in your browser to create a dashboard to begin developing your plugin.',
   ];
 
-  const msg = `
-Congratulations on scaffolding a Grafana ${answers.pluginType} plugin! 🚀
+  const msg = `\n# Congratulations on scaffolding a Grafana ${answers.pluginType} plugin! 🚀
 
 ## What's next?
 
@@ -32,5 +31,5 @@ _Note: We strongly recommend creating a new Git repository by running \`git init
 - Learn more about Grafana Plugin Development at https://grafana.com/developers/plugin-tools
 `;
 
-  return displayAsMarkdown(msg);
+  console.log(displayAsMarkdown(msg));
 }

package/src/commands/generate/prompt-user.ts

@@ -0,0 +1,102 @@
+import minimist from 'minimist';
+import Enquirer from 'enquirer';
+import { PLUGIN_TYPES } from '../../constants';
+import { CliArgs } from '../types';
+
+export async function promptUser(argv: minimist.ParsedArgs) {
+  let answers: Partial<CliArgs> = {};
+  const enquirer = new Enquirer();
+
+  for (const prompt of prompts) {
+    const { name, shouldPrompt } = prompt;
+
+    if (argv.hasOwnProperty(name)) {
+      answers = { ...answers, [name]: argv[name] };
+    } else {
+      if (typeof shouldPrompt === 'function' && !shouldPrompt(answers)) {
+        continue;
+      } else {
+        const result = await enquirer.prompt(prompt);
+        answers = { ...answers, ...result };
+      }
+    }
+  }
+
+  return answers as CliArgs;
+}
+
+type Prompt = {
+  name: keyof CliArgs;
+  type: string | (() => string);
+  message: string | (() => string) | (() => Promise<string>);
+  validate?: (value: string) => boolean | string | Promise<boolean | string>;
+  initial?: any;
+  choices?: Array<string | Choice>;
+  shouldPrompt?: ((state: object) => boolean | Promise<boolean>) | boolean;
+};
+
+type Choice = {
+  name: string;
+  message?: string;
+  value?: unknown;
+  hint?: string;
+  role?: string;
+  enabled?: boolean;
+  disabled?: boolean | string;
+};
+
+const prompts: Prompt[] = [
+  {
+    name: 'pluginName',
+    type: 'input',
+    message: 'What is going to be the name of your plugin?',
+    validate: (value: string) => {
+      if (/.+/.test(value)) {
+        return true;
+      }
+      return 'Plugin name is required';
+    },
+  },
+  {
+    name: 'orgName',
+    type: 'input',
+    message: 'What is the organization name of your plugin?',
+    validate: (value: string) => {
+      if (/.+/.test(value)) {
+        return true;
+      }
+      return 'Organization name is required';
+    },
+  },
+  {
+    name: 'pluginDescription',
+    type: 'input',
+    message: 'How would you describe your plugin?',
+    initial: '',
+  },
+  {
+    name: 'pluginType',
+    type: 'select',
+    choices: [PLUGIN_TYPES.app, PLUGIN_TYPES.datasource, PLUGIN_TYPES.panel, PLUGIN_TYPES.scenes],
+    message: 'What type of plugin would you like?',
+  },
+  {
+    name: 'hasBackend',
+    type: 'confirm',
+    message: 'Do you want a backend part of your plugin?',
+    initial: false,
+    shouldPrompt: (answers: CliArgs) => answers.pluginType !== PLUGIN_TYPES.panel,
+  },
+  {
+    name: 'hasGithubWorkflows',
+    type: 'confirm',
+    message: 'Do you want to add Github CI and Release workflows?',
+    initial: false,
+  },
+  {
+    name: 'hasGithubLevitateWorkflow',
+    type: 'confirm',
+    message: 'Do you want to add a Github workflow for automatically checking "Grafana API compatibility" on PRs?',
+    initial: false,
+  },
+];

package/src/commands/{generate-actions → generate}/update-go-sdk-and-packages.ts

@@ -1,15 +1,10 @@
-import { getExportPath } from '../../utils/utils.path';
-import { CliArgs } from '../types';
 import which from 'which';
 import fs from 'fs';
 import { exec } from 'child_process';
 
 const SDK_GO_MODULE = 'github.com/grafana/grafana-plugin-sdk-go';
 
-export async function updateGoSdkAndModules({ pluginName, orgName, pluginType }: CliArgs): Promise<string> {
-  // plugin directory
-  const exportPath = getExportPath(pluginName, orgName, pluginType);
-
+export async function updateGoSdkAndModules(exportPath: string) {
   // check if there is a go.mod file in exportPath
   const goModPath = `${exportPath}/go.mod`;
   if (!fs.existsSync(goModPath)) {

package/src/commands/generate.command.ts

@@ -1,15 +1,198 @@
-import path from 'path';
+import glob from 'glob';
 import minimist from 'minimist';
-import { Plop, run } from 'plop';
+import chalk from 'chalk';
+import { mkdir, readdir, writeFile } from 'node:fs/promises';
+import path from 'path';
+import { EXTRA_TEMPLATE_VARIABLES, IS_DEV, PLUGIN_TYPES, TEMPLATE_PATHS } from '../constants';
+import { getConfig } from '../utils/utils.config';
+import { printError } from '../utils/utils.console';
+import { directoryExists, getExportFileName, isFile } from '../utils/utils.files';
+import { normalizeId } from '../utils/utils.handlebars';
+import { getPackageManagerFromUserAgent, getPackageManagerInstallCmd } from '../utils/utils.packageManager';
+import { getExportPath } from '../utils/utils.path';
+import { renderTemplateFromFile } from '../utils/utils.templates';
+import { getVersion } from '../utils/utils.version';
+import { prettifyFiles } from './generate/prettify-files';
+import { printGenerateSuccessMessage } from './generate/print-success-message';
+import { promptUser } from './generate/prompt-user';
+import { updateGoSdkAndModules } from './generate/update-go-sdk-and-packages';
+import { CliArgs, TemplateData } from './types';
 
 export const generate = async (argv: minimist.ParsedArgs) => {
-  Plop.launch(
-    {
-      cwd: argv.cwd,
-      configPath: path.join(__dirname, 'generate.plopfile.js'),
-      require: argv.require,
-      completion: argv.completion,
-    },
-    (env) => run(env, undefined, true)
-  );
+  const answers = await promptUser(argv);
+  const templateData = getTemplateData(answers);
+  const exportPath = getExportPath(answers.pluginName, answers.orgName, answers.pluginType);
+  const exportPathExists = await directoryExists(exportPath);
+  const exportPathIsPopulated = exportPathExists ? (await readdir(exportPath)).length > 0 : false;
+
+  // Prevent generation from writing to an existing, populated directory unless in DEV mode.
+  if (exportPathIsPopulated && !IS_DEV) {
+    printError(`**Aborting plugin scaffold. '${exportPath}' exists and contains files.**`);
+    process.exit(1);
+  }
+
+  const actions = getTemplateActions({ templateData, exportPath });
+  const { changes, failures } = await generateFiles({ actions });
+
+  changes.forEach((change) => {
+    console.log(`${chalk.green('✔︎ ++')} ${change.path}`);
+  });
+
+  failures.forEach((failure) => {
+    printError(`${failure.error}`);
+  });
+
+  if (answers.hasBackend) {
+    await execPostScaffoldFunction(updateGoSdkAndModules, exportPath);
+  }
+  await execPostScaffoldFunction(prettifyFiles, exportPath);
+
+  printGenerateSuccessMessage(answers);
 };
+
+function getTemplateData(answers: CliArgs) {
+  const { pluginName, orgName, pluginType } = answers;
+  const { features } = getConfig();
+  const currentVersion = getVersion();
+  const pluginId = normalizeId(pluginName, orgName, pluginType);
+  // Support the users package manager of choice.
+  const { packageManagerName, packageManagerVersion } = getPackageManagerFromUserAgent();
+  const packageManagerInstallCmd = getPackageManagerInstallCmd(packageManagerName);
+  const isAppType = pluginType === PLUGIN_TYPES.app || pluginType === PLUGIN_TYPES.scenes;
+  const templateData: TemplateData = {
+    ...answers,
+    pluginId,
+    packageManagerName,
+    packageManagerInstallCmd,
+    packageManagerVersion,
+    isAppType,
+    isNPM: packageManagerName === 'npm',
+    version: currentVersion,
+    bundleGrafanaUI: features.bundleGrafanaUI,
+  };
+
+  return templateData;
+}
+
+function getTemplateActions({ exportPath, templateData }: { exportPath: string; templateData: any }) {
+  const commonActions = getActionsForTemplateFolder({
+    folderPath: TEMPLATE_PATHS.common,
+    exportPath,
+    templateData,
+  });
+
+  // Copy over files from the plugin type specific folder, e.g. "templates/app" for "app" plugins ("app" | "panel" | "datasource").
+  const pluginTypeSpecificActions = getActionsForTemplateFolder({
+    folderPath: TEMPLATE_PATHS[templateData.pluginType],
+    exportPath,
+    templateData,
+  });
+
+  // Copy over backend-specific files (if selected)
+  const backendFolderPath = templateData.isAppType ? TEMPLATE_PATHS.backendApp : TEMPLATE_PATHS.backend;
+  const backendActions = templateData.hasBackend
+    ? getActionsForTemplateFolder({ folderPath: backendFolderPath, exportPath, templateData })
+    : [];
+
+  // Common, pluginType and backend actions can contain different templates for the same destination.
+  // This filtering removes the duplicate file additions to make sure the correct template is scaffolded.
+  // Note that the order is reversed so backend > pluginType > common
+  const pluginActions = [...backendActions, ...pluginTypeSpecificActions, ...commonActions].reduce((acc, file) => {
+    const actionExists = acc.find((f) => f.path === file.path);
+    // return early to prevent duplicate file additions
+    if (actionExists) {
+      return acc;
+    }
+    acc.push(file);
+    return acc;
+  }, []);
+
+  // Copy over Github workflow files (if selected)
+  const ciWorkflowActions = templateData.hasGithubWorkflows
+    ? getActionsForTemplateFolder({
+        folderPath: TEMPLATE_PATHS.ciWorkflows,
+        exportPath,
+        templateData,
+      })
+    : [];
+
+  const isCompatibleWorkflowActions = templateData.hasGithubLevitateWorkflow
+    ? getActionsForTemplateFolder({
+        folderPath: TEMPLATE_PATHS.isCompatibleWorkflow,
+        exportPath,
+        templateData,
+      })
+    : [];
+
+  return [...pluginActions, ...ciWorkflowActions, ...isCompatibleWorkflowActions];
+}
+
+function getActionsForTemplateFolder({
+  folderPath,
+  exportPath,
+  templateData,
+}: {
+  folderPath: string;
+  exportPath: string;
+  templateData: TemplateData;
+}) {
+  let files = glob.sync(`${folderPath}/**`, { dot: true });
+
+  // The npmrc file is only useful for `pnpm` settings. We can remove it for other package managers.
+  if (templateData.packageManagerName !== 'pnpm') {
+    files = files.filter((file) => path.basename(file) !== 'npmrc');
+  }
+
+  function getFileExportPath(f: string) {
+    return path.relative(folderPath, path.dirname(f));
+  }
+
+  return files.filter(isFile).map((f) => ({
+    templateFile: f,
+    // The target path where the compiled template is saved to
+    path: path.join(exportPath, getFileExportPath(f), getExportFileName(f)),
+    data: {
+      ...EXTRA_TEMPLATE_VARIABLES,
+      ...templateData,
+    },
+  }));
+}
+
+async function generateFiles({ actions }: { actions: any[] }) {
+  const failures = [];
+  const changes = [];
+  for (const action of actions) {
+    try {
+      const rootDir = path.dirname(action.path);
+      const pathExists = await directoryExists(rootDir);
+      if (!pathExists) {
+        await mkdir(rootDir, { recursive: true });
+      }
+
+      const rendered = renderTemplateFromFile(action.templateFile, action.data);
+      await writeFile(action.path, rendered);
+      changes.push({
+        path: action.path,
+      });
+    } catch (error) {
+      failures.push({
+        path: action.path,
+        error: error.message || error.toString(),
+      });
+    }
+  }
+  return { failures, changes };
+}
+
+type AsyncFunction<T> = (...args: any[]) => Promise<T>;
+
+async function execPostScaffoldFunction<T>(fn: AsyncFunction<T>, ...args: Parameters<AsyncFunction<T>>) {
+  try {
+    const resultMsg = await fn.apply(undefined, args);
+    if (resultMsg) {
+      console.log(`${chalk.green('✔︎')} ${resultMsg}`);
+    }
+  } catch (error) {
+    printError(`${error}`);
+  }
+}

package/src/utils/utils.console.ts

@@ -1,9 +1,12 @@
 const { marked } = require('marked');
+const chalk = require('chalk');
 const TerminalRenderer = require('marked-terminal');
 const { Confirm, Select } = require('enquirer');
 
 marked.setOptions({
-  renderer: new TerminalRenderer(),
+  renderer: new TerminalRenderer({
+    firstHeading: chalk.hex('#ff9900').underline.bold,
+  }),
 });
 
 export function displayAsMarkdown(msg: string) {
@@ -19,7 +22,7 @@ export function printMessage(msg: string) {
 }
 
 export function printSuccessMessage(msg: string) {
-  console.log(displayAsMarkdown(`\n✔ ${msg}`));
+  console.log(displayAsMarkdown(`\n✔ ${msg}`).trim());
 }
 
 export function printError(error: string) {

package/src/utils/utils.files.ts

@@ -1,6 +1,7 @@
 import path from 'path';
 import fs from 'fs';
 import { TEMPLATE_PATHS } from '../constants';
+import { access, constants } from 'fs/promises';
 
 // Removes common template files from the list in case they have a plugin-specific override
 export function filterOutCommonFiles(files: string[], pluginType: string) {
@@ -36,6 +37,15 @@ export function readJsonFile(filename: string) {
   }
 }
 
+export async function directoryExists(path: string) {
+  try {
+    await access(path, constants.F_OK);
+    return true;
+  } catch (e) {
+    return false;
+  }
+}
+
 export function getOnlyExistingInCwd(files: string[]) {
   return files.filter((file) => fs.existsSync(path.join(process.cwd(), file)));
 }

package/src/utils/utils.handlebars.ts

@@ -3,7 +3,9 @@ import * as changeCase from 'change-case';
 import titleCase from 'title-case';
 import upperCase from 'upper-case';
 import lowerCase from 'lower-case';
-import { PLUGIN_TYPES } from '../constants';
+import { PARTIALS_DIR, PLUGIN_TYPES } from '../constants';
+import { readFileSync, readdirSync } from 'fs';
+import { basename, join } from 'path';
 
 // Why? The `{#if}` expression in Handlebars unfortunately only accepts a boolean, which makes it hard to compare values in templates.
 export const ifEq = (a: any, b: any, options: HelperOptions) => {
@@ -19,8 +21,11 @@ export const normalizeId = (pluginName: string, orgName: string, type: PLUGIN_TY
   return changeCase.lowerCase(newOrgName) + '-' + changeCase.lowerCase(newPluginName) + `-${type}`;
 };
 
-// Needed when we are rendering the templates outside of the context of Plop but still would like to support the same helpers
-export function registerHandlebarsHelpers() {
+// Register our helpers and partials with handlebars.
+registerHandlebarsHelpers();
+registerHandlebarsPartials();
+
+function registerHandlebarsHelpers() {
   const helpers = {
     camelCase: changeCase.camelCase,
     snakeCase: changeCase.snakeCase,
@@ -45,7 +50,15 @@ export function registerHandlebarsHelpers() {
   );
 }
 
+function registerHandlebarsPartials() {
+  const partialFiles = readdirSync(PARTIALS_DIR);
+  partialFiles.forEach((fileName) => {
+    const name = basename(fileName, '.md');
+    const template = readFileSync(join(PARTIALS_DIR, fileName), 'utf-8');
+    Handlebars.registerPartial(name, template);
+  });
+}
+
 export function renderHandlebarsTemplate(template: string, data?: any) {
-  registerHandlebarsHelpers();
   return Handlebars.compile(template)(data);
 }

package/templates/app/README.md

@@ -4,14 +4,14 @@ This template is a starting point for building an app plugin for Grafana.
 
 ## What are Grafana app plugins?
 
-App plugins can let you create a custom out-of-the-box monitoring experience by custom pages, nested datasources and panel plugins.
+App plugins can let you create a custom out-of-the-box monitoring experience by custom pages, nested data sources and panel plugins.
 
-## Getting started
+## Get started
 
-{{#if hasBackend}}-- INSERT BACKEND GETTING STARTED --{{/if}}
--- INSERT FRONTEND GETTING STARTED --
+{{#if hasBackend}}{{> backend-getting-started }}{{/if}}
+{{> frontend-getting-started packageManagerName=packageManagerName }}
 
--- INSERT DISTRIBUTING YOUR PLUGIN --
+{{> distributing-your-plugin }}
 
 ## Learn more
 
@@ -19,4 +19,4 @@ Below you can find source code for existing app plugins and other related docume
 
 - [Basic app plugin example](https://github.com/grafana/grafana-plugin-examples/tree/master/examples/app-basic#readme)
 - [`plugin.json` documentation](https://grafana.com/developers/plugin-tools/reference-plugin-json)
-- [How to sign a plugin?](https://grafana.com/developers/plugin-tools/publish-a-plugin/sign-a-plugin)
+- [Sign a plugin](https://grafana.com/developers/plugin-tools/publish-a-plugin/sign-a-plugin)

package/templates/common/.config/webpack/webpack.config.ts

@@ -157,6 +157,7 @@ const config = async (env): Promise<Configuration> => {
           { from: 'img/**/*', to: '.', noErrorOnMissing: true }, // Optional
           { from: 'libs/**/*', to: '.', noErrorOnMissing: true }, // Optional
           { from: 'static/**/*', to: '.', noErrorOnMissing: true }, // Optional
+          { from: '**/query_help.md', to: '.', noErrorOnMissing: true}, // Optional
         ],
       }),
       // Replace certain template-variables in the README and plugin.json

package/templates/datasource/README.md

@@ -8,10 +8,10 @@ Grafana supports a wide range of data sources, including Prometheus, MySQL, and
 
 ## Getting started
 
-{{#if hasBackend}}-- INSERT BACKEND GETTING STARTED --{{/if}}
--- INSERT FRONTEND GETTING STARTED --
+{{#if hasBackend}}{{> backend-getting-started }}{{/if}}
+{{> frontend-getting-started packageManagerName=packageManagerName }}
 
--- INSERT DISTRIBUTING YOUR PLUGIN --
+{{> distributing-your-plugin }}
 
 ## Learn more
 

package/templates/panel/README.md

@@ -10,9 +10,9 @@ Use panel plugins when you want to do things like visualize data returned by dat
 
 ## Getting started
 
--- INSERT FRONTEND GETTING STARTED --
+{{> frontend-getting-started packageManagerName=packageManagerName }}
 
--- INSERT DISTRIBUTING YOUR PLUGIN --
+{{> distributing-your-plugin }}
 
 ## Learn more
 

package/templates/scenes-app/README.md

@@ -18,6 +18,6 @@ To learn more about @grafana/scenes usage please refer to the [documentation](ht
 1. An example of a scene with tabs. See [Scene with tabs](./src/pages/WithTabs/WithTabs.tsx)
 1. An example of a scene with drill down. See [Scene with drill down](./src/pages/WithDrilldown/WithDrilldown.tsx)
 
--- INSERT FRONTEND GETTING STARTED --
+{{> frontend-getting-started packageManagerName=packageManagerName }}
 
--- INSERT DISTRIBUTING YOUR PLUGIN --
+{{> distributing-your-plugin }}