Rust WASM: przeniesienie CLI do przeglądarki

Migracja narzędzia konsolowego na Rust i WebAssembly z wdrożeniem w GitLab Pages

Konsolowa aplikacja do generowania tekstowych prognoz została przeniesiona do WebAssembly w Rust. Logika obliczeń jest izolowana w module WASM, interfejs zrealizowany jako statyczna strona HTML z terminalowym UX. Wdrożenie przez GitLab Pages zapewnia natychmiastowy dostęp do demo bez instalacji.

Projekt obejmuje bibliotekę Rust dla logiki, frontend w vanilla JS i CSS, artefakty wasm-pack. Nadaje się do lekkich narzędzi bez dostępu do systemu plików i API platformy.

Architektura projektu

Struktura podzielona na trzy komponenty:

• src/lib.rs — główna logika w Rust z eksportem funkcji.
• public/index.html, styles.css, app.js — interfejs w stylu terminala.
• public/pkg/ — skompilowane pliki WASM i opakowania JS.

Brak zależności od systemu operacyjnego sprawia, że migracja jest prosta: aplikacja przyjmuje komendy i zwraca tekst.

Eksport Rust do WASM

Główna funkcja eksportowana za pomocą #[wasm_bindgen]:

#[wasm_bindgen]
pub fn generate_reading_text() -> String {
    // generowanie i formatowanie wyniku
}

Kompilacja poleceniem:

wasm-pack build --target no-modules --release --out-dir public/pkg

Wynik: iching_wasm.js i iching_wasm_bg.wasm. Opcja --target no-modules upraszcza integrację bez bundlerów.

Integracja WASM w przeglądarce

W app.js moduł ładowany synchronicznie z base64-wbudowanym WASM do pracy przez file://:

const wasmBytes = base64ToBytes(window.ICHING_WASM_BASE64);
wasm_bindgen.initSync({ module: wasmBytes });

const text = wasm_bindgen.generate_reading_text();
output.textContent = text;

W index.html podłączone:

• ./pkg/iching_wasm.js — runtime.
• ./pkg/iching_wasm_bg_base64.js — base64 WASM.
• app.js — logika UI.

JS wywołuje WASM, wynik renderowany w DOM.

UI w stylu terminala

Interfejs bez frameworków:

• Kontener z ramką i tytułem okna.
• Czcionka monospace (np. JetBrains Mono).
• Ciemny motyw z zielonym tekstem.
• <pre> dla wyjścia.
• Input dla komend jak ./generate_reading.

Wizualnie i funkcjonalnie imituje konsolę. Przycisk wyzwala wywołanie WASM.

CI/CD dla kompilacji i wdrożenia

.gitlab-ci.yml automatyzuje proces:

image: rust:slim

create-pages:
  pages:
    publish: public
  rules:
    - if: '$CI_COMMIT_REF_NAME == $CI_DEFAULT_BRANCH'
  before_script:
    - rustup target add wasm32-unknown-unknown
    - cargo install wasm-pack --locked
  script:
    - wasm-pack build --target no-modules --release --out-dir public/pkg
    - b64="$(base64 public/pkg/iching_wasm_bg.wasm | tr -d '\n')"
    - printf 'window.ICHING_WASM_BASE64 = "%s";\n' "$b64" > public/pkg/iching_wasm_bg_base64.js

Kroki: instalacja target, kompilacja wasm-pack, kodowanie WASM w base64, publikacja public/ na Pages.

Zalety podejścia

• Dostępność: demo działa w każdej przeglądarce bez Rust/lokalnej instalacji.
• Bezpieczeństwo: izolacja WASM eliminuje ryzyka od kodu natywnego.
• Prostota: statyczny hosting, jeden job CI.
• Przenośność: nadaje się dla CLI bez syscalls.

Co jest ważne

• Logika bez FS/API idealnie pasuje do WASM — kompilacja w sekundy.
• Base64-wbudowanie WASM rozwiązuje problemy z CORS i file://.
• GitLab Pages + wasm-pack CI — gotowy pipeline dla prototypów.
• Vanilla JS/HTML dla UI minimalizuje overhead.
• #[wasm_bindgen] — standard dla eksportu Rust do JS.

— Editorial Team