It seems that setScheduler(new RAFScheduler()) does not behave properly because the number of job objects are out of sync with the DOM objects that are created (more DOM object are created that actually exists in the jobs stream). The only way I can have the list of jobs synced with the DOM is by using syncRAF.
import { defAtom, defCursor } from "@thi.ng/atom";
import * as rx from "@thi.ng/rstream";
import { $compile, $list, setScheduler, RAFScheduler } from "@thi.ng/rdom";
// setScheduler(new RAFScheduler());
const db = defAtom<State>({ jobs: [] });
const jobs = defCursor(db, ["jobs"]);
const jobsView = rx.syncRAF(rx.fromAtom(jobs))
const jobCreate = rx.stream<Job>();
jobCreate.subscribe({
next: ({ start, end, ...rest }) => {
jobs.swap((prev) => [
...prev,
{ ...rest, start: new Date(start), end: end && new Date(end) },
]);
},
});
tx.run(
tx.sideEffect((x) => jobCreate.next(x)),
getJobs(), // not implemented here returns Job[]
);
const root = document.getElementById("root")
$compile($list(jobs, "div", {}, (x)=> `${x.start}`)).mount(root)
It seems that
setScheduler(new RAFScheduler())
does not behave properly because the number of job objects are out of sync with the DOM objects that are created (more DOM object are created that actually exists in the jobs stream). The only way I can have the list of jobs synced with the DOM is by usingsyncRAF
.