https://github.com/edwinm/web-component-decorator
Lightweight TypeScript decorators for web components for easier handling of attribute changes and cleaner code
https://github.com/edwinm/web-component-decorator
Last synced: about 2 months ago
JSON representation
Lightweight TypeScript decorators for web components for easier handling of attribute changes and cleaner code
- Host: GitHub
- URL: https://github.com/edwinm/web-component-decorator
- Owner: edwinm
- License: mit
- Created: 2020-07-01T08:32:22.000Z (almost 5 years ago)
- Default Branch: master
- Last Pushed: 2024-01-09T17:29:45.000Z (over 1 year ago)
- Last Synced: 2024-08-08T22:16:28.532Z (10 months ago)
- Language: TypeScript
- Homepage:
- Size: 803 KB
- Stars: 4
- Watchers: 4
- Forks: 1
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
 [](https://coveralls.io/github/edwinm/web-component-decorator?branch=master) [](https://socket.dev/npm/package/web-component-decorator) [](https://www.codefactor.io/repository/github/edwinm/web-component-decorator) [](https://snyk.io/test/github/edwinm/web-component-decorator) [](https://github.com/edwinm/web-component-decorator/blob/master/dist/bundle.min.js) [](https://www.npmjs.com/package/web-component-decorator) [](https://github.com/edwinm/web-component-decorator/blob/master/LICENSE)
# Web component decorator
> Lightweight TypeScript decorators for web components for easier handling of attribute changes and cleaner code
Replaces the web component functions `customElements.define(…)`, `observedAttributes()` and `attributeChangedCallback(…)` with decorators `@define(…)` and `@attribute(…)`.
Advantages over other solutions:
- Includes Typescript definitions
- Extend any HTML element
- Non opinionated
- Lightweight
- Cleaner code
## Installation
```bash
npm install --save-dev web-component-decorator
```
## Example
```ts
import { attribute, CustomElement, define } from "web-component-decorator";
@define("my-button")
class MyButton extends HTMLElement implements CustomElement {
constructor() {
super();
this.attachShadow({ mode: "open" });
this.shadowRoot.innerHTML = `
button {
padding: 5px;
}
#icon {
vertical-align: middle;
}
![]()
`;
}
@attribute("icon")
setIcon(icon: string, oldIcon: string) {
this.shadowRoot
.getElementById("icon")
.setAttribute("src", `icons/${icon}-24px.svg`);
}
}
```
This example can be found in the `demo` directory in the repository.
## API
### Define custom element
### `@define(tagname [, options])`
#### Parameters
| Name | Type | Description |
| ------- | ----------------- | ----------------------------------------------------------------------------------------------- |
| tagname | string | Name of the tag to use. Should include a '-' (minus) |
| options | object (optional) | Object with the form `{ extends: string }`, where extends is the name of the HTML tag to extend |
Replacement for `customElements.define(tagname, classname, options)`.
To be put right above the class declaration of the web component.
### Observe attributes
### `@attribute(attributename)`
| Name | Type | Description |
| ------------- | ------ | --------------------- |
| attributename | string | Name of the attribute |
Replacement for `observedAttributes()` and `attributeChangedCallback(…)`.
The decorated function has the following signature:
**`anyName(newValue: string, oldValue:string): void`** - Function to be called when an attributte changes, with the new and old value of the attribute.
A setter can also be decorated:
**`set anyName(value: string): void`** - Function to be called when an attributte changes, with the new value of the attribute.
### Interface
### `CustomElement`
Interface to implement to get access to the web component type definitions.
## experimentalDecorators
> **Note**
> In `tsconfig.json`, don't forget to add `"experimentalDecorators": true` to `compilerOptions`.
## License
Copyright 2023 [Edwin Martin](https://bitstorm.org/) and released under the MIT license.