[Javascript] Broadcaster + Operator + Listener pattern -- 24. Design choice, ifElse or merge
In previous post, we check how to use ifElse to branch out the logic: https://www.cnblogs.com/Answer1215/p/14093562.html
let inputToBooks = pipe( waitFor(150), ifElse( // condition name => name.length > 3, // if pipe( map(name => `https://openlibrary.org/search.json?q=${name}`), mapBroadcaster(getUrl), map(json => json.docs) ), // else map(() => []) ))(inputValue)
instead of using 'ifElse', we can split the logic into two operators, in the end, merge those back together:
let inputToBooks = pipe( filter(name => name.length > 3), waitFor(150), pipe( map(name => `https://openlibrary.org/search.json?q=${name}`), mapBroadcaster(getUrl), map(json => json.docs) ))(inputValue) let inputToClearSearch = pipe( filter(name => name.length < 4), map(() => [{title: "hello"}]) )(inputValue) let books = useBroadcaster(merge( inputToBooks, inputToClearSearch ), [])
Personally I previous using 'merge' approach.
import React from "react"
import { render } from "react-dom"
import {
useBroadcaster,
useListener,
merge,
} from "./broadcasters"
import { targetValue, waitFor, mapBroadcaster, map, filter} from "./operators"
import {pipe} from "lodash/fp"
//https://openlibrary.org/search.json?q=${name}
export let mapError = transform => broadcaster => listener => {
return broadcaster((value) => {
if (value instanceof Error) {
listener(transform(value))
return
}
listener(value)
})
}
let getUrl = url => listener => {
let controller = new AbortController()
let signal = controller.signal
fetch(url, {signal})
.then((response) => {
return response.json()
})
.then(listener)
.catch(listener)
return () => {
controller.abort()
}
}
let App = () => {
let onInput = useListener()
let inputValue = targetValue(onInput)
let inputToBooks = pipe(
filter(name => name.length > 3),
waitFor(150),
pipe(
map(name => `https://openlibrary.org/search.json?q=${name}`),
mapBroadcaster(getUrl),
map(json => json.docs)
))(inputValue)
let inputToClearSearch = pipe(
filter(name => name.length < 4),
map(() => [{title: "hello"}])
)(inputValue)
let books = useBroadcaster(merge(
inputToBooks,
inputToClearSearch
), [])
return (
<div>
<input type="text" onInput={onInput} />
{books.map(book => {
return <div key={book.title}>
<a href={`https://openlibrary.org${book.key}`}>{book.title}</a>
</div>
})}
</div>
)
}
render(<App></App>, document.querySelector("#root"))
broadcasters.js;
import { curry } from "lodash"
import React, {useState, useEffect, useCallback} from "react"
export let done = Symbol("done")
export let createTimeout = curry((time, listener) => {
let id = setTimeout(() => {
listener(null)
listener(done)
}, time)
return () => {
clearTimeout(id)
}
})
export let addListener = curry(
(selector, eventType, listener) => {
let element = document.querySelector(selector)
element.addEventListener(eventType, listener)
return () => {
element.removeEventListener(eventType, listener)
}
}
)
export let createInterval = curry((time, listener) => {
let i = 0
let id = setInterval(() => {
listener(i++)
}, time)
return () => {
clearInterval(id)
}
})
//broadcaster = function that accepts a listener
export let merge = curry(
(broadcaster1, broadcaster2, listener) => {
let cancel1 = broadcaster1(listener)
let cancel2 = broadcaster2(listener)
return () => {
cancel1()
cancel2()
}
}
)
export let zip = curry(
(broadcaster1, broadcaster2, listener) => {
let cancelBoth
let buffer1 = []
let cancel1 = broadcaster1(value => {
buffer1.push(value)
// console.log(buffer1)
if (buffer2.length) {
listener([buffer1.shift(), buffer2.shift()])
if (buffer1[0] === done || buffer2[0] === done) {
listener(done)
cancelBoth()
}
}
})
let buffer2 = []
let cancel2 = broadcaster2(value => {
buffer2.push(value)
if (buffer1.length) {
listener([buffer1.shift(), buffer2.shift()])
if (buffer1[0] === done || buffer2[0] === done) {
listener(done)
cancelBoth()
}
}
})
cancelBoth = () => {
cancel1()
cancel2()
}
return cancelBoth
}
)
export let forOf = curry((iterable, listener) => {
let id = setTimeout(() => {
for (let i of iterable) {
listener(i)
}
listener(done)
}, 0)
return () => {
clearTimeout(id)
}
})
export let useBroadcaster = (broadcaster, initVal = null, deps = []) => {
let [state, setState] = useState(initVal)
useEffect(() => {
broadcaster((value) => {
if (value === done) {
return
}
setState(value)
})
}, deps)
return state
}
export let useListener = (deps = []) => {
let listeners = []
let callbackListener = value => {
if (typeof value === "function") {
listeners.push(value)
return
}
listeners.forEach(listener => listener(value))
}
return useCallback(callbackListener, deps)
}
operators.js:
import { curry } from "lodash"
import { done, createTimeout } from "./broadcasters"
let createOperator = curry(
(operator, broadcaster, listener) => {
return operator(behaviorListener => {
return broadcaster(value => {
if (value === done) {
listener(done)
return
}
behaviorListener(value)
})
}, listener)
}
)
export let map = transform =>
createOperator((broadcaster, listener) => {
return broadcaster(value => {
listener(transform(value))
})
})
export let filter = predicate =>
createOperator((broadcaster, listener) => {
return broadcaster(value => {
if (predicate(value)) {
listener(value)
}
})
})
export let split = splitter =>
curry((broadcaster, listener) => {
let buffer = []
return broadcaster(value => {
if (value === done) {
listener(buffer)
buffer = []
listener(done)
}
if (value == splitter) {
listener(buffer)
buffer = []
} else {
buffer.push(value)
}
})
})
export let hardCode = newValue =>
createOperator((broadcaster, listener) => {
return broadcaster(value => {
listener(newValue)
})
})
export let add = initial => broadcaster => listener => {
return broadcaster(value => {
listener((initial += value))
})
}
export let startWhen = whenBroadcaster => mainBroadcaster => listener => {
let cancelMain
let cancelWhen
cancelWhen = whenBroadcaster(whenValue => {
if (cancelMain) cancelMain()
cancelMain = mainBroadcaster(value => {
if (value === done) {
if (whenValue === done) {
listener(done)
}
return
}
listener(value)
})
})
return () => {
cancelMain()
cancelWhen()
}
}
export let stopWhen = whenBroadcaster => mainBroadcaster => listener => {
let cancelMain = mainBroadcaster(listener)
let cancelWhen = whenBroadcaster(value => {
cancelMain()
})
return () => {
cancelMain()
cancelWhen()
}
}
export let targetValue = map(event => event.target.value)
export let mapBroadcaster = createBroadcaster => broadcaster => listener => {
return broadcaster(value => {
let newBroadcaster = createBroadcaster(value)
newBroadcaster(listener)
})
}
export let applyOperator = broadcaster =>
mapBroadcaster(operator => operator(broadcaster))
export let stringConcat = broadcaster => listener => {
let result = ""
return broadcaster(value => {
if (value === done) {
listener(result)
result = ""
return
}
result += value
})
}
export let repeat = broadcaster => listener => {
let cancel
let repeatListener = value => {
if (value === done) {
cancel()
cancel = broadcaster(repeatListener)
return
}
listener(value)
}
cancel = broadcaster(repeatListener)
return cancel
}
export let repeatWhen = whenBroadcaster => broadcaster => listener => {
let cancel
let cancelWhen
let repeatListener = value => {
if (value === done) {
cancel()
cancelWhen = whenBroadcaster(() => {
cancelWhen()
cancel = broadcaster(repeatListener)
})
return
}
listener(value)
}
cancel = broadcaster(repeatListener)
return () => {
cancel()
if (cancelWhen) cancelWhen()
}
}
export let state = broadcaster => listener => {
let state = 3
return broadcaster(value => {
state--
listener(state)
})
}
export let doneIf = condition => broadcaster => listener => {
let cancel = broadcaster(value => {
listener(value)
if (condition(value)) {
listener(done)
cancel()
}
})
return cancel
}
export let sequence = (...broadcasters) => listener => {
let broadcaster = broadcasters.shift()
let cancel
let sequenceListener = value => {
if (value === done && broadcasters.length) {
let broadcaster = broadcasters.shift()
cancel = broadcaster(sequenceListener)
return
}
listener(value)
}
cancel = broadcaster(sequenceListener)
return () => {
cancel()
}
}
export let mapSequence = createBroadcaster => broadcaster => listener => {
let cancel
let buffer = []
let innerBroadcaster
let innerListener = innerValue => {
if (innerValue === done) {
innerBroadcaster = null
if (buffer.length) {
let value = buffer.shift()
if (value === done) {
listener(done)
return
}
innerBroadcaster = createBroadcaster(value)
cancel = innerBroadcaster(innerListener)
}
return
}
listener(innerValue)
}
broadcaster(value => {
if (innerBroadcaster) {
buffer.push(value)
} else {
innerBroadcaster = createBroadcaster(value)
cancel = innerBroadcaster(innerListener)
}
})
return () => {
cancel()
}
}
export const filterByKey = key => filter(event => event.key === key)
export const allowWhen = allowBroadcaster => broadcaster => listener => {
let current
let cancel = broadcaster((value) => {
current = value;
})
let cancelAllow = allowBroadcaster(() => {
listener(current)
})
return () => {
cancel()
cancelAllow()
}
}
export let waitFor = time => broadcaster => listener => {
let cancelTimeout;
let cancel
cancel = broadcaster(value => {
if (cancelTimeout) {
cancelTimeout()
}
cancelTimeout = createTimeout(time)((innerValue) => {
if (innerValue === done) {
return
}
listener(value)
})
})
return () => {
cancel()
cancelTimeout()
}
}
export let ifElse = (condition, ifOp, elOp) => broadcaster => listener => {
let cancel = broadcaster(value => {
if (value === done) {
return;
}
if (condition(value)) {
ifOp(innerValue => innerValue(value))(listener)
} else {
elOp(innerValue => innerValue(value))(listener)
}
})
return () => {
cancel()
}
}
