Add navigate support for replacing html attributes (#9149)

dist/livewire.js

@@ -7715,13 +7715,15 @@ ${expression ? 'Expression: "' + expression + '"\n\n' : ""}`, el);
   ];
   function swapCurrentPageWithNewHtml(html, andThen) {
     let newDocument = new DOMParser().parseFromString(html, "text/html");
+    let newHtml = newDocument.documentElement;
     let newBody = document.adoptNode(newDocument.body);
     let newHead = document.adoptNode(newDocument.head);
     oldBodyScriptTagHashes = oldBodyScriptTagHashes.concat(Array.from(document.body.querySelectorAll("script")).map((i) => {
       return simpleHash(ignoreAttributes(i.outerHTML, attributesExemptFromScriptTagHashing));
     }));
     let afterRemoteScriptsHaveLoaded = () => {
     };
+    replaceHtmlAttributes(newHtml);
     mergeNewHead(newHead).finally(() => {
       afterRemoteScriptsHaveLoaded();
     });
@@ -7741,6 +7743,21 @@ ${expression ? 'Expression: "' + expression + '"\n\n' : ""}`, el);
       i.replaceWith(cloneScriptTag(i));
     });
   }
+  function replaceHtmlAttributes(newHtmlElement) {
+    let currentHtmlElement = document.documentElement;
+    Array.from(newHtmlElement.attributes).forEach((attr) => {
+      const name = attr.name;
+      const value = attr.value;
+      if (currentHtmlElement.getAttribute(name) !== value) {
+        currentHtmlElement.setAttribute(name, value);
+      }
+    });
+    Array.from(currentHtmlElement.attributes).forEach((attr) => {
+      if (!newHtmlElement.hasAttribute(attr.name)) {
+        currentHtmlElement.removeAttribute(attr.name);
+      }
+    });
+  }
   function mergeNewHead(newHead) {
     let children = Array.from(document.head.children);
     let headChildrenHtmlLookup = children.map((i) => i.outerHTML);

dist/manifest.json

@@ -1,2 +1,2 @@
 
-{"/livewire.js":"b963ec8d"}
+{"/livewire.js":"13b7c601"}

js/plugins/navigate/page.js

@@ -7,6 +7,7 @@ let attributesExemptFromScriptTagHashing = [
 
 export function swapCurrentPageWithNewHtml(html, andThen) {
     let newDocument = (new DOMParser()).parseFromString(html, "text/html")
+    let newHtml = newDocument.documentElement
     let newBody = document.adoptNode(newDocument.body)
     let newHead = document.adoptNode(newDocument.head)
 
@@ -16,6 +17,8 @@ export function swapCurrentPageWithNewHtml(html, andThen) {
 
     let afterRemoteScriptsHaveLoaded = () => {}
 
+    replaceHtmlAttributes(newHtml)
+
     mergeNewHead(newHead).finally(() => {
         afterRemoteScriptsHaveLoaded()
     })
@@ -50,6 +53,28 @@ function prepNewBodyScriptTagsToRun(newBody, oldBodyScriptTagHashes) {
     })
 }
 
+function replaceHtmlAttributes(newHtmlElement) {
+    let currentHtmlElement = document.documentElement
+
+    // Process attributes that are in the new element...
+    Array.from(newHtmlElement.attributes).forEach(attr => {
+        const name = attr.name
+        const value = attr.value
+
+        if (currentHtmlElement.getAttribute(name) !== value) {
+            // Add or update attribute if the value differs...
+            currentHtmlElement.setAttribute(name, value)
+        }
+    })
+
+    // Remove remaining attributes that are not in the new element...
+    Array.from(currentHtmlElement.attributes).forEach(attr => {
+        if (!newHtmlElement.hasAttribute(attr.name)) {
+            currentHtmlElement.removeAttribute(attr.name)
+        }
+    })
+}
+
 function mergeNewHead(newHead) {
     let children = Array.from(document.head.children)
     let headChildrenHtmlLookup = children.map(i => i.outerHTML)

src/Features/SupportNavigate/BrowserTest.php

@@ -26,6 +26,8 @@ public static function tweakApplicationHook()
             Livewire::component('first-page-with-link-outside', FirstPageWithLinkOutside::class);
             Livewire::component('second-page', SecondPage::class);
             Livewire::component('third-page', ThirdPage::class);
+            Livewire::component('first-html-attribute-page', FirstHtmlAttributesPage::class);
+            Livewire::component('second-html-attribute-page', SecondHtmlAttributesPage::class);
             Livewire::component('first-asset-page', FirstAssetPage::class);
             Livewire::component('second-asset-page', SecondAssetPage::class);
             Livewire::component('third-asset-page', ThirdAssetPage::class);
@@ -57,6 +59,8 @@ public static function tweakApplicationHook()
             Route::get('/second', SecondPage::class)->middleware('web');
             Route::get('/third', ThirdPage::class)->middleware('web');
             Route::get('/fourth', FourthPage::class)->middleware('web');
+            Route::get('/first-html-attributes', FirstHtmlAttributesPage::class)->middleware('web');
+            Route::get('/second-html-attributes', SecondHtmlAttributesPage::class)->middleware('web');
             Route::get('/first-asset', FirstAssetPage::class)->middleware('web');
             Route::get('/second-asset', SecondAssetPage::class)->middleware('web');
             Route::get('/third-asset', ThirdAssetPage::class)->middleware('web');
@@ -392,6 +396,25 @@ public function test_can_persist_elements_across_pages()
         });
     }
 
