@grafana/create-plugin 7.17.0 → 7.19.0

package/templates/common/.config/rspack/rspack.config.ts

@@ -5,24 +5,34 @@
  * https://grafana.com/developers/plugin-tools/how-to-guides/extend-configurations#extend-the-webpack-config
  */
 
-import rspack, { type Configuration } from '@rspack/core';
-import ESLintPlugin from 'eslint-webpack-plugin';
+import {
+  BannerPlugin,
+  Compilation,
+  CopyRspackPlugin,
+  LightningCssMinimizerRspackPlugin,
+  SubresourceIntegrityPlugin,
+  SwcJsMinimizerRspackPlugin,
+  type Configuration,
+} from '@rspack/core';
 import { TsCheckerRspackPlugin } from 'ts-checker-rspack-plugin';
 import path from 'path';
 import ReplaceInFileWebpackPlugin from 'replace-in-file-webpack-plugin';
-import TerserPlugin from 'terser-webpack-plugin';
 import { RspackVirtualModulePlugin } from 'rspack-plugin-virtual-module';
 
-import RspackLiveReloadPlugin from './liveReloadPlugin.ts';
+import RspackLiveReloadPlugin from './LiveReloadRspackPlugin.ts';
 import { BuildModeRspackPlugin } from './BuildModeRspackPlugin.ts';
+import { LicenseRspackPlugin } from './LicenseRspackPlugin.ts';
+import DiagnosticsRspackPlugin from './DiagnosticsRspackPlugin.ts';
+import { PluginCssRspackPlugin } from './PluginCssRspackPlugin.ts';
 import { DIST_DIR, SOURCE_DIR } from '../bundler/constants.ts';
 import { getCPConfigVersion, getEntries, getPackageJson, getPluginJson, isWSL } from '../bundler/utils.ts';
 import { externals } from '../bundler/externals.ts';
 import { copyFilePatterns } from '../bundler/copyFiles.ts';
 
-const { SubresourceIntegrityPlugin } = rspack.experiments;
 const pluginJson = getPluginJson();
+const pluginId = pluginJson.id;
 const cpVersion = getCPConfigVersion();
+const pluginVersion = getPackageJson().version;
 const virtualPublicPath = new RspackVirtualModulePlugin({
   'grafana-public-path': `
 import amdMetaModule from 'amd-module';
@@ -30,19 +40,29 @@ import amdMetaModule from 'amd-module';
 __webpack_public_path__ =
   amdMetaModule && amdMetaModule.uri
     ? amdMetaModule.uri.slice(0, amdMetaModule.uri.lastIndexOf('/') + 1)
-    : 'public/plugins/${pluginJson.id}/';
+    : 'public/plugins/${pluginId}/';
 `,
 });
 
