build: update plugin tools and base version (#56)

.config/.cprc.json

@@ -0,0 +1,3 @@
+{
+  "version": "3.1.3"
+}

.config/.eslintrc

@@ -4,10 +4,22 @@
  * In order to extend the configuration follow the steps in
  * https://grafana.com/developers/plugin-tools/create-a-plugin/extend-a-plugin/extend-configurations#extend-the-eslint-config
  */
- {
+{
   "extends": ["@grafana/eslint-config"],
   "root": true,
   "rules": {
     "react/prop-types": "off"
-  }
+  },
+  "overrides": [
+    {
+      "plugins": ["deprecation"],
+      "files": ["src/**/*.{ts,tsx}"],
+      "rules": {
+        "deprecation/deprecation": "warn"
+      },
+      "parserOptions": {
+        "project": "./tsconfig.json"
+      }
+    }
+  ]
 }

.config/.prettierrc.js

@@ -5,12 +5,12 @@
  */
 
 module.exports = {
-  "endOfLine": "auto",
-  "printWidth": 120,
-  "trailingComma": "es5",
-  "semi": true,
-  "jsxSingleQuote": false,
-  "singleQuote": true,
-  "useTabs": false,
-  "tabWidth": 2
-};
+  endOfLine: 'auto',
+  printWidth: 120,
+  trailingComma: 'es5',
+  semi: true,
+  jsxSingleQuote: false,
+  singleQuote: true,
+  useTabs: false,
+  tabWidth: 2,
+};

.config/README.md

