Chore: Bump create plugin (#339)

This PR bumps the create plugin version to 5.22.0 also bumps backend
dependencies and migrates to use yarn 4.

Author: zoltanbedi

.config/.cprc.json

@@ -1,3 +1,3 @@
 {
-  "version": "5.12.4"
+  "version": "5.22.0"
 }

.config/.eslintrc

@@ -24,8 +24,8 @@
     {
       "files": ["./tests/**/*"],
       "rules": {
-        "react-hooks/rules-of-hooks": "off",
-      },
+        "react-hooks/rules-of-hooks": "off"
+      }
     }
   ]
 }

.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, {
@@ -151,9 +151,10 @@ version: '3.7'
 
 services:
   grafana:
-    container_name: 'myorg-basic-app'
+    extends:
+      file: .config/docker-compose-base.yaml
+      service: grafana
     build:
-      context: ./.config
       args:
         grafana_version: ${GRAFANA_VERSION:-9.1.2}
         grafana_image: ${GRAFANA_IMAGE:-grafana}

.config/docker-compose-base.yaml

@@ -0,0 +1,31 @@
+services:
+  grafana:
+    user: root
+    container_name: 'grafana-bigquery-datasource'
+
+    build:
+      context: .
+      args:
+        grafana_image: ${GRAFANA_IMAGE:-grafana-enterprise}
+        grafana_version: ${GRAFANA_VERSION:-11.5.3}
+        development: ${DEVELOPMENT:-false}
+        anonymous_auth_enabled: ${ANONYMOUS_AUTH_ENABLED:-true}
+    ports:
+      - 3000:3000/tcp
+      - 2345:2345/tcp # delve
+    security_opt:
+      - 'apparmor:unconfined'
+      - 'seccomp:unconfined'
+    cap_add:
+      - SYS_PTRACE
+    volumes:
+      - ../dist:/var/lib/grafana/plugins/grafana-bigquery-datasource
+      - ../provisioning:/etc/grafana/provisioning
+      - ..:/root/grafana-bigquery-datasource
+
+    environment:
+      NODE_ENV: development
+      GF_LOG_FILTERS: plugin.grafana-bigquery-datasource:debug
+      GF_LOG_LEVEL: debug
+      GF_DATAPROXY_LOGGING: 1
+      GF_PLUGINS_ALLOW_LOADING_UNSIGNED_PLUGINS: grafana-bigquery-datasource

.config/types/bundler-rules.d.ts

@@ -0,0 +1,37 @@
+// Image declarations
+declare module '*.gif' {
+  const src: string;
+  export default src;
+}
+
+declare module '*.jpg' {
+  const src: string;
+  export default src;
+}
+
+declare module '*.jpeg' {
+  const src: string;
+  export default src;
+}
+
+declare module '*.png' {
+  const src: string;
+  export default src;
+}
+
+declare module '*.webp' {
+  const src: string;
+  export default src;
+}
+
+declare module '*.svg' {
+  const src: string;
+  export default src;
+}
+
+// Font declarations
+declare module '*.woff';
+declare module '*.woff2';
+declare module '*.eot';
+declare module '*.ttf';
+declare module '*.otf';

.config/types/webpack-plugins.d.ts

@@ -0,0 +1,83 @@
+declare module 'replace-in-file-webpack-plugin' {
+  import { Compiler, Plugin } from 'webpack';
+
+  interface ReplaceRule {
+    search: string | RegExp;
+    replace: string | ((match: string) => string);
+  }
+
+  interface ReplaceOption {
+    dir?: string;
+    files?: string[];
+    test?: RegExp | RegExp[];
+    rules: ReplaceRule[];
+  }
+
+  class ReplaceInFilePlugin extends Plugin {
+    constructor(options?: ReplaceOption[]);
+    options: ReplaceOption[];
+    apply(compiler: Compiler): void;
+  }
+
+  export = ReplaceInFilePlugin;
+}
+
+declare module 'webpack-livereload-plugin' {
+  import { ServerOptions } from 'https';
+  import { Compiler, Plugin, Stats, Compilation } from 'webpack';
+
+  interface Options extends Pick<ServerOptions, 'cert' | 'key' | 'pfx'> {
+    /**
+     * protocol for livereload `<script>` src attribute value
+     * @default protocol of the page, either `http` or `https`
+     */
+    protocol?: string | undefined;
+    /**
+     * The desired port for the livereload server.
+     * If you define port 0, an available port will be searched for, starting from 35729.
+     * @default 35729
+     */
+    port?: number | undefined;
+    /**
+     * he desired hostname for the appended `<script>` (if present) to point to
+     * @default hostname of the page, like `localhost` or 10.0.2.2
+     */
+    hostname?: string | undefined;
+    /**
+     * livereload `<script>` automatically to `<head>`.
+     * @default false
+     */
+    appendScriptTag?: boolean | undefined;
+    /**
+     * RegExp of files to ignore. Null value means ignore nothing.
+     * It is also possible to define an array and use multiple anymatch patterns
+     */
+    ignore?: RegExp | RegExp[] | null | undefined;
+    /**
+     * amount of milliseconds by which to delay the live reload (in case build takes longer)
+     * @default 0
+     */
+    delay?: number | undefined;
+    /**
+     * create hash for each file source and only notify livereload if hash has changed
+     * @default false
+     */
+    useSourceHash?: boolean | undefined;
+  }
+
+  class LiveReloadPlugin extends Plugin {
+    readonly isRunning: boolean;
+    constructor(options?: Options);
+
+    apply(compiler: Compiler): void;
+
+    start(watching: any, cb: () => void): void;
+    done(stats: Stats): void;
+    failed(): void;
+    autoloadJs(): string;
+    scriptTag(source: string): string;
+    applyCompilation(compilation: Compilation): void;
+  }
+
+  export = LiveReloadPlugin;
+}

.config/webpack/BuildModeWebpackPlugin.ts

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

.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() {
@@ -40,7 +45,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(
@@ -50,14 +55,14 @@ export async function getEntries(): Promise<Record<string, string>> {
     })
   );
 
-  return plugins.reduce((result, modules) => {
-    return modules.reduce((result, module) => {
+  return plugins.reduce<Record<string, string>>((result, modules) => {
+    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);
   }, {});
 }

.config/webpack/webpack.config.ts

@@ -11,14 +11,14 @@ import ForkTsCheckerWebpackPlugin from 'fork-ts-checker-webpack-plugin';
 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 { SubresourceIntegrityPlugin } from 'webpack-subresource-integrity';
+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();
@@ -34,12 +34,17 @@ __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',
       buildDependencies: {
-        config: [__filename],
+        // __filename doesnt work in Node 24
+        config: [path.resolve(process.cwd(), '.config', 'webpack', 'webpack.config.ts')],
       },
     },
 
@@ -68,20 +73,19 @@ const config = async (env): Promise<Configuration> => {
       'redux',
       'rxjs',
       'react-router',
-      'react-router-dom',
       'd3',
       'angular',
-      '@grafana/ui',
-      '@grafana/runtime',
-      '@grafana/data',
+      /^@grafana\/ui/i,
+      /^@grafana\/runtime/i,
+      /^@grafana\/data/i,
 
       // 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));
         }
 
@@ -164,8 +168,8 @@ const config = async (env): Promise<Configuration> => {
               comments: (_, { type, value }) => type === 'comment2' && value.trim().startsWith('[create-plugin]'),
             },
             compress: {
-              drop_console: ['log', 'info']
-            }
+              drop_console: ['log', 'info'],
+            },
           },
         }),
       ],
