Replace React with preact

package-lock.json

@@ -8,8 +8,7 @@
       "name": "myip.wtf",
       "version": "0.4.2",
       "dependencies": {
-        "react": "^18.3",
+        "preact": "^10.23.2"
-        "react-dom": "^18.3"
       },
       "devDependencies": {
         "@testing-library/jest-dom": "^6.4",
@@ -1973,22 +1972,13 @@
       "integrity": "sha512-gi6WQJ7cHRgZxtkQEoyHMppPjq9Kxo5Tjn2prSKDSmZrCz8TZ3jSRCeTJm+WoM+oB0WG37bRqLzaaU3q7JypGg==",
       "dev": true,
       "license": "MIT",
+      "optional": true,
+      "peer": true,
       "dependencies": {
         "@types/estree": "*",
         "@types/json-schema": "*"
       }
     },
-    "node_modules/@types/eslint-scope": {
-      "version": "3.7.7",
-      "resolved": "https://registry.npmjs.org/@types/eslint-scope/-/eslint-scope-3.7.7.tgz",
-      "integrity": "sha512-MzMFlSLBqNF2gcHWO0G1vP/YQyfvrxZ0bF+u7mzUdZ1/xK4A4sru+nraZz5i3iEIk1l1uyicaDVTB4QbbEkAYg==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@types/eslint": "*",
-        "@types/estree": "*"
-      }
-    },
     "node_modules/@types/estree": {
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.5.tgz",
@@ -6405,6 +6395,7 @@
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
       "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==",
+      "dev": true,
       "license": "MIT"
     },
     "node_modules/js-yaml": {
@@ -6647,7 +6638,9 @@
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
       "integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==",
+      "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "js-tokens": "^3.0.0 || ^4.0.0"
       },
@@ -6740,9 +6733,9 @@
       }
     },
     "node_modules/micromatch": {
-      "version": "4.0.7",
+      "version": "4.0.8",
-      "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.7.tgz",
+      "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.8.tgz",
-      "integrity": "sha512-LPP/3KorzCwBxfeUuZmaR6bG2kdeHSbe0P2tY3FLRU4vYrjYz5hI4QZwV0njUx3jeuKe67YukQ1LSPZBKDqO/Q==",
+      "integrity": "sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -7214,6 +7207,16 @@
         "node": ">=8"
       }
     },
+    "node_modules/preact": {
+      "version": "10.23.2",
+      "resolved": "https://registry.npmjs.org/preact/-/preact-10.23.2.tgz",
+      "integrity": "sha512-kKYfePf9rzKnxOAKDpsWhg/ysrHPqT+yQ7UW4JjdnqjFIeNUnNcEJvhuA8fDenxAGWzUqtd51DfVg7xp/8T9NA==",
+      "license": "MIT",
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/preact"
+      }
+    },
     "node_modules/prelude-ls": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.2.1.tgz",
@@ -7373,7 +7376,9 @@
       "version": "18.3.1",
       "resolved": "https://registry.npmjs.org/react/-/react-18.3.1.tgz",
       "integrity": "sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ==",
+      "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "loose-envify": "^1.1.0"
       },
@@ -7385,7 +7390,9 @@
       "version": "18.3.1",
       "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.3.1.tgz",
       "integrity": "sha512-5m4nQKp+rZRb09LNH59GM4BxTh9251/ylbKIbpe7TpGxfJ+9kv6BLkLBXIjjspbgbnIBNqlI23tRnTWT0snUIw==",
+      "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "loose-envify": "^1.1.0",
         "scheduler": "^0.23.2"
@@ -7628,7 +7635,9 @@
       "version": "0.23.2",
       "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.23.2.tgz",
       "integrity": "sha512-UOShsPwz7NrMUqhR6t0hWjFduvOzbtv7toDH1/hIrfRNIDBnnBWd0CwJTGvTpngVlmwGCdP9/Zl/tVrDqcuYzQ==",
+      "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "loose-envify": "^1.1.0"
       }
