npm: npm i swiss
cdn: https://unpkg.com/swiss

Swiss provides a functional way of defining custom elements.

• Extend the custom element with composition via mixins.
• Easy configuration of props, syncing to attributes and vice versa.
• Batched property sets to a single update callback.

Looking for v1?

Example - Counter

import { define } from 'swiss';
import { html, render } from 'lit-html';

const Counter = CE => el => ({
  update: () =>
    render(
      html`
        <a  @click="${() => el.count++}">
          Clicked ${el.count} times
        </a>
      `,
      el
    )
});

define('s-counter', {
  props: { count: 0 },
  setup: Counter
});

https://codesandbox.io/s/swiss-counter-cb45i

Syntax

import { define, mixins } from 'swiss';

// mixins is an array containing the default mixins set in Swiss.
// for global mixins push a function in the same format as setup below.

function setup(CE, options) {
  // CE is the custom element class and options is the object defined below.
  // This is called before the custom element is defined.
  return (el) => {
    // el is an instance of your custom element.
    // anything that is returned in the object literal is mixed in the element.
    return {
      yell: () => console.log('Whahaaa')
    }
  };
}

define('s-counter', {
  // extends: 'button' // for custom element built-ins
  setup,
  props: {
    // shorthand property definition w/ default value 0
    count: 0, 

    // readonly getter w/ default value of Steve
    firstName: {
      get: (el, val = 'Steve') => val,
    },

    // getter & setter w/ default value of King
    lastName: {
      get: (el, val = 'King') => val,
      set: (host, value) => value,
    }, 

    // getter that reflects its value to the name attribute
    name: {
      get: ({ firstName, lastName }) => `${firstName} ${lastName}`,
      reflect: true,
    },

    // prop config w/ custom to/from attribute converters
    wheel: {
      get: (host, val = { hub: 1, spokes: [9, 8, 7] }) => val,
      set: (host, val) => val,
      toAttribute: JSON.stringify,
      fromAttribute: JSON.parse,
      reflect: true,
    }

  }
});