Unload the current route script safely

_dev/src/ts/routing/ScriptHandler.ts

@@ -68,4 +68,15 @@ export default class ScriptHandler {
     this.#currentScript?.beforeDestroy();
     this.#loadScript(newRoute);
   }
+
+  /**
+   * @public
+   * @returns void
+   * @description Unloads the currently loaded script.
+   *  Should be called before updating the DOM.
+   */
+  public unloadRouteScript(): void {
+    this.#currentScript?.beforeDestroy();
+    this.#currentScript = undefined;
+  }
 }

_dev/src/ts/utils/Hydration.ts

@@ -27,6 +27,10 @@ export default class Hydration {
     const elementToUpdate = document.getElementById(data.parent_to_update);
 
     if (elementToUpdate && data.new_content) {
+      if (data.new_route) {
+        scriptHandler.unloadRouteScript();
+      }
+
       elementToUpdate.innerHTML = data.new_content;
 
       if (data.new_route) {

_dev/tests/utils/Hydration.test.ts

@@ -5,6 +5,7 @@ import ScriptHandler from '../../src/ts/routing/ScriptHandler';
 
 const setNewRouteMock = jest.spyOn(RouteHandler.prototype, 'setNewRoute');
 const updateRouteScriptMock = jest.spyOn(ScriptHandler.prototype, 'updateRouteScript');
+const unloadRouteScriptMock = jest.spyOn(ScriptHandler.prototype, 'unloadRouteScript');
 
 jest.mock('../../src/ts/pages/HomePage', () => {
   return jest.fn().mockImplementation(() => {
@@ -159,12 +160,18 @@ describe('Hydration and scripts lifecycle', () => {
     };
     hydration.hydrate(initialResponse);
 
+    expect(setNewRouteMock).toHaveBeenCalledTimes(1);
+    expect(unloadRouteScriptMock).toHaveBeenCalledTimes(1);
+
     const nextResponse: ApiResponseHydration = {
       hydration: true,
       new_content: `<p>New Content</p>`,
       parent_to_update: 'parent',
       new_route: 'home-page'
     };
     hydration.hydrate(nextResponse);
+
+    expect(setNewRouteMock).toHaveBeenCalledTimes(2);
+    expect(unloadRouteScriptMock).toHaveBeenCalledTimes(2);
   });
 });