Use smaller preact instead of react

commaai · Nov 25, 2024 · 38b4053 · 38b4053
1 parent 8d85a49
commit 38b4053
Show file tree

Hide file tree

Showing 8 changed files with 54 additions and 68 deletions.
diff --git a/.eslintrc.json b/.eslintrc.json
@@ -6,10 +6,7 @@
     "node": true
   },
   "extends": [
-    "eslint:recommended",
-    "plugin:react/recommended",
-    "plugin:react/jsx-runtime",
-    "plugin:react-hooks/recommended"
+    "eslint:recommended"
   ],
   "ignorePatterns": [
     "node_modules",
@@ -25,24 +22,13 @@
       "version": "detect"
     }
   },
-  "plugins": [
-    "react-refresh"
-  ],
   "rules": {
     "no-constant-condition": [
       "error",
       {
         "checkLoops": false
       }
     ],
-    "no-inner-declarations": "off",
-    "react/jsx-no-target-blank": "off",
-    "react/prop-types": "off",
-    "react-refresh/only-export-components": [
-      "warn",
-      {
-        "allowConstantExport": true
-      }
-    ]
+    "no-inner-declarations": "off"
   }
 }
diff --git a/bun.lockb b/bun.lockb
diff --git a/index.html b/index.html
@@ -149,7 +149,7 @@ <h3>Other questions</h3>
       </main>
 
       <div id="root" class="lg:flex-1 h-[700px] lg:h-screen bg-gray-100 dark:bg-gray-800">
-        <p class="text-black dark:text-white">Loading...</p>
+        <div class="text-black dark:text-white">Loading...</div>
       </div>
 
       <div class="w-screen max-w-none p-12 md:p-16 prose dark:prose-invert bg-white dark:bg-gray-900 lg:hidden">
@@ -160,17 +160,17 @@ <h3>Other questions</h3>
     <script type="importmap">
       {
         "imports": {
-          "react": "https://cdn.jsdelivr.net/npm/[email protected]/+esm",
-          "react-dom": "https://cdn.jsdelivr.net/npm/[email protected]/+esm",
+          "preact": "node_modules/preact/dist/preact.mjs",
+          "preact/hooks": "node_modules/preact/hooks/dist/hooks.mjs",
           "comlink": "https://cdn.jsdelivr.net/npm/[email protected]/+esm",
           "crc-32": "https://cdn.jsdelivr.net/npm/[email protected]/+esm",
           "jssha": "https://cdn.jsdelivr.net/npm/[email protected]/+esm",
           "xz-decompress": "https://cdn.jsdelivr.net/npm/[email protected]/+esm"
         }
       }
     </script>
-    <link rel="modulepreload" href="https://cdn.jsdelivr.net/npm/[email protected]/+esm" />
-    <link rel="modulepreload" href="https://cdn.jsdelivr.net/npm/[email protected]/+esm" />
+    <link rel="modulepreload" href="node_modules/preact/dist/preact.mjs" />
+    <link rel="modulepreload" href="node_modules/preact/hooks/dist/hooks.mjs" />
     <link rel="modulepreload" href="https://cdn.jsdelivr.net/npm/[email protected]/+esm" />
     <link rel="modulepreload" href="https://cdn.jsdelivr.net/npm/[email protected]/+esm" />
     <link rel="modulepreload" href="https://cdn.jsdelivr.net/npm/[email protected]/+esm" />

diff --git a/package.json b/package.json
@@ -6,17 +6,16 @@
   "scripts": {
     "dev": "vite",
     "start": "python3 -m http.server 5173",
-    "lint": "eslint . --ext js,jsx --report-unused-disable-directives",
+    "lint": "eslint . --ext js --report-unused-disable-directives",
     "test": "vitest"
   },
   "engines": {
     "node": ">=20.11.0"
   },
-  "dependencies": {},
+  "dependencies": {
+    "preact": "^10.25.0"
+  },
   "devDependencies": {
-    "eslint": "^8.57.0",
-    "eslint-plugin-react": "^7.34.2",
-    "eslint-plugin-react-hooks": "^4.6.2",
-    "eslint-plugin-react-refresh": "^0.4.7"
+    "eslint": "^8.57.0"
   }
 }
