Compare commits
No commits in common. "110cd7822a7562e238373e3c371ffed10516740a" and "5a29b0e662ddbb006918a957815fede5dc506f65" have entirely different histories.
110cd7822a
...
5a29b0e662
3 changed files with 108 additions and 145 deletions
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "skooma",
|
||||
"version": "1.7.0",
|
||||
"version": "1.6.1",
|
||||
"author": "darkwiiplayer",
|
||||
"license": "Unlicense",
|
||||
"main": "skooma.js",
|
||||
|
|
|
|||
|
|
@ -53,8 +53,9 @@ const getCustom = args => args.reduce(
|
|||
const isElement = object => HTMLElement.prototype.isPrototypeOf(object)
|
||||
|
||||
const isReactive = object => object
|
||||
&& (object instanceof EventTarget)
|
||||
&& ("subscribe" in object)
|
||||
&& (typeof object == "object")
|
||||
&& ("addEventListener" in object)
|
||||
&& ("value" in object)
|
||||
|
||||
const toChild = arg => {
|
||||
if (typeof arg == "string" || typeof arg == "number") {
|
||||
|
|
|
|||
246
state.js
246
state.js
|
|
@ -5,56 +5,82 @@ const kebabToCamel = string => string.replace(/([a-z])-([a-z])/g, (_, a, b) => a
|
|||
|
||||
export class ChangeEvent extends Event {
|
||||
#final
|
||||
#values
|
||||
constructor(...changes) {
|
||||
super('change')
|
||||
this.changes = changes
|
||||
}
|
||||
|
||||
get values() {
|
||||
if (!this.#values) {
|
||||
const values = new Map()
|
||||
for (const {property, from, to} of this.changes) {
|
||||
let list = values.get(property)
|
||||
if (!list) {
|
||||
list = [from]
|
||||
values.set(property, list)
|
||||
}
|
||||
list.push(to)
|
||||
}
|
||||
this.#values = values
|
||||
}
|
||||
return this.#values
|
||||
}
|
||||
|
||||
get final() {
|
||||
if (!this.#final) {
|
||||
this.#final = new Map()
|
||||
for (const [property, list] of this.values) {
|
||||
if (list[0] !== list[list.length-1]) {
|
||||
this.#final.set(property, list[list.length-1])
|
||||
}
|
||||
}
|
||||
this.#final = new Map(this.changes)
|
||||
}
|
||||
return this.#final
|
||||
}
|
||||
}
|
||||
|
||||
export class SimpleState extends EventTarget {
|
||||
#synchronous
|
||||
export class SimpleState extends EventTarget {}
|
||||
|
||||
export class MapStorage extends Storage {
|
||||
#map = new Map()
|
||||
key(index) {
|
||||
return [...this.#map.keys()][index]
|
||||
}
|
||||
getItem(keyName) {
|
||||
if (this.#map.has(keyName))
|
||||
return this.#map.get(keyName)
|
||||
else
|
||||
return null
|
||||
}
|
||||
setItem(keyName, keyValue) {
|
||||
this.#map.set(keyName, String(keyValue))
|
||||
}
|
||||
removeItem(keyName) {
|
||||
this.#map.delete(keyName)
|
||||
}
|
||||
clear() {
|
||||
this.#map.clear()
|
||||
}
|
||||
}
|
||||
|
||||
export class State extends SimpleState {
|
||||
#target
|
||||
#options
|
||||
#queue
|
||||
#forwardCache
|
||||
#abortController
|
||||
#nested = new Map()
|
||||
#weakRef = new WeakRef(this)
|
||||
#abortController = new AbortController
|
||||
|
||||
constructor({synchronous, methods}={}) {
|
||||
static isState(object) { return SimpleState.prototype.isPrototypeOf(object) }
|
||||
|
||||
constructor(target={}, options={}) {
|
||||
super()
|
||||
this.#synchronous = !!synchronous
|
||||
|
||||
this.#abortController = new AbortController
|
||||
abortRegistry.register(this, this.#abortController)
|
||||
|
||||
this.#options = options
|
||||
this.#target = target
|
||||
this.proxy = new Proxy(target, {
|
||||
set: (_target, prop, value) => {
|
||||
const old = this.get(prop)
|
||||
if (old !== value) {
|
||||
this.emit(prop, value)
|
||||
if (this.#options.deep !== false) {
|
||||
if (State.isState(old)) this.disown(prop, old)
|
||||
if (State.isState(value)) this.adopt(prop, value)
|
||||
}
|
||||
this.set(prop, value)
|
||||
}
|
||||
return true
|
||||
},
|
||||
get: (_target, prop) => this.get(prop),
|
||||
})
|
||||
|
||||
this.addEventListener
|
||||
|
||||
// Try running a "<name>Changed" method for every changed property
|
||||
// Can be disabled to maybe squeeze out some performance
|
||||
if (methods ?? true) {
|
||||
if (options.methods ?? true) {
|
||||
this.addEventListener("change", ({final}) => {
|
||||
final.forEach((value, prop) => {
|
||||
if (`${prop}Changed` in this) this[`${prop}Changed`](value)
|
||||
|
|
@ -63,33 +89,9 @@ export class SimpleState extends EventTarget {
|
|||
}
|
||||
}
|
||||
|
||||
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()
|
||||
}
|
||||
|
||||
emit(property, from, to, options={}) {
|
||||
const change = {property, from, to, ...options}
|
||||
if (!this.synchronous) {
|
||||
if (!this.#queue) {
|
||||
this.#queue = []
|
||||
queueMicrotask(() => {
|
||||
this.dispatchEvent(new ChangeEvent(...this.#queue))
|
||||
this.#queue = undefined
|
||||
})
|
||||
}
|
||||
this.#queue.push(change)
|
||||
} else {
|
||||
this.dispatchEvent(new ChangeEvent([change]))
|
||||
}
|
||||
}
|
||||
|
||||
// When you only need one value, you can skip the proxy.
|
||||
set value(value) { this.proxy.value = value }
|
||||
get value() { return this.proxy.value }
|
||||
|
||||
adopt(prop, state) {
|
||||
let handlers = this.#nested.get(state)
|
||||
|
|
@ -99,12 +101,11 @@ export class SimpleState extends EventTarget {
|
|||
this.#nested.set(state, handlers)
|
||||
}
|
||||
const ref = this.#weakRef
|
||||
const handler = () => ref.deref()?.emit(prop, state, state, {state: true})
|
||||
const handler = () => ref.deref()?.emit(prop, state)
|
||||
|
||||
handlers.set(prop, handler)
|
||||
state.addEventListener("change", handler, {signal: this.ignal})
|
||||
state.addEventListener("change", handler, {signal: this.#abortController.signal})
|
||||
}
|
||||
|
||||
disown(prop, state) {
|
||||
const handlers = this.#nested.get(state)
|
||||
const handler = handlers.get(prop)
|
||||
|
|
@ -115,42 +116,22 @@ export class SimpleState extends EventTarget {
|
|||
}
|
||||
}
|
||||
|
||||
get signal() { return this.#abortController.signal }
|
||||
get synchronous() { return this.#synchronous }
|
||||
}
|
||||
|
||||
export class State extends SimpleState {
|
||||
#target
|
||||
#shallow
|
||||
#forwardCache
|
||||
|
||||
static isState(object) { return SimpleState.prototype.isPrototypeOf(object) }
|
||||
|
||||
constructor(target={}, {shallow, ...options}={}) {
|
||||
super(options)
|
||||
|
||||
this.#shallow = !!shallow
|
||||
this.#target = target
|
||||
this.values = new Proxy(target, {
|
||||
set: (_target, prop, value) => {
|
||||
const old = this.get(prop)
|
||||
if (old !== value) {
|
||||
this.emit(prop, old, value)
|
||||
if (this.#shallow) {
|
||||
if (State.isState(old)) this.disown(prop, old)
|
||||
if (State.isState(value)) this.adopt(prop, value)
|
||||
}
|
||||
this.set(prop, value)
|
||||
}
|
||||
return true
|
||||
},
|
||||
get: (_target, prop) => this.get(prop),
|
||||
})
|
||||
// Anounces that a prop has changed
|
||||
emit(prop, value) {
|
||||
if (this.#options.defer ?? true) {
|
||||
if (!this.#queue) {
|
||||
this.#queue = []
|
||||
queueMicrotask(() => {
|
||||
this.dispatchEvent(new ChangeEvent(...this.#queue))
|
||||
this.#queue = undefined
|
||||
})
|
||||
}
|
||||
this.#queue.push([prop, value])
|
||||
} else {
|
||||
this.dispatchEvent(new ChangeEvent([prop, value]))
|
||||
}
|
||||
}
|
||||
|
||||
set value(value) { this.values.value = value }
|
||||
get value() { return this.values.value }
|
||||
|
||||
forward(property="value", fallback) {
|
||||
if (!this.#forwardCache) this.#forwardCache = new Map()
|
||||
const cached = this.#forwardCache.get(property)?.deref()
|
||||
|
|
@ -165,17 +146,11 @@ export class State extends SimpleState {
|
|||
}
|
||||
}
|
||||
|
||||
set(...args) {
|
||||
if (args.length === 1) return this.set("value", ...args)
|
||||
|
||||
const [prop, value] = args
|
||||
set(prop, value) {
|
||||
this.#target[prop] = value
|
||||
}
|
||||
|
||||
get(...args) {
|
||||
if (args.length === 0) return this.get("value")
|
||||
|
||||
const prop = args[0]
|
||||
get(prop) {
|
||||
return this.#target[prop]
|
||||
}
|
||||
}
|
||||
|
|
@ -200,8 +175,8 @@ export class ForwardState extends SimpleState {
|
|||
const state = ref.deref()
|
||||
if (state) {
|
||||
const relevantChanges = event.changes
|
||||
.filter(({property: name}) => name === property)
|
||||
.map(({from, to}) => ({property: "value", from, to}))
|
||||
.filter(([name]) => name === property)
|
||||
.map(([_, value]) => ["value", value])
|
||||
if (relevantChanges.length > 0)
|
||||
state.dispatchEvent(new ChangeEvent(...relevantChanges))
|
||||
} else {
|
||||
|
|
@ -210,8 +185,8 @@ export class ForwardState extends SimpleState {
|
|||
}, {signal: abortController.signal})
|
||||
}
|
||||
|
||||
get value() { return this.#backend.values[this.#property] ?? this.#fallback }
|
||||
set value(value) { this.#backend.values[this.#property] = value }
|
||||
get value() { return this.#backend.proxy[this.#property] ?? this.#fallback }
|
||||
set value(value) { this.#backend.proxy[this.#property] = value }
|
||||
}
|
||||
|
||||
class StorageChangeEvent extends Event {
|
||||
|
|
@ -226,13 +201,16 @@ class StorageChangeEvent extends Event {
|
|||
|
||||
export class StoredState extends State {
|
||||
#storage
|
||||
#valueKey
|
||||
|
||||
constructor(init, options={}) {
|
||||
super({}, options)
|
||||
this.#storage = options.storage ?? localStorage ?? new MapStorage()
|
||||
this.#valueKey = options.key ?? 'value'
|
||||
|
||||
// Initialise storage from defaults
|
||||
for (const [prop, value] of Object.entries(init)) {
|
||||
for (let [prop, value] of Object.entries(init)) {
|
||||
if (prop === 'value') prop = this.#valueKey
|
||||
if (this.#storage[prop] === undefined)
|
||||
this.set(prop, value)
|
||||
}
|
||||
|
|
@ -248,7 +226,9 @@ export class StoredState extends State {
|
|||
// Listen for changes from other windows
|
||||
const handler = event => {
|
||||
if (event.targetState !== this && event.storageArea == this.#storage) {
|
||||
this.emit(event.key, JSON.parse(event.newValue))
|
||||
let prop = event.key
|
||||
if (prop === this.#valueKey) prop = 'value'
|
||||
this.emit(prop, JSON.parse(event.newValue))
|
||||
}
|
||||
}
|
||||
addEventListener("storage", handler)
|
||||
|
|
@ -256,12 +236,14 @@ export class StoredState extends State {
|
|||
}
|
||||
|
||||
set(prop, value) {
|
||||
if (prop == "value") prop = this.#valueKey
|
||||
const json = JSON.stringify(value)
|
||||
dispatchEvent(new StorageChangeEvent(this.#storage, prop, json, this))
|
||||
this.#storage[prop] = json
|
||||
}
|
||||
|
||||
get(prop) {
|
||||
if (prop == "value") prop = this.#valueKey
|
||||
const value = this.#storage[prop]
|
||||
return value && JSON.parse(value)
|
||||
}
|
||||
|
|
@ -272,8 +254,8 @@ const attributeObserver = new MutationObserver(mutations => {
|
|||
if (type == "attributes") {
|
||||
const next = target.getAttribute(name)
|
||||
const camelName = kebabToCamel(name)
|
||||
if (String(target.state.values[camelName]) !== next)
|
||||
target.state.values[camelName] = next
|
||||
if (String(target.state.proxy[camelName]) !== next)
|
||||
target.state.proxy[camelName] = next
|
||||
}
|
||||
}
|
||||
})
|
||||
|
|
@ -285,8 +267,8 @@ export const component = (generator, name) => {
|
|||
super()
|
||||
this.state = new State(Object.fromEntries([...this.attributes].map(attribute => [kebabToCamel(attribute.name), attribute.value])))
|
||||
this.state.addEventListener("change", event => {
|
||||
for (const {property, to: value} of event.changes) {
|
||||
const kebabName = camelToKebab(property)
|
||||
for (const [name, value] of event.changes) {
|
||||
const kebabName = camelToKebab(name)
|
||||
if (this.getAttribute(kebabName) !== String(value))
|
||||
this.setAttribute(kebabName, value)
|
||||
}
|
||||
|
|
@ -302,12 +284,14 @@ export const component = (generator, name) => {
|
|||
class ComposedState extends SimpleState {
|
||||
#func
|
||||
#states
|
||||
#options
|
||||
|
||||
constructor(func, options, ...states) {
|
||||
super(options)
|
||||
super()
|
||||
|
||||
this.#func = func
|
||||
this.#states = states
|
||||
this.#options = options
|
||||
|
||||
const abortController = new AbortController()
|
||||
abortRegistry.register(this, abortController)
|
||||
|
|
@ -325,7 +309,7 @@ class ComposedState extends SimpleState {
|
|||
|
||||
#microtaskQueued
|
||||
scheduleUpdate() {
|
||||
if (this.defer) {
|
||||
if (this.#options.defer) {
|
||||
if (!this.#microtaskQueued) {
|
||||
queueMicrotask(() => {
|
||||
this.#microtaskQueued = false
|
||||
|
|
@ -339,10 +323,8 @@ class ComposedState extends SimpleState {
|
|||
}
|
||||
|
||||
update() {
|
||||
const value = this.#func(...this.#states.map(state => state.value))
|
||||
const change = {property: "value", from: this.value, to: value}
|
||||
this.value = value
|
||||
this.dispatchEvent(new ChangeEvent([change]))
|
||||
this.value = this.#func(...this.#states.map(state => state.value))
|
||||
this.dispatchEvent(new ChangeEvent([["value", this.value]]))
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -364,6 +346,7 @@ const mutationObserver = new MutationObserver(mutations => {
|
|||
|
||||
export class DOMState extends SimpleState {
|
||||
#target
|
||||
#defer
|
||||
#getValue
|
||||
#equal
|
||||
|
||||
|
|
@ -371,7 +354,8 @@ export class DOMState extends SimpleState {
|
|||
#changedValue = false
|
||||
|
||||
constructor(target, options) {
|
||||
super(options)
|
||||
super()
|
||||
this.#defer = options.defer ?? false
|
||||
this.#target = target
|
||||
this.#getValue = options.get ?? (target => target.value)
|
||||
this.#equal = options.equal ?? ((a, b) => a===b)
|
||||
|
|
@ -399,7 +383,7 @@ export class DOMState extends SimpleState {
|
|||
|
||||
this.#old = current
|
||||
|
||||
if (this.defer) {
|
||||
if (this.#defer) {
|
||||
if (!this.#changedValue) {
|
||||
queueMicrotask(() => {
|
||||
this.#changedValue = false
|
||||
|
|
@ -413,26 +397,4 @@ export class DOMState extends SimpleState {
|
|||
}
|
||||
}
|
||||
|
||||
export class MapStorage extends Storage {
|
||||
#map = new Map()
|
||||
key(index) {
|
||||
return [...this.#map.keys()][index]
|
||||
}
|
||||
getItem(keyName) {
|
||||
if (this.#map.has(keyName))
|
||||
return this.#map.get(keyName)
|
||||
else
|
||||
return null
|
||||
}
|
||||
setItem(keyName, keyValue) {
|
||||
this.#map.set(keyName, String(keyValue))
|
||||
}
|
||||
removeItem(keyName) {
|
||||
this.#map.delete(keyName)
|
||||
}
|
||||
clear() {
|
||||
this.#map.clear()
|
||||
}
|
||||
}
|
||||
|
||||
export default State
|
||||
|
|
|
|||
Loading…
Reference in a new issue