Migrate to parcel

.github/workflows/build_and_deploy.yml

@@ -30,11 +30,11 @@ jobs:
             - name: 🔨 Build Project
               run: |
                   npm install
-                  npm run build:ci
+                  npm run build
             - uses: actions/upload-artifact@v3
               with:
                   name: teuto_map_artifact
-                  path: build
+                  path: dist
     deploy:
         if: github.ref == 'refs/heads/main'
         runs-on: ubuntu-latest

.gitignore

@@ -27,3 +27,6 @@ yarn-error.log*
 /.vscode
 *scratch*
 
+dist/
+.cache/
+.parcel-cache/

.husky/pre-commit

@@ -2,3 +2,4 @@
 . "$(dirname -- "$0")/_/husky.sh"
 
 npx lint-staged
+npx tsc --noEmit

README.md

@@ -9,22 +9,23 @@ In the project directory, you can run:
 ### `npm start`
 
 Runs the app in the development mode.\
-Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
-
-The page will reload if you make edits.\
-You will also see any lint errors in the console.
+Open [http://localhost:1234](http://localhost:1234) to view it in the browser.
 
-### `npm test`
+The page will reload if you make edits.
 
-Launches the test runner in the interactive watch mode.\
-See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
+### `npm run build:prod`
 
-### `npm run build`
-
-Builds the app for production to the `build` folder.\
-It correctly bundles React in production mode and optimizes the build for the best performance.
+Builds the app for production to the `dist` folder using the `.env.production` configuration\
 
 The build is minified and the filenames include the hashes.\
 Your app is ready to be deployed!
 
-See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.
+### `npm run serve:prod`
+
+Builds the app (using the .env.production configuration) and serves the bundle.\
+Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
+
+### `npm run serve`
+
+Builds the app (using the development configuration) and serves the bundle.\
+Open [http://localhost:3000](http://localhost:3000) to view it in the browser.

package.json

@@ -6,63 +6,67 @@
         "@fluentui/font-icons-mdl2": "^8.5.23",
         "@fluentui/react": "^8.110.12",
         "@fluentui/react-hooks": "^8.6.29",
-        "@testing-library/jest-dom": "^5.17.0",
-        "@testing-library/react": "^14.0.0",
-        "@testing-library/user-event": "^14.4.3",
-        "@types/jest": "^29.5.3",
-        "@types/node": "^20.4.8",
-        "@types/react": "^18.2.18",
+        "@types/leaflet": "^1.9.3",
+        "@types/node": "^20.4.9",
+        "@types/react": "^18",
         "@types/react-dom": "^18.2.7",
         "date-fns": "^2.30.0",
         "leaflet": "^1.9.4",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
         "react-leaflet": "^4.2.1",
         "react-markdown": "^8.0.7",
-        "react-scripts": "5.0.1",
         "remark-gfm": "^3.0.1",
-        "serve": "^14.2.0",
-        "typescript": "^4",
-        "use-http": "^1.0.28",
-        "web-vitals": "^3.4.0"
+        "use-http": "^1.0.28"
     },
     "scripts": {
-        "start": "react-scripts start",
-        "build": "react-scripts build",
-        "prod": "react-scripts build && serve -s build",
+        "start": "parcel src/index.html --open",
+        "prebuild": "rm -rf dist/",
+        "build": "NODE_ENV=production parcel build src/index.html --no-source-maps",
+        "prebuild:dev": "rm -rf dist/",
+        "build:dev": "NODE_ENV=development parcel build src/index.html --no-optimize",
+        "serve": "npm run build && cd dist && serve",
+        "serve:dev": "npm run build:dev && cd dist && serve",
         "prettier": "prettier --write .",
-        "build:ci": "CI=false && REACT_APP_ENV=production && react-scripts build",
-        "test": "react-scripts test",
-        "eject": "react-scripts eject",
+        "lint": "eslint src && tsc --noEmit",
         "prepare": "husky install"
     },
     "eslintConfig": {
         "extends": [
             "react-app",
-            "react-app/jest",
             "prettier"
         ]
     },
     "lint-staged": {
-        "**/*": "prettier --write --ignore-unknown"
-    },
-    "browserslist": {
-        "production": [
-            ">0.2%",
-            "not dead",
-            "not op_mini all"
-        ],
-        "development": [
-            "last 1 chrome version",
-            "last 1 firefox version",
-            "last 1 safari version"
-        ]
+        "**/*": "prettier --write --ignore-unknown",
+        "**/*.ts": "tsc --noEmit"
     },
+    "browserslist": "last 1 chrome version",
     "devDependencies": {
-        "@types/leaflet": "^1.9.3",
+        "@parcel/config-default": "^2.9.3",
+        "@parcel/packager-raw-url": "^2.9.3",
+        "@parcel/packager-ts": "^2.9.3",
+        "@parcel/resolver-default": "^2.9.3",
+        "@parcel/resolver-glob": "^2.9.3",
+        "@parcel/transformer-react-refresh-wrap": "^2.9.3",
+        "@parcel/transformer-svg-react": "^2.9.3",
+        "@parcel/transformer-typescript-types": "^2.9.3",
+        "@parcel/transformer-webmanifest": "^2.9.3",
+        "@types/eslint": "^8",
+        "@types/prettier": "^2",
+        "eslint": "^8.46.0",
         "eslint-config-prettier": "^9.0.0",
+        "eslint-config-react-app": "^7.0.1",
         "husky": "^8.0.3",
-        "lint-staged": "^13.2.3",
-        "prettier": "^3.0.1"
+        "lint-staged": ">=13",
+        "parcel": "^2.9.3",
+        "prettier": "^3.0.1",
+        "process": "^0.11.10",
+        "react-jsx": "^1.0.0",
+        "serve": "^14.2.0",
+        "typescript": "^5"
+    },
+    "targets": {
+        "appModern": {}
     }
 }

