Skip to content

Commit 3d68e19

Browse files
BunlongBunlong
authored
Merge pull request #112 from Bunlong/webpack-v5-compatibility
Webpack v5 compatibility
2 parents 9e16125 + 6a505a4 commit 3d68e19

File tree

5 files changed

+125
-121
lines changed

5 files changed

+125
-121
lines changed

‎package.json

-1
Original file line numberDiff line numberDiff line change
@@ -81,7 +81,6 @@
8181
"@babel/preset-env": "^7.15.0",
8282
"@rollup/plugin-babel": "^5.3.0",
8383
"@rollup/plugin-commonjs": "^20.0.0",
84-
"@rollup/plugin-node-resolve": "^13.0.4",
8584
"@types/jest": "^27.0.2",
8685
"@types/react": "^17.0.19",
8786
"@types/react-dom": "^17.0.9",

‎rollup.config.js

+7-6
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,11 @@
11
import typescript from 'rollup-plugin-typescript2';
22
import babel from '@rollup/plugin-babel';
33
import commonjs from '@rollup/plugin-commonjs';
4-
import resolve from '@rollup/plugin-node-resolve';
5-
import builtins from 'builtin-modules'
64
import { terser } from "rollup-plugin-terser";
5+
6+
// import builtins from 'builtin-modules'
7+
// import { nodeResolve } from '@rollup/plugin-node-resolve';
8+
79
import pkg from './package.json';
810

