Build: Setup webpack configuration for direct-input bundled datasource (#67199)

plugins-bundled/internal/input-datasource/.gitignore

@@ -0,0 +1 @@
+.yarn

plugins-bundled/internal/input-datasource/__mocks__/d3-interpolate.ts

@@ -0,0 +1 @@
+module.exports = {};

plugins-bundled/internal/input-datasource/jest.config.js

@@ -1,8 +1,18 @@
-// This file is needed because it is used by vscode and other tools that
+module.exports = {
-// call `jest` directly.  However, unless you are doing anything special
+  testEnvironment: 'jest-environment-jsdom',
-// do not edit this file
+  preset: 'ts-jest',
-
+  extensionsToTreatAsEsm: ['.ts'],
-const standard = require('@grafana/toolkit/src/config/jest.plugin.config');
+  transform: {
-
+    '^.+\\.(t|j)sx?$': [
-// This process will use the same config that `yarn test` is using
+      'ts-jest',
-module.exports = standard.jestConfig();
+      {
+        useESM: true,
+        isolatedModules: true,
+        allowJs: true,
+      },
+    ],
+  },
+  moduleNameMapper: {
+    '^d3-interpolate$': '<rootDir>/__mocks__/d3-interpolate.ts',
+  },
+};

plugins-bundled/internal/input-datasource/package.json

@@ -8,27 +8,28 @@
     "url": "http://github.com/grafana/grafana.git"
   },
   "scripts": {
-    "build": "grafana-toolkit plugin:build",
+    "build": "yarn test && webpack -c webpack.config.ts --env production",
-    "test": "grafana-toolkit plugin:test",
+    "dev": "webpack -w -c webpack.config.ts --env development",
-    "dev": "grafana-toolkit plugin:dev",
+    "test": "jest -c jest.config.js"
-    "watch": "grafana-toolkit plugin:dev --watch"
   },
   "author": "Grafana Labs",
   "devDependencies": {
-    "@grafana/toolkit": "10.0.0-pre",
     "@types/jest": "26.0.15",
-    "@types/lodash": "4.14.149",
     "@types/react": "18.0.28",
-    "lodash": "4.17.21"
+    "copy-webpack-plugin": "11.0.0",
+    "eslint-webpack-plugin": "4.0.0",
+    "fork-ts-checker-webpack-plugin": "8.0.0",
+    "jest": "29.3.1",
+    "jest-environment-jsdom": "29.3.1",
+    "ts-jest": "29.0.5",
+    "ts-loader": "9.3.1",
+    "ts-node": "10.9.1",
+    "webpack": "5.76.0"
   },
   "dependencies": {
     "@grafana/data": "10.0.0-pre",
     "@grafana/ui": "10.0.0-pre",
-    "jquery": "3.5.1",
     "react": "18.2.0",
-    "react-dom": "18.2.0",
+    "tslib": "2.5.0"
-    "react-hook-form": "7.5.3",
-    "react-router-dom": "5.3.3",
-    "tslib": "2.4.0"
   }
 }

plugins-bundled/internal/input-datasource/tsconfig.json

@@ -4,5 +4,13 @@
   "compilerOptions": {
     "rootDir": "./src",
     "baseUrl": "./src"
+  },
+  "ts-node": {
+    "compilerOptions": {
+      "module": "commonjs",
+      "target": "es5",
+      "esModuleInterop": true
+    },
+    "transpileOnly": true
   }
 }

plugins-bundled/internal/input-datasource/webpack.config.ts

