mirror of
https://github.com/grafana/grafana.git
synced 2025-02-25 18:55:37 -06:00
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
This commit is contained in:
Jack Westbrook
GitHub
parent
e0adb41e80
commit
f4353bbbc4
@ -9,11 +9,5 @@
|
||||
},
|
||||
"exclude": ["dist", "node_modules"],
|
||||
"extends": "@grafana/tsconfig",
|
||||
"include": [
|
||||
"src/**/*.ts*",
|
||||
"typings/jest",
|
||||
"../../public/app/types/jquery/*.ts",
|
||||
"../../public/app/types/*.d.ts",
|
||||
"../../public/app/types/sanitize-url.d.ts"
|
||||
]
|
||||
"include": ["src/**/*.ts*", "typings/jest", "../../public/app/types/jquery/*.ts", "../../public/app/types/*.d.ts"]
|
||||
}
|
||||
|
||||
@ -328,10 +328,30 @@ You can contribute to grafana-toolkit by helping develop it or by debugging it.
|
||||
|
||||
Typically plugins should be developed using the `@grafana/toolkit` installed from npm. However, when working on the toolkit, you might want to use the local version. Follow the steps below to develop with a local version:
|
||||
|
||||
#### Prerequisites
|
||||
|
||||
For the following to work make sure to have a plugin that uses yarn berry and yarn PnP to test changes against. Feel free to clone the panel plugin [here](https://github.com/jackw/plugin-yarn-berry) if need be.
|
||||
|
||||
1. Clone [Grafana repository](https://github.com/grafana/grafana).
|
||||
2. Navigate to the directory you have cloned Grafana repo to and then run `yarn install --immutable`.
|
||||
3. Navigate to `<GRAFANA_DIR>/packages/grafana-toolkit` and then run `yarn link`.
|
||||
4. Navigate to the directory where your plugin code is and then run `npx grafana-toolkit plugin:dev --yarnlink`. This adds all dependencies required by grafana-toolkit to your project, as well as link your local grafana-toolkit version to be used by the plugin.
|
||||
3. Open `packages/grafana-toolkit/package.json`, delete any mention of `@grafana/data` and `@grafana/ui`. Then add the following:
|
||||
|
||||
```
|
||||
"devDependencies": {
|
||||
"@grafana/data": "workspace:*",
|
||||
"@grafana/ui": "workspace:*"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@grafana/data": "*",
|
||||
"@grafana/ui": "*"
|
||||
}
|
||||
```
|
||||
|
||||
**DO NOT commit this `package.json` code change. It is required to resolve these `@grafana` packages from the plugin for development purposes only.**
|
||||
|
||||
4. Run `yarn` in the grafana repo.
|
||||
5. Navigate to the directory where your plugin code is and then run `yarn link <GRAFANA_DIR>/packages/grafana-toolkit`. This uses yarn berry's `portal` protocol to "link" the grafana-toolkit package and resolve it's dependencies into your plugin code allowing you to develop toolkit and test changes against plugin code.
|
||||
6. Make the required changes to Grafana toolkit.
|
||||
|
||||
### Debug grafana-toolkit
|
||||
|
||||
|
||||
@ -26,82 +26,92 @@
|
||||
},
|
||||
"main": "src/index.ts",
|
||||
"dependencies": {
|
||||
"@babel/core": "7.13.14",
|
||||
"@babel/preset-env": "7.13.12",
|
||||
"@babel/core": "^7.17.8",
|
||||
"@babel/plugin-proposal-class-properties": "7.16.7",
|
||||
"@babel/plugin-proposal-nullish-coalescing-operator": "7.16.7",
|
||||
"@babel/plugin-proposal-object-rest-spread": "7.17.3",
|
||||
"@babel/plugin-proposal-optional-chaining": "7.16.7",
|
||||
"@babel/plugin-syntax-dynamic-import": "7.8.3",
|
||||
"@babel/plugin-transform-react-constant-elements": "7.17.6",
|
||||
"@babel/plugin-transform-runtime": "7.17.0",
|
||||
"@babel/plugin-transform-typescript": "7.16.8",
|
||||
"@babel/preset-env": "^7.16.11",
|
||||
"@babel/preset-react": "^7.16.7",
|
||||
"@babel/preset-typescript": "^7.16.7",
|
||||
"@grafana/data": "9.0.0-pre",
|
||||
"@grafana/eslint-config": "2.5.2",
|
||||
"@grafana/eslint-config": "^3.0.0",
|
||||
"@grafana/tsconfig": "^1.2.0-rc1",
|
||||
"@grafana/ui": "9.0.0-pre",
|
||||
"@jest/core": "26.6.3",
|
||||
"@rushstack/eslint-patch": "1.0.6",
|
||||
"@jest/core": "27.5.1",
|
||||
"@types/command-exists": "^1.2.0",
|
||||
"@types/eslint": "7.28.0",
|
||||
"@types/eslint": "8.4.1",
|
||||
"@types/fs-extra": "^9.0.13",
|
||||
"@types/inquirer": "^8.0.0",
|
||||
"@types/jest": "27.0.2",
|
||||
"@types/lodash": "4.14.149",
|
||||
"@types/node": "^16.0.0",
|
||||
"@types/prettier": "^2.4.0",
|
||||
"@types/react-dev-utils": "^9.0.4",
|
||||
"@types/rimraf": "^3.0.0",
|
||||
"@types/semver": "^7.0.0",
|
||||
"@types/tmp": "^0.1.0",
|
||||
"@types/webpack": "4.41.7",
|
||||
"@typescript-eslint/eslint-plugin": "4.28.0",
|
||||
"@typescript-eslint/parser": "4.28.0",
|
||||
"axios": "0.26.1",
|
||||
"babel-jest": "26.6.3",
|
||||
"babel-loader": "8.2.2",
|
||||
"@types/inquirer": "^8.2.1",
|
||||
"@types/jest": "27.4.1",
|
||||
"@types/lodash": "4.14.181",
|
||||
"@types/node": "16.11.26",
|
||||
"@types/prettier": "2.6.0",
|
||||
"@types/react-dev-utils": "9.0.10",
|
||||
"@types/rimraf": "3.0.2",
|
||||
"@types/semver": "7.3.9",
|
||||
"@types/tmp": "0.2.3",
|
||||
"@typescript-eslint/eslint-plugin": "5.16.0",
|
||||
"@typescript-eslint/parser": "5.16.0",
|
||||
"axios": "^0.26.1",
|
||||
"babel-jest": "27.5.1",
|
||||
"babel-loader": "^8.2.4",
|
||||
"babel-plugin-angularjs-annotate": "0.10.0",
|
||||
"chalk": "^4.0.0",
|
||||
"command-exists": "^1.2.8",
|
||||
"commander": "^8.0.0",
|
||||
"concurrently": "6.3.0",
|
||||
"copy-webpack-plugin": "5.1.2",
|
||||
"css-loader": "3.4.2",
|
||||
"eslint": "7.28.0",
|
||||
"chalk": "^4.1.2",
|
||||
"command-exists": "^1.2.9",
|
||||
"commander": "^9.2.0",
|
||||
"copy-webpack-plugin": "^9.0.1",
|
||||
"css-loader": "^6.7.1",
|
||||
"css-minimizer-webpack-plugin": "^3.4.1",
|
||||
"eslint": "8.11.0",
|
||||
"eslint-config-prettier": "8.5.0",
|
||||
"eslint-plugin-jsdoc": "38.0.6",
|
||||
"eslint-plugin-react": "7.29.4",
|
||||
"eslint-plugin-react-hooks": "4.3.0",
|
||||
"execa": "^5.1.1",
|
||||
"file-loader": "6.2.0",
|
||||
"fork-ts-checker-webpack-plugin": "6.4.0",
|
||||
"file-loader": "^6.2.0",
|
||||
"fork-ts-checker-webpack-plugin": "^7.2.1",
|
||||
"fs-extra": "^10.0.0",
|
||||
"globby": "^10.0.1",
|
||||
"html-loader": "0.5.5",
|
||||
"html-webpack-plugin": "^3.2.0",
|
||||
"inquirer": "^8.0.0",
|
||||
"jest": "26.6.3",
|
||||
"jest-canvas-mock": "2.3.0",
|
||||
"globby": "^11.0.4",
|
||||
"html-loader": "^3.1.0",
|
||||
"html-webpack-plugin": "^5.5.0",
|
||||
"inquirer": "^8.2.2",
|
||||
"jest": "27.5.1",
|
||||
"jest-canvas-mock": "2.3.1",
|
||||
"jest-coverage-badges": "^1.1.2",
|
||||
"jest-environment-jsdom-fifteen": "^1.0.2",
|
||||
"jest-junit": "^13.0.0",
|
||||
"less": "^3.11.1",
|
||||
"less-loader": "^5.0.0",
|
||||
"lodash": "4.17.21",
|
||||
"jest-junit": "13.1.0",
|
||||
"less": "^4.1.2",
|
||||
"less-loader": "^10.2.0",
|
||||
"lodash": "^4.17.21",
|
||||
"md5-file": "^5.0.0",
|
||||
"mini-css-extract-plugin": "^0.7.0",
|
||||
"optimize-css-assets-webpack-plugin": "6.0.1",
|
||||
"ora": "^4.0.3",
|
||||
"pixelmatch": "^5.1.0",
|
||||
"mini-css-extract-plugin": "^2.6.0",
|
||||
"ora": "^5.4.1",
|
||||
"pixelmatch": "^5.2.1",
|
||||
"pngjs": "^6.0.0",
|
||||
"postcss-flexbugs-fixes": "4.2.0",
|
||||
"postcss-loader": "3.0.0",
|
||||
"postcss-preset-env": "6.7.0",
|
||||
"postcss": "^8.4.12",
|
||||
"postcss-flexbugs-fixes": "^5.0.2",
|
||||
"postcss-loader": "^6.2.1",
|
||||
"postcss-preset-env": "7.4.3",
|
||||
"prettier": "2.6.0",
|
||||
"react-dev-utils": "^12.0.0",
|
||||
"replace-in-file": "^4.1.0",
|
||||
"replace-in-file-webpack-plugin": "^1.0.6",
|
||||
"rimraf": "^3.0.0",
|
||||
"sass": "1.27.0",
|
||||
"sass-loader": "8.0.2",
|
||||
"semver": "^7.1.3",
|
||||
"simple-git": "^3.5.0",
|
||||
"style-loader": "1.1.3",
|
||||
"terser-webpack-plugin": "2.3.7",
|
||||
"ts-jest": "26.4.4",
|
||||
"ts-loader": "6.2.1",
|
||||
"ts-node": "9.0.0",
|
||||
"replace-in-file-webpack-plugin": "1.0.6",
|
||||
"rimraf": "3.0.2",
|
||||
"sass": "^1.49.9",
|
||||
"sass-loader": "^12.6.0",
|
||||
"semver": "^7.3.7",
|
||||
"simple-git": "^3.6.0",
|
||||
"style-loader": "^3.3.1",
|
||||
"terser-webpack-plugin": "^5.3.1",
|
||||
"ts-jest": "27.1.3",
|
||||
"ts-loader": "^9.2.8",
|
||||
"ts-node": "^9.1.0",
|
||||
"tslib": "2.4.0",
|
||||
"typescript": "4.6.4",
|
||||
"url-loader": "^2.0.1",
|
||||
"webpack": "4.41.5"
|
||||
"url-loader": "^4.1.1",
|
||||
"webpack": "^5.72.0"
|
||||
}
|
||||
}
|
||||
|
||||
@ -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,
|
||||
});
|
||||
});
|
||||
|
||||
@ -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);
|
||||
@ -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');
|
||||
}
|
||||
|
||||
|
||||
@ -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 {
|
||||
|
||||
@ -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();
|
||||
});
|
||||
}
|
||||
|
||||
@ -1,5 +1,3 @@
|
||||
require('@rushstack/eslint-patch/modern-module-resolution');
|
||||
|
||||
module.exports = {
|
||||
extends: ['@grafana/eslint-config'],
|
||||
rules: {
|
||||
|
||||
@ -76,14 +76,14 @@ export const jestConfig = (baseDir: string = process.cwd()) => {
|
||||
},
|
||||
],
|
||||
],
|
||||
testEnvironment: require.resolve('jest-environment-jsdom-fifteen'),
|
||||
testEnvironment: 'jsdom',
|
||||
testMatch: [
|
||||
'<rootDir>/src/**/__tests__/**/*.{js,jsx,ts,tsx}',
|
||||
'<rootDir>/src/**/*.{spec,test,jest}.{js,jsx,ts,tsx}',
|
||||
'<rootDir>/spec/**/*.{spec,test,jest}.{js,jsx,ts,tsx}',
|
||||
],
|
||||
transform: {
|
||||
'^.+\\.js$': 'babel-jest',
|
||||
'^.+\\.jsx?$': require.resolve('babel-jest'),
|
||||
'^.+\\.tsx?$': require.resolve('ts-jest'),
|
||||
},
|
||||
transformIgnorePatterns: [
|
||||
@ -105,7 +105,8 @@ export const jestConfig = (baseDir: string = process.cwd()) => {
|
||||
export const loadJestPluginConfig = (baseDir: string = process.cwd()) => {
|
||||
const cfgpath = path.resolve(baseDir, 'jest.config.js');
|
||||
if (!fs.existsSync(cfgpath)) {
|
||||
const src = path.resolve(baseDir, 'node_modules/@grafana/toolkit/src/config/jest.plugin.config.local.js');
|
||||
const toolkitDir = path.dirname(require.resolve(`@grafana/toolkit/package.json`));
|
||||
const src = path.join(toolkitDir, 'src/config/jest.plugin.config.local.js');
|
||||
fs.copyFileSync(src, cfgpath);
|
||||
console.log('Using standard jest plugin config', src);
|
||||
}
|
||||
|
||||
@ -3,11 +3,11 @@ import * as webpack from 'webpack';
|
||||
import { getStyleLoaders, getStylesheetEntries, getFileLoaders } from './webpack/loaders';
|
||||
|
||||
const CopyWebpackPlugin = require('copy-webpack-plugin');
|
||||
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
|
||||
const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
|
||||
const fs = require('fs');
|
||||
const HtmlWebpackPlugin = require('html-webpack-plugin');
|
||||
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
|
||||
const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');
|
||||
const path = require('path');
|
||||
const ReplaceInFileWebpackPlugin = require('replace-in-file-webpack-plugin');
|
||||
const TerserPlugin = require('terser-webpack-plugin');
|
||||
@ -94,25 +94,20 @@ const getCommonPlugins = (options: WebpackConfigurationOptions) => {
|
||||
// both options are optional
|
||||
filename: 'styles/[name].css',
|
||||
}),
|
||||
new webpack.optimize.OccurrenceOrderPlugin(true),
|
||||
new CopyWebpackPlugin(
|
||||
[
|
||||
new CopyWebpackPlugin({
|
||||
patterns: [
|
||||
// If src/README.md exists use it; otherwise the root README
|
||||
{ from: hasREADME ? 'README.md' : '../README.md', to: '.', force: true, prority: 1 },
|
||||
{ from: 'plugin.json', to: '.' },
|
||||
{ from: '**/README.md', to: '[path]README.md', priority: 0 },
|
||||
{ from: '../LICENSE', to: '.' },
|
||||
{ from: '../CHANGELOG.md', to: '.', force: true },
|
||||
{ from: '**/*.json', to: '.' },
|
||||
{ from: '**/*.svg', to: '.' },
|
||||
{ from: '**/*.png', to: '.' },
|
||||
{ from: '**/*.html', to: '.' },
|
||||
{ from: 'img/**/*', to: '.' },
|
||||
{ from: 'libs/**/*', to: '.' },
|
||||
{ from: 'static/**/*', to: '.' },
|
||||
{ from: hasREADME ? 'README.md' : '../README.md', to: '.', force: true, priority: 1, noErrorOnMissing: true },
|
||||
{ from: 'plugin.json', to: '.', noErrorOnMissing: true },
|
||||
{ from: '**/README.md', to: '[path]README.md', priority: 0, noErrorOnMissing: true },
|
||||
{ from: '../LICENSE', to: '.', noErrorOnMissing: true },
|
||||
{ from: '../CHANGELOG.md', to: '.', force: true, noErrorOnMissing: true },
|
||||
{ from: '**/*.{json,svg,png,html}', to: '.', noErrorOnMissing: true },
|
||||
{ from: 'img/**/*', to: '.', noErrorOnMissing: true },
|
||||
{ from: 'libs/**/*', to: '.', noErrorOnMissing: true },
|
||||
{ from: 'static/**/*', to: '.', noErrorOnMissing: true },
|
||||
],
|
||||
{ logLevel: options.watch ? 'silent' : 'warn' }
|
||||
),
|
||||
}),
|
||||
|
||||
new ReplaceInFileWebpackPlugin([
|
||||
{
|
||||
@ -146,9 +141,11 @@ const getBaseWebpackConfig: WebpackConfigurationGetter = async (options) => {
|
||||
if (options.production) {
|
||||
const compressOptions = { drop_console: !options.preserveConsole, drop_debugger: true };
|
||||
optimization.minimizer = [
|
||||
new TerserPlugin({ sourceMap: true, terserOptions: { compress: compressOptions } }),
|
||||
new OptimizeCssAssetsPlugin(),
|
||||
new TerserPlugin({ terserOptions: { compress: compressOptions } }),
|
||||
new CssMinimizerPlugin(),
|
||||
];
|
||||
optimization.chunkIds = 'total-size';
|
||||
optimization.moduleIds = 'size';
|
||||
} else if (options.watch) {
|
||||
plugins.push(new HtmlWebpackPlugin());
|
||||
}
|
||||
@ -156,11 +153,6 @@ const getBaseWebpackConfig: WebpackConfigurationGetter = async (options) => {
|
||||
return {
|
||||
mode: options.production ? 'production' : 'development',
|
||||
target: 'web',
|
||||
node: {
|
||||
fs: 'empty',
|
||||
net: 'empty',
|
||||
tls: 'empty',
|
||||
},
|
||||
context: path.join(process.cwd(), 'src'),
|
||||
devtool: 'source-map',
|
||||
entry: await getEntries(),
|
||||
@ -194,14 +186,12 @@ const getBaseWebpackConfig: WebpackConfigurationGetter = async (options) => {
|
||||
'@grafana/ui',
|
||||
'@grafana/runtime',
|
||||
'@grafana/data',
|
||||
// @ts-ignore
|
||||
(context, request, callback) => {
|
||||
({ request }, callback) => {
|
||||
const prefix = 'grafana/';
|
||||
if (request.indexOf(prefix) === 0) {
|
||||
return callback(null, request.slice(prefix.length));
|
||||
if (request?.indexOf(prefix) === 0) {
|
||||
return callback(undefined, request.slice(prefix.length));
|
||||
}
|
||||
|
||||
// @ts-ignore
|
||||
callback();
|
||||
},
|
||||
],
|
||||
@ -209,43 +199,56 @@ const getBaseWebpackConfig: WebpackConfigurationGetter = async (options) => {
|
||||
resolve: {
|
||||
extensions: ['.ts', '.tsx', '.js'],
|
||||
modules: [path.resolve(process.cwd(), 'src'), 'node_modules'],
|
||||
fallback: {
|
||||
buffer: false,
|
||||
fs: false,
|
||||
stream: false,
|
||||
http: false,
|
||||
https: false,
|
||||
string_decoder: false,
|
||||
os: false,
|
||||
timers: false,
|
||||
},
|
||||
},
|
||||
module: {
|
||||
rules: [
|
||||
{
|
||||
test: /\.tsx?$/,
|
||||
loaders: [
|
||||
{
|
||||
loader: require.resolve('babel-loader'),
|
||||
options: {
|
||||
presets: [[require.resolve('@babel/preset-env'), { modules: false }]],
|
||||
plugins: [require.resolve('babel-plugin-angularjs-annotate')],
|
||||
sourceMaps: true,
|
||||
},
|
||||
test: /\.[tj]sx?$/,
|
||||
use: {
|
||||
loader: require.resolve('babel-loader'),
|
||||
options: {
|
||||
cacheDirectory: true,
|
||||
cacheCompression: false,
|
||||
presets: [
|
||||
[require.resolve('@babel/preset-env'), { modules: false }],
|
||||
[
|
||||
require.resolve('@babel/preset-typescript'),
|
||||
{
|
||||
allowNamespaces: true,
|
||||
allowDeclareFields: true,
|
||||
},
|
||||
],
|
||||
[require.resolve('@babel/preset-react')],
|
||||
],
|
||||
plugins: [
|
||||
[
|
||||
require.resolve('@babel/plugin-transform-typescript'),
|
||||
{
|
||||
allowNamespaces: true,
|
||||
allowDeclareFields: true,
|
||||
},
|
||||
],
|
||||
require.resolve('@babel/plugin-proposal-class-properties'),
|
||||
[require.resolve('@babel/plugin-proposal-object-rest-spread'), { loose: true }],
|
||||
require.resolve('@babel/plugin-transform-react-constant-elements'),
|
||||
require.resolve('@babel/plugin-proposal-nullish-coalescing-operator'),
|
||||
require.resolve('@babel/plugin-proposal-optional-chaining'),
|
||||
require.resolve('@babel/plugin-syntax-dynamic-import'),
|
||||
require.resolve('babel-plugin-angularjs-annotate'),
|
||||
],
|
||||
},
|
||||
{
|
||||
loader: require.resolve('ts-loader'),
|
||||
options: {
|
||||
onlyCompileBundledFiles: true,
|
||||
transpileOnly: true,
|
||||
},
|
||||
},
|
||||
],
|
||||
exclude: /(node_modules)/,
|
||||
},
|
||||
{
|
||||
test: /\.jsx?$/,
|
||||
loaders: [
|
||||
{
|
||||
loader: require.resolve('babel-loader'),
|
||||
options: {
|
||||
presets: [['@babel/preset-env', { modules: false }]],
|
||||
plugins: ['angularjs-annotate'],
|
||||
sourceMaps: true,
|
||||
},
|
||||
},
|
||||
],
|
||||
exclude: /(node_modules)/,
|
||||
},
|
||||
exclude: /node_modules/,
|
||||
},
|
||||
...getStyleLoaders(),
|
||||
{
|
||||
|
||||
@ -76,21 +76,23 @@ export const getStyleLoaders = () => {
|
||||
|
||||
const cssLoaders = [
|
||||
{
|
||||
loader: 'css-loader',
|
||||
loader: require.resolve('css-loader'),
|
||||
options: {
|
||||
importLoaders: 1,
|
||||
sourceMap: true,
|
||||
},
|
||||
},
|
||||
{
|
||||
loader: 'postcss-loader',
|
||||
loader: require.resolve('postcss-loader'),
|
||||
options: {
|
||||
plugins: () => [
|
||||
require('postcss-flexbugs-fixes'),
|
||||
require('postcss-preset-env')({
|
||||
autoprefixer: { flexbox: 'no-2009', grid: true },
|
||||
}),
|
||||
],
|
||||
postcssOptions: {
|
||||
plugins: () => [
|
||||
require('postcss-flexbugs-fixes'),
|
||||
require('postcss-preset-env')({
|
||||
autoprefixer: { flexbox: 'no-2009', grid: true },
|
||||
}),
|
||||
],
|
||||
},
|
||||
},
|
||||
},
|
||||
];
|
||||
@ -103,27 +105,27 @@ export const getStyleLoaders = () => {
|
||||
},
|
||||
{
|
||||
test: /(dark|light)\.scss$/,
|
||||
use: [extractionLoader, ...cssLoaders, 'sass-loader'],
|
||||
use: [extractionLoader, ...cssLoaders, require.resolve('sass-loader')],
|
||||
},
|
||||
{
|
||||
test: /\.css$/,
|
||||
use: ['style-loader', ...cssLoaders, 'sass-loader'],
|
||||
use: ['style-loader', ...cssLoaders, require.resolve('sass-loader')],
|
||||
exclude: [`${styleDir}light.css`, `${styleDir}dark.css`],
|
||||
},
|
||||
{
|
||||
test: /\.s[ac]ss$/,
|
||||
use: ['style-loader', ...cssLoaders, 'sass-loader'],
|
||||
use: ['style-loader', ...cssLoaders, require.resolve('sass-loader')],
|
||||
exclude: [`${styleDir}light.scss`, `${styleDir}dark.scss`],
|
||||
},
|
||||
{
|
||||
test: /\.less$/,
|
||||
use: [
|
||||
{
|
||||
loader: 'style-loader',
|
||||
loader: require.resolve('style-loader'),
|
||||
},
|
||||
...cssLoaders,
|
||||
{
|
||||
loader: 'less-loader',
|
||||
loader: require.resolve('less-loader'),
|
||||
options: {
|
||||
javascriptEnabled: true,
|
||||
},
|
||||
|
||||
@ -11,5 +11,5 @@
|
||||
},
|
||||
"exclude": ["dist", "node_modules"],
|
||||
"extends": "@grafana/tsconfig",
|
||||
"include": ["src/**/*.ts", "../../public/app/types/jquery/*.ts", "../../public/app/types/sanitize-url.d.ts"]
|
||||
"include": ["src/**/*.ts", "../../public/app/types/jquery/*.ts"]
|
||||
}
|
||||
|
||||
@ -6,10 +6,5 @@
|
||||
},
|
||||
"exclude": ["../dist", "../node_modules"],
|
||||
"extends": "../tsconfig.json",
|
||||
"include": [
|
||||
"../src/**/*.ts",
|
||||
"../src/**/*.tsx",
|
||||
"../../../public/app/types/sanitize-url.d.ts",
|
||||
"../../../public/app/types/svg.d.ts"
|
||||
]
|
||||
"include": ["../src/**/*.ts", "../src/**/*.tsx", "../../../public/app/types/svg.d.ts"]
|
||||
}
|
||||
|
||||
@ -15,17 +15,14 @@
|
||||
},
|
||||
"author": "Grafana Labs",
|
||||
"devDependencies": {
|
||||
"@grafana/toolkit": "9.0.0-pre",
|
||||
"@types/jest": "26.0.15",
|
||||
"@types/lodash": "4.14.149",
|
||||
"@types/react": "17.0.30",
|
||||
"lodash": "4.17.21",
|
||||
"pnp-webpack-plugin": "^1.7.0",
|
||||
"ts-loader": "8.0.11",
|
||||
"webpack": "5.58.1"
|
||||
"lodash": "4.17.21"
|
||||
},
|
||||
"dependencies": {
|
||||
"@grafana/data": "9.0.0-pre",
|
||||
"@grafana/toolkit": "9.0.0-pre",
|
||||
"@grafana/ui": "9.0.0-pre",
|
||||
"jquery": "3.5.1",
|
||||
"react": "17.0.1",
|
||||
|
||||
@ -1,15 +0,0 @@
|
||||
const { merge } = require('lodash');
|
||||
const PnpWebpackPlugin = require('pnp-webpack-plugin');
|
||||
|
||||
module.exports = {
|
||||
getWebpackConfig: (baseConfig) => {
|
||||
return merge(baseConfig, {
|
||||
resolve: {
|
||||
plugins: [PnpWebpackPlugin],
|
||||
},
|
||||
resolveLoader: {
|
||||
plugins: [PnpWebpackPlugin.moduleLoader(module)],
|
||||
},
|
||||
});
|
||||
},
|
||||
};
|
||||
3
public/app/types/sanitize-url.d.ts
vendored
3
public/app/types/sanitize-url.d.ts
vendored
@ -1,3 +0,0 @@
|
||||
declare module '@braintree/sanitize-url' {
|
||||
function sanitizeUrl(url: string): string;
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user