How to track updates to a tracked object without an effect inside a foreign scope?

[sreekar339339]

export class UndoRedoState {
  constructor(val) {
    this.history = #[];
    this.currentIdx = track(-1);
    this.currentState = track(() => this.history[this.@currentIdx]);
    this.canUndo = track(() => this.@currentIdx > 0);
    this.canRedo = track(() => this.@currentIdx < this.history.length - 1);
    this.canReset = track(() => this.@canUndo || this.@canRedo);
    this.length = track(() => this.history.length);
    this.isAtLatestState = track(() => this.@currentIdx === this.history.length - 1);
    this.state = val
  }

  get state() {
    return this.@currentState;
  }

  set state(val) {
    if (!this.@isAtLatestState) this.history.splice(this.@currentIdx + 1);
    this.history[++this.@currentIdx] = val;
  }
  ....
}

export default component Test() {
  let count = track(0, (current) => current, (next, prev) => {
    undoRedoState.state = next 
    return next
  });
  let undoRedoState = new UndoRedoState(@count)

  <button onclick={() => @count++}>{"Increment"}</button>
  <p>{"Count: " + undoRedoState.state}</p>
  <button onclick={() => undoRedoState.undo()}>{"Undo"}</button>
  <button onclick={() => undoRedoState.redo()}>{"Redo"}</button>
  <button onclick={() => undoRedoState.reset()}>{"Reset"}</button>
  <pre>{undoRedoState.toString()}</pre>
}

In this example, Im using the set function of count to track its updates to perform undoRedoState.state = next.

This is a bit awkward, so instead, I want to perform undoRedoState.state = next inside the UndoRedoState class itself. For that I need a callback that triggers whenever count is set.

Instead of let undoRedoState = new UndoRedoState(@count) I want to pass the unwrapped count, let undoRedoState = new UndoRedoState(count) and inside the constructor of UndoRedoState I would want a callback to be triggered whenever count is set, just like what the set function does.

I know there is effect, but the trouble is I would have to use untrack inside it because I want to update some state of UndoRedoState (see set state(val) method) inside the effect whenever the count is set.

I think just like set allows for intercepting updates, a similar API could be provided to track updates in a foreign scope when the tracked value is transported from its declared scope.

Something like on(count, 'set' | 'get', () => {}) or count.onSet = callback or something else.

[trueadm]

I'm struggling a bit to understand what and why you're doing this. It seems you're vastly overcomplicating this – when you should just be passing in count as a tracked object – or you pass a closure to new UndoRedoState(() => @count). With that you can now use a track(() => get_fn) or @count inside your class and map that to your get state, which would allow you to intercept when it changes based on being read.

However, you also likely don't want to store every single mutation between – so maybe an effect is better here?

[sreekar339339]

Right now there is some issue with compilation of class properties #476 . I cannot experiment with this example.

Is this what you are suggesting?

export class UndoRedoState {
  constructor(count) {
    this.history = #[];
    this.currentIdx = track(-1);
    this.currentState = track(() => this.history[this.@currentIdx]);
    this.canUndo = track(() => this.@currentIdx > 0);
    this.canRedo = track(() => this.@currentIdx < this.history.length - 1);
    this.canReset = track(() => this.@canUndo || this.@canRedo);
    this.length = track(() => this.history.length);
    this.isAtLatestState = track(() => this.@currentIdx === this.history.length - 1);
    track(() => @count, (v) => v, (next) => {this.state = next; return next}) // <-Like this
  }
....
}

[trueadm]

I'll try and sort that issue for you tonight.

[sreekar339339]

Thank you!

[trueadm]

That issue has been fixed, does that solve this issue for you?

[sreekar339339]

Repro

Does not solve the problem.

track(() => @count, (v) => v, (next) => {this.state = next; return next}) This approach does not seem to work. Is this what you suggested in the first place though?

[trueadm]

I wasn't suggesting that, I don't even know why you would do that either. Let me dig into your example deeper!

[sreekar339339]

Thank you.

Basically I want to run a function (set state()) that updates a bunch of tracked variables(history, currentIdx) when count changes.

I do not want to use an effect because the function inside the effect will update a bunch of tracked variables.

[trueadm]

Yeah, so that isn't going to work – as you can't track mutations on state that comes in from outside the class, unless you use an effect. So really your only option here is to use an effect. Just like you would in Solid or Svelte.

[trueadm]

I might make another way to make this work without effects though, so watch this space :)

[trueadm]

I tried playing around with it, but this is where I got to – playground

[sreekar339339]

I might make another way to make this work without effects though, so watch this space :)

Please!

Using effects is problematic if local state has to be updated in response, we are forced to use untrack. Bit awkward.

[sreekar339339]

I tried playing around with it, but this is where I got to – playground

Thanks! Looks a bit complicated 😅 .

[leonidaz]

I'm not sure a see a way to accomplish what you want without using effect as this is the standard way to capture outside changes.

If you want something more convenient, you can create a watch function like this library https://runed.dev/docs/utilities/watch

It still uses effect under the hood.

[sreekar339339]

Something that offers similar behaviour should be built-in to the framework itself.

effect is too low-level. It has to be used along with untrack and some other non-trivial details to make this work. The watch function implementation is not trivial, an external lib has to be used for a common use-case.

It would be nice if there was an ergonomic API for this, maybe an enhancement to track itself or a new API.