+    public function test_html_element_attributes_are_replaced_on_navigate()
+    {
+        $this->browse(function ($browser) {
+            $browser
+                ->visit('/first-html-attributes')
+                ->assertSee('On first html attributes page')
+                // ->assertAttribute() won't work as it's scoped to the body...
+                ->assertScript('document.documentElement.getAttribute("class")', 'class1')
+                ->assertScript('document.documentElement.getAttribute("attr1")', 'value1')
+                ->assertScript('document.documentElement.hasAttribute("attr2")', false)
+                ->click('@link.to.second')
+                ->waitForText('On second html attributes page')
+                ->assertScript('document.documentElement.getAttribute("class")', 'class2')
+                ->assertScript('document.documentElement.getAttribute("attr2")', 'value2')
+                ->assertScript('document.documentElement.hasAttribute("attr1")', false)
+                ;
+        });
+    }
+
     public function test_new_assets_in_head_are_loaded_and_old_ones_are_not()
     {
         $this->browse(function ($browser) {
@@ -1177,6 +1200,24 @@ public function render()
     }
 }
 
+class FirstHtmlAttributesPage extends Component
+{
+    #[\Livewire\Attributes\Layout('test-views::html-attributes1')]
+    public function render()
+    {
+        return '<div>On first html attributes page <a href="/second-html-attributes" wire:navigate dusk="link.to.second">Go to second page</a></div>';
+    }
+}
+
+class SecondHtmlAttributesPage extends Component
+{
+    #[\Livewire\Attributes\Layout('test-views::html-attributes2')]
+    public function render()
+    {
+        return '<div>On second html attributes page</div>';
+    }
+}
+
 class FirstAssetPage extends Component
 {
     #[\Livewire\Attributes\Layout('test-views::layout')]

src/Features/SupportNavigate/test-views/html-attributes1.blade.php

@@ -0,0 +1,13 @@
+<html class="class1" attr1="value1" dusk="html">
+<head>
+    <meta name="csrf-token" content="{{ csrf_token() }}">
+    <script src="/test-navigate-asset.js?v=123"></script>
+</head>
+<body>
+    {{ $slot }}
+
+    @stack('scripts')
+</body>
+</html>
+
+

src/Features/SupportNavigate/test-views/html-attributes2.blade.php

@@ -0,0 +1,13 @@
+<html class="class2" attr2="value2" dusk="html">
+<head>
+    <meta name="csrf-token" content="{{ csrf_token() }}">
+    <script src="/test-navigate-asset.js?v=123"></script>
+</head>
+<body>
+    {{ $slot }}
+
+    @stack('scripts')
+</body>
+</html>
+
+