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

fix: static props makes state shared across class instances

Browse source 
- uses structuredClone on static props
- closes #28
This commit is contained in:
Ayo 2023-12-16 09:03:01 +01:00
parent c4a5d7d6e6
commit 9268676797
3 changed files with 26 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16
examples/demo/Toggle.js Normal file
View file

@ -0,0 +1,16 @@
import { WebComponent, html } from "../../src/index.js";
class Toggle extends WebComponent {
static props = {
toggle: false,
};
get template() {
return html`
<button onClick=${() => (this.props.toggle = !this.props.toggle)}>
${this.props.toggle}
</button>
`;
}
}
customElements.define("my-toggle", Toggle);

4
examples/demo/index.html
View file

@ -8,8 +8,12 @@
<script type="module" src="./SimpleText.mjs"></script> <script type="module" src="./SimpleText.mjs"></script>
<script type="module" src="./BooleanPropTest.mjs"></script> <script type="module" src="./BooleanPropTest.mjs"></script>
<script type="module" src="./Counter.mjs"></script> <script type="module" src="./Counter.mjs"></script>
<script type="module" src="./Toggle.js"></script>
</head> </head>
<body> <body>
<my-toggle></my-toggle>
<my-toggle toggle></my-toggle>
<hr />
<hello-world emotion="sad"></hello-world> <hello-world emotion="sad"></hello-world>
<my-counter></my-counter> <my-counter></my-counter>
<p> <p>

15
src/WebComponent.js
View file

@ -168,15 +168,12 @@ export class WebComponent extends HTMLElement {
} }
#initializeProps() { #initializeProps() {
let initialProps = {}; let initialProps = structuredClone(this.constructor.props) ?? {};
if (this.constructor.props) { Object.keys(initialProps).forEach((camelCase) => {
initialProps = this.constructor.props; const value = initialProps[camelCase];
Object.keys(initialProps).forEach((camelCase) => { this.#typeMap[camelCase] = typeof value;
const value = initialProps[camelCase]; this.setAttribute(getKebabCase(camelCase), serialize(value));
this.#typeMap[camelCase] = typeof value; });
this.setAttribute(getKebabCase(camelCase), serialize(value));
});
}
if (!this.#props) { if (!this.#props) {
this.#props = new Proxy( this.#props = new Proxy(
initialProps, initialProps,