support for events/steams

[zhaoyao91]

In reactive world, things like solid/mobx are great model base on state and state changes. But for some problems, it would be better to model with events/streams and composition and handling of them.

Previous days I use solid state to mimic events, but feel limited. For example, if I have a signal lastUpdatedAt for a timestamp, I use an effect to log it, but if user uses batch to update many items, the signal will only fire once, thus losing logs.

I want to know if there is practice to combine solid with events/streams mechanism.

[zhaoyao91]

found even solid-rx is deprecated :( didn't know the reason.

[ryansolid]

Because it is a bit bulky doing the transforms now that I changed the default to only notify on value change. It wasn't intuitive for the general use case. I have migrated the observable helper into core in the 1.0 release and figured that is probably where this goes.

Solid's signals execute synchronously and schedule to reduce work. If effects ran multiple times we'd be doing much more with the DOM then we'd want. That is the point of batching. However, you might be hitting the other problem. That is if the value hasn't changed it won't trigger again. Perfect example is driving change on a setInterval.

What you can do in 0.26.x (I've changed the syntax in 1.0 slightly) is:

const [s, set] = createSignal(0, false); // assume never equal always notify

setInterval(() => set(0), 1000);

createEffect(() => console.log(Date.now())); // this will trigger every second

The only awkward part is every memo along the chain also needs to always notify. This is good enough for basic things but I wouldn't say is the best. Honestly if you are interested in streams I'd use an actual stream library. Signals are sort of a poor substitute. There is little value in re-inventing the wheel here when there are so many solutions out there. Mostly that signals solve the issue the framework has with synchronization, but streams are sort of higher abstraction.

I've considered making Observable interopt a little less manual but there are some complications inverting the autotracking, and imposing conventions around detection (like Svelte's use of trailing $).

[zhaoyao91]

Thanks for your explanation. createSignal(0, false) could help with same-value triggring, but it can't help with batch, see this playground

[jorroll]

@zhaoyao91 here's a simple solution for logging the setCount value every time the value is set.

• playground

Edit:
More broadly, it seems like you're trying to use signals for things they aren't intended for. Consider other ways of accomplishing your goal.

[zhaoyao91]

More broadly, it seems like you're trying to use signals for things they aren't intended for. Consider other ways of accomplishing your goal.

@jorroll yes, I am planing to use rxjs for the event system for my app. Currently I am researching how to coordinate it with solid's reactive primitives.

[jorroll]

FWIW, here are some of the helpers I use.

import { onCleanup } from 'solid-js';
import { observable } from 'solid-rx';
import { Observable, Subject } from 'rxjs';

function toRXJS<T>(signal: () => T): Observable<T> {
  const obs = observable(signal);

  return new Observable(observer => {
    return obs.subscribe({
      next: (a) => observer.next(a),
      error: (e) => observer.error(e),
      complete: () => observer.complete(),
    })
  })
}

function toSignal<T>(obs: Observable<T>, defaultValue?: T): () => T {
  const [value, setValue] = createSignal(defaultValue as T);

  const sub = obs.subscribe(setValue);

  onCleanup(() => sub.unsubscribe());

  return value;
}

function onCleanup$() {
  const obs = new Subject<void>();

  onCleanup(() => {
    obs.next();
    obs.complete();
  });

  return obs.asObservable();
}

// etc...

[zhaoyao91]

@ryansolid could we enhance setSignal or provide a new eventedSignal which escapes batch and ignores same value cheking？

Or provide a new api unbatch or similar?

[ryansolid]

What to do you want to do with it? The equality check is trivial but the behavior of escaping batched behavior Is unclear. It would be intentionally glitched. Like the outer context would not have committed so you would see old values? Picture:

const [a, setA] = createSignal(1);
const [b, setB] = createSignal(2);

createEffect(() => console.log(a() * b());

batch(() => {
  setA(0);
  unbatch(() => setB(10));
});

Is the expected behavior: 2, 10, 0?

[zhaoyao91]

Yes, the output may be 2 10 0. The purpose for unbatch is for making the final so called eventedSignal, any setEventedSignal(x) called happens, all computations and effects are guaranteed to be called. Otherwise, the effect only catches the changed final state of a signal, not suit for events.