(refactor/deps): use parcel instead of webpack for example

- finally nix webpack@1 and babel@6 from the codebase - remove babel@6 presets, add @babel/core@7 - remove webpack loaders, parcel has built-in support for most - needed to add postcss-modules and a postcss.config.js to support the example's use of CSS modules - also fix a bunch of security warnings in the process - restructure example file hierarchy to be closer to CRA's for better standardization
agilgur5 · Apr 20, 2022 · 962b902 · 962b902
1 parent 53f047d
commit 962b902
Show file tree

Hide file tree

Showing 8 changed files with 8,382 additions and 6,814 deletions.
diff --git a/.gitignore b/.gitignore
@@ -1,5 +1,7 @@
 ### custom ###
 
+# parcel cache
+.cache/
 # build output
 dist/
 # test coverage output

diff --git a/example/index.html → example/public/index.html b/example/index.html → example/public/index.html
@@ -4,6 +4,6 @@
 </head>
 <body>
   <div id='container'></div>
-  <script src='build/bundle.js'></script>
+  <script src='../src/index.js'></script>
 </body>
-</html>
+</html>
diff --git a/example/app.js → example/src/index.js b/example/app.js → example/src/index.js
@@ -1,9 +1,9 @@
 import React, { Component } from 'react'
 import ReactDOM from 'react-dom'
 
-import SignaturePad from '../src/index.js'
+import SignaturePad from '../../src/index.js'
 
-import styles from './styles.cssm'
+import styles from './styles.module.css'
 
 class App extends Component {
   state = { trimmedDataURL: null }

diff --git a/example/styles.cssm → example/src/styles.module.css b/example/styles.cssm → example/src/styles.module.css
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -40,9 +40,9 @@
     "react-signature-pad"
   ],
   "scripts": {
+    "start": "parcel example/public/index.html",
     "lint": "tsdx lint '**/*.js'",
     "lint:fix": "tsdx lint '**/*.js' --fix",
-    "start": "webpack-dev-server -d --inline --hot",
     "build": "tsdx build",
     "test": "tsdx test",
     "test:pub": "npm run build && npm pack",
@@ -60,16 +60,11 @@
   },
   "devDependencies": {
     "@agilgur5/changelog-maker": "^3.0.0",
+    "@babel/core": "^7.8.4",
     "@babel/preset-react": "^7.8.3",
     "@wojtekmaj/enzyme-adapter-react-17": "^0.6.6",
-    "babel-core": "^6.26.3",
     "babel-eslint": "^10.0.2",
-    "babel-loader": "^6.0.0",
-    "babel-preset-es2015": "^6.14.0",
-    "babel-preset-react": "^6.11.1",
-    "babel-preset-stage-2": "^6.13.0",
     "canvas": "^2.9.0",
-    "css-loader": "^0.24.0",
     "enzyme": "^3.10.0",
     "eslint": "^6.8.0",
     "eslint-config-standard": "^14.1.0",
@@ -80,13 +75,12 @@
     "eslint-plugin-standard": "^4.0.1",
     "jest-environment-jsdom-fifteen": "^1.0.2",
     "jest-without-globals": "^0.0.2",
+    "parcel": "^1.12.4",
+    "postcss-modules": "^1.5.0",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-hot-loader": "^4.13.0",
-    "style-loader": "^0.13.1",
     "tsdx": "^0.12.3",
-    "webpack": "^1.12.2",
-    "webpack-dev-server": "^1.10.1",
     "window-resizeto": "0.0.2"
   }
 }
diff --git a/postcss.config.js b/postcss.config.js
@@ -0,0 +1,3 @@
+module.exports = {
+  modules: true
+}
diff --git a/webpack.config.js b/webpack.config.js