Build testdata frontend standalone (#75833)

packages/grafana-plugin-configs/constants.ts

@@ -0,0 +1 @@
+export const DIST_DIR = 'dist';

packages/grafana-plugin-configs/package.json

@@ -0,0 +1,19 @@
+{
+  "name": "@grafana/plugin-configs",
+  "description": "Shared dependencies and files for core plugins",
+  "private": true,
+  "version": "10.2.0-pre",
+  "dependencies": {
+    "tslib": "2.6.0"
+  },
+  "devDependencies": {
+    "@grafana/tsconfig": "^1.2.0-rc1",
+    "copy-webpack-plugin": "11.0.0",
+    "eslint-webpack-plugin": "4.0.1",
+    "fork-ts-checker-webpack-plugin": "8.0.0",
+    "glob": "10.3.3",
+    "replace-in-file-webpack-plugin": "1.0.6",
+    "webpack": "5.88.1"
+  },
+  "packageManager": "yarn@3.6.0"
+}

packages/grafana-plugin-configs/tsconfig.json

@@ -0,0 +1,19 @@
+{
+  "compilerOptions": {
+    "alwaysStrict": true,
+    "declaration": false,
+    "resolveJsonModule": true
+  },
+  "ts-node": {
+    "compilerOptions": {
+      "module": "commonjs",
+      "target": "es5",
+      "esModuleInterop": true
+    },
+    "transpileOnly": true
+  },
+  "extends": "@grafana/tsconfig",
+
+  "exclude": ["**/*.test.ts", "**/*.test.tsx", "**/*.spec.ts", "**/*.spec.tsx"],
+  "include": ["./types", "."]
+}

packages/grafana-plugin-configs/types/custom.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 content: string;
+  export default content;
+}
+
+// Font declarations
+declare module '*.woff';
+declare module '*.woff2';
+declare module '*.eot';
+declare module '*.ttf';
+declare module '*.otf';

packages/grafana-plugin-configs/utils.ts

@@ -0,0 +1,26 @@
+import fs from 'fs';
+import { glob } from 'glob';
+import path from 'path';
+import process from 'process';
+
+export function getPackageJson() {
+  return require(path.resolve(process.cwd(), 'package.json'));
+}
+
+export function getPluginJson() {
+  return require(path.resolve(process.cwd(), 'plugin.json'));
+}
+
+export async function getEntries(): Promise<Record<string, string>> {
+  const pluginModules = await glob(path.resolve(process.cwd(), `module.{ts,tsx}`));
+  if (pluginModules.length > 0) {
+    return {
+      module: pluginModules[0],
+    };
+  }
+  throw new Error('Could not find module.ts or module.tsx file');
+}
+
+export function hasLicense() {
+  return fs.existsSync(path.resolve(process.cwd(), 'LICENSE'));
+}

packages/grafana-plugin-configs/webpack.config.ts

