wslでelixir その162

概要

wsl(wsl2じゃない)で、elixirやってみた。
練習問題やってみた。

練習問題

Livebookの、kino.jsで、blocklyを動作させよ。

写真

サンプルコード

defmodule VlBlockly do
  use Kino.JS
 	use Kino.JS.Live
	def new(toolbox) do
		Kino.JS.new(__MODULE__, toolbox)
	end
 	def init(ans, ctx) do
		{:ok, assign(ctx, ans: ans)}
	end
	def handle_connect(ctx) do
		{:ok, ctx.assigns.ans, ctx}
	end
 	def handle_event("run", _, ctx) do
		{:noreply, res(ctx, "ok")}
	end
	defp res(ctx, ans) do
		broadcast_event(ctx, "run", ans)
		ctx
	end
	asset "main.js" do
		"""
		export async function init(ctx, toolbox) {
			await ctx.importJS("https://unpkg.com/blockly/blockly.min.js");
			ctx.root.innerHTML = `
      			<div id="blocklyDiv" style="height: 480px; width: 600px;"></div>
                <button id="bt0">run</button>
			`;
			const workspace = Blockly.inject('blocklyDiv', { toolbox });
 			const bt0 = document.getElementById("bt0");
			bt0.addEventListener("click", (event) => {
                const code = Blockly.JavaScript.workspaceToCode(workspace);
                eval(code);
			});
		}
		"""
	end
end

toolbox = %{
	contents: [
		%{kind: "block", type: "text"},
		%{kind: "block", type: "text_print"}
	],
	kind: "flyoutToolbox"
}

VlBlockly.new(toolbox)

以上。