Skip to content

Commit

Permalink
feat: Upgrade to Webpack 5 (#1996)
Browse files Browse the repository at this point in the history
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.
  • Loading branch information
ThomasRoest authored Sep 5, 2022
1 parent 4c55077 commit a460fcc
Show file tree
Hide file tree
Showing 33 changed files with 30,731 additions and 4,703 deletions.
34,967 changes: 30,495 additions & 4,472 deletions package-lock.json

Large diffs are not rendered by default.

48 changes: 23 additions & 25 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand All @@ -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",
Expand All @@ -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": {
Expand All @@ -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",
Expand All @@ -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",
Expand All @@ -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",
Expand All @@ -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",
Expand All @@ -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",
Expand Down
15 changes: 1 addition & 14 deletions src/client/rsg-components/Arguments/ArgumentsRenderer.tsx
Original file line number Diff line number Diff line change
@@ -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';
Expand Down Expand Up @@ -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);
3 changes: 2 additions & 1 deletion src/client/rsg-components/Editor/Editor.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down
Original file line number Diff line number Diff line change
@@ -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,
Expand Down
13 changes: 0 additions & 13 deletions src/client/rsg-components/Methods/MethodsRenderer.tsx
Original file line number Diff line number Diff line change
@@ -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';
Expand Down Expand Up @@ -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;
8 changes: 6 additions & 2 deletions src/client/rsg-components/Preview/Preview.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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);
}
}
});
}
Expand All @@ -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} />}
</>
);
Expand Down
9 changes: 8 additions & 1 deletion src/client/rsg-components/TabButton/TabButtonRenderer.tsx
Original file line number Diff line number Diff line change
@@ -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,
Expand Down
Original file line number Diff line number Diff line change
@@ -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,
},
Expand Down Expand Up @@ -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}
Expand Down
8 changes: 0 additions & 8 deletions src/client/rsg-components/Usage/Usage.tsx
Original file line number Diff line number Diff line change
@@ -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';
Expand All @@ -24,11 +23,4 @@ const Usage: React.FunctionComponent<{
);
};

Usage.propTypes = {
props: PropTypes.shape({
props: PropTypes.array,
methods: PropTypes.array,
}).isRequired,
};

export default Usage;
2 changes: 1 addition & 1 deletion src/client/utils/compileCode.ts
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@ export default function compileCode(
const compiledCode = compile(wrappedCode, compilerConfig);
return transpileImports(compiledCode);
} catch (err) {
if (onError) {
if (onError && err instanceof Error) {
onError(err);
}
}
Expand Down
Loading

0 comments on commit a460fcc

Please sign in to comment.