Toolkit: Bump dependencies (#47826)

* chore(typescript): remove sanitize_url.d.ts in favour of npm package types

* chore(toolkit): bump all webpack related deps inline with grafana core

* refactor(toolkit): prefer webpack types and use from imports for bundling

* feat(toolkit): bundle plugins using webpack 5 and babel

* chore(toolkit): but all eslint deps inline with grafana core

* refactor(toolkit): rewrite linting step to use new eslint node api

* chore(toolkit): bump jest dependencies inline with grafana core

* refactor(toolkit): update jest config for jest 27

* fix(toolkit): resolve toolkit if using yarn berry

* docs(toolkit): update instructions for developing with yarn berry

* chore(toolkit): remove yarnlink code as won't work with yarn berry

* chore(toolkit): bump remaining dependencies

* chore(toolkit): remove unused core.start task

* feat(toolkit): use browserlist when building plugins

* chore(toolkit): add browserslist dependency

* refactor(toolkit): resolve style loaders, update postcss options for webpack5

* chore(toolkit): put back grafana/data and grafana/ui

* docs(toolkit): improve instructions for developing toolkit locally

* chore(toolkit): clean up webpack debug and warnings

* chore(input-datasource): remove pnpwebpack plugin and update browserslist to solve failing build

* chore(renovatebot): remove toolkit package.json from ignorePaths

* revert(renovate): put back toolkit package.json in ignorePaths

* feat(toolkit): introduce babel plugins

* refactor(toolkit): remove runtime automatic from preset-react for earlier versions of react

* refactor(toolkit): add missing fallbacks to webpack config

* fix(toolkit): remove spaces from copy webpack glob so files are copied

* refactor(toolkit): fix up babel typescript support and copy browserlist on build

* chore(yarn): refresh lock file

* revert(toolkit): remove browsers list so plugins compile to ES5

* revert(toolkit): remove copying .browserslistrc

packages/grafana-toolkit/src/cli/index.ts

@@ -1,4 +1,3 @@
-// @ts-ignore
 import chalk from 'chalk';
 import { program } from 'commander';
 
@@ -6,7 +5,6 @@ import { changelogTask } from './tasks/changelog';
 import { cherryPickTask } from './tasks/cherrypick';
 import { closeMilestoneTask } from './tasks/closeMilestone';
 import { componentCreateTask } from './tasks/component.create';
-import { startTask } from './tasks/core.start';
 import { nodeVersionCheckerTask } from './tasks/nodeVersionChecker';
 import { buildPackageTask } from './tasks/package.build';
 import { pluginBuildTask } from './tasks/plugin.build';
@@ -26,19 +24,6 @@ import { execTask } from './utils/execTask';
 export const run = (includeInternalScripts = false) => {
   if (includeInternalScripts) {
     program.option('-d, --depreciate <scripts>', 'Inform about npm script deprecation', (v) => v.split(','));
-    program
-      .command('core:start')
-      .option('-h, --hot', 'Run front-end with HRM enabled')
-      .option('-T, --noTsCheck', 'Run bundler without TS type checking')
-      .option('-t, --watchTheme', 'Watch for theme changes and regenerate variables.scss files')
-      .description('Starts Grafana front-end in development mode with watch enabled')
-      .action(async (cmd) => {
-        await execTask(startTask)({
-          watchThemes: cmd.watchTheme,
-          noTsCheck: cmd.noTsCheck,
-          hot: cmd.hot,
-        });
-      });
 
     program
       .command('package:build')
@@ -165,12 +150,10 @@ export const run = (includeInternalScripts = false) => {
   program
     .command('plugin:dev')
     .option('-w, --watch', 'Run plugin development mode with watch enabled')
-    .option('--yarnlink', 'symlink this project to the local grafana/toolkit')
     .description('Starts plugin dev mode')
     .action(async (cmd) => {
       await execTask(pluginDevTask)({
         watch: !!cmd.watch,
-        yarnlink: !!cmd.yarnlink,
         silent: true,
       });
     });

packages/grafana-toolkit/src/cli/tasks/core.start.ts

@@ -1,44 +0,0 @@
-//@ts-ignore
-import concurrently from 'concurrently';
-
-import { Task, TaskRunner } from './task';
-
-interface StartTaskOptions {
-  watchThemes: boolean;
-  noTsCheck: boolean;
-  hot: boolean;
-}
-
-const startTaskRunner: TaskRunner<StartTaskOptions> = async ({ watchThemes, noTsCheck, hot }) => {
-  const noTsCheckArg = noTsCheck ? 1 : 0;
-  const jobs = [
-    watchThemes && {
-      command: 'nodemon -e ts -w ./packages/grafana-ui/src/themes -x yarn run themes:generate',
-      name: 'SASS variables generator',
-    },
-    hot
-      ? {
-          command: 'webpack serve --progress --color --config scripts/webpack/webpack.hot.js',
-          name: 'Dev server',
-        }
-      : {
-          command: `webpack --progress --color --watch --env noTsCheck=${noTsCheckArg} --config scripts/webpack/webpack.dev.js`,
-          name: 'Webpack',
-        },
-  ];
-
-  try {
-    await concurrently(
-      jobs.filter((job) => !!job),
-      {
-        killOthers: ['failure', 'failure'],
-        raw: true,
-      }
-    );
-  } catch (e) {
-    console.error(e);
-    process.exit(1);
-  }
-};
-
-export const startTask = new Task<StartTaskOptions>('Core startTask', startTaskRunner);

packages/grafana-toolkit/src/cli/tasks/plugin.build.ts

@@ -1,4 +1,4 @@
-import { CLIEngine } from 'eslint';
+import { ESLint } from 'eslint';
 import execa from 'execa';
 import { constants as fsConstants, promises as fs } from 'fs';
 import globby from 'globby';
@@ -76,8 +76,6 @@ export const versions = async () => {
 // @ts-ignore
 const typecheckPlugin = () => useSpinner('Typechecking', () => execa('tsc', ['--noEmit']));
 
-const getTypescriptSources = () => globby(resolvePath(process.cwd(), 'src/**/*.+(ts|tsx)'));
-
 // @ts-ignore
 const getStylesSources = () => globby(resolvePath(process.cwd(), 'src/**/*.+(scss|css)'));
 
@@ -106,24 +104,34 @@ export const lintPlugin = ({ fix }: Fixable = {}) =>
       }
     );
 
-    const cli = new CLIEngine({
-      configFile,
+    const eslint = new ESLint({
+      extensions: ['.ts', '.tsx'],
+      overrideConfigFile: configFile,
       fix,
       useEslintrc: false,
     });
 
-    const report = cli.executeOnFiles(await getTypescriptSources());
+    const results = await eslint.lintFiles(resolvePath(process.cwd(), 'src'));
 
     if (fix) {
-      CLIEngine.outputFixes(report);
+      await ESLint.outputFixes(results);
     }
 
-    const { errorCount, results, warningCount } = report;
-    const formatter = cli.getFormatter();
+    const { errorCount, warningCount } = results.reduce<Record<string, number>>(
+      (acc, value) => {
+        acc.errorCount += value.errorCount;
+        acc.warningCount += value.warningCount;
+        return acc;
+      },
+      { errorCount: 0, warningCount: 0 }
+    );
+
+    const formatter = await eslint.loadFormatter('stylish');
+    const resultText = formatter.format(results);
 
     if (errorCount > 0 || warningCount > 0) {
       console.log('\n');
-      console.log(formatter(results));
+      console.log(resultText);
       console.log('\n');
     }
 

packages/grafana-toolkit/src/cli/tasks/plugin.dev.ts

@@ -1,6 +1,3 @@
-import execa = require('execa');
-import path = require('path');
-
 import { useSpinner } from '../utils/useSpinner';
 
 import { lintPlugin } from './plugin.build';
@@ -10,32 +7,7 @@ import { Task, TaskRunner } from './task';
 const bundlePlugin = (options: PluginBundleOptions) =>
   useSpinner('Bundling plugin in dev mode', () => bundleFn(options));
 
-const yarnlink = () =>
-  useSpinner('Linking local toolkit', async () => {
-    try {
-      // Make sure we are not using package.json defined toolkit
-      await execa('yarn', ['remove', '@grafana/toolkit']);
-    } catch (e: any) {
-      console.log('\n', e.message, '\n');
-    }
-    await execa('yarn', ['link', '@grafana/toolkit']);
-
-    // Add all the same dependencies as toolkit
-    const args: string[] = ['add'];
-    const packages = require(path.resolve(__dirname, '../../../package.json'));
-    for (const [key, value] of Object.entries(packages.dependencies)) {
-      args.push(`${key}@${value}`);
-    }
-    await execa('yarn', args);
-
-    console.log('Added dependencies required by local @grafana/toolkit.  Do not checkin this package.json!');
-  });
-
 const pluginDevRunner: TaskRunner<PluginBundleOptions> = async (options) => {
-  if (options.yarnlink) {
-    return yarnlink();
-  }
-
   if (options.watch) {
     await bundleFn(options);
   } else {

packages/grafana-toolkit/src/cli/tasks/plugin/bundle.ts

@@ -1,17 +1,15 @@
-import clearConsole = require('react-dev-utils/clearConsole');
-import formatWebpackMessages = require('react-dev-utils/formatWebpackMessages');
-import webpack = require('webpack');
+import clearConsole from 'react-dev-utils/clearConsole';
+import formatWebpackMessages from 'react-dev-utils/formatWebpackMessages';
+import webpack from 'webpack';
 
 import { loadWebpackConfig } from '../../../config/webpack.plugin.config';
 
 export interface PluginBundleOptions {
   watch: boolean;
   production?: boolean;
-  yarnlink?: boolean;
   preserveConsole?: boolean;
 }
 
-// export const bundlePlugin = ({ watch, production }: PluginBundleOptions) => useSpinner('Bundle plugin', async () => {
 export const bundlePlugin = async ({ watch, production, preserveConsole }: PluginBundleOptions) => {
   const compiler = webpack(
     await loadWebpackConfig({
@@ -32,9 +30,9 @@ export const bundlePlugin = async ({ watch, production, preserveConsole }: Plugi
         console.log('Compiling...');
       });
 
-      compiler.hooks.done.tap('done', (stats: webpack.Stats) => {
+      compiler.hooks.done.tap('done', (stats) => {
         clearConsole();
-        const json: any = stats.toJson(); // different @types/webpack between react-dev-utils and grafana-toolkit
+        const json = stats.toJson();
         const output = formatWebpackMessages(json);
 
         if (!output.errors.length && !output.warnings.length) {
@@ -57,13 +55,13 @@ export const bundlePlugin = async ({ watch, production, preserveConsole }: Plugi
         }
       });
     } else {
-      compiler.run((err: Error, stats: webpack.Stats) => {
+      compiler.run((err, stats) => {
         if (err) {
           reject(err);
           return;
         }
 
-        if (stats.hasErrors()) {
+        if (stats?.hasErrors()) {
           stats.compilation.errors.forEach((e) => {
             console.log(e.message);
           });
@@ -72,7 +70,7 @@ export const bundlePlugin = async ({ watch, production, preserveConsole }: Plugi
           return;
         }
 
-        console.log('\n', stats.toString({ colors: true }), '\n');
+        console.log('\n', stats?.toString({ colors: true }), '\n');
         resolve();
       });
     }