Add some helpful comments to state.js

This commit is contained in:
Talia 2023-09-19 16:54:21 +02:00
parent 2e540dbc6f
commit 8d9dc8ae7f
3 changed files with 7 additions and 2 deletions

View file

@ -81,7 +81,7 @@
// outputs: "meep moop" // outputs: "meep moop"
</code-block> </code-block>
No, this has nothing to do with playing audio. No, this still has nothing to do with playing audio.
</p> </p>
</section> </section>

View file

@ -8,7 +8,7 @@
<a class="back" href="..">Module Index</a> <a class="back" href="..">Module Index</a>
<h1 class="js module">listener.js</h1> <h1 class="js module">state.js</h1>
<code-block>import {State} from 'state.js'</code-block> <code-block>import {State} from 'state.js'</code-block>

View file

@ -25,6 +25,8 @@ export class State extends EventTarget {
this.addEventListener this.addEventListener
// Try running a "<name>Changed" method for every changed property
// Can be disabled to maybe squeeze out some performance
if (options.methods ?? true) { if (options.methods ?? true) {
this.addEventListener("change", ({changes}) => { this.addEventListener("change", ({changes}) => {
new Map(changes).forEach((value, prop) => { new Map(changes).forEach((value, prop) => {
@ -34,9 +36,11 @@ export class State extends EventTarget {
} }
} }
// When you only need one value, you can skip the proxy.
set value(value) { this.proxy.value = value } set value(value) { this.proxy.value = value }
get value() { return this.proxy.value } get value() { return this.proxy.value }
// Anounces that a prop has changed
emit(prop, value) { emit(prop, value) {
if (this.#options.defer ?? true) { if (this.#options.defer ?? true) {
if (!this.#queue) { if (!this.#queue) {
@ -84,6 +88,7 @@ export class StoredState extends State {
this.emit(key, value) this.emit(key, value)
} }
// Listen for changes from other windows
addEventListener("storage", event => { addEventListener("storage", event => {
let prop = event.key let prop = event.key
if (prop === this.#valueKey) prop = 'value' if (prop === this.#valueKey) prop = 'value'