Xenia 0.2.0 is on Hex. Xenia puts imperative JavaScript libraries (charts, editors, maps, date pickers) into LiveView pages: a small adapter per library, and Xenia handles props, events, commands, form fields and cleanup.

New in 0.2.0

• Lazy islands: lazy=”visible” starts an island only when it scrolls near the screen; with code splitting (now documented), its library downloads only then too. In the examples app’s production build, a page downloads 0.59 MB of JavaScript up front instead of 7.9 MB.
• TypeScript: a generic Adapter<Instance, Props, Events, Commands> types an adapter for any npm package, in a .ts file or in plain JS with a JSDoc comment. The 16 official adapters are typed, and mix xenia.install adds Xenia’s types to tsconfig.json.
• Xenia.Test: ExUnit helpers for pages with islands: xenia_props/2, render_xenia_event/4, assert_xenia_command/5, xenia_call/5.
• Existing apps: mix xenia.install –islands-only adds just the hooks, the import and the formatter entry.
• Connection: consumes: [“connection”] tells an island when its LiveView is disconnected, for example to make an editor read-only.
• ctx.signal: an AbortSignal per island. Requests and document listeners that use it are cleaned up when the island goes.
• Large data: the guide shows how to send changes as commands. For a 10,000-point chart, a new point is 99 bytes as a command and 109 KB as a prop.

One breaking change: multi-value form fields (Tom Select multiple, flatpickr ranges, SortableJS) now submit a list (post[tags][]), so an Ecto {:array, _} field casts it directly. Remove any Jason.decode/1 of those fields.

{:xenia, "~> 0.2.0"}

Every example in the examples app now shows the code behind it.

• Changelog: https://hexdocs.pm/xenia/changelog.html
• Docs: https://hexdocs.pm/xenia
• Code and examples: https://github.com/uzaydurdu/xenia

Feedback is welcome, especially from anyone wrapping a library Xenia has no adapter for.