-const config = async (env): Promise<Configuration> => {
+export type Env = {
+  [key: string]: true | string | Env;
+};
+
+const config = async (env: Env): Promise<Configuration> => {
   const baseConfig: Configuration = {
     context: path.join(process.cwd(), SOURCE_DIR),
 
     devtool: env.production ? 'source-map' : 'eval-source-map',
 
-    entry: await getEntries(),
+    // grafana-public-path sets the public path first. grafana-plugin-css adds ./module.css to the define() dependencies
+    entry: Object.fromEntries(
+      Object.entries(await getEntries()).map(([name, entryPath]) => [
+        name,
+        ['grafana-public-path', 'grafana-plugin-css', entryPath],
+      ])
+    ),
 
-    externals,
+    externals: [...externals, { 'grafana-plugin-css': './module.css' }],
 
     // Support WebAssembly according to latest spec - makes WebAssembly module async
     experiments: {
@@ -52,19 +72,15 @@ const config = async (env): Promise<Configuration> => {
     mode: env.production ? 'production' : 'development',
 
     module: {
+      parser: {
+        // keeps default imports of CSS modules working: `import styles from './x.module.css'`
+        'css/auto': { namedExports: false },
+      },
+      generator: {
+        // class names of CSS modules start with the plugin id
+        'css/auto': { localIdentName: '[uniqueName]-[local]-[hash:6]' },
+      },
       rules: [
-        // This must come first in the rules array otherwise it breaks sourcemaps.
-        {
-          test: /src\/(?:.*\/)?module\.tsx?$/,
-          use: [
-            {
-              loader: 'imports-loader',
-              options: {
-                imports: `side-effects grafana-public-path`,
-              },
-            },
-          ],
-        },
         {
           exclude: /(node_modules)/,
           test: /\.[tj]sx?$/,
@@ -91,11 +107,12 @@ const config = async (env): Promise<Configuration> => {
         },
         {
           test: /\.css$/,
-          use: ['style-loader', 'css-loader'],
+          type: 'css/auto',
         },
         {
           test: /\.s[ac]ss$/,
-          use: ['style-loader', 'css-loader', 'sass-loader'],
+          use: ['sass-loader'],
+          type: 'css/auto',
         },
         {
           test: /\.(png|jpe?g|gif|svg)$/,
@@ -116,22 +133,27 @@ const config = async (env): Promise<Configuration> => {
 
     optimization: {
       minimize: Boolean(env.production),
-      minimizer: [
-        new TerserPlugin({
-          // Emit a single LICENSE.txt file for all comments.
-          extractComments: {
-            banner: false,
-            filename: 'LICENSE.txt',
+      splitChunks: {
+        cacheGroups: {
+          // CSS used by more than one lazy chunk goes into one shared file instead of a copy per chunk
+          sharedCss: {
+            type: /^css/,
+            chunks: 'async',
+            minChunks: 2,
+            minSize: 0,
+            priority: 10,
           },
-          terserOptions: {
-            format: {
-              comments: (_, { type, value }) => type === 'comment2' && value.trim().startsWith('[create-plugin]'),
-            },
-            compress: {
-              drop_console: ['log', 'info'],
-            },
+        },
+      },
+      minimizer: [
+        new SwcJsMinimizerRspackPlugin({
+          extractComments: { banner: false },
+          minimizerOptions: {
+            format: { comments: false },
+            compress: { pure_funcs: ['console.log', 'console.info'] },
           },
         }),
+        new LightningCssMinimizerRspackPlugin(),
       ],
     },
 
@@ -141,36 +163,45 @@ const config = async (env): Promise<Configuration> => {
       },
       filename: '[name].js',
       chunkFilename: env.production ? '[name].js?_cache=[contenthash]' : '[name].js',
+      cssFilename: '[name].css',
+      cssChunkFilename: env.production ? '[name].css?_cache=[contenthash]' : '[name].css',
       library: {
         type: 'amd',
       },
       path: path.resolve(process.cwd(), DIST_DIR),
-      publicPath: `public/plugins/${pluginJson.id}/`,
-      uniqueName: pluginJson.id,
+      publicPath: `public/plugins/${pluginId}/`,
+      uniqueName: pluginId,
       crossOriginLoading: 'anonymous',
     },
 
     plugins: [
       new BuildModeRspackPlugin(),
+      new LicenseRspackPlugin(),
+      new PluginCssRspackPlugin({ pluginId, publicPath: `public/plugins/${pluginId}/` }),
       virtualPublicPath,
       // Insert create plugin version information into the bundle
-      new rspack.BannerPlugin({
-        banner: '/* [create-plugin] version: ' + cpVersion + ' */',
+      new BannerPlugin({
+        banner: [
+          `/* [create-plugin] version: ${cpVersion} */`,
+          `/* [create-plugin] plugin: ${pluginId}@${pluginVersion} */`,
+        ].join('\n'),
         raw: true,
         entryOnly: true,
+        test: /\.js$/,
+        // after minification to prevent banner removal and before source maps and hashes are generated so they include it.
+        stage: Compilation.PROCESS_ASSETS_STAGE_OPTIMIZE_SIZE + 1,
       }),
-      new rspack.CopyRspackPlugin({
+      new CopyRspackPlugin({
         patterns: copyFilePatterns,
       }),
-      // Replace certain template-variables in the README and plugin.json
       new ReplaceInFileWebpackPlugin([
         {
           dir: DIST_DIR,
-          files: ['plugin.json', 'README.md'],
+          test: [/(^|\/)plugin\.json$/, /(^|\/)README\.md$/],
           rules: [
             {
               search: /\%VERSION\%/g,
-              replace: getPackageJson().version,
+              replace: pluginVersion,
             },
             {
               search: /\%TODAY\%/g,
@@ -178,7 +209,7 @@ const config = async (env): Promise<Configuration> => {
             },
             {
               search: /\%PLUGIN_ID\%/g,
-              replace: pluginJson.id,
+              replace: pluginId,
             },
           ],
         },
@@ -196,9 +227,9 @@ const config = async (env): Promise<Configuration> => {
               },
               typescript: { configFile: path.join(process.cwd(), 'tsconfig.json') },
             }),
-            new ESLintPlugin({
-              extensions: ['.ts', '.tsx'],
-              lintDirtyModulesOnly: Boolean(env.development), // don't lint on start, only lint changed files
+            new DiagnosticsRspackPlugin({
+              lintOnStart: false, // don't lint on start, only lint changed files
+              checks: [{ use: 'eslint', extensions: ['ts', 'tsx'] }],
             }),
           ]
         : []),

package/templates/common/.cprc.json

@@ -1,6 +1,5 @@
 {
   "features": {
-    "bundleGrafanaUI": {{ bundleGrafanaUI }},
-    "useExperimentalRspack": {{ useExperimentalRspack }}
+    "bundleGrafanaUI": {{ bundleGrafanaUI }}
   }
 }

package/templates/common/_package.json

@@ -20,9 +20,9 @@
     "@grafana/plugin-e2e": "^3.15.2",
     "@grafana/sign-plugin": "^3.3.3",
     "@grafana/tsconfig": "^2.2.0",
-    "@playwright/test": "^1.62.1",{{#if useExperimentalRspack}}
-    "@rspack/core": "^1.6.0",
-    "@rspack/cli": "^1.6.0",{{/if}}
+    "@playwright/test": "^1.62.1",{{#if useRspack}}
+    "@rspack/core": "^2.2.0",
+    "@rspack/cli": "^2.2.0",{{/if}}
     "@stylistic/eslint-plugin": "^5.10.0",
     "@swc/core": "^1.15.0",
     "@swc/helpers": "^0.5.0",
@@ -32,47 +32,47 @@
     "@types/jest": "^30.0.0",
     "@types/node": "^24.0.0",
     "@types/react": "^19.0.0",
-    "@types/react-dom": "^19.0.0",{{#if useExperimentalRspack}}
+    "@types/react-dom": "^19.0.0",{{#if useRspack}}
     "@types/ws": "^8.18.1",{{/if}}
     "@typescript-eslint/eslint-plugin": "^8.38.0",
-    "@typescript-eslint/parser": "^8.38.0",{{#unless useExperimentalRspack}}
-    "copy-webpack-plugin": "^14.0.0",{{/unless}}
-    "css-loader": "^7.1.0",{{#unless useExperimentalRspack}}
-    "diagnostics-webpack-plugin": "^1.0.1",{{/unless}}
+    "@typescript-eslint/parser": "^8.38.0",{{#unless useRspack}}
+    "copy-webpack-plugin": "^14.0.0",
+    "css-loader": "^7.1.0",{{/unless}}
+    "diagnostics-webpack-plugin": "^1.0.1",
     "eslint": "^9.32.0",
     "eslint-config-prettier": "^10.1.0",
     "eslint-plugin-jsdoc": "^52.0.0",
     "eslint-plugin-react": "^7.37.0",
-    "eslint-plugin-react-hooks": "^7.1.0",{{#if useExperimentalRspack}}
-    "eslint-webpack-plugin": "^5.0.0",{{/if}}{{#unless useExperimentalRspack}}
+    "eslint-plugin-react-hooks": "^7.1.0",{{#unless useRspack}}
     "fork-ts-checker-webpack-plugin": "^9.1.0",{{/unless}}
-    "identity-obj-proxy": "^3.0.0",
-    "imports-loader": "^5.0.0",
+    "identity-obj-proxy": "^3.0.0",{{#unless useRspack}}
+    "imports-loader": "^5.0.0",{{/unless}}
     "intersection-observer": "^0.12.2",
     "jest": "^30.5.0",
     "jest-canvas-mock": "^2.5.2",
     "jest-environment-jsdom": "^30.5.0",
     "prettier": "^3.6.0",
-    "replace-in-file-webpack-plugin": "^1.0.0",{{#if useExperimentalRspack}}
+    "replace-in-file-webpack-plugin": "^1.0.0",{{#if useRspack}}
+    "rspack-merge": "^1.0.1",
     "rspack-plugin-virtual-module": "^1.0.0",{{/if}}
     "sass": "^1.89.0",
     "sass-loader": "^16.0.0",
-    "semver": "^7.7.0",
-    "style-loader": "^4.0.0",{{#unless useExperimentalRspack}}
-    "swc-loader": "^0.2.0",{{/unless}}
-    "terser-webpack-plugin": "^5.3.0",
-    "ts-node": "^10.9.0",{{#if useExperimentalRspack}}
-    "ts-checker-rspack-plugin": "^1.2.0",{{/if}}
+    "semver": "^7.7.0",{{#unless useRspack}}
+    "style-loader": "^4.0.0",
+    "swc-loader": "^0.2.0",
+    "terser-webpack-plugin": "^5.3.0",{{/unless}}
+    "ts-node": "^10.9.0",{{#if useRspack}}
+    "ts-checker-rspack-plugin": "^1.7.0",{{/if}}
     "typescript": "5.9.2",
-    "webpack": "^5.106.0"{{#unless useExperimentalRspack}},
+    "webpack": "^5.106.0"{{#unless useRspack}},
     "webpack-cli": "^6.0.0",
     "webpack-livereload-plugin": "^3.0.2",
     "webpack-subresource-integrity": "^5.1.0",
-    "webpack-virtual-modules": "^0.6.2"{{/unless}}{{#if useExperimentalRspack}},
+    "webpack-virtual-modules": "^0.6.2"{{/unless}}{{#if useRspack}},
     "ws": "^8.13.0"{{/if}}
   },
   "engines": {
-    "node": ">=22"
+    "node": ">=22.23"
   },
   "dependencies": {
     "@emotion/css": "11.10.6",

package/templates/common/.config/rspack/liveReloadPlugin.ts

@@ -1,133 +0,0 @@
-import path from 'path';
-import { Compilation, type Compiler } from '@rspack/core';
-import { WebSocketServer } from 'ws';
-import { createServer } from 'http';
-
-interface RspackLiveReloadPluginOptions {
-  port?: number;
-  delay?: number;
-  appendScriptTag?: boolean;
-  protocol?: string;
-}
-
-class RspackLiveReloadPlugin {
-  options: RspackLiveReloadPluginOptions;
-  httpServer: ReturnType<typeof createServer> | null = null;
-  server: WebSocketServer | null = null;
-  constructor(options = {}) {
-    this.options = Object.assign(
-      {
-        port: 35729,
-        delay: 0,
-        appendScriptTag: true,
-        protocol: 'http',
-      },
-      options
-    );
-  }
-
-  apply(compiler: Compiler) {
-    const isRspack = compiler.rspack !== undefined;
-    if (!isRspack) {
-      throw new Error('This plugin is designed to work with Rspack.');
-    }
-
-    compiler.hooks.afterEmit.tap('RspackLiveReloadPlugin', (compilation) => {
-      this._startServer();
-      this._notifyClient();
-    });
-
-    compiler.hooks.done.tap('RspackLiveReloadPlugin', (stats) => {
-      if (this.options.appendScriptTag) {
-        this._injectLiveReloadScript(stats.compilation);
-      }
-    });
-  }
-
-  _startServer() {
-    if (this.server) {
-      return;
-    }
-
-    const port = this.options.port;
-
-    this.httpServer = createServer((req, res) => {
-      if (req.url === '/livereload.js') {
-        res.writeHead(200, { 'Content-Type': 'application/javascript' });
-        res.end(this._getLiveReloadScript());
-      } else {
-        res.writeHead(404);
-        res.end('Not Found');
-      }
-    });
-
-    this.server = new WebSocketServer({ server: this.httpServer });
-    this.httpServer.listen(port, () => {
-      console.log(`LiveReload server started on http://localhost:${port}`);
-    });
-  }
-
-  _notifyClient() {
-    if (!this.server) {
-      return;
-    }
-
-    this.server.clients.forEach((client) => {
-      if (client.readyState === WebSocket.OPEN) {
-        client.send(JSON.stringify({ action: 'reload' }));
-      }
-    });
-  }
-
-  _injectLiveReloadScript(compilation: Compilation) {
-    compilation.hooks.processAssets.tap(
-      {
-        name: 'RspackLiveReloadPlugin',
-        stage: Compilation.PROCESS_ASSETS_STAGE_ADDITIONAL,
-      },
-      (assets) => {
-        Object.keys(assets).forEach((filename) => {
-          if (path.extname(filename) === '.html') {
-            const assetSource = compilation.getAsset(filename)?.source;
-            if (!assetSource) {
-              return;
-            }
-
-            const updatedSource = assetSource
-              .source()
-              .toString()
-              .replace('</body>', `<script src="http://localhost:${this.options.port}/livereload.js"></script></body>`);
-
-            compilation.updateAsset(filename, {
-              source: () => updatedSource,
-              buffer: () => Buffer.from(updatedSource),
-              size: () => updatedSource.length,
-              map: () => null,
-              sourceAndMap: () => ({ source: updatedSource, map: null }),
-              updateHash: (hash) => {
-                hash.update(updatedSource);
-              },
-            });
-          }
-        });
-      }
-    );
-  }
-
-  _getLiveReloadScript() {
-    return `
-      (function() {
-        if (typeof WebSocket === 'undefined') return;
-        const ws = new WebSocket('${this.options.protocol}://localhost:${this.options.port}');
-        ws.onmessage = function(event) {
-          const data = JSON.parse(event.data);
-          if (data.action === 'reload') {
-            window.location.reload();
-          }
-        };
-      })();
-    `;
-  }
-}
-
-export default RspackLiveReloadPlugin;