@@ -190,8 +194,8 @@ const config = async (env): Promise<Configuration> => {
       new BuildModeWebpackPlugin(),
       virtualPublicPath,
       // Insert create plugin version information into the bundle
-      new BannerPlugin({
-        banner: "/* [create-plugin] version: " + cpVersion + " */",
+      new webpack.BannerPlugin({
+        banner: '/* [create-plugin] version: ' + cpVersion + ' */',
         raw: true,
         entryOnly: true,
       }),
@@ -235,22 +239,24 @@ const config = async (env): Promise<Configuration> => {
         },
       ]),
       new SubresourceIntegrityPlugin({
-        hashFuncNames: ["sha256"],
+        hashFuncNames: ['sha256'],
       }),
-      ...(env.development ? [
-        new LiveReloadPlugin(),
-        new ForkTsCheckerWebpackPlugin({
-          async: Boolean(env.development),
-          issue: {
-            include: [{ file: '**/*.{ts,tsx}' }],
-          },
-          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
-        }),
-      ] : []),
+      ...(env.development
+        ? [
+            new LiveReloadPlugin(),
+            new ForkTsCheckerWebpackPlugin({
+              async: Boolean(env.development),
+              issue: {
+                include: [{ file: '**/*.{ts,tsx}' }],
+              },
+              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
+            }),
+          ]
+        : []),
     ],
 
     resolve: {