1.2.0: Hydration support added (with only 12 more bytes)

[Tao-VanJS]

Hi fellow VanJSers,

I'm happy to announce the release of VanJS 1.2.0. 🎉🎉🎉

The most notable feature in 1.2.0 is the official hydration support with the introduction of new API van.hydrate. With the 1.2.0 release, we can finally have the officially-supported solution for fullstack rendering in VanJS.

The major steps of building a fullstack web app with SSR, CSR and hydration will be like below:

1. Build cross-platform UI components, that can be shared between server-side and client-side.
2. Write the server-side script with Mini-Van, that defines how the HTML page rendered on the server-side. In the server-side script, you can use the cross-platform UI components built in Step 1.
3. Write the client-side script with VanJS to implement all the CSR logic. In this step, you can leverage the newly added van.hydrate API to add interactivity for all existing SSR components.

You can refer to https://vanjs.org/ssr for a detailed walkthrough on building a sample fullstack app.

These are the major things we have done to enable the fullstack rendering and hydration:

1. In Mini-Van 0.4.0 release, we make Mini-Van compatible to all the states and state binding related API in VanJS (though with the absence of reactivity). This is crucial for cross-platform UI components to work on both VanJS (client-side) and Mini-Van (server-side).
2. In VanJS 1.2.0, we implement the new API van.hydrate to support hydration. Essentially, van.hydrate allows us to specify a hydration function to describe how an SSR component can be converted into a CSR component with added reactivity, while preserving all the server-side states. Here is an example of how van.hydrate can be used:

van.hydrate(document.getElementById("basic-counter")!, dom => Counter({
  van,
  id: dom.id,
  init: Number(dom.getAttribute("data-counter")),
}))

Other changes in 1.2.0 release:

• Change van-{VERSION}.debug.js to allow string values in on... properties of tag functions, if the properties are used to set HTML attributes (via setAttribute) of the DOM element. This is crucial for cross-platform UI components to specify event handlers, as for SSR, only string-valued on... event handlers can be visible in the rendered HTML strings. You can refer to https://vanjs.org/ssr#on-properties for a detailed explanation.
• Fix some type definitions in van.d.ts:
  • For state-valued child nodes, restrict the types of val property to Primitive | null | undefined (DOM-node-valued states are not allowed anymore). This is because DOM-node-valued states have problematic behavior and should be generally avoided, see https://vanjs.org/advanced#why-not-dom-valued-states for more information.
  • For state-derived child nodes, the binding function should be of type (dom: Node | undefined) => ValidChildDomValue (changed from (dom: Node) => ValidChildDomValue), as it needs to handle to case where the dom parameter is undefined (when the binding function is invoked for the first time).
  • Simplify the type definition of Props with built-in type Record.

With the newly added hydration support, the bundle size increases slightly. Gzipped bundle increases to 970 bytes from 958 bytes (12 more bytes), which remains at 0.9kB. Minified bundle increases to 1729 bytes from 1702 bytes, which remains at 1.7kB. Thus, it's fair to say that in 1.2.0 release, we achieved hydration support with only 12 more bytes, still being the smallest reactive UI framework in the world.

❤️ Hope you can enjoy!

[awesome-club]

Great job!✌️

[Tao-VanJS]

1.2.3 was just released.

1.2.3 was a minor release. Here are the changes:

• Simplify van.d.ts for the type definition of tag functions with the help of HTMLElementTagNameMap. Thanks @yahia-berashish for the idea!

1.2.2 was skipped due to faulty release.

[Tao-VanJS]

1.2.4 was just released.

1.2.4 was a minor release. Here are the changes:

• Fix the incompatibility issue between van.debug.js and VanX

There is no change in the implementation of van.js.

[Tao-VanJS]

1.2.5 was just released.

1.2.5 was a minor release. Here are the changes:

• Improved the type definition in van.d.ts to enable auto-completion for the props parameter of tag functions. Basically there will be auto-completion support for property names of the DOM node corresponding to the tag function. There are some false positives in the suggestion list (e.g.: function names are among the suggestions), but I believe the overall developer experience is improved.

There is no change in the implementation of van.js.

[Tao-VanJS]

1.2.6 was just released.

1.2.6 was a minor release. In this release, we fixed the type error message for Props in van.d.ts.

There is no change in the implementation of van.js.

[Tao-VanJS]

1.2.7 was just released.

1.2.7 was a minor release. In this release, we updated van.d.ts to export 2 more types: Val and PropsWithKnownKeys. Thanks @DanielMazurkiewicz for the contribution!