Build: Upgrade Webpack 5 (#36444)

* build(webpack): bump to v5 and successful yarn start compilation * build(webpack): update postcss dependencies * build(webpack): silence warnings about hash renamed to fullhash * build(webpack): enable persistent cache to store generated webpack modules / chunks * build(webpack): prefer eslintWebpackPlugin over tschecker so eslint doesn't block typechecking * chore(yarn): run yarn-deduplicate to clean up dependencies * chore(yarn): refresh lock file after clean install * build(webpack): prefer output.clean over CleanWebpackPlugin * build(webpack): prefer esbuild over babel-loader for dev config * build(babel): turn off cache compression to improve build performance * build(webpack): get production builds working * build(webpack): remove phantomJS (removed from grafana in v7) specific loader * build(webpack): put back babel for dev builds no performance gain in using esbuild in webpack * build(webpack): prefer terser and optimise css plugins for prod. slower but smaller bundles * build(webpack): clean up redundant code. inform postcss about node_modules * build(webpack): remove deprecation warnings flag * build(webpack): bump packages, dev performance optimisations, attempt to get hot working * chore(storybook): use webpack 5 for dev and production builds * build(storybook): speed up dev build * chore(yarn): refresh lock file * chore(webpack): bump webpack and related deps to latest * refactor(webpack): put back inline-source-map, move start scripts out of grafana toolkit * feat(webpack): prefer react-refresh over react-hot-loader * build(webpack): update webpack.hot to use react-refresh * chore: remove react-hot-loader from codebase * refactor(queryeditorrow): fix circular dependency causing react-fast-refresh errors * revert(webpack): remove stats.errorDetails from common config * build(webpack): bump to v5 and successful yarn start compilation * build(webpack): update postcss dependencies * build(webpack): silence warnings about hash renamed to fullhash * build(webpack): enable persistent cache to store generated webpack modules / chunks * build(webpack): prefer eslintWebpackPlugin over tschecker so eslint doesn't block typechecking * chore(yarn): run yarn-deduplicate to clean up dependencies * chore(yarn): refresh lock file after clean install * build(webpack): prefer output.clean over CleanWebpackPlugin * build(webpack): prefer esbuild over babel-loader for dev config * build(babel): turn off cache compression to improve build performance * build(webpack): get production builds working * build(webpack): remove phantomJS (removed from grafana in v7) specific loader * build(webpack): put back babel for dev builds no performance gain in using esbuild in webpack * build(webpack): prefer terser and optimise css plugins for prod. slower but smaller bundles * build(webpack): clean up redundant code. inform postcss about node_modules * build(webpack): remove deprecation warnings flag * build(webpack): bump packages, dev performance optimisations, attempt to get hot working * chore(storybook): use webpack 5 for dev and production builds * build(storybook): speed up dev build * chore(yarn): refresh lock file * chore(webpack): bump webpack and related deps to latest * refactor(webpack): put back inline-source-map, move start scripts out of grafana toolkit * feat(webpack): prefer react-refresh over react-hot-loader * build(webpack): update webpack.hot to use react-refresh * chore: remove react-hot-loader from codebase * refactor(queryeditorrow): fix circular dependency causing react-fast-refresh errors * revert(webpack): remove stats.errorDetails from common config * revert(webpack): remove include from babel-loader so symlinks (enterprise) work as before * refactor(webpack): fix deprecation warnings in prod builds * fix(storybook): fix failing builds due to replacing css-optimise webpack plugin * fix(storybook): use raw-loader for svg icons * build(webpack): fix dev script colors error * chore(webpack): bump css-loader and react-refresh-webpack-plugin to latest versions Co-authored-by: Torkel Ödegaard <torkel@grafana.com>
2021-08-31 12:55:05 +02:00
parent b40d48258d
commit 8d3b31ff23
47 changed files with 1947 additions and 1147 deletions
@@ -5,6 +5,7 @@ Generally we follow the Airbnb [React Style Guide](https://github.com/airbnb/jav
 ## Table of Contents

 - [Frontend Style Guide](#frontend-style-guide)
+
  - [Table of Contents](#table-of-contents)
  - [Basic rules](#basic-rules)
    - [Naming conventions](#naming-conventions)
@@ -28,12 +29,12 @@ Generally we follow the Airbnb [React Style Guide](https://github.com/airbnb/jav
    - [Linting](#linting)
  - [React](#react)
    - [Props](#props)
-        - [Name callback props and handlers with an "on" prefix.](#name-callback-props-and-handlers-with-an-on-prefix)
-        - [React Component definitions](#react-component-definitions)
-        - [React Component constructor](#react-component-constructor)
-        - [React Component defaultProps](#react-component-defaultprops)
+      - [Name callback props and handlers with an "on" prefix.](#name-callback-props-and-handlers-with-an-on-prefix)
+      - [React Component definitions](#react-component-definitions)
+      - [React Component constructor](#react-component-constructor)
+      - [React Component defaultProps](#react-component-defaultprops)
  - [State management](#state-management)
-  
+
  - [Proposal for removing or replacing Angular dependencies](https://github.com/grafana/grafana/pull/23048)

 ## Basic rules
@@ -194,12 +195,12 @@ _SASS styles are deprecated. Please migrate to Emotion whenever you need to modi

 ### Typing

-In general, you should let Typescript infer the types so that there's no need to explicitly define type for each variable. 
+In general, you should let Typescript infer the types so that there's no need to explicitly define type for each variable.

 There are some exceptions to this:

 ```typescript
-// Typescript needs to know type of arrays or objects otherwise it would infer it as array of any 
+// Typescript needs to know type of arrays or objects otherwise it would infer it as array of any

 // bad
 const stringArray = [];
@@ -208,7 +209,7 @@ const stringArray = [];
 const stringArray: string[] = [];
 ```

-Specify function return types explicitly in new code. This improves readability by being able to tell what a function returns just by looking at the signature. It also prevents errors when a function's return type is broader than expected by the author. 
+Specify function return types explicitly in new code. This improves readability by being able to tell what a function returns just by looking at the signature. It also prevents errors when a function's return type is broader than expected by the author.

 > **Note:** We don't have linting for this enabled because of lots of old code that needs to be fixed first.

@@ -216,18 +217,18 @@ Specify function return types explicitly in new code. This improves readability
 // bad
 function transform(value?: string) {
  if (!value) {
-    return undefined
+    return undefined;
  }
-  return applyTransform(value)
-};
+  return applyTransform(value);
+}

 // good
 function transform(value?: string): TransformedValue | undefined {
  if (!value) {
-    return undefined
+    return undefined;
  }
-  return applyTransform(value)
-};
+  return applyTransform(value);
+}
 ```

 ### File and directory naming conventions