Splitting and joining onchange/set $bindables/$state for interop with vanilla libraries and prevent circular issues

[petermakeswebsites]

Describe the problem

I have a pain point with Svelte which is minor but still ther. Despite Svelte's fantastic ability to work with vanilla libraries, the Svelte reactivity system requires a bit of tinkering in certain cases. Because of the built-in two-way magic reactive nature, it's easy to get into circular dependency issues when you're transforming data to and fro. It can be solved quite easily I think.

Here's the issue...

Example, take TipTap. TipTap is a rich text editor that has a callback function for updates as well as the ability to set the JSON.

So imagine this pseudocode, abridged for conceptual purposes:

<script>
  let {json = bindable()} = $props()
  let tiptap = new Tiptap({div: ...)
  $effect.pre(() => {
       // Listen for changes from parent and apply them to TipTap
       tiptap.setJSON(json)
  })
  
  //  Listen for input changes from user and propagate to parent
  tiptap.oncontentchange((newJson) => json = newJson)
</script>
<div bind:this... tip tap etc />

Then in the parent we have simply <TIpTap bind:json={json}>

In this situation, this works fine. But the reason it works is because of the equality check of the input and output...

1. User inputs
2. oncontentchange called, json (bindable rune) set to new json
3. parent and child runs effects from new change
4. effect propagates to the $effect.pre above
5. tip tap sets the "new" json (actually the same as the one it already has)
6. unless tip tap does equality check (not all libs do) oncontentchange runs again, resetting json to newJson (again, actually the same)
7. reactivity system detects via deep equality that there is no change, and so no effects are run. The end.

Not efficient but the code is relatively clean and it works...

But, things get more finicky when you want transformations. For example, lets say when TipTap has no text, you want the the parent to be set to "null", and likewise, when the parent sets json to "null", you want tiptap to put its empty json.

<script>
  const EMPTY_JSON_FOR_TIPTAP = 
  let {json = bindable()} = $props()
  let tiptap = new Tiptap({div: ...)
  $effect.pre(() => {
       // Listen for changes from parent and apply them to TipTap
       tiptap.setJSON(json !== null ? json : {doc: {}})
  })
  
  //  Listen for input changes from user and propagate to parent
  tiptap.oncontentchange((newJson, isEmptyAfterTrim) => json = isEmptyAfterTrim(newJson) null : newJson)
</script>
<div bind:this... tip tap etc />

Maybe you can also split a state into a derived and a setter, in which case the derived will only change when the input comes from the inside

But now see we have an issue. When user inputs a space in the text, oncontentchange detects that the editor has no characters, and sets json to null. This works as we want for the parent, but then the effect.pre runs again in this component, setting tiptap again, except it sets tiptap to an empty new one, removing the space.

The reason for this is fundamentally because this component really has no way of knowing whether the change of json came from itself or from the parent. And that's really the crux of the matter.

I've run into some variation of this issue many times and my workarounds have never been as pretty as I wanted.

Describe the proposed solution

We want a one-way system to know what comes from the parent and what comes from the component. The easiest way to do this would be to be able to "split" a bindable (or any state for that matter) into onchange (this can also be a $derived) and a setter.

I propose something like

const { onchange, set } = $split(someRune)

The idea with this is that this particular duo of onchange and the setter is that onchange doesn't run if the setter is SET, only if the rune is set on the OTHER SIDE of the splitter. (in the case below, if the parent sets json)...

Example:

<script>
  let {json = bindable()} = $props()

  let tiptap = new Tiptap({div: ...)

  // the change callback (2nd arg) will only run if the change comes from json itself (in this case, the parent), and will be ignored if it comes from "set"
  const set = $split(json, newJsonFromParent => tiptap.setJSON(newJsonFromParent !== null ? newJsonFromParent : EMPTY_JSON_FOR_TIPTAP))

  
  //  Listen for input changes from user and propagate to parent
  tiptap.oncontentchange((newJson, isEmptyAfterTrim) => set(isEmptyAfterTrim(newJson) null : newJson))
</script>
<div bind:this... tip tap etc />

And here are the steps now

1. User inputs
2. oncontentchange called, json (bindable rune) set to new json
3. only the parent's reactions are triggered, and the $split's "onchange" doesn't fire (because it was set by the local set, not from the parent).
4. The end.

As a side note, it would also be cool to have a "combine" version instead, doing the exact opposite.

Importance

nice to have

[petermakeswebsites]

Here's an example of a very hacky and verbose solution that definitely ins't safe but accomplishes the goal I think for any jsonable and probably non-proxied object. It essentially just , whenever set is set, blocks the local onchange from running until the end of the next microtask.

import {untrack} from "svelte"
export const splitter = ({originalGetter, originalSetter, onchange}) => {
    let skip = false
    $effect.pre(() => {
      console.log("Running effect")
			// tracking changes, snapshot to not pass nested reactive stuff
      const snapshot = $state.snapshot(originalGetter()) 
      if (skip == true) {
        console.log("Skipped - this change came from within!")
        skip = false
        return
      }
      console.log("Change coming from parent detected!")
      untrack(() => onchange(snapshot))
    })
    return {
      set: (newValue) => {
        console.log("Setting via splitter")
        originalSetter(newValue)
        if (!skip) queueMicrotask(() => { console.log("Releasing skip");  skip = false})
        skip = true
      },
    }
}

The implementation is even uglier:

<script>
	import {splitter} from "./splitter.svelte.js"
	let {count = $bindable()} = $props()
	let {set} = splitter({
		originalGetter: () => count, // Must be a function to tie reactivity into a different layer
		originalSetter: (c) => count = c,
		onchange: (c) => // triggered with change from parent only - doesn't fire when using "set"
	})
</script>

Would be SO nice to be able to do something like

<script>
	let {count = $bindable()} = $props()
	const set = $split(count, (changeFromParentCount) => /* do stuff from parent, doesn't fire when using "set" */ )
</script>