From 8a8cecd4bbd73bef4a18740a6526c27d8dd0521c Mon Sep 17 00:00:00 2001
From: 0x1eef <0x1eef@protonmail.com>
Date: Sat, 31 Aug 2024 01:23:41 -0300
Subject: [PATCH] Replace React with preact
---
package-lock.json | 50 +++++++++++++++-----------
package.json | 7 ++--
share/myip.wtf/CHANGELOG | 13 +++++++
src/js/components/App.tsx | 1 -
src/js/components/ErrorRenderer.tsx | 1 -
src/js/components/Footer.tsx | 2 +-
src/js/components/Loader.tsx | 1 -
src/js/components/ResponseRenderer.tsx | 2 +-
src/js/index.tsx | 5 ++-
tsconfig.json | 2 +-
webpack.common.js | 7 +++-
11 files changed, 56 insertions(+), 35 deletions(-)
create mode 100644 share/myip.wtf/CHANGELOG
diff --git a/package-lock.json b/package-lock.json
index 755c2d7..9292288 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,8 +8,7 @@
"name": "myip.wtf",
"version": "0.4.2",
"dependencies": {
- "react": "^18.3",
- "react-dom": "^18.3"
+ "preact": "^10.23.2"
},
"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",
- "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.7.tgz",
- "integrity": "sha512-LPP/3KorzCwBxfeUuZmaR6bG2kdeHSbe0P2tY3FLRU4vYrjYz5hI4QZwV0njUx3jeuKe67YukQ1LSPZBKDqO/Q==",
+ "version": "4.0.8",
+ "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.8.tgz",
+ "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",
- "resolved": "https://registry.npmjs.org/webpack/-/webpack-5.93.0.tgz",
- "integrity": "sha512-Y0m5oEY1LRuwly578VqluorkXbvXKh7U3rLoQCEO04M97ScRr44afGVkI0FQFsXzysk5OgFAxjZAb9rsGQVihA==",
+ "version": "5.94.0",
+ "resolved": "https://registry.npmjs.org/webpack/-/webpack-5.94.0.tgz",
+ "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",
diff --git a/package.json b/package.json
index df107a2..26f36a1 100644
--- a/package.json
+++ b/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"
}
}
diff --git a/share/myip.wtf/CHANGELOG b/share/myip.wtf/CHANGELOG
new file mode 100644
index 0000000..95c7789
--- /dev/null
+++ b/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
diff --git a/src/js/components/App.tsx b/src/js/components/App.tsx
index 95673b2..6af22a7 100644
--- a/src/js/components/App.tsx
+++ b/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";
diff --git a/src/js/components/ErrorRenderer.tsx b/src/js/components/ErrorRenderer.tsx
index 686dab4..c702a25 100644
--- a/src/js/components/ErrorRenderer.tsx
+++ b/src/js/components/ErrorRenderer.tsx
@@ -1,4 +1,3 @@
-import React from "react";
import { Footer } from "~/components/Footer";
export function ErrorRenderer({ error }: { error: Error }) {
diff --git a/src/js/components/Footer.tsx b/src/js/components/Footer.tsx
index 9c2bde0..803a40d 100644
--- a/src/js/components/Footer.tsx
+++ b/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 (
diff --git a/src/js/components/Loader.tsx b/src/js/components/Loader.tsx
index b53e418..95d4a10 100644
--- a/src/js/components/Loader.tsx
+++ b/src/js/components/Loader.tsx
@@ -1,4 +1,3 @@
-import React from "react";
import { Footer } from "~/components/Footer";
export function Loader() {
diff --git a/src/js/components/ResponseRenderer.tsx b/src/js/components/ResponseRenderer.tsx
index 4468f02..7af726e 100644
--- a/src/js/components/ResponseRenderer.tsx
+++ b/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;
diff --git a/src/js/index.tsx b/src/js/index.tsx
index b6ef900..2640e99 100644
--- a/src/js/index.tsx
+++ b/src/js/index.tsx
@@ -1,8 +1,7 @@
-import React from "react";
-import ReactDOM from "react-dom/client";
+import { render } from "preact";
import { App } from "~/components/App";
document.addEventListener("DOMContentLoaded", () => {
const el: HTMLElement = document.getElementById("root")!;
- ReactDOM.createRoot(el).render();
+ render(, el);
});
diff --git a/tsconfig.json b/tsconfig.json
index 6c289f7..0c706b6 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -5,7 +5,7 @@
"target": "ES2020",
"moduleResolution": "node",
"esModuleInterop": true,
- "jsx": "react",
+ "jsx": "react-jsx",
"lib": [ "ES2020", "DOM" ],
"baseUrl": "src/",
"paths": { "~/*": ["js/*"] },
diff --git a/webpack.common.js b/webpack.common.js
index 2ca1450..c37cf5f 100644
--- a/webpack.common.js
+++ b/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"]