chore: port client-side JS to TypeScript (#1100)
* chore(challenge/preact): port to typescript Signed-off-by: Xe Iaso <me@xeiaso.net> * chore(js/algorithms): port to typescript Signed-off-by: Xe Iaso <me@xeiaso.net> * chore(js/worker): port to typescript Signed-off-by: Xe Iaso <me@xeiaso.net> * chore(web): fix TypeScript build logic Signed-off-by: Xe Iaso <me@xeiaso.net> * chore(web): port bench.mjs to typescript Signed-off-by: Xe Iaso <me@xeiaso.net> * chore(web): port main.mjs to typescript Signed-off-by: Xe Iaso <me@xeiaso.net> * Update metadata check-spelling run (pull_request) for Xe/use-typescript Signed-off-by: check-spelling-bot <check-spelling-bot@users.noreply.github.com> on-behalf-of: @check-spelling <check-spelling-bot@check-spelling.dev> * fix(js/algorithms/fast): handle old browsers Closes #1082 Signed-off-by: Xe Iaso <me@xeiaso.net> --------- Signed-off-by: Xe Iaso <me@xeiaso.net> Signed-off-by: check-spelling-bot <check-spelling-bot@users.noreply.github.com>
This commit is contained in:
Xe Iaso
GitHub
parent
8ed89a6c6e
commit
2011b83a44
12 changed files with 190 additions and 130 deletions
|
|
@ -1,11 +1,21 @@
|
|||
type ProgressCallback = (nonce: number) => void;
|
||||
|
||||
interface ProcessOptions {
|
||||
basePrefix: string;
|
||||
version: string;
|
||||
}
|
||||
|
||||
const getHardwareConcurrency = () =>
|
||||
navigator.hardwareConcurrency !== undefined ? navigator.hardwareConcurrency : 1;
|
||||
|
||||
export default function process(
|
||||
{ basePrefix, version },
|
||||
data,
|
||||
difficulty = 5,
|
||||
signal = null,
|
||||
progressCallback = null,
|
||||
threads = Math.trunc(Math.max(navigator.hardwareConcurrency / 2, 1)),
|
||||
) {
|
||||
options: ProcessOptions,
|
||||
data: string,
|
||||
difficulty: number = 5,
|
||||
signal: AbortSignal | null = null,
|
||||
progressCallback?: ProgressCallback,
|
||||
threads: number = Math.trunc(Math.max(getHardwareConcurrency() / 2, 1)),
|
||||
): Promise<string> {
|
||||
console.debug("fast algo");
|
||||
|
||||
let workerMethod = window.crypto !== undefined ? "webcrypto" : "purejs";
|
||||
|
|
@ -16,13 +26,17 @@ export default function process(
|
|||
}
|
||||
|
||||
return new Promise((resolve, reject) => {
|
||||
let webWorkerURL = `${basePrefix}/.within.website/x/cmd/anubis/static/js/worker/sha256-${workerMethod}.mjs?cacheBuster=${version}`;
|
||||
let webWorkerURL = `${options.basePrefix}/.within.website/x/cmd/anubis/static/js/worker/sha256-${workerMethod}.mjs?cacheBuster=${options.version}`;
|
||||
|
||||
console.log(webWorkerURL);
|
||||
|
||||
const workers = [];
|
||||
const workers: Worker[] = [];
|
||||
let settled = false;
|
||||
|
||||
const onAbort = () => {
|
||||
console.log("PoW aborted");
|
||||
cleanup();
|
||||
reject(new DOMException("Aborted", "AbortError"));
|
||||
};
|
||||
|
||||
const cleanup = () => {
|
||||
if (settled) {
|
||||
return;
|
||||
|
|
@ -34,12 +48,6 @@ export default function process(
|
|||
}
|
||||
};
|
||||
|
||||
const onAbort = () => {
|
||||
console.log("PoW aborted");
|
||||
cleanup();
|
||||
reject(new DOMException("Aborted", "AbortError"));
|
||||
};
|
||||
|
||||
if (signal != null) {
|
||||
if (signal.aborted) {
|
||||
return onAbort();
|
||||
|
|
@ -1,4 +1,4 @@
|
|||
import fast from "./fast.mjs";
|
||||
import fast from "./fast";
|
||||
|
||||
export default {
|
||||
fast: fast,
|
||||
|
|
@ -1,20 +1,24 @@
|
|||
import algorithms from "./algorithms/index.mjs";
|
||||
import algorithms from "./algorithms";
|
||||
|
||||
const defaultDifficulty = 4;
|
||||
|
||||
const status = document.getElementById("status");
|
||||
const difficultyInput = document.getElementById("difficulty-input");
|
||||
const algorithmSelect = document.getElementById("algorithm-select");
|
||||
const compareSelect = document.getElementById("compare-select");
|
||||
const header = document.getElementById("table-header");
|
||||
const headerCompare = document.getElementById("table-header-compare");
|
||||
const results = document.getElementById("results");
|
||||
const status: HTMLParagraphElement = document.getElementById("status") as HTMLParagraphElement;
|
||||
const difficultyInput: HTMLInputElement = document.getElementById("difficulty-input") as HTMLInputElement;
|
||||
const algorithmSelect: HTMLSelectElement = document.getElementById("algorithm-select") as HTMLSelectElement;
|
||||
const compareSelect: HTMLSelectElement = document.getElementById("compare-select") as HTMLSelectElement;
|
||||
const header: HTMLTableRowElement = document.getElementById("table-header") as HTMLTableRowElement;
|
||||
const headerCompare: HTMLTableSectionElement = document.getElementById("table-header-compare") as HTMLTableSectionElement;
|
||||
const results: HTMLTableRowElement = document.getElementById("results") as HTMLTableRowElement;
|
||||
|
||||
const setupControls = () => {
|
||||
difficultyInput.value = defaultDifficulty;
|
||||
if (defaultDifficulty == null) {
|
||||
return;
|
||||
}
|
||||
|
||||
difficultyInput.value = defaultDifficulty.toString();
|
||||
for (const alg of Object.keys(algorithms)) {
|
||||
const option1 = document.createElement("option");
|
||||
algorithmSelect.append(option1);
|
||||
algorithmSelect?.append(option1);
|
||||
const option2 = document.createElement("option");
|
||||
compareSelect.append(option2);
|
||||
option1.value = option1.innerText = option2.value = option2.innerText = alg;
|
||||
|
|
@ -116,13 +120,13 @@ const benchmarkLoop = async (controller) => {
|
|||
await benchmarkLoop(controller);
|
||||
};
|
||||
|
||||
let controller = null;
|
||||
let controller: AbortController | null = null;
|
||||
const reset = () => {
|
||||
stats.time = stats.iters = 0;
|
||||
comparison.time = comparison.iters = 0;
|
||||
results.innerHTML = status.innerText = "";
|
||||
|
||||
const table = results.parentElement;
|
||||
const table = results.parentElement as HTMLElement;
|
||||
if (compareSelect.value !== "NONE") {
|
||||
table.style.gridTemplateColumns = "repeat(4,auto)";
|
||||
header.style.display = "none";
|
||||
|
|
@ -1,12 +1,21 @@
|
|||
import algorithms from "./algorithms/index.mjs";
|
||||
import algorithms from "./algorithms";
|
||||
|
||||
// from Xeact
|
||||
const u = (url = "", params = {}) => {
|
||||
const u = (url: string = "", params: Record<string, any> = {}) => {
|
||||
let result = new URL(url, window.location.href);
|
||||
Object.entries(params).forEach(([k, v]) => result.searchParams.set(k, v));
|
||||
return result.toString();
|
||||
};
|
||||
|
||||
const j = (id: string): any | null => {
|
||||
const elem = document.getElementById(id);
|
||||
if (elem === null) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return JSON.parse(elem.textContent);
|
||||
};
|
||||
|
||||
const imageURL = (mood, cacheBuster, basePrefix) =>
|
||||
u(`${basePrefix}/.within.website/x/cmd/anubis/static/img/${mood}.webp`, {
|
||||
cacheBuster,
|
||||
|
|
@ -14,9 +23,10 @@ const imageURL = (mood, cacheBuster, basePrefix) =>
|
|||
|
||||
// Detect available languages by loading the manifest
|
||||
const getAvailableLanguages = async () => {
|
||||
const basePrefix = JSON.parse(
|
||||
document.getElementById("anubis_base_prefix").textContent,
|
||||
);
|
||||
const basePrefix = j("anubis_base_prefix");
|
||||
if (basePrefix === null) {
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
const response = await fetch(`${basePrefix}/.within.website/x/cmd/anubis/static/locales/manifest.json`);
|
||||
|
|
@ -38,9 +48,11 @@ const getBrowserLanguage = async () =>
|
|||
|
||||
// Load translations from JSON files
|
||||
const loadTranslations = async (lang) => {
|
||||
const basePrefix = JSON.parse(
|
||||
document.getElementById("anubis_base_prefix").textContent,
|
||||
);
|
||||
const basePrefix = j("anubis_base_prefix");
|
||||
if (basePrefix === null) {
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
const response = await fetch(`${basePrefix}/.within.website/x/cmd/anubis/static/locales/${lang}.json`);
|
||||
return await response.json();
|
||||
|
|
@ -54,9 +66,10 @@ const loadTranslations = async (lang) => {
|
|||
};
|
||||
|
||||
const getRedirectUrl = () => {
|
||||
const publicUrl = JSON.parse(
|
||||
document.getElementById("anubis_public_url").textContent,
|
||||
);
|
||||
const publicUrl = j("anubis_public_url");
|
||||
if (publicUrl === null) {
|
||||
return;
|
||||
}
|
||||
if (publicUrl && window.location.href.startsWith(publicUrl)) {
|
||||
const urlParams = new URLSearchParams(window.location.search);
|
||||
return urlParams.get('redir');
|
||||
|
|
@ -91,16 +104,14 @@ const t = (key) => translations[`js_${key}`] || translations[key] || key;
|
|||
value: navigator.cookieEnabled,
|
||||
},
|
||||
];
|
||||
const status = document.getElementById("status");
|
||||
const image = document.getElementById("image");
|
||||
const title = document.getElementById("title");
|
||||
const progress = document.getElementById("progress");
|
||||
const anubisVersion = JSON.parse(
|
||||
document.getElementById("anubis_version").textContent,
|
||||
);
|
||||
const basePrefix = JSON.parse(
|
||||
document.getElementById("anubis_base_prefix").textContent,
|
||||
);
|
||||
|
||||
const status: HTMLParagraphElement = document.getElementById("status") as HTMLParagraphElement;
|
||||
const image: HTMLImageElement = document.getElementById("image") as HTMLImageElement;
|
||||
const title: HTMLHeadingElement = document.getElementById("title") as HTMLHeadingElement;
|
||||
const progress: HTMLDivElement = document.getElementById("progress") as HTMLDivElement;
|
||||
|
||||
const anubisVersion = j("anubis_version");
|
||||
const basePrefix = j("anubis_base_prefix");
|
||||
const details = document.querySelector("details");
|
||||
let userReadDetails = false;
|
||||
|
||||
|
|
@ -132,9 +143,7 @@ const t = (key) => translations[`js_${key}`] || translations[key] || key;
|
|||
}
|
||||
}
|
||||
|
||||
const { challenge, rules } = JSON.parse(
|
||||
document.getElementById("anubis_challenge").textContent,
|
||||
);
|
||||
const { challenge, rules } = j("anubis_challenge");
|
||||
|
||||
const process = algorithms[rules.algorithm];
|
||||
if (!process) {
|
||||
|
|
@ -182,7 +191,9 @@ const t = (key) => translations[`js_${key}`] || translations[key] || key;
|
|||
const probability = Math.pow(1 - likelihood, iters);
|
||||
const distance = (1 - Math.pow(probability, 2)) * 100;
|
||||
progress["aria-valuenow"] = distance;
|
||||
progress.firstElementChild.style.width = `${distance}%`;
|
||||
if (progress.firstElementChild !== null) {
|
||||
(progress.firstElementChild as HTMLElement).style.width = `${distance}%`;
|
||||
}
|
||||
|
||||
if (probability < 0.1 && !showingApology) {
|
||||
status.append(
|
||||
|
|
@ -197,7 +208,7 @@ const t = (key) => translations[`js_${key}`] || translations[key] || key;
|
|||
console.log({ hash, nonce });
|
||||
|
||||
if (userReadDetails) {
|
||||
const container = document.getElementById("progress");
|
||||
const container: HTMLDivElement = document.getElementById("progress") as HTMLDivElement;
|
||||
|
||||
// Style progress bar as a continue button
|
||||
container.style.display = "flex";
|
||||
|
|
@ -6,7 +6,7 @@ const calculateSHA256 = (text) => {
|
|||
return hash.digest();
|
||||
};
|
||||
|
||||
function toHexString(arr) {
|
||||
function toHexString(arr: Uint8Array): string {
|
||||
return Array.from(arr)
|
||||
.map((c) => c.toString(16).padStart(2, "0"))
|
||||
.join("");
|
||||
|
|
@ -1,10 +1,11 @@
|
|||
const encoder = new TextEncoder();
|
||||
const calculateSHA256 = async (input) => {
|
||||
|
||||
const calculateSHA256 = async (input: string) => {
|
||||
const data = encoder.encode(input);
|
||||
return await crypto.subtle.digest("SHA-256", data);
|
||||
};
|
||||
|
||||
const toHexString = (byteArray) => {
|
||||
const toHexString = (byteArray: Uint8Array) => {
|
||||
return byteArray.reduce((str, byte) => str + byte.toString(16).padStart(2, "0"), "");
|
||||
};
|
||||
|
||||
Loading…
Add table
Add a link
Reference in a new issue