mirror of
https://github.com/TecharoHQ/anubis.git
synced 2026-04-26 10:02:42 +00:00
feat(web): port PoW challenge page from vanilla JS to Preact
Replace the imperative DOM manipulation in web/js/main.ts with a
declarative Preact component (web/js/main.tsx). The project already
uses Preact for the timed-delay challenge (lib/challenge/preact/),
so this aligns the PoW challenge with the existing codebase direction.
Convert web/js/main.ts to a Preact TSX component. The worker
orchestration layer (web/js/algorithms/fast.ts) stays untouched --
it is already cleanly separated and works via a Promise API.
web/js/main.ts -> web/js/main.tsx:
- Phase-based state machine (loading -> computing -> reading/error)
replaces scattered imperative DOM updates.
- Worker lifecycle managed in useEffect; progress callback drives
state setters for speed and progress percentage.
- Speed updates remain throttled to 1 second intervals.
- i18n functions (initTranslations, t(), loadTranslations) kept as
module-level state -- no need for React context in a single-
component app.
- The <details> section stays in the templ file as server-rendered
HTML; the Preact component tracks its toggle state via useRef.
- Uses esbuild automatic JSX transform (--jsx=automatic
--jsx-import-source=preact) instead of classic pragmas.
web/build.sh:
- Add js/**/*.tsx to the glob so esbuild bundles TSX files.
- Pass --jsx=automatic --jsx-import-source=preact for .tsx files.
web/tsconfig.json (new):
- IDE-only config (noEmit) so TypeScript understands Preact JSX
types for editor diagnostics and autocompletion.
lib/challenge/proofofwork/proofofwork.templ:
- Replace individual DOM elements (img#image, p#status,
div#progress) with a <div id="app"> Preact mount point
containing server-rendered fallback (pensive image + loading
text).
- Keep <details>, <noscript>, and <div id="testarea"> outside the
Preact tree as server-rendered content.
lib/anubis.go:
- Add challenge method to the "new challenge issued" log line.
docs/docs/CHANGELOG.md:
- Add entry for the Preact rewrite.
- web/js/algorithms/fast.ts -- untouched
- web/js/algorithms/index.ts -- untouched
- web/js/worker/sha256-*.ts -- untouched
- Server-side Go code (proofofwork.go) -- untouched
- JSON script data embedding -- untouched
- Redirect URL construction -- same logic, same parameters
- Progress bar CSS in web/index.templ -- untouched
Signed-off-by: Xe Iaso <me@xeiaso.net>
Assisted-by: Claude Opus 4.6 via Claude Code
Signed-off-by: Xe Iaso <me@xeiaso.net>
This commit is contained in:
+10
-3
@@ -41,15 +41,22 @@ cp ../lib/localization/locales/*.json static/locales/
|
||||
|
||||
shopt -s nullglob globstar
|
||||
|
||||
for file in js/**/*.ts js/**/*.mjs; do
|
||||
for file in js/**/*.ts js/**/*.tsx js/**/*.mjs; do
|
||||
out="static/${file}"
|
||||
if [[ "$file" == *.ts ]]; then
|
||||
if [[ "$file" == *.tsx ]]; then
|
||||
out="static/${file%.tsx}.mjs"
|
||||
elif [[ "$file" == *.ts ]]; then
|
||||
out="static/${file%.ts}.mjs"
|
||||
fi
|
||||
|
||||
mkdir -p "$(dirname "$out")"
|
||||
|
||||
esbuild "$file" --sourcemap --bundle --minify --outfile="$out" --banner:js="$LICENSE"
|
||||
JSX_FLAGS=""
|
||||
if [[ "$file" == *.tsx ]]; then
|
||||
JSX_FLAGS="--jsx=automatic --jsx-import-source=preact"
|
||||
fi
|
||||
|
||||
esbuild "$file" --sourcemap --bundle --minify --outfile="$out" $JSX_FLAGS --banner:js="$LICENSE"
|
||||
gzip -f -k -n "$out"
|
||||
zstd -f -k --ultra -22 "$out"
|
||||
brotli -fZk "$out"
|
||||
|
||||
Reference in New Issue
Block a user