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

feat: access kebab-case props with camelCase counterpart

Browse source
This commit is contained in:
Ayo 2023-10-20 11:58:36 +02:00
parent 746c09f79e
commit 8a977ce3e2
3 changed files with 8 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
demo/HelloWorld.mjs
View file

@ -1,15 +1,15 @@
import WebComponent from "../src/index.mjs"; import WebComponent from "../src/index.js";
export class HelloWorld extends WebComponent { export class HelloWorld extends WebComponent {
name = "World"; name = "World";
emotion = "excited"; emotion = "excited";
static properties = ["name", "emotion"]; static properties = ["data-name", "emotion"];
onInit() { onInit() {
let count = 0; let count = 0;
this.onclick = () => { this.onclick = () => {
this.setAttribute("name", `Clicked ${++count}x!`); this.setAttribute("data-name", `Clicked ${++count}x!`);
}; };
} }
@ -23,7 +23,7 @@ export class HelloWorld extends WebComponent {
} }
get template() { get template() {
return `<button id="btn">Hello ${this.name}${ return `<button id="btn">Hello ${this.dataName}${
this.emotion === "sad" ? ". 😭" : "! 🙌" this.emotion === "sad" ? ". 😭" : "! 🙌"
}</button>`; }</button>`;
} }

2
demo/index.html
View file

@ -8,7 +8,7 @@
<script type="module" src="SimpleText.mjs"></script> <script type="module" src="SimpleText.mjs"></script>
</head> </head>
<body> <body>
<hello-world id="hey" name="Ayo" emotion="sad"></hello-world> <hello-world id="hey" data-name="Ayo" emotion="sad"></hello-world>
<p> <p>
<simple-text greeting="hey"></simple-text> <simple-text greeting="hey"></simple-text>
</p> </p>

3
src/WebComponent.mjs
View file

@ -57,8 +57,11 @@ export class WebComponent extends HTMLElement {
* @param {any} currentValue * @param {any} currentValue
*/ */
attributeChangedCallback(property, previousValue, currentValue) { attributeChangedCallback(property, previousValue, currentValue) {
const camelCaps = (kebab) =>
kebab.replace(/-./g, (x) => x[1].toUpperCase());
if (previousValue !== currentValue) { if (previousValue !== currentValue) {
this[property] = currentValue; this[property] = currentValue;
this[camelCaps(property)] = currentValue;
this.render(); this.render();
this.onChanges({ property, previousValue, currentValue }); this.onChanges({ property, previousValue, currentValue });
} }