Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/davidjamesstone/hyperapp-customelements
W3C Web Components Custom Elements for hyperapp
https://github.com/davidjamesstone/hyperapp-customelements
Last synced: about 1 month ago
JSON representation
W3C Web Components Custom Elements for hyperapp
- Host: GitHub
- URL: https://github.com/davidjamesstone/hyperapp-customelements
- Owner: davidjamesstone
- License: mit
- Created: 2018-02-28T21:51:29.000Z (almost 7 years ago)
- Default Branch: master
- Last Pushed: 2018-03-17T21:55:17.000Z (over 6 years ago)
- Last Synced: 2024-11-01T11:51:32.497Z (about 1 month ago)
- Language: JavaScript
- Homepage: https://davidjamesstone.github.io/hyperapp-customelements/
- Size: 241 KB
- Stars: 17
- Watchers: 5
- Forks: 2
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- hyperawesome - davidjamesstone/hyperapp-customelements - W3C Web Components Custom Elements for hyperapp. (Utilities V1)
README
# hyperapp-customelements
`hyperapp-customelements` is a tiny (3KB) Web Components [Custom Elements library](#custom-elements) based on `hyperapp`.
Define Custom Elements that:
- work in all evergreen browsers and IE10.
- are based on [hyperapp](https://github.com/hyperapp/hyperapp) so you get
- a beautifully simple API
- a functional paradigm
- immutable state data
- Virtual DOM updates
- provide a solid migration path to Custom Elements V1
See it in action [here](https://davidjamesstone.github.io/hyperapp-customelements/)
```js
const define = require('hyperapp-customelements')
const MyElement = define({
// Required
name: 'my-element',
view () {
// Any `h()` returning function including JSX or a transformed `hyperviews` template
},
// Optional
state: {
// Initial hyperapp state
},
actions: {
// Hyperapp actions
},
constructor () {
// Wired actions are now available as `this.actions`
},
// Attributes to observe.
// Each item in the array must be a string or an object.
// Use an object to provide a conversion function.
// The function is used to convert the value from a string when reflecting to state
// E.g ['title', { max: Number }, { show: Boolean }, { custom: (value) => {...} }, 'another']
observedAttributes: Array,
attributeChangedCallback (name, oldValue, newValue) {
// Invoked when an observed attribute changes.
// Attribute changes are reflected to state by default.
// It's therefore not always necessary to provide this function.
// Set `mapAttrsToState` to `false` to update state manually.
},
connectedCallback () {
// Invoked when the element is inserted into the document
},
disconnectedCallback () {
// Invoked when the element is removed from the document
},
//...any other properties/methods are added to the element prototype
})
```
Then use declaratively
```html
```
or programmatically
```js
const myElement = new MyElement()
document.body.appendChild(myElement)
```
## Example
```js
const define = require('hyperapp-customelements')
define({
name: 'x-counter',
state: {
counter: 0
},
actions: {
down: value => state => ({ count: state.count - value }),
up: value => state => ({ count: state.count + value })
},
view: (state, actions) => (
{state.count}
actions.down(1)} disabled={state.count <= 0}>ー
actions.up(1)} disabled={state.count >= state.max}>＋
),
observedAttributes: [{ max: Number }]
})
```
```html
```
# Notes
You may notice that the API looks like Custom Elements V1, however the decision was taken to
initially [target Custom Elements V0](https://github.com/WebReflection/ce-v0) but with a V1 flavour so, when V1 is widely supported, the upgrade will be simple. See [this article](https://medium.com/@WebReflection/a-custom-elements-v0-grampafill-dc1319420e9b) for more information. Huge thanks to [Andrea Giammarchi](https://github.com/WebReflection) for all his work in this area.