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 {
name = "World";
emotion = "excited";
static properties = ["name", "emotion"];
static properties = ["data-name", "emotion"];
onInit() {
let count = 0;
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() {
return `<button id="btn">Hello ${this.name}${
return `<button id="btn">Hello ${this.dataName}${
this.emotion === "sad" ? ". 😭" : "! 🙌"
}</button>`;
}

2
demo/index.html
View file

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

3
src/WebComponent.mjs
View file

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