Skip to content

Commit 1edb4bc

Browse files
brybrophybrybrophy
authored
Upgrade all dependencies (#33)
* Upgrade all dependencies * Remove coverage directory * Add coverage to gitignore * Update readme
1 parent ced08d4 commit 1edb4bc

20 files changed

+3471
-4708
lines changed

‎.gitignore

+1
Original file line numberDiff line numberDiff line change
@@ -35,3 +35,4 @@ es
3535
lib
3636
yarn-error.log*
3737
package-lock.json
38+
coverage

‎LICENSE

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
The MIT License (MIT)
22

3-
Copyright @2020 Bryan Brophy
3+
Copyright @2023 Bryan Brophy
44

55
Permission is hereby granted, free of charge, to any person obtaining a copy of
66
this software and associated documentation files (the "Software"), to deal in

‎README.md

+12-12
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@ yarn add react-sorcerer
2121
## Use as a Component
2222

2323
```jsx
24-
import Sorcerer from 'react-sorcerer';
24+
import { Sorcerer } from 'react-sorcerer';
2525

2626
<Sorcerer
2727
alt="an image"
@@ -30,20 +30,20 @@ import Sorcerer from 'react-sorcerer';
3030
srcSetData={[
3131
{
3232
src: 'https://dummyimage.com/300x200/f00/fff',
33-
width: 300
33+
width: 300,
3434
},
3535
{
3636
src: 'https://dummyimage.com/400x300/f00/fff',
37-
width: 400
37+
width: 400,
3838
},
3939
{
4040
src: 'https://dummyimage.com/800x600/f00/fff',
41-
width: 800
41+
width: 800,
4242
},
4343
{
4444
src: 'https://dummyimage.com/1100x800/f00/fff',
45-
width: 1100
46-
}
45+
width: 1100,
46+
},
4747
]}
4848
/>;
4949
```
@@ -60,21 +60,21 @@ const imgSrcData = useSorcerer({
6060
srcSetData: [
6161
{
6262
src: 'https://dummyimage.com/300x200/f00/fff',
63-
width: 300
63+
width: 300,
6464
},
6565
{
6666
src: 'https://dummyimage.com/400x300/f00/fff',
67-
width: 400
67+
width: 400,
6868
},
6969
{
7070
src: 'https://dummyimage.com/800x600/f00/fff',
71-
width: 800
71+
width: 800,
7272
},
7373
{
7474
src: 'https://dummyimage.com/1100x800/f00/fff',
75-
width: 1100
76-
}
77-
]
75+
width: 1100,
76+
},
77+
],
7878
});
7979

8080
<img {...imgSrcData} />;

‎babel.config.js

+6-2
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,11 @@
1-
module.exports = function(api) {
1+
module.exports = function (api) {
22
api.cache(true);
33

44
return {
5-
presets: ['@babel/preset-env', '@babel/preset-react', '@babel/preset-typescript']
5+
presets: [
6+
'@babel/preset-env',
7+
'@babel/preset-react',
8+
'@babel/preset-typescript',
9+
],
610
};
711
};

‎demo/app.jsx

+17-10
Original file line numberDiff line numberDiff line change
@@ -1,37 +1,44 @@
1-
import { useSorcerer } from '../src';
21
import React from 'react';
3-
import ReactDom from 'react-dom';
2+
import { createRoot } from 'react-dom/client';
3+
4+
import { useSorcerer } from '../src';
45

56
const imageStyles = {
6-
width: '100%'
7+
width: '100%',
78
};
89

910
const App = () => {
11+
console.log('HERE');
1012
const sorcererDemoProps = useSorcerer({
1113
alt: 'an image for the demo',
1214
coverage: 100,
1315
src: 'https://dummyimage.com/1024x800/f00/fff',
1416
srcSetData: [
1517
{
1618
src: 'https://dummyimage.com/300x200/f00/fff',
17-
width: 300
19+
width: 300,
1820
},
1921
{
2022
src: 'https://dummyimage.com/400x300/f00/fff',
21-
width: 400
23+
width: 400,
2224
},
2325
{
2426
src: 'https://dummyimage.com/800x600/f00/fff',
25-
width: 800
27+
width: 800,
2628
},
2729
{
2830
src: 'https://dummyimage.com/1100x800/f00/fff',
29-
width: 1100
30-
}
31-
]
31+
width: 1100,
32+
},
33+
],
3234
});
3335

3436
return <img {...sorcererDemoProps} style={imageStyles} />;
3537
};
3638

37-
ReactDom.render(<App />, document.getElementById('content'));
39+
const root = createRoot(document.getElementById('content'));
40+
root.render(
41+
<React.StrictMode>
42+
<App />
43+
</React.StrictMode>,
44+
);

‎demo/index.html

