[TwigComponent] make public component properties available directly

Author: kbond

src/TwigComponent/CHANGELOG.md

@@ -1,5 +1,9 @@
 # CHANGELOG
 
+# 2.1
+
+-   Make public component properties available directly in the template (`{{ prop }}` vs `{{ this.prop }}`).
+
 ## 2.0.0
 
 -   Support for `stimulus` version 2 was removed and support for `@hotwired/stimulus`

src/TwigComponent/README.md

@@ -27,8 +27,8 @@ And (2) a corresponding template:
 
 ```twig
 {# templates/components/alert.html.twig #}
-<div class="alert alert-{{ this.type }}">
-    {{ this.message }}
+<div class="alert alert-{{ type }}">
+    {{ message }}
 </div>
 ```
 
@@ -128,11 +128,12 @@ class AlertComponent
 ```
 
 In the template, the `AlertComponent` instance is available via
-the `this` variable. Use it to render the two new properties:
+the `this` variable and public properties are available directly.
+Use them to render the two new properties:
 
 ```twig
-<div class="alert alert-{{ this.type }}">
-    {{ this.message }}
+<div class="alert alert-{{ type }}">
+    {{ message }}
 </div>
 ```
 

src/TwigComponent/src/ComponentRenderer.php

@@ -30,6 +30,6 @@ public function __construct(Environment $twig)
     public function render(object $component, string $template): string
     {
         // TODO: Self-Rendering components?
-        return $this->twig->render($template, ['this' => $component]);
+        return $this->twig->render($template, array_merge(['this' => $component], get_object_vars($component)));
     }
 }

src/TwigComponent/tests/Fixture/templates/components/component_a.html.twig

@@ -1,3 +1,3 @@
-propA: {{ this.propA }}
+propA: {{ propA }}
 propB: {{ this.propB }}
 service: {{ this.service.value }}

src/TwigComponent/tests/Fixture/templates/components/custom1.html.twig

@@ -1,2 +1,2 @@
 Custom template 1
-b value: {{ this.value }}
+b value: {{ value }}