fix(view): improved attribute precedence (#1168)

Author: brendt

src/Tempest/View/src/Elements/IsElement.php

@@ -34,21 +34,17 @@ public function getAttributes(): array
 
         $attributes = [...$this->attributes, ...$wrappingAttributes];
 
-        // Some attributes should always come after others,
-        // so that these expressions have access to the data attributes
-        $attributePrecedence = [
-            ':foreach' => 1,
-            ':if' => 2,
-        ];
+        $tailingAttributes = [];
 
-        uksort($attributes, function (string $a, string $b) use ($attributePrecedence) {
-            $precedenceA = $attributePrecedence[$a] ?? 0;
-            $precedenceB = $attributePrecedence[$b] ?? 0;
-
-            return $precedenceA <=> $precedenceB;
-        });
+        foreach ($attributes as $name => $value) {
+            if ($name === ':foreach' || $name === ':if') {
+                unset($attributes[$name]);
+                $tailingAttributes[$name] = $value;
+            }
+        }
 
-        return $attributes;
+        // Tailing attributes are reversed because they need to be applied in reverse order
+        return [...$attributes, ...array_reverse($tailingAttributes)];
     }
 
     public function hasAttribute(string $name): bool

tests/Integration/View/TempestViewRendererCombinedExpressionsTest.php

@@ -76,7 +76,7 @@ public function test_foreach_with_if_and_else_expression(): void
     public function test_foreach_with_if_and_forelse_expression(): void
     {
         $view = <<<'HTML'
-        <div :foreach="$items as $item" :if="$label ?? null">
+        <div :if="$label ?? null" :foreach="$items as $item">
             {{ $label }} {{ $item }}
         </div>
         <span :forelse>

tests/Integration/View/TempestViewRendererTest.php

@@ -604,6 +604,105 @@ public function test_loop_variable_can_be_used_within_the_looped_tag(): void
         HTML, $html);
     }
 
+    public function test_if_and_foreach_precedence(): void
+    {
+        $html = $this->render(
+            <<<'HTML'
+            <div :foreach="$items as $item" :if="$item->show">{{ $item->name }}</div>    
+            HTML,
+            items: [
+                (object) ['name' => 'A', 'show' => true],
+                (object) ['name' => 'B', 'show' => false],
+                (object) ['name' => 'C', 'show' => true],
+            ],
+        );
+
+        $this->assertSnippetsMatch('<div>A</div><div>C</div>', $html);
+
+        $html = $this->render(
+            <<<'HTML'
+            <div :foreach="$items as $item" :if="$show">{{ $item->name }}</div>    
+            HTML,
+            show: true,
+            items: [
+                (object) ['name' => 'A', 'show' => true],
+                (object) ['name' => 'B', 'show' => false],
+                (object) ['name' => 'C', 'show' => true],
+            ],
+        );
+
+        $this->assertSnippetsMatch('<div>A</div><div>B</div><div>C</div>', $html);
+
+        $html = $this->render(
+            <<<'HTML'
+            <div :if="$show" :foreach="$items as $item">{{ $item->name }}</div>    
+            HTML,
+            show: true,
+            items: [
+                (object) ['name' => 'A', 'show' => true],
+                (object) ['name' => 'B', 'show' => false],
+                (object) ['name' => 'C', 'show' => true],
+            ],
+        );
+
+        $this->assertSnippetsMatch('<div>A</div><div>B</div><div>C</div>', $html);
+
+        $html = $this->render(
+            <<<'HTML'
+            <div :foreach="$items as $item" :if="$show">{{ $item->name }}</div>    
+            HTML,
+            show: false,
+            items: [
+                (object) ['name' => 'A', 'show' => true],
+                (object) ['name' => 'B', 'show' => false],
+                (object) ['name' => 'C', 'show' => true],
+            ],
+        );
+
+        $this->assertSnippetsMatch('', $html);
+
+        $html = $this->render(
+            <<<'HTML'
+            <div :if="$show" :foreach="$items as $item">{{ $item->name }}</div>    
+            HTML,
+            show: false,
+            items: [
+                (object) ['name' => 'A', 'show' => true],
+                (object) ['name' => 'B', 'show' => false],
+                (object) ['name' => 'C', 'show' => true],
+            ],
+        );
+
+        $this->assertSnippetsMatch('', $html);
+
+        $html = $this->render(
+            <<<'HTML'
+            <div :if="$item->show" :foreach="$items as $item">{{ $item->name }}</div>    
+            HTML,
+            item: (object) ['show' => true],
+            items: [
+                (object) ['name' => 'A', 'show' => true],
+                (object) ['name' => 'B', 'show' => false],
+                (object) ['name' => 'C', 'show' => true],
+            ],
+        );
+
+        $this->assertSnippetsMatch('<div>A</div><div>B</div><div>C</div>', $html);
+
+        $html = $this->render(
+            <<<'HTML'
+            <div :if="$item->show ?? null" :foreach="$items as $item">{{ $item->name }}</div>    
+            HTML,
+            items: [
+                (object) ['name' => 'A', 'show' => true],
+                (object) ['name' => 'B', 'show' => false],
+                (object) ['name' => 'C', 'show' => true],
+            ],
+        );
+
+        $this->assertSnippetsMatch('', $html);
+    }
+
     private function assertSnippetsMatch(string $expected, string $actual): void
     {
         $expected = str_replace([PHP_EOL, ' '], '', $expected);