feat(create-plugin): update rspack config, bump to 1.2.4 for sri plugin

Author: jackw

packages/create-plugin/templates/common/.config/rspack/BuildModeRspackPlugin.ts

@@ -0,0 +1,34 @@
+import * as webpack from 'webpack';
+
+const PLUGIN_NAME = 'BuildModeRspackPlugin';
+
+export class BuildModeRspackPlugin {
+  apply(compiler: webpack.Compiler) {
+    compiler.hooks.compilation.tap(PLUGIN_NAME, (compilation) => {
+      compilation.hooks.processAssets.tap(
+        {
+          name: PLUGIN_NAME,
+          stage: webpack.Compilation.PROCESS_ASSETS_STAGE_ADDITIONS,
+        },
+        assets => {
+          for (const asset of assets) {
+            if (asset.name.endsWith('plugin.json')) {
+              const { RawSource } = compiler.webpack.sources;
+              const pluginJsonContent = JSON.parse(asset.source());
+              const pluginJsonWithBuildMode = JSON.stringify(
+                {
+                  ...pluginJsonContent,
+                  buildMode: compilation.options.mode,
+                },
+                null,
+                4
+              );
+              const source = new RawSource(pluginJsonWithBuildMode);
+              compilation.updateAsset(asset.name, source);
+            }
+          }
+        }
+      );
+    });
+  }
+}

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

@@ -7,16 +7,17 @@
 
 import rspack, { type Configuration } from '@rspack/core';
 import ESLintPlugin from 'eslint-webpack-plugin';
-import ForkTsCheckerWebpackPlugin from 'fork-ts-checker-webpack-plugin';
+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';
-
+import { BuildModeRspackPlugin } from './BuildModeRspackPlugin';
 import { DIST_DIR, SOURCE_DIR } from './constants';
 import { getCPConfigVersion, getEntries, getPackageJson, getPluginJson, hasReadme, isWSL } from './utils';
 
+const { SubresourceIntegrityPlugin } = rspack.experiments;
 const pluginJson = getPluginJson();
 const cpVersion = getCPConfigVersion();
 
@@ -57,12 +58,15 @@ const config = async (env): Promise<Configuration> => {
       'react-redux',
       'redux',
       'rxjs',
-      'react-router',
+      'react-router',{{#unless useReactRouterV6}}
+      'react-router-dom',{{/unless}}
       'd3',
-      'angular',
-      '@grafana/ui',
+      'angular',{{#unless bundleGrafanaUI}}
+      '@grafana/ui',{{/unless}}
       '@grafana/runtime',
-      '@grafana/data',
+      '@grafana/data',{{#if bundleGrafanaUI}}
+      'react-inlinesvg',
+      'i18next',{{/if}}
 
       // Mark legacy SDK imports as external if their name starts with the "grafana/" prefix
       //@ts-ignore - rspack types seem to be a bit broken here.
@@ -167,16 +171,22 @@ const config = async (env): Promise<Configuration> => {
     },
 
     output: {
+      clean: {
+        keep: new RegExp(`(.*?_(amd64|arm(64)?)(.exe)?|go_plugin_build_manifest)`),
+      },
       filename: '[name].js',
+      chunkFilename: env.production ? '[name].js?_cache=[contenthash]' : '[name].js',
       library: {
         type: 'amd',
       },
       path: path.resolve(process.cwd(), DIST_DIR),
-      publicPath: `./`,
+      publicPath: `public/plugins/${pluginJson.id}/`,
       uniqueName: pluginJson.id,
+      crossOriginLoading: 'anonymous',
     },
 
     plugins: [
+      new BuildModeRspackPlugin(),
       virtualPublicPath,
       // Insert create plugin version information into the bundle
       new rspack.BannerPlugin({
@@ -223,10 +233,13 @@ const config = async (env): Promise<Configuration> => {
           ],
         },
       ]),
+      new SubresourceIntegrityPlugin({
+        hashFuncNames: ["sha256"],
+      }),
       ...(env.development
         ? [
             new RspackLiveReloadPlugin(),
-            new ForkTsCheckerWebpackPlugin({
+            new TsCheckerRspackPlugin({
               async: Boolean(env.development),
               issue: {
                 include: [{ file: '**/*.{ts,tsx}' }],
@@ -255,8 +268,6 @@ const config = async (env): Promise<Configuration> => {
     };
   }
 
-
-
   return baseConfig;
 };
 

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

@@ -24,8 +24,8 @@
     "@grafana/plugin-e2e": "^1.17.1",{{/if}}
     "@grafana/tsconfig": "^2.0.0",{{#if usePlaywright}}
     "@playwright/test": "^1.41.2",{{/if}}{{#if useExperimentalRspack}}
-    "@rspack/core": "^1.0.0",
-    "@rspack/cli": "^1.0.0",{{/if}}
+    "@rspack/core": "^1.2.4",
+    "@rspack/cli": "^1.2.4",{{/if}}
     "@stylistic/eslint-plugin-ts": "^2.9.0",
     "@swc/core": "^1.3.90",
     "@swc/helpers": "^0.5.0",
@@ -46,8 +46,8 @@
     "eslint-plugin-react": "^7.33.0",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-deprecation": "^2.0.0",
-    "eslint-webpack-plugin": "^4.0.1",
-    "fork-ts-checker-webpack-plugin": "^8.0.0",
+    "eslint-webpack-plugin": "^4.0.1"{{#unless useExperimentalRspack}},
+    "fork-ts-checker-webpack-plugin": "^8.0.0",{{/unless}}
     "glob": "^10.2.7",
     "identity-obj-proxy": "3.0.0",
     "imports-loader": "^5.0.0",
@@ -62,7 +62,8 @@
     "style-loader": "3.3.3",{{#unless useExperimentalRspack}}
     "swc-loader": "^0.2.3",{{/unless}}
     "terser-webpack-plugin": "^5.3.10",
-    "ts-node": "^10.9.2",
+    "ts-node": "^10.9.2",{{#if useExperimentalRspack}}
+    "ts-checker-rspack-plugin": "^1.0.0",{{/if}}
     "typescript": "5.5.4",
     "webpack": "^5.94.0"{{#unless useExperimentalRspack}},
     "webpack-cli": "^5.1.4",