Rename "reactive" object to observable in code
This commit is contained in:
parent
784eb78f0a
commit
71d7c0ff4f
1 changed files with 11 additions and 11 deletions
22
skooma.js
22
skooma.js
|
@ -43,7 +43,7 @@ const getCustom = args => args.reduce(
|
||||||
,undefined
|
,undefined
|
||||||
)
|
)
|
||||||
|
|
||||||
export const isReactive = object => object
|
export const isObservable = object => object
|
||||||
&& typeof object == "object"
|
&& typeof object == "object"
|
||||||
&& !(object instanceof HTMLElement)
|
&& !(object instanceof HTMLElement)
|
||||||
&& object.subscribe
|
&& object.subscribe
|
||||||
|
@ -53,16 +53,16 @@ const toChild = arg => {
|
||||||
return document.createTextNode(arg)
|
return document.createTextNode(arg)
|
||||||
else if (arg instanceof HTMLElement)
|
else if (arg instanceof HTMLElement)
|
||||||
return arg
|
return arg
|
||||||
else if (isReactive(arg))
|
else if (isObservable(arg))
|
||||||
return reactiveChild(arg)
|
return reactiveChild(arg)
|
||||||
}
|
}
|
||||||
|
|
||||||
const reactiveChild = reactive => {
|
const reactiveChild = observable => {
|
||||||
let ref
|
let ref
|
||||||
const abort = reactive.subscribe(value => {
|
const abort = observable.subscribe(value => {
|
||||||
if (ref && !ref.deref()) return abort()
|
if (ref && !ref.deref()) return abort()
|
||||||
const child = toChild(value) ?? document.createComment("Placeholder for reactive content")
|
const child = toChild(value) ?? document.createComment("Placeholder for reactive content")
|
||||||
untilDeathDoThemPart(child, reactive)
|
untilDeathDoThemPart(child, observable)
|
||||||
if (ref) ref.deref().replaceWith(child)
|
if (ref) ref.deref().replaceWith(child)
|
||||||
ref = new WeakRef(child)
|
ref = new WeakRef(child)
|
||||||
})
|
})
|
||||||
|
@ -97,7 +97,7 @@ const specialAttributes = {
|
||||||
|
|
||||||
const setAttribute = (element, attribute, value, cleanupSignal) => {
|
const setAttribute = (element, attribute, value, cleanupSignal) => {
|
||||||
const special = specialAttributes[attribute]
|
const special = specialAttributes[attribute]
|
||||||
if (isReactive(value))
|
if (isObservable(value))
|
||||||
setReactiveAttribute(element, attribute, value)
|
setReactiveAttribute(element, attribute, value)
|
||||||
else if (typeof value === "function")
|
else if (typeof value === "function")
|
||||||
element.addEventListener(attribute, value, {signal: cleanupSignal})
|
element.addEventListener(attribute, value, {signal: cleanupSignal})
|
||||||
|
@ -113,20 +113,20 @@ const setAttribute = (element, attribute, value, cleanupSignal) => {
|
||||||
}
|
}
|
||||||
|
|
||||||
// (Two-way) binding between an attribute and a state container
|
// (Two-way) binding between an attribute and a state container
|
||||||
const setReactiveAttribute = (element, attribute, reactive) => {
|
const setReactiveAttribute = (element, attribute, observable) => {
|
||||||
untilDeathDoThemPart(element, reactive)
|
untilDeathDoThemPart(element, observable)
|
||||||
const multiAbort = new MultiAbortController()
|
const multiAbort = new MultiAbortController()
|
||||||
let old
|
let old
|
||||||
reactive.subscribe(value => {
|
observable.subscribe(value => {
|
||||||
old = value
|
old = value
|
||||||
multiAbort.abort()
|
multiAbort.abort()
|
||||||
setAttribute(element, attribute, value, multiAbort.signal)
|
setAttribute(element, attribute, value, multiAbort.signal)
|
||||||
})
|
})
|
||||||
const special = specialAttributes[attribute]
|
const special = specialAttributes[attribute]
|
||||||
if (special?.hook && reactive.set) {
|
if (special?.hook && observable.set) {
|
||||||
special.hook.call(element, () => {
|
special.hook.call(element, () => {
|
||||||
const value = special.get.call(element, attribute)
|
const value = special.get.call(element, attribute)
|
||||||
if (value != old) reactive.set(value)
|
if (value != old) observable.set(value)
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in a new issue