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

refactor: remove constructor; move initializeProps to connectedCallback

Browse source
This commit is contained in:
Ayo 2023-11-19 00:12:30 +01:00
parent 5799f8ea4e
commit 2c285a60bb
2 changed files with 2 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
sample.html
View file

@ -3,7 +3,7 @@
<head> <head>
<title>WC Base Test</title> <title>WC Base Test</title>
<script type="module"> <script type="module">
import WebComponent from "https://unpkg.com/web-component-base/index.js"; import WebComponent from "./src/WebComponent.js";
class HelloWorld extends WebComponent { class HelloWorld extends WebComponent {
static properties = ["my-name"]; static properties = ["my-name"];

8
src/WebComponent.js
View file

@ -65,11 +65,6 @@ export class WebComponent extends HTMLElement {
*/ */
#props; #props;
constructor() {
super();
this.#initializeProps();
}
/** /**
* Triggered after view is initialized. Best for querying DOM nodes that will only exist after render. * Triggered after view is initialized. Best for querying DOM nodes that will only exist after render.
* @returns {void} * @returns {void}
@ -111,6 +106,7 @@ export class WebComponent extends HTMLElement {
} }
connectedCallback() { connectedCallback() {
this.#initializeProps();
this.onInit(); this.onInit();
this.render(); this.render();
this.afterViewInit(); this.afterViewInit();
@ -131,7 +127,6 @@ export class WebComponent extends HTMLElement {
if (previousValue !== currentValue) { if (previousValue !== currentValue) {
this[property] = currentValue === "" || currentValue; this[property] = currentValue === "" || currentValue;
this[camelCaps] = this[property]; // remove on v2 this[camelCaps] = this[property]; // remove on v2
this.#initializeProps();
this.props[camelCaps] = this[property]; this.props[camelCaps] = this[property];
this.render(); this.render();
@ -171,7 +166,6 @@ export class WebComponent extends HTMLElement {
); );
if (oldValue != newValue) { if (oldValue != newValue) {
console.log("value changed", oldValue, newValue);
const kebab = getKebab(prop); const kebab = getKebab(prop);
setter(kebab, newValue); setter(kebab, newValue);
} }