Fix: create-plugin common Webpack config types

packages/create-plugin/templates/common/.config/README.md

@@ -106,9 +106,9 @@ We are going to use [`webpack-merge`](https://github.com/survivejs/webpack-merge
 // webpack.config.ts
 import type { Configuration } from 'webpack';
 import { merge } from 'webpack-merge';
-import grafanaConfig from './.config/webpack/webpack.config';
+import grafanaConfig, { type Env } from './.config/webpack/webpack.config';
 
-const config = async (env): Promise<Configuration> => {
+const config = async (env: Env): Promise<Configuration> => {
   const baseConfig = await grafanaConfig(env);
 
   return merge(baseConfig, {

packages/create-plugin/templates/common/.config/webpack/utils.ts

@@ -40,7 +40,7 @@ export function hasReadme() {
 
 // Support bundling nested plugins by finding all plugin.json files in src directory
 // then checking for a sibling module.[jt]sx? file.
-export async function getEntries(): Promise<Record<string, string>> {
+export async function getEntries() {
   const pluginsJson = await glob('**/src/**/plugin.json', { absolute: true });
 
   const plugins = await Promise.all(
@@ -51,13 +51,13 @@ export async function getEntries(): Promise<Record<string, string>> {
   );
 
   return plugins.reduce((result, modules) => {
-    return modules.reduce((result, module) => {
+    return modules.reduce((innerResult, module) => {
       const pluginPath = path.dirname(module);
       const pluginName = path.relative(process.cwd(), pluginPath).replace(/src\/?/i, '');
       const entryName = pluginName === '' ? 'module' : `${pluginName}/module`;
 
-      result[entryName] = module;
-      return result;
+      innerResult[entryName] = module;
+      return innerResult;
     }, result);
-  }, {});
+  }, {} as Record<string, string>);
 }

packages/create-plugin/templates/common/.config/webpack/webpack.config.ts

@@ -9,6 +9,7 @@ import CopyWebpackPlugin from 'copy-webpack-plugin';
 import ESLintPlugin from 'eslint-webpack-plugin';
 import ForkTsCheckerWebpackPlugin from 'fork-ts-checker-webpack-plugin';
 import path from 'path';
+// @ts-expect-error Plugin is not typed
 import ReplaceInFileWebpackPlugin from 'replace-in-file-webpack-plugin';
 import TerserPlugin from 'terser-webpack-plugin';
 import { SubresourceIntegrityPlugin } from "webpack-subresource-integrity";
@@ -34,7 +35,11 @@ __webpack_public_path__ =
 `,
 });
 
-const config = async (env): Promise<Configuration> => {
+export type Env = {
+  [key: string]: true | string | Env;
+};
+
+const config = async (env: Env): Promise<Configuration> => {
   const baseConfig: Configuration = {
     cache: {
       type: 'filesystem',
@@ -80,10 +85,10 @@ const config = async (env): Promise<Configuration> => {
       // Mark legacy SDK imports as external if their name starts with the "grafana/" prefix
       ({ request }, callback) => {
         const prefix = 'grafana/';
-        const hasPrefix = (request) => request.indexOf(prefix) === 0;
-        const stripPrefix = (request) => request.substr(prefix.length);
+        const hasPrefix = (request: string) => request.indexOf(prefix) === 0;
+        const stripPrefix = (request: string) => request.substr(prefix.length);
 
-        if (hasPrefix(request)) {
+        if (request && hasPrefix(request)) {
           return callback(undefined, stripPrefix(request));
         }
 

packages/create-plugin/templates/common/_package.json

@@ -34,6 +34,7 @@
     "@types/node": "^20.8.7",{{#if isAppType}}{{#unless useReactRouterV6}}
     "@types/react-router-dom": "^{{ reactRouterVersion }}",{{/unless}}{{/if}}
     "@types/testing-library__jest-dom": "5.14.8",
+    "@types/webpack-livereload-plugin": "^2.3.6",
     "@typescript-eslint/eslint-plugin": "^6.18.0",
     "@typescript-eslint/parser": "^6.18.0",
     "copy-webpack-plugin": "^11.0.0",