{"id":13725760,"url":"https://github.com/luwes/swiss","last_synced_at":"2025-04-09T23:16:39.114Z","repository":{"id":34393420,"uuid":"166059503","full_name":"luwes/swiss","owner":"luwes","description":"🇨🇭Functional custom elements","archived":false,"fork":false,"pushed_at":"2024-09-11T07:22:24.000Z","size":2583,"stargazers_count":180,"open_issues_count":17,"forks_count":6,"subscribers_count":6,"default_branch":"master","last_synced_at":"2025-04-09T23:16:35.359Z","etag":null,"topics":["custom-elements","functional","web-components"],"latest_commit_sha":null,"homepage":"https://swiss.netlify.app/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/luwes.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-01-16T15:04:41.000Z","updated_at":"2024-11-03T10:44:33.000Z","dependencies_parsed_at":"2023-01-15T06:47:26.228Z","dependency_job_id":null,"html_url":"https://github.com/luwes/swiss","commit_stats":null,"previous_names":["luwes/swiss-element"],"tags_count":51,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/luwes%2Fswiss","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/luwes%2Fswiss/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/luwes%2Fswiss/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/luwes%2Fswiss/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/luwes","download_url":"https://codeload.github.com/luwes/swiss/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248125593,"owners_count":21051771,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["custom-elements","functional","web-components"],"created_at":"2024-08-03T01:02:34.116Z","updated_at":"2025-04-09T23:16:39.080Z","avatar_url":"https://github.com/luwes.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"# \u003ca href=\"https://github.com/luwes/swiss\"\u003e\u003cimg src=\"https://raw.githubusercontent.com/luwes/swiss/master/public/swiss-logo.svg?sanitize=true\" height=\"36\" alt=\"Swiss\" /\u003e\u003c/a\u003e\n\n[![Version](https://img.shields.io/npm/v/swiss.svg?color=success\u0026style=flat-square)](https://www.npmjs.com/package/swiss)\n[![codecov](https://img.shields.io/codecov/c/github/luwes/swiss.svg?style=flat-square\u0026color=success)](https://codecov.io/gh/luwes/swiss)\n![Badge size](http://img.badgesize.io/https://unpkg.com/swiss@latest/dist/swiss.js?compression=gzip\u0026label=gzip\u0026style=flat-square\u0026version=2)\n\n**npm**: `npm i swiss`  \n**cdn**: https://unpkg.com/swiss\n\nSwiss provides a functional way of defining custom elements.\n\n- Extend the custom element with composition via mixins.\n- Easy configuration of props, syncing to attributes and vice versa.\n- Batched property sets to a single update callback.\n\n\u003e Looking for [v1](https://github.com/luwes/swiss/tree/v1)?\n\n### Example - Counter\n\n```js\nimport { define } from 'swiss';\nimport { html, render } from 'lit-html';\n\nconst Counter = CE =\u003e el =\u003e ({\n  update: () =\u003e\n    render(\n      html`\n        \u003ca href=\"#\" @click=\"${() =\u003e el.count++}\"\u003e\n          Clicked ${el.count} times\n        \u003c/a\u003e\n      `,\n      el\n    )\n});\n\ndefine('s-counter', {\n  props: { count: 0 },\n  setup: Counter\n});\n```\n\nhttps://codesandbox.io/s/swiss-counter-cb45i\n\n### Syntax\n\n```js\nimport { define, mixins } from 'swiss';\n\n// mixins is an array containing the default mixins set in Swiss.\n// for global mixins push a function in the same format as setup below.\n\nfunction setup(CE, options) {\n  // CE is the custom element class and options is the object defined below.\n  // This is called before the custom element is defined.\n  return (el) =\u003e {\n    // el is an instance of your custom element.\n    // anything that is returned in the object literal is mixed in the element.\n    return {\n      yell: () =\u003e console.log('Whahaaa'),\n\n      attributeChanged(name, oldValue, newValue) {},\n      connected() {},\n      disconnected() {}\n    }\n  };\n}\n\ndefine('s-counter', {\n  // extends: 'button' // for custom element built-ins\n  setup,\n  props: {\n    // shorthand property definition w/ default value 0\n    count: 0, \n\n    // readonly getter w/ default value of Steve\n    firstName: {\n      get: (el, val = 'Steve') =\u003e val,\n    },\n\n    // getter \u0026 setter w/ default value of King\n    lastName: {\n      get: (el, val = 'King') =\u003e val,\n      set: (host, value) =\u003e value,\n    }, \n\n    // getter that reflects its value to the name attribute\n    name: {\n      get: ({ firstName, lastName }) =\u003e `${firstName} ${lastName}`,\n      reflect: true,\n    },\n\n    // prop config w/ custom to/from attribute converters\n    wheel: {\n      get: (host, val = { hub: 1, spokes: [9, 8, 7] }) =\u003e val,\n      set: (host, val) =\u003e val,\n      toAttribute: JSON.stringify,\n      fromAttribute: JSON.parse,\n      reflect: true,\n    }\n\n  }\n});\n```\n\n### Without auto props/attributes \u0026 update mixins\n\n```js\nimport { Element, define, mixins } from 'swiss/element';\nimport { StylesMixin, css } from 'swiss/styles';\n\nmixins.push(StylesMixin);\n\nconst styles = (selector) =\u003e css`\n  ${selector} {\n    display: block;\n  }\n`;\n\nconst props = (el) =\u003e {\n  get title() {\n    return el.getAttribute('title');\n  },\n  set title(title) {\n    el.setAttribute('title', title);\n  },\n}\n\nconst setup = (CE) =\u003e (el) =\u003e {\n\n  function attributeChanged(name) {\n    console.log(name);\n  }\n\n  return {\n    attributeChanged\n  };\n};\n\nexport const PlxPreview = define('plx-preview', {\n  styles,\n  props,\n  setup,\n});\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fluwes%2Fswiss","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fluwes%2Fswiss","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fluwes%2Fswiss/lists"}