src/index.html

@@ -0,0 +1,22 @@
+<!doctype html>
+<html lang="en">
+    <head>
+        <meta charset="utf-8" />
+        <link rel="icon" href="./favicon.ico" />
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+        <meta name="theme-color" content="#000000" />
+        <meta name="description" content="Bodenfeuchtigkeitskarte des Teuteburger Waldes" />
+        <link rel="apple-touch-icon" href="./logo192.png" />
+        <!--
+      manifest.json provides metadata used when your web app is installed on a
+      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
+    -->
+        <link rel="manifest" href="./manifest.json" />
+        <title>Teuto Bodenfeuchtigkeitskarte</title>
+    </head>
+    <body>
+        <noscript>You need to enable JavaScript to run this app.</noscript>
+        <div id="root"></div>
+        <script type="module" src="./index.tsx"></script>
+    </body>
+</html>

src/index.tsx

@@ -1,6 +1,5 @@
 import "./index.css";
 import App from "./App";
-import reportWebVitals from "./reportWebVitals";
 import { initializeIcons } from "@fluentui/react";
 import { createRoot } from "react-dom/client";
 
@@ -9,8 +8,3 @@ initializeIcons();
 const container = document.getElementById("root");
 const root = createRoot(container!);
 root.render(<App />);
-
-// If you want to start measuring performance in your app, pass a function
-// to log results (for example: reportWebVitals(console.log))
-// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
-reportWebVitals();

tsconfig.json

@@ -1,20 +1,17 @@
 {
     "compilerOptions": {
-        "target": "es5",
-        "lib": ["dom", "dom.iterable", "esnext"],
-        "allowJs": true,
-        "skipLibCheck": true,
+        /* Visit https://aka.ms/tsconfig to read more about this file */
+        /* Language and Environment */
+        "target": "ES2022",
+        "jsx": "react-jsx",
+        /* Modules */
+        "module": "commonjs",
         "esModuleInterop": true,
-        "allowSyntheticDefaultImports": true,
-        "strict": true,
         "forceConsistentCasingInFileNames": true,
-        "noFallthroughCasesInSwitch": true,
-        "module": "esnext",
-        "moduleResolution": "node",
-        "resolveJsonModule": true,
         "isolatedModules": true,
-        "noEmit": true,
-        "jsx": "react-jsx"
+        /* Type Checking */
+        "strict": true,
+        "skipLibCheck": true
     },
-    "include": ["src"]
+    "include": ["src", "types"]
 }

types/images.d.ts

@@ -0,0 +1 @@
+declare module "*.png";