@grafana/create-plugin 0.0.1 → 0.1.0

package/.github/workflows/create-release.yml

@@ -41,7 +41,7 @@ jobs:
       - name: Create Release Notes
         uses: actions/github-script@v4.0.2
         with:
-          github-token: ${{secrets.GH_TOKEN}}
+          github-token: ${{secrets.GH_BOT_ACCESS_TOKEN}}
           script: |
             await github.request(`POST /repos/${{ github.repository }}/releases`, {
               tag_name: "${{ github.ref }}",

package/dist/commands/generate.plopfile.js

@@ -26,19 +26,30 @@ function default_1(plop) {
             {
                 name: 'pluginName',
                 type: 'input',
-                message: 'What is going to be the name of your plugin?'
+                message: 'What is going to be the name of your plugin?',
+                validate: function (value) {
+                    if (/.+/.test(value)) {
+                        return true;
+                    }
+                    return 'Plugin name is required';
+                }
             },
             {
                 name: 'orgName',
                 type: 'input',
                 message: 'What is the organization name of your plugin?',
-                "default": 'my-org'
+                validate: function (value) {
+                    if (/.+/.test(value)) {
+                        return true;
+                    }
+                    return 'Organization name is required';
+                }
             },
             {
                 name: 'pluginDescription',
                 type: 'input',
                 message: 'How would you describe your plugin?',
-                "default": '<plugin description>'
+                "default": ''
             },
             {
                 name: 'pluginType',
@@ -66,44 +77,54 @@ function default_1(plop) {
             },
         ],
         actions: function (_a) {
-            var pluginType = _a.pluginType, hasBackend = _a.hasBackend, hasGithubWorkflows = _a.hasGithubWorkflows, hasGithubLevitateWorkflow = _a.hasGithubLevitateWorkflow;
-            var commonActions = getActionsForTemplateFolder(constants_1.TEMPLATE_PATHS.common);
-            var pluginTypeSpecificActions = getActionsForTemplateFolder(constants_1.TEMPLATE_PATHS[pluginType]);
-            var backendActions = hasBackend ? getActionsForTemplateFolder(constants_1.TEMPLATE_PATHS.backend) : [];
-            var ciWorkflowActions = hasGithubWorkflows ? getActionsForTemplateFolder(constants_1.TEMPLATE_PATHS.ciWorkflows) : [];
+            var pluginName = _a.pluginName, orgName = _a.orgName, pluginType = _a.pluginType, hasBackend = _a.hasBackend, hasGithubWorkflows = _a.hasGithubWorkflows, hasGithubLevitateWorkflow = _a.hasGithubLevitateWorkflow;
+            var exportPath = getExportPath(pluginName, orgName, pluginType);
+            var commonActions = getActionsForTemplateFolder({ folderPath: constants_1.TEMPLATE_PATHS.common, exportPath: exportPath });
+            var pluginTypeSpecificActions = getActionsForTemplateFolder({
+                folderPath: constants_1.TEMPLATE_PATHS[pluginType],
+                exportPath: exportPath
+            });
+            var backendActions = hasBackend
+                ? getActionsForTemplateFolder({ folderPath: constants_1.TEMPLATE_PATHS.backend, exportPath: exportPath })
+                : [];
+            var ciWorkflowActions = hasGithubWorkflows
+                ? getActionsForTemplateFolder({ folderPath: constants_1.TEMPLATE_PATHS.ciWorkflows, exportPath: exportPath })
+                : [];
             var isCompatibleWorkflowActions = hasGithubLevitateWorkflow
-                ? getActionsForTemplateFolder(constants_1.TEMPLATE_PATHS.isCompatibleWorkflow)
+                ? getActionsForTemplateFolder({ folderPath: constants_1.TEMPLATE_PATHS.isCompatibleWorkflow, exportPath: exportPath })
                 : [];
-            var readmeActions = getActionsForReadme();
+            var readmeActions = getActionsForReadme({ exportPath: exportPath });
             return __spreadArray(__spreadArray(__spreadArray(__spreadArray(__spreadArray(__spreadArray([], commonActions, true), pluginTypeSpecificActions, true), backendActions, true), ciWorkflowActions, true), readmeActions, true), isCompatibleWorkflowActions, true);
         }
     });
 }
 exports["default"] = default_1;
