Add inline test runner for temperature converter demo
Temperature converter tests (6 tests): initial value, computed fahrenheit derivation, +5/-5 click handlers, reactive propagation, multiple click accumulation. New components: - sx/sx/reactive-islands/test-runner.sx — reusable defisland that parses test source, runs defsuite/deftest forms via cek-eval, and displays pass/fail results with re-run button - sx/sx/reactive-islands/test-temperature.sx — standalone test file Added cek-try primitive to both browser (sx_browser.ml) and server (sx_server.ml) for safe test execution with error catching. Browser bundle now includes harness files (harness.sx, harness-reactive.sx, harness-web.sx) for inline test execution. Known: SSR renders test runner body instead of placeholder, causing arity error on complex str expressions. Needs island SSR handling fix. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -385,6 +385,16 @@ let setup_evaluator_bridge env =
|
||||
| [fn_val; List call_args] ->
|
||||
Sx_ref.cek_call fn_val (List call_args)
|
||||
| _ -> raise (Eval_error "call-lambda: expected (fn args env?)"));
|
||||
bind "cek-try" (fun args ->
|
||||
match args with
|
||||
| [thunk; handler] ->
|
||||
(try Sx_ref.cek_call thunk Nil
|
||||
with Eval_error msg -> Sx_ref.cek_call handler (String msg))
|
||||
| [thunk] ->
|
||||
(try let r = Sx_ref.cek_call thunk Nil in
|
||||
List [Symbol "ok"; r]
|
||||
with Eval_error msg -> List [Symbol "error"; String msg])
|
||||
| _ -> Nil);
|
||||
bind "cek-call" (fun args ->
|
||||
match args with
|
||||
| [fn_val; List call_args] -> Sx_ref.cek_call fn_val (List call_args)
|
||||
|
||||
@@ -55,6 +55,11 @@ cp "$ROOT/web/adapter-dom.sx" "$DIST/sx/"
|
||||
cp "$ROOT/web/lib/boot-helpers.sx" "$DIST/sx/"
|
||||
cp "$ROOT/web/lib/hypersx.sx" "$DIST/sx/"
|
||||
|
||||
# 7b. Test harness (for inline test runners)
|
||||
cp "$ROOT/spec/harness.sx" "$DIST/sx/"
|
||||
cp "$ROOT/web/harness-reactive.sx" "$DIST/sx/"
|
||||
cp "$ROOT/web/harness-web.sx" "$DIST/sx/"
|
||||
|
||||
# 8. Web framework
|
||||
cp "$ROOT/web/engine.sx" "$DIST/sx/"
|
||||
cp "$ROOT/web/orchestration.sx" "$DIST/sx/"
|
||||
|
||||
@@ -255,6 +255,10 @@
|
||||
// Boot helpers (platform functions in pure SX)
|
||||
"sx/boot-helpers.sx",
|
||||
"sx/hypersx.sx",
|
||||
// Test harness (for inline test runners)
|
||||
"sx/harness.sx",
|
||||
"sx/harness-reactive.sx",
|
||||
"sx/harness-web.sx",
|
||||
// Web framework
|
||||
"sx/engine.sx",
|
||||
"sx/orchestration.sx",
|
||||
|
||||
585
hosts/ocaml/browser/sx_browser.ml
Normal file
585
hosts/ocaml/browser/sx_browser.ml
Normal file
@@ -0,0 +1,585 @@
|
||||
(** sx_browser.ml — OCaml SX kernel compiled to WASM/JS for browser use.
|
||||
|
||||
Exposes the CEK machine, bytecode VM, parser, and primitives as a
|
||||
global [SxKernel] object that the JS platform layer binds to.
|
||||
|
||||
Fresh implementation on the ocaml-vm branch — builds on the bytecode
|
||||
VM + lazy JIT infrastructure. *)
|
||||
|
||||
open Js_of_ocaml
|
||||
open Sx_types
|
||||
|
||||
(* ================================================================== *)
|
||||
(* Opaque value handle table *)
|
||||
(* *)
|
||||
(* Non-primitive SX values (lambdas, components, signals, etc.) are *)
|
||||
(* stored here and represented on the JS side as objects with an *)
|
||||
(* __sx_handle integer key. Preserves identity across JS↔OCaml. *)
|
||||
(* ================================================================== *)
|
||||
|
||||
let _next_handle = ref 0
|
||||
let _handle_table : (int, value) Hashtbl.t = Hashtbl.create 256
|
||||
|
||||
let alloc_handle (v : value) : int =
|
||||
let id = !_next_handle in
|
||||
incr _next_handle;
|
||||
Hashtbl.replace _handle_table id v;
|
||||
id
|
||||
|
||||
let get_handle (id : int) : value =
|
||||
match Hashtbl.find_opt _handle_table id with
|
||||
| Some v -> v
|
||||
| None -> raise (Eval_error (Printf.sprintf "Invalid SX handle: %d" id))
|
||||
|
||||
(* JS-side opaque host object table.
|
||||
Host objects (DOM elements, console, etc.) are stored here to preserve
|
||||
identity across the OCaml↔JS boundary. Represented as Dict with
|
||||
__host_handle key on the OCaml side. *)
|
||||
let _next_host_handle = ref 0
|
||||
let _alloc_host_handle = Js.Unsafe.pure_js_expr
|
||||
"(function() { var t = {}; var n = 0; return { put: function(obj) { var id = n++; t[id] = obj; return id; }, get: function(id) { return t[id]; } }; })()"
|
||||
let host_put (obj : Js.Unsafe.any) : int =
|
||||
let id = !_next_host_handle in
|
||||
incr _next_host_handle;
|
||||
ignore (Js.Unsafe.meth_call _alloc_host_handle "put" [| obj |]);
|
||||
id
|
||||
let host_get_js (id : int) : Js.Unsafe.any =
|
||||
Js.Unsafe.meth_call _alloc_host_handle "get" [| Js.Unsafe.inject id |]
|
||||
|
||||
(* ================================================================== *)
|
||||
(* Global environment *)
|
||||
(* ================================================================== *)
|
||||
|
||||
(* Force module initialization — these modules register primitives
|
||||
in their let () = ... blocks but aren't referenced directly. *)
|
||||
let () = Sx_scope.clear_all ()
|
||||
|
||||
let global_env = make_env ()
|
||||
let _sx_render_mode = ref false
|
||||
|
||||
let call_sx_fn (fn : value) (args : value list) : value =
|
||||
Sx_ref.eval_expr (List (fn :: args)) (Env global_env)
|
||||
|
||||
(* ================================================================== *)
|
||||
(* Value conversion: OCaml <-> JS *)
|
||||
(* ================================================================== *)
|
||||
|
||||
(** Tag a JS function with __sx_handle and _type properties. *)
|
||||
let _tag_fn = Js.Unsafe.pure_js_expr
|
||||
"(function(fn, handle, type) { fn.__sx_handle = handle; fn._type = type; return fn; })"
|
||||
|
||||
let rec value_to_js (v : value) : Js.Unsafe.any =
|
||||
match v with
|
||||
| Nil -> Js.Unsafe.inject Js.null
|
||||
| Bool b -> Js.Unsafe.inject (Js.bool b)
|
||||
| Number n -> Js.Unsafe.inject (Js.number_of_float n)
|
||||
| String s -> Js.Unsafe.inject (Js.string s)
|
||||
| RawHTML s -> Js.Unsafe.inject (Js.string s)
|
||||
| Symbol s ->
|
||||
Js.Unsafe.inject (Js.Unsafe.obj [|
|
||||
("_type", Js.Unsafe.inject (Js.string "symbol"));
|
||||
("name", Js.Unsafe.inject (Js.string s)) |])
|
||||
| Keyword k ->
|
||||
Js.Unsafe.inject (Js.Unsafe.obj [|
|
||||
("_type", Js.Unsafe.inject (Js.string "keyword"));
|
||||
("name", Js.Unsafe.inject (Js.string k)) |])
|
||||
| List items | ListRef { contents = items } ->
|
||||
let arr = items |> List.map value_to_js |> Array.of_list in
|
||||
Js.Unsafe.inject (Js.Unsafe.obj [|
|
||||
("_type", Js.Unsafe.inject (Js.string "list"));
|
||||
("items", Js.Unsafe.inject (Js.array arr)) |])
|
||||
| Dict d ->
|
||||
(* Check for __host_handle — return original JS object *)
|
||||
(match Hashtbl.find_opt d "__host_handle" with
|
||||
| Some (Number n) -> host_get_js (int_of_float n)
|
||||
| _ ->
|
||||
let obj = Js.Unsafe.obj [||] in
|
||||
Js.Unsafe.set obj (Js.string "_type") (Js.string "dict");
|
||||
Hashtbl.iter (fun k v ->
|
||||
Js.Unsafe.set obj (Js.string k) (value_to_js v)) d;
|
||||
Js.Unsafe.inject obj)
|
||||
(* Callable values: wrap as JS functions with __sx_handle *)
|
||||
| Lambda _ | NativeFn _ | Continuation _ | VmClosure _ ->
|
||||
let handle = alloc_handle v in
|
||||
let inner = Js.wrap_callback (fun args_js ->
|
||||
try
|
||||
let arg = js_to_value args_js in
|
||||
let args = match arg with Nil -> [] | _ -> [arg] in
|
||||
let result = call_sx_fn v args in
|
||||
value_to_js result
|
||||
with Eval_error msg ->
|
||||
ignore (Js.Unsafe.meth_call
|
||||
(Js.Unsafe.get Js.Unsafe.global (Js.string "console"))
|
||||
"error" [| Js.Unsafe.inject (Js.string ("[sx] " ^ msg)) |]);
|
||||
Js.Unsafe.inject Js.null) in
|
||||
Js.Unsafe.fun_call _tag_fn [|
|
||||
Js.Unsafe.inject inner;
|
||||
Js.Unsafe.inject handle;
|
||||
Js.Unsafe.inject (Js.string (type_of v)) |]
|
||||
(* Non-callable compound: tagged object with handle *)
|
||||
| _ ->
|
||||
let handle = alloc_handle v in
|
||||
Js.Unsafe.inject (Js.Unsafe.obj [|
|
||||
("_type", Js.Unsafe.inject (Js.string (type_of v)));
|
||||
("__sx_handle", Js.Unsafe.inject handle) |])
|
||||
|
||||
and js_to_value (js : Js.Unsafe.any) : value =
|
||||
if Js.Unsafe.equals js Js.null || Js.Unsafe.equals js Js.undefined then Nil
|
||||
else
|
||||
let ty = Js.to_string (Js.typeof js) in
|
||||
match ty with
|
||||
| "number" -> Number (Js.float_of_number (Js.Unsafe.coerce js))
|
||||
| "boolean" -> Bool (Js.to_bool (Js.Unsafe.coerce js))
|
||||
| "string" -> String (Js.to_string (Js.Unsafe.coerce js))
|
||||
| "function" ->
|
||||
let h = Js.Unsafe.get js (Js.string "__sx_handle") in
|
||||
if not (Js.Unsafe.equals h Js.undefined) then
|
||||
get_handle (Js.float_of_number (Js.Unsafe.coerce h) |> int_of_float)
|
||||
else
|
||||
(* Plain JS function — wrap as NativeFn *)
|
||||
NativeFn ("js-callback", fun args ->
|
||||
let js_args = args |> List.map value_to_js |> Array.of_list in
|
||||
js_to_value (Js.Unsafe.fun_call js (Array.map Fun.id js_args)))
|
||||
| "object" ->
|
||||
let h = Js.Unsafe.get js (Js.string "__sx_handle") in
|
||||
if not (Js.Unsafe.equals h Js.undefined) then
|
||||
get_handle (Js.float_of_number (Js.Unsafe.coerce h) |> int_of_float)
|
||||
else
|
||||
let type_field = Js.Unsafe.get js (Js.string "_type") in
|
||||
if Js.Unsafe.equals type_field Js.undefined then begin
|
||||
if Js.to_bool (Js.Unsafe.global##._Array##isArray js) then begin
|
||||
let n = Js.float_of_number (Js.Unsafe.coerce (Js.Unsafe.get js (Js.string "length"))) |> int_of_float in
|
||||
List (List.init n (fun i ->
|
||||
js_to_value (Js.array_get (Js.Unsafe.coerce js) i |> Js.Optdef.to_option |> Option.get)))
|
||||
end else begin
|
||||
(* Opaque host object — store in JS-side table, return Dict with __host_handle *)
|
||||
let id = host_put js in
|
||||
let d = Hashtbl.create 2 in
|
||||
Hashtbl.replace d "__host_handle" (Number (float_of_int id));
|
||||
Dict d
|
||||
end
|
||||
end else begin
|
||||
let tag = Js.to_string (Js.Unsafe.coerce type_field) in
|
||||
match tag with
|
||||
| "symbol" -> Symbol (Js.to_string (Js.Unsafe.get js (Js.string "name")))
|
||||
| "keyword" -> Keyword (Js.to_string (Js.Unsafe.get js (Js.string "name")))
|
||||
| "list" ->
|
||||
let items_js = Js.Unsafe.get js (Js.string "items") in
|
||||
let n = Js.float_of_number (Js.Unsafe.coerce (Js.Unsafe.get items_js (Js.string "length"))) |> int_of_float in
|
||||
List (List.init n (fun i ->
|
||||
js_to_value (Js.array_get (Js.Unsafe.coerce items_js) i |> Js.Optdef.to_option |> Option.get)))
|
||||
| "dict" ->
|
||||
let d = Hashtbl.create 8 in
|
||||
let keys = Js.Unsafe.global##._Object##keys js in
|
||||
let len = keys##.length in
|
||||
for i = 0 to len - 1 do
|
||||
let k = Js.to_string (Js.array_get keys i |> Js.Optdef.to_option |> Option.get) in
|
||||
if k <> "_type" then
|
||||
Hashtbl.replace d k (js_to_value (Js.Unsafe.get js (Js.string k)))
|
||||
done;
|
||||
Dict d
|
||||
| _ -> Nil
|
||||
end
|
||||
| _ -> Nil
|
||||
|
||||
(* ================================================================== *)
|
||||
(* Side-channel return (bypasses js_of_ocaml stripping properties) *)
|
||||
(* ================================================================== *)
|
||||
|
||||
let return_via_side_channel (v : Js.Unsafe.any) : Js.Unsafe.any =
|
||||
Js.Unsafe.set Js.Unsafe.global (Js.string "__sxR") v; v
|
||||
|
||||
(* ================================================================== *)
|
||||
(* Core API *)
|
||||
(* ================================================================== *)
|
||||
|
||||
let api_parse src_js =
|
||||
let src = Js.to_string src_js in
|
||||
try
|
||||
let values = Sx_parser.parse_all src in
|
||||
Js.Unsafe.inject (Js.array (values |> List.map value_to_js |> Array.of_list))
|
||||
with Parse_error msg ->
|
||||
Js.Unsafe.inject (Js.string ("Parse error: " ^ msg))
|
||||
|
||||
let api_eval src_js =
|
||||
let src = Js.to_string src_js in
|
||||
try
|
||||
let exprs = Sx_parser.parse_all src in
|
||||
let env = Env global_env in
|
||||
let result = List.fold_left (fun _acc expr -> Sx_ref.eval_expr expr env) Nil exprs in
|
||||
return_via_side_channel (value_to_js result)
|
||||
with
|
||||
| Eval_error msg -> Js.Unsafe.inject (Js.string ("Error: " ^ msg))
|
||||
| Parse_error msg -> Js.Unsafe.inject (Js.string ("Parse error: " ^ msg))
|
||||
|
||||
let api_eval_expr expr_js _env_js =
|
||||
let expr = js_to_value expr_js in
|
||||
try
|
||||
return_via_side_channel (value_to_js (Sx_ref.eval_expr expr (Env global_env)))
|
||||
with Eval_error msg ->
|
||||
Js.Unsafe.inject (Js.string ("Error: " ^ msg))
|
||||
|
||||
let api_load src_js =
|
||||
let src = Js.to_string src_js in
|
||||
try
|
||||
let exprs = Sx_parser.parse_all src in
|
||||
let env = Env global_env in
|
||||
let count = ref 0 in
|
||||
List.iter (fun expr -> ignore (Sx_ref.eval_expr expr env); incr count) exprs;
|
||||
Js.Unsafe.inject !count
|
||||
with
|
||||
| Eval_error msg -> Js.Unsafe.inject (Js.string ("Error: " ^ msg))
|
||||
| Parse_error msg -> Js.Unsafe.inject (Js.string ("Parse error: " ^ msg))
|
||||
|
||||
let api_render_to_html expr_js =
|
||||
let expr = js_to_value expr_js in
|
||||
let prev = !_sx_render_mode in
|
||||
_sx_render_mode := true;
|
||||
(try
|
||||
let html = Sx_render.render_to_html expr global_env in
|
||||
_sx_render_mode := prev;
|
||||
Js.Unsafe.inject (Js.string html)
|
||||
with Eval_error msg ->
|
||||
_sx_render_mode := prev;
|
||||
Js.Unsafe.inject (Js.string ("Error: " ^ msg)))
|
||||
|
||||
let api_stringify v_js =
|
||||
Js.Unsafe.inject (Js.string (inspect (js_to_value v_js)))
|
||||
|
||||
let api_type_of v_js =
|
||||
Js.Unsafe.inject (Js.string (type_of (js_to_value v_js)))
|
||||
|
||||
let api_inspect v_js =
|
||||
Js.Unsafe.inject (Js.string (inspect (js_to_value v_js)))
|
||||
|
||||
let api_engine () =
|
||||
Js.Unsafe.inject (Js.string "ocaml-vm-wasm")
|
||||
|
||||
let api_register_native name_js callback_js =
|
||||
let name = Js.to_string name_js in
|
||||
let native_fn args =
|
||||
let js_args = args |> List.map value_to_js |> Array.of_list in
|
||||
js_to_value (Js.Unsafe.fun_call callback_js [| Js.Unsafe.inject (Js.array js_args) |])
|
||||
in
|
||||
ignore (env_bind global_env name (NativeFn (name, native_fn)));
|
||||
Js.Unsafe.inject Js.null
|
||||
|
||||
let api_call_fn fn_js args_js =
|
||||
try
|
||||
let fn = js_to_value fn_js in
|
||||
let args = Array.to_list (Array.map js_to_value (Js.to_array (Js.Unsafe.coerce args_js))) in
|
||||
return_via_side_channel (value_to_js (call_sx_fn fn args))
|
||||
with
|
||||
| Eval_error msg ->
|
||||
ignore (Js.Unsafe.meth_call
|
||||
(Js.Unsafe.get Js.Unsafe.global (Js.string "console"))
|
||||
"error" [| Js.Unsafe.inject (Js.string ("[sx] callFn: " ^ msg)) |]);
|
||||
Js.Unsafe.inject Js.null
|
||||
| exn ->
|
||||
ignore (Js.Unsafe.meth_call
|
||||
(Js.Unsafe.get Js.Unsafe.global (Js.string "console"))
|
||||
"error" [| Js.Unsafe.inject (Js.string ("[sx] callFn: " ^ Printexc.to_string exn)) |]);
|
||||
Js.Unsafe.inject Js.null
|
||||
|
||||
let api_is_callable fn_js =
|
||||
if Js.Unsafe.equals fn_js Js.null || Js.Unsafe.equals fn_js Js.undefined then
|
||||
Js.Unsafe.inject (Js.bool false)
|
||||
else
|
||||
let h = Js.Unsafe.get fn_js (Js.string "__sx_handle") in
|
||||
if Js.Unsafe.equals h Js.undefined then Js.Unsafe.inject (Js.bool false)
|
||||
else Js.Unsafe.inject (Js.bool (is_callable (get_handle (Js.float_of_number (Js.Unsafe.coerce h) |> int_of_float))))
|
||||
|
||||
let api_fn_arity fn_js =
|
||||
let h = Js.Unsafe.get fn_js (Js.string "__sx_handle") in
|
||||
if Js.Unsafe.equals h Js.undefined then Js.Unsafe.inject (Js.number_of_float (-1.0))
|
||||
else
|
||||
let v = get_handle (Js.float_of_number (Js.Unsafe.coerce h) |> int_of_float) in
|
||||
match v with
|
||||
| Lambda l -> Js.Unsafe.inject (Js.number_of_float (float_of_int (List.length l.l_params)))
|
||||
| _ -> Js.Unsafe.inject (Js.number_of_float (-1.0))
|
||||
|
||||
(* ================================================================== *)
|
||||
(* Platform bindings (registered in global env) *)
|
||||
(* ================================================================== *)
|
||||
|
||||
let () =
|
||||
let bind name fn = ignore (env_bind global_env name (NativeFn (name, fn))) in
|
||||
|
||||
(* --- Evaluation --- *)
|
||||
bind "cek-eval" (fun args ->
|
||||
match args with
|
||||
| [String s] -> let e = Sx_parser.parse_all s in (match e with h :: _ -> Sx_ref.eval_expr h (Env global_env) | [] -> Nil)
|
||||
| [expr] -> Sx_ref.eval_expr expr (Env global_env)
|
||||
| [expr; env_val] -> Sx_ref.eval_expr expr env_val
|
||||
| _ -> raise (Eval_error "cek-eval: expected 1-2 args"));
|
||||
|
||||
bind "eval-expr-cek" (fun args ->
|
||||
match args with
|
||||
| [expr; e] -> Sx_ref.eval_expr expr e
|
||||
| [expr] -> Sx_ref.eval_expr expr (Env global_env)
|
||||
| _ -> raise (Eval_error "eval-expr-cek: expected 1-2 args"));
|
||||
|
||||
bind "cek-call" (fun args ->
|
||||
match args with
|
||||
| [f; Nil] -> Sx_ref.eval_expr (List [f]) (Env global_env)
|
||||
| [f; List al] -> Sx_ref.eval_expr (List (f :: al)) (Env global_env)
|
||||
| [f; a] -> Sx_ref.eval_expr (List [f; a]) (Env global_env)
|
||||
| [f] -> Sx_ref.eval_expr (List [f]) (Env global_env)
|
||||
| f :: rest -> Sx_ref.eval_expr (List (f :: rest)) (Env global_env)
|
||||
| _ -> raise (Eval_error "cek-call: expected function and args"));
|
||||
|
||||
bind "sx-parse" (fun args ->
|
||||
match args with
|
||||
| [String src] -> List (Sx_parser.parse_all src)
|
||||
| _ -> raise (Eval_error "sx-parse: expected string"));
|
||||
|
||||
bind "sx-serialize" (fun args ->
|
||||
match args with
|
||||
| [v] -> String (inspect v)
|
||||
| _ -> raise (Eval_error "sx-serialize: expected 1 arg"));
|
||||
|
||||
(* --- Assertions & equality --- *)
|
||||
let rec deep_equal a b =
|
||||
match a, b with
|
||||
| Nil, Nil -> true | Bool a, Bool b -> a = b
|
||||
| Number a, Number b -> a = b | String a, String b -> a = b
|
||||
| Symbol a, Symbol b -> a = b | Keyword a, Keyword b -> a = b
|
||||
| (List a | ListRef { contents = a }), (List b | ListRef { contents = b }) ->
|
||||
List.length a = List.length b && List.for_all2 deep_equal a b
|
||||
| Dict a, Dict b ->
|
||||
let ka = Hashtbl.fold (fun k _ acc -> k :: acc) a [] in
|
||||
let kb = Hashtbl.fold (fun k _ acc -> k :: acc) b [] in
|
||||
List.length ka = List.length kb &&
|
||||
List.for_all (fun k -> Hashtbl.mem b k &&
|
||||
deep_equal (Hashtbl.find a k) (Hashtbl.find b k)) ka
|
||||
| _ -> false
|
||||
in
|
||||
bind "equal?" (fun args -> match args with [a; b] -> Bool (deep_equal a b) | _ -> raise (Eval_error "equal?: 2 args"));
|
||||
bind "assert" (fun args ->
|
||||
match args with
|
||||
| [cond] -> if not (sx_truthy cond) then raise (Eval_error "Assertion failed"); Bool true
|
||||
| [cond; msg] -> if not (sx_truthy cond) then raise (Eval_error ("Assertion: " ^ value_to_string msg)); Bool true
|
||||
| _ -> raise (Eval_error "assert: 1-2 args"));
|
||||
|
||||
bind "try-call" (fun args ->
|
||||
match args with
|
||||
| [thunk] ->
|
||||
(try ignore (Sx_ref.eval_expr (List [thunk]) (Env global_env));
|
||||
let d = Hashtbl.create 2 in Hashtbl.replace d "ok" (Bool true); Dict d
|
||||
with Eval_error msg ->
|
||||
let d = Hashtbl.create 2 in Hashtbl.replace d "ok" (Bool false); Hashtbl.replace d "error" (String msg); Dict d)
|
||||
| _ -> raise (Eval_error "try-call: 1 arg"));
|
||||
|
||||
(* --- List mutation --- *)
|
||||
bind "append!" (fun args ->
|
||||
match args with
|
||||
| [ListRef r; v] -> r := !r @ [v]; ListRef r
|
||||
| [List items; v] -> List (items @ [v])
|
||||
| _ -> raise (Eval_error "append!: list and value"));
|
||||
|
||||
(* --- Environment ops --- *)
|
||||
(* Use unwrap_env for nil/dict tolerance, matching the server kernel *)
|
||||
let uw = Sx_runtime.unwrap_env in
|
||||
bind "make-env" (fun _ -> Env (make_env ()));
|
||||
bind "global-env" (fun _ -> Env global_env);
|
||||
bind "env-has?" (fun args -> match args with [e; String k] | [e; Keyword k] -> Bool (env_has (uw e) k) | _ -> raise (Eval_error "env-has?"));
|
||||
bind "env-get" (fun args -> match args with [e; String k] | [e; Keyword k] -> env_get (uw e) k | _ -> raise (Eval_error "env-get"));
|
||||
bind "env-bind!" (fun args -> match args with [e; String k; v] | [e; Keyword k; v] -> env_bind (uw e) k v | _ -> raise (Eval_error "env-bind!"));
|
||||
bind "env-set!" (fun args -> match args with [e; String k; v] | [e; Keyword k; v] -> env_set (uw e) k v | _ -> raise (Eval_error "env-set!"));
|
||||
bind "env-extend" (fun args -> match args with [e] -> Env (env_extend (uw e)) | _ -> raise (Eval_error "env-extend"));
|
||||
bind "env-merge" (fun args -> match args with [a; b] -> Sx_runtime.env_merge a b | _ -> raise (Eval_error "env-merge"));
|
||||
|
||||
(* --- Type constructors --- *)
|
||||
bind "make-symbol" (fun args -> match args with [String s] -> Symbol s | [v] -> Symbol (value_to_string v) | _ -> raise (Eval_error "make-symbol"));
|
||||
bind "make-keyword" (fun args -> match args with [String s] -> Keyword s | _ -> raise (Eval_error "make-keyword"));
|
||||
bind "keyword-name" (fun args -> match args with [Keyword k] -> String k | _ -> raise (Eval_error "keyword-name"));
|
||||
bind "symbol-name" (fun args -> match args with [Symbol s] -> String s | _ -> raise (Eval_error "symbol-name"));
|
||||
|
||||
(* --- Component/Island accessors (must handle both types) --- *)
|
||||
bind "component-name" (fun args ->
|
||||
match args with [Component c] -> String c.c_name | [Island i] -> String i.i_name | _ -> String "");
|
||||
bind "component-closure" (fun args ->
|
||||
match args with [Component c] -> Env c.c_closure | [Island i] -> Env i.i_closure | _ -> Dict (Hashtbl.create 0));
|
||||
bind "component-params" (fun args ->
|
||||
match args with
|
||||
| [Component c] -> List (List.map (fun s -> String s) c.c_params)
|
||||
| [Island i] -> List (List.map (fun s -> String s) i.i_params)
|
||||
| _ -> Nil);
|
||||
bind "component-body" (fun args ->
|
||||
match args with [Component c] -> c.c_body | [Island i] -> i.i_body | _ -> Nil);
|
||||
let has_children_impl = NativeFn ("component-has-children?", fun args ->
|
||||
match args with [Component c] -> Bool c.c_has_children | [Island i] -> Bool i.i_has_children | _ -> Bool false) in
|
||||
ignore (env_bind global_env "component-has-children" has_children_impl);
|
||||
ignore (env_bind global_env "component-has-children?" has_children_impl);
|
||||
bind "component-affinity" (fun args ->
|
||||
match args with [Component c] -> String c.c_affinity | [Island _] -> String "client" | _ -> String "auto");
|
||||
bind "component-param-types" (fun _ -> Nil);
|
||||
bind "component-set-param-types!" (fun _ -> Nil);
|
||||
|
||||
(* --- CEK stepping --- *)
|
||||
bind "make-cek-state" (fun args -> match args with [c; e; k] -> Sx_ref.make_cek_state c e k | _ -> raise (Eval_error "make-cek-state"));
|
||||
bind "cek-step" (fun args -> match args with [s] -> Sx_ref.cek_step s | _ -> raise (Eval_error "cek-step"));
|
||||
bind "cek-phase" (fun args -> match args with [s] -> Sx_ref.cek_phase s | _ -> raise (Eval_error "cek-phase"));
|
||||
bind "cek-value" (fun args -> match args with [s] -> Sx_ref.cek_value s | _ -> raise (Eval_error "cek-value"));
|
||||
bind "cek-terminal?" (fun args -> match args with [s] -> Sx_ref.cek_terminal_p s | _ -> raise (Eval_error "cek-terminal?"));
|
||||
bind "cek-kont" (fun args -> match args with [s] -> Sx_ref.cek_kont s | _ -> raise (Eval_error "cek-kont"));
|
||||
bind "frame-type" (fun args -> match args with [f] -> Sx_ref.frame_type f | _ -> raise (Eval_error "frame-type"));
|
||||
|
||||
(* --- Strict mode --- *)
|
||||
ignore (env_bind global_env "*strict*" (Bool false));
|
||||
ignore (env_bind global_env "*prim-param-types*" Nil);
|
||||
bind "set-strict!" (fun args -> match args with [v] -> Sx_ref._strict_ref := v; ignore (env_set global_env "*strict*" v); Nil | _ -> Nil);
|
||||
bind "set-prim-param-types!" (fun args -> match args with [v] -> Sx_ref._prim_param_types_ref := v; ignore (env_set global_env "*prim-param-types*" v); Nil | _ -> Nil);
|
||||
bind "value-matches-type?" (fun args -> match args with [v; t] -> Sx_ref.value_matches_type_p v t | _ -> Nil);
|
||||
|
||||
(* --- Apply --- *)
|
||||
bind "apply" (fun args ->
|
||||
match args with
|
||||
| f :: rest ->
|
||||
let all_args = match List.rev rest with List last :: prefix -> List.rev prefix @ last | _ -> rest in
|
||||
Sx_runtime.sx_call f all_args
|
||||
| _ -> raise (Eval_error "apply"));
|
||||
|
||||
(* --- Scope stack --- *)
|
||||
(* Scope primitives (scope-push!, scope-pop!, context, collect!, collected,
|
||||
emit!, emitted, scope-emit!, scope-emitted, etc.) are registered by
|
||||
Sx_scope module initialization in the primitives table.
|
||||
The CEK evaluator falls through to the primitives table when a symbol
|
||||
isn't in the env, so these work automatically.
|
||||
Only provide-push!/provide-pop! need explicit env bindings as aliases. *)
|
||||
bind "provide-push!" (fun args -> match args with [n; v] -> Sx_runtime.provide_push n v | _ -> raise (Eval_error "provide-push!"));
|
||||
bind "provide-pop!" (fun args -> match args with [n] -> Sx_runtime.provide_pop n | _ -> raise (Eval_error "provide-pop!"));
|
||||
|
||||
(* --- Fragment / raw HTML --- *)
|
||||
bind "<>" (fun args ->
|
||||
RawHTML (String.concat "" (List.map (fun a ->
|
||||
match a with String s | RawHTML s -> s | Nil -> ""
|
||||
| List _ -> Sx_render.render_to_html a global_env
|
||||
| _ -> value_to_string a) args)));
|
||||
bind "raw!" (fun args ->
|
||||
RawHTML (String.concat "" (List.map (fun a ->
|
||||
match a with String s | RawHTML s -> s | _ -> value_to_string a) args)));
|
||||
|
||||
bind "define-page-helper" (fun _ -> Nil);
|
||||
|
||||
(* --- Render --- *)
|
||||
Sx_render.setup_render_env global_env;
|
||||
bind "set-render-active!" (fun _ -> Nil);
|
||||
bind "render-active?" (fun _ -> Bool true);
|
||||
bind "is-html-tag?" (fun args -> match args with [String s] -> Bool (Sx_render.is_html_tag s) | _ -> Bool false);
|
||||
|
||||
(* --- Render constants needed by web adapters --- *)
|
||||
let html_tags = List (List.map (fun s -> String s) Sx_render.html_tags) in
|
||||
let void_elements = List (List.map (fun s -> String s) Sx_render.void_elements) in
|
||||
let boolean_attrs = List (List.map (fun s -> String s) Sx_render.boolean_attrs) in
|
||||
ignore (env_bind global_env "HTML_TAGS" html_tags);
|
||||
ignore (env_bind global_env "VOID_ELEMENTS" void_elements);
|
||||
ignore (env_bind global_env "BOOLEAN_ATTRS" boolean_attrs);
|
||||
|
||||
(* --- Error handling --- *)
|
||||
bind "cek-try" (fun args ->
|
||||
match args with
|
||||
| [thunk; handler] ->
|
||||
(try Sx_ref.cek_call thunk Nil
|
||||
with Eval_error msg -> Sx_ref.cek_call handler (String msg))
|
||||
| [thunk] ->
|
||||
(try let r = Sx_ref.cek_call thunk Nil in
|
||||
List [Symbol "ok"; r]
|
||||
with Eval_error msg -> List [Symbol "error"; String msg])
|
||||
| _ -> Nil);
|
||||
|
||||
(* --- Evaluator bridge functions needed by spec .sx files --- *)
|
||||
bind "eval-expr" (fun args ->
|
||||
match args with [expr; e] -> Sx_ref.eval_expr expr e | [expr] -> Sx_ref.eval_expr expr (Env global_env) | _ -> Nil);
|
||||
bind "trampoline" (fun args -> match args with [v] -> !Sx_primitives._sx_trampoline_fn v | _ -> Nil);
|
||||
bind "expand-macro" (fun args ->
|
||||
match args with [mac; raw; Env e] -> Sx_ref.expand_macro mac raw (Env e) | [mac; raw] -> Sx_ref.expand_macro mac raw (Env global_env) | _ -> Nil);
|
||||
bind "call-lambda" (fun args ->
|
||||
match args with
|
||||
| [fn_val; call_args; Env _e] -> Sx_ref.cek_call fn_val call_args
|
||||
| [fn_val; call_args] -> Sx_ref.cek_call fn_val call_args
|
||||
| _ -> raise (Eval_error "call-lambda: expected (fn args env?)"));
|
||||
bind "cek-call" (fun args ->
|
||||
match args with [f; a] -> Sx_ref.cek_call f a | _ -> raise (Eval_error "cek-call"));
|
||||
bind "cek-eval" (fun args ->
|
||||
match args with [expr] -> Sx_ref.eval_expr expr (Env global_env) | [expr; e] -> Sx_ref.eval_expr expr e | _ -> Nil);
|
||||
bind "qq-expand-runtime" (fun args ->
|
||||
match args with [template] -> Sx_ref.qq_expand template (Env global_env) | [template; Env e] -> Sx_ref.qq_expand template (Env e) | _ -> Nil);
|
||||
|
||||
(* --- Type predicates needed by adapters --- *)
|
||||
bind "thunk?" (fun args -> match args with [Thunk _] -> Bool true | _ -> Bool false);
|
||||
bind "thunk-expr" (fun args -> match args with [v] -> thunk_expr v | _ -> Nil);
|
||||
bind "thunk-env" (fun args -> match args with [v] -> thunk_env v | _ -> Nil);
|
||||
bind "lambda?" (fun args -> match args with [Lambda _] -> Bool true | _ -> Bool false);
|
||||
bind "macro?" (fun args -> match args with [Macro _] -> Bool true | _ -> Bool false);
|
||||
bind "island?" (fun args -> match args with [Island _] -> Bool true | _ -> Bool false);
|
||||
bind "component?" (fun args -> match args with [Component _] | [Island _] -> Bool true | _ -> Bool false);
|
||||
bind "callable?" (fun args -> match args with [NativeFn _] | [Lambda _] | [Component _] | [Island _] -> Bool true | _ -> Bool false);
|
||||
bind "spread?" (fun args -> match args with [Spread _] -> Bool true | _ -> Bool false);
|
||||
bind "continuation?" (fun args -> match args with [Continuation _] -> Bool true | _ -> Bool false);
|
||||
bind "lambda-params" (fun args -> match args with [Lambda l] -> List (List.map (fun s -> String s) l.l_params) | _ -> List []);
|
||||
bind "lambda-body" (fun args -> match args with [Lambda l] -> l.l_body | _ -> Nil);
|
||||
bind "lambda-closure" (fun args -> match args with [Lambda l] -> Env l.l_closure | _ -> Dict (Hashtbl.create 0));
|
||||
|
||||
(* --- Core operations needed by adapters --- *)
|
||||
bind "spread-attrs" (fun args ->
|
||||
match args with [Spread pairs] -> let d = Hashtbl.create 4 in List.iter (fun (k, v) -> Hashtbl.replace d k v) pairs; Dict d | _ -> Dict (Hashtbl.create 0));
|
||||
bind "make-spread" (fun args ->
|
||||
match args with [Dict d] -> Spread (Hashtbl.fold (fun k v acc -> (k, v) :: acc) d []) | _ -> Nil);
|
||||
bind "make-raw-html" (fun args -> match args with [String s] -> RawHTML s | [v] -> RawHTML (value_to_string v) | _ -> Nil);
|
||||
bind "raw-html-content" (fun args -> match args with [RawHTML s] -> String s | [String s] -> String s | _ -> String "");
|
||||
bind "empty-dict?" (fun args -> match args with [Dict d] -> Bool (Hashtbl.length d = 0) | _ -> Bool true);
|
||||
bind "identical?" (fun args -> match args with [a; b] -> Bool (a == b) | _ -> raise (Eval_error "identical?"));
|
||||
bind "for-each-indexed" (fun args ->
|
||||
match args with
|
||||
| [fn_val; List items] | [fn_val; ListRef { contents = items }] ->
|
||||
List.iteri (fun i item ->
|
||||
ignore (Sx_ref.eval_expr (List [fn_val; Number (float_of_int i); item]) (Env global_env))
|
||||
) items; Nil
|
||||
| _ -> Nil);
|
||||
|
||||
(* --- String/number helpers used by orchestration/browser --- *)
|
||||
bind "make-sx-expr" (fun args -> match args with [String s] -> SxExpr s | _ -> raise (Eval_error "make-sx-expr"));
|
||||
bind "sx-expr-source" (fun args -> match args with [SxExpr s] -> String s | [String s] -> String s | _ -> raise (Eval_error "sx-expr-source"));
|
||||
bind "parse-int" (fun args ->
|
||||
match args with
|
||||
| [String s] -> (try Number (float_of_int (int_of_string s)) with _ -> Nil)
|
||||
| [String s; default_val] -> (try Number (float_of_int (int_of_string s)) with _ -> default_val)
|
||||
| [Number n] | [Number n; _] -> Number (Float.round n)
|
||||
| [_; default_val] -> default_val | _ -> Nil);
|
||||
bind "parse-number" (fun args -> match args with [String s] -> (try Number (float_of_string s) with _ -> Nil) | _ -> Nil);
|
||||
|
||||
(* --- Server-only stubs (no-ops in browser) --- *)
|
||||
bind "query" (fun _ -> Nil);
|
||||
bind "action" (fun _ -> Nil);
|
||||
bind "request-arg" (fun args -> match args with [_; d] -> d | _ -> Nil);
|
||||
bind "request-method" (fun _ -> String "GET");
|
||||
bind "ctx" (fun _ -> Nil);
|
||||
bind "helper" (fun _ -> Nil)
|
||||
|
||||
(* ================================================================== *)
|
||||
(* Register global SxKernel object *)
|
||||
(* ================================================================== *)
|
||||
|
||||
let () =
|
||||
let sx = Js.Unsafe.obj [||] in
|
||||
let wrap fn = Js.Unsafe.fun_call
|
||||
(Js.Unsafe.pure_js_expr "(function(fn) { return function() { globalThis.__sxR = undefined; var r = fn.apply(null, arguments); return globalThis.__sxR !== undefined ? globalThis.__sxR : r; }; })")
|
||||
[| Js.Unsafe.inject (Js.wrap_callback fn) |] in
|
||||
|
||||
Js.Unsafe.set sx (Js.string "parse") (Js.wrap_callback api_parse);
|
||||
Js.Unsafe.set sx (Js.string "stringify") (Js.wrap_callback api_stringify);
|
||||
Js.Unsafe.set sx (Js.string "eval") (wrap api_eval);
|
||||
Js.Unsafe.set sx (Js.string "evalExpr") (wrap api_eval_expr);
|
||||
Js.Unsafe.set sx (Js.string "renderToHtml") (Js.wrap_callback api_render_to_html);
|
||||
Js.Unsafe.set sx (Js.string "load") (Js.wrap_callback api_load);
|
||||
Js.Unsafe.set sx (Js.string "typeOf") (Js.wrap_callback api_type_of);
|
||||
Js.Unsafe.set sx (Js.string "inspect") (Js.wrap_callback api_inspect);
|
||||
Js.Unsafe.set sx (Js.string "engine") (Js.wrap_callback api_engine);
|
||||
Js.Unsafe.set sx (Js.string "registerNative") (Js.wrap_callback api_register_native);
|
||||
Js.Unsafe.set sx (Js.string "loadSource") (Js.wrap_callback api_load);
|
||||
Js.Unsafe.set sx (Js.string "callFn") (wrap api_call_fn);
|
||||
Js.Unsafe.set sx (Js.string "isCallable") (Js.wrap_callback api_is_callable);
|
||||
Js.Unsafe.set sx (Js.string "fnArity") (Js.wrap_callback api_fn_arity);
|
||||
|
||||
Js.Unsafe.set Js.Unsafe.global (Js.string "SxKernel") sx
|
||||
@@ -1,218 +1,35 @@
|
||||
;; ---------------------------------------------------------------------------
|
||||
;; Examples — individual reactive island demo pages
|
||||
;; ---------------------------------------------------------------------------
|
||||
(defcomp ~reactive-islands/demo/reactive-islands-demo-content () (~docs/page :title "Reactive Islands — Examples" (~docs/section :title "Live interactive islands" :id "intro" (p (strong "Every example below is a live interactive island") " — not a static code snippet. Click the buttons, type in the inputs. The signal runtime is defined in " (code "signals.sx") ", bootstrapped to JavaScript. No hand-written signal logic.") (p "Each island uses " (code "defisland") " with signals (" (code "signal") ", " (code "deref") ", " (code "reset!") ", " (code "swap!") "), derived values (" (code "computed") "), side effects (" (code "effect") "), and batch updates (" (code "batch") ").")) (~docs/section :title "Examples" :id "examples" (ol :class "space-y-1" (map (fn (item) (li (a :href (get item "href") :sx-get (get item "href") :sx-target "#main-panel" :sx-select "#main-panel" :sx-swap "outerHTML" :sx-push-url "true" :class "text-violet-600 hover:underline" (get item "label")))) reactive-examples-nav-items)))))
|
||||
|
||||
;; Overview page — summary with links to individual examples
|
||||
(defcomp ~reactive-islands/demo/reactive-islands-demo-content ()
|
||||
(~docs/page :title "Reactive Islands — Examples"
|
||||
(~docs/section :title "Live interactive islands" :id "intro"
|
||||
(p (strong "Every example below is a live interactive island") " — not a static code snippet. Click the buttons, type in the inputs. The signal runtime is defined in " (code "signals.sx") ", bootstrapped to JavaScript. No hand-written signal logic.")
|
||||
(p "Each island uses " (code "defisland") " with signals (" (code "signal") ", " (code "deref") ", " (code "reset!") ", " (code "swap!") "), derived values (" (code "computed") "), side effects (" (code "effect") "), and batch updates (" (code "batch") ")."))
|
||||
(~docs/section :title "Examples" :id "examples"
|
||||
(ol :class "space-y-1"
|
||||
(map (fn (item)
|
||||
(li (a :href (get item "href")
|
||||
:sx-get (get item "href") :sx-target "#main-panel"
|
||||
:sx-select "#main-panel" :sx-swap "outerHTML"
|
||||
:sx-push-url "true"
|
||||
:class "text-violet-600 hover:underline"
|
||||
(get item "label"))))
|
||||
reactive-examples-nav-items)))))
|
||||
(defcomp ~reactive-islands/demo/example-counter () (~docs/page :title "Signal + Computed + Effect" (p "A signal holds a value. A computed derives from it. Click the buttons — the counter and doubled value update instantly, no server round-trip.") (~reactive-islands/index/demo-counter :initial 0) (~docs/code :src (highlight "(defisland ~reactive-islands/demo/counter (&key initial)\n (let ((count (signal (or initial 0)))\n (doubled (computed (fn () (* 2 (deref count))))))\n (div :class \"...\"\n (button :on-click (fn (e) (swap! count dec)) \"−\")\n (span (deref count))\n (button :on-click (fn (e) (swap! count inc)) \"+\")\n (p \"doubled: \" (deref doubled)))))" "lisp")) (p (code "(deref count)") " in a text position creates a reactive text node. When " (code "count") " changes, " (em "only that text node") " updates. " (code "doubled") " recomputes automatically. No diffing.")))
|
||||
|
||||
;; ---------------------------------------------------------------------------
|
||||
;; Individual example pages
|
||||
;; ---------------------------------------------------------------------------
|
||||
(defcomp ~reactive-islands/demo/example-temperature () (~docs/page :title "Temperature Converter" (p "Two derived values from one signal. Click to change Celsius — Fahrenheit updates reactively.") (~reactive-islands/index/demo-temperature) (~docs/code :src (highlight "(defisland ~reactive-islands/demo/temperature ()\n (let ((celsius (signal 20)))\n (div :class \"...\"\n (button :on-click (fn (e) (swap! celsius (fn (c) (- c 5)))) \"−5\")\n (span (deref celsius))\n (button :on-click (fn (e) (swap! celsius (fn (c) (+ c 5)))) \"+5\")\n (span \"°C = \")\n (span (+ (* (deref celsius) 1.8) 32))\n (span \"°F\"))))" "lisp")) (p "The actual implementation uses " (code "computed") " for Fahrenheit: " (code "(computed (fn () (+ (* (deref celsius) 1.8) 32)))") ". The " (code "(deref fahrenheit)") " in the span creates a reactive text node that updates when celsius changes.") (~reactive-islands/test-runner :test-src (str "(defsuite \"temperature converter\"\n" " (deftest \"initial celsius is 20\"\n" " (let ((celsius (signal 20)))\n" " (assert-signal-value celsius 20)))\n" " (deftest \"computed fahrenheit derives from celsius\"\n" " (let ((celsius (signal 20))\n" " (fahrenheit (computed (fn () (+ (* (deref celsius) 1.8) 32)))))\n" " (assert-signal-value fahrenheit 68)\n" " (assert-computed-depends-on fahrenheit celsius)))\n" " (deftest \"+5 increments celsius\"\n" " (let ((celsius (signal 20))\n" " (btn (mock-element \"button\")))\n" " (mock-add-listener! btn \"click\"\n" " (fn (e) (swap! celsius (fn (c) (+ c 5)))))\n" " (simulate-click btn)\n" " (assert-signal-value celsius 25)))\n" " (deftest \"−5 decrements celsius\"\n" " (let ((celsius (signal 20))\n" " (btn (mock-element \"button\")))\n" " (mock-add-listener! btn \"click\"\n" " (fn (e) (swap! celsius (fn (c) (- c 5)))))\n" " (simulate-click btn)\n" " (assert-signal-value celsius 15)))\n" " (deftest \"fahrenheit updates on celsius change\"\n" " (let ((celsius (signal 20))\n" " (fahrenheit (computed (fn () (+ (* (deref celsius) 1.8) 32)))))\n" " (reset! celsius 0)\n" " (assert-signal-value fahrenheit 32)\n" " (reset! celsius 100)\n" " (assert-signal-value fahrenheit 212)))\n" " (deftest \"multiple clicks accumulate\"\n" " (let ((celsius (signal 20))\n" " (fahrenheit (computed (fn () (+ (* (deref celsius) 1.8) 32))))\n" " (btn (mock-element \"button\")))\n" " (mock-add-listener! btn \"click\"\n" " (fn (e) (swap! celsius (fn (c) (+ c 5)))))\n" " (simulate-click btn)\n" " (simulate-click btn)\n" " (simulate-click btn)\n" " (assert-signal-value celsius 35)\n" " (assert-signal-value fahrenheit 95))))"))))
|
||||
|
||||
(defcomp ~reactive-islands/demo/example-counter ()
|
||||
(~docs/page :title "Signal + Computed + Effect"
|
||||
(p "A signal holds a value. A computed derives from it. Click the buttons — the counter and doubled value update instantly, no server round-trip.")
|
||||
(~reactive-islands/index/demo-counter :initial 0)
|
||||
(~docs/code :src (highlight "(defisland ~reactive-islands/demo/counter (&key initial)\n (let ((count (signal (or initial 0)))\n (doubled (computed (fn () (* 2 (deref count))))))\n (div :class \"...\"\n (button :on-click (fn (e) (swap! count dec)) \"−\")\n (span (deref count))\n (button :on-click (fn (e) (swap! count inc)) \"+\")\n (p \"doubled: \" (deref doubled)))))" "lisp"))
|
||||
(p (code "(deref count)") " in a text position creates a reactive text node. When " (code "count") " changes, " (em "only that text node") " updates. " (code "doubled") " recomputes automatically. No diffing.")))
|
||||
(defcomp ~reactive-islands/demo/example-stopwatch () (~docs/page :title "Effect + Cleanup: Stopwatch" (p "Effects can return cleanup functions. This stopwatch starts a " (code "set-interval") " — the cleanup clears it when the running signal toggles off.") (~reactive-islands/index/demo-stopwatch) (~docs/code :src (highlight "(defisland ~reactive-islands/demo/stopwatch ()\n (let ((running (signal false))\n (elapsed (signal 0))\n (time-text (create-text-node \"0.0s\"))\n (btn-text (create-text-node \"Start\")))\n ;; Timer: effect creates interval, cleanup clears it\n (effect (fn ()\n (when (deref running)\n (let ((id (set-interval (fn () (swap! elapsed inc)) 100)))\n (fn () (clear-interval id))))))\n ;; Display: updates text node when elapsed changes\n (effect (fn ()\n (let ((e (deref elapsed)))\n (dom-set-text-content time-text\n (str (floor (/ e 10)) \".\" (mod e 10) \"s\")))))\n ;; Button label\n (effect (fn ()\n (dom-set-text-content btn-text\n (if (deref running) \"Stop\" \"Start\"))))\n (div :class \"...\"\n (span time-text)\n (button :on-click (fn (e) (swap! running not)) btn-text)\n (button :on-click (fn (e)\n (reset! running false) (reset! elapsed 0)) \"Reset\"))))" "lisp")) (p "Three effects, each tracking different signals. The timer effect's cleanup fires before each re-run — toggling " (code "running") " off clears the interval. No hook rules: effects can appear anywhere, in any order.")))
|
||||
|
||||
(defcomp ~reactive-islands/demo/example-temperature ()
|
||||
(~docs/page :title "Temperature Converter"
|
||||
(p "Two derived values from one signal. Click to change Celsius — Fahrenheit updates reactively.")
|
||||
(~reactive-islands/index/demo-temperature)
|
||||
(~docs/code :src (highlight "(defisland ~reactive-islands/demo/temperature ()\n (let ((celsius (signal 20)))\n (div :class \"...\"\n (button :on-click (fn (e) (swap! celsius (fn (c) (- c 5)))) \"−5\")\n (span (deref celsius))\n (button :on-click (fn (e) (swap! celsius (fn (c) (+ c 5)))) \"+5\")\n (span \"°C = \")\n (span (+ (* (deref celsius) 1.8) 32))\n (span \"°F\"))))" "lisp"))
|
||||
(p "The actual implementation uses " (code "computed") " for Fahrenheit: " (code "(computed (fn () (+ (* (deref celsius) 1.8) 32)))") ". The " (code "(deref fahrenheit)") " in the span creates a reactive text node that updates when celsius changes.")))
|
||||
(defcomp ~reactive-islands/demo/example-imperative () (~docs/page :title "Imperative Pattern" (p "For complex reactivity (dynamic classes, conditional text), use the imperative pattern: " (code "create-text-node") " + " (code "effect") " + " (code "dom-set-text-content") ".") (~reactive-islands/index/demo-imperative) (~docs/code :src (highlight "(defisland ~reactive-islands/demo/imperative ()\n (let ((count (signal 0))\n (text-node (create-text-node \"0\")))\n ;; Explicit effect: re-runs when count changes\n (effect (fn ()\n (dom-set-text-content text-node (str (deref count)))))\n (div :class \"...\"\n (span text-node)\n (button :on-click (fn (e) (swap! count inc)) \"+\"))))" "lisp")) (p "Two patterns exist: " (strong "declarative") " (" (code "(span (deref sig))") " — auto-reactive via " (code "reactive-text") ") and " (strong "imperative") " (" (code "create-text-node") " + " (code "effect") " — explicit, full control). Use declarative for simple text, imperative for dynamic classes, conditional DOM, or complex updates.")))
|
||||
|
||||
(defcomp ~reactive-islands/demo/example-stopwatch ()
|
||||
(~docs/page :title "Effect + Cleanup: Stopwatch"
|
||||
(p "Effects can return cleanup functions. This stopwatch starts a " (code "set-interval") " — the cleanup clears it when the running signal toggles off.")
|
||||
(~reactive-islands/index/demo-stopwatch)
|
||||
(~docs/code :src (highlight "(defisland ~reactive-islands/demo/stopwatch ()\n (let ((running (signal false))\n (elapsed (signal 0))\n (time-text (create-text-node \"0.0s\"))\n (btn-text (create-text-node \"Start\")))\n ;; Timer: effect creates interval, cleanup clears it\n (effect (fn ()\n (when (deref running)\n (let ((id (set-interval (fn () (swap! elapsed inc)) 100)))\n (fn () (clear-interval id))))))\n ;; Display: updates text node when elapsed changes\n (effect (fn ()\n (let ((e (deref elapsed)))\n (dom-set-text-content time-text\n (str (floor (/ e 10)) \".\" (mod e 10) \"s\")))))\n ;; Button label\n (effect (fn ()\n (dom-set-text-content btn-text\n (if (deref running) \"Stop\" \"Start\"))))\n (div :class \"...\"\n (span time-text)\n (button :on-click (fn (e) (swap! running not)) btn-text)\n (button :on-click (fn (e)\n (reset! running false) (reset! elapsed 0)) \"Reset\"))))" "lisp"))
|
||||
(p "Three effects, each tracking different signals. The timer effect's cleanup fires before each re-run — toggling " (code "running") " off clears the interval. No hook rules: effects can appear anywhere, in any order.")))
|
||||
(defcomp ~reactive-islands/demo/example-reactive-list () (~docs/page :title "Reactive List" (p "When " (code "map") " is used with " (code "(deref signal)") " inside an island, it auto-upgrades to a reactive list. With " (code ":key") " attributes, existing DOM nodes are reused across updates — only additions, removals, and reorderings touch the DOM.") (~reactive-islands/index/demo-reactive-list) (~docs/code :src (highlight "(defisland ~reactive-islands/demo/reactive-list ()\n (let ((next-id (signal 1))\n (items (signal (list)))\n (add-item (fn (e)\n (batch (fn ()\n (swap! items (fn (old)\n (append old (dict \"id\" (deref next-id)\n \"text\" (str \"Item \" (deref next-id))))))\n (swap! next-id inc)))))\n (remove-item (fn (id)\n (swap! items (fn (old)\n (filter (fn (item) (not (= (get item \"id\") id))) old))))))\n (div\n (button :on-click add-item \"Add Item\")\n (span (deref (computed (fn () (len (deref items))))) \" items\")\n (ul\n (map (fn (item)\n (li :key (str (get item \"id\"))\n (span (get item \"text\"))\n (button :on-click (fn (e) (remove-item (get item \"id\"))) \"✕\")))\n (deref items))))))" "lisp")) (p (code ":key") " identifies each list item. When items change, the reconciler matches old and new keys — reusing existing DOM nodes, inserting new ones, and removing stale ones. Without keys, the list falls back to clear-and-rerender. " (code "batch") " groups the two signal writes into one update pass.")))
|
||||
|
||||
(defcomp ~reactive-islands/demo/example-imperative ()
|
||||
(~docs/page :title "Imperative Pattern"
|
||||
(p "For complex reactivity (dynamic classes, conditional text), use the imperative pattern: " (code "create-text-node") " + " (code "effect") " + " (code "dom-set-text-content") ".")
|
||||
(~reactive-islands/index/demo-imperative)
|
||||
(~docs/code :src (highlight "(defisland ~reactive-islands/demo/imperative ()\n (let ((count (signal 0))\n (text-node (create-text-node \"0\")))\n ;; Explicit effect: re-runs when count changes\n (effect (fn ()\n (dom-set-text-content text-node (str (deref count)))))\n (div :class \"...\"\n (span text-node)\n (button :on-click (fn (e) (swap! count inc)) \"+\"))))" "lisp"))
|
||||
(p "Two patterns exist: " (strong "declarative") " (" (code "(span (deref sig))") " — auto-reactive via " (code "reactive-text") ") and " (strong "imperative") " (" (code "create-text-node") " + " (code "effect") " — explicit, full control). Use declarative for simple text, imperative for dynamic classes, conditional DOM, or complex updates.")))
|
||||
(defcomp ~reactive-islands/demo/example-input-binding () (~docs/page :title "Input Binding" (p "The " (code ":bind") " attribute creates a two-way link between a signal and a form element. Type in the input — the signal updates. Change the signal — the input updates. Works with text inputs, checkboxes, radios, textareas, and selects.") (~reactive-islands/index/demo-input-binding) (~docs/code :src (highlight "(defisland ~reactive-islands/demo/input-binding ()\n (let ((name (signal \"\"))\n (agreed (signal false)))\n (div\n (input :type \"text\" :bind name\n :placeholder \"Type your name...\")\n (span \"Hello, \" (strong (deref name)) \"!\")\n (input :type \"checkbox\" :bind agreed)\n (when (deref agreed)\n (p \"Thanks for agreeing!\")))))" "lisp")) (p (code ":bind") " detects the element type automatically — text inputs use " (code "value") " + " (code "input") " event, checkboxes use " (code "checked") " + " (code "change") " event. The effect only updates the DOM when the value actually changed, preventing cursor jump.")))
|
||||
|
||||
(defcomp ~reactive-islands/demo/example-reactive-list ()
|
||||
(~docs/page :title "Reactive List"
|
||||
(p "When " (code "map") " is used with " (code "(deref signal)") " inside an island, it auto-upgrades to a reactive list. With " (code ":key") " attributes, existing DOM nodes are reused across updates — only additions, removals, and reorderings touch the DOM.")
|
||||
(~reactive-islands/index/demo-reactive-list)
|
||||
(~docs/code :src (highlight "(defisland ~reactive-islands/demo/reactive-list ()\n (let ((next-id (signal 1))\n (items (signal (list)))\n (add-item (fn (e)\n (batch (fn ()\n (swap! items (fn (old)\n (append old (dict \"id\" (deref next-id)\n \"text\" (str \"Item \" (deref next-id))))))\n (swap! next-id inc)))))\n (remove-item (fn (id)\n (swap! items (fn (old)\n (filter (fn (item) (not (= (get item \"id\") id))) old))))))\n (div\n (button :on-click add-item \"Add Item\")\n (span (deref (computed (fn () (len (deref items))))) \" items\")\n (ul\n (map (fn (item)\n (li :key (str (get item \"id\"))\n (span (get item \"text\"))\n (button :on-click (fn (e) (remove-item (get item \"id\"))) \"✕\")))\n (deref items))))))" "lisp"))
|
||||
(p (code ":key") " identifies each list item. When items change, the reconciler matches old and new keys — reusing existing DOM nodes, inserting new ones, and removing stale ones. Without keys, the list falls back to clear-and-rerender. " (code "batch") " groups the two signal writes into one update pass.")))
|
||||
(defcomp ~reactive-islands/demo/example-portal () (~docs/page :title "Portals" (p "A " (code "portal") " renders children into a DOM node " (em "outside") " the island's subtree. Essential for modals, tooltips, and toasts — anything that must escape " (code "overflow:hidden") " or z-index stacking.") (~reactive-islands/index/demo-portal) (~docs/code :src (highlight "(defisland ~reactive-islands/demo/portal ()\n (let ((open? (signal false)))\n (div\n (button :on-click (fn (e) (swap! open? not))\n (if (deref open?) \"Close Modal\" \"Open Modal\"))\n (portal \"#portal-root\"\n (when (deref open?)\n (div :class \"fixed inset-0 bg-black/50 ...\"\n :on-click (fn (e) (reset! open? false))\n (div :class \"bg-white rounded-lg p-6 ...\"\n :on-click (fn (e) (stop-propagation e))\n (h2 \"Portal Modal\")\n (p \"Rendered outside the island's DOM.\")\n (button :on-click (fn (e) (reset! open? false))\n \"Close\"))))))))" "lisp")) (p "The portal content lives in " (code "#portal-root") " (typically at the page body level), not inside the island. On island disposal, portal content is automatically removed from its target — the " (code "register-in-scope") " mechanism handles cleanup.")))
|
||||
|
||||
(defcomp ~reactive-islands/demo/example-input-binding ()
|
||||
(~docs/page :title "Input Binding"
|
||||
(p "The " (code ":bind") " attribute creates a two-way link between a signal and a form element. Type in the input — the signal updates. Change the signal — the input updates. Works with text inputs, checkboxes, radios, textareas, and selects.")
|
||||
(~reactive-islands/index/demo-input-binding)
|
||||
(~docs/code :src (highlight "(defisland ~reactive-islands/demo/input-binding ()\n (let ((name (signal \"\"))\n (agreed (signal false)))\n (div\n (input :type \"text\" :bind name\n :placeholder \"Type your name...\")\n (span \"Hello, \" (strong (deref name)) \"!\")\n (input :type \"checkbox\" :bind agreed)\n (when (deref agreed)\n (p \"Thanks for agreeing!\")))))" "lisp"))
|
||||
(p (code ":bind") " detects the element type automatically — text inputs use " (code "value") " + " (code "input") " event, checkboxes use " (code "checked") " + " (code "change") " event. The effect only updates the DOM when the value actually changed, preventing cursor jump.")))
|
||||
(defcomp ~reactive-islands/demo/example-error-boundary () (~docs/page :title "Error Boundaries" (p "When an island's rendering or effect throws, " (code "error-boundary") " catches the error and renders a fallback. The fallback receives the error and a retry function. Partial effects created before the error are disposed automatically.") (~reactive-islands/index/demo-error-boundary) (~docs/code :src (highlight "(defisland ~reactive-islands/demo/error-boundary ()\n (let ((throw? (signal false)))\n (error-boundary\n ;; Fallback: receives (err retry-fn)\n (fn (err retry-fn)\n (div :class \"p-3 bg-red-50 border border-red-200 rounded\"\n (p :class \"text-red-700\" (error-message err))\n (button :on-click (fn (e)\n (reset! throw? false) (invoke retry-fn))\n \"Retry\")))\n ;; Children: the happy path\n (do\n (when (deref throw?) (error \"Intentional explosion!\"))\n (p \"Everything is fine.\")))))" "lisp")) (p "React equivalent: " (code "componentDidCatch") " / " (code "ErrorBoundary") ". SX's version is simpler — one form, not a class. The " (code "error-boundary") " form is a render-dom special form in " (code "adapter-dom.sx") ".")))
|
||||
|
||||
(defcomp ~reactive-islands/demo/example-portal ()
|
||||
(~docs/page :title "Portals"
|
||||
(p "A " (code "portal") " renders children into a DOM node " (em "outside") " the island's subtree. Essential for modals, tooltips, and toasts — anything that must escape " (code "overflow:hidden") " or z-index stacking.")
|
||||
(~reactive-islands/index/demo-portal)
|
||||
(~docs/code :src (highlight "(defisland ~reactive-islands/demo/portal ()\n (let ((open? (signal false)))\n (div\n (button :on-click (fn (e) (swap! open? not))\n (if (deref open?) \"Close Modal\" \"Open Modal\"))\n (portal \"#portal-root\"\n (when (deref open?)\n (div :class \"fixed inset-0 bg-black/50 ...\"\n :on-click (fn (e) (reset! open? false))\n (div :class \"bg-white rounded-lg p-6 ...\"\n :on-click (fn (e) (stop-propagation e))\n (h2 \"Portal Modal\")\n (p \"Rendered outside the island's DOM.\")\n (button :on-click (fn (e) (reset! open? false))\n \"Close\"))))))))" "lisp"))
|
||||
(p "The portal content lives in " (code "#portal-root") " (typically at the page body level), not inside the island. On island disposal, portal content is automatically removed from its target — the " (code "register-in-scope") " mechanism handles cleanup.")))
|
||||
(defcomp ~reactive-islands/demo/example-refs () (~docs/page :title "Refs — Imperative DOM Access" (p "The " (code ":ref") " attribute captures a DOM element handle into a dict. Use it for imperative operations: focusing, measuring, reading values.") (~reactive-islands/index/demo-refs) (~docs/code :src (highlight "(defisland ~reactive-islands/demo/refs ()\n (let ((my-ref (dict \"current\" nil))\n (msg (signal \"\")))\n (input :ref my-ref :type \"text\"\n :placeholder \"I can be focused programmatically\")\n (button :on-click (fn (e)\n (dom-focus (get my-ref \"current\")))\n \"Focus Input\")\n (button :on-click (fn (e)\n (let ((el (get my-ref \"current\")))\n (reset! msg (str \"value: \" (dom-get-prop el \"value\")))))\n \"Read Input\")\n (when (not (= (deref msg) \"\"))\n (p (deref msg)))))" "lisp")) (p "React equivalent: " (code "useRef") ". In SX, a ref is just " (code "(dict \"current\" nil)") " — no special API. The " (code ":ref") " attribute sets " (code "(dict-set! ref \"current\" el)") " when the element is created. Read it with " (code "(get ref \"current\")") ".")))
|
||||
|
||||
(defcomp ~reactive-islands/demo/example-error-boundary ()
|
||||
(~docs/page :title "Error Boundaries"
|
||||
(p "When an island's rendering or effect throws, " (code "error-boundary") " catches the error and renders a fallback. The fallback receives the error and a retry function. Partial effects created before the error are disposed automatically.")
|
||||
(~reactive-islands/index/demo-error-boundary)
|
||||
(~docs/code :src (highlight "(defisland ~reactive-islands/demo/error-boundary ()\n (let ((throw? (signal false)))\n (error-boundary\n ;; Fallback: receives (err retry-fn)\n (fn (err retry-fn)\n (div :class \"p-3 bg-red-50 border border-red-200 rounded\"\n (p :class \"text-red-700\" (error-message err))\n (button :on-click (fn (e)\n (reset! throw? false) (invoke retry-fn))\n \"Retry\")))\n ;; Children: the happy path\n (do\n (when (deref throw?) (error \"Intentional explosion!\"))\n (p \"Everything is fine.\")))))" "lisp"))
|
||||
(p "React equivalent: " (code "componentDidCatch") " / " (code "ErrorBoundary") ". SX's version is simpler — one form, not a class. The " (code "error-boundary") " form is a render-dom special form in " (code "adapter-dom.sx") ".")))
|
||||
(defcomp ~reactive-islands/demo/example-dynamic-class () (~docs/page :title "Dynamic Class and Style" (p "React uses " (code "className") " and " (code "style") " props with state. SX does the same — " (code "(deref signal)") " inside a " (code ":class") " or " (code ":style") " attribute creates a reactive binding. The attribute updates when the signal changes.") (~reactive-islands/index/demo-dynamic-class) (~docs/code :src (highlight "(defisland ~reactive-islands/demo/dynamic-class ()\n (let ((danger (signal false))\n (size (signal 16)))\n (div\n (button :on-click (fn (e) (swap! danger not))\n (if (deref danger) \"Safe mode\" \"Danger mode\"))\n (button :on-click (fn (e) (swap! size (fn (s) (+ s 2))))\n \"Bigger\")\n ;; Reactive class — recomputed when danger changes\n (div :class (str \"p-3 rounded font-medium \"\n (if (deref danger)\n \"bg-red-100 text-red-800\"\n \"bg-green-100 text-green-800\"))\n ;; Reactive style — recomputed when size changes\n :style (str \"font-size:\" (deref size) \"px\")\n \"This element's class and style are reactive.\"))))" "lisp")) (p "React equivalent: " (code "className={danger ? 'red' : 'green'}") " and " (code "style={{fontSize: size}}") ". In SX the " (code "str") " + " (code "if") " + " (code "deref") " pattern handles it — no " (code "classnames") " library needed. For complex conditional classes, use a " (code "computed") " or a CSSX " (code "defcomp") " that returns a class string.")))
|
||||
|
||||
(defcomp ~reactive-islands/demo/example-refs ()
|
||||
(~docs/page :title "Refs — Imperative DOM Access"
|
||||
(p "The " (code ":ref") " attribute captures a DOM element handle into a dict. Use it for imperative operations: focusing, measuring, reading values.")
|
||||
(~reactive-islands/index/demo-refs)
|
||||
(~docs/code :src (highlight "(defisland ~reactive-islands/demo/refs ()\n (let ((my-ref (dict \"current\" nil))\n (msg (signal \"\")))\n (input :ref my-ref :type \"text\"\n :placeholder \"I can be focused programmatically\")\n (button :on-click (fn (e)\n (dom-focus (get my-ref \"current\")))\n \"Focus Input\")\n (button :on-click (fn (e)\n (let ((el (get my-ref \"current\")))\n (reset! msg (str \"value: \" (dom-get-prop el \"value\")))))\n \"Read Input\")\n (when (not (= (deref msg) \"\"))\n (p (deref msg)))))" "lisp"))
|
||||
(p "React equivalent: " (code "useRef") ". In SX, a ref is just " (code "(dict \"current\" nil)") " — no special API. The " (code ":ref") " attribute sets " (code "(dict-set! ref \"current\" el)") " when the element is created. Read it with " (code "(get ref \"current\")") ".")))
|
||||
(defcomp ~reactive-islands/demo/example-resource () (~docs/page :title "Resource + Suspense Pattern" (p (code "resource") " wraps an async operation into a signal with " (code "loading") "/" (code "data") "/" (code "error") " states. Combined with " (code "cond") " + " (code "deref") ", this is the suspense pattern — no special form needed.") (~reactive-islands/index/demo-resource) (~docs/code :src (highlight "(defisland ~reactive-islands/demo/resource ()\n (let ((data (resource (fn ()\n ;; Any promise-returning function\n (promise-delayed 1500\n (dict \"name\" \"Ada Lovelace\"\n \"role\" \"First Programmer\"))))))\n ;; This IS the suspense pattern:\n (let ((state (deref data)))\n (cond\n (get state \"loading\")\n (div \"Loading...\")\n (get state \"error\")\n (div \"Error: \" (get state \"error\"))\n :else\n (div (get (get state \"data\") \"name\"))))))" "lisp")) (p "React equivalent: " (code "Suspense") " + " (code "use()") " or " (code "useSWR") ". SX doesn't need a special " (code "suspense") " form because " (code "resource") " returns a signal and " (code "cond") " + " (code "deref") " creates reactive conditional rendering. When the promise resolves, the signal updates and the " (code "cond") " branch switches automatically.")))
|
||||
|
||||
(defcomp ~reactive-islands/demo/example-dynamic-class ()
|
||||
(~docs/page :title "Dynamic Class and Style"
|
||||
(p "React uses " (code "className") " and " (code "style") " props with state. SX does the same — " (code "(deref signal)") " inside a " (code ":class") " or " (code ":style") " attribute creates a reactive binding. The attribute updates when the signal changes.")
|
||||
(~reactive-islands/index/demo-dynamic-class)
|
||||
(~docs/code :src (highlight "(defisland ~reactive-islands/demo/dynamic-class ()\n (let ((danger (signal false))\n (size (signal 16)))\n (div\n (button :on-click (fn (e) (swap! danger not))\n (if (deref danger) \"Safe mode\" \"Danger mode\"))\n (button :on-click (fn (e) (swap! size (fn (s) (+ s 2))))\n \"Bigger\")\n ;; Reactive class — recomputed when danger changes\n (div :class (str \"p-3 rounded font-medium \"\n (if (deref danger)\n \"bg-red-100 text-red-800\"\n \"bg-green-100 text-green-800\"))\n ;; Reactive style — recomputed when size changes\n :style (str \"font-size:\" (deref size) \"px\")\n \"This element's class and style are reactive.\"))))" "lisp"))
|
||||
(p "React equivalent: " (code "className={danger ? 'red' : 'green'}") " and " (code "style={{fontSize: size}}") ". In SX the " (code "str") " + " (code "if") " + " (code "deref") " pattern handles it — no " (code "classnames") " library needed. For complex conditional classes, use a " (code "computed") " or a CSSX " (code "defcomp") " that returns a class string.")))
|
||||
(defcomp ~reactive-islands/demo/example-transition () (~docs/page :title "Transition Pattern" (p "React's " (code "startTransition") " defers non-urgent updates so typing stays responsive. In SX: " (code "schedule-idle") " + " (code "batch") ". The filter runs during idle time, not blocking the input event.") (~reactive-islands/index/demo-transition) (~docs/code :src (highlight "(defisland ~reactive-islands/demo/transition ()\n (let ((query (signal \"\"))\n (all-items (list \"Signals\" \"Effects\" ...))\n (filtered (signal (list)))\n (pending (signal false)))\n (reset! filtered all-items)\n ;; Filter effect — deferred via schedule-idle\n (effect (fn ()\n (let ((q (lower (deref query))))\n (if (= q \"\")\n (do (reset! pending false)\n (reset! filtered all-items))\n (do (reset! pending true)\n (schedule-idle (fn ()\n (batch (fn ()\n (reset! filtered\n (filter (fn (item)\n (contains? (lower item) q))\n all-items))\n (reset! pending false))))))))))\n (div\n (input :bind query :placeholder \"Filter...\")\n (when (deref pending) (span \"Filtering...\"))\n (ul (map (fn (item) (li :key item item))\n (deref filtered))))))" "lisp")) (p "React equivalent: " (code "startTransition(() => setFiltered(...))") ". SX uses " (code "schedule-idle") " (" (code "requestIdleCallback") " under the hood) to defer the expensive " (code "filter") " operation, and " (code "batch") " to group the result into one update. Fine-grained signals already avoid the jank that makes transitions critical in React — this pattern is for truly expensive computations.")))
|
||||
|
||||
(defcomp ~reactive-islands/demo/example-resource ()
|
||||
(~docs/page :title "Resource + Suspense Pattern"
|
||||
(p (code "resource") " wraps an async operation into a signal with " (code "loading") "/" (code "data") "/" (code "error") " states. Combined with " (code "cond") " + " (code "deref") ", this is the suspense pattern — no special form needed.")
|
||||
(~reactive-islands/index/demo-resource)
|
||||
(~docs/code :src (highlight "(defisland ~reactive-islands/demo/resource ()\n (let ((data (resource (fn ()\n ;; Any promise-returning function\n (promise-delayed 1500\n (dict \"name\" \"Ada Lovelace\"\n \"role\" \"First Programmer\"))))))\n ;; This IS the suspense pattern:\n (let ((state (deref data)))\n (cond\n (get state \"loading\")\n (div \"Loading...\")\n (get state \"error\")\n (div \"Error: \" (get state \"error\"))\n :else\n (div (get (get state \"data\") \"name\"))))))" "lisp"))
|
||||
(p "React equivalent: " (code "Suspense") " + " (code "use()") " or " (code "useSWR") ". SX doesn't need a special " (code "suspense") " form because " (code "resource") " returns a signal and " (code "cond") " + " (code "deref") " creates reactive conditional rendering. When the promise resolves, the signal updates and the " (code "cond") " branch switches automatically.")))
|
||||
(defcomp ~reactive-islands/demo/example-stores () (~docs/page :title "Shared Stores" (p "React uses " (code "Context") " or state management libraries for cross-component state. SX uses " (code "def-store") " / " (code "use-store") " — named signal containers that persist across island creation/destruction.") (~reactive-islands/index/demo-store-writer) (~reactive-islands/index/demo-store-reader) (~docs/code :src (highlight ";; Island A — creates/writes the store\n(defisland ~reactive-islands/demo/store-writer ()\n (let ((store (def-store \"theme\" (fn ()\n (dict \"color\" (signal \"violet\")\n \"dark\" (signal false))))))\n (select :bind (get store \"color\")\n (option :value \"violet\" \"Violet\")\n (option :value \"blue\" \"Blue\"))\n (input :type \"checkbox\" :bind (get store \"dark\"))))\n\n;; Island B — reads the same store, different island\n(defisland ~reactive-islands/demo/store-reader ()\n (let ((store (use-store \"theme\")))\n (div :class (str \"bg-\" (deref (get store \"color\")) \"-100\")\n \"Styled by signals from Island A\")))" "lisp")) (p "React equivalent: " (code "createContext") " + " (code "useContext") " or Redux/Zustand. Stores are simpler — just named dicts of signals at page scope. " (code "def-store") " creates once, " (code "use-store") " retrieves. Stores survive island disposal but clear on full page navigation.")))
|
||||
|
||||
(defcomp ~reactive-islands/demo/example-transition ()
|
||||
(~docs/page :title "Transition Pattern"
|
||||
(p "React's " (code "startTransition") " defers non-urgent updates so typing stays responsive. In SX: " (code "schedule-idle") " + " (code "batch") ". The filter runs during idle time, not blocking the input event.")
|
||||
(~reactive-islands/index/demo-transition)
|
||||
(~docs/code :src (highlight "(defisland ~reactive-islands/demo/transition ()\n (let ((query (signal \"\"))\n (all-items (list \"Signals\" \"Effects\" ...))\n (filtered (signal (list)))\n (pending (signal false)))\n (reset! filtered all-items)\n ;; Filter effect — deferred via schedule-idle\n (effect (fn ()\n (let ((q (lower (deref query))))\n (if (= q \"\")\n (do (reset! pending false)\n (reset! filtered all-items))\n (do (reset! pending true)\n (schedule-idle (fn ()\n (batch (fn ()\n (reset! filtered\n (filter (fn (item)\n (contains? (lower item) q))\n all-items))\n (reset! pending false))))))))))\n (div\n (input :bind query :placeholder \"Filter...\")\n (when (deref pending) (span \"Filtering...\"))\n (ul (map (fn (item) (li :key item item))\n (deref filtered))))))" "lisp"))
|
||||
(p "React equivalent: " (code "startTransition(() => setFiltered(...))") ". SX uses " (code "schedule-idle") " (" (code "requestIdleCallback") " under the hood) to defer the expensive " (code "filter") " operation, and " (code "batch") " to group the result into one update. Fine-grained signals already avoid the jank that makes transitions critical in React — this pattern is for truly expensive computations.")))
|
||||
(defcomp ~reactive-islands/demo/example-event-bridge-demo () (~docs/page :title "Event Bridge" (p "Server-rendered content inside an island (an htmx \"lake\") can communicate with island signals via DOM custom events. Buttons with " (code "data-sx-emit") " dispatch events that island effects catch.") (~reactive-islands/index/demo-event-bridge) (~docs/code :src (highlight ";; Island listens for custom events from server-rendered content\n(defisland ~reactive-islands/demo/event-bridge ()\n (let ((messages (signal (list))))\n ;; Bridge: auto-listen for \"inbox:message\" events\n (bridge-event container \"inbox:message\" messages\n (fn (detail) (append (deref messages) (get detail \"text\"))))\n (div\n ;; Lake content (server-rendered) has data-sx-emit buttons\n (div :id \"lake\"\n :sx-get \"/my-content\"\n :sx-swap \"innerHTML\"\n :sx-trigger \"load\")\n ;; Island reads the signal reactively\n (ul (map (fn (msg) (li msg)) (deref messages))))))" "lisp")) (p "The " (code "data-sx-emit") " attribute is processed by the client engine — it adds a click handler that dispatches a CustomEvent with the JSON from " (code "data-sx-emit-detail") ". The event bubbles up to the island container where " (code "bridge-event") " catches it.")))
|
||||
|
||||
(defcomp ~reactive-islands/demo/example-stores ()
|
||||
(~docs/page :title "Shared Stores"
|
||||
(p "React uses " (code "Context") " or state management libraries for cross-component state. SX uses " (code "def-store") " / " (code "use-store") " — named signal containers that persist across island creation/destruction.")
|
||||
(~reactive-islands/index/demo-store-writer)
|
||||
(~reactive-islands/index/demo-store-reader)
|
||||
(~docs/code :src (highlight ";; Island A — creates/writes the store\n(defisland ~reactive-islands/demo/store-writer ()\n (let ((store (def-store \"theme\" (fn ()\n (dict \"color\" (signal \"violet\")\n \"dark\" (signal false))))))\n (select :bind (get store \"color\")\n (option :value \"violet\" \"Violet\")\n (option :value \"blue\" \"Blue\"))\n (input :type \"checkbox\" :bind (get store \"dark\"))))\n\n;; Island B — reads the same store, different island\n(defisland ~reactive-islands/demo/store-reader ()\n (let ((store (use-store \"theme\")))\n (div :class (str \"bg-\" (deref (get store \"color\")) \"-100\")\n \"Styled by signals from Island A\")))" "lisp"))
|
||||
(p "React equivalent: " (code "createContext") " + " (code "useContext") " or Redux/Zustand. Stores are simpler — just named dicts of signals at page scope. " (code "def-store") " creates once, " (code "use-store") " retrieves. Stores survive island disposal but clear on full page navigation.")))
|
||||
(defcomp ~reactive-islands/demo/example-defisland () (~docs/page :title "How defisland Works" (p (code "defisland") " creates a reactive component. Same calling convention as " (code "defcomp") " — keyword args, rest children — but with a reactive boundary. Inside an island, " (code "deref") " subscribes DOM nodes to signals.") (~docs/code :src (highlight ";; Definition — same syntax as defcomp\n(defisland ~reactive-islands/demo/counter (&key initial)\n (let ((count (signal (or initial 0))))\n (div\n (span (deref count)) ;; reactive text node\n (button :on-click (fn (e) (swap! count inc)) ;; event handler\n \"+\"))))\n\n;; Usage — same as any component\n(~reactive-islands/demo/counter :initial 42)\n\n;; Server-side rendering:\n;; <div data-sx-island=\"counter\" data-sx-state='{\"initial\":42}'>\n;; <span>42</span><button>+</button>\n;; </div>\n;;\n;; Client hydrates: signals + effects + event handlers attach" "lisp")) (p "Each " (code "deref") " call registers the enclosing DOM node as a subscriber. Signal changes update " (em "only") " the subscribed nodes — no virtual DOM, no diffing, no component re-renders.")))
|
||||
|
||||
(defcomp ~reactive-islands/demo/example-event-bridge-demo ()
|
||||
(~docs/page :title "Event Bridge"
|
||||
(p "Server-rendered content inside an island (an htmx \"lake\") can communicate with island signals via DOM custom events. Buttons with " (code "data-sx-emit") " dispatch events that island effects catch.")
|
||||
(~reactive-islands/index/demo-event-bridge)
|
||||
(~docs/code :src (highlight ";; Island listens for custom events from server-rendered content\n(defisland ~reactive-islands/demo/event-bridge ()\n (let ((messages (signal (list))))\n ;; Bridge: auto-listen for \"inbox:message\" events\n (bridge-event container \"inbox:message\" messages\n (fn (detail) (append (deref messages) (get detail \"text\"))))\n (div\n ;; Lake content (server-rendered) has data-sx-emit buttons\n (div :id \"lake\"\n :sx-get \"/my-content\"\n :sx-swap \"innerHTML\"\n :sx-trigger \"load\")\n ;; Island reads the signal reactively\n (ul (map (fn (msg) (li msg)) (deref messages))))))" "lisp"))
|
||||
(p "The " (code "data-sx-emit") " attribute is processed by the client engine — it adds a click handler that dispatches a CustomEvent with the JSON from " (code "data-sx-emit-detail") ". The event bubbles up to the island container where " (code "bridge-event") " catches it.")))
|
||||
(defcomp ~reactive-islands/demo/example-tests () (~docs/page :title "Test Suite" (p "17 tests verify the signal runtime against the spec. All pass in the Python test runner (which uses the hand-written evaluator with native platform primitives).") (~docs/code :src (highlight ";; Signal basics (6 tests)\n(assert-true (signal? (signal 42)))\n(assert-equal 42 (deref (signal 42)))\n(assert-equal 5 (deref 5)) ;; non-signal passthrough\n\n;; reset! changes value\n(let ((s (signal 0)))\n (reset! s 10)\n (assert-equal 10 (deref s)))\n\n;; reset! does NOT notify when value unchanged (identical? check)\n\n;; Computed (3 tests)\n(let ((a (signal 3)) (b (signal 4))\n (sum (computed (fn () (+ (deref a) (deref b))))))\n (assert-equal 7 (deref sum))\n (reset! a 10)\n (assert-equal 14 (deref sum)))\n\n;; Effects (4 tests) — immediate run, re-run on change, dispose, cleanup\n;; Batch (1 test) — defers notifications, deduplicates subscribers\n;; defisland (3 tests) — creates island, callable, accepts children" "lisp")) (p :class "mt-2 text-sm text-stone-500" "Run: " (code "python3 shared/sx/tests/run.py signals"))))
|
||||
|
||||
(defcomp ~reactive-islands/demo/example-defisland ()
|
||||
(~docs/page :title "How defisland Works"
|
||||
(p (code "defisland") " creates a reactive component. Same calling convention as " (code "defcomp") " — keyword args, rest children — but with a reactive boundary. Inside an island, " (code "deref") " subscribes DOM nodes to signals.")
|
||||
(~docs/code :src (highlight ";; Definition — same syntax as defcomp\n(defisland ~reactive-islands/demo/counter (&key initial)\n (let ((count (signal (or initial 0))))\n (div\n (span (deref count)) ;; reactive text node\n (button :on-click (fn (e) (swap! count inc)) ;; event handler\n \"+\"))))\n\n;; Usage — same as any component\n(~reactive-islands/demo/counter :initial 42)\n\n;; Server-side rendering:\n;; <div data-sx-island=\"counter\" data-sx-state='{\"initial\":42}'>\n;; <span>42</span><button>+</button>\n;; </div>\n;;\n;; Client hydrates: signals + effects + event handlers attach" "lisp"))
|
||||
(p "Each " (code "deref") " call registers the enclosing DOM node as a subscriber. Signal changes update " (em "only") " the subscribed nodes — no virtual DOM, no diffing, no component re-renders.")))
|
||||
|
||||
(defcomp ~reactive-islands/demo/example-tests ()
|
||||
(~docs/page :title "Test Suite"
|
||||
(p "17 tests verify the signal runtime against the spec. All pass in the Python test runner (which uses the hand-written evaluator with native platform primitives).")
|
||||
(~docs/code :src (highlight ";; Signal basics (6 tests)\n(assert-true (signal? (signal 42)))\n(assert-equal 42 (deref (signal 42)))\n(assert-equal 5 (deref 5)) ;; non-signal passthrough\n\n;; reset! changes value\n(let ((s (signal 0)))\n (reset! s 10)\n (assert-equal 10 (deref s)))\n\n;; reset! does NOT notify when value unchanged (identical? check)\n\n;; Computed (3 tests)\n(let ((a (signal 3)) (b (signal 4))\n (sum (computed (fn () (+ (deref a) (deref b))))))\n (assert-equal 7 (deref sum))\n (reset! a 10)\n (assert-equal 14 (deref sum)))\n\n;; Effects (4 tests) — immediate run, re-run on change, dispose, cleanup\n;; Batch (1 test) — defers notifications, deduplicates subscribers\n;; defisland (3 tests) — creates island, callable, accepts children" "lisp"))
|
||||
(p :class "mt-2 text-sm text-stone-500" "Run: " (code "python3 shared/sx/tests/run.py signals"))))
|
||||
|
||||
(defcomp ~reactive-islands/demo/example-coverage ()
|
||||
(~docs/page :title "React Feature Coverage"
|
||||
(p "Every React feature has an SX equivalent — most are simpler because signals are fine-grained.")
|
||||
(div :class "overflow-x-auto rounded border border-stone-200"
|
||||
(table :class "w-full text-left text-sm"
|
||||
(thead (tr :class "border-b border-stone-200 bg-stone-100"
|
||||
(th :class "px-3 py-2 font-medium text-stone-600" "React")
|
||||
(th :class "px-3 py-2 font-medium text-stone-600" "SX")
|
||||
(th :class "px-3 py-2 font-medium text-stone-600" "Demo")))
|
||||
(tbody
|
||||
(tr :class "border-b border-stone-100"
|
||||
(td :class "px-3 py-2 text-stone-700" "useState")
|
||||
(td :class "px-3 py-2 font-mono text-xs text-violet-700" "(signal value)")
|
||||
(td :class "px-3 py-2 text-xs text-stone-500" "#1"))
|
||||
(tr :class "border-b border-stone-100"
|
||||
(td :class "px-3 py-2 text-stone-700" "useMemo")
|
||||
(td :class "px-3 py-2 font-mono text-xs text-violet-700" "(computed (fn () ...))")
|
||||
(td :class "px-3 py-2 text-xs text-stone-500" "#1, #2"))
|
||||
(tr :class "border-b border-stone-100"
|
||||
(td :class "px-3 py-2 text-stone-700" "useEffect")
|
||||
(td :class "px-3 py-2 font-mono text-xs text-violet-700" "(effect (fn () ...))")
|
||||
(td :class "px-3 py-2 text-xs text-stone-500" "#3"))
|
||||
(tr :class "border-b border-stone-100"
|
||||
(td :class "px-3 py-2 text-stone-700" "useRef")
|
||||
(td :class "px-3 py-2 font-mono text-xs text-violet-700" "(dict \"current\" nil) + :ref")
|
||||
(td :class "px-3 py-2 text-xs text-stone-500" "#9"))
|
||||
(tr :class "border-b border-stone-100"
|
||||
(td :class "px-3 py-2 text-stone-700" "useCallback")
|
||||
(td :class "px-3 py-2 font-mono text-xs text-violet-700" "(fn (...) ...) — no dep arrays")
|
||||
(td :class "px-3 py-2 text-xs text-stone-500" "N/A"))
|
||||
(tr :class "border-b border-stone-100"
|
||||
(td :class "px-3 py-2 text-stone-700" "className / style")
|
||||
(td :class "px-3 py-2 font-mono text-xs text-violet-700" ":class (str ...) :style (str ...)")
|
||||
(td :class "px-3 py-2 text-xs text-stone-500" "#10"))
|
||||
(tr :class "border-b border-stone-100"
|
||||
(td :class "px-3 py-2 text-stone-700" "Controlled inputs")
|
||||
(td :class "px-3 py-2 font-mono text-xs text-violet-700" ":bind signal")
|
||||
(td :class "px-3 py-2 text-xs text-stone-500" "#6"))
|
||||
(tr :class "border-b border-stone-100"
|
||||
(td :class "px-3 py-2 text-stone-700" "key prop")
|
||||
(td :class "px-3 py-2 font-mono text-xs text-violet-700" ":key value")
|
||||
(td :class "px-3 py-2 text-xs text-stone-500" "#5"))
|
||||
(tr :class "border-b border-stone-100"
|
||||
(td :class "px-3 py-2 text-stone-700" "createPortal")
|
||||
(td :class "px-3 py-2 font-mono text-xs text-violet-700" "(portal \"#target\" ...)")
|
||||
(td :class "px-3 py-2 text-xs text-stone-500" "#7"))
|
||||
(tr :class "border-b border-stone-100"
|
||||
(td :class "px-3 py-2 text-stone-700" "ErrorBoundary")
|
||||
(td :class "px-3 py-2 font-mono text-xs text-violet-700" "(error-boundary fallback ...)")
|
||||
(td :class "px-3 py-2 text-xs text-stone-500" "#8"))
|
||||
(tr :class "border-b border-stone-100"
|
||||
(td :class "px-3 py-2 text-stone-700" "Suspense + use()")
|
||||
(td :class "px-3 py-2 font-mono text-xs text-violet-700" "(resource fn) + cond/deref")
|
||||
(td :class "px-3 py-2 text-xs text-stone-500" "#11"))
|
||||
(tr :class "border-b border-stone-100"
|
||||
(td :class "px-3 py-2 text-stone-700" "startTransition")
|
||||
(td :class "px-3 py-2 font-mono text-xs text-violet-700" "schedule-idle + batch")
|
||||
(td :class "px-3 py-2 text-xs text-stone-500" "#12"))
|
||||
(tr :class "border-b border-stone-100"
|
||||
(td :class "px-3 py-2 text-stone-700" "Context / Redux")
|
||||
(td :class "px-3 py-2 font-mono text-xs text-violet-700" "def-store / use-store")
|
||||
(td :class "px-3 py-2 text-xs text-stone-500" "#13"))
|
||||
(tr :class "border-b border-stone-100"
|
||||
(td :class "px-3 py-2 text-stone-700" "Virtual DOM / diffing")
|
||||
(td :class "px-3 py-2 text-xs text-stone-500" "N/A — fine-grained signals update exact DOM nodes")
|
||||
(td :class "px-3 py-2 text-xs text-stone-500" ""))
|
||||
(tr :class "border-b border-stone-100"
|
||||
(td :class "px-3 py-2 text-stone-700" "JSX / build step")
|
||||
(td :class "px-3 py-2 text-xs text-stone-500" "N/A — s-expressions are the syntax")
|
||||
(td :class "px-3 py-2 text-xs text-stone-500" ""))
|
||||
(tr :class "border-b border-stone-100"
|
||||
(td :class "px-3 py-2 text-stone-700" "Server Components")
|
||||
(td :class "px-3 py-2 text-xs text-stone-500" "N/A — aser mode already expands server-side")
|
||||
(td :class "px-3 py-2 text-xs text-stone-500" ""))
|
||||
(tr :class "border-b border-stone-100"
|
||||
(td :class "px-3 py-2 text-stone-700" "Concurrent rendering")
|
||||
(td :class "px-3 py-2 text-xs text-stone-500" "N/A — fine-grained updates are inherently incremental")
|
||||
(td :class "px-3 py-2 text-xs text-stone-500" ""))
|
||||
(tr
|
||||
(td :class "px-3 py-2 text-stone-700" "Hooks rules")
|
||||
(td :class "px-3 py-2 text-xs text-stone-500" "N/A — signals are values, no ordering rules")
|
||||
(td :class "px-3 py-2 text-xs text-stone-500" "")))))))
|
||||
(defcomp ~reactive-islands/demo/example-coverage () (~docs/page :title "React Feature Coverage" (p "Every React feature has an SX equivalent — most are simpler because signals are fine-grained.") (div :class "overflow-x-auto rounded border border-stone-200" (table :class "w-full text-left text-sm" (thead (tr :class "border-b border-stone-200 bg-stone-100" (th :class "px-3 py-2 font-medium text-stone-600" "React") (th :class "px-3 py-2 font-medium text-stone-600" "SX") (th :class "px-3 py-2 font-medium text-stone-600" "Demo"))) (tbody (tr :class "border-b border-stone-100" (td :class "px-3 py-2 text-stone-700" "useState") (td :class "px-3 py-2 font-mono text-xs text-violet-700" "(signal value)") (td :class "px-3 py-2 text-xs text-stone-500" "#1")) (tr :class "border-b border-stone-100" (td :class "px-3 py-2 text-stone-700" "useMemo") (td :class "px-3 py-2 font-mono text-xs text-violet-700" "(computed (fn () ...))") (td :class "px-3 py-2 text-xs text-stone-500" "#1, #2")) (tr :class "border-b border-stone-100" (td :class "px-3 py-2 text-stone-700" "useEffect") (td :class "px-3 py-2 font-mono text-xs text-violet-700" "(effect (fn () ...))") (td :class "px-3 py-2 text-xs text-stone-500" "#3")) (tr :class "border-b border-stone-100" (td :class "px-3 py-2 text-stone-700" "useRef") (td :class "px-3 py-2 font-mono text-xs text-violet-700" "(dict \"current\" nil) + :ref") (td :class "px-3 py-2 text-xs text-stone-500" "#9")) (tr :class "border-b border-stone-100" (td :class "px-3 py-2 text-stone-700" "useCallback") (td :class "px-3 py-2 font-mono text-xs text-violet-700" "(fn (...) ...) — no dep arrays") (td :class "px-3 py-2 text-xs text-stone-500" "N/A")) (tr :class "border-b border-stone-100" (td :class "px-3 py-2 text-stone-700" "className / style") (td :class "px-3 py-2 font-mono text-xs text-violet-700" ":class (str ...) :style (str ...)") (td :class "px-3 py-2 text-xs text-stone-500" "#10")) (tr :class "border-b border-stone-100" (td :class "px-3 py-2 text-stone-700" "Controlled inputs") (td :class "px-3 py-2 font-mono text-xs text-violet-700" ":bind signal") (td :class "px-3 py-2 text-xs text-stone-500" "#6")) (tr :class "border-b border-stone-100" (td :class "px-3 py-2 text-stone-700" "key prop") (td :class "px-3 py-2 font-mono text-xs text-violet-700" ":key value") (td :class "px-3 py-2 text-xs text-stone-500" "#5")) (tr :class "border-b border-stone-100" (td :class "px-3 py-2 text-stone-700" "createPortal") (td :class "px-3 py-2 font-mono text-xs text-violet-700" "(portal \"#target\" ...)") (td :class "px-3 py-2 text-xs text-stone-500" "#7")) (tr :class "border-b border-stone-100" (td :class "px-3 py-2 text-stone-700" "ErrorBoundary") (td :class "px-3 py-2 font-mono text-xs text-violet-700" "(error-boundary fallback ...)") (td :class "px-3 py-2 text-xs text-stone-500" "#8")) (tr :class "border-b border-stone-100" (td :class "px-3 py-2 text-stone-700" "Suspense + use()") (td :class "px-3 py-2 font-mono text-xs text-violet-700" "(resource fn) + cond/deref") (td :class "px-3 py-2 text-xs text-stone-500" "#11")) (tr :class "border-b border-stone-100" (td :class "px-3 py-2 text-stone-700" "startTransition") (td :class "px-3 py-2 font-mono text-xs text-violet-700" "schedule-idle + batch") (td :class "px-3 py-2 text-xs text-stone-500" "#12")) (tr :class "border-b border-stone-100" (td :class "px-3 py-2 text-stone-700" "Context / Redux") (td :class "px-3 py-2 font-mono text-xs text-violet-700" "def-store / use-store") (td :class "px-3 py-2 text-xs text-stone-500" "#13")) (tr :class "border-b border-stone-100" (td :class "px-3 py-2 text-stone-700" "Virtual DOM / diffing") (td :class "px-3 py-2 text-xs text-stone-500" "N/A — fine-grained signals update exact DOM nodes") (td :class "px-3 py-2 text-xs text-stone-500" "")) (tr :class "border-b border-stone-100" (td :class "px-3 py-2 text-stone-700" "JSX / build step") (td :class "px-3 py-2 text-xs text-stone-500" "N/A — s-expressions are the syntax") (td :class "px-3 py-2 text-xs text-stone-500" "")) (tr :class "border-b border-stone-100" (td :class "px-3 py-2 text-stone-700" "Server Components") (td :class "px-3 py-2 text-xs text-stone-500" "N/A — aser mode already expands server-side") (td :class "px-3 py-2 text-xs text-stone-500" "")) (tr :class "border-b border-stone-100" (td :class "px-3 py-2 text-stone-700" "Concurrent rendering") (td :class "px-3 py-2 text-xs text-stone-500" "N/A — fine-grained updates are inherently incremental") (td :class "px-3 py-2 text-xs text-stone-500" "")) (tr (td :class "px-3 py-2 text-stone-700" "Hooks rules") (td :class "px-3 py-2 text-xs text-stone-500" "N/A — signals are values, no ordering rules") (td :class "px-3 py-2 text-xs text-stone-500" "")))))))
|
||||
|
||||
76
sx/sx/reactive-islands/test-runner.sx
Normal file
76
sx/sx/reactive-islands/test-runner.sx
Normal file
@@ -0,0 +1,76 @@
|
||||
;; ~reactive-islands/test-runner — inline test runner island
|
||||
;;
|
||||
;; Displays test results for a test suite. Runs tests on mount and
|
||||
;; shows pass/fail with details.
|
||||
|
||||
(defisland ~reactive-islands/test-runner (&key test-src)
|
||||
(let ((results (signal nil))
|
||||
(running (signal false)))
|
||||
|
||||
(letrec
|
||||
((run-tests (fn ()
|
||||
(reset! running true)
|
||||
(let ((parsed (sx-parse test-src))
|
||||
(test-results (list)))
|
||||
;; Walk parsed expressions looking for deftest/defsuite
|
||||
(for-each (fn (expr)
|
||||
(when (and (list? expr) (not (empty? expr))
|
||||
(= (type-of (first expr)) "symbol"))
|
||||
(let ((head (symbol-name (first expr))))
|
||||
(cond
|
||||
(= head "defsuite")
|
||||
;; Process each deftest in the suite
|
||||
(for-each (fn (child)
|
||||
(when (and (list? child) (not (empty? child))
|
||||
(= (type-of (first child)) "symbol")
|
||||
(= (symbol-name (first child)) "deftest"))
|
||||
(let ((test-name (nth child 1))
|
||||
(test-body (last child)))
|
||||
(let ((result (try-test test-name test-body)))
|
||||
(append! test-results result)))))
|
||||
(slice expr 2))
|
||||
(= head "deftest")
|
||||
(let ((test-name (nth expr 1))
|
||||
(test-body (last expr)))
|
||||
(append! test-results (try-test test-name test-body)))))))
|
||||
parsed)
|
||||
(reset! results test-results)
|
||||
(reset! running false))))
|
||||
|
||||
(try-test (fn (name body)
|
||||
(let ((error-msg nil))
|
||||
;; Evaluate the test body, catch assertion failures
|
||||
(let ((ok (cek-try
|
||||
(fn () (cek-eval (sx-serialize body)) true)
|
||||
(fn (err) (set! error-msg (str err)) false))))
|
||||
{:name name :pass ok :error error-msg})))))
|
||||
|
||||
;; Run on mount
|
||||
(run-tests)
|
||||
|
||||
(div :class "mt-6 rounded border border-stone-200 bg-stone-50 p-4"
|
||||
(div :class "flex items-center justify-between mb-3"
|
||||
(h4 :class "text-sm font-semibold text-stone-700" "Tests")
|
||||
(button :class "px-2 py-1 text-xs rounded bg-stone-200 hover:bg-stone-300"
|
||||
:on-click (fn (e) (run-tests))
|
||||
"Re-run"))
|
||||
|
||||
(if (deref running)
|
||||
(p :class "text-stone-400 text-sm italic" "Running...")
|
||||
(if (nil? (deref results))
|
||||
(p :class "text-stone-400 text-sm italic" "No results")
|
||||
(let ((r (deref results))
|
||||
(pass-count (len (filter (fn (t) (get t "pass")) r)))
|
||||
(fail-count (len (filter (fn (t) (not (get t "pass"))) r))))
|
||||
(div :class "space-y-2"
|
||||
(div :class "text-sm font-mono"
|
||||
(span :class (if (= fail-count 0) "text-emerald-600" "text-red-600")
|
||||
(str pass-count "/" (len r) " passed")))
|
||||
(map (fn (t)
|
||||
(div :class "flex items-start gap-2 text-xs font-mono py-0.5"
|
||||
(span :class (if (get t "pass") "text-emerald-500" "text-red-500")
|
||||
(if (get t "pass") "✓" "✗"))
|
||||
(span :class "text-stone-600" (get t "name"))
|
||||
(when (get t "error")
|
||||
(span :class "text-red-400 ml-2" (get t "error")))))
|
||||
r)))))))))
|
||||
76
sx/sx/reactive-islands/test-temperature.sx
Normal file
76
sx/sx/reactive-islands/test-temperature.sx
Normal file
@@ -0,0 +1,76 @@
|
||||
;; Tests for ~reactive-islands/index/demo-temperature
|
||||
;;
|
||||
;; Tests the reactive logic: signal creation, computed derivation,
|
||||
;; button click handlers, and value propagation.
|
||||
|
||||
(defsuite "temperature converter"
|
||||
|
||||
(deftest "initial celsius is 20"
|
||||
(let ((celsius (signal 20)))
|
||||
(assert-signal-value celsius 20)))
|
||||
|
||||
(deftest "computed fahrenheit derives from celsius"
|
||||
(let ((celsius (signal 20))
|
||||
(fahrenheit (computed (fn () (+ (* (deref celsius) 1.8) 32)))))
|
||||
(assert-signal-value fahrenheit 68)
|
||||
(assert-computed-depends-on fahrenheit celsius)))
|
||||
|
||||
(deftest "+5 button increments celsius by 5"
|
||||
(let ((celsius (signal 20))
|
||||
(btn (mock-element "button")))
|
||||
(mock-add-listener! btn "click"
|
||||
(fn (e) (swap! celsius (fn (c) (+ c 5)))))
|
||||
(simulate-click btn)
|
||||
(assert-signal-value celsius 25)))
|
||||
|
||||
(deftest "−5 button decrements celsius by 5"
|
||||
(let ((celsius (signal 20))
|
||||
(btn (mock-element "button")))
|
||||
(mock-add-listener! btn "click"
|
||||
(fn (e) (swap! celsius (fn (c) (- c 5)))))
|
||||
(simulate-click btn)
|
||||
(assert-signal-value celsius 15)))
|
||||
|
||||
(deftest "fahrenheit updates when celsius changes"
|
||||
(let ((celsius (signal 20))
|
||||
(fahrenheit (computed (fn () (+ (* (deref celsius) 1.8) 32)))))
|
||||
(assert-signal-value fahrenheit 68)
|
||||
(reset! celsius 25)
|
||||
(assert-signal-value fahrenheit 77)
|
||||
(reset! celsius 0)
|
||||
(assert-signal-value fahrenheit 32)
|
||||
(reset! celsius 100)
|
||||
(assert-signal-value fahrenheit 212)))
|
||||
|
||||
(deftest "multiple clicks accumulate"
|
||||
(let ((celsius (signal 20))
|
||||
(fahrenheit (computed (fn () (+ (* (deref celsius) 1.8) 32))))
|
||||
(plus-btn (mock-element "button"))
|
||||
(minus-btn (mock-element "button")))
|
||||
(mock-add-listener! plus-btn "click"
|
||||
(fn (e) (swap! celsius (fn (c) (+ c 5)))))
|
||||
(mock-add-listener! minus-btn "click"
|
||||
(fn (e) (swap! celsius (fn (c) (- c 5)))))
|
||||
;; +5 +5 +5
|
||||
(simulate-click plus-btn)
|
||||
(simulate-click plus-btn)
|
||||
(simulate-click plus-btn)
|
||||
(assert-signal-value celsius 35)
|
||||
(assert-signal-value fahrenheit 95)
|
||||
;; -5
|
||||
(simulate-click minus-btn)
|
||||
(assert-signal-value celsius 30)
|
||||
(assert-signal-value fahrenheit 86)))
|
||||
|
||||
(deftest "celsius signal has subscribers after computed"
|
||||
(let ((celsius (signal 20))
|
||||
(fahrenheit (computed (fn () (+ (* (deref celsius) 1.8) 32)))))
|
||||
(assert-signal-has-subscribers celsius)))
|
||||
|
||||
(deftest "click events are logged on mock element"
|
||||
(let ((btn (mock-element "button")))
|
||||
(mock-add-listener! btn "click" (fn (e) nil))
|
||||
(simulate-click btn)
|
||||
(simulate-click btn)
|
||||
(assert-event-fired btn "click")
|
||||
(assert= (event-fire-count btn "click") 2 "Expected 2 click events"))))
|
||||
Reference in New Issue
Block a user