extism works yay!!

assets/js/app.js

@@ -31,4 +31,5 @@ import './todo-list-element.ts';
 // import './react-todo';
 import './join-params';
 import './patch-thing';
+import './wasm-test';
 import './connect-error';

assets/js/wasm-test.ts

@@ -0,0 +1,41 @@
+import { html, css, LitElement } from 'lit'
+import { customElement, property, query } from 'lit/decorators.js'
+import { liveState, liveStateConfig } from 'phx-live-state';
+
+/**
+ * An example element.
+ *
+ * @slot - This element has a slot
+ * @csspart button - The button
+ */
+@customElement('wasm-test')
+@liveState({topic: 'wasm', properties: ['foo'], events: {send: ['increaseFoo']}})
+export class JoinParamsElement extends LitElement {
+
+  @property({attribute: 'the-url'})
+  @liveStateConfig('url')
+  theUrl: string = "foo";
+
+  @property()
+  // @liveStateProperty()
+  foo: string = '';
+
+  render() {
+    return html`
+      <div>
+        ${this.foo}
+      </div>
+      <button @click=${this.increaseFoo}>Increase the foo!</button>
+    `
+  }
+
+  increaseFoo() {
+    this.dispatchEvent(new CustomEvent('increaseFoo', {detail: {foo: 'even more foo!'}}));
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'wasm-test': JoinParamsElement
+  }
+}

lib/livestate_testbed_web/channels/user_socket.ex

@@ -11,6 +11,7 @@ defmodule LivestateTestbedWeb.UserSocket do
   channel "todo:*", LivestateTestbedWeb.TodoChannel
   channel "join_params", LivestateTestbedWeb.JoinParamsChannel
   channel "patchy", LivestateTestbedWeb.PatchChannel
+  channel "wasm", LivestateTestbedWeb.JsWasmChannel
 
   # Socket params are passed from the client and can
   # be used to verify and authenticate a user. After

lib/livestate_testbed_web/controllers/page_controller.ex

@@ -16,6 +16,10 @@ defmodule LivestateTestbedWeb.PageController do
     conn |> assign(:url, url()) |> render("join_params.html")
   end
 
+  def wasm(conn, _params) do
+    conn |> assign(:url, url()) |> render("wasm.html")
+  end
+
   def patchy(conn, _params) do
     conn |> assign(:url, url()) |> render("patchy.html")
   end

lib/livestate_testbed_web/router.ex

@@ -21,6 +21,7 @@ defmodule LivestateTestbedWeb.Router do
     get "/react", PageController, :react
     get "/join_params", PageController, :join_params
     get "/patchy", PageController, :patchy
+    get "/wasm", PageController, :wasm
     get "/errors", PageController, :errors
   end
 

lib/livestate_testbed_web/templates/page/wasm.html.heex

@@ -0,0 +1 @@
+<wasm-test the-url={@url}></wasm-test>

mix.exs

@@ -52,7 +52,7 @@ defmodule LivestateTestbed.MixProject do
        runtime: false,
        only: :test},
       {:live_state, ">= 0.6.0", path: "../live_state"},
-      {:extism, "~> 1.0.0-rc1"}
+      {:extism, "~> 1.0.0-rc1", git: "https://github.com/extism/elixir-sdk", branch: "fix-error-handling-issue"}
     ]
   end
 

mix.lock