@@ -56,7 +56,7 @@ set up the Jest DOM for the testing library and to apply some polyfills. ([link
 
 #### ESM errors with Jest
 
-A common issue found with the current jest config involves importing an npm package which only offers an ESM build. These packages cause jest to error with `SyntaxError: Cannot use import statement outside a module`. To work around this we provide a list of known packages to pass to the `[transformIgnorePatterns](https://jestjs.io/docs/configuration#transformignorepatterns-arraystring)` jest configuration property. If need be this can be extended in the following way:
+A common issue with the current jest config involves importing an npm package that only offers an ESM build. These packages cause jest to error with `SyntaxError: Cannot use import statement outside a module`. To work around this, we provide a list of known packages to pass to the `[transformIgnorePatterns](https://jestjs.io/docs/configuration#transformignorepatterns-arraystring)` jest configuration property. If need be, this can be extended in the following way:
 
 ```javascript
 process.env.TZ = 'UTC';
@@ -142,7 +142,7 @@ We need to update the `scripts` in the `package.json` to use the extended Webpac
 
 ### Configure grafana image to use when running docker
 
-By default `grafana-enterprise` will be used as the docker image for all docker related commands. If you want to override this behaviour simply alter the `docker-compose.yaml` by adding the following build arg `grafana_image`. 
+By default, `grafana-enterprise` will be used as the docker image for all docker related commands. If you want to override this behavior, simply alter the `docker-compose.yaml` by adding the following build arg `grafana_image`.
 
 **Example:**
 
@@ -159,6 +159,6 @@ services:
         grafana_image: ${GRAFANA_IMAGE:-grafana}
 ```
 
-In this example we are assigning the environment variable `GRAFANA_IMAGE` to the build arg `grafana_image` with a default value of `grafana`. This will give you the possibility to set the value while running the docker-compose commands which might be convinent in some scenarios.
+In this example, we assign the environment variable `GRAFANA_IMAGE` to the build arg `grafana_image` with a default value of `grafana`. This will allow you to set the value while running the docker-compose commands, which might be convenient in some scenarios.
 
 ---

.config/jest-setup.js

@@ -6,6 +6,11 @@
  */
 
 import '@testing-library/jest-dom';
+import { TextEncoder } from 'util';
+
+// Fix missing globals when `jsdom` is used in a test environment.
+// See https://github.com/jsdom/jsdom/issues/2524
+global.TextEncoder = TextEncoder;
 
 // https://jestjs.io/docs/manual-mocks#mocking-methods-which-are-not-implemented-in-jsdom
 Object.defineProperty(global, 'matchMedia', {

.config/tsconfig.json

@@ -4,7 +4,7 @@
  * In order to extend the configuration follow the steps in
  * https://grafana.com/developers/plugin-tools/create-a-plugin/extend-a-plugin/extend-configurations#extend-the-typescript-config
  */
- {
+{
   "compilerOptions": {
     "alwaysStrict": true,
     "declaration": false,

.config/webpack/utils.ts

@@ -2,11 +2,9 @@ import fs from 'fs';
 import process from 'process';
 import os from 'os';
 import path from 'path';
-import util from 'util';
 import { glob } from 'glob';
 import { SOURCE_DIR } from './constants';
 
-
 export function isWSL() {
   if (process.platform !== 'linux') {
     return false;
@@ -21,7 +19,7 @@ export function isWSL() {
   } catch {
     return false;
   }
-} 
+}
 
 export function getPackageJson() {
   return require(path.resolve(process.cwd(), 'package.json'));
@@ -40,7 +38,8 @@ export function hasReadme() {
 export async function getEntries(): Promise<Record<string, string>> {
   const pluginsJson = await glob('**/src/**/plugin.json', { absolute: true });
 
-  const plugins = await Promise.all(pluginsJson.map((pluginJson) => {
+  const plugins = await Promise.all(
+    pluginsJson.map((pluginJson) => {
       const folder = path.dirname(pluginJson);
       return glob(`${folder}/module.{ts,tsx,js,jsx}`, { absolute: true });
     })

.config/webpack/webpack.config.ts

@@ -82,7 +82,7 @@ const config = async (env): Promise<Configuration> => {
             loader: 'swc-loader',
             options: {
               jsc: {
-                baseUrl: './src',
+                baseUrl: path.resolve(__dirname, 'src'),
                 target: 'es2015',
                 loose: false,
                 parser: {
@@ -97,7 +97,7 @@ const config = async (env): Promise<Configuration> => {
         },
         {
           test: /\.css$/,
-          use: ["style-loader", "css-loader"]
+          use: ['style-loader', 'css-loader'],
         },
         {
           test: /\.s[ac]ss$/,
@@ -110,7 +110,7 @@ const config = async (env): Promise<Configuration> => {
             // Keep publicPath relative for host.com/grafana/ deployments
             publicPath: `public/plugins/${pluginJson.id}/img/`,
             outputPath: 'img/',
-            filename: Boolean(env.production) ? '[hash][ext]' : '[name][ext]',
+            filename: Boolean(env.production) ? '[hash][ext]' : '[file]',
           },
         },
         {
@@ -135,7 +135,8 @@ const config = async (env): Promise<Configuration> => {
         type: 'amd',
       },
       path: path.resolve(process.cwd(), DIST_DIR),
-      publicPath: '/',
+      publicPath: `public/plugins/${pluginJson.id}/`,
+      uniqueName: pluginJson.id,
     },
 
     plugins: [
@@ -178,18 +179,20 @@ const config = async (env): Promise<Configuration> => {
           ],
         },
       ]),
-      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()] : []),
+      ...(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: {
@@ -198,17 +201,16 @@ const config = async (env): Promise<Configuration> => {
       modules: [path.resolve(process.cwd(), 'src'), 'node_modules'],
       unsafeCache: true,
     },
-  }
+  };
 
-  if(isWSL()) {
+  if (isWSL()) {
     baseConfig.watchOptions = {
       poll: 3000,
       ignored: /node_modules/,
-    }}
-
+    };
+  }
 
   return baseConfig;
-
 };
 
 export default config;

.github/workflows/is-compatible.yml

@@ -9,7 +9,7 @@ jobs:
       - name: Setup Node.js environment
         uses: actions/setup-node@v3
         with:
-          node-version: '18'
+          node-version: '20'
           cache: 'npm'
       - name: Install dependencies
         run: npm ci

.github/workflows/pr.yml

@@ -14,17 +14,20 @@ jobs:
       - name: Setup Node.js environment
         uses: actions/setup-node@v3
         with:
-          node-version: '18'
+          node-version: '20'
           cache: 'npm'
 
       - name: Install dependencies
         run: npm ci
 
-      - name: Unit tests
-        run: npm run test:ci
+      - name: Check types
+        run: npm run typecheck
 
       - name: Lint
         run: npm run lint
 
+      - name: Unit tests
+        run: npm run test:ci
+
       - name: Build
         run: npm run build

.github/workflows/push.yml

@@ -17,7 +17,7 @@ jobs:
       - name: Setup Node.js environment
         uses: actions/setup-node@v3
         with:
-          node-version: '18'
+          node-version: '20'
           cache: 'npm'
 
       - name: Install dependencies

.nvmrc

@@ -1 +1 @@
-18
+20

docker-compose.yaml

@@ -6,7 +6,7 @@ services:
     build:
       context: ./.config
       args:
-        grafana_version: ${GRAFANA_VERSION:-9.5.9}
+        grafana_version: ${GRAFANA_VERSION:-10.2.3}
         grafana_image: ${GRAFANA_IMAGE:-grafana}
     environment:
       - GF_USERS_DEFAULT_THEME=light

jest-setup.js

@@ -1,6 +1,10 @@
 // Jest setup provided by Grafana scaffolding
 import './.config/jest-setup';
 import { DataSourceBase } from './src/core/DataSourceBase';
+import { TextEncoder, TextDecoder } from 'util';
+
+global.TextEncoder = TextEncoder;
+global.TextDecoder = TextDecoder;
 
 // Called by @grafana/ui AutoSizeInput
 HTMLCanvasElement.prototype.getContext = () => ({