4. renders self close components with one prop

1 day ago · 538c9d32ae
parent bc86e7a298
commit 538c9d32ae
4 changed files with 35 additions and 2 deletions
--- a/flight/template/View.php
+++ b/flight/template/View.php
@ -157,11 +157,28 @@ class View
                $view = ob_get_clean();
        }

-        preg_match('/<f-(?<component>[a-z-]+)\s*\/>/', $view, $matches);
+        preg_match(
+            '/<f-(?<component>[a-z-]+)\s*(?<props>[a-z]+="[a-z-A-Z]+")*\s*\/>/',
+            $view,
+            $matches,
+        );

        if ($matches) {
            $tag = $matches[0];
-            $component = $this->fetch("components/{$matches['component']}");
+            $component = $matches['component'];
+            $props = $matches['props'] ?? '';
+
+            preg_match(
+                '/^(?<name>[a-z]+)="(?<value>[a-zA-Z]+)"$/',
+                $props,
+                $matches,
+            );
+
+            $props = $matches
+                ? [$matches['name'] => $matches['value']]
+                : [];
+
+            $component = $this->fetch("components/$component", $props);
            $view = str_replace($tag, $component, $view);
        }

--- a/tests/ViewTest.php
+++ b/tests/ViewTest.php
@ -320,6 +320,16 @@ class ViewTest extends TestCase
                another-class-component extended by my-class-component-that-extends-another-class-component
                html,
            ],
+            [
+                'page-with-component-with-one-prop',
+                <<<'html'
+                <html>
+                    <body>
+                        <h1>Hello, James</h1>
+                    </body>
+                </html>
+                html,
+            ],
        ];
    }

--- a/tests/views/components/greeting.php
+++ b/tests/views/components/greeting.php
@ -0,0 +1 @@
+<h1>Hello, <?= $name ?></h1>
--- a/tests/views/pages/page-with-component-with-one-prop.php
+++ b/tests/views/pages/page-with-component-with-one-prop.php
@ -0,0 +1,5 @@
+<html>
+    <body>
+        <f-greeting name="James" />
+    </body>
+</html>