+23-17
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,25 @@
1-
<!doctype html>
1+
<!DOCTYPE html>
22
<html>
3-
<head>
4-
<meta charset="utf-8">
5-
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
6-
<title></title>
7-
<meta name="description" content="">
8-
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
9-
</head>
10-
<body>
11-
<!--[if lt IE 8]>
12-
<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
13-
<![endif]-->
14-
<div id="content">
15-
<h1>If you can see this, something is broken (or JS is not enabled)!!.</h1>
16-
</div>
17-
<script type="text/javascript" src="/assets/main.js"></script>
18-
</body>
3+
<head>
4+
<meta charset="utf-8" />
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
6+
<title></title>
7+
<meta name="description" content="" />
8+
<meta
9+
name="viewport"
10+
content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"
11+
/>
12+
</head>
13+
14+
<body>
15+
<!--[if lt IE 8]>
16+
<p class="browsehappy">
17+
You are using an <strong>outdated</strong> browser. Please
18+
<a href="http://browsehappy.com/">upgrade your browser</a> to improve
19+
your experience.
20+
</p>
21+
<![endif]-->
22+
<div id="content"></div>
23+
<script type="text/javascript" src="/assets/main.js"></script>
24+
</body>
1925
</html>

‎jest.config.js

+4-6
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,7 @@
11
module.exports = {
2-
preset: 'ts-jest',
2+
collectCoverage: true,
3+
collectCoverageFrom: ['src/**/*.{ts,tsx}'],
4+
coverageDirectory: 'coverage',
5+
testEnvironment: 'jsdom',
36
setupFilesAfterEnv: ['<rootDir>/setupTests.js'],
4-
transform: {
5-
'\\.(ts|tsx)$': 'ts-jest',
6-
'^.+\\.jsx?$': 'babel-jest'
7-
},
8-
verbose: true
97
};

‎package.json

