src/components/heart/index.css

@@ -3,7 +3,6 @@
 }
 
 @keyframes pulse {
-
 	0%,
 	100% {
 		transform: scale(1);

src/components/heart/index.tsx

@@ -58,7 +58,7 @@ export default () => {
 
     return (
         <>
-            <div style={heartrate === 0 ? "display:none" : `--bpm: ${heartrate};`} class="heart">
+            <div style={heartrate == 0 ? "display:none" : `--bpm: ${heartrate};`} class="heart">
                     ♥️
                     <br />
                     <span>{heartrate} BPM</span>

src/components/navbar/index.tsx

@@ -17,7 +17,7 @@ export default () => {
                     <span class="navbar-text">
                         IPv4 dot Army
                     </span>
-                    <div class="d-flex hstack gap-2">
+                    <div class="d-flex hstack gap-2" role="search">
                         <button type="button" class="btn btn-outline-success btn-sm"><Minus size={20} /></button>
                         <button type="button" class="btn btn-outline-warning btn-sm"><Minimize size={20} /></button>
                         <button type="button" class="btn btn-outline-danger btn-sm" onClick={close}><X size={20} /></button>

src/main.tsx

@@ -3,4 +3,4 @@ import './index.css'
 import 'halfmoon/css/halfmoon.min.css';
 import App from './components/app.tsx'
 
-render(<App />, document.getElementById('app') as HTMLElement || document.body)
+render(<App />, document.getElementById('app')!)

tsconfig.app.json

@@ -4,20 +4,14 @@
     "target": "ES2020",
     "useDefineForClassFields": true,
     "module": "ESNext",
-    "lib": [
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
-      "ES2020",
-      "DOM",
-      "DOM.Iterable"
-    ],
     "skipLibCheck": true,
     "paths": {
-      "react": [
+      "react": ["./node_modules/preact/compat/"],
-        "./node_modules/preact/compat/"
+      "react-dom": ["./node_modules/preact/compat/"]
-      ],
-      "react-dom": [
-        "./node_modules/preact/compat/"
-      ]
     },
+
+    /* Bundler mode */
     "moduleResolution": "bundler",
     "allowImportingTsExtensions": true,
     "isolatedModules": true,
@@ -25,13 +19,13 @@
     "noEmit": true,
     "jsx": "react-jsx",
     "jsxImportSource": "preact",
+
+    /* Linting */
     "strict": true,
     "noUnusedLocals": true,
     "noUnusedParameters": true,
     "noFallthroughCasesInSwitch": true,
     "noUncheckedSideEffectImports": true
   },
-  "include": [
+  "include": ["src"]
-    "src"
-  ]
 }

tsconfig.json

@@ -1,11 +1,7 @@
 {
   "files": [],
   "references": [
-    {
+    { "path": "./tsconfig.app.json" },
-      "path": "./tsconfig.app.json"
+    { "path": "./tsconfig.node.json" }
-    },
-    {
-      "path": "./tsconfig.node.json"
-    }
   ]
 }

tsconfig.node.json

@@ -2,23 +2,23 @@
   "compilerOptions": {
     "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
     "target": "ES2022",
-    "lib": [
+    "lib": ["ES2023"],
-      "ES2023"
-    ],
     "module": "ESNext",
     "skipLibCheck": true,
+
+    /* Bundler mode */
     "moduleResolution": "bundler",
     "allowImportingTsExtensions": true,
     "isolatedModules": true,
     "moduleDetection": "force",
     "noEmit": true,
+
+    /* Linting */
     "strict": true,
     "noUnusedLocals": true,
     "noUnusedParameters": true,
     "noFallthroughCasesInSwitch": true,
     "noUncheckedSideEffectImports": true
   },
-  "include": [
+  "include": ["vite.config.ts"]
-    "vite.config.ts"
-  ]
 }

vite.config.ts

@@ -17,7 +17,7 @@ export default defineConfig({
           })
         ]
       }
-    } : { transformer: "lightningcss" }
+    } : {transformer: "lightningcss"} 
   },
   build: {
     cssMinify: "lightningcss",