1.2.1: Improved type system in van.d.ts

[Tao-VanJS]

Hi fellow VanJSers,

1.2.1 was just released.

1.2.1 is a minor release. In this release, we changed van.d.ts to make some improvement to VanJS's type system:

1. 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) {
    const dom = <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")
    return dom
  }
  return SuggestionList({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")
    return dom
  }
  return SuggestionList({candidates: candidates.val, selectedIndex: selectedIndex.val})
}

2. 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.

❤️ Hope you can enjoy!