Miss any of our Open RFC calls?Watch the recordings here! ¬Ľ

swiss

2.1.0¬†‚Äʬ†Public¬†‚Äʬ†Published

Swiss

Version codecov Badge size

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 href="#" @click="${() => el.count++}">
          Clicked ${el.count} times
        </a>
      `,
      el
    )
});
 
define('s-counter', {
  props: { count: 0 },
  setup: Counter
});

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', {
  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,
    }
 
  }
});

Install

npm i swiss

DownloadsWeekly Downloads

34

Version

2.1.0

License

MIT

Unpacked Size

60.8 kB

Total Files

18

Last publish

Collaborators

  • avatar