@@ -7,7 +7,7 @@
   "earmark_parser": {:hex, :earmark_parser, "1.4.26", "f4291134583f373c7d8755566122908eb9662df4c4b63caa66a0eabe06569b0a", [:mix], [], "hexpm", "48d460899f8a0c52c5470676611c01f64f3337bad0b26ddab43648428d94aabc"},
   "esbuild": {:hex, :esbuild, "0.5.0", "d5bb08ff049d7880ee3609ed5c4b864bd2f46445ea40b16b4acead724fb4c4a3", [:mix], [{:castore, ">= 0.0.0", [hex: :castore, repo: "hexpm", optional: false]}], "hexpm", "f183a0b332d963c4cfaf585477695ea59eef9a6f2204fdd0efa00e099694ffe5"},
   "ex_doc": {:hex, :ex_doc, "0.28.5", "3e52a6d2130ce74d096859e477b97080c156d0926701c13870a4e1f752363279", [:mix], [{:earmark_parser, "~> 1.4.19", [hex: :earmark_parser, repo: "hexpm", optional: false]}, {:makeup_elixir, "~> 0.14", [hex: :makeup_elixir, repo: "hexpm", optional: false]}, {:makeup_erlang, "~> 0.1", [hex: :makeup_erlang, repo: "hexpm", optional: false]}], "hexpm", "d2c4b07133113e9aa3e9ba27efb9088ba900e9e51caa383919676afdf09ab181"},
-  "extism": {:hex, :extism, "1.0.0-rc1", "ef88181f99d94444831741efdb26611050fb73a08e1d345a8748bc7fa336a44b", [:mix], [{:json, "~> 1.4", [hex: :json, repo: "hexpm", optional: false]}, {:rustler, "~> 0.29.1", [hex: :rustler, repo: "hexpm", optional: false]}], "hexpm", "f80b6c4d685585578019f71849c36fb9fb2cbf6d0c90388707a5413cd6fe837e"},
+  "extism": {:git, "https://github.com/extism/elixir-sdk", "2d7ef993fdc648747028ad0657a2f0d588bd527d", [branch: "fix-error-handling-issue"]},
   "file_system": {:hex, :file_system, "0.2.10", "fb082005a9cd1711c05b5248710f8826b02d7d1784e7c3451f9c1231d4fc162d", [:mix], [], "hexpm", "41195edbfb562a593726eda3b3e8b103a309b733ad25f3d642ba49696bf715dc"},
   "floki": {:hex, :floki, "0.33.1", "f20f1eb471e726342b45ccb68edb9486729e7df94da403936ea94a794f072781", [:mix], [{:html_entities, "~> 0.5.0", [hex: :html_entities, repo: "hexpm", optional: false]}], "hexpm", "461035fd125f13fdf30f243c85a0b1e50afbec876cbf1ceefe6fddd2e6d712c6"},
   "gettext": {:hex, :gettext, "0.20.0", "75ad71de05f2ef56991dbae224d35c68b098dd0e26918def5bb45591d5c8d429", [:mix], [], "hexpm", "1c03b177435e93a47441d7f681a7040bd2a816ece9e2666d1c9001035121eb3d"},

priv/init.exs

@@ -0,0 +1,4 @@
+manifest = %{wasm: [ %{ path: "priv/wasm/dist/plugin.wasm" } ] }
+{:ok, plugin} = Extism.Plugin.new(manifest, true)
+{:ok, initial_state} = Extism.Plugin.call(plugin, "init", "")
+IO.inspect(initial_state)

priv/wasm/src/index.js

@@ -1,8 +1,16 @@
 
-export function foo() {
-  let input = JSON.parse(Host.inputString());
-  const output = {
-    stuff: input.stuff + " and moar"
-  }
-  Host.outputString(JSON.stringify(output));
-}
+import { wrap } from "./wrap";
+
+export const init = wrap(function() {
+  return { foo: "bar"};
+});
+
+export const increaseFoo = wrap(function(payload, state) {
+  return { foo: state.foo + payload.foo};
+});
+
+// export const increaseFoo({}) {
+
+// }
+
+

priv/wasm/src/wrap.js

@@ -0,0 +1,13 @@
+export function wrap(f) {
+  return function() {
+    const inputStr = Host.inputString();
+    let output
+    if (inputStr != "") {
+      const args = JSON.parse(inputStr);
+      output = f(...args);
+    } else {
+      output = f();
+    }
+    Host.outputString(JSON.stringify(output));  
+  }
+}