From 94dc3862a39c5e5a3ad3900ade35723cd83ff698 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jonatan=20K=C5=82osko?= Date: Mon, 25 Apr 2022 12:01:48 +0200 Subject: [PATCH] Use more specific scope for custom kinos (#1142) --- .../notebook/explore/kino/custom_kinos.livemd | 18 +++++++++--------- .../notebook/explore/kino/smart_cells.livemd | 18 +++++++++--------- .../runtime/erl_dist/runtime_server_test.exs | 4 ++-- 3 files changed, 20 insertions(+), 20 deletions(-) diff --git a/lib/livebook/notebook/explore/kino/custom_kinos.livemd b/lib/livebook/notebook/explore/kino/custom_kinos.livemd index fa9fa1a5d..421ce8964 100644 --- a/lib/livebook/notebook/explore/kino/custom_kinos.livemd +++ b/lib/livebook/notebook/explore/kino/custom_kinos.livemd @@ -24,7 +24,7 @@ We can implement it using [`Kino.JS`](https://hexdocs.pm/kino/Kino.JS.html) in less than 15 LOC: ```elixir -defmodule Kino.HTML do +defmodule KinoGuide.HTML do use Kino.JS def new(html) when is_binary(html) do @@ -46,7 +46,7 @@ Let's break it down. To define a custom kino we need to create a new module, conventionally under the `Kino.` prefix, so that the end user can easily autocomplete all available kinos. In -this case we went with `Kino.HTML`. +this case we went with `KinoGuide.HTML`. We start by adding `use Kino.JS`, which makes our module asset-aware. In particular, it allows us to use the `asset/2` @@ -70,7 +70,7 @@ for the end user. Let's give our Kino a try: ```elixir -Kino.HTML.new(""" +KinoGuide.HTML.new("""

Look!

I wrote this HTML from Kino!

@@ -113,7 +113,7 @@ for handling any messages sent via `Kino.JS.Live.cast/2`. Here is how the code will look like: ```elixir -defmodule Kino.Leaflet do +defmodule KinoGuide.Leaflet do use Kino.JS use Kino.JS.Live @@ -198,7 +198,7 @@ the page and you should see all of the markers still in place. Feel free to try this out in separte browser tabs too! ```elixir -map = Kino.Leaflet.new({51.505, -0.09}, 13) +map = KinoGuide.Leaflet.new({51.505, -0.09}, 13) ``` The below cell marks a random location, so you can evaluate it @@ -207,7 +207,7 @@ multiple times for better results. ```elixir delta = fn -> (:rand.uniform() - 0.5) * 0.05 end -Kino.Leaflet.add_marker(map, {51.505 + delta.(), -0.09 + delta.()}) +KinoGuide.Leaflet.add_marker(map, {51.505 + delta.(), -0.09 + delta.()}) ``` We barely scratched the surface of maps, the Leaflet API alone is extremely @@ -224,7 +224,7 @@ Let's build a counter that can be incremented both through Elixir calls and client interactions. ```elixir -defmodule Kino.Counter do +defmodule KinoGuide.Counter do use Kino.JS use Kino.JS.Live @@ -297,7 +297,7 @@ to the server via `pushEvent`. Let's render our counter! ```elixir -counter = Kino.Counter.new(0) +counter = KinoGuide.Counter.new(0) ``` As an experiment you can open another browser tab to verify @@ -307,7 +307,7 @@ In addition to client events we can also use the Elixir API we defined for our counter. ```elixir -Kino.Counter.bump(counter) +KinoGuide.Counter.bump(counter) ``` In the next notebook we will get back to those concepts and diff --git a/lib/livebook/notebook/explore/kino/smart_cells.livemd b/lib/livebook/notebook/explore/kino/smart_cells.livemd index 9058cce0e..8ad3d6897 100644 --- a/lib/livebook/notebook/explore/kino/smart_cells.livemd +++ b/lib/livebook/notebook/explore/kino/smart_cells.livemd @@ -40,7 +40,7 @@ Smart cell that lets the user type text and generates code for printing that text. ```elixir -defmodule Kino.Kino.PrintCell do +defmodule KinoGuide.PrintCell do use Kino.JS use Kino.JS.Live use Kino.SmartCell, name: "Print" @@ -98,7 +98,7 @@ defmodule Kino.Kino.PrintCell do end end -Kino.SmartCell.register(Kino.Kino.PrintCell) +Kino.SmartCell.register(KinoGuide.PrintCell) ``` Most of the implementation includes regular `Kino.JS.Live` bits @@ -130,7 +130,7 @@ when starting the application. Now let's try out the new cell! We already inserted one below, but you can add more with the + Smart button. - + ```elixir IO.puts("something") @@ -157,7 +157,7 @@ as well! To showcase this feature, let's build a cell on top of `System.shell/2`. ```elixir -defmodule Kino.Kino.ShellCell do +defmodule KinoGuide.ShellCell do use Kino.JS use Kino.JS.Live use Kino.SmartCell, name: "Shell script" @@ -220,7 +220,7 @@ defmodule Kino.Kino.ShellCell do end end -Kino.SmartCell.register(Kino.Kino.ShellCell) +Kino.SmartCell.register(KinoGuide.ShellCell) ``` The tuple returned from `init/2` has an optional third element that @@ -233,7 +233,7 @@ access it in `to_source/1`. In this example we don't need any other attributes, so in the UI we only show the cell name. - + ```elixir System.shell( @@ -256,7 +256,7 @@ a Smart cell that takes JSON data and generates an Elixir code with a matching data structure assigned to a user-defined variable. ```elixir -defmodule Kino.JSONConverterCell do +defmodule KinoGuide.JSONConverterCell do use Kino.JS use Kino.JS.Live use Kino.SmartCell, name: "JSON converter" @@ -377,7 +377,7 @@ defmodule Kino.JSONConverterCell do end end -Kino.SmartCell.register(Kino.JSONConverterCell) +Kino.SmartCell.register(KinoGuide.JSONConverterCell) ``` In this case, one of the attributes is a variable name, so we use @@ -389,7 +389,7 @@ the variable name should default to `data2`. This time we also added some proper styling to show a Smart cell in its full glory! - + ```elixir data = [ diff --git a/test/livebook/runtime/erl_dist/runtime_server_test.exs b/test/livebook/runtime/erl_dist/runtime_server_test.exs index 510bbf5a6..ace7763bf 100644 --- a/test/livebook/runtime/erl_dist/runtime_server_test.exs +++ b/test/livebook/runtime/erl_dist/runtime_server_test.exs @@ -206,7 +206,7 @@ defmodule Livebook.Runtime.ErlDist.RuntimeServerTest do end describe "smart cells" do - defmodule Kino.SmartCell.Dumb do + defmodule Kino.DumbCell do use GenServer # Every smart cell needs a child_spec, we use the GenServer default @@ -238,7 +238,7 @@ defmodule Livebook.Runtime.ErlDist.RuntimeServerTest do defmodule Kino.SmartCell do def definitions() do - [%{kind: "dumb", module: Kino.SmartCell.Dumb, name: "Test smart cell"}] + [%{kind: "dumb", module: Kino.DumbCell, name: "Test smart cell"}] end end