-function getActionsForReadme() {
+function getActionsForReadme(_a) {
+    var exportPath = _a.exportPath;
     return [
-        replacePatternWithTemplateInReadme('-- INSERT FRONTEND GETTING STARTED --', 'frontend-getting-started.md'),
-        replacePatternWithTemplateInReadme('-- INSERT BACKEND GETTING STARTED --', 'backend-getting-started.md'),
+        replacePatternWithTemplateInReadme('-- INSERT FRONTEND GETTING STARTED --', 'frontend-getting-started.md', exportPath),
+        replacePatternWithTemplateInReadme('-- INSERT BACKEND GETTING STARTED --', 'backend-getting-started.md', exportPath),
     ];
 }
-function replacePatternWithTemplateInReadme(pattern, partialsFile) {
+function replacePatternWithTemplateInReadme(pattern, partialsFile, exportPath) {
     return {
         type: 'modify',
-        path: path_1["default"].join(constants_1.EXPORT_PATH_PREFIX, 'README.md'),
+        path: path_1["default"].join(exportPath, 'README.md'),
         pattern: pattern,
         template: undefined,
         templateFile: path_1["default"].join(constants_1.PARTIALS_DIR, partialsFile),
         data: constants_1.EXTRA_TEMPLATE_VARIABLES
     };
 }
-function getActionsForTemplateFolder(folderPath) {
+function getActionsForTemplateFolder(_a) {
+    var folderPath = _a.folderPath, exportPath = _a.exportPath;
     var files = glob_1["default"].sync("".concat(folderPath, "/**"), { dot: true });
     var getExportFileName = function (f) { return (path_1["default"].extname(f) === '.hbs' ? path_1["default"].basename(f, '.hbs') : path_1["default"].basename(f)); };
     var getExportPath = function (f) { return path_1["default"].relative(folderPath, path_1["default"].dirname(f)); };
     return files.filter(isFile).map(function (f) { return ({
         type: 'add',
         templateFile: f,
-        path: path_1["default"].join(constants_1.EXPORT_PATH_PREFIX, getExportPath(f), getExportFileName(f)),
+        path: path_1["default"].join(exportPath, getExportPath(f), getExportFileName(f)),
         force: constants_1.IS_DEV,
         abortOnFail: false,
         data: constants_1.EXTRA_TEMPLATE_VARIABLES
@@ -117,3 +138,11 @@ function isFile(path) {
         return false;
     }
 }
+function getExportPath(pluginName, orgName, pluginType) {
+    if (constants_1.IS_DEV) {
+        return constants_1.DEV_EXPORT_DIR;
+    }
+    else {
+        return path_1["default"].join(process.cwd(), (0, utils_handlebars_1.normalizeId)(pluginName, orgName, pluginType));
+    }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@grafana/create-plugin",
-  "version": "0.0.1",
+  "version": "0.1.0",
   "main": "index.js",
   "repository": "git@github.com:grafana/create-plugin.git",
   "author": "Grafana",
@@ -40,6 +40,7 @@
   "devDependencies": {
     "@grafana/eslint-config": "^2.5.0",
     "@swc/jest": "^0.2.20",
+    "@types/glob": "^7.0.0",
     "@types/jest": "^27.4.1",
     "@typescript-eslint/eslint-plugin": "^4.33.0",
     "@typescript-eslint/parser": "^4.33.0",

package/src/commands/generate.plopfile.ts

@@ -4,21 +4,22 @@ import path from 'path';
 import fs from 'fs';
 import { ifEq, normalizeId } from '../utils/utils.handlebars';
 import {
-  EXPORT_PATH_PREFIX,
   IS_DEV,
   TEMPLATE_PATHS,
   PARTIALS_DIR,
   PLUGIN_TYPES,
   EXTRA_TEMPLATE_VARIABLES,
+  DEV_EXPORT_DIR,
 } from '../constants';
 
 type CliArgs = {
   pluginName: string;
   pluginDescription: string;
   orgName: string;
-  pluginType: string;
+  pluginType: PLUGIN_TYPES;
   hasBackend: boolean;
   hasGithubWorkflows: boolean;
+  hasGithubLevitateWorkflow: boolean;
 };
 
 // Plopfile API documentation: https://plopjs.com/documentation/#plopfile-api
@@ -33,18 +34,29 @@ export default function (plop: NodePlopAPI) {
         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?',
-        default: 'my-org',
+        validate: (value: string) => {
+          if (/.+/.test(value)) {
+            return true;
+          }
+          return 'Organization name is required';
+        },
       },
       {
         name: 'pluginDescription',
         type: 'input',
         message: 'How would you describe your plugin?',
-        default: '<plugin description>',
+        default: '',
       },
       {
         name: 'pluginType',
@@ -71,26 +83,40 @@ export default function (plop: NodePlopAPI) {
         default: false,
       },
     ],
-    // @ts-ignore - We would like to specify the Answers type correctly
-    actions: function ({ pluginType, hasBackend, hasGithubWorkflows, hasGithubLevitateWorkflow }: CliArgs) {
+    actions: function ({
+      pluginName,
+      orgName,
+      pluginType,
+      hasBackend,
+      hasGithubWorkflows,
+      hasGithubLevitateWorkflow,
+    }: CliArgs) {
+      const exportPath = getExportPath(pluginName, orgName, pluginType);
       // Copy over files that are shared between plugins types
-      const commonActions = getActionsForTemplateFolder(TEMPLATE_PATHS.common);
+      const commonActions = getActionsForTemplateFolder({ folderPath: TEMPLATE_PATHS.common, exportPath });
 
       // Copy over files from the plugin type specific folder, e.g. "tempaltes/app" for "app" plugins ("app" | "panel" | "datasource").
-      const pluginTypeSpecificActions = getActionsForTemplateFolder(TEMPLATE_PATHS[pluginType]);
+      const pluginTypeSpecificActions = getActionsForTemplateFolder({
+        folderPath: TEMPLATE_PATHS[pluginType],
+        exportPath,
+      });
 
       // Copy over backend-specific files (if selected)
-      const backendActions = hasBackend ? getActionsForTemplateFolder(TEMPLATE_PATHS.backend) : [];
+      const backendActions = hasBackend
+        ? getActionsForTemplateFolder({ folderPath: TEMPLATE_PATHS.backend, exportPath })
+        : [];
 
       // Copy over Github workflow files (if selected)
-      const ciWorkflowActions = hasGithubWorkflows ? getActionsForTemplateFolder(TEMPLATE_PATHS.ciWorkflows) : [];
+      const ciWorkflowActions = hasGithubWorkflows
+        ? getActionsForTemplateFolder({ folderPath: TEMPLATE_PATHS.ciWorkflows, exportPath })
+        : [];
 
       const isCompatibleWorkflowActions = hasGithubLevitateWorkflow
-        ? getActionsForTemplateFolder(TEMPLATE_PATHS.isCompatibleWorkflow)
+        ? getActionsForTemplateFolder({ folderPath: TEMPLATE_PATHS.isCompatibleWorkflow, exportPath })
         : [];
 
       // Replace conditional bits in the Readme files
-      const readmeActions = getActionsForReadme();
+      const readmeActions = getActionsForReadme({ exportPath });
 
       return [
         ...commonActions,
@@ -104,17 +130,29 @@ export default function (plop: NodePlopAPI) {
   });
 }
 
-function getActionsForReadme(): ModifyActionConfig[] {
+function getActionsForReadme({ exportPath }: { exportPath: string }): ModifyActionConfig[] {
   return [
-    replacePatternWithTemplateInReadme('-- INSERT FRONTEND GETTING STARTED --', 'frontend-getting-started.md'),
-    replacePatternWithTemplateInReadme('-- INSERT BACKEND GETTING STARTED --', 'backend-getting-started.md'),
+    replacePatternWithTemplateInReadme(
+      '-- INSERT FRONTEND GETTING STARTED --',
+      'frontend-getting-started.md',
+      exportPath
+    ),
+    replacePatternWithTemplateInReadme(
+      '-- INSERT BACKEND GETTING STARTED --',
+      'backend-getting-started.md',
+      exportPath
+    ),
   ];
 }
 
-function replacePatternWithTemplateInReadme(pattern: string, partialsFile: string): ModifyActionConfig {
+function replacePatternWithTemplateInReadme(
+  pattern: string,
+  partialsFile: string,
+  exportPath: string
+): ModifyActionConfig {
   return {
     type: 'modify',
-    path: path.join(EXPORT_PATH_PREFIX, 'README.md'),
+    path: path.join(exportPath, 'README.md'),
     pattern,
     // @ts-ignore
     template: undefined,
@@ -124,7 +162,7 @@ function replacePatternWithTemplateInReadme(pattern: string, partialsFile: strin
 }
 
 // TODO<use Plop action `addMany` instead>
-function getActionsForTemplateFolder(folderPath: string) {
+function getActionsForTemplateFolder({ folderPath, exportPath }: { folderPath: string; exportPath: string }) {
   const files = glob.sync(`${folderPath}/**`, { dot: true });
   const getExportFileName = (f: string) => (path.extname(f) === '.hbs' ? path.basename(f, '.hbs') : path.basename(f));
   const getExportPath = (f: string) => path.relative(folderPath, path.dirname(f));
@@ -133,7 +171,7 @@ function getActionsForTemplateFolder(folderPath: string) {
     type: 'add',
     templateFile: f,
     // The target path where the compiled template is saved to
-    path: path.join(EXPORT_PATH_PREFIX, getExportPath(f), getExportFileName(f)),
+    path: path.join(exportPath, getExportPath(f), getExportFileName(f)),
     // We would like to override generated files in development mode
     force: IS_DEV,
     // We would still like to scaffold as many files as possible even if one fails
@@ -149,3 +187,11 @@ function isFile(path: string) {
     return false;
   }
 }
+
+function getExportPath(pluginName: string, orgName: string, pluginType: PLUGIN_TYPES) {
+  if (IS_DEV) {
+    return DEV_EXPORT_DIR;
+  } else {
+    return path.join(process.cwd(), normalizeId(pluginName, orgName, pluginType));
+  }
+}

package/templates/common/.config/README.md

@@ -84,18 +84,23 @@ We are going to use [`webpack-merge`](https://github.com/survivejs/webpack-merge
 
 ```typescript
 // webpack.config.ts
+import type { Configuration } from 'webpack';
 import { merge } from 'webpack-merge';
 import grafanaConfig from './.config/webpack/webpack.config';
 
-const config = (env) =>
-    merge(grafanaConfig(env), {
-        // Add custom config here...
-        output: {
-            asyncChunks: true,
-        },
-    });
+const config = async (env): Promise<Configuration> => {
+  const baseConfig = await grafanaConfig(env);
+
+  return merge(baseConfig, {
+    // Add custom config here...
+    output: {
+      asyncChunks: true,
+    },
+  });
+};
 
 export default config;
+
 ```
 
 #### 3. Update the `package.json` to use the new Webpack config

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

@@ -1,3 +1,2 @@
 export const SOURCE_DIR = 'src';
 export const DIST_DIR = 'dist';
-export const ENTRY_FILE = `${SOURCE_DIR}/module.ts`;

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

@@ -1,7 +1,11 @@
 import fs from 'fs';
 import path from 'path';
+import util from 'util';
+import glob from 'glob';
 import { SOURCE_DIR } from './constants';
 
+const globAsync = util.promisify(glob);
+
 export function getPackageJson() {
   return require(path.resolve(process.cwd(), 'package.json'));
 }
@@ -15,3 +19,23 @@ export function getPluginId() {
 export function hasReadme() {
   return fs.existsSync(path.resolve(process.cwd(), SOURCE_DIR, 'README.md'));
 }
+
+export async function getEntries(): Promise<Record<string, string>> {
+  const parent = '..';
+  const pluginsJson = await globAsync('**/src/**/plugin.json');
+  
+  const plugins = await Promise.all(pluginsJson.map(pluginJson => {
+    const folder = path.dirname(pluginJson);
+    return globAsync(`${folder}/module.{ts,tsx,js}`);
+  }));
+
+  return plugins.reduce((result, modules) => {
+    return modules.reduce((result, module) => {
+      const pluginPath = path.resolve(path.dirname(module), parent);
+      const pluginName = path.basename(pluginPath);
+  
+      result[`${pluginName}/module`] = path.join(parent, module);
+      return result;
+    }, result);
+  }, {});
+}

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

@@ -12,10 +12,10 @@ import path from 'path';
 import ReplaceInFileWebpackPlugin from 'replace-in-file-webpack-plugin';
 import { Configuration } from 'webpack';
 
-import { getPackageJson, getPluginId, hasReadme } from './utils';
-import { SOURCE_DIR, DIST_DIR, ENTRY_FILE } from './constants';
+import { getPackageJson, getPluginId, hasReadme, getEntries } from './utils';
+import { SOURCE_DIR, DIST_DIR } from './constants';
 
-const config = (env): Configuration => ({
+const config = async (env): Promise<Configuration> => ({
   cache: {
     type: 'filesystem',
     buildDependencies: {
@@ -27,9 +27,7 @@ const config = (env): Configuration => ({
 
   devtool: env.production ? 'source-map' : 'eval-source-map',
 
-  entry: {
-    module: path.resolve(process.cwd(), ENTRY_FILE),
-  },
+  entry: await getEntries(),
 
   externals: [
     'lodash',

package/templates/common/package.json

@@ -27,6 +27,7 @@
     "@swc/jest": "^0.2.20",
     "@testing-library/jest-dom": "^5.16.2",
     "@testing-library/react": "^12.1.3",
+    "@types/glob": "^8.0.0",
     "@types/jest": "^27.4.1",{{#if_eq pluginType "app"}}
     "@types/react-router-dom": "^5.3.3",{{/if_eq}}
     "@types/node": "^17.0.19",
@@ -40,6 +41,7 @@
     "eslint-plugin-react": "^7.26.1",
     "eslint-plugin-react-hooks": "^4.2.0",
     "eslint-webpack-plugin": "^3.1.1",
+    "glob": "^8.0.3",
     "jest": "27.5.0",
     "fork-ts-checker-webpack-plugin": "^7.2.0",
     "prettier": "^2.5.0",