Use morphing on turbo frame re-rendering.

opf · Apr 10, 2024 · 960dc33 · 960dc33
1 parent 99ccf16
commit 960dc33
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 0 deletions.
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
diff --git a/frontend/package.json b/frontend/package.json
@@ -135,6 +135,7 @@
     "mime": "^2.5.2",
     "moment": "^2.29.4",
     "moment-timezone": "^0.5.43",
+    "morphdom": "^2.7.2",
     "mousetrap": "~1.6.3",
     "ng-dynamic-component": "^10.7.0",
     "ng2-charts": "^4.1.1",

diff --git a/frontend/src/turbo/setup.ts b/frontend/src/turbo/setup.ts
@@ -1,4 +1,5 @@
 import * as Turbo from '@hotwired/turbo';
+import morphdom from 'morphdom';
 import { ModalDialogElement } from '@openproject/primer-view-components/app/components/primer/alpha/modal_dialog';
 
 // Disable default turbo-drive for now as we don't need it for now AND it breaks angular routing
@@ -24,3 +25,13 @@ document.addEventListener('turbo:submit-end', (event:CustomEvent) => {
     dialog && dialog.close(true);
   }
 });
+
+interface TurboBeforeFrameRenderEventDetail {
+  render:(currentElement:HTMLElement, newElement:HTMLElement) => void;
+}
+
+document.addEventListener('turbo:before-frame-render', (event:CustomEvent<TurboBeforeFrameRenderEventDetail>) => {
+  event.detail.render = (currentElement:HTMLElement, newElement:HTMLElement) => {
+    morphdom(currentElement, newElement, { childrenOnly: true });
+  };
+});