let signal = PreactSignals.Core.make("initial value")

open PreactSignals.Core
let signal = PreactSignals.Core.make("initial value")

// Get signal current value
signal->val->Js.console.log

// Update a signal's value
signal->set("new value")

open PreactSignals.Core
let signal = PreactSignals.Core.make("initial value")

let uppercaseSignal = computed(() => signal->val->Js.String2.toUpperCase)
uppercaseSignal->val->Js.Console.log // Would print "INITIAL VALUE"

open PreactSignals.Core
let signal = PreactSignals.Core.make("initial value")

effect(() => Js.Console.log(signal->val))
signal->set("new value") // Will trigger the console.log

open PreactSignals.Core
let signal = PreactSignals.Core.make("initial value")

let dispose = effectWithCleanup(() => Js.Console.log(signal->val))
dispose()
signal->set("new value") // Nothing will happen

open PreactSignals.Core
let signal = PreactSignals.Core.make("initial value")
let otherSignal = PreactSignals.Core.make("other initial value")

// All updates happens after the callback executes
batch(() => {
  signal->set("new value")
  otherSignal->set("other new value")
})

let counterSignal = PreactSignals.React.make(0)

@react.component
let make = () => 
  //Everytime signal's value updates, component will re-render
  <span>counter value is: {counterSignal->val}</span>

open PreactSignals.ReactHooks

@react.component
let make = () => {
  let counter = useSignal(0)
  let double = useComputed(() => counter->val * 2)
  
  <div>
    <span>Counter value is: {counter->val} and it's double is: {double->val}</span>
    <button onClick={() => counter->set(counter->val + 1)}>Increment counter</button>
  </div>
}