0.6.3 • Published 2 days ago
@auzmartist/hybrids-helpers v0.6.3
hybrids-helpers
Helper factories and functions for Hybrids Web Components.
Motivation
For larger projects, Hybrids' delightfully simple API and terse syntax can reveal some repetitive patterns which can be expressed as property factories. In particular, if you find yourself implementing the same factory patterns and custom descriptors across your projects, this library may be helpful to you.
Usage
import {cssVar, forEach, getset, prop, ref} from 'hybrids-helpers'
const MyComponent = define({
tag: 'my-component',
// define a property with optional observer
booleanProperty: prop(false, forEach( // pass multiple handler observers
// reflect value to a CSS variable on the host
cssVar('--my-css-bit', (value) => value ? '1' : '0')
(host, value, last) => console.log(`booleanProperty: ${last} -> ${value}`)
)),
// Define a property which is readable/writable but is not settable via attributes
nonReflectedProperty: getset('I remain a readable/writable property'),
// Obtain a reference to an element in the shadow DOM
span: ref('#greeting'),
render: () => html`<span id="greeting">Hello!</span>`
})
Factories can be composed to reduce Hybrids descriptor boilerplate:
{
// a prop with getter and setter, defaulting to 'bar', which reflects it's value to '--my-foobar'
foo1: prop(getset('bar'), cssVar('--my-foobar')),
// equivalent hybrids 8.x descriptor
foo2: {
get: (host, val = 'bar') => val,
set: (host, val) => val,
observe: cssVar('--my-foobar'),
},
}
Installation
hybrids-helpers depends on hybrids >= 8.0.0
pnpm i @auzmartist/hybrids-helpers
Documentation
pnpm docs:preview
0.6.3
2 days ago
0.6.2
6 days ago
0.6.1
6 days ago
0.6.0
6 days ago
0.5.3
1 month ago
0.5.0
1 month ago
0.5.2
1 month ago
0.5.1
1 month ago
0.4.2
3 months ago
0.4.1
5 months ago
0.4.0
6 months ago
0.3.6
1 year ago
0.3.5
1 year ago
0.3.0
2 years ago
0.3.2
2 years ago
0.3.1
2 years ago
0.2.2
2 years ago
0.3.4
2 years ago
0.3.3
2 years ago
0.2.1
2 years ago
0.2.0
2 years ago
0.1.0
2 years ago