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"; import WebComponent from "../src/index.js";
export class HelloWorld extends WebComponent { export class HelloWorld extends WebComponent {

7
package.json
View file

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

19
src/WebComponent.mjs
View file

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