spike of template parts and jexpr

.gitignore

@@ -30,5 +30,6 @@ livestate_testbed-*.tar
 
 # In case you use Node.js/npm, you want to ignore these.
 npm-debug.log
-/assets/node_modules/
 
+node_modules
+dist

assets/js/app.js

@@ -31,4 +31,5 @@ import './todo-list-element.ts';
 // import './react-todo';
 import './join-params';
 import './patch-thing';
-import './display-error';
+import './display-error';
+import './live-state-element';

assets/js/live-state-element.ts

@@ -0,0 +1,31 @@
+import { TemplateInstance } from '@github/template-parts'
+import { parse, EvalAstFactory } from 'jexpr';
+const astFactory = new EvalAstFactory();
+import type { TemplatePart, TemplateTypeInit } from '@github/template-parts';
+
+const processor = {
+  processCallback(_: TemplateInstance, parts: Iterable<TemplatePart>, params: unknown): void {
+    if (typeof params !== 'object' || !params) return
+    for (const part of parts) {
+      const expr = parse(part.expression, astFactory);
+      part.value = expr?.evaluate(params);
+    }
+  }
+};
+
+
+export class LiveStateElement extends HTMLElement {
+
+  templateInstances: TemplateInstance[] = [];
+
+  connectedCallback() {
+    this.querySelectorAll('template[livestate]').forEach(tpl => {
+      const instance = new TemplateInstance((tpl as HTMLTemplateElement), { person: { firstName: 'Bob', lastName: 'Jones' } }, processor);
+      this.templateInstances.push(instance);
+      this.appendChild(instance);
+    });
+  }
+
+}
+
+window.customElements.define('live-state', LiveStateElement);

assets/package.json

@@ -4,7 +4,10 @@
     "build": "tsc && vite build"
   },
   "dependencies": {
+    "@github/template-parts": "^0.5.4",
+    "jexpr": "^1.0.0-pre.4",
     "lit": "^2.4.0",
+    "stampino": "[email protected]:jogibear9988/stampino.git",
     "phx-live-state": "file:../../phx-live-state"
   },
   "devDependencies": {

lib/livestate_testbed_web/controllers/page_controller.ex

@@ -20,12 +20,16 @@ defmodule LivestateTestbedWeb.PageController do
     conn |> assign(:url, url()) |> render("patchy.html")
   end
 
+  def markup_test(conn, _params) do
+    conn |> assign(:url, url()) |> render("markup_test.html")
+  end
+
   def errors(conn, _params) do
     conn |> assign(:url, url()) |> render("errors.html")
   end
 
   defp url() do
-    "#{String.replace(Endpoint.url(), "http:", "ws:")}/socket"
+    "#{Endpoint.url() |> String.replace("http:", "ws:") |> String.replace("https:", "wss:")}/socket"
     |> IO.inspect(label: "building livestate url")
   end
 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 "/markup_test", PageController, :markup_test
     get "/errors", PageController, :errors
   end
 

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

@@ -0,0 +1,6 @@
+<live-state url={@url} topic="people">
+  <template>
+    {{person.firstName}} {{person.lastName}}
+  </template>
+</live-state>
+