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:prod
             - 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/

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,11 +6,7 @@
         "@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/node": "^20.4.9",
         "@types/react": "^18.2.18",
         "@types/react-dom": "^18.2.7",
         "date-fns": "^2.30.0",
@@ -19,21 +15,19 @@
         "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"
     },
     "scripts": {
-        "start": "react-scripts start",
-        "build": "react-scripts build",
-        "prod": "react-scripts build && serve -s build",
+        "start": "parcel src/index.html",
+        "prebuild": "rm -rf dist/",
+        "build": "parcel build src/index.html",
+        "prebuild:prod": "rm -rf dist/",
+        "build:prod": "NODE_ENV=production parcel build src/index.html --no-source-maps",
+        "serve": "npm run build && cd dist && serve",
+        "serve:prod": "npm run build:prod && 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",
         "prepare": "husky install"
     },
     "eslintConfig": {
@@ -46,23 +40,31 @@
     "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"
-        ]
-    },
+    "browserslist": "last 1 chrome version",
     "devDependencies": {
+        "@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/leaflet": "^1.9.3",
-        "eslint-config-prettier": "^9.0.0",
-        "husky": "^8.0.3",
-        "lint-staged": "^13.2.3",
-        "prettier": "^3.0.1"
+        "@types/prettier": "^2",
+        "@types/react": "^18",
+        "eslint": "^8.46.0",
+        "husky": "^7.0.4",
+        "lint-staged": ">=13",
+        "parcel": "^2.9.3",
+        "prettier": "^3.0.1",
+        "process": "^0.11.10",
+        "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>

tsconfig.json

@@ -1,20 +1,18 @@
 {
     "compilerOptions": {
-        "target": "es5",
-        "lib": ["dom", "dom.iterable", "esnext"],
-        "allowJs": true,
-        "skipLibCheck": true,
-        "esModuleInterop": true,
-        "allowSyntheticDefaultImports": true,
-        "strict": true,
-        "forceConsistentCasingInFileNames": true,
-        "noFallthroughCasesInSwitch": true,
-        "module": "esnext",
-        "moduleResolution": "node",
-        "resolveJsonModule": true,
-        "isolatedModules": true,
-        "noEmit": true,
-        "jsx": "react-jsx"
-    },
-    "include": ["src"]
+        /* Visit https://aka.ms/tsconfig to read more about this file */
+        /* Language and Environment */
+        "target": "es2016" /* Set the JavaScript language version for emitted JavaScript and include compatible library declarations. */,
+        // "jsx": "preserve",                                /* Specify what JSX code is generated. */
+        "jsx": "react-jsx",
+
+        /* Modules */
+        "module": "commonjs" /* Specify what module code is generated. */,
+        "esModuleInterop": true /* Emit additional JavaScript to ease support for importing CommonJS modules. This enables 'allowSyntheticDefaultImports' for type compatibility. */,
+        "forceConsistentCasingInFileNames": true /* Ensure that casing is correct in imports. */,
+
+        /* Type Checking */
+        "strict": true /* Enable all strict type-checking options. */,
+        "skipLibCheck": true /* Skip type checking all .d.ts files. */
+    }
 }