with-properties

custom elements base class factory with properties mapped to observed attributes

🔧 Install · 🧩 Example · 📜 API docs · 🔥 Releases · 💪🏼 Contribute · 🖐️ Help

---

Install

$ npm i with-properties

API

Table of Contents

• withProperties
  • Parameters

withProperties

src/index.ts:60-107

Creates a base class extending another class and mixins a property accessors class that is added to the observedAttributes list with key names normalized so that the prop is camelCased and the attribute is kebab-cased. It does not try to normalize values, that is left as the responsibility of the props class, so everything passed here are the attribute values which can be either string or null. Inheritance works as expected, extended classes will contain all of the parent classes' mixined properties.

If the props class includes a static property schema, then it will be used as the basis for the accessors, otherwise a new instance of the props class will be created when this function is called that will be used only for inspecting the keys and for intersecting the interfaces with the class object (so that TS/intellisense works properly).

class Foo extends withProperties(
  HTMLElement,
  class {
    fooFoo?: string
    barBar?: string
  }
) {}

customElements.define('x-foo', Foo)

const el = new Foo()

expect(el.fooFoo).toBeUndefined()
el.setAttribute('foo-foo', 'some value')
expect(el.fooFoo).toEqual('some value')

expect(el.barBar).toBeUndefined()
el.setAttribute('bar-bar', 'some other value')
expect(el.barBar).toEqual('some other value')

// example with schema:
class Foo extends withProperties(
  HTMLElement,
  class {
    static schema = {
      foo: '',
      bar: '',
    }
    foo = 'some default'
  }
) {}

Parameters

• parent any The parent constructor to extend (usually HTMLElement)
• propsClass {: C, schema: M?} A "props" class to create the properties from

Returns Constructor<any> A base constructor to be extended from

Contribute

Fork or edit and submit a PR.

All contributions are welcome!

License

MIT © 2021 stagas