force state to trigger update.

[Celestialme]

Describe the problem

For example usign Tip-Tap editor
`<script>
import { onMount, onDestroy } from 'svelte';
import { Editor } from '@tiptap/core';
import StarterKit from '@tiptap/starter-kit';

let element;
let editor;

onMount(() => {
	editor = new Editor({
		element: element,
		extensions: [StarterKit],
		content: '<p>Hello World! 🌍️ </p>',
		onTransaction: () => {
			// force re-render so `editor.isActive` works as expected
                           editor = editor
		},
	});
});

onDestroy(() => {
	if (editor) {
		editor.destroy();
	}
});

</script>`

editor = editor;
this no longer does anything.
if anyone is in the same boat my current approach is

let editor = $state<() => Editor>();
onMount(() => {
		let _editor = new Editor({
			element: element,
			extensions: [StarterKit],
			content: '<p>Hello World! 🌍️ </p>',
			onTransaction: () => {
				// force re-render so `editor.isActive` works as expected
				 let _editor = editor();
				 editor = ()=>_editor;
			},
		});
             editor = () => _editor;
	});

Describe the proposed solution

trigger(editor)
so it calls update on everywhere where it is used. on DOM, $derived,$effect and so on.

Importance

nice to have

[trueadm]

What if you first assign it to undefined and then to the value you want? Assigning it to itself doesn't mean anything because it's the same thing. We can't introduce a trigger either, as the reactivity system uses value equality on state, not on updates.

[Celestialme]

What if you first assign it to undefined and then to the value you want? Assigning it to itself doesn't mean anything because it's the same thing. We can't introduce a trigger either, as the reactivity system uses value equality on state, not on updates.

it will only work for 1 time and then nothing. onTransaction is called every time something is changed on editor (click somewhere, select something, write/delete something...) so it needs to update everything that comes from editor. so class:active={editor.isActive("bold")} check will run every time something changes.

[Thiagolino8]

Maybe $state.raw + spread works for you

[Celestialme]

Maybe $state.raw + spread works for you

tried spread but editor is class instance and spreading removes methods. for normal objects yes spreading causes update. But overall i don't know how good is spreading as it introduces cloning overhead?

[Thiagolino8]

I didn't mean to spread the class directly, use a box object

[Celestialme]

I didn't mean to spread the class directly, use a box object

yes it works but almost same as my current approach, I am returning underlying editor calling a function which is changed, in this case its object that has editor inside. So almost same.
but then
editor().isActive('heading', { level: 1 })
becomes.
editor.value.isActive('heading', { level: 1 })

also i believe that raw in this case does not do anything since class is not deeply reactive at least for now.
issue 11590

[trueadm]

What if you first assign it to undefined and then to the value you want? Assigning it to itself doesn't mean anything because it's the same thing. We can't introduce a trigger either, as the reactivity system uses value equality on state, not on updates.

it will only work for 1 time and then nothing. onTransaction is called every time something is changed on editor (click somewhere, select something, write/delete something...) so it needs to update everything that comes from editor. so class:active={editor.isActive("bold")} check will run every time something changes.

What I meant was doing something like this.

[Celestialme]

What if you first assign it to undefined and then to the value you want? Assigning it to itself doesn't mean anything because it's the same thing. We can't introduce a trigger either, as the reactivity system uses value equality on state, not on updates.

it will only work for 1 time and then nothing. onTransaction is called every time something is changed on editor (click somewhere, select something, write/delete something...) so it needs to update everything that comes from editor. so class:active={editor.isActive("bold")} check will run every time something changes.

What I meant was doing something like this.

Oh yes this is best so far. thanks. actually trigger can work like this but it should not trigger if value is null as it cycles?

[trueadm]

Not sure what you mean, but the value never becomes null outside because of batching, so it's just a way to bypass the equality value checking of the signal.

[brunnerh]

Issue sounds like a duplicate of this to me:

• Proposal: a way to make non-POJOs reactive #10560

[Celestialme]

Not sure what you mean, but the value never becomes null outside because of batching, so it's just a way to bypass the equality value checking of the signal.

oh yes this is totally right thank you again.