feat: add scaffold for custom component

assets/calendar.js

@@ -0,0 +1,71 @@
+import { html, LitElement } from "lit";
+import { ref, createRef } from "lit/directives/ref.js";
+import * as d3 from "d3";
+
+export class CalendarElem extends LitElement {
+  containerRef = createRef();
+  constructor() {
+    super();
+  }
+
+  firstUpdated() {
+    // var el = this.renderRoot.getElementById("#target");
+    // var container = this.containerRef.value;
+    // d3.select(container)
+    //   .style("stroke-width", 4)
+    //   .on("mouseover", function (d, i) {
+    //     // console.log("hi");
+    //     d3.select(container)
+    //       .transition()
+    //       .duration("50")
+    //       .attr("opacity", "0.50");
+    //   })
+    //   .on("mouseout", function (d, i) {
+    //     d3.select(container).transition().duration("50").attr("opacity", "1.0");
+    //   });
+    // this.containerRef.value.innerText = "ok";
+  }
+
+  render() {
+    return html`
+      <svg>
+        <circle
+          id="target"
+          ${ref(this.containerRef)}
+          style="fill: #69b3a2"
+          stroke="black"
+          cx="50"
+          cy="50"
+          r="40"
+        ></circle>
+      </svg>
+    `;
+  }
+}
+
+export var CalendarHook = {
+  mounted() {
+    console.log("mounted");
+    var container = this.el;
+
+    d3.select(container)
+      .style("stroke-width", 4)
+      .on("mouseover", function (d, i) {
+        // console.log("hi");
+        d3.select(container)
+          .transition()
+          .duration("50")
+          .attr("opacity", "0.50");
+      })
+      .on("mouseout", function (d, i) {
+        d3.select(container).transition().duration("50").attr("opacity", "1.0");
+      });
+    // set event listener on this element
+    // this.el.addEventListener("abc")
+
+    // this.handleEvent("sent_from_server", (data)=>{
+    // })
+
+    // this.pushEvent("send_event", {})
+  },
+};

assets/js/app.js

@@ -21,19 +21,28 @@ import "phoenix_html";
 import { Socket } from "phoenix";
 import { LiveSocket } from "phoenix_live_view";
 import topbar from "../vendor/topbar";
+import { CalendarElem, CalendarHook } from "../calendar";
+
+let Hooks = {
+  CalendarHook,
+};
 
 let csrfToken = document
   .querySelector("meta[name='csrf-token']")
   .getAttribute("content");
 let liveSocket = new LiveSocket("/live", Socket, {
   params: { _csrf_token: csrfToken },
+  hooks: Hooks,
 });
 
 // Show progress bar on live navigation and form submits
 topbar.config({ barColors: { 0: "#29d" }, shadowColor: "rgba(0, 0, 0, .3)" });
 window.addEventListener("phx:page-loading-start", (_info) => topbar.show(300));
 window.addEventListener("phx:page-loading-stop", (_info) => topbar.hide());
 
+// Define web components
+window.customElements.define("vs-calendar", CalendarElem);
+
 // connect if there are any LiveViews on the page
 liveSocket.connect();