Value State binding

[efpage]

There is an example on VanJS.org about State object as properties, which is a bit confusing:

const {input, span} = van.tags

const ConnectedProps = () => {
  const value = van.state("")
  return span(
    input({type: "text", value, oninput: e => value.val = e.target.value}),
    input({type: "text", value, oninput: e => value.val = e.target.value}),
  )
}

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

This works, but if you rename the state object, it does not:

const ConnectedProps = () => {
  const text = van.state("")
  return span(
    input({type: "text", text, oninput: e => text.val = e.target.value}),
    input({type: "text", text, oninput: e => text.val = e.target.value}),
  )
}

Here, you need to use:

    input({type: "text", value: text, oninput: e => text.val = e.target.value}),
}

I have no clue why a variable name can be used as an attribute name in VanJS. Maybe it is a nice feature, but is it in any case not self-explanatory. The example would be much clearer, if the value-attribute was named explicitpy.

[Tao-VanJS]

This is standard JavaScript feature called property value shorthand. Here is an article that explains the feature: https://www.geeksforgeeks.org/shorthand-syntax-for-object-property-value-in-es6/.

Basically {value} is just a shorthand-way to say {value: value}.

[efpage]

People who know will use this feature anyway. For a code example, this might be confusing, I would recommend to make code examples as clear as possible. This helps people to understand the code and focus on the important points.

[Tao-VanJS]

Thanks for your feedback!

Honestly speaking I don't know how to address the comment. The property value shorthand feature was introduced in ES6 (2015), which was 8 years ago. If some feature is confusing because it's not known to all JavaScript users, the same argument could go to other standard features as well, then it will be hard for me to know what feature set I can use without causing confusion.

[efpage]

This was the reason for the feedback. Using shorthands here is possible, but not necessary. As it is not important for the code, I just wanted to give you a feedback that the example could be easier to understand, if you do not use them here.

[Tao-VanJS]

Okay, I updated the code for this specific example, cuz there isn't too much difference. IIRC there are many places throughout the https://vanjs.org website where property shorthand is being used, and in some places, in my opinion, property shorthand is crucial for more concise code. At this point I am not going to remove to all the usage of property shorthand.