ayo/wcb
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

refactor: use Proxy of empty object

Browse source
This commit is contained in:
Ayo 2023-11-23 22:15:25 +01:00
parent d392b1a0ca
commit fa506c8c0f
2 changed files with 4 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
README.md
View file

@ -9,7 +9,7 @@
When you extend the `WebComponent` class for your component, you only have to define the `template` and `properties`. Any change in any property value will automatically cause just the component UI to render. When you extend the `WebComponent` class for your component, you only have to define the `template` and `properties`. Any change in any property value will automatically cause just the component UI to render.
The result is a reactive UI on property changes. The result is a reactive UI on property changes. [View on CodePen ↗](https://codepen.io/ayoayco-the-styleful/pen/ZEwoNOz?editors=1010)
<details> <details>
<summary>Table of Contents</summary> <summary>Table of Contents</summary>
@ -140,12 +140,12 @@ Therefore, this will tell the browser that the UI needs a render if the attribut
### Alternatives ### Alternatives
The current alternatives are using what `HTMLElement` provides out-of-the-box, which are: The current alternatives are using what `HTMLElement` provides out-of-the-box, which are:
1. `HTMLElement.dataset` for attributes prefixed with `data-*`. Read more about this [`on MDN`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/dataset). 1. `HTMLElement.dataset` for attributes prefixed with `data-*`. Read more about this [on MDN](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/dataset).
1. Methods for reading/writing attribute values: `setAttribute(...)` and `getAttribute(...)`; note that managing the attribute names as strings can be difficult as the code grows. 1. Methods for reading/writing attribute values: `setAttribute(...)` and `getAttribute(...)`; note that managing the attribute names as strings can be difficult as the code grows.
## Quick Start Example ## Quick Start Example
Here is an example of using a custom element in a single .html file: Here is an example of using a custom element in a single .html file.
```html ```html
<!DOCTYPE html> <!DOCTYPE html>

3
src/WebComponent.js
View file

@ -150,9 +150,8 @@ export class WebComponent extends HTMLElement {
*/ */
#initializeProps() { #initializeProps() {
if (!this.#props) { if (!this.#props) {
const { ...clone } = this;
this.#props = new Proxy( this.#props = new Proxy(
clone, {},
this.#handler((key, value) => this.setAttribute(key, value)) this.#handler((key, value) => this.setAttribute(key, value))
); );
} }