(defcomp
  ()
  (~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
        (component-source "~reactive-islands/index/demo-temperature")
        "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.")
    (div
      (~tw :tokens "mt-6")
      (~reactive-islands/test-runner-placeholder)
      (script
        :type "text/sx-test"
        :data-for "temperature"
        "(defsuite \"temperature converter\" (deftest \"initial celsius is 20\" (let ((celsius (signal 20))) (assert-signal-value celsius 20))) (deftest \"computed fahrenheit = celsius * 1.8 + 32\" (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 increments celsius\" (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 \"fahrenheit updates on celsius change\" (let ((celsius (signal 20)) (fahrenheit (computed (fn () (+ (* (deref celsius) 1.8) 32))))) (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)))) (btn (mock-element \"button\"))) (mock-add-listener! btn \"click\" (fn (e) (swap! celsius (fn (c) (+ c 5))))) (simulate-click btn) (simulate-click btn) (simulate-click btn) (assert-signal-value celsius 35) (assert-signal-value fahrenheit 95))))"))))