+34-34
Original file line numberDiff line numberDiff line change
@@ -13,45 +13,45 @@
1313
},
1414
"main": "dist/index.js",
1515
"devDependencies": {
16-
"@babel/cli": "^7.13.14",
17-
"@babel/core": "^7.13.14",
18-
"@babel/eslint-parser": "^7.13.14",
19-
"@babel/plugin-proposal-object-rest-spread": "^7.13.8",
20-
"@babel/preset-env": "^7.13.12",
21-
"@babel/preset-react": "^7.13.13",
22-
"@babel/preset-typescript": "^7.13.0",
23-
"@types/enzyme": "^3.10.8",
24-
"@types/jest": "^26.0.22",
25-
"@types/react": "^17.0.3",
26-
"@types/react-dom": "^17.0.3",
27-
"@typescript-eslint/eslint-plugin": "^4.21.0",
28-
"@typescript-eslint/parser": "^4.21.0",
29-
"@wojtekmaj/enzyme-adapter-react-17": "^0.6.0",
16+
"@babel/cli": "^7.20.7",
17+
"@babel/core": "^7.20.7",
18+
"@babel/eslint-parser": "^7.19.1",
19+
"@babel/plugin-proposal-object-rest-spread": "^7.20.7",
20+
"@babel/preset-env": "^7.20.2",
21+
"@babel/preset-react": "^7.18.6",
22+
"@babel/preset-typescript": "^7.18.6",
23+
"@testing-library/jest-dom": "^5.16.5",
24+
"@testing-library/react": "^13.4.0",
25+
"@types/jest": "^29.2.5",
26+
"@types/react": "^18.0.26",
27+
"@types/react-dom": "^18.0.10",
28+
"@typescript-eslint/eslint-plugin": "^5.48.1",
29+
"@typescript-eslint/parser": "^5.48.1",
3030
"babel-eslint": "^10.1.0",
31-
"babel-jest": "^26.6.3",
32-
"babel-loader": "^8.2.2",
33-
"enzyme": "^3.11.0",
34-
"eslint": "^7.23.0",
35-
"eslint-config-prettier": "^8.1.0",
31+
"babel-jest": "^29.3.1",
32+
"babel-loader": "^9.1.2",
33+
"eslint": "^8.31.0",
34+
"eslint-config-prettier": "^8.6.0",
3635
"eslint-config-react": "^1.1.7",
37-
"eslint-plugin-prettier": "^3.3.1",
38-
"eslint-plugin-react": "^7.23.1",
39-
"jest": "^26.6.3",
40-
"jest-enzyme": "^7.1.2",
41-
"prettier": "^2.2.1",
42-
"react": "^17.0.2",
43-
"react-dom": "^17.0.2",
36+
"eslint-plugin-prettier": "^4.2.1",
37+
"eslint-plugin-react": "^7.31.11",
38+
"html-webpack-plugin": "^5.5.0",
39+
"jest": "^29.3.1",
40+
"jest-environment-jsdom": "^29.3.1",
41+
"prettier": "^2.8.2",
42+
"react": "^18.2.0",
43+
"react-dom": "^18.2.0",
4444
"rimraf": "^3.0.2",
45-
"ts-jest": "^26.5.4",
46-
"ts-loader": "^9.2.6",
47-
"typescript": "^4.2.3",
48-
"webpack": "^5.31.0",
49-
"webpack-cli": "^4.6.0",
50-
"webpack-dev-server": "^3.11.2"
45+
"ts-jest": "^29.0.3",
46+
"ts-loader": "^9.4.2",
47+
"typescript": "^4.9.4",
48+
"webpack": "^5.75.0",
49+
"webpack-cli": "^5.0.1",
50+
"webpack-dev-server": "^4.11.1"
5151
},
5252
"peerDependencies": {
53-
"react": "^17.0.2",
54-
"react-dom": "^17.0.2"
53+
"react": "^18.2.0",
54+
"react-dom": "^18.2.0"
5555
},
5656
"scripts": {
5757
"preversion": "yarn test && yarn lint",

‎prettier.config.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
11
module.exports = {
22
singleQuote: true,
3-
trailingComma: 'none'
3+
trailingComma: 'all',
44
};

‎setupTests.js

+1-3
Original file line numberDiff line numberDiff line change
@@ -1,3 +1 @@
1-
import Enzyme from 'enzyme';
2-
import Adapter from '@wojtekmaj/enzyme-adapter-react-17';
3-
Enzyme.configure({ adapter: new Adapter() });
1+
import '@testing-library/jest-dom';

‎src/Sorcerer.spec.tsx

+10-10
Original file line numberDiff line numberDiff line change
@@ -1,29 +1,29 @@
1+
import { render, screen } from '@testing-library/react';
12
import React from 'react';
2-
import { shallow } from 'enzyme';
33

4-
import Sorcerer from './index';
4+
import { Sorcerer } from './Sorcerer';
55
import {
66
srcSetData,
77
expectedAlt,
88
expectedSizes,
99
expectedSrc,
10-
expectedSrcSet
10+
expectedSrcSet,
1111
} from './testUtils/testData';
1212

1313
describe('Sorcerer Component', () => {
1414
it('assigns the correct props', () => {
15-
const wrapper = shallow(
15+
render(
1616
<Sorcerer
1717
alt={expectedAlt}
1818
coverage={100}
1919
src={expectedSrc}
2020
srcSetData={srcSetData}
21-
/>
21+
/>,
2222
);
23-
24-
expect(wrapper.prop('alt')).toBe(expectedAlt);
25-
expect(wrapper.prop('sizes')).toBe(expectedSizes);
26-
expect(wrapper.prop('src')).toBe(expectedSrc);
27-
expect(wrapper.prop('srcSet')).toBe(expectedSrcSet);
23+
const image = screen.getByRole('img');
24+
expect(image).toHaveProperty('alt', expectedAlt);
25+
expect(image).toHaveProperty('sizes', expectedSizes);
26+
expect(image).toHaveProperty('src', expectedSrc);
27+
expect(image).toHaveProperty('srcset', expectedSrcSet);
2828
});
2929
});

‎src/Sorcerer.tsx

+3-5
Original file line numberDiff line numberDiff line change
@@ -7,12 +7,12 @@ export interface ReactSorcererProps extends UseSorcererConfig {
77
style?: CSSProperties;
88
}
99

10-
const Sorcerer = (props: ReactSorcererProps): ReactElement => {
10+
export function Sorcerer(props: ReactSorcererProps): ReactElement {
1111
const sorcererImageProps = useSorcerer({
1212
alt: props.alt,
1313
coverage: props.coverage,
1414
src: props.src,
15-
srcSetData: props.srcSetData
15+
srcSetData: props.srcSetData,
1616
});
1717

1818
return (
@@ -23,6 +23,4 @@ const Sorcerer = (props: ReactSorcererProps): ReactElement => {
2323
style={props.style}
2424
/>
2525
);
26-
};
27-
28-
export default Sorcerer;
26+
}

‎src/index.ts

+2-5
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,2 @@
1-
import Sorcerer from './Sorcerer';
2-
import { useSorcerer } from './useSorcerer';
3-
4-
export { useSorcerer };
5-
export default Sorcerer;
1+
export { Sorcerer } from './Sorcerer';
2+
export { useSorcerer } from './useSorcerer';

‎src/testUtils/testData.ts

+5-5
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,20 @@
11
export const srcSetData = [
22
{
33
src: 'https://dummyimage.com/300x200/f00/fff',
4-
width: 300
4+
width: 300,
55
},
66
{
77
src: 'https://dummyimage.com/400x300/f00/fff',
8-
width: 400
8+
width: 400,
99
},
1010
{
1111
src: 'https://dummyimage.com/800x600/f00/fff',
12-
width: 800
12+
width: 800,
1313
},
1414
{
1515
src: 'https://dummyimage.com/1100x800/f00/fff',
16-
width: 1100
17-
}
16+
width: 1100,
17+
},
1818
];
1919
export const expectedAlt = 'a test alt tag';
2020
export const expectedSizes = '(min-width: 300) 300, 50vw';

0 commit comments

Comments
 (0)