⬆️ Packages upgraded

.gitignore

@@ -11,8 +11,9 @@
 /coverage
 
 # production
-/build
-styles.compiled.css
+/[Bb]uild
+/[Dd]ist
+[Ss]tyles.[Cc]ompiled.css
 
 # misc
 .DS_Store

README.md

@@ -1 +1,33 @@
-[![Node.js CI](https://github.com/mohammad-hosein-shahpouri/RequestInfo/actions/workflows/node.js.yml/badge.svg)](https://github.com/mohammad-hosein-shahpouri/RequestInfo/actions/workflows/node.js.yml)
+# Getting Started with Vite
+[![Node.js CI](https://github.com/mohammad-hosein-shahpouri/RequestInfo/actions/workflows/node.js.yml/badge.svg)](https://github.com/mohammad-hosein-shahpouri/RequestInfo/actions/workflows/node.js.yml)
+This project was bootstrapped with [Vite](https://vitejs.dev/).
+
+## Available Scripts
+
+In the project directory, you can run:
+
+### `npm run dev`
+
+Runs the app in the development mode.\
+Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
+
+The page will use hot module replacement if you make edits.\
+You will also see any lint errors in the console.
+
+### `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.
+
+The build is minified and the filenames include the hashes.\
+Your app is ready to be deployed!
+
+### `npm run preview`
+
+Runs the app in the development mode.
+
+## Learn More
+
+You can learn more in the [Vite documentation](https://vitejs.dev/guide/).
+
+To learn React, check out the [React documentation](https://reactjs.org/).

index.html

@@ -25,7 +25,7 @@
         </div>
     </div>
 
-    <script src="/src/index.tsx" type="module"></script>
+    <script src="/src/main.tsx" type="module"></script>
 </body>
 
 </html>

package.json

@@ -7,24 +7,23 @@
         "@fortawesome/fontawesome-svg-core": "^6.1.1",
         "@fortawesome/free-brands-svg-icons": "^6.1.1",
         "@fortawesome/free-solid-svg-icons": "^6.1.1",
-        "@fortawesome/react-fontawesome": "^0.1.18",
-        "dotenv": "^16.0.1",
+        "@fortawesome/react-fontawesome": "^0.2.0",
         "leaflet": "^1.8.0",
-        "react": "^18.1.0",
+        "react": "^18.2.0",
         "react-device-detect": "^2.2.2",
-        "react-dom": "^18.1.0"
+        "react-dom": "^18.2.0"
     },
     "devDependencies": {
-        "@types/leaflet": "^1.7.10",
-        "@types/node": "^18.0.0",
-        "@types/react": "^18.0.10",
-        "@types/react-dom": "^18.0.5",
-        "@vitejs/plugin-react": "^1.3.2",
+        "@types/leaflet": "^1.7.11",
+        "@types/node": "^18.0.6",
+        "@types/react": "^18.0.15",
+        "@types/react-dom": "^18.0.6",
+        "@vitejs/plugin-react": "^2.0.0",
         "gh-pages": "^4.0.0",
-        "tailwindcss": "^3.0.24",
-        "typescript": "^4.7.2",
-        "vite": "^2.9.12",
-        "vite-tsconfig-paths": "^3.5.0"
+        "tailwindcss": "^3.1.6",
+        "typescript": "^4.7.4",
+        "vite": "^3.0.2",
+        "vite-plugin-compression": "^0.5.1"
     },
     "scripts": {
         "watch-css": "npx tailwindcss -i ./src/assets/styles/Styles.css -o ./public/styles.compiled.css --watch",
@@ -39,17 +38,5 @@
     },
     "eslintConfig": {
         "extends": "react-app"
-    },
-    "browserslist": {
-        "production": [
-            ">0.2%",
-            "not dead",
-            "not op_mini all"
-        ],
-        "development": [
-            "last 1 chrome version",
-            "last 1 firefox version",
-            "last 1 safari version"
-        ]
     }
-}
+}

public/sw.js

@@ -1,22 +1,24 @@
-const cacheKey = "pwa-cache-v1";
+const cacheKey = "pwa-cache-v1.0.1";
 var urlsToCache = [
     "/RequestInfo/",
     "/RequestInfo/index.html",
     "/RequestInfo/styles.compiled.css",
+    "/RequestInfo/assets/styles.compiled.css.gz",
     "/RequestInfo/manifest.json",
     "/RequestInfo/favicon.svg",
     "/RequestInfo/earth-dark.svg",
     "/RequestInfo/earth-light.svg",
-
-    "/RequestInfo/assets/index.9c30d96e.js",
-    "/RequestInfo/assets/index.75f9b5c1.css",
+    "/RequestInfo/assets/index.5f014e0e.js",
+    "/RequestInfo/assets/index.5f014e0e.js.gz",
+    "/RequestInfo/assets/index.d8313b66.css",
+    "/RequestInfo/assets/index.d8313b66.css.gz",
 ];
 
 self.addEventListener("install", (e) => {
-    // const preCache = async() => {
-    //     const cache = await caches.open(cacheKey);
-    //     return cache.addAll(urlsToCache);
-    // };
+    const preCache = async() => {
+        const cache = await caches.open(cacheKey);
+        return cache.addAll(urlsToCache);
+    };
 
     e.waitUntil(caches.open(cacheKey).then((c) => c.addAll(urlsToCache)));
 });
@@ -25,37 +27,37 @@ self.addEventListener("fetch", (event) => {
     let url = event.request.url.indexOf(self.location.origin) !== -1 ?
         event.request.url.split(`${self.location.origin}/`)[1] : event.request.url;
 
-    //  let isFileCached = $FILES.indexOf(url) !== -1;
+    let isFileCached = urlsToCache.indexOf(url) !== -1;
 
-    // if (isFileCached) {
-    event.respondWith(
-        caches
-        .open(cacheKey)
-        .then((cache) => {
-            return cache.match(url).then((response) => {
-                if (response) {
-                    return response;
-                }
-                throw Error("There is not response for such request", url);
-            });
-        })
-        .catch((error) => {
-            return fetch(event.request);
-        })
-    );
-    //}
+    if (isFileCached) {
+        event.respondWith(
+            caches
+            .open(cacheKey)
+            .then((cache) => {
+                return cache.match(url).then((response) => {
+                    if (response) {
+                        return response;
+                    }
+                    throw Error("There is not response for such request", url);
+                });
+            })
+            .catch((error) => {
+                return fetch(event.request);
+            })
+        );
+    }
 
-    // e.respondWith(
-    //   (async function () {
-    //     const cache = await caches.open(cacheKey);
-    //     const cachedResponse = await cache.match(e.request);
-    //     if (cachedResponse) {
-    //       e.waitUntil(cache.add(e.request));
-    //       return cachedResponse;
-    //     }
-    //     return fetch(e.request);
-    //   })()
-    // );
+    e.respondWith(
+        (async function() {
+            const cache = await caches.open(cacheKey);
+            const cachedResponse = await cache.match(e.request);
+            if (cachedResponse) {
+                e.waitUntil(cache.add(e.request));
+                return cachedResponse;
+            }
+            return fetch(e.request);
+        })()
+    );
 });
 
 self.addEventListener("activate", (e) => {

src/App.tsx

@@ -2,10 +2,10 @@ import { library } from "@fortawesome/fontawesome-svg-core";
 import { faReact } from "@fortawesome/free-brands-svg-icons";
 import { faHeart,faCoffee } from "@fortawesome/free-solid-svg-icons";
 import React, {  useState } from "react";
-import { Layout } from "./components/Layout";
-import { NetworkInfo } from "./components/NetworkInfo";
-import { ApiResponseType } from "./utils/models/ApiResponse";
-import { NetworkInfoContext } from "./utils/models/Context";
+import { Layout } from "components/Layout";
+import { NetworkInfo } from "components/NetworkInfo";
+import { ApiResponseType } from "utils/models/ApiResponse";
+import { NetworkInfoContext } from "utils/models/Context";
 
 library.add(faReact, faHeart, faCoffee);
 

src/components/History.tsx

@@ -1,6 +1,6 @@
 import { Fragment } from "react";
-import { GetHistory } from "../utils/history/History";
-import { History as HistoryModel } from "../utils/models/History";
+import { GetHistory } from "utils/history/History";
+import { History as HistoryModel } from "utils/models/History";
 
 export function History() {
   var history = GetHistory();

src/components/NetworkInfo.tsx

@@ -5,7 +5,7 @@ import React, {
   useEffect,
   useRef,
 } from "react";
-import { NetworkInfoContext } from "../utils/models/Context";
+import { NetworkInfoContext } from "utils/models/Context";
 import "leaflet/dist/leaflet.css";
 import { TimeInfo } from "./TimeInfo";
 import { ClientInfo } from "./ClientInfo";

src/components/TimeInfo.tsx

@@ -1,5 +1,5 @@
 import { Fragment, useContext } from "react";
-import { NetworkInfoContext } from "../utils/models/Context";
+import { NetworkInfoContext } from "utils/models/Context";
 
 export function TimeInfo() {
   const { Info } = useContext(NetworkInfoContext);

src/index.tsx → src/main.tsx

@@ -1,10 +1,9 @@
 import React, { StrictMode } from "react";
 import { createRoot } from "react-dom/client";
-import { App } from "./App";
-import { GetInfoAsync } from "./utils/request/NetworkInformation";
-import { AddToHistory } from "./utils/history/History";
-import { RegisterServiceWorker } from "./utils/ServiceWorker";
-//require("dotenv").config();
+import { App } from "App";
+import { GetInfoAsync } from "utils/request/NetworkInformation";
+import { AddToHistory } from "utils/history/History";
+import { RegisterServiceWorker } from "utils/ServiceWorker";
 
 const container = document.getElementById("app")!;
 

tsconfig.json

@@ -1,31 +1,22 @@
 {
   "compilerOptions": {
-    "esModuleInterop": true,
-    "allowJs": true,
+    "allowJs": false,
     "allowSyntheticDefaultImports": true,
+    "baseUrl": "./src",
+    "esModuleInterop": true,
     "forceConsistentCasingInFileNames": true,
     "isolatedModules": true,
-    "jsx": "preserve",
-    "lib": [
-      "ES2015",
-      "DOM"
-    ],
-    "module": "esnext",
+    "jsx": "react-jsx",
+    "lib": [ "DOM", "DOM.Iterable", "ESNext" ],
+    "module": "ESNext",
     "moduleResolution": "Node",
     "noEmit": true,
-    "noEmitOnError": true,
-    "noFallthroughCasesInSwitch": true,
-    "noImplicitAny": true,
     "resolveJsonModule": true,
-    "sourceMap": true,
+    "skipLibCheck": true,
     "strict": true,
-    "target": "ES5",
-    "skipLibCheck": true
+    "target": "ESNext",
+    "useDefineForClassFields": true
   },
-  "include": [
-    "src"
-  ],
-  "exclude": [
-    "node_modules",
-  ]
+  "include": [ "src" ],
+  "references": [ { "path": "./tsconfig.node.json" } ]
 }

vite.config.ts

@@ -1,5 +1,16 @@
 import { defineConfig } from 'vite'
 import react from '@vitejs/plugin-react'
+import viteCompression from 'vite-plugin-compression';
+import { readdirSync } from 'fs'
+import { resolve, join } from 'path';
+
+const absolutePathAliases: { [key: string]: string } = {};
+const srcPath = resolve('./src');
+const srcRootContent = readdirSync(srcPath, { withFileTypes: true }).map((dirent) => dirent.name.replace(/(\.ts){1}(x?)/, ''));
+
+srcRootContent.forEach((directory) => {
+  absolutePathAliases[directory] = join(srcPath, directory);
+});
 
 // https://vitejs.dev/config/
 export default defineConfig({
@@ -8,7 +19,15 @@ export default defineConfig({
   build: {
     outDir: "build"
   },
-  plugins: [react()],
+  resolve: {
+    alias: {
+      ...absolutePathAliases
+    }
+  },
+  server:{
+    port:  Number(process.env.PORT) || 3000,
+  },
+  plugins: [react(), viteCompression()],
   optimizeDeps: {
     entries: ["node_modules"]
   }