From ca3f12579c4315930aef7c14b003528b595a3792 Mon Sep 17 00:00:00 2001
From: Lars Hoffbeck <lars.hoffbeck@shopify.com>
Date: Wed, 5 Jun 2024 15:42:46 -0400
Subject: [PATCH] Convert viewTransition function to be static

---
 assets/global.js       | 4 +---
 assets/product-info.js | 9 +++------
 2 files changed, 4 insertions(+), 9 deletions(-)

diff --git a/assets/global.js b/assets/global.js
index 95deeff3aa6..1c962415bca 100644
--- 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
index f67962176e6..57c85302188 100644
--- 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,
@@ -208,7 +206,6 @@ if (!customElements.get('product-info')) {
 
           const updateSourceFromDestination = (id, shouldHide = (source) => false) => {
             const source = html.getElementById(`${id}-${this.sectionId}`);
-            debugger;
             const destination = this.querySelector(`#${id}-${this.dataset.section}`);
             if (source && destination) {
               destination.innerHTML = source.innerHTML;