diff --git a/src/app/Flash.js b/src/app/Flash.js
@@ -1,4 +1,5 @@
-import React, { useCallback, useState } from 'react'
+import { createElement, Fragment } from 'preact'
+import { useCallback, useState } from 'preact/hooks'
 
 import { Step, Error, useQdl } from '../utils/flash.js'
 
@@ -111,8 +112,8 @@ const isLinux = navigator.userAgent.toLowerCase().includes('linux');
 function LinearProgress({ value, barColor }) {
   if (value === -1 || value > 100) value = 100;
 
-  return React.createElement("div", { className: "relative w-full h-2 bg-gray-200 rounded-full overflow-hidden" },
-    React.createElement("div", {
+  return createElement("div", { className: "relative w-full h-2 bg-gray-200 rounded-full overflow-hidden" },
+    createElement("div", {
       className: `absolute top-0 bottom-0 left-0 w-full transition-all ${barColor}`,
       style: { transform: `translateX(${value - 100}%)` },
     })
@@ -121,39 +122,39 @@ function LinearProgress({ value, barColor }) {
 
 
 function USBIndicator() {
-  return React.createElement("div", { className: "flex flex-row gap-2" },
-    React.createElement("svg", {
+  return createElement("div", { className: "flex flex-row gap-2" },
+    createElement("svg", {
       xmlns: "http://www.w3.org/2000/svg",
       viewBox: "0 96 960 960",
       className: "text-green-500 dark:text-[#51ff00]",
       height: "24",
       width: "24",
     },
-      React.createElement("path", {
+      createElement("path", {
         fill: "currentColor",
         d: "M480 976q-32 0-52-20t-20-52q0-22 11-40t31-29V724H302q-24 0-42-18t-18-42V555q-20-9-31-26.609-11-17.608-11-40.108Q200 456 220 436t52-20q32 0 52 20t20 52.411Q344 511 333 528.5T302 555v109h148V324h-80l110-149 110 149h-80v340h148V560h-42V416h144v144h-42v104q0 24-18 42t-42 18H510v111q19.95 10.652 30.975 29.826Q552 884 552 904q0 32-20 52t-52 20Z",
       })
     ),
-    React.createElement("span", null, "Device connected")
+    createElement("span", null, "Device connected")
   );
 }
 
 
 function SerialIndicator({ serial }) {
-  return React.createElement("div", { className: "flex flex-row gap-2" },
-    React.createElement("span", null, "Serial:", React.createElement("span", { className: "ml-2 font-mono" }, serial || "unknown"))
+  return createElement("div", { className: "flex flex-row gap-2" },
+    createElement("span", null, "Serial:", createElement("span", { className: "ml-2 font-mono" }, serial || "unknown"))
   );
 }
 
 
 function DeviceState({ serial }) {
-  return React.createElement("div", {
+  return createElement("div", {
     className: "absolute bottom-0 m-0 lg:m-4 p-4 w-full sm:w-auto sm:min-w-[350px] sm:border sm:border-gray-200 dark:sm:border-gray-600 bg-white dark:bg-gray-700 text-black dark:text-white rounded-md flex flex-row gap-2",
     style: { left: "50%", transform: "translate(-50%, -50%)" },
   },
-    React.createElement(USBIndicator),
-    React.createElement("span", { className: "text-gray-400" }, "|"),
-    React.createElement(SerialIndicator, { serial })
+    createElement(USBIndicator),
+    createElement("span", { className: "text-gray-400" }, "|"),
+    createElement(SerialIndicator, { serial })
   );
 }
 
@@ -218,45 +219,44 @@ export default function Flash() {
     }, 1000);
   };
 
-
-  return React.createElement("div", { id: "flash", className: "relative flex flex-col gap-8 justify-center items-center h-full" },
-    React.createElement("div", {
+  return createElement("div", { id: "flash", className: "relative flex flex-col gap-8 justify-center items-center h-full" },
+    createElement("div", {
       className: `p-8 rounded-full ${bgColor}`,
       style: { cursor: onContinue ? "pointer" : "default" },
       onClick: handleContinue,
     },
-      React.createElement("img", {
+      createElement("img", {
         src: icon,
         alt: "cable",
         width: 128,
         height: 128,
         className: `${iconStyle} ${!error && step !== Step.DONE ? "animate-pulse" : ""}`,
       })
     ),
-    React.createElement("div", {
+    createElement("div", {
       className: "w-full max-w-3xl px-8 transition-opacity duration-300",
       style: { opacity: progress === -1 ? 0 : 1 },
     },
-      React.createElement(LinearProgress, { value: progress * 100, barColor: bgColor })
+      createElement(LinearProgress, { value: progress * 100, barColor: bgColor })
     ),
-    React.createElement("span", { className: "text-3xl dark:text-white font-mono font-light" }, title),
-    React.createElement("span", { className: "text-xl dark:text-white px-8 max-w-xl" }, description),
+    createElement("span", { className: "text-3xl dark:text-white font-mono font-light" }, title),
+    createElement("span", { className: "text-xl dark:text-white px-8 max-w-xl" }, description),
     (title === "Lost connection" || title === "Ready") && isLinux && (
-      React.createElement(React.Fragment, null,
-        React.createElement("span",
+      createElement(Fragment, null,
+        createElement("span",
           { className: "text-l dark:text-white px-2 max-w-xl" },
           "It seems that you're on Linux, make sure to run the script below in your terminal after plugging in your device."
         ),
-        React.createElement("div", { className: "relative mt-2 max-w-3xl" },
-          React.createElement("div", { className: "bg-gray-200 dark:bg-gray-800 rounded-md overflow-x-auto" },
-            React.createElement("div", { className: "relative" },
-              React.createElement("pre", { className: "font-mono text-sm text-gray-800 dark:text-gray-200 bg-gray-300 dark:bg-gray-700 rounded-md p-6 flex-grow max-w-m text-wrap" },
+        createElement("div", { className: "relative mt-2 max-w-3xl" },
+          createElement("div", { className: "bg-gray-200 dark:bg-gray-800 rounded-md overflow-x-auto" },
+            createElement("div", { className: "relative" },
+              createElement("pre", { className: "font-mono text-sm text-gray-800 dark:text-gray-200 bg-gray-300 dark:bg-gray-700 rounded-md p-6 flex-grow max-w-m text-wrap" },
                 detachScript.map((line, index) =>
-                  React.createElement("span", { key: index, className: "block" }, line)
+                  createElement("span", { key: index, className: "block" }, line)
                 )
               ),
-              React.createElement("div", { className: "absolute top-2 right-2" },
-                React.createElement("button", {
+              createElement("div", { className: "absolute top-2 right-2" },
+                createElement("button", {
                   onClick: () => {
                     navigator.clipboard.writeText(detachScript.join("\n"));
                     handleCopy();
@@ -270,12 +270,12 @@ export default function Flash() {
       )
     ),
     error && (
-      React.createElement("button", {
+      createElement("button", {
         className:
           "px-4 py-2 rounded-md bg-gray-200 hover:bg-gray-300 dark:bg-gray-700 dark:hover:bg-gray-600 text-gray-800 dark:text-gray-200 transition-colors",
         onClick: handleRetry,
       }, "Retry")
     ) || false,
-    connected && React.createElement(DeviceState, { connected, serial })
+    connected && createElement(DeviceState, { connected, serial })
   )
 }
diff --git a/src/main.js b/src/main.js
@@ -1,9 +1,10 @@
-import React from 'react'
-import ReactDOM from 'react-dom'
+import { h, render } from 'preact'
 import Flash from './app/Flash.js'
 
-ReactDOM.createRoot(document.getElementById('root')).render(
-  React.createElement(React.StrictMode, null,
-    React.createElement(Flash, null)
-  )
-)
+render(h(Flash, null), document.getElementById('root'))
+
+// ReactDOM.createRoot(document.getElementById('root')).render(
+//   React.createElement(React.StrictMode, null,
+//     React.createElement(Flash, null)
+//   )
+// )
diff --git a/src/utils/flash.js b/src/utils/flash.js
@@ -1,4 +1,4 @@
-import { useEffect, useRef, useState } from 'react'
+import { useEffect, useRef, useState } from 'preact/hooks'
 
 import { concatUint8Array } from '../QDL/utils.js'
 import { qdlDevice } from '../QDL/qdl.js'

diff --git a/src/utils/image.js b/src/utils/image.js
@@ -1,4 +1,4 @@
-import { useEffect, useRef } from 'react'
+import { useEffect, useRef } from 'preact/hooks'
 
 import * as Comlink from 'comlink'