soo.js

Soo

Why ?

• Make custom elements with easy API
• Library size gziped 1KB
• No bundling needed, for virtual-dom or anything else, so if using modern browsers, just plug and create.
• Has same API as omi but is great alternative if you want to create custom elements without JSX, virtual DOM and store.

---

install

npm install soo.js

or add to index.html

<script src="https://unpkg.com/soo.js"></script>

or

import Soo from "https://unpkg.com/soo.js"

---

Examples

Check live examples here

Example files here

---

Basic example

import Soo from "https://unpkg.com/soo.js";
import {HTML} from "https://unpkg.com/kelbas"

class Test extends Soo {
  install() {
    this.data = { liked: false, name: "Like me!" };
  }

  likeIt() {
    this.data.liked = true;
    this.update();
  }
  

  css() {
    return `:host {
              padding:5px;
            }
            button {
                background:green;
                padding:10px 5px;
                outline:none;
                cursor:pointer;
            }`;
  }

  render() {
    if (this.data.liked) {
      return HTML`<span>Liked</span>`;
    }
    return HTML`<button onclick="${this.likeIt.bind(this)}">${this.data.name}</button>`;
  }
}

customElements.define("like-button", Test);

Async example

class Test extends Soo {
    getData() {
        return fetch('https://jsonplaceholder.typicode.com/users/')
        .then(response => response.json())
        .then(json => Promise.resolve(json))
    }
  
    css() {
      return `:host {
                display:grid;
              }
              #users-container {
                  display:grid;
                  width:400px;
              }
              .users-list {
                  display:grid;
                  grid-row-gap:3px;
                  margin:5px 0;
                  background:teal;
                  padding:10px;
                  color:white;
              }
              .name {
                  text-decoration:underline;
              }
             `;
    }
  
    async render() {
        const data = await this.getData();

        return HTML`
                    <section id="users-container">
                        <h3>Users list</h3>
                        ${data.map(item => `<div class="users-list">
                                                <span class="name">Name: ${item.name}</span>
                                                <span class="emai">Email: ${item.email}</span>
                                            </div>`).join("")}
                    </section>
                   `
    }
  }
    
  customElements.define("async-example", Test);

---

API explanation

Functions	value	Usage
update		Makes component re-render
install		Fires at the start of component, best place to set properties
installed		Fires after component is rendered
uninstall		Fires after component is removed
afterUpdate		Fires after component is updated
beforeRender		Fires before component is rendered
fire	event name, payload	fires event thats listenable from component
fireGlobal	event name, payload	fires event thats listenable from document
render	HTML string	return your HTML element
css	css string	return your component style