https://github.com/luwes/swiss
🇨🇭Functional custom elements
https://github.com/luwes/swiss
custom-elements functional web-components
Last synced: 10 months ago
JSON representation
🇨🇭Functional custom elements
- Host: GitHub
- URL: https://github.com/luwes/swiss
- Owner: luwes
- Created: 2019-01-16T15:04:41.000Z (about 7 years ago)
- Default Branch: master
- Last Pushed: 2024-09-11T07:22:24.000Z (over 1 year ago)
- Last Synced: 2025-04-09T23:16:35.359Z (10 months ago)
- Topics: custom-elements, functional, web-components
- Language: JavaScript
- Homepage: https://swiss.netlify.app/
- Size: 2.46 MB
- Stars: 180
- Watchers: 6
- Forks: 6
- Open Issues: 17
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
Awesome Lists containing this project
- awesome-list - swiss
README
# 
[](https://www.npmjs.com/package/swiss)
[](https://codecov.io/gh/luwes/swiss)
**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](https://github.com/luwes/swiss/tree/v1)?
### Example - Counter
```js
import { define } from 'swiss';
import { html, render } from 'lit-html';
const Counter = CE => el => ({
update: () =>
render(
html`
el.count++}">
Clicked ${el.count} times
`,
el
)
});
define('s-counter', {
props: { count: 0 },
setup: Counter
});
```
https://codesandbox.io/s/swiss-counter-cb45i
### Syntax
```js
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'),
attributeChanged(name, oldValue, newValue) {},
connected() {},
disconnected() {}
}
};
}
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,
}
}
});
```
### Without auto props/attributes & update mixins
```js
import { Element, define, mixins } from 'swiss/element';
import { StylesMixin, css } from 'swiss/styles';
mixins.push(StylesMixin);
const styles = (selector) => css`
${selector} {
display: block;
}
`;
const props = (el) => {
get title() {
return el.getAttribute('title');
},
set title(title) {
el.setAttribute('title', title);
},
}
const setup = (CE) => (el) => {
function attributeChanged(name) {
console.log(name);
}
return {
attributeChanged
};
};
export const PlxPreview = define('plx-preview', {
styles,
props,
setup,
});
```