@@ -0,0 +1,146 @@
+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 { Configuration } from 'webpack';
+
+const SOURCE_DIR = path.resolve(__dirname, 'src');
+const DIST_DIR = path.resolve(__dirname, 'dist');
+const PLUGIN_ID = require(path.join(SOURCE_DIR, 'plugin.json')).id;
+
+const config = async (env: Record<string, string>): Promise<Configuration> => ({
+  cache: {
+    type: 'filesystem',
+    buildDependencies: {
+      config: [__filename],
+    },
+  },
+
+  context: path.join(process.cwd(), SOURCE_DIR),
+
+  devtool: env.production ? 'source-map' : 'eval-source-map',
+
+  entry: {
+    module: path.join(SOURCE_DIR, 'module.ts'),
+  },
+
+  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: string) => request.indexOf(prefix) === 0;
+      const stripPrefix = (request: string) => request.substring(prefix.length);
+
+      if (request && hasPrefix(request)) {
+        return callback(undefined, stripPrefix(request));
+      }
+
+      callback();
+    },
+  ],
+
+  mode: env.production ? 'production' : 'development',
+
+  module: {
+    rules: [
+      {
+        exclude: /(node_modules)/,
+        test: /\.[tj]sx?$/,
+        use: {
+          loader: 'ts-loader',
+        },
+      },
+      {
+        test: /\.(png|jpe?g|gif|svg)$/,
+        type: 'asset/resource',
+        generator: {
+          // Keep publicPath relative for host.com/grafana/ deployments
+          publicPath: `public/plugins/${PLUGIN_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/${PLUGIN_ID}/fonts`,
+          outputPath: 'fonts/',
+          filename: Boolean(env.production) ? '[hash][ext]' : '[name][ext]',
+        },
+      },
+    ],
+  },
+
+  output: {
+    clean: {
+      keep: new RegExp(`.*?_(amd64|arm(64)?)(.exe)?`),
+    },
+    filename: '[name].js',
+    library: {
+      type: 'amd',
+    },
+    path: DIST_DIR,
+    publicPath: '/',
+  },
+
+  plugins: [
+    new CopyWebpackPlugin({
+      patterns: [
+        { from: '../README.md', to: '.', force: true, context: SOURCE_DIR },
+        { from: 'plugin.json', to: '.', context: SOURCE_DIR },
+        { from: '**/*.json', to: '.', context: SOURCE_DIR },
+        { from: '**/*.svg', to: '.', noErrorOnMissing: true, context: SOURCE_DIR }, // Optional
+        { from: '**/*.png', to: '.', noErrorOnMissing: true, context: SOURCE_DIR }, // Optional
+        { from: '**/*.html', to: '.', noErrorOnMissing: true, context: SOURCE_DIR }, // Optional
+        { from: 'img/**/*', to: '.', noErrorOnMissing: true, context: SOURCE_DIR }, // Optional
+        { from: 'libs/**/*', to: '.', noErrorOnMissing: true, context: SOURCE_DIR }, // Optional
+        { from: 'static/**/*', to: '.', noErrorOnMissing: true, context: SOURCE_DIR }, // Optional
+      ],
+    }),
+    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'],
+    // handle resolving "rootDir" paths
+    modules: [path.resolve(process.cwd(), 'src'), 'node_modules'],
+    unsafeCache: true,
+  },
+});
+
+export default config;

yarn.lock

@@ -3005,18 +3005,20 @@ __metadata:
   resolution: "@grafana-plugins/input-datasource@workspace:plugins-bundled/internal/input-datasource"
   dependencies:
     "@grafana/data": 10.0.0-pre
-    "@grafana/toolkit": 10.0.0-pre
     "@grafana/ui": 10.0.0-pre
     "@types/jest": 26.0.15
-    "@types/lodash": 4.14.149
     "@types/react": 18.0.28
-    jquery: 3.5.1
+    copy-webpack-plugin: 11.0.0
-    lodash: 4.17.21
+    eslint-webpack-plugin: 4.0.0
+    fork-ts-checker-webpack-plugin: 8.0.0
+    jest: 29.3.1
+    jest-environment-jsdom: 29.3.1
     react: 18.2.0
-    react-dom: 18.2.0
+    ts-jest: 29.0.5
-    react-hook-form: 7.5.3
+    ts-loader: 9.3.1
-    react-router-dom: 5.3.3
+    ts-node: 10.9.1
-    tslib: 2.4.0
+    tslib: 2.5.0
+    webpack: 5.76.0
   languageName: unknown
   linkType: soft
 
@@ -3375,7 +3377,7 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@grafana/toolkit@10.0.0-pre, @grafana/toolkit@workspace:*, @grafana/toolkit@workspace:packages/grafana-toolkit":
+"@grafana/toolkit@workspace:*, @grafana/toolkit@workspace:packages/grafana-toolkit":
   version: 0.0.0-use.local
   resolution: "@grafana/toolkit@workspace:packages/grafana-toolkit"
   dependencies:
@@ -9760,13 +9762,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/lodash@npm:4.14.149":
-  version: 4.14.149
-  resolution: "@types/lodash@npm:4.14.149"
-  checksum: 6caf68cf38d9672851490cdb0a9ef25a90495c05903ca16e62d1d78ebb8b12ee46b20c2a5e29b7667612baedca0087c10f56debc305e486aba08b3dbefb93865
-  languageName: node
-  linkType: hard
-
 "@types/lodash@npm:4.14.181":
   version: 4.14.181
   resolution: "@types/lodash@npm:4.14.181"
@@ -24036,13 +24031,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"jquery@npm:3.5.1":
-  version: 3.5.1
-  resolution: "jquery@npm:3.5.1"
-  checksum: 813047b852511ca1ecfaa7b2568aba1d7270a92e5c74962b308792a401adf041869a3b2a6858b0b7a02f6684947fb93171e40cbb4460831977a937b40b0e15ce
-  languageName: node
-  linkType: hard
-
 "jquery@npm:3.6.3":
   version: 3.6.3
   resolution: "jquery@npm:3.6.3"