updating values using previous value with rstream/rdom

[vilim]

Hello! I am slowly figuring my way around this wonderful set of libraries, but it's still tricky to put things together as I am quite new to javascript/typescript.
I need to do a rather basic thing: have a stream() containing an array append a value from the current value of another stream on an event (a button click). Should I be using rstream together with atom? I came up with the following, but I haven't seen this pattern (with .deref()) used in any of the examples, which usually use transducers (however I couldn't find an instance where the stream is derived from its previous value). Or is this approach fine as-is?

// simplification to get a minimal example
const value = reactive(0.0)
const data_list = reactive([])

$compile(
  div(
    {},
    button("", {onclick: increment}, "+"),
    button("", {onclick: append}, "append"),
    div(null, value),
    div(null,  data_list),
    ),
).mount(document.body);

function increment() {
  value.next(value.deref() + 1)
}

function append() {
  data_list.next([...data_list.deref(), value.deref()])
}

[alexlurvey]

Hi @vilim. Here's how I'd start out (full sandbox)

import { reactive, stream } from "@thi.ng/rstream";
import { add, push, scan } from "@thi.ng/transducers";

const numbers = reactive(0);
const value = numbers.transform(scan(add()));
const committed_values = stream<number>();
const data_list = committed_values.transform(scan(push()));

const increment = () => numbers.next(1);
const append = () => committed_values.next(value.deref()!);

I tend to avoid using arrays as values since streams already act as an iterable source. If you want a stream as an array you can always do a scan(push()). I find it most useful/flexible to have the "top level" streams just record the events ocurring in their most simple form. The state I care about should be able to be derived from all of those. This also means event handlers should not need to do a lot of data manipulation prior to calling next. If I find myself doing that I know it's time to rethink the dataflow.

[vilim]

Thank you, this is very elegant!
Do you have a suggestion on how to extend this approach with the list being editable so any element can be modified, like here. And I suppose with the atoms one could add undo/redo functionality somehow?

[alexlurvey]

Here is an extension of the approach with undo/redo functionality. I can't say whether or not it's more desirable than what you'd get with atom - haven't used it much. The committed_values number stream is now a [number, number] stream (edits) to communicate the index of the value being changed. All of these edits can be organized by the index using the groupByObj reducer

edits.transform(scan(groupByObj({ key: (x: [number, number]) => x[0] })));

groupByObj also accepts a Reducer in the group argument to further reduce each grouping. I provide a stateful reducer to handle 'undo' and 'redo' events. This lets me keep track of the values that have been undone for future redos and return useful metadata to disable the 'redo' button.

type Event = [number, number | "undo" | "redo"];

type Data = {
  values: number[];
  canRedo: boolean;
};

const edits_reducer = (): Reducer<Data, Event> => {
  let undos: number[] = [];

  return [
    () => ({ values: [], canRedo: false }),
    (acc) => {
      undos = [];
      return acc;
    },
    (acc, x) => {
      if (x[1] === "redo") {
        if (undos.length) {
          acc.values.push(undos.pop()!);
        }
      } else if (x[1] === "undo") {
        if (acc.values.length) {
          undos.push(acc.values.pop()!);
        }
      } else {
        acc.values.push(x[1]);
      }
      return { ...acc, canRedo: undos.length > 0 };
    }
  ];
};

const all_edits_xform = scan(
  groupByObj({
    key: (x: Event) => x[0],
    group: edits_reducer()
  })
);
// [ { values: [1], canRedo: false } ]

Now you can provide this to $list with a few alterations within the markup to grab the right data.

edits.transform(
  comp(
    all_edits_xform,
    map((x) => Object.entries(x))
  )
);