Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 1,000,000+ packages pre-installed, including swiss with all npm packages installed. Try it out:

var swiss = require("swiss")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

swiss v2.1.0

🇨🇭 Swiss Element library

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,
    }

  }
});
RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free