Compare commits

..

5 commits

Author SHA1 Message Date
c5c4e973a5 Remove valueKey from StoredState 2024-01-17 14:09:50 +01:00
47994975f9 Replace state "deep" option with "shallow" option 2024-01-17 11:52:41 +01:00
035eeb8fc0 Add subscribe method to state class
This makes the State class fully compatible with svelte stores
2024-01-17 11:39:16 +01:00
69a2aa1ca3 Allow calling get and set without property name 2024-01-17 11:31:38 +01:00
5726b8c2b9 Rename proxy to values in State class 2024-01-17 11:07:57 +01:00
2 changed files with 33 additions and 20 deletions

View file

@ -1,6 +1,6 @@
{ {
"name": "skooma", "name": "skooma",
"version": "1.6.1", "version": "1.7.0",
"author": "darkwiiplayer", "author": "darkwiiplayer",
"license": "Unlicense", "license": "Unlicense",
"main": "skooma.js", "main": "skooma.js",

View file

@ -60,12 +60,12 @@ export class State extends SimpleState {
this.#options = options this.#options = options
this.#target = target this.#target = target
this.proxy = new Proxy(target, { this.values = new Proxy(target, {
set: (_target, prop, value) => { set: (_target, prop, value) => {
const old = this.get(prop) const old = this.get(prop)
if (old !== value) { if (old !== value) {
this.emit(prop, value) this.emit(prop, value)
if (this.#options.deep !== false) { if (this.#options.shallow) {
if (State.isState(old)) this.disown(prop, old) if (State.isState(old)) this.disown(prop, old)
if (State.isState(value)) this.adopt(prop, value) if (State.isState(value)) this.adopt(prop, value)
} }
@ -90,8 +90,8 @@ export class State extends SimpleState {
} }
// When you only need one value, you can skip the proxy. // When you only need one value, you can skip the proxy.
set value(value) { this.proxy.value = value } set value(value) { this.values.value = value }
get value() { return this.proxy.value } get value() { return this.values.value }
adopt(prop, state) { adopt(prop, state) {
let handlers = this.#nested.get(state) let handlers = this.#nested.get(state)
@ -146,13 +146,33 @@ export class State extends SimpleState {
} }
} }
set(prop, value) { set(...args) {
if (args.length === 1) return this.set("value", ...args)
const [prop, value] = args
this.#target[prop] = value this.#target[prop] = value
} }
get(prop) { get(...args) {
if (args.length === 0) return this.get("value")
const prop = args[0]
return this.#target[prop] return this.#target[prop]
} }
subscribe(prop, callback) {
if (!callback) return this.subscribe("value", prop)
const controller = new AbortController()
this.addEventListener("change", ({final}) => {
if (final.has(prop)) return callback(final.get(prop))
}, {signal: controller.signal})
callback(this.value)
return () => controller.abort()
}
// Backwards compatibility
get proxy() { return this.values }
} }
const forwardFinalizationRegistry = new FinalizationRegistry(([cache, name]) => { const forwardFinalizationRegistry = new FinalizationRegistry(([cache, name]) => {
@ -185,8 +205,8 @@ export class ForwardState extends SimpleState {
}, {signal: abortController.signal}) }, {signal: abortController.signal})
} }
get value() { return this.#backend.proxy[this.#property] ?? this.#fallback } get value() { return this.#backend.values[this.#property] ?? this.#fallback }
set value(value) { this.#backend.proxy[this.#property] = value } set value(value) { this.#backend.values[this.#property] = value }
} }
class StorageChangeEvent extends Event { class StorageChangeEvent extends Event {
@ -201,16 +221,13 @@ class StorageChangeEvent extends Event {
export class StoredState extends State { export class StoredState extends State {
#storage #storage
#valueKey
constructor(init, options={}) { constructor(init, options={}) {
super({}, options) super({}, options)
this.#storage = options.storage ?? localStorage ?? new MapStorage() this.#storage = options.storage ?? localStorage ?? new MapStorage()
this.#valueKey = options.key ?? 'value'
// Initialise storage from defaults // Initialise storage from defaults
for (let [prop, value] of Object.entries(init)) { for (const [prop, value] of Object.entries(init)) {
if (prop === 'value') prop = this.#valueKey
if (this.#storage[prop] === undefined) if (this.#storage[prop] === undefined)
this.set(prop, value) this.set(prop, value)
} }
@ -226,9 +243,7 @@ export class StoredState extends State {
// Listen for changes from other windows // Listen for changes from other windows
const handler = event => { const handler = event => {
if (event.targetState !== this && event.storageArea == this.#storage) { if (event.targetState !== this && event.storageArea == this.#storage) {
let prop = event.key this.emit(event.key, JSON.parse(event.newValue))
if (prop === this.#valueKey) prop = 'value'
this.emit(prop, JSON.parse(event.newValue))
} }
} }
addEventListener("storage", handler) addEventListener("storage", handler)
@ -236,14 +251,12 @@ export class StoredState extends State {
} }
set(prop, value) { set(prop, value) {
if (prop == "value") prop = this.#valueKey
const json = JSON.stringify(value) const json = JSON.stringify(value)
dispatchEvent(new StorageChangeEvent(this.#storage, prop, json, this)) dispatchEvent(new StorageChangeEvent(this.#storage, prop, json, this))
this.#storage[prop] = json this.#storage[prop] = json
} }
get(prop) { get(prop) {
if (prop == "value") prop = this.#valueKey
const value = this.#storage[prop] const value = this.#storage[prop]
return value && JSON.parse(value) return value && JSON.parse(value)
} }
@ -254,8 +267,8 @@ const attributeObserver = new MutationObserver(mutations => {
if (type == "attributes") { if (type == "attributes") {
const next = target.getAttribute(name) const next = target.getAttribute(name)
const camelName = kebabToCamel(name) const camelName = kebabToCamel(name)
if (String(target.state.proxy[camelName]) !== next) if (String(target.state.values[camelName]) !== next)
target.state.proxy[camelName] = next target.state.values[camelName] = next
} }
} }
}) })