fix: Unwrap Vue Proxies when possible (#2132)

Author: Danielku15

src/Environment.ts

@@ -802,4 +802,32 @@ export class Environment {
             print(`Screen Size: ${window.screen.width}x${window.screen.height}`);
         }
     }
+
+    /**
+     * Prepares the given object to be sent to workers. Web Frameworks like Vue might
+     * create proxy objects for all objects used. This code handles the necessary unwrapping.
+     * @internal
+     * @target web
+     */
+    public static prepareForPostMessage<T>(object: T): T {
+        if (!object) {
+            return object;
+        }
+
+        // Vue toRaw:
+        // https://github.com/vuejs/core/blob/e7381761cc7971c0d40ae0a0a72687a500fd8db3/packages/reactivity/src/reactive.ts#L378-L381
+
+        if (typeof object === 'object') {
+            const unwrapped = (object as any).__v_raw;
+            if (unwrapped) {
+                return Environment.prepareForPostMessage(unwrapped);
+            }
+        }
+
+        // Solidjs unwrap: the symbol required to access the raw object is unfortunately hidden and we cannot unwrap it without importing
+        // import { unwrap } from "solid-js/store"
+        // alternative for users is to replace this method during runtime. 
+
+        return object;
+    }
 }

src/platform/javascript/AlphaSynthAudioWorkletOutput.ts

@@ -240,7 +240,7 @@ export class AlphaSynthAudioWorkletOutput extends AlphaSynthWebAudioOutputBase {
     public addSamples(f: Float32Array): void {
         this._worklet?.port.postMessage({
             cmd: AlphaSynthWorkerSynthOutput.CmdOutputAddSamples,
-            samples: f
+            samples: Environment.prepareForPostMessage(f)
         });
     }
 

src/platform/javascript/AlphaSynthWebWorker.ts

@@ -178,7 +178,7 @@ export class AlphaSynthWebWorker {
     public onSoundFontLoadFailed(e: any): void {
         this._main.postMessage({
             cmd: 'alphaSynth.soundFontLoadFailed',
-            error: this.serializeException(e)
+            error: this.serializeException(Environment.prepareForPostMessage(e))
         });
     }
 
@@ -212,7 +212,7 @@ export class AlphaSynthWebWorker {
     public onMidiLoadFailed(e: any): void {
         this._main.postMessage({
             cmd: 'alphaSynth.midiLoaded',
-            error: this.serializeException(e)
+            error: this.serializeException(Environment.prepareForPostMessage(e))
         });
     }
 

src/platform/javascript/AlphaSynthWebWorkerApi.ts

@@ -113,7 +113,7 @@ export class AlphaSynthWebWorkerApi implements IAlphaSynth {
         this._midiEventsPlayedFilter = value;
         this._synth.postMessage({
             cmd: 'alphaSynth.setMidiEventsPlayedFilter',
-            value: value
+            value: Environment.prepareForPostMessage(value)
         });
     }
 
@@ -188,7 +188,7 @@ export class AlphaSynthWebWorkerApi implements IAlphaSynth {
         this._playbackRange = value;
         this._synth.postMessage({
             cmd: 'alphaSynth.setPlaybackRange',
-            value: value
+            value: Environment.prepareForPostMessage(value)
         });
     }
 
@@ -264,14 +264,14 @@ export class AlphaSynthWebWorkerApi implements IAlphaSynth {
     public playOneTimeMidiFile(midi: MidiFile): void {
         this._synth.postMessage({
             cmd: 'alphaSynth.playOneTimeMidiFile',
-            midi: JsonConverter.midiFileToJsObject(midi)
+            midi: JsonConverter.midiFileToJsObject(Environment.prepareForPostMessage(midi))
         });
     }
 
     public loadSoundFont(data: Uint8Array, append: boolean): void {
         this._synth.postMessage({
             cmd: 'alphaSynth.loadSoundFontBytes',
-            data: data,
+            data: Environment.prepareForPostMessage(data),
             append: append
         });
     }
@@ -285,14 +285,14 @@ export class AlphaSynthWebWorkerApi implements IAlphaSynth {
     public loadMidiFile(midi: MidiFile): void {
         this._synth.postMessage({
             cmd: 'alphaSynth.loadMidi',
-            midi: JsonConverter.midiFileToJsObject(midi)
+            midi: JsonConverter.midiFileToJsObject(Environment.prepareForPostMessage(midi))
         });
     }
 
     public applyTranspositionPitches(transpositionPitches: Map<number, number>): void {
         this._synth.postMessage({
             cmd: 'alphaSynth.applyTranspositionPitches',
-            transpositionPitches: JSON.stringify(Array.from(transpositionPitches.entries()))
+            transpositionPitches: JSON.stringify(Array.from(Environment.prepareForPostMessage(transpositionPitches).entries()))
         });
     }
 

src/platform/javascript/AlphaSynthWorkerSynthOutput.ts

@@ -62,7 +62,7 @@ export class AlphaSynthWorkerSynthOutput implements ISynthOutput {
     public addSamples(samples: Float32Array): void {
         this._worker.postMessage({
             cmd: 'alphaSynth.output.addSamples',
-            samples: samples
+            samples: Environment.prepareForPostMessage(samples)
         });
     }
 

src/platform/javascript/AlphaTabWorkerScoreRenderer.ts

@@ -48,7 +48,7 @@ export class AlphaTabWorkerScoreRenderer<T> implements IScoreRenderer {
     }
 
     private serializeSettingsForWorker(settings: Settings): unknown {
-        const jsObject = JsonConverter.settingsToJsObject(settings)!;
+        const jsObject = JsonConverter.settingsToJsObject(Environment.prepareForPostMessage(settings))!;
         // cut out player settings, they are only needed on UI thread side
         jsObject.delete('player');
         return jsObject;
@@ -113,11 +113,11 @@ export class AlphaTabWorkerScoreRenderer<T> implements IScoreRenderer {
     }
 
     public renderScore(score: Score | null, trackIndexes: number[] | null): void {
-        const jsObject: unknown = score == null ? null : JsonConverter.scoreToJsObject(score);
+        const jsObject: unknown = score == null ? null : JsonConverter.scoreToJsObject(Environment.prepareForPostMessage(score));
         this._worker.postMessage({
             cmd: 'alphaTab.renderScore',
             score: jsObject,
-            trackIndexes: trackIndexes,
+            trackIndexes: Environment.prepareForPostMessage(trackIndexes),
             fontSizes: FontSizes.FontSizeLookupTables
         });
     }