fix(code) to adapt the biome recommended lint rules

src/ace/commands.js

@@ -200,9 +200,9 @@ const commands = [
 		name: "cut",
 		description: "Cut",
 		exec(editor) {
-			let cutLine =
+			const cutLine =
 				editor.$copyWithEmptySelection && editor.selection.isEmpty();
-			let range = cutLine
+			const range = cutLine
 				? editor.selection.getLineRange()
 				: editor.selection.getRange();
 			editor._emit("cut", range);
@@ -285,19 +285,19 @@ const commands = [
 		name: "increaseFontSize",
 		description: "Increase font size",
 		exec(editor) {
-			let size = Number.parseInt(editor.getFontSize(), 10) || 12;
+			const size = Number.parseInt(editor.getFontSize(), 10) || 12;
 			editor.setFontSize(size + 1);
-			settings.value.fontSize = size + 1 + "px";
+			settings.value.fontSize = `${size + 1}px`;
 			settings.update(false);
 		},
 	},
 	{
 		name: "decreaseFontSize",
 		description: "Decrease font size",
 		exec(editor) {
-			let size = Number.parseInt(editor.getFontSize(), 10) || 12;
+			const size = Number.parseInt(editor.getFontSize(), 10) || 12;
 			editor.setFontSize(Math.max(size - 1 || 1));
-			settings.value.fontSize = Math.max(size - 1 || 1) + "px";
+			settings.value.fontSize = `${Math.max(size - 1 || 1)}px`;
 			settings.update(false);
 		},
 	},
@@ -344,9 +344,9 @@ const commands = [
 ];
 
 export function setCommands(editor) {
-	commands.forEach((command) => {
+	for (const command of commands) {
 		editor.commands.addCommand(command);
-	});
+	}
 }
 
 /**
@@ -368,7 +368,7 @@ export async function setKeyBindings({ commands }) {
 		await resetKeyBindings();
 	}
 
-	Object.keys(commands.byName).forEach((name) => {
+	for (const name of Object.keys(commands.byName)) {
 		const shortcut = keyboardShortcuts[name];
 		const command = commands.byName[name];
 
@@ -379,7 +379,7 @@ export async function setKeyBindings({ commands }) {
 		// not chekiang if shortcut is empty because it can be used to remove shortcut
 		command.bindKey = { win: shortcut?.key ?? null };
 		commands.addCommand(command);
-	});
+	}
 }
 
 /**

src/ace/modelist.js

@@ -5,11 +5,11 @@ export function initModes() {
 	ace.define(
 		"ace/ext/modelist",
 		["require", "exports", "module"],
-		function (require, exports, module) {
+		(require, exports, module) => {
 			module.exports = {
 				getModeForPath(path) {
 					let mode = modesByName.text;
-					let fileName = path.split(/[\/\\]/).pop();
+					const fileName = path.split(/[\/\\]/).pop();
 					for (const iMode of modes) {
 						if (iMode.supportsFile?.(fileName)) {
 							mode = iMode;
@@ -81,9 +81,8 @@ class Mode {
 
 		if (/\^/.test(extensions)) {
 			re =
-				extensions.replace(/\|(\^)?/g, function (a, b) {
-					return "$|" + (b ? "^" : "^.*\\.");
-				}) + "$";
+				extensions.replace(/\|(\^)?/g, (a, b) => "$|" + (b ? "^" : "^.*\\.")) +
+				"$";
 		} else {
 			re = "^.*\\.(" + extensions + ")$";
 		}

src/ace/supportedModes.js

@@ -211,9 +211,9 @@ const languageNames = {
 	AutoHotKey: "AutoHotkey/AutoIt",
 };
 
-Object.keys(modeList).forEach((key) => {
+for (const key of Object.keys(modeList)) {
 	const extensions = modeList[key];
 	const caption = languageNames[key];
 
 	addMode(key, extensions, caption);
-});
+}

src/ace/touchHandler.js

@@ -548,9 +548,9 @@ export default function addTouchListeners(editor, minimal, onclick) {
 	 * @param {number} y
 	 */
 	function scroll(x, y) {
-		let direction = reverseScrolling ? 1 : -1;
-		let scrollX = direction * x;
-		let scrollY = direction * y;
+		const direction = reverseScrolling ? 1 : -1;
+		const scrollX = direction * x;
+		const scrollY = direction * y;
 
 		renderer.scrollBy(scrollX, scrollY);
 	}

src/components/WebComponents/wcPage.js

@@ -34,23 +34,23 @@ export default class WCPage extends HTMLElement {
 				this.onwilldisconnect();
 			}
 
-			this.#on.willdisconnect.forEach((cb) => cb.call(this));
+			for (const cb of this.#on.willdisconnect) cb.call(this);
 		};
 
 		this.handler.onRestore = () => {
 			if (typeof this.onwillconnect === "function") {
 				this.onwillconnect();
 			}
 
-			this.#on.willconnect.forEach((cb) => cb.call(this));
+			for (const cb of this.#on.willconnect) cb.call(this);
 		};
 
 		this.#leadBtn = (
 			<span
 				className="icon arrow_back"
 				onclick={() => this.hide.call(this)}
 				attr-action="go-back"
-			></span>
+			/>
 		);
 
 		this.#header = tile({
@@ -61,7 +61,7 @@ export default class WCPage extends HTMLElement {
 	}
 
 	appendBody(...$els) {
-		let $main = this.body;
+		const $main = this.body;
 		if (!$main) return;
 		for (const $el of $els) {
 			$main.append($el);
@@ -81,12 +81,12 @@ export default class WCPage extends HTMLElement {
 	connectedCallback() {
 		this.classList.remove("hide");
 		if (typeof this.onconnect === "function") this.onconnect();
-		this.#on.show.forEach((cb) => cb.call(this));
+		for (const cb of this.#on.show) cb.call(this);
 	}
 
 	disconnectedCallback() {
 		if (typeof this.ondisconnect === "function") this.ondisconnect();
-		this.#on.hide.forEach((cb) => cb.call(this));
+		for (const cb of this.#on.hide) cb.call(this);
 	}
 
 	/**
@@ -187,7 +187,7 @@ export default class WCPage extends HTMLElement {
 	#addHeaderOrAssignHeader() {
 		if (!this.classList.contains("primary")) {
 			this.#append(this.#header);
-			this.#append(<div className="main"></div>);
+			this.#append(<div className="main" />);
 		} else {
 			this.#header = this.get("header");
 			if (this.#header) {
@@ -213,7 +213,7 @@ class PageHandler {
 		this.onhide = this.onhide.bind(this);
 		this.onshow = this.onshow.bind(this);
 
-		this.$replacement = <span className="page-replacement"></span>;
+		this.$replacement = <span className="page-replacement" />;
 		this.$replacement.handler = this;
 
 		this.$el.on("hide", this.onhide);
@@ -262,7 +262,7 @@ class PageHandler {
  */
 function handlePagesForSmoothExperience() {
 	const $pages = [...tag.getAll("wc-page")];
-	for (let $page of $pages.slice(0, -1)) {
+	for (const $page of $pages.slice(0, -1)) {
 		$page.handler.replaceEl();
 	}
 }

src/components/audioPlayer/index.js

@@ -25,19 +25,17 @@ export default class AudioPlayer {
 		const audioPlayer = (
 			<div className="audio-player">
 				<button
+					type="button"
 					ref={this.elements.playBtn}
 					className="play-btn"
 					ariaLabel="Play/Pause"
 				>
-					<span ref={this.elements.playIcon} className="icon play_arrow"></span>
+					<span ref={this.elements.playIcon} className="icon play_arrow" />
 				</button>
 
 				<div ref={this.elements.timeline} className="timeline">
-					<div ref={this.elements.progress} className="progress"></div>
-					<div
-						ref={this.elements.progressHandle}
-						className="progress-handle"
-					></div>
+					<div ref={this.elements.progress} className="progress" />
+					<div ref={this.elements.progressHandle} className="progress-handle" />
 				</div>
 
 				<div ref={this.elements.timeDisplay} className="time">
@@ -46,10 +44,11 @@ export default class AudioPlayer {
 
 				<div className="volume-control">
 					<button
+						type="button"
 						ref={this.elements.volumeBtn}
 						className="volume-btn"
 						ariaLabel="Volume"
-					></button>
+					/>
 				</div>
 			</div>
 		);

src/components/checkbox/index.js

@@ -40,7 +40,7 @@ function Checkbox(text, checked, name, id, type, ref, size) {
 				name={name}
 				id={id}
 			/>
-			<span style={{ height: size, width: size }} className="box"></span>
+			<span style={{ height: size, width: size }} className="box" />
 			<span>{text}</span>
 		</label>
 	);

src/components/contextmenu/index.js

@@ -67,9 +67,9 @@ export default function Contextmenu(content, options) {
 	});
 
 	if (Array.isArray(options.items)) {
-		options.items.forEach(([text, action]) => {
+		for (const [text, action] of options.items) {
 			$el.append(<li data-action={action}>{text}</li>);
-		});
+		}
 	}
 
 	if (!options.innerHTML) addTabindex();
@@ -90,17 +90,17 @@ export default function Contextmenu(content, options) {
 		if (options.toggler) {
 			const client = options.toggler.getBoundingClientRect();
 			if (!options.top && !options.bottom) {
-				$el.style.top = client.top + "px";
+				$el.style.top = `${client.top}px`;
 			}
 			if (!options.left && !options.right) {
-				$el.style.right = innerWidth - client.right + "px";
+				$el.style.right = `${innerWidth - client.right}px`;
 			}
 		}
 
 		app.append($el, $mask);
 
 		const $firstChild = $el.firstChild;
-		if ($firstChild && $firstChild.focus) $firstChild.focus();
+		if ($firstChild?.focus) $firstChild.focus();
 	}
 
 	function hide() {
@@ -121,7 +121,7 @@ export default function Contextmenu(content, options) {
 	function addTabindex() {
 		/**@type {Array<HTMLLIElement>} */
 		const children = [...$el.children];
-		for (let $el of children) $el.tabIndex = "0";
+		for (const $el of children) $el.tabIndex = "0";
 	}
 
 	function destroy() {

src/components/inputhints/index.js

@@ -140,12 +140,12 @@ export default function inputhints($input, hints, onSelect) {
 		const { value: toTest } = this;
 		const matched = [];
 		const regexp = new RegExp(toTest, "i");
-		hints.forEach((hint) => {
+		for (const hint of hints) {
 			const { value, text } = hint;
 			if (regexp.test(value) || regexp.test(text)) {
 				matched.push(hint);
 			}
-		});
+		}
 		updateUl(matched);
 	}
 
@@ -360,7 +360,7 @@ function Hint({ hint }) {
 		text = hint.text;
 	}
 
-	return <li attr-action="hint" attr-value={value} innerHTML={text}></li>;
+	return <li attr-action="hint" attr-value={value} innerHTML={text} />;
 }
 
 /**

src/components/page.js

@@ -9,7 +9,7 @@ import WCPage from "./WebComponents/wcPage";
  * @returns {WCPage}
  */
 function Page(title, options = {}) {
-	let page = <wc-page />;
+	const page = <wc-page />;
 	page.append = page.appendBody;
 	page.initializeIfNotAlreadyInitialized();
 	page.settitle(title);

src/components/quickTools/footer.js

@@ -65,14 +65,11 @@ export const SearchRow2 = ({ inputRef, posRef, totalRef }) => (
 );
 
 /**@type {HTMLElement} */
-export const $footer = <footer id="quick-tools" tabIndex={-1}></footer>;
+export const $footer = <footer id="quick-tools" tabIndex={-1} />;
 
 /**@type {HTMLElement} */
 export const $toggler = (
-	<span
-		className="floating icon keyboard_arrow_up"
-		id="quicktools-toggler"
-	></span>
+	<span className="floating icon keyboard_arrow_up" id="quicktools-toggler" />
 );
 
 /**@type {HTMLTextAreaElement} */
@@ -89,7 +86,7 @@ export const $input = (
 			top: 0,
 			left: 0,
 		}}
-	></textarea>
+	/>
 );
 
 /**
@@ -107,13 +104,14 @@ export const $input = (
 export function RowItem({ id, icon, letters, action, value, ref, repeat }) {
 	const $item = (
 		<button
+			type="button"
 			ref={ref}
 			className={`icon ${icon}`}
 			data-id={id}
 			data-letters={letters}
 			data-action={action}
 			data-repeat={repeat}
-		></button>
+		/>
 	);
 
 	if (typeof value === "function") {
@@ -132,16 +130,16 @@ export function RowItem({ id, icon, letters, action, value, ref, repeat }) {
  * @returns {Array<Element>}
  */
 function Extras({ extras }) {
-	const div = <div className="section"></div>;
+	const div = <div className="section" />;
 	if (Array.isArray(extras)) {
-		extras.forEach((i) => {
+		for (const i of extras) {
 			if (i instanceof HTMLElement) {
 				div.appendChild(i);
 				return;
 			}
 
 			div.append(<RowItem {...i} />);
-		});
+		}
 	}
 	return div;
 }