How to correctly use imported classes from other libraries in Svelte 5?

[Tb1281]

Describe the bug

In Svelte 5, classes are no longer auto-reactive (see migration guide).

I'm trying to use CodeMirror, but I'm running into issues with how to manage the editor instance. For example, the following code seems problematic:

let editor = $state();
$effect.pre(() => {
  editor = new EditorView(...);
  return () => editor?.destroy();
});

The issue arises because the props of the EditorView class are not wrapped in $state(...), which means they're not reactive.

Is there a recommended way to handle this in Svelte 5? How can I ensure that the editor instance and its properties remain reactive in this scenario?

Reproduction

https://svelte.dev/playground/0aca148ac2fc4301b6b5a7605dc57c7d?version=5.2.8

Logs

No response

System Info

All

Severity

annoyance

[brunnerh]

Duplicate of:

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

See in particular this comment.