minor #1164 [Site] Use <twig: HTML syntax in demos (smnandre)

This PR was squashed before being merged into the 2.x branch.

Discussion
----------

[Site] Use <twig: HTML syntax in demos

* Replace remaining `{{ component(... }}` with `<twig:.. />`
* Fix a route in product demo

Commits
-------

12563dd [Site] Use <twig: HTML syntax in demos

Author: weaverryan

ux.symfony.com/src/Twig/NewProductForm.php

@@ -73,6 +73,6 @@ public function saveProduct(EntityManagerInterface $entityManager): Response
 
         $this->addFlash('live_demo_success', 'Product created! Add another one!');
 
-        return $this->redirectToRoute('app_live_components_product_form');
+        return $this->redirectToRoute('app_demo_live_component_product_form');
     }
 }

ux.symfony.com/templates/components/InvoiceCreator.html.twig

@@ -44,12 +44,12 @@
                     </thead>
                     <tbody>
                         {% for key, line in lineItems %}
-                            {{ component('InvoiceCreatorLineItem', {
-                                key: key,
-                                productId: line.productId,
-                                quantity: line.quantity,
-                                isEditing: line.isEditing,
-                            }) }}
+                            <twig:InvoiceCreatorLineItem
+                                key="{{ key }}"
+                                productId="{{ line.productId }}"
+                                quantity="{{ line.quantity }}"
+                                isEditing="{{ line.isEditing }}"
+                            />
                         {% endfor %}
                     </tbody>
                 </table>

ux.symfony.com/templates/components/NewProductForm.html.twig

@@ -85,7 +85,7 @@
             <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
         {% endblock %}
         {% block modal_body %}
-            {{ component('NewCategoryForm') }}
+            <twig:NewCategoryForm />
         {% endblock %}
     {% endcomponent %}
 </div>

ux.symfony.com/templates/demos/live_component/auto_validating_form.html.twig

@@ -9,5 +9,5 @@
 {% endblock %}
 
 {% block demo_content %}
-    {{ component('RegistrationForm') }}
+    <twig:RegistrationForm />
 {% endblock %}

ux.symfony.com/templates/demos/live_component/chartjs.html.twig

@@ -9,5 +9,5 @@
 {% endblock %}
 
 {% block demo_content %}
-    {{ component('DinoChart') }}
+    <twig:DinoChart />
 {% endblock %}

ux.symfony.com/templates/demos/live_component/dependent_form_fields.html.twig

@@ -9,5 +9,5 @@
 {% endblock %}
 
 {% block demo_content %}
-    {{ component('MealPlanner') }}
+    <twig:MealPlanner />
 {% endblock %}

ux.symfony.com/templates/demos/live_component/form_collection_type.html.twig

@@ -9,9 +9,6 @@
 {% endblock %}
 
 {% block demo_content %}
-    {{ component('TodoListForm', {
-        form: form,
-        todoList: todoList
-    }) }}
+    <twig:TodoListForm :form="form" :todoList="todoList" />
 {% endblock %}
 

ux.symfony.com/templates/demos/live_component/inline_edit.html.twig

@@ -9,7 +9,5 @@
 {% endblock %}
 
 {% block demo_content %}
-    {{ component('InlineEditFood', {
-        food: food
-    }) }}
+    <twig:InlineEditFood :food="food" />
 {% endblock %}

ux.symfony.com/templates/demos/live_component/invoice.html.twig

@@ -55,9 +55,7 @@ we emit the event directly.
 {% block demo_content %}
     <div class="row">
         <div class="col-8">
-            {{ component('InvoiceCreator', {
-                invoice: invoice
-            }) }}
+            <twig:InvoiceCreator :invoice="invoice"/>
         </div>
     </div>
     <div class="mt-3">

ux.symfony.com/templates/demos/live_component/product_form.html.twig

@@ -1,7 +1,7 @@
 {% extends 'liveDemoBase.html.twig' %}
 
 {% block demo_content %}
-    {{ component('NewProductForm') }}
+    <twig:NewProductForm />
 {% endblock %}
 
 {% block code_block_full %}