improve handling of self closing and non self closing tags side by side

LordSimal · Aug 13, 2024 · 5c4fb2c · 5c4fb2c
1 parent 905d477
commit 5c4fb2c
Show file tree

Hide file tree

Showing 4 changed files with 49 additions and 14 deletions.
diff --git a/src/TagEngine.php b/src/TagEngine.php
@@ -26,7 +26,7 @@ class TagEngine
      *
      * @var string
      */
-    protected string $regex = '/<%s-([\w-]+)\s*([^>]*)>(.*?)<\/%s-\1>|<%s-([\w-]+)\s*([^>]*)\/>/s';
+    protected string $regex = '/<%s-([\w-]+)\s*([^>]*)\/\s*>|<%s-([\w-]+)\s*([^>]*)>(.*?)<\/%s-\3>/s';
 
     /**
      * Holds the data array which is passed to the custom tags
@@ -103,9 +103,9 @@ public function parse(mixed $source = false, array $data = []): string
      */
     protected function replaceComponent(array $matches): string
     {
-        $componentName = $matches[1] ?: $matches[4]; // Tag name for both self-closing and normal tags
-        $attributesString = $matches[2] ?: $matches[5] ?? ''; // Attributes for both self-closing and normal tags
-        $content = $matches[3] ?? ''; // Inner content
+        $componentName = $matches[1] ?: $matches[3]; // Tag name for both self-closing and normal tags
+        $attributesString = $matches[2] ?: $matches[4] ?? ''; // Attributes for both self-closing and normal tags
+        $content = $matches[5] ?? ''; // Inner content
 
         $attributes = $this->parseAttributes($attributesString);
 

diff --git a/tests/TagEngine/CacheTest.php b/tests/TagEngine/CacheTest.php
@@ -63,7 +63,8 @@ public function testCacheWillBeFilledAndRead(): void
 			<iframe width="560" height="315" 
 				src="https://www.youtube.com/embed/RLdsCL4RDf8" 
 				allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" 
-				allowfullscreen
+				allowfullscreen>
+				
 			</iframe>
 HTML;
         $this->assertSame($expected, $result);

diff --git a/tests/TagEngine/CustomTagsTest.php b/tests/TagEngine/CustomTagsTest.php
@@ -36,7 +36,8 @@ public function testTagWithAttribute(): void
 			<iframe width="560" height="315" 
 				src="https://www.youtube.com/embed/RLdsCL4RDf8" 
 				allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" 
-				allowfullscreen
+				allowfullscreen>
+				
 			</iframe>
 HTML;
         $this->assertSame($expected, $result);
@@ -55,7 +56,8 @@ public function testTagWithLongerAttribute(): void
 			<iframe width="560" height="315" test
 				src="https://www.youtube.com/embed/RLdsCL4RDf8" 
 				allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" 
-				allowfullscreen
+				allowfullscreen>
+				
 			</iframe>
 HTML;
         $this->assertSame($expected, $result);
@@ -74,7 +76,8 @@ public function testTagWithAttributeSelfClosing(): void
 			<iframe width="560" height="315" 
 				src="https://www.youtube.com/embed/RLdsCL4RDf8" 
 				allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" 
-				allowfullscreen
+				allowfullscreen>
+				
 			</iframe>
 HTML;
         $this->assertSame($expected, $result);
@@ -93,11 +96,38 @@ public function testMultipleTagsWithAttributeSelfClosing(): void
 			<iframe width="560" height="315" 
 				src="https://www.youtube.com/embed/RLdsCL4RDf8" 
 				allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" 
-				allowfullscreen
+				allowfullscreen>
+				
 			</iframe>			<iframe width="560" height="315" 
 				src="https://www.youtube.com/embed/RLdsCL4RDf8" 
 				allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" 
-				allowfullscreen
+				allowfullscreen>
+				
+			</iframe>
+HTML;
+        $this->assertSame($expected, $result);
+    }
+
+    /**
+     * Test multiple self-closing and non-self-closing tag variants
+     *
+     * @return void
+     */
+    public function testMultipleTagsWithAttributeSelfClosingAndNonSelfClosing(): void
+    {
+        $element = '<c-youtube src="RLdsCL4RDf8" /><c-youtube src="RLdsCL4RDf8">Some Content</c-youtube>';
+        $result = $this->tagEngine->parse($element);
+        $expected = <<<HTML
+			<iframe width="560" height="315" 
+				src="https://www.youtube.com/embed/RLdsCL4RDf8" 
+				allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" 
+				allowfullscreen>
+				
+			</iframe>			<iframe width="560" height="315" 
+				src="https://www.youtube.com/embed/RLdsCL4RDf8" 
+				allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" 
+				allowfullscreen>
+				Some Content
 			</iframe>
 HTML;
         $this->assertSame($expected, $result);
@@ -199,7 +229,8 @@ public function testTagWithAttributeAndNormalHTML(): void
 			<iframe width="560" height="315" 
 				src="https://www.youtube.com/embed/RLdsCL4RDf8" 
 				allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" 
-				allowfullscreen
+				allowfullscreen>
+				
 			</iframe><div>Test</div>
 HTML;
         $this->assertSame($expected, $result);
@@ -218,7 +249,8 @@ public function testTagWithAttributeSelfClosingAndNormalHTML(): void
 			<iframe width="560" height="315" 
 				src="https://www.youtube.com/embed/RLdsCL4RDf8" 
 				allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" 
-				allowfullscreen
+				allowfullscreen>
+				
 			</iframe><div>Test</div><input type="text"/>
 HTML;
         $this->assertSame($expected, $result);
@@ -271,7 +303,8 @@ public function testWithDivWrapped(): void
             			<iframe width="560" height="315" 
 				src="https://www.youtube.com/embed/RLdsCL4RDf8" 
 				allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" 
-				allowfullscreen
+				allowfullscreen>
+				
 			</iframe>
         </div>
 HTML;

diff --git a/tests/Tags/Youtube.php b/tests/Tags/Youtube.php
@@ -19,7 +19,8 @@ public function render(): string
 			<iframe width="560" height="315" $this->data_test_something
 				src="https://www.youtube.com/embed/{$this->src}" 
 				allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" 
-				allowfullscreen
+				allowfullscreen>
+				$this->innerContent
 			</iframe>
 HTML;
     }