diff --git a/.eslintrc.json b/.eslintrc.json
index dc9027b..8405abb 100644
--- 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,9 +22,6 @@
"version": "detect"
}
},
- "plugins": [
- "react-refresh"
- ],
"rules": {
"no-constant-condition": [
"error",
@@ -35,14 +29,6 @@
"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
index 5a38d44..7123a83 100755
Binary files a/bun.lockb and b/bun.lockb differ
diff --git a/index.html b/index.html
index 32b1225..241ce09 100644
--- a/index.html
+++ b/index.html
@@ -149,7 +149,7 @@
Other questions
-
Loading...
+
Loading...
@@ -160,8 +160,8 @@
Other questions
-
-
+
+
diff --git a/package.json b/package.json
index 16735ec..7a6178c 100644
--- 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
index d9b7b8e..4568af1 100644
--- 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,14 +219,13 @@ 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,
@@ -233,30 +233,30 @@ export default function Flash() {
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
index ef1ffbf..713a545 100644
--- 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)
- )
-)
\ No newline at end of file
+render(h(Flash, null), document.getElementById('root'))
+
+// ReactDOM.createRoot(document.getElementById('root')).render(
+// React.createElement(React.StrictMode, null,
+// React.createElement(Flash, null)
+// )
+// )
\ No newline at end of file
diff --git a/src/utils/flash.js b/src/utils/flash.js
index 405df98..7bb4155 100644
--- 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
index fd0951d..53674b0 100644
--- 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'