question about polymorphic example

[kangaroolab]

hi looking at the example below, is val function only used once (eg val(color)?)? what is below code trying to do?

Button({color: colorState, text: textState, onclick: onclickState})

const {button, span} = van.tags

const stateProto = Object.getPrototypeOf(van.state())
const val = v => {
  const protoOfV = Object.getPrototypeOf(v ?? 0)
  if (protoOfV === stateProto) return v.val
  if (protoOfV === Function.prototype) return v()
  return v
}

const Button = ({color, text, onclick}) =>
  button({style: () => `background-color: ${val(color)};`, onclick}, text)

const App = () => {
  const colorState = van.state("green")
  const textState = van.state("Turn Red")

  const turnRed = () => {
    colorState.val = "red"
    textState.val = "Turn Green"
    onclickState.val = turnGreen
  }
  const turnGreen = () => {
    colorState.val = "green"
    textState.val = "Turn Red"
    onclickState.val = turnRed
  }
  const onclickState = van.state(turnRed)

  const lightness = van.state(255)

  return span(
    Button({color: "yellow", text: "Click Me", onclick: () => alert("Clicked")}), " ",
    Button({color: colorState, text: textState, onclick: onclickState}), " ",
    Button({
      color: () => `rgb(${lightness.val}, ${lightness.val}, ${lightness.val})`,
      text: "Get Darker",
      onclick: () => lightness.val = Math.max(lightness.val - 10, 0),
    }),
  )
}

van.add(document.body, App())

[Tao-VanJS]

The code:

Button({color: colorState, text: textState, onclick: onclickState})

instantiates a Button component with State objects as the color, text and onclick properties. The whole piece of code illustrates that the input properties of Button components can be a raw value, a State object, or a binding function. Thus we can say these input properties are polymorphic.

[kangaroolab]

thanks but if you look at Button function definition, I didn't see val function applied to text and onclick. so how it works behind the scene. why we do val(color) but not the other two?

[sirenkovladd]

colorState is actually just a Proxy
and all interaction with val is syntax sugar to help register the dependency

when you create a Button it actually works exactly the same as if you wrote

Button({color: () => colorState.val, text: () => textState.val, onclick: () => onclickState.val})

you can find it here It seem more difficult at first look

[Tao-VanJS]

text is being used as a child DOM node, and onclick is being used as a DOM node property. Child DOM node and DOM node property inherently support raw values, State objects and bind functions as values so we don't need to wrap them around the val function.

[kangaroolab]

thank you both.

could you further advise how the val function is related to this? it seems defined separately...how is it being used?

const val = v => {
const protoOfV = Object.getPrototypeOf(v ?? 0)
if (protoOfV === stateProto) return v.val
if (protoOfV === Function.prototype) return v()
return v
}

[Tao-VanJS]

This is the exact val function used in this line (in val(color)):

  button({style: () => `background-color: ${val(color)};`, onclick}, text)

[kangaroolab]

yes how it applies to color. for onclick, should it be onclick: onclick? I don't see the key of onclick: for it.

[Tao-VanJS]

{onclick} is just the syntax sugar for {onclick: onclick} :-)