Compare commits
5 commits
5a29b0e662
...
c5c4e973a5
Author | SHA1 | Date | |
---|---|---|---|
c5c4e973a5 | |||
47994975f9 | |||
035eeb8fc0 | |||
69a2aa1ca3 | |||
5726b8c2b9 |
2 changed files with 33 additions and 20 deletions
|
@ -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",
|
||||||
|
|
51
state.js
51
state.js
|
@ -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
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|
Loading…
Reference in a new issue