@grafana/create-plugin 3.2.0 → 3.3.0-canary.710.2bb43c7.0

package/dist/commands/generate.command.js

@@ -57,6 +57,8 @@ function getTemplateData(answers) {
         isNPM: packageManagerName === 'npm',
         version: currentVersion,
         bundleGrafanaUI: features.bundleGrafanaUI,
+        useReactRouterV6: features.useReactRouterV6 && pluginType === PLUGIN_TYPES.app,
+        reactRouterVersion: features.useReactRouterV6 && pluginType === PLUGIN_TYPES.app ? '6.22.0' : '5.2.0',
     };
     return templateData;
 }

package/dist/commands/update.command.js

@@ -5,6 +5,7 @@ import { confirmPrompt, selectPrompt, printMessage, printSuccessMessage, printRe
 import { updatePackageJson, hasNpmDependenciesToUpdate, getPackageJsonUpdatesAsText, updateNpmScripts, writePackageManagerInPackageJson, } from '../utils/utils.npm.js';
 import { getPackageManagerWithFallback } from '../utils/utils.packageManager.js';
 import { isGitDirectory, isGitDirectoryClean } from '../utils/utils.git.js';
+import { isPluginDirectory } from '../utils/utils.plugin.js';
 export const update = async (argv) => {
     try {
         if (!(await isGitDirectory()) && !argv.force) {
@@ -25,6 +26,14 @@ In case you want to proceed as is please use the ${chalk.bold('--force')} flag.)
             });
             process.exit(1);
         }
