geomind_research/dioxus_research
0
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions
No description
20 commits 2 branches 0 tags 433 KiB
  • Rust 66.5%
  • Shell 32.6%
  • Makefile 0.9%
Find a file
Exact
omar a99cdb60a6 Fix kanban interactivity: wasm-safe timestamps + pointer-based drag-and-drop 
Two root issues broke the generated kanban UI in the browser:

- mock now_ms() used SystemTime::now(), which panics at runtime on
  wasm32-unknown-unknown. The panic fired while the store Mutex was held during
  a task move, poisoning it; every subsequent store access then panicked and the
  whole UI froze (no console error, JS still responsive -- hard to spot).
  Replaced with a monotonic AtomicU64 counter seeded at a fixed epoch.

- HTML5 drag-and-drop's drop/dragend events are not reliably delivered to
  handlers under Dioxus/WASM. Reworked the board to pointer-event drag-and-drop
  (onpointerdown -> onpointerenter/onpointermove -> onpointerup). Only the card
  being dragged is dimmed and only the column under the pointer is highlighted
  (fixes the previous "highlight every column" behaviour).

Also hardened the generators so regeneration produces correct code:
- 2_generate-mock.sh: forbid SystemTime/Instant (wasm-unsafe); use a monotonic
  counter for timestamps.
- 3_generate-webcomponent.sh: specify pointer-event DnD with single-target
  highlight instead of HTML5 drag-and-drop.

Verified in a headless browser: drag moves tasks between columns, multiple
consecutive moves work with no freeze, and the project selector keeps working.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
2026-06-01 11:21:46 +02:00
crates Fix kanban interactivity: wasm-safe timestamps + pointer-based drag-and-drop 2026-06-01 11:21:46 +02:00
docs Generalize the UI step: derive the UI from the mock, not hardcoded kanban 2026-06-01 04:44:30 +02:00
scripts Fix kanban interactivity: wasm-safe timestamps + pointer-based drag-and-drop 2026-06-01 11:21:46 +02:00
specs Regenerate spec/mock; fix UI for optional task priority; verified single-file bundle 2026-06-01 05:25:12 +02:00
.gitignore Make the UI an AI-generated step; reset --hard wipes all generated artifacts 2026-05-31 14:28:41 +02:00
Cargo.lock backup generated code for demo 2026-05-31 14:47:43 +02:00
Cargo.toml backup generated code for demo 2026-05-31 14:47:43 +02:00
Makefile Simplify the Makefile 2026-06-01 04:59:16 +02:00
README.md Simplify the Makefile 2026-06-01 04:59:16 +02:00

README.md

dioxus_research

A repeatable pipeline that turns an OpenRPC API spec into a Rust mock with fake data, builds a Dioxus (WASM) kanban UI on top of it, and ships that UI as a single-file web component loadable with one <script> tag — no backend.

OpenRPC spec  ──AI──▶  Rust mock crate  ──┐
(specs/)               (taskmanager_mock) │ depends on
                                          ▼
                              Dioxus UI (webcomponent)  ──dx build──▶  dist/taskboard.js
                              rsx! over the mock                       <task-board> + WASM(base64)

Quick start

A Makefile wraps the whole pipeline — run make (or make help) to list every target. The common ones:

make pipeline     # run the whole pipeline end to end
make dev          # hot-reload dev server for the UI (dx serve)
make build        # release build -> dist/taskboard.js + demo.html
make serve        # serve dist/ at http://localhost:8848
make clean        # remove ALL generated artifacts (manifest, spec, crates, dist)

Each stage is also its own target (make setup spec mock ui build) and maps 1:1 to a named script, which you can still run directly:

bash scripts/0_setup.sh                  # toolchain (rust/wasm/dx) + workspace manifest — no AI
bash scripts/1_generate-openrpc.sh       # AI: domain description -> OpenRPC spec (+ validate/auto-fix)
bash scripts/2_generate-mock.sh          # AI: spec -> taskmanager_mock crate (+ build/auto-fix)
bash scripts/3_generate-webcomponent.sh  # AI: mock -> Dioxus kanban UI (+ wasm32 check/auto-fix)
bash scripts/4_build-webcomponent.sh     # release build -> dist/taskboard.js + demo.html

(cd dist && python3 -m http.server 8848)   # open http://localhost:8848/demo.html

The webcomponent crate is owned end to end by 3_generate-webcomponent.sh (it creates the crate and registers it as a workspace member); 0_setup.sh writes the workspace manifest with an empty members list.

Layout

Path What
specs/openrpc_taskmanager.json OpenRPC 1.2.6 spec (41 methods: project/board/column/task/…)
crates/taskmanager_mock AI-generated Rust: types + in-memory fake data + api::* functions
crates/webcomponent AI-generated Dioxus kanban UI — one component per file under src/components/ (App → Board → Column → Card); compiles to WASM
scripts/ The reproducible, mostly-idempotent pipeline, numbered in order: 0_setup → 1_generate-openrpc → 2_generate-mock → 3_generate-webcomponent → 4_build-webcomponent (+ cleanup)
Makefile Friendly entry point wrapping the pipeline + dev/build/serve/demo/clean
dist/ Generated single-file component (gitignored; run make build)
scripts/cleanup.sh Clean slate: remove all generated artifacts (make clean)

Embedding the component

<script type="module" src="taskboard.js"></script>
<task-board></task-board>

No server, no Dioxus backend — the fake data is compiled into the WASM.

Full explanation

  • docs/FLOW.md — the end-to-end flow, the role of AI in the pipeline, how the single-file packaging works, and the key engineering decisions.
  • docs/COMPONENTS.md — what a Dioxus component is and how the UI's components (App → Board → Column → Card) stitch together via props and shared signals.