feat: Upgrade to Webpack 5 (#1996)

This is a start for upgrading to webpack 5 and webpack-dev-server ^4. With these changes, the basic examples are working ( incl. hot module reloading ). But there are more todo's left

* update dev-server config
* make StyleguidistOptionsPlugin.ts work with webpack 5 and fix test
* fix make-webpack-config.spec.ts tests
* upgrade other webpack loader dependencies to latests versions (optional?)
* fix type errors
* fix deprecation warnings

Fixes #1932

BREAKING CHANGE:

Webpack 4 is no longer supported.

Author: ThomasRoest

package-lock.json

@@ -35,11 +35,11 @@
     "assert": "1.5.0",
     "ast-types": "~0.14.2",
     "buble": "0.20.0",
-    "clean-webpack-plugin": "^3.0.0",
+    "clean-webpack-plugin": "^4.0.0",
     "clipboard-copy": "^3.1.0",
     "clsx": "^1.0.4",
     "common-dir": "^3.0.0",
-    "copy-webpack-plugin": "^6.1.0",
+    "copy-webpack-plugin": "^11.0.0",
     "core-js": "^3.6.4",
     "doctrine": "^3.0.0",
     "es6-object-assign": "~1.1.0",
@@ -54,24 +54,23 @@
     "glogg": "^1.0.2",
     "hash-sum": "^2.0.0",
     "javascript-stringify": "^2.0.0",
-    "jss": "^10.0.0",
-    "jss-plugin-camel-case": "^10.0.0",
-    "jss-plugin-compose": "^10.0.0",
-    "jss-plugin-default-unit": "^10.0.0",
-    "jss-plugin-global": "^10.0.0",
-    "jss-plugin-isolate": "^10.0.0",
-    "jss-plugin-nested": "^10.0.0",
+    "jss": "^10.9.0",
+    "jss-plugin-camel-case": "^10.9.0",
+    "jss-plugin-compose": "^10.9.0",
+    "jss-plugin-default-unit": "^10.9.0",
+    "jss-plugin-global": "^10.9.0",
+    "jss-plugin-isolate": "^10.9.0",
+    "jss-plugin-nested": "^10.9.0",
     "kleur": "^3.0.3",
     "listify": "^1.0.0",
-    "loader-utils": "^2.0.0",
     "lodash": "^4.17.15",
     "lowercase-keys": "^2.0.0",
     "markdown-to-jsx": "^6.11.4",
     "mini-html-webpack-plugin": "^3.1.3",
     "mri": "^1.1.4",
     "ora": "^4.0.2",
     "prismjs": "^1.17.1",
-    "prop-types": "^15.7.2",
+    "prop-types": "^15.8.1",
     "q-i": "^2.0.1",
     "qss": "^2.0.3",
     "react-dev-utils": "^12.0.0",
@@ -84,11 +83,11 @@
     "recast": "~0.18.5",
     "remark": "^13.0.0",
     "strip-html-comments": "^1.0.0",
-    "terser-webpack-plugin": "^4.1.0",
+    "terser-webpack-plugin": "^5.3.3",
     "to-ast": "^1.0.0",
     "type-detect": "^4.0.8",
     "unist-util-visit": "^2.0.0",
-    "webpack-dev-server": "^3.11.2",
+    "webpack-dev-server": "^4.9.2",
     "webpack-merge": "^4.2.2"
   },
   "peerDependencies": {
@@ -101,8 +100,8 @@
     "@babel/plugin-proposal-class-properties": "^7.8.3",
     "@babel/preset-env": "^7.9.0",
     "@babel/preset-flow": "^7.9.0",
-    "@babel/preset-react": "^7.9.4",
-    "@babel/preset-typescript": "^7.9.0",
+    "@babel/preset-react": "^7.18.6",
+    "@babel/preset-typescript": "^7.18.6",
     "@testing-library/jest-dom": "^5.11.4",
     "@testing-library/react": "^11.1.0",
     "@types/buble": "^0.19.2",
@@ -114,15 +113,15 @@
     "@types/hash-sum": "^1.0.0",
     "@types/jest": "^26.0.14",
     "@types/keymirror": "^0.1.1",
-    "@types/loader-utils": "^1.1.3",
     "@types/lodash": "^4.14.144",
     "@types/markdown-to-jsx": "^6.9.0",
     "@types/node": "^12.12.3",
     "@types/prismjs": "^1.16.0",
     "@types/react": "^16.9.27",
     "@types/react-dom": "^16.9.5",
-    "@types/terser-webpack-plugin": "^2.2.0",
+    "@types/terser-webpack-plugin": "^2.2.3",
     "@types/type-detect": "^4.0.1",
+    "@types/webpack": "^5.28.0",
     "@types/webpack-dev-server": "^3.11.1",
     "@types/webpack-env": "^1.14.1",
     "@typescript-eslint/eslint-plugin": "^4.4.1",
@@ -132,7 +131,7 @@
     "babel-jest": "^26.6.0",
     "babel-loader": "^8.1.0",
     "cheerio": "^1.0.0-rc.3",
-    "css-loader": "^3.2.0",
+    "css-loader": "^6.7.1",
     "danger": "^10.5.3",
     "deabsdeep": "^1.0.6",
     "deepfreeze": "^2.0.0",
@@ -147,7 +146,7 @@
     "eslint-plugin-import": "^2.22.1",
     "eslint-plugin-jsx-a11y": "^6.3.1",
     "eslint-plugin-react": "^7.21.4",
-    "file-loader": "^4.2.0",
+    "file-loader": "^6.2.0",
     "fs-extra": "^9.0.0",
     "husky": "^4.3.0",
     "jest": "^26.6.0",
@@ -161,12 +160,11 @@
     "react-dom": "^16.13.1",
     "react-test-renderer": "^16.13.1",
     "strip-shebang": "^1.0.2",
-    "style-loader": "^1.0.0",
-    "tapable": "^1.1.3",
-    "typescript": "^3.8.3",
-    "url-loader": "^2.2.0",
-    "webpack": "^4.46.0",
-    "webpack-cli": "^3.3.12"
+    "style-loader": "^3.3.1",
+    "typescript": "^4.7.4",
+    "url-loader": "^4.1.1",
+    "webpack": "^5.72.0",
+    "webpack-cli": "^4.9.2"
   },
   "scripts": {
     "pretest": "npm run lint && npm run typecheck",

package.json

@@ -1,5 +1,4 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import Styled, { JssInjectedProps } from 'rsg-components/Styled';
 import Argument, { ArgumentProps } from 'rsg-components/Argument';
 import Heading from 'rsg-components/Heading';
@@ -36,23 +35,11 @@ export const ArgumentsRenderer: React.FunctionComponent<ArgumentsProps> = ({
 					<Heading level={5}>Arguments</Heading>
 				</div>
 			)}
-			{args.map(arg => (
+			{args.map((arg) => (
 				<Argument key={arg.name} {...arg} />
 			))}
 		</div>
 	);
 };
 
-ArgumentsRenderer.propTypes = {
-	classes: PropTypes.objectOf(PropTypes.string.isRequired).isRequired,
-	args: PropTypes.arrayOf(
-		PropTypes.shape({
-			name: PropTypes.string.isRequired,
-			type: PropTypes.object,
-			description: PropTypes.string,
-		}).isRequired
-	).isRequired,
-	heading: PropTypes.bool,
-};
-
 export default Styled<ArgumentsProps>(styles)(ArgumentsRenderer);

src/client/rsg-components/Arguments/ArgumentsRenderer.tsx

@@ -6,14 +6,15 @@ import { highlight as prismHighlight, languages } from 'prismjs';
 import 'prismjs/components/prism-clike';
 import 'prismjs/components/prism-markup';
 import 'prismjs/components/prism-javascript';
+import { Styles } from 'jss';
 import 'prismjs/components/prism-jsx';
 import { space } from '../../styles/theme';
 import prismTheme from '../../styles/prismTheme';
 import * as Rsg from '../../../typings';
 
 const highlight = (code: string) => prismHighlight(code, languages.jsx, 'jsx');
 
-const styles = ({ fontFamily, fontSize, color, borderRadius }: Rsg.Theme) => ({
+const styles = ({ fontFamily, fontSize, color, borderRadius }: Rsg.Theme): Styles => ({
 	root: {
 		fontFamily: fontFamily.monospace,
 		fontSize: fontSize.small,

src/client/rsg-components/Editor/Editor.tsx

@@ -1,9 +1,10 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import { Styles } from 'jss';
 import Styled, { JssInjectedProps } from 'rsg-components/Styled';
 import * as Rsg from '../../../../typings';
 
-const styles = ({ space, color, fontSize, fontFamily }: Rsg.Theme) => ({
+const styles = ({ space, color, fontSize, fontFamily }: Rsg.Theme): Styles => ({
 	summary: {
 		marginBottom: space[1],
 		fontFamily: fontFamily.base,

src/client/rsg-components/Markdown/Details/DetailsSummaryRenderer.tsx

@@ -1,5 +1,4 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import Markdown from 'rsg-components/Markdown';
 import Argument from 'rsg-components/Argument';
 import Arguments from 'rsg-components/Arguments';
@@ -40,16 +39,4 @@ const MethodsRenderer: React.FunctionComponent<{ methods: MethodDescriptor[] }>
 	<Table columns={columns} rows={methods} getRowKey={getRowKey} />
 );
 
-MethodsRenderer.propTypes = {
-	methods: PropTypes.arrayOf(
-		PropTypes.shape({
-			name: PropTypes.string.isRequired,
-			description: PropTypes.string,
-			returns: PropTypes.object,
-			params: PropTypes.array,
-			tags: PropTypes.object,
-		}).isRequired
-	).isRequired,
-};
-
 export default MethodsRenderer;

src/client/rsg-components/Methods/MethodsRenderer.tsx

@@ -88,7 +88,11 @@ export default class Preview extends Component<PreviewProps, PreviewState> {
 			try {
 				ReactDOM.render(wrappedComponent, this.mountNode);
 			} catch (err) {
-				this.handleError(err);
+				/* istanbul ignore next: it is near-impossible to trigger a sync error from ReactDOM.render */
+				if (err instanceof Error) {
+					/* istanbul ignore next */
+					this.handleError(err);
+				}
 			}
 		});
 	}
@@ -107,7 +111,7 @@ export default class Preview extends Component<PreviewProps, PreviewState> {
 		const { error } = this.state;
 		return (
 			<>
-				<div data-testid="mountNode" ref={ref => (this.mountNode = ref)} />
+				<div data-testid="mountNode" ref={(ref) => (this.mountNode = ref)} />
 				{error && <PlaygroundError message={error} />}
 			</>
 		);

src/client/rsg-components/Preview/Preview.tsx

@@ -1,10 +1,17 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import Styled, { JssInjectedProps } from 'rsg-components/Styled';
+import { Styles } from 'jss';
 import cx from 'clsx';
 import * as Rsg from '../../../typings';
 
-export const styles = ({ space, color, fontFamily, fontSize, buttonTextTransform }: Rsg.Theme) => ({
+export const styles = ({
+	space,
+	color,
+	fontFamily,
+	fontSize,
+	buttonTextTransform,
+}: Rsg.Theme): Styles => ({
 	button: {
 		padding: [[space[1], 0]],
 		fontFamily: fontFamily.base,

src/client/rsg-components/TabButton/TabButtonRenderer.tsx

@@ -1,9 +1,10 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import { Styles } from 'jss';
 import Styled, { JssInjectedProps } from 'rsg-components/Styled';
 import * as Rsg from '../../../typings';
 
-const styles = ({ space, color, fontFamily, fontSize, borderRadius }: Rsg.Theme) => ({
+const styles = ({ space, color, fontFamily, fontSize, borderRadius }: Rsg.Theme): Styles => ({
 	root: {
 		fontFamily: fontFamily.base,
 	},
@@ -58,7 +59,7 @@ export const TableOfContentsRenderer: React.FunctionComponent<TableOfContentsRen
 							className={classes.input}
 							placeholder="Filter by name"
 							aria-label="Filter by name"
-							onChange={event => onSearchTermChange(event.target.value)}
+							onChange={(event) => onSearchTermChange(event.target.value)}
 						/>
 					</div>
 					{children}

src/client/rsg-components/TableOfContents/TableOfContentsRenderer.tsx

@@ -1,5 +1,4 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import { MethodDescriptor } from 'react-docgen';
 import { PropDescriptor } from 'rsg-components/Props/util';
 import Props from 'rsg-components/Props';
@@ -24,11 +23,4 @@ const Usage: React.FunctionComponent<{
 	);
 };
 
-Usage.propTypes = {
-	props: PropTypes.shape({
-		props: PropTypes.array,
-		methods: PropTypes.array,
-	}).isRequired,
-};
-
 export default Usage;