Fix: Resolve p5 is not defined ReferenceError by adding p5-adapter (sugarlabs#4990)

* Fix: Resolve p5/Tone.js conflict using adapter pattern

* style: apply prettier formatting to adapter files

Author: saurabh24thakur

js/loader.js

@@ -14,25 +14,45 @@
 requirejs.config({
     baseUrl: "lib",
     shim: {
-        easel: {
+        "easel": {
             exports: "createjs"
+        },
+        "p5.min": {
+            exports: "p5"
+        },
+        "p5-adapter": {
+            deps: ["p5.min"]
+        },
+        "p5.sound.min": {
+            deps: ["p5-adapter"]
+        },
+        "p5.dom.min": {
+            deps: ["p5.min"]
+        },
+        "p5-sound-adapter": {
+            deps: ["p5.sound.min"]
         }
     },
     paths: {
-        utils: "../js/utils",
-        widgets: "../js/widgets",
-        activity: "../js",
-        easel: "../lib/easeljs",
-        twewn: "../lib/tweenjs",
-        prefixfree: "../bower_components/prefixfree/prefixfree.min",
-        samples: "../sounds/samples",
-        planet: "../js/planet",
-        tonejsMidi: "../node_modules/@tonejs/midi/dist/Midi",
-        i18next: [
+        "utils": "../js/utils",
+        "widgets": "../js/widgets",
+        "activity": "../js",
+        "easel": "../lib/easeljs",
+        "twewn": "../lib/tweenjs",
+        "prefixfree": "../bower_components/prefixfree/prefixfree.min",
+        "samples": "../sounds/samples",
+        "planet": "../js/planet",
+        "tonejsMidi": "../node_modules/@tonejs/midi/dist/Midi",
+        "p5.min": "../lib/p5.min",
+        "p5.sound.min": "../lib/p5.sound.min",
+        "p5.dom.min": "../lib/p5.dom.min",
+        "p5-adapter": "../js/p5-adapter",
+        "p5-sound-adapter": "../js/p5-sound-adapter",
+        "i18next": [
             "../lib/i18next.min",
             "https://cdn.jsdelivr.net/npm/i18next@23.11.5/dist/umd/i18next.min"
         ],
-        i18nextHttpBackend: [
+        "i18nextHttpBackend": [
             "../lib/i18nextHttpBackend.min",
             "https://cdn.jsdelivr.net/npm/i18next-http-backend@2.5.1/i18nextHttpBackend.min"
         ]
@@ -69,7 +89,7 @@ requirejs(["i18next", "i18nextHttpBackend"], function (i18next, i18nextHttpBacke
                         console.error("i18next init failed:", err);
                     }
                     window.i18next = i18next;
-                    resolve(i18next); 
+                    resolve(i18next);
                 }
             );
         });
@@ -101,4 +121,4 @@ requirejs(["i18next", "i18nextHttpBackend"], function (i18next, i18nextHttpBacke
     }
 
     main();
-});
+});

js/p5-adapter.js

@@ -0,0 +1,28 @@
+/* global define, window */
+define(["p5.min"], function (p5) {
+    console.log("p5-adapter: p5 loaded");
+    if (!window.p5 && p5) {
+        window.p5 = p5;
+    }
+    if (window.Tone) {
+        console.log("p5-adapter: Saving OriginalTone");
+        window.OriginalTone = window.Tone;
+    } else {
+        console.warn("p5-adapter: window.Tone not found!");
+    }
+
+    // Save original AudioContext constructors to prevent p5.sound from hijacking them
+    if (window.AudioContext) {
+        window.OriginalAudioContext = window.AudioContext;
+    }
+    if (window.webkitAudioContext) {
+        window.OriginalWebkitAudioContext = window.webkitAudioContext;
+    }
+
+    // Save original connect just in case
+    if (window.AudioNode && window.AudioNode.prototype) {
+        window.OriginalAudioNodeConnect = window.AudioNode.prototype.connect;
+    }
+
+    return p5;
+});

js/p5-sound-adapter.js

@@ -0,0 +1,58 @@
+/* global define, window */
+define(["p5.sound.min"], function () {
+    console.log("p5-sound-adapter: p5.sound loaded");
+
+    // Restore AudioContext if it was overwritten
+    if (window.OriginalAudioContext && window.AudioContext !== window.OriginalAudioContext) {
+        console.log("p5-sound-adapter: Restoring AudioContext");
+        window.AudioContext = window.OriginalAudioContext;
+    }
+    if (
+        window.OriginalWebkitAudioContext &&
+        window.webkitAudioContext !== window.OriginalWebkitAudioContext
+    ) {
+        console.log("p5-sound-adapter: Restoring webkitAudioContext");
+        window.webkitAudioContext = window.OriginalWebkitAudioContext;
+    }
+
+    // Restore Tone.js
+    if (window.OriginalTone) {
+        if (window.Tone !== window.OriginalTone) {
+            console.log("p5-sound-adapter: Restoring MusicBlocks Tone.js");
+            window.Tone = window.OriginalTone;
+        } else {
+            console.log("p5-sound-adapter: Tone was not overwritten by p5.sound");
+        }
+    } else {
+        console.warn("p5-sound-adapter: No OriginalTone to restore!");
+    }
+
+    // Fix AudioNode.prototype.connect return value
+    // We force this patch because p5.sound is known to break chaining,
+    // and sometimes the reference check fails (e.g. if p5.sound wraps it in a way that preserves identity or if we missed the timing).
+    // The error "s.connect(...) is undefined" confirms we MUST ensure a return value.
+    if (window.AudioNode && window.AudioNode.prototype) {
+        var currentConnect = window.AudioNode.prototype.connect;
+
+        // Avoid double-patching if we already did it
+        if (!currentConnect.isP5AdapterPatched) {
+            console.log(
+                "p5-sound-adapter: Forcing patch of AudioNode.prototype.connect to support chaining"
+            );
+
+            window.AudioNode.prototype.connect = function () {
+                var result = currentConnect.apply(this, arguments);
+                // If the result is undefined (which breaks Tone.js chaining), return the destination (arguments[0])
+                if (result === undefined) {
+                    return arguments[0];
+                }
+                return result;
+            };
+
+            // Mark as patched
+            window.AudioNode.prototype.connect.isP5AdapterPatched = true;
+        } else {
+            console.log("p5-sound-adapter: AudioNode.prototype.connect already patched");
+        }
+    }
+});