Upgrade to Parcel 2

.gitignore

@@ -9,4 +9,5 @@ yarn-error.log
 __pycache__
 .DS_Store
 .idea/
-*.override.yml
+*.override.yml
+.parcel-cache

package.json

@@ -1,7 +1,6 @@
 {
   "name": "wazimap-ng",
   "version": "1.0.0",
-  "main": "index.js",
   "author": "Adi Eyal <[email protected]>",
   "license": "MIT",
   "engines": {
@@ -10,9 +9,11 @@
   "dependencies": {
     "@emotion/react": "^11.9.3",
     "@emotion/styled": "^11.9.3",
+    "@mui/base": "^5.0.0-beta.23",
     "@mui/icons-material": "^5.10.9",
-    "@mui/lab": "^5.0.0-alpha.120",
+    "@mui/lab": "^5.0.0-alpha.152",
     "@mui/material": "^5.8.5",
+    "@mui/system": "^5.14.17",
     "@sentry/browser": "^5.20.1",
     "@testing-library/react": "^13.4.0",
     "@types/react": "^16.8.6 || ^17.0.0",
@@ -36,8 +37,10 @@
     "leaflet": "~1.3.1",
     "leaflet-event-forwarder": "^0.0.3",
     "leaflet.markercluster": "^1.4.1",
+    "lodash": "^4.17.21",
     "main": "^1000.0.1",
     "main.js": "0.0.1",
+    "miragejs": "^0.1.48",
     "notistack": "^2.0.5",
     "papaparse": "^5.3.0",
     "pixelmatch": "^5.2.1",
@@ -60,11 +63,13 @@
     "@babel/plugin-proposal-class-properties": "^7.10.1",
     "@babel/preset-env": "^7.14.0",
     "@babel/preset-react": "^7.18.6",
+    "@parcel/transformer-sass": "2.10.2",
     "@testing-library/cypress": "^7.0.0",
     "@testing-library/dom": "^7.27.0",
     "@testing-library/jest-dom": "^5.11.6",
     "babel-jest": "^26.3.0",
     "babel-plugin-transform-regenerator": "^6.26.0",
+    "buffer": "^5.5.0||^6.0.0",
     "canvas": "^2.9.3",
     "chrome-remote-interface": "^0.31.0",
     "cssnano": "^4.1.10",
@@ -74,9 +79,7 @@
     "html-loader-jest": "0.2.1",
     "jest": "^26.4.2",
     "jest-transform-stub": "2.0.0",
-    "miragejs": "^0.1.41",
-    "parcel": "1.12.4",
-    "parcel-bundler": "1.12.5",
+    "parcel": "^2.0.0",
     "react-test-renderer": "^18.2.0",
     "sass": "^1.52.3",
     "webpack": "^5.88.2"
@@ -94,7 +97,7 @@
     "prebuild-dev": "shx rm -rf dist/*",
     "build-dev": "parcel build ./src/index.html ./src/tabular-comparison.html --no-minify --public-url ./",
     "prebuild": "shx rm -rf dist/*",
-    "build": "parcel build ./src/index.html ./src/tabular-comparison.html --no-minify --public-url ./ ",
+    "build": "parcel build ./src/index.html ./src/tabular-comparison.html --public-url ./ ",
     "clean-files": "cp dist/js*.js dist/wazimap-ng.js; cp dist/js*.js.map dist/wazimap-ng.js.map; cp dist/js*.css dist/wazimap-ng.css"
   },
   "browserslist": "> 0.25%, not dead",

src/index.html

@@ -3865,4 +3865,4 @@ <h4>Indicator chart title</h4>
 }, 2000);
 </script>
 
-<script src="js/index.js"></script><a style="display:none" href="/tabular-comparison.html"></a></body></html>
+<script src="js/index.js" type="module"></script><a style="display:none" href="tabular-comparison.html"></a></body></html>

src/js/elements/mapchip/components/linear_scrubber/styledElements.js

@@ -1,19 +1,21 @@
-import { styled } from '@mui/system';
-import SliderUnstyled, { sliderUnstyledClasses } from '@mui/base/SliderUnstyled';
+import { styled } from "@mui/system";
+import { Slider } from '@mui/base/Slider';
 
-export const ParentContainer = styled('div')(({ theme }) => ({
+//import { sliderUnstyledClasses } from "@mui/base";
+
+export const ParentContainer = styled("div")(({ theme }) => ({
   padding: "15px 10px",
   margin: "auto",
   borderBottom: "1px solid #ebebeb",
 }));
 
-export const CustomSliderRail = styled('div')(({ theme }) => ({
+export const CustomSliderRail = styled("div")(({ theme }) => ({
   backgroundColor: "#aba9a952",
   height: "20px",
-  borderRadius: "10px"
+  borderRadius: "10px",
 }));
 
-export const StyledSlider = styled(SliderUnstyled)(
+export const StyledSlider = styled(Slider)(
   ({ theme }) => `
   color: ${theme.palette.grey[500]};
   height: 4px;
@@ -80,5 +82,5 @@ export const StyledSlider = styled(SliderUnstyled)(
     text-align: center;
     color: red;
   }
-  `,
+  `
 );

src/js/tabular_comparison/components/styledElements.js

@@ -1,11 +1,9 @@
 import {styled} from '@mui/system';
 import Button from '@mui/material/Button';
-import SliderUnstyled, {sliderUnstyledClasses} from '@mui/base/SliderUnstyled';
 
 import Select from '@mui/material/Select';
 import MenuItem from '@mui/material/MenuItem';
 import IconButton from '@mui/material/IconButton';
-import Chip from '@mui/material/Chip';
 
 export const AddFilterButton = styled(Button)(({theme}) => ({
     width: '100%',

src/tabular-comparison.html

@@ -7,6 +7,6 @@
 </head>
 <body>
 <div id="root"></div>
-<script src="js/tabular_comparison/index.js"></script>
+<script src="js/tabular_comparison/index.js" type="module"></script>
 </body>
 </html>