formatting

src/components/heart/index.css

@@ -3,6 +3,7 @@
 }
 
 @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" role="search">
+                    <div class="d-flex hstack gap-2">
                         <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')!)
+render(<App />, document.getElementById('app') as HTMLElement || document.body)

tsconfig.app.json

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

tsconfig.json

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

tsconfig.node.json

@@ -2,23 +2,23 @@
   "compilerOptions": {
     "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
     "target": "ES2022",
-    "lib": ["ES2023"],
+    "lib": [
+      "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": ["vite.config.ts"]
+  "include": [
+    "vite.config.ts"
+  ]
 }

vite.config.ts

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