@@ -0,0 +1,208 @@
+import CopyWebpackPlugin from 'copy-webpack-plugin';
+import ESLintPlugin from 'eslint-webpack-plugin';
+import ForkTsCheckerWebpackPlugin from 'fork-ts-checker-webpack-plugin';
+import path from 'path';
+import ReplaceInFileWebpackPlugin from 'replace-in-file-webpack-plugin';
+import { Configuration } from 'webpack';
+
+import { DIST_DIR } from './constants';
+import { getPackageJson, getPluginJson, getEntries, hasLicense } from './utils';
+
+function skipFiles(f: string): boolean {
+  if (f.includes('/dist/')) {
+    // avoid copying files already in dist
+    return false;
+  }
+  if (f.includes('/tsconfig.json')) {
+    // avoid copying tsconfig.json
+    return false;
+  }
+  return true;
+}
+
+const config = async (env: any): Promise<Configuration> => {
+  const pluginJson = getPluginJson();
+  const baseConfig: Configuration = {
+    cache: {
+      type: 'filesystem',
+      buildDependencies: {
+        config: [__filename],
+      },
+    },
+
+    context: process.cwd(),
+
+    devtool: env.production ? 'source-map' : 'eval-source-map',
+
+    entry: await getEntries(),
+
+    externals: [
+      'lodash',
+      'jquery',
+      'moment',
+      'slate',
+      'emotion',
+      '@emotion/react',
+      '@emotion/css',
+      'prismjs',
+      'slate-plain-serializer',
+      '@grafana/slate-react',
+      'react',
+      'react-dom',
+      'react-redux',
+      'redux',
+      'rxjs',
+      'react-router',
+      'react-router-dom',
+      'd3',
+      'angular',
+      '@grafana/ui',
+      '@grafana/runtime',
+      '@grafana/data',
+
+      // Mark legacy SDK imports as external if their name starts with the "grafana/" prefix
+      ({ request }, callback) => {
+        const prefix = 'grafana/';
+        const hasPrefix = (request: any) => request.indexOf(prefix) === 0;
+        const stripPrefix = (request: any) => request.substr(prefix.length);
+
+        if (hasPrefix(request)) {
+          return callback(undefined, stripPrefix(request));
+        }
+
+        callback();
+      },
+    ],
+
+    mode: env.production ? 'production' : 'development',
+
+    module: {
+      rules: [
+        {
+          exclude: /(node_modules)/,
+          test: /\.[tj]sx?$/,
+          use: {
+            loader: 'swc-loader',
+            options: {
+              jsc: {
+                baseUrl: '.',
+                target: 'es2015',
+                loose: false,
+                parser: {
+                  syntax: 'typescript',
+                  tsx: true,
+                  decorators: false,
+                  dynamicImport: true,
+                },
+              },
+            },
+          },
+        },
+        {
+          test: /\.css$/,
+          use: ['style-loader', 'css-loader'],
+        },
+        {
+          test: /\.s[ac]ss$/,
+          use: ['style-loader', 'css-loader', 'sass-loader'],
+        },
+        {
+          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]' : '[name][ext]',
+          },
+        },
+        {
+          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]',
+          },
+        },
+      ],
+    },
+
+    output: {
+      clean: {
+        keep: new RegExp(`(.*?_(amd64|arm(64)?)(.exe)?|go_plugin_build_manifest)`),
+      },
+      filename: '[name].js',
+      library: {
+        type: 'amd',
+      },
+      path: path.resolve(process.cwd(), DIST_DIR),
+      publicPath: `public/plugins/${pluginJson.id}/`,
+    },
+
+    plugins: [
+      new CopyWebpackPlugin({
+        patterns: [
+          // To `compiler.options.output`
+          { from: 'README.md', to: '.', force: true },
+          { from: 'plugin.json', to: '.' },
+          { from: hasLicense() ? 'LICENSE' : '../../../../../LICENSE', to: '.' }, // Point to Grafana License by default
+          { from: 'CHANGELOG.md', to: '.', force: true },
+          { from: '**/*.json', to: '.', filter: skipFiles }, // TODO<Add an error for checking the basic structure of the repo>
+          { from: '**/*.svg', to: '.', noErrorOnMissing: true, filter: skipFiles }, // Optional
+          { from: '**/*.png', to: '.', noErrorOnMissing: true, filter: skipFiles }, // Optional
+          { from: '**/*.html', to: '.', noErrorOnMissing: true, filter: skipFiles }, // Optional
+          { from: 'img/**/*', to: '.', noErrorOnMissing: true, filter: skipFiles }, // Optional
+          { from: 'libs/**/*', to: '.', noErrorOnMissing: true, filter: skipFiles }, // Optional
+          { from: 'static/**/*', to: '.', noErrorOnMissing: true, filter: skipFiles }, // Optional
+        ],
+      }),
+      // Replace certain template-variables in the README and plugin.json
+      new ReplaceInFileWebpackPlugin([
+        {
+          dir: path.resolve(DIST_DIR),
+          files: ['plugin.json', 'README.md'],
+          rules: [
+            {
+              search: /\%VERSION\%/g,
+              replace: env.commit ? `${getPackageJson().version}-${env.commit}` : getPackageJson().version,
+            },
+            {
+              search: /\%TODAY\%/g,
+              replace: new Date().toISOString().substring(0, 10),
+            },
+            {
+              search: /\%PLUGIN_ID\%/g,
+              replace: pluginJson.id,
+            },
+          ],
+        },
+      ]),
+      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: {
+      extensions: ['.js', '.jsx', '.ts', '.tsx'],
+      unsafeCache: true,
+    },
+
+    watchOptions: {
+      ignored: ['**/node_modules', '**/dist', '**/.yarn'],
+    },
+  };
+
+  return baseConfig;
+};
+
+export default config;