You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
1.2.1 is a minor release. In this release, we changed van.d.ts to make some improvement to VanJS's type system:
The binding function for state-derived child nodes is now taking the type ((dom?: Node) => ValidChildDomValue) | ((dom?: Element) => Element). (dom?: Node) => ValidChildDomValue was the supported type for binding functions in prior versions, which means before 1.2.1, the binding function for stateful binding needs to take Node | undefined as the input parameter. This is usually inconvenient for the primary use case where the bound DOM node is an Element, as type casting is often needed if Element-specific methods (e.g.: querySelector) are used in the binding function. 1.2.1 adds another type option for the binding function - (dom?: Element) => Element, i.e.: binding function can take dom | undefined as the input parameter as long as it only returns a DOM Element (which means this binding function is for a DOM element, where text nodes are not possible). The improved type definition can simplify the code by saving us from type castings. For instance, the binding function for the Autocomplete demo can be simplified from:
node=>{if(node&&candidates.val===candidates.oldVal){constdom=<HTMLElement>node// If the candidate list doesn't change, we don't need to re-render the// suggestion list. Just need to change the selected candidate.dom.querySelector(`[data-index="${selectedIndex.oldVal}"]`)?.classList?.remove("selected")dom.querySelector(`[data-index="${selectedIndex.val}"]`)?.classList?.add("selected")returndom}returnSuggestionList({candidates: candidates.val,selectedIndex: selectedIndex.val})}
to:
(dom?: Element)=>{if(dom&&candidates.val===candidates.oldVal){// If the candidate list doesn't change, we don't need to re-render the// suggestion list. Just need to change the selected candidate.dom.querySelector(`[data-index="${selectedIndex.oldVal}"]`)?.classList?.remove("selected")dom.querySelector(`[data-index="${selectedIndex.val}"]`)?.classList?.add("selected")returndom}returnSuggestionList({candidates: candidates.val,selectedIndex: selectedIndex.val})}
Specialize the return types of tag functions for more known tag names. Specifically, 1.2.1 added specialized return types for tags of HTMLElement type. With 1.2.1 release, things like van.tags.header(...) will return type HTMLElement instead of the generic Element type.
reacted with thumbs up emoji reacted with thumbs down emoji reacted with laugh emoji reacted with hooray emoji reacted with confused emoji reacted with heart emoji reacted with rocket emoji reacted with eyes emoji
-
Hi fellow VanJSers,
1.2.1
was just released.1.2.1
is a minor release. In this release, we changedvan.d.ts
to make some improvement to VanJS's type system:((dom?: Node) => ValidChildDomValue) | ((dom?: Element) => Element)
.(dom?: Node) => ValidChildDomValue
was the supported type for binding functions in prior versions, which means before1.2.1
, the binding function for stateful binding needs to takeNode | undefined
as the input parameter. This is usually inconvenient for the primary use case where the bound DOM node is anElement
, as type casting is often needed ifElement
-specific methods (e.g.:querySelector
) are used in the binding function.1.2.1
adds another type option for the binding function -(dom?: Element) => Element
, i.e.: binding function can takedom | undefined
as the input parameter as long as it only returns a DOMElement
(which means this binding function is for a DOM element, where text nodes are not possible). The improved type definition can simplify the code by saving us from type castings. For instance, the binding function for theAutocomplete
demo can be simplified from:to:
1.2.1
added specialized return types for tags ofHTMLElement
type. With1.2.1
release, things likevan.tags.header(...)
will return typeHTMLElement
instead of the genericElement
type.❤️ Hope you can enjoy!
Beta Was this translation helpful? Give feedback.
All reactions