@endeavorance/quill
    Preparing search index...

    @endeavorance/quill

    Quill

    Web components, but fun tho

    Quill is a lightweight Web Component library that provides a base QuillElement class to streamline working with Web Components.

    class CountingButton extends QuillElement {
      static template = html`<button>0</button>`;

      static styles = css`
        button {
          border: 1px solid black;
          font-size: 1.25rem;
          padding: 0.5em;
        }
      `;

      static observedAttributes = ["count"];

      get count(): number {
        const countAttr = this.getAttribte("count") ?? "0";
        return Number.parseInt(countAttr);
      }

      set count(newCount: number) {
        this.setAttribute("count", newCount);
        this.$root.innerText = newCount;
      }

      onAttr(name, value) {
        if (name === "count") {
          if (value === null) {
            this.count = 0;
          } else {
            this.count = Number.parseInt(value);
          }
        }
      }

      increment = () => {
        this.count += 1;
      };

      onMount() {
        this.$root.addEventListener("click", this.increment);

        return () => {
          this.$root.removeEventListener("click", this.increment);
        };
      }
    }

    customElements.define("counting-button", CountingButton);

    See: quill.stuffby.dev

    Quill uses HTML Template elements to manage templated content.

    A handful of helper attributes are available to streamline templating.

    q-html

    When set on an element, replaces the element's innerHTML with the value of the host element's attribute listed.

    <!-- In the template of <chat-message> -->
    <div class="chat">
      <span q-html="message"></span>
    </div>

    <!-- Using the element -->
    <chat-message message="<strong>Hello</strong>, world!"></chat-message>

    <!-- Produces... -->
    <div class="chat">
      <span> <strong>Hello</strong>, world! </span>
    </div>

    q-text

    Similar to q-html, but sets the innerText of the element instead of the innerHTML.

    q-map

    When set on an element, maps the values of the element's attributes to the specified values.

    <!-- In the template of <user-card> -->
    <div class="user-card">
      <h2 q-text="username">User</h2>
      <img q-map="src=avatar, title=username" alt="Avatar" />
    </div>

    <!-- Using the element -->
    <user-card username="flynn" avatar="https://cdn/flynn.jpg"></user-card>

    <!-- Produces... -->
    <div class="user-card">
      <h2>flynn</h2>
      <img src="https://cdn/flynn.jpg" title="flynn" alt="Avatar" />
    </div>

    q-if

    Only render the element when the referenced value exists.

    <!-- With a host element such as... -->
    <control-panel admin></control-panel>

    <!-- Use a template such as... -->
    <div q-when-set="admin">
      <p>You are a super admin user omg</p>
    </div>

    q-if-not

    The inverse of q-if

    Quill