@@ -8476,13 +8485,12 @@
       }
     },
     "node_modules/webpack": {
-      "version": "5.93.0",
+      "version": "5.94.0",
-      "resolved": "https://registry.npmjs.org/webpack/-/webpack-5.93.0.tgz",
+      "resolved": "https://registry.npmjs.org/webpack/-/webpack-5.94.0.tgz",
-      "integrity": "sha512-Y0m5oEY1LRuwly578VqluorkXbvXKh7U3rLoQCEO04M97ScRr44afGVkI0FQFsXzysk5OgFAxjZAb9rsGQVihA==",
+      "integrity": "sha512-KcsGn50VT+06JH/iunZJedYGUJS5FGjow8wb9c0v5n1Om8O1g4L6LjtfxwlXIATopoQu+vOXXa7gYisWxCoPyg==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@types/eslint-scope": "^3.7.3",
         "@types/estree": "^1.0.5",
         "@webassemblyjs/ast": "^1.12.1",
         "@webassemblyjs/wasm-edit": "^1.12.1",
@@ -8491,7 +8499,7 @@
         "acorn-import-attributes": "^1.9.5",
         "browserslist": "^4.21.10",
         "chrome-trace-event": "^1.0.2",
-        "enhanced-resolve": "^5.17.0",
+        "enhanced-resolve": "^5.17.1",
         "es-module-lexer": "^1.2.1",
         "eslint-scope": "5.1.1",
         "events": "^3.2.0",

package.json

@@ -4,10 +4,6 @@
   "webExt": {
     "sourceDir": "build/production"
   },
-  "dependencies": {
-    "react": "^18.3",
-    "react-dom": "^18.3"
-  },
   "devDependencies": {
     "@testing-library/jest-dom": "^6.4",
     "@testing-library/react": "^16.0",
@@ -36,5 +32,8 @@
     "build:development": "npx webpack --config webpack.development.js",
     "test": "npx jest test",
     "eslint": "npx eslint src/"
+  },
+  "dependencies": {
+    "preact": "^10.23.2"
   }
 }

share/myip.wtf/CHANGELOG

@@ -0,0 +1,13 @@
+# -*- mode: org -*-
+
+** vNEXT
+
+**** Replace React with preact
+This change replaces React with a lightweight alternative
+known as preact
+
+**** eslint v9
+This change upgrades our version of eslint to v9
+
+**** Fix ~$ npm outdated~
+This change upgrades outdated dependencies

src/js/components/App.tsx

@@ -1,4 +1,3 @@
-import React from "react";
 import { ErrorRenderer } from "~/components/ErrorRenderer";
 import { ResponseRenderer } from "~/components/ResponseRenderer";
 import { Loader } from "~/components/Loader";

src/js/components/ErrorRenderer.tsx

@@ -1,4 +1,3 @@
-import React from "react";
 import { Footer } from "~/components/Footer";
 
 export function ErrorRenderer({ error }: { error: Error }) {

src/js/components/Footer.tsx

@@ -1,4 +1,4 @@
-import React, { ReactNode } from "react";
+import type { ReactNode } from "react";
 
 export function Footer({ children }: { children: ReactNode }) {
   return (

src/js/components/Loader.tsx

@@ -1,4 +1,3 @@
-import React from "react";
 import { Footer } from "~/components/Footer";
 
 export function Loader() {

src/js/components/ResponseRenderer.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, ReactNode } from "react";
+import { useEffect, ReactNode } from "react";
 import { TResponse } from "~/lib/response";
 import { Footer } from "~/components/Footer";
 type TFunction = typeof chrome.i18n.getMessage;

src/js/index.tsx

@@ -1,8 +1,7 @@
-import React from "react";
+import { render } from "preact";
-import ReactDOM from "react-dom/client";
 import { App } from "~/components/App";
 
 document.addEventListener("DOMContentLoaded", () => {
   const el: HTMLElement = document.getElementById("root")!;
-  ReactDOM.createRoot(el).render(<App />);
+  render(<App />, el);
 });

tsconfig.json

@@ -5,7 +5,7 @@
     "target": "ES2020",
     "moduleResolution": "node",
     "esModuleInterop": true,
-    "jsx": "react",
+    "jsx": "react-jsx",
     "lib": [ "ES2020", "DOM" ],
     "baseUrl": "src/",
     "paths": { "~/*": ["js/*"] },

webpack.common.js

@@ -12,7 +12,12 @@ module.exports = {
     path: path.resolve(__dirname, "build")
   },
   resolve: {
-    alias: { "~": [path.resolve("src/js/")] },
+    alias: {
+      "~": [path.resolve("src/js/")],
+      "react": "preact/compat",
+      "react-dom": "preact/compat",
+      "react/jsx-runtime": "preact/jsx-runtime",
+    },
     roots: [path.resolve("src/js"), path.resolve("node_modules")],
     modules: [path.resolve("src/js"), path.resolve("node_modules")],
     extensions: [".ts", ".tsx"]