chore: update configuration to latest version

examples/app-basic/.config/.cprc.json

@@ -1,3 +1,3 @@
 {
-  "version": "4.10.4"
+  "version": "4.15.0"
 }

examples/app-basic/.config/Dockerfile

@@ -4,6 +4,7 @@ ARG grafana_image=grafana-enterprise
 FROM grafana/${grafana_image}:${grafana_version}
 
 ARG development=false
+ARG TARGETARCH
 
 
 ENV DEV "${development}"

examples/app-basic/.config/jest-setup.js

@@ -7,7 +7,7 @@
 
 import '@testing-library/jest-dom';
 import { TextEncoder, TextDecoder } from 'util';
-                                                                                                          
+
 Object.assign(global, { TextDecoder, TextEncoder });
 
 // https://jestjs.io/docs/manual-mocks#mocking-methods-which-are-not-implemented-in-jsdom

examples/app-basic/.config/webpack/publicPath.ts

@@ -0,0 +1,17 @@
+/*
+ * ⚠️⚠️⚠️ THIS FILE WAS SCAFFOLDED BY `@grafana/create-plugin`. DO NOT EDIT THIS FILE DIRECTLY. ⚠️⚠️⚠️
+ *
+ * This file dynamically sets the public path at runtime based on the location of the plugin's AMD module.
+ * It relies on the magic `module` which is defined by the AMD loader.
+ * https://github.com/requirejs/requirejs/wiki/Differences-between-the-simplified-CommonJS-wrapper-and-standard-AMD-define#module
+ *
+ * We fallback to the plugin root so that older versions of Grafana will continue to load the plugin correctly.
+ */
+
+// @ts-nocheck
+import amdMetaModule from 'amd-module';
+
+__webpack_public_path__ =
+  amdMetaModule && amdMetaModule.uri
+    ? amdMetaModule.uri.slice(0, amdMetaModule.uri.lastIndexOf('/') + 1)
+    : 'public/plugins/myorg-basic-app/';

examples/app-basic/.config/webpack/utils.ts

@@ -29,6 +29,11 @@ export function getPluginJson() {
   return require(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' };
+}
+
 export function hasReadme() {
   return fs.existsSync(path.resolve(process.cwd(), SOURCE_DIR, 'README.md'));
 }

examples/app-basic/.config/webpack/webpack.config.ts

@@ -11,13 +11,14 @@ import ForkTsCheckerWebpackPlugin from 'fork-ts-checker-webpack-plugin';
 import LiveReloadPlugin from 'webpack-livereload-plugin';
 import path from 'path';
 import ReplaceInFileWebpackPlugin from 'replace-in-file-webpack-plugin';
-import { Configuration } from 'webpack';
-import { GrafanaPluginMetaExtractor } from '@grafana/plugin-meta-extractor';
+import TerserPlugin from 'terser-webpack-plugin';
+import { type Configuration, BannerPlugin } from 'webpack';
 
-import { getPackageJson, getPluginJson, hasReadme, getEntries, isWSL } from './utils';
+import { getPackageJson, getPluginJson, hasReadme, getEntries, isWSL, getCPConfigVersion } from './utils';
 import { SOURCE_DIR, DIST_DIR } from './constants';
 
 const pluginJson = getPluginJson();
+const cpVersion = getCPConfigVersion();
 
 const config = async (env): Promise<Configuration> => {
   const baseConfig: Configuration = {
@@ -35,6 +36,8 @@ const config = async (env): Promise<Configuration> => {
     entry: await getEntries(),
 
     externals: [
+      // Required for dynamic publicPath resolution
+      { 'amd-module': 'module' },
       'lodash',
       'jquery',
       'moment',
@@ -71,6 +74,11 @@ const config = async (env): Promise<Configuration> => {
       },
     ],
 
+    // Support WebAssembly according to latest spec - makes WebAssembly module async
+    experiments: {
+      asyncWebAssembly: true,
+    },
+
     mode: env.production ? 'production' : 'development',
 
     module: {
@@ -82,7 +90,7 @@ const config = async (env): Promise<Configuration> => {
             loader: 'swc-loader',
             options: {
               jsc: {
-                baseUrl: path.resolve(__dirname, 'src'),
+                baseUrl: path.resolve(process.cwd(), SOURCE_DIR),
                 target: 'es2015',
                 loose: false,
                 parser: {
@@ -95,6 +103,17 @@ const config = async (env): Promise<Configuration> => {
             },
           },
         },
+        {
+          test: /src\/(?:.*\/)?module\.tsx?$/,
+          use: [
+            {
+              loader: 'imports-loader',
+              options: {
+                imports: `side-effects ${path.join(__dirname, 'publicPath.ts')}`,
+              },
+            },
+          ],
+        },
         {
           test: /\.css$/,
           use: ['style-loader', 'css-loader'],
@@ -107,25 +126,32 @@ const config = async (env): Promise<Configuration> => {
           test: /\.(png|jpe?g|gif|svg)$/,
           type: 'asset/resource',
           generator: {
-            // Keep publicPath relative for host.com/grafana/ deployments
-            publicPath: `public/plugins/${pluginJson.id}/img/`,
-            outputPath: 'img/',
             filename: Boolean(env.production) ? '[hash][ext]' : '[file]',
           },
         },
         {
           test: /\.(woff|woff2|eot|ttf|otf)(\?v=\d+\.\d+\.\d+)?$/,
           type: 'asset/resource',
           generator: {
-            // Keep publicPath relative for host.com/grafana/ deployments
-            publicPath: `public/plugins/${pluginJson.id}/fonts/`,
-            outputPath: 'fonts/',
-            filename: Boolean(env.production) ? '[hash][ext]' : '[name][ext]',
+            filename: Boolean(env.production) ? '[hash][ext]' : '[file]',
           },
         },
       ],
     },
 
+    optimization: {
+      minimize: Boolean(env.production),
+      minimizer: [
+        new TerserPlugin({
+          terserOptions: {
+            format: {
+              comments: (_, { type, value }) => type === 'comment2' && value.trim().startsWith('[create-plugin]'),
+            },
+          },
+        }),
+      ],
+    },
+
     output: {
       clean: {
         keep: new RegExp(`(.*?_(amd64|arm(64)?)(.exe)?|go_plugin_build_manifest)`),
@@ -140,7 +166,12 @@ const config = async (env): Promise<Configuration> => {
     },
 
     plugins: [
-      new GrafanaPluginMetaExtractor(),
+      // Insert create plugin version information into the bundle
+      new BannerPlugin({
+        banner: '/* [create-plugin] version: ' + cpVersion + ' */',
+        raw: true,
+        entryOnly: true,
+      }),
       new CopyWebpackPlugin({
         patterns: [
           // If src/README.md exists use it; otherwise the root README
@@ -180,20 +211,22 @@ const config = async (env): Promise<Configuration> => {
           ],
         },
       ]),
-      ...(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: {