+        if (!isPluginDirectory() && !argv.force) {
+            printRedBox({
+                title: 'Are you inside a plugin directory?',
+                subtitle: 'We couldn\'t find a "src/plugin.json" file under your current directory.',
+                content: `(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 ${chalk.bold('--force')} flag.)`,
+            });
+            process.exit(1);
+        }
         printMessage(TEXT.updateCommandWarning);
         if (await confirmPrompt(TEXT.updateConfigPrompt)) {
             compileTemplateFiles(UDPATE_CONFIG.filesToOverride, getTemplateData());

package/dist/utils/utils.config.js

@@ -51,6 +51,7 @@ function readRCFileSync(path) {
 }
 function createFeatureFlags(flags) {
     return {
+        useReactRouterV6: true,
         bundleGrafanaUI: false,
         ...flags,
     };

package/dist/utils/utils.plugin.js

@@ -5,3 +5,12 @@ export function getPluginJson(srcDir) {
     const pluginJsonPath = path.join(srcPath, 'plugin.json');
     return readJsonFile(pluginJsonPath);
 }
+export function isPluginDirectory() {
+    try {
+        getPluginJson();
+        return true;
+    }
+    catch (e) {
+        return false;
+    }
+}

package/dist/utils/utils.templates.js

@@ -5,7 +5,7 @@ import mkdirp from 'mkdirp';
 import { filterOutCommonFiles, isFile, isFileStartingWith } from './utils.files.js';
 import { renderHandlebarsTemplate } from './utils.handlebars.js';
 import { getPluginJson } from './utils.plugin.js';
-import { TEMPLATE_PATHS, EXPORT_PATH_PREFIX, EXTRA_TEMPLATE_VARIABLES } from '../constants.js';
+import { TEMPLATE_PATHS, EXPORT_PATH_PREFIX, EXTRA_TEMPLATE_VARIABLES, PLUGIN_TYPES } from '../constants.js';
 import { getPackageManagerWithFallback } from './utils.packageManager.js';
 import { getExportFileName } from '../utils/utils.files.js';
 import { getVersion } from './utils.version.js';
@@ -69,5 +69,7 @@ export function getTemplateData() {
         packageManagerVersion,
         version: currentVersion,
         bundleGrafanaUI: features.bundleGrafanaUI,
+        useReactRouterV6: features.useReactRouterV6 && pluginJson.type === PLUGIN_TYPES.app,
+        reactRouterVersion: features.useReactRouterV6 ? '6.22.0' : '5.2.0',
     };
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@grafana/create-plugin",
-  "version": "3.2.0",
+  "version": "3.3.0-canary.710.2bb43c7.0",
   "repository": {
     "directory": "packages/create-plugin",
     "url": "https://github.com/grafana/plugin-tools"
@@ -86,5 +86,5 @@
   "engines": {
     "node": ">=20"
   },
-  "gitHead": "96e111bfcc9615a97c3085f16646d1bb76f5ddb4"
+  "gitHead": "2bb43c7ea455eec1f96590c21280ca41ff1586a9"
 }

package/src/commands/generate.command.ts

@@ -69,6 +69,8 @@ function getTemplateData(answers: CliArgs) {
     isNPM: packageManagerName === 'npm',
     version: currentVersion,
     bundleGrafanaUI: features.bundleGrafanaUI,
+    useReactRouterV6: features.useReactRouterV6 && pluginType === PLUGIN_TYPES.app,
+    reactRouterVersion: features.useReactRouterV6 && pluginType === PLUGIN_TYPES.app ? '6.22.0' : '5.2.0',
   };
 
   return templateData;

package/src/commands/types.ts

@@ -19,4 +19,6 @@ export type TemplateData = {
   isNPM: boolean;
   version: string;
   bundleGrafanaUI: boolean;
+  useReactRouterV6: boolean;
+  reactRouterVersion: string;
 };

package/src/commands/update.command.ts

@@ -12,6 +12,7 @@ import {
 } from '../utils/utils.npm.js';
 import { getPackageManagerWithFallback } from '../utils/utils.packageManager.js';
 import { isGitDirectory, isGitDirectoryClean } from '../utils/utils.git.js';
+import { isPluginDirectory } from '../utils/utils.plugin.js';
 
 export const update = async (argv: minimist.ParsedArgs) => {
   try {
@@ -37,6 +38,18 @@ In case you want to proceed as is please use the ${chalk.bold('--force')} flag.)
       process.exit(1);
     }
 
+    if (!isPluginDirectory() && !argv.force) {
+      printRedBox({
+        title: 'Are you inside a plugin directory?',
+        subtitle: 'We couldn\'t find a "src/plugin.json" file under your current directory.',
+        content: `(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 ${chalk.bold(
+          '--force'
+        )} flag.)`,
+      });
+
+      process.exit(1);
+    }
+
     // 0. Warning
     // ----------
     printMessage(TEXT.updateCommandWarning);

package/src/utils/utils.config.ts

@@ -4,6 +4,10 @@ import { getVersion } from './utils.version.js';
 
 type FeatureFlags = {
   bundleGrafanaUI: boolean;
+
+  // If set to true, the plugin will be scaffolded with React Router v6. Defaults to true.
+  // (Attention! We always scaffold new projects with React Router v6, so if you are changing this to `false` manually you will need to make changes to the React code as well.)
+  useReactRouterV6: boolean;
 };
 
 type CreatePluginConfig = UserConfig & {
@@ -66,6 +70,7 @@ function readRCFileSync(path: string): CreatePluginConfig | undefined {
 
 function createFeatureFlags(flags?: FeatureFlags): FeatureFlags {
   return {
+    useReactRouterV6: true,
     bundleGrafanaUI: false,
     ...flags,
   };

package/src/utils/utils.plugin.ts

@@ -6,3 +6,13 @@ export function getPluginJson(srcDir?: string) {
   const pluginJsonPath = path.join(srcPath, 'plugin.json');
   return readJsonFile(pluginJsonPath);
 }
+
+// Checks if CWD is a valid root directory of a plugin
+export function isPluginDirectory() {
+  try {
+    getPluginJson();
+    return true;
+  } catch (e) {
+    return false;
+  }
+}

package/src/utils/utils.templates.ts

@@ -5,7 +5,7 @@ import mkdirp from 'mkdirp';
 import { filterOutCommonFiles, isFile, isFileStartingWith } from './utils.files.js';
 import { renderHandlebarsTemplate } from './utils.handlebars.js';
 import { getPluginJson } from './utils.plugin.js';
-import { TEMPLATE_PATHS, EXPORT_PATH_PREFIX, EXTRA_TEMPLATE_VARIABLES } from '../constants.js';
+import { TEMPLATE_PATHS, EXPORT_PATH_PREFIX, EXTRA_TEMPLATE_VARIABLES, PLUGIN_TYPES } from '../constants.js';
 import { getPackageManagerWithFallback } from './utils.packageManager.js';
 import { getExportFileName } from '../utils/utils.files.js';
 import { getVersion } from './utils.version.js';
@@ -97,5 +97,7 @@ export function getTemplateData() {
     packageManagerVersion,
     version: currentVersion,
     bundleGrafanaUI: features.bundleGrafanaUI,
+    useReactRouterV6: features.useReactRouterV6 && pluginJson.type === PLUGIN_TYPES.app,
+    reactRouterVersion: features.useReactRouterV6 ? '6.22.0' : '5.2.0',
   };
 }

package/templates/app/src/components/App/App.tsx

@@ -1,21 +1,20 @@
 import React from 'react';
-import { Route, Switch } from 'react-router-dom';
+import { Route, Routes } from 'react-router-dom';
 import { AppRootProps } from '@grafana/data';
 import { ROUTES } from '../../constants';
 import { PageFour, PageOne, PageThree, PageTwo } from '../../pages';
-import { prefixRoute } from '../../utils/utils.routing';
 
 export function App(props: AppRootProps) {
   return (
-      <Switch>
-        <Route exact path={prefixRoute(ROUTES.Two)} component={PageTwo} />
-        <Route exact path={prefixRoute(`${ROUTES.Three}/:id?`)} component={PageThree} />
+      <Routes>
+        <Route path={ROUTES.Two} element={<PageTwo />} />
+        <Route path={`${ROUTES.Three}/:id?`} element={<PageThree />} />
 
         {/* Full-width page (this page will have no side navigation) */}
-        <Route exact path={prefixRoute(ROUTES.Four)} component={PageFour} />
+        <Route path={ROUTES.Four} element={<PageFour />} />
 
         {/* Default page */}
-        <Route component={PageOne} />
-      </Switch>
+        <Route path="*" element={<PageOne />} />
+      </Routes>
   );
 }

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

@@ -49,8 +49,8 @@ const config = async (env): Promise<Configuration> => {
       'react-redux',
       'redux',
       'rxjs',
-      'react-router',
-      'react-router-dom',
+      'react-router',{{#unless useReactRouterV6}}
+      'react-router-dom',{{/unless}}
       'd3',
       'angular',{{#unless bundleGrafanaUI}}
       '@grafana/ui',{{/unless}}

package/templates/common/.cprc.json

@@ -2,5 +2,7 @@
   "features": {
     {{#if bundleGrafanaUI}}
     "bundleGrafanaUI": true{{/if}}
+    {{#if useReactRouterV6}}
+    "useReactRouterV6": true{{/if}}
   }
 }

package/templates/common/_package.json

@@ -30,8 +30,8 @@
     "@testing-library/react": "14.0.0",
     "@types/jest": "^29.5.0",
     "@types/lodash": "^4.14.194",
-    "@types/node": "^20.8.7",{{#if isAppType}}
-    "@types/react-router-dom": "^5.3.3",{{/if}}
+    "@types/node": "^20.8.7",{{#unless useReactRouterV6}}
+    "@types/react-router-dom": "^{{ reactRouterVersion }}",{{/unless}}
     "@types/testing-library__jest-dom": "5.14.8",
     "copy-webpack-plugin": "^11.0.0",
     "css-loader": "^6.7.3",
@@ -67,7 +67,7 @@
     "@grafana/scenes": "^1.28.0",{{/if_eq}}
     "react": "18.2.0",
     "react-dom": "18.2.0",{{#if isAppType}}
-    "react-router-dom": "5.3.3",
+    "react-router-dom": "^{{ reactRouterVersion }}",
     "rxjs": "7.8.0",{{/if}}
     "tslib": "2.5.3"
   },