Create Plugin: Support Node 24

.github/workflows/ci.yml

@@ -56,6 +56,98 @@ jobs:
           path: ./packed-artifacts
           retention-days: 1
 
+  test-node-versions:
+    runs-on: ubuntu-latest
+    if: "!contains(github.event.head_commit.message, 'ci skip') && !contains(github.event.head_commit.message, 'skip ci')"
+    name: Test node versions
+    needs: [test]
+    strategy:
+      fail-fast: false
+      matrix:
+        node-version:
+          - 20
+          - 22
+          - 24
+    env:
+      WORKING_DIR: 'myorg-nobackend-panel'
+    steps:
+      - name: Setup .npmrc file for NPM registry
+        uses: actions/setup-node@cdca7365b2dadb8aad0a33bc7601856ffabcc48e # v4.3.0
+        with:
+          node-version: ${{ matrix.node-version }}
+          registry-url: 'https://registry.npmjs.org'
+
+      - name: Download packed artifacts
+        uses: actions/download-artifact@95815c38cf2ff2164869cbab79da8d1f422bc89e # v4.2.1
+        with:
+          name: packed-artifacts
+          path: ./packed-artifacts
+
+      - name: Install npm packages globally
+        run: for file in *.tgz; do npm install -g "$file"; done
+        working-directory: ./packed-artifacts
+
+      - name: Generate plugin
+        run: npx create-plugin --plugin-name='no-backend' --org-name='myorg' --plugin-type='panel'
+
+      - name: Install generated plugin dependencies
+        run: npm install --no-audit
+        working-directory: ./${{ env.WORKING_DIR }}
+
+      - name: Lint plugin frontend
+        run: npm run lint
+        working-directory: ./${{ env.WORKING_DIR }}
+
+      - name: Typecheck plugin frontend
+        run: npm run typecheck
+        working-directory: ./${{ env.WORKING_DIR }}
+
+      - name: Build plugin frontend
+        run: npm run build
+        working-directory: ./${{ env.WORKING_DIR }}
+
+      - name: Test plugin frontend
+        run: npm run test:ci
+        working-directory: ./${{ env.WORKING_DIR }}
+
+      - name: Install playwright dependencies
+        run: npm exec playwright install --with-deps chromium
+        working-directory: ./${{ env.WORKING_DIR }}
+
+      - name: Start grafana server for e2e tests (10.4.0)
+        run: |
+          ANONYMOUS_AUTH_ENABLED=false docker compose build --no-cache
+          docker compose up -d
+        env:
+          GRAFANA_VERSION: '10.4.0'
+        working-directory: ./${{ env.WORKING_DIR }}
+
+      - name: Wait for grafana server (10.4.0)
+        uses: grafana/plugin-actions/wait-for-grafana@7954f7aa08f1450c1ca49e20be401e4c3f8865f8
+        with:
+          url: http://localhost:3000/login
+
+      - name: Run e2e tests (10.4.0)
+        id: run-e2e-tests-min-version
+        run: npm run e2e
+        working-directory: ./${{ env.WORKING_DIR }}
+
+      - name: Stop grafana docker (10.4.0)
+        run: docker compose down
+        working-directory: ./${{ env.WORKING_DIR }}
+
+      - name: '@grafana/sign-plugin - use GRAFANA_ACCESS_POLICY_TOKEN to sign generate-panel plugin'
+        env:
+          GRAFANA_ACCESS_POLICY_TOKEN: ${{ secrets.GRAFANA_ACCESS_POLICY_TOKEN }}
+        run: sign-plugin --rootUrls http://www.example.com --signatureType private
+        working-directory: ./${{ env.WORKING_DIR }}
+
+      - name: '@grafana/sign-plugin - use GRAFANA_API_KEY to sign generate-panel plugin'
+        env:
+          GRAFANA_API_KEY: ${{ secrets.GRAFANA_API_KEY }}
+        run: sign-plugin --rootUrls http://www.example.com --signatureType private
+        working-directory: ./${{ env.WORKING_DIR }}
+
   generate-plugins:
     name: Test plugin scaffolding
     if: "!contains(github.event.head_commit.message, 'ci skip') && !contains(github.event.head_commit.message, 'skip ci')"

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

