nostr-web-components/lib/nostr-event-json.js

collection of web components that provide quick access to basic nostr things

import { decodeNostrURI } from "@nostr/tools/nip19";
import { normalizeURL } from "@nostr/tools/utils";
import { getOutboxRelaysFor, pool } from "./nostr.js";
import { debounce } from "./utils.js";
class NostrEventJson extends HTMLElement {
  static observedAttributes = ["ref", "event"];
  constructor() {
    super();
    this.attachShadow({ mode: "open" });
  }
  connectedCallback() {
    this.style.display = "inline-block";
    this.style.width = "fit-content";
    this.style.height = "fit-content";
    this.set();
  }
  attributeChangedCallback() {
    this.set();
  }
  set = debounce(async () => {
    let evt = null;
    let eventj = this.getAttribute("event");
    if (eventj) {
      try {
        evt = JSON.parse(eventj);
      } catch {
      }
    }
    if (!evt) {
      let input = this.getAttribute("ref");
      if (input) {
        let { type, data } = decodeNostrURI(input);
        let relays = [];
        let author;
        let filter;
        if (type === "nevent") {
          let d = data;
          relays = d.relays || [];
          author = d.author;
          filter = { ids: [d.id] };
        } else if (type === "naddr") {
          let d = data;
          filter = { authors: [d.pubkey], "#d": [d.identifier], kinds: [d.kind] };
          relays = d.relays || [];
          author = d.pubkey;
        } else if (type === "note") {
          filter = { ids: [data] };
        } else if (input.match(/[0-9a-f]{64}/)) {
          filter = { ids: [input] };
        } else {
          return;
        }
        relays = relays.map(normalizeURL);
        if (author)
          relays = await getOutboxRelaysFor(author);
        evt = await pool.get(relays, filter);
      }
    }
    if (evt) {
      const { shadowRoot } = this;
      shadowRoot.innerHTML = `<pre part="pre" style="white-space: pre-wrap; word-break: break-all">{
  <span part="key">"id":</span> <span part="id" id="id"></span>
  <span part="key">"pubkey":</span> <span part="pubkey" id="pubkey"></span>
  <span part="key">"kind":</span> <span part="kind" id="kind"></span>
  <span part="key">"created_at":</span> <span part="created_at" id="created_at"></span>
  <span part="key">"tags":</span> <span part="tags" id="tags"></span>
  <span part="key">"content":</span> <span part="content" id="content"></span>
  <span part="key">"sig":</span> <span part="sig" id="sig"></span>
}</pre>`;
      shadowRoot.getElementById("id").textContent = evt.id;
      shadowRoot.getElementById("pubkey").textContent = evt.pubkey;
      shadowRoot.getElementById("kind").textContent = `${evt.kind}`;
      shadowRoot.getElementById("created_at").textContent = `${evt.created_at}`;
      shadowRoot.getElementById("tags").textContent = JSON.stringify(evt.tags);
      shadowRoot.getElementById("content").textContent = evt.content;
      shadowRoot.getElementById("sig").textContent = evt.sig;
    }
  }, 200);
}
window.customElements.define("nostr-event-json", NostrEventJson);
export {
  NostrEventJson as default
};