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

refactor: add class description; private camelCase util

Browse source
This commit is contained in:
Ayo 2023-10-27 08:44:55 +02:00
parent 884da7e2aa
commit 09ffc5d99c
3 changed files with 21 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
demo/HelloWorld.mjs
View file

@ -1,3 +1,4 @@
// @ts-check
import WebComponent from "../src/index.js";
export class HelloWorld extends WebComponent {

7
package.json
View file

@ -10,9 +10,10 @@
"clean": "rm -rf dist",
"copy:meta": "cp package.json ./dist && cp README.md ./dist",
"copy:source": "cp ./src/* ./dist",
"build:publish": "npm run clean && npm run build && npm run copy:meta && npm run copy:source && cd ./dist && npm publish --access public",
"publish:patch": "npm version patch && npm run build:publish",
"publish:minor": "npm version minor && npm run build:publish"
"prepare": "npm run clean && npm run build && npm run copy:meta && npm run copy:source",
"publish": " cd ./dist && npm publish --access public",
"publish:patch": "npm version patch && npm run publish",
"publish:minor": "npm version minor && npm run publish"
},
"repository": {
"type": "git",

19
src/WebComponent.mjs
View file

@ -1,6 +1,16 @@
// @ts-check
/**
* A base class with custom element utilities extending HTMLElement
* @class
* @constructor
* @public
*/
export class WebComponent extends HTMLElement {
constructor() {
super();
}
/**
* @type Array<string>
*/
@ -57,11 +67,10 @@ export class WebComponent extends HTMLElement {
* @param {any} currentValue
*/
attributeChangedCallback(property, previousValue, currentValue) {
const camelCaps = (kebab) =>
kebab.replace(/-./g, (x) => x[1].toUpperCase());
const camelCaps = this.#getCamelCaps(property);
if (previousValue !== currentValue) {
this[property] = currentValue;
this[camelCaps(property)] = currentValue;
this[camelCaps] = currentValue;
this.render();
this.onChanges({ property, previousValue, currentValue });
}
@ -70,4 +79,8 @@ export class WebComponent extends HTMLElement {
render() {
this.innerHTML = this.template;
}
#getCamelCaps(kebab) {
return kebab.replace(/-./g, (x) => x[1].toUpperCase());
}
}