911
export default {
@@ -35,7 +37,8 @@ export default {
3537
// },
3638
// },
3739
],
38-
external: builtins,
40+
// external: builtins,
41+
external: ['react', 'papaparse'],
3942
plugins: [
4043
typescript({
4144
tsconfig: './tsconfig.json',
@@ -44,9 +47,7 @@ export default {
4447
babel({
4548
exclude: 'node_modules/**'
4649
}),
47-
resolve({
48-
preferBuiltins: true
49-
}),
50+
// nodeResolve(),
5051
commonjs({
5152
extensions: ['.js', '.ts', '.tsx']
5253
}),

‎supports/create-react-app/README.md

+12-12
Original file line numberDiff line numberDiff line change
@@ -6,20 +6,20 @@ This project was bootstrapped with [Create React App](https://github.com/faceboo
66

77
In the project directory, you can run:
88

9-
### `yarn start`
9+
### `npm start`
1010

1111
Runs the app in the development mode.\
12-
Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
12+
Open [http://localhost:3000](http://localhost:3000) to view it in your browser.
1313

14-
The page will reload if you make edits.\
15-
You will also see any lint errors in the console.
14+
The page will reload when you make changes.\
15+
You may also see any lint errors in the console.
1616

17-
### `yarn test`
17+
### `npm test`
1818

1919
Launches the test runner in the interactive watch mode.\
2020
See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
2121

22-
### `yarn build`
22+
### `npm run build`
2323

2424
Builds the app for production to the `build` folder.\
2525
It correctly bundles React in production mode and optimizes the build for the best performance.
@@ -29,15 +29,15 @@ Your app is ready to be deployed!
2929

3030
See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.
3131

32-
### `yarn eject`
32+
### `npm run eject`
3333

34-
**Note: this is a one-way operation. Once you `eject`, you can’t go back!**
34+
**Note: this is a one-way operation. Once you `eject`, you can't go back!**
3535

36-
If you aren’t satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project.
36+
If you aren't satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project.
3737

38-
Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own.
38+
Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you're on your own.
3939

40-
You don’t have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it.
40+
You don't have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn't feel obligated to use this feature. However we understand that this tool wouldn't be useful if you couldn't customize it when you are ready for it.
4141

4242
## Learn More
4343

@@ -65,6 +65,6 @@ This section has moved here: [https://facebook.github.io/create-react-app/docs/a
6565

6666
This section has moved here: [https://facebook.github.io/create-react-app/docs/deployment](https://facebook.github.io/create-react-app/docs/deployment)
6767

68-
### `yarn build` fails to minify
68+
### `npm run build` fails to minify
6969

7070
This section has moved here: [https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify](https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify)

‎supports/create-react-app/package.json

+8-8
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,19 @@
11
{
2-
"name": "react-papaparse",
2+
"name": "create-react-app",
33
"version": "0.1.0",
44
"private": true,
55
"dependencies": {
6-
"@testing-library/jest-dom": "^5.11.4",
7-
"@testing-library/react": "^11.1.0",
8-
"@testing-library/user-event": "^12.1.10",
6+
"@testing-library/jest-dom": "^5.16.1",
7+
"@testing-library/react": "^12.1.2",
8+
"@testing-library/user-event": "^13.5.0",
99
"react": "^17.0.2",
1010
"react-dom": "^17.0.2",
11-
"react-scripts": "4.0.3",
12-
"web-vitals": "^1.0.1",
13-
"react-papaparse": "file:../.."
11+
"react-papaparse": "file:../..",
12+
"react-scripts": "5.0.0",
13+
"web-vitals": "^2.1.2"
1414
},
1515
"scripts": {
16-
"start": "react-scripts start",
16+
"dev": "react-scripts start",
1717
"build": "react-scripts build",
1818
"test": "react-scripts test",
1919
"eject": "react-scripts eject"

‎supports/create-react-app/src/App.js

+98-94
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,11 @@
1-
import React, { useState } from 'react';
2-
import { CSVReader, CSVDownloader } from 'react-papaparse'
1+
import React, { useState } from 'react'
2+
import { CSVReader, CSVDownloader, readString } from 'react-papaparse'
33

4-
const buttonRef= React.createRef()
5-
6-
function App() {
7-
const [isReset, setIsReset] = useState(true);
4+
export default function App() {
5+
const [isReset, setIsReset] = useState(false);
86

97
const handleReset = () => {
10-
setIsReset(!isReset);
11-
}
12-
13-
const handleOpenDialog = (e) => {
14-
// Note that the ref is set async, so it might be null at some point
15-
if (buttonRef.current) {
16-
buttonRef.current.open(e)
17-
}
18-
}
19-
20-
const handleOnFileLoad = (data) => {
21-
console.log('---------------------------')
22-
console.log(data)
23-
console.log('---------------------------')
8+
setIsReset(!isReset)
249
}
2510

2611
const handleOnDrop = (data) => {
@@ -29,7 +14,12 @@ function App() {
2914
console.log('---------------------------')
3015
}
3116

32-
const handleOnError = (err, file, inputElem, reason) => {
17+
const handleOnError = (
18+
err,
19+
// file,
20+
// inputElem,
21+
// reason
22+
) => {
3323
console.log(err)
3424
}
3525

@@ -39,83 +29,73 @@ function App() {
3929
console.log('---------------------------')
4030
}
4131

42-
const handleRemoveFile = (e) => {
43-
// Note that the ref is set async, so it might be null at some point
44-
if (buttonRef.current) {
45-
buttonRef.current.removeFile(e)
46-
}
47-
}
32+
const handleClick = () => {
33+
const csvString = `Column 1,Column 2,Column 3,Column 4
34+
1-1,1-2,1-3,1-4
35+
2-1,2-2,2-3,2-4
36+
3-1,3-2,3-3,3-4
37+
4,5,6,7`;
38+
39+
readString(csvString, {
40+
worker: true,
41+
complete: (results) => {
42+
console.log('---------------------------');
43+
console.log(results);
44+
console.log('---------------------------');
45+
},
46+
})
47+
};
4848

4949
return (
5050
<>
5151
<CSVReader
5252
isReset={isReset}
53-
ref={buttonRef}
54-
onFileLoad={handleOnDrop}
53+
onDrop={handleOnDrop}
5554
onError={handleOnError}
56-
noClick
57-
noDrag
55+
// noDrag
56+
addRemoveButton
5857
onRemoveFile={handleOnRemoveFile}
58+
style={{
59+
dropArea: {
60+
borderColor: 'pink',
61+
borderRadius: 20,
62+
},
63+
dropAreaActive: {
64+
borderColor: 'red',
65+
},
66+
dropFile: {
67+
width: 100,
68+
height: 120,
69+
background: '#ccc',
70+
},
71+
fileSizeInfo: {
72+
color: '#fff',
73+
backgroundColor: '#000',
74+
borderRadius: 3,
75+
lineHeight: 1,
76+
marginBottom: '0.5em',
77+
padding: '0 0.4em',
78+
},
79+
fileNameInfo: {
80+
color: '#fff',
81+
backgroundColor: '#eee',
82+
borderRadius: 3,
83+
fontSize: 14,
84+
lineHeight: 1,
85+
padding: '0 0.4em',
86+
},
87+
removeButton: {
88+
color: 'blue',
89+
},
90+
progressBar: {
91+
backgroundColor: 'pink',
92+
},
93+
}}
5994
>
60-
{({ file }) => (
61-
<aside
62-
style={{
63-
display: 'flex',
64-
flexDirection: 'row',
65-
marginBottom: 10
66-
}}
67-
>
68-
<button
69-
type='button'
70-
onClick={handleOpenDialog}
71-
style={{
72-
borderRadius: 0,
73-
marginLeft: 0,
74-
marginRight: 0,
75-
width: '40%',
76-
paddingLeft: 0,
77-
paddingRight: 0
78-
}}
79-
>
80-
Browe file
81-
</button>
82-
<div
83-
style={{
84-
borderWidth: 1,
85-
borderStyle: 'solid',
86-
borderColor: '#ccc',
87-
height: 45,
88-
lineHeight: 2.5,
89-
marginTop: 5,
90-
marginBottom: 5,
91-
paddingLeft: 13,
92-
paddingTop: 3,
93-
width: '60%'
94-
}}
95-
>
96-
{file && file.name}
97-
</div>
98-
<button
99-
style={{
100-
borderRadius: 0,
101-
marginLeft: 0,
102-
marginRight: 0,
103-
paddingLeft: 20,
104-
paddingRight: 20
105-
}}
106-
onClick={handleRemoveFile}
107-
>
108-
Remove
109-
</button>
110-
</aside>
111-
)}
95+
<span>Click to upload.</span>
11296
</CSVReader>
97+
<button onClick={() => handleReset()}>Reset</button>
11398
<CSVDownloader
114-
// data={`Column 1,Column 2,Column 3,Column 4
115-
// 1-1,1-2,1-3,1-4
116-
// 2-1,2-2,2-3,2-4
117-
// 3-1,3-2,3-3,3-4
118-
// 4,5,6,7`}
11999
data={[
120100
{
121101
"Column 1": "1-1",
@@ -142,19 +122,43 @@ function App() {
142122
"Column 4": 7,
143123
},
144124
]}
125+
type="button"
145126
filename={'filename'}
146-
type='button'
147127
config={
148128
{
149-
delimiter: ',',
129+
delimiter: ';',
150130
}
151131
}
152132
>
153133
Download
154134
</CSVDownloader>
155-
<button onClick={() => handleReset()}>Reset</button>
135+
<CSVDownloader
136+
data={`Column 1,Column 2,Column 3,Column 4
137+
1-1,1-2,1-3,1-4
138+
#2-1,मुकेश,ខ្ញុំ,2-4
139+
3-1,3-2,អ្នក,3-4
140+
4,5,6,7`}
141+
filename={'filename'}
142+
bom={true}
143+
>
144+
Download
145+
</CSVDownloader>
146+
<CSVDownloader
147+
filename={'filename'}
148+
data={() => {
149+
return [
150+
{
151+
"Column 1": "1-1",
152+
"Column 2": "1-2",
153+
"Column 3": "1-3",
154+
"Column 4": "1-4",
155+
}
156+
]}
157+
}
158+
>
159+
Download
160+
</CSVDownloader>
161+
<button onClick={() => handleClick()}>readString</button>
156162
</>
157-
);
163+
)
158164
}
159-
160-
export default App;

0 commit comments

Comments
 (0)