(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 · Feb 6, 2020 · fdc0213 · fdc0213
1 parent 8f124fe
commit fdc0213
Show file tree

Hide file tree

Showing 8 changed files with 10,766 additions and 9,192 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
@@ -37,9 +37,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",
     "dist": "tsdx build",
     "test": "tsdx test",
     "test:pub": "npm run dist && npm pack",
@@ -57,15 +57,10 @@
   },
   "devDependencies": {
     "@agilgur5/changelog-maker": "^3.0.0",
+    "@babel/core": "^7.8.4",
     "@babel/preset-react": "^7.8.3",
-    "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-prebuilt": "^1.6.11",
-    "css-loader": "^0.24.0",
     "enzyme": "^3.10.0",
     "enzyme-adapter-react-16": "^1.14.0",
     "eslint": "^6.8.0",
@@ -76,12 +71,10 @@
     "eslint-plugin-react": "^7.18.3",
     "eslint-plugin-standard": "^4.0.1",
     "jest-without-globals": "^0.0.2",
+    "parcel": "^1.12.4",
+    "postcss-modules": "^1.5.0",
     "react": "^16.8.6",
     "react-dom": "^16.8.6",
-    "react-hot-loader": "^1.2.7",
-    "style-loader": "^0.13.1",
-    "tsdx": "^0.12.3",
-    "webpack": "^1.12.2",
-    "webpack-dev-server": "^1.10.1"
+    "tsdx": "^0.12.3"
   }
 }
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