@@ -1,4 +1,4 @@
-import * as webpack from 'webpack';
+import webpack, { type Compiler } from 'webpack';
 
 const PLUGIN_NAME = 'BuildModeWebpack';
 

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

@@ -3,7 +3,7 @@ import process from 'process';
 import os from 'os';
 import path from 'path';
 import { glob } from 'glob';
-import { SOURCE_DIR } from './constants';
+import { SOURCE_DIR } from './constants.ts';
 
 export function isWSL() {
   if (process.platform !== 'linux') {
@@ -21,17 +21,22 @@ export function isWSL() {
   }
 }
 
+function loadJson(path: string) {
+  const rawJson = fs.readFileSync(path, 'utf8');
+  return JSON.parse(rawJson);
+}
+
 export function getPackageJson() {
-  return require(path.resolve(process.cwd(), 'package.json'));
+  return loadJson(path.resolve(process.cwd(), 'package.json'));
 }
 
 export function getPluginJson() {
-  return require(path.resolve(process.cwd(), `${SOURCE_DIR}/plugin.json`));
+  return loadJson(path.resolve(process.cwd(), `${SOURCE_DIR}/plugin.json`));
 }
 
 export function getCPConfigVersion() {
-  const cprcJson = path.resolve(__dirname, '../', '.cprc.json');
-  return fs.existsSync(cprcJson) ? require(cprcJson).version : { version: 'unknown' };
+  const cprcJson = path.resolve(process.cwd(), './.config', '.cprc.json');
+  return fs.existsSync(cprcJson) ? loadJson(cprcJson).version : { version: 'unknown' };
 }
 
 export function hasReadme() {

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

@@ -12,13 +12,13 @@ import path from 'path';
 import ReplaceInFileWebpackPlugin from 'replace-in-file-webpack-plugin';
 import TerserPlugin from 'terser-webpack-plugin';
 import { SubresourceIntegrityPlugin } from "webpack-subresource-integrity";
-import { type Configuration, BannerPlugin } from 'webpack';
+import webpack, { type Configuration } from 'webpack';
 import LiveReloadPlugin from 'webpack-livereload-plugin';
 import VirtualModulesPlugin from 'webpack-virtual-modules';
 
-import { BuildModeWebpackPlugin } from './BuildModeWebpackPlugin';
-import { DIST_DIR, SOURCE_DIR } from './constants';
-import { getCPConfigVersion, getEntries, getPackageJson, getPluginJson, hasReadme, isWSL } from './utils';
+import { BuildModeWebpackPlugin } from './BuildModeWebpackPlugin.ts';
+import { DIST_DIR, SOURCE_DIR } from './constants.ts';
+import { getCPConfigVersion, getEntries, getPackageJson, getPluginJson, hasReadme, isWSL } from './utils.ts';
 
 const pluginJson = getPluginJson();
 const cpVersion = getCPConfigVersion();
@@ -43,7 +43,8 @@ const config = async (env: Env): Promise<Configuration> => {
     cache: {
       type: 'filesystem',
       buildDependencies: {
-        config: [__filename],
+        // __filename doesnt work in Node 24
+        config: [path.resolve(process.cwd(), '.config', 'webpack', 'webpack.config.ts')],
       },
     },
 
@@ -196,7 +197,7 @@ const config = async (env: Env): Promise<Configuration> => {
       new BuildModeWebpackPlugin(),
       virtualPublicPath,
       // Insert create plugin version information into the bundle
-      new BannerPlugin({
+      new webpack.BannerPlugin({
         banner: "/* [create-plugin] version: " + cpVersion + " */",
         raw: true,
         entryOnly: true,