Convert viewTransition function to be static

Shopify · Jun 5, 2024 · ec781cf · ec781cf
1 parent 97abc8a
commit ec781cf
Show file tree

Hide file tree

Showing 2 changed files with 4 additions and 8 deletions.
diff --git a/assets/global.js b/assets/global.js
@@ -26,15 +26,13 @@ class SectionId {
 }
 
 class HTMLUpdateUtility {
-  constructor() {}
-
   /**
    * Used to swap an HTML node with a new node.
    * The new node is inserted as a previous sibling to the old node, the old node is hidden, and then the old node is removed.
    *
    * The function currently uses a double buffer approach, but this should be replaced by a view transition once it is more widely supported https://developer.mozilla.org/en-US/docs/Web/API/View_Transitions_API
    */
-  viewTransition(oldNode, newContent, preProcessCallbacks = [], postProcessCallbacks = []) {
+  static viewTransition(oldNode, newContent, preProcessCallbacks = [], postProcessCallbacks = []) {
     preProcessCallbacks?.forEach((callback) => callback(newContent));
 
     const newNodeWrapper = document.createElement('div');

diff --git a/assets/product-info.js b/assets/product-info.js
@@ -6,7 +6,6 @@ if (!customElements.get('product-info')) {
       quantityForm = undefined;
       onVariantChangeUnsubscriber = undefined;
       cartUpdateUnsubscriber = undefined;
-      htmlUpdateUtility = undefined;
       abortController = undefined;
       pendingRequestUrl = null;
       preProcessHtmlCallbacks = [];
@@ -52,7 +51,6 @@ if (!customElements.get('product-info')) {
       }
 
       initializeProductSwapUtility() {
-        this.htmlUpdateUtility = new HTMLUpdateUtility();
         this.preProcessHtmlCallbacks.push((html) =>
           html.querySelectorAll('.scroll-trigger').forEach((element) => element.classList.add('scroll-trigger--cancel'))
         );
@@ -118,7 +116,7 @@ if (!customElements.get('product-info')) {
           // If we are in an embedded context (quick add, featured product, etc), only swap product info.
           // Otherwise, refresh the entire page content and sibling sections.
           if (this.dataset.updateUrl === 'false') {
-            this.htmlUpdateUtility.viewTransition(
+            HTMLUpdateUtility.viewTransition(
               this,
               html.querySelector('product-info'),
               this.preProcessHtmlCallbacks,
@@ -127,7 +125,7 @@ if (!customElements.get('product-info')) {
           } else {
             document.querySelector('head title').innerHTML = html.querySelector('head title').innerHTML;
 
-            this.htmlUpdateUtility.viewTransition(
+            HTMLUpdateUtility.viewTransition(
               document.querySelector('main'),
               html.querySelector('main'),
               this.preProcessHtmlCallbacks,
@@ -182,7 +180,7 @@ if (!customElements.get('product-info')) {
       updateOptionValues(html) {
         const variantSelects = html.querySelector('variant-selects');
         if (variantSelects) {
-          this.htmlUpdateUtility.viewTransition(
+          HTMLUpdateUtility.viewTransition(
             this.variantSelectors,
             variantSelects,
             this.preProcessHtmlCallbacks,