Livebook: thoughts on Kino Components

This project https://github.com/chriseyre2000/kino_wardley is an example of how to integrate a javascript based conponent into Livebook.

I had found myself writing an increasing amount of embedded javascript code in this project, which became harder to maintain. By extracting the javascript as an asset it becomes independently testable.

This does mean that I have an Elixir based tool that has more Javascript than Elixir.

This technique allows a livebook component to be implemented only requiring the following elixir code:

defmodule KinoWardley.Output do
  use Kino.JS, assets_path: "lib/assets/js"

# docs here...

def new(spec) do
    Kino.JS.new(__MODULE__, spec)
  end
end

It also requires the following package function (called as part of project in mix.exs)

defp package do
    [
      name: "kino_wardley",
      description: "A livebook smartcell that includes a Wardley Map.",
      files: ~w(lib lib/assets/js .formatter.exs mix.exs README* LICENSE* CHANGELOG.md),
      licenses: ["MIT"],
      links: %{"GitHub" => "https://github.com/chriseyre2000/kino_wardley"}
    ]
  end

This is all it takes to wrap the javascript component.

It does require a main.js file in the lib/assets/js folder. Here is the minimal version:

export function init(ctx, spec) {

// Use ctx to do something interesting with the spec
// ctx.root.innerHTML = spec
// console.log(spec)
}

The spec is the same value as passed to the new.

Hopefully this will make implementing Javascript components in liveview easier. Please keep to minimal dependencies to make your life easier.