Stateful Counter that renders to HTML
Server with initial HTML + Client side rendering:
If you view source, you can see the server renders initial HTML. And then the exact same .wasm module is loaded in the browser for interactivity.
Client side rendering only:
The initial HTML from the server is just a loader, with only the browser loading the wasm file.
Loading…
Lazy client-side rendering only:
Loading…
View $CounterHTML
Wasm source
(module $CounterHTML
(import "env" "buffer" (memory 1))
(global $count (mut i32) (i32.const 0))
(global $body_chunk_index (mut i32) (i32.const 0))
(global $bump_offset (mut i32) (i32.const 1024))
(data (i32.const 255) "<output class=\"flex p-4 bg-gray-800\">")
(data (i32.const 293) "</output>")
(data (i32.const 303) "\n<button data-action=\"increment\" class=\"mt-4 inline-block py-1 px-4 bg-white text-black rounded\">Increment</button>")
(func $get_current (export "get_current") (result i32)
(global.get $count)
)
(func $increment (export "increment") (result i32)
(i32.add (global.get $count) (i32.const 1))
(global.set $count)
(global.get $count)
)
(func $rewind (export "rewind")
(local $i i32)
(i32.const 0)
(global.set $body_chunk_index)
(i32.const 1024)
(global.set $bump_offset)
(i32.const 64)
(local.set $i)
(loop $Clear
(i32.store (i32.add (local.get $i) (i32.const 1024)) (i32.const 0))
(if (i32.gt_u (local.get $i) (i32.const 0))
(then
(i32.sub (local.get $i) (i32.const 1))
(local.set $i)
br $Clear
)
)
)
)
(func $i32toa (param $value i32) (result i32)
(local $working_offset i32)
(local $digit i32)
(i32.add (global.get $bump_offset) (i32.const 11))
(global.set $bump_offset)
(global.get $bump_offset)
(local.set $working_offset)
(loop $Digits
(i32.sub (local.get $working_offset) (i32.const 1))
(local.set $working_offset)
(i32.rem_u (local.get $value) (i32.const 10))
(local.set $digit)
(i32.div_u (local.get $value) (i32.const 10))
(local.set $value)
(i32.store8 (local.get $working_offset) (i32.add (i32.const 48) (local.get $digit)))
(i32.gt_u (local.get $value) (i32.const 0))
br_if $Digits
)
(local.get $working_offset)
)
(func $next_body_chunk (export "next_body_chunk") (result i32)
(block $Main (result i32)
(if (i32.eq (global.get $body_chunk_index) (i32.const 0))
(then
(i32.const 255)
br $Main
)
)
(if (i32.eq (global.get $body_chunk_index) (i32.const 1))
(then
(call $i32toa (global.get $count))
br $Main
)
)
(if (i32.eq (global.get $body_chunk_index) (i32.const 2))
(then
(i32.const 293)
br $Main
)
)
(if (i32.eq (global.get $body_chunk_index) (i32.const 3))
(then
(i32.const 303)
br $Main
)
)
(i32.const 0)
)
(i32.add (global.get $body_chunk_index) (i32.const 1))
(global.set $body_chunk_index)
)
)
View $Form
Wat source
(module $Form
(global $edited (export "edited") i32 (i32.const 1))
(global $submitting (export "submitting") i32 (i32.const 2))
(global $succeeded (export "succeeded") i32 (i32.const 3))
(global $failed (export "failed") i32 (i32.const 4))
(global $initial (export "initial") (mut i32) (i32.const 0))
(global $state (mut i32) (i32.const 0))
(global $edit_count (mut i32) (i32.const 0))
(global $submitted_edit_count (mut i32) (i32.const 0))
(func $get_current (export "get_current") (result i32)
(global.get $state)
)
(func $get_edit_count (export "get_edit_count") (result i32)
(global.get $edit_count)
)
(func $get_submitted_edit_count (export "get_submitted_edit_count") (result i32)
(global.get $submitted_edit_count)
)
(func $user_can_edit? (export "user_can_edit?") (result i32)
(i32.eqz (i32.eq (global.get $state) (global.get $submitting)))
)
(func $user_can_submit? (export "user_can_submit?") (result i32)
(i32.eqz (i32.eq (global.get $state) (global.get $submitting)))
)
(func $user_did_edit (export "user_did_edit")
(if (i32.or (i32.eq (global.get $state) (global.get $initial)) (i32.or (i32.eq (global.get $state) (global.get $edited)) (i32.or (i32.eq (global.get $state) (global.get $succeeded)) (i32.eq (global.get $state) (global.get $failed)))))
(then
(global.get $edited)
(global.set $state)
(i32.add (global.get $edit_count) (i32.const 1))
(global.set $edit_count)
)
)
)
(func $user_did_submit (export "user_did_submit")
(if (i32.eqz (i32.eq (global.get $state) (global.get $submitting)))
(then
(global.get $submitting)
(global.set $state)
(global.get $edit_count)
(global.set $submitted_edit_count)
)
)
)
(func $destination_did_succeed (export "destination_did_succeed")
(if (i32.eq (global.get $state) (global.get $submitting))
(then
(global.get $succeeded)
(global.set $state)
)
)
)
(func $destination_did_fail (export "destination_did_fail")
(if (i32.eq (global.get $state) (global.get $submitting))
(then
(global.get $failed)
(global.set $state)
)
)
)
)
Promise State Machine
View $Promise
Wat source
(module $Promise
(global $pending (export "pending") i32 (i32.const 0))
(global $resolved (export "resolved") i32 (i32.const 1))
(global $rejected (export "rejected") i32 (i32.const 2))
(global $state (mut i32) (i32.const 0))
(func $get_current (export "get_current") (result i32)
(global.get $state)
)
(func $resolve (export "resolve")
(if (i32.eq (global.get $state) (global.get $pending))
(then
(global.get $resolved)
(global.set $state)
)
)
)
(func $reject (export "reject")
(if (i32.eq (global.get $state) (global.get $pending))
(then
(global.get $rejected)
(global.set $state)
)
)
)
)
Dialog State Machine
View $Dialog
Wat source
(module $Dialog
(global $closed? (export "closed?") i32 (i32.const 0))
(global $open? (export "open?") i32 (i32.const 1))
(global $state (mut i32) (i32.const 0))
(func $get_current (export "get_current") (result i32)
(global.get $state)
)
(func $open (export "open")
(if (i32.eq (global.get $state) (global.get $closed?))
(then
(global.get $open?)
(global.set $state)
)
)
)
(func $close (export "close")
(if (i32.eq (global.get $state) (global.get $open?))
(then
(global.get $closed?)
(global.set $state)
)
)
)
(func $cancel (export "cancel")
(if (i32.eq (global.get $state) (global.get $open?))
(then
(global.get $closed?)
(global.set $state)
)
)
)
)
Offline Status State Machine
View $OfflineStatus
Wat source
(module $OfflineStatus
(global $offline? (export "offline?") i32 (i32.const 0))
(global $online? (export "online?") i32 (i32.const 1))
(global $listen_to_window (export "listen_to_window") i32 (i32.const 256))
(global $state (export "state") (mut i32) (i32.const 0))
(func $get_current (export "get_current") (result i32)
(global.get $state)
)
(func $online (export "online")
(if (i32.eq (global.get $state) (global.get $offline?))
(then
(global.get $online?)
(global.set $state)
)
)
)
(func $offline (export "offline")
(if (i32.eq (global.get $state) (global.get $online?))
(then
(global.get $offline?)
(global.set $state)
)
)
)
)