Convert partial templates to anonymous Twig components

package.json

@@ -1,6 +1,7 @@
 {
     "devDependencies": {
         "@babel/core": "^7.20.5",
+        "@babel/plugin-proposal-class-properties": "^7.18.6",
         "@babel/preset-env": "^7.16.0",
         "@fortawesome/fontawesome-free": "^5.8.1",
         "@hotwired/stimulus": "^3.0.0",
@@ -36,5 +37,5 @@
         "dev": "encore dev",
         "watch": "encore dev --watch",
         "build": "encore production --progress"
-  }
+    }
 }

public/build/41.e694ef2e.js.LICENSE.txt

@@ -0,0 +1,10 @@
+/*!
+ * jQuery JavaScript Library v3.7.1
+ * https://jquery.com/
+ *
+ * Copyright OpenJS Foundation and other contributors
+ * Released under the MIT license
+ * https://jquery.org/license
+ *
+ * Date: 2023-08-28T13:37Z
+ */

public/build/entrypoints.json

@@ -2,9 +2,9 @@
   "entrypoints": {
     "app": {
       "js": [
-        "/build/runtime.5feae901.js",
-        "/build/41.64983f8e.js",
-        "/build/639.295ae6c2.js",
+        "/build/runtime.602271ae.js",
+        "/build/41.e694ef2e.js",
+        "/build/639.5b08c4e9.js",
         "/build/app.22ced1a0.js"
       ],
       "css": [
@@ -14,9 +14,9 @@
     },
     "admin": {
       "js": [
-        "/build/runtime.5feae901.js",
-        "/build/41.64983f8e.js",
-        "/build/384.af623ff4.js",
+        "/build/runtime.602271ae.js",
+        "/build/41.e694ef2e.js",
+        "/build/384.dcf0f5e0.js",
         "/build/admin.747eb0c9.js"
       ],
       "css": [
@@ -25,13 +25,13 @@
     }
   },
   "integrity": {
-    "/build/runtime.5feae901.js": "sha384-Dj9HEwBUNZIrIUOJJ4vOrf8e+X7fhJTYGYb0F/RJLrIo5qMTyh/mBApfQI4FmH8F",
-    "/build/41.64983f8e.js": "sha384-XfOM8D6kvkEmauUMaczMxByKTBpbb9/aDqt1hPMgWDJh1X2ZQu5rIyRn3Ipx+rmn",
-    "/build/639.295ae6c2.js": "sha384-4mr0Q0pZGcH1xnbq69bTTnnhMQCEAynmxjF0PPEnDngNgQKjPMqqCO2kx7UDIr68",
+    "/build/runtime.602271ae.js": "sha384-dF31xil8Pd5Q10+H/cMyh0/lXiOpqj9nWyybiEiqLT3R/6EdgarBGBunHt0/JE5k",
+    "/build/41.e694ef2e.js": "sha384-QxxMokSpl/N5tbqMrdkETeGJgKlXUZlJTEWSm488N3OiEWrKSuQFblZovoC9kZFj",
+    "/build/639.5b08c4e9.js": "sha384-UITCwTwuCxIV1OWEEPmuXjMDSvpm5YiFsWlxeH+pyRiphuTVJ1HeHivjRdnRbzEv",
     "/build/app.22ced1a0.js": "sha384-zlbbpBjMsOQhWbu/y6oSuNjxPtxnQTuH2HP44M2WzqBeAGK7CZadXYlhsXsg3iD8",
     "/build/639.76194c5a.css": "sha384-PoA8WLGz/za3OOW7qjoDiv5f8mBVtREO35Z70PFH8PVIdu1+nWVUEetA6Q1o6DhV",
     "/build/app.3a149582.css": "sha384-nfrD0DNMpZazGQQAucFPYcE1VsR4Gg5Wut28sAVfEpTl6T5xVyF5D0qoc7GtumrW",
-    "/build/384.af623ff4.js": "sha384-DTkf7hVvZ08YUepoH5wzP+thJm6maRzLe8KxUgIc2OajdJkoSDct0pJMEPYcEEeF",
+    "/build/384.dcf0f5e0.js": "sha384-CS4QFyhrteT/K3nsT+8+tKJC/bJMP0gUpzDsZscnhLoLgwwjMbwNbOctBcd8v4N8",
     "/build/admin.747eb0c9.js": "sha384-vDe3FhM5HnWbM4nEdbmSv8AB5n/PfPJv0y0Goloka7w6jppc6di5LpKD1A252aFg",
     "/build/admin.2b1a6c83.css": "sha384-ikQwASTRPK0sjWtW//EXsUjqkjNxc2Yndtt0m5a/I/qE+qEoikXP5ailZKDaqtN9"
   }

public/build/manifest.json

@@ -3,13 +3,13 @@
   "build/app.js": "/build/app.22ced1a0.js",
   "build/admin.css": "/build/admin.2b1a6c83.css",
   "build/admin.js": "/build/admin.747eb0c9.js",
-  "build/runtime.js": "/build/runtime.5feae901.js",
+  "build/runtime.js": "/build/runtime.602271ae.js",
   "build/206.b003fa5f.js": "/build/206.b003fa5f.js",
-  "build/41.64983f8e.js": "/build/41.64983f8e.js",
+  "build/41.e694ef2e.js": "/build/41.e694ef2e.js",
   "build/639.76194c5a.css": "/build/639.76194c5a.css",
-  "build/639.295ae6c2.js": "/build/639.295ae6c2.js",
-  "build/630.ed629036.js": "/build/630.ed629036.js",
-  "build/384.af623ff4.js": "/build/384.af623ff4.js",
+  "build/639.5b08c4e9.js": "/build/639.5b08c4e9.js",
+  "build/630.baecfc2c.js": "/build/630.baecfc2c.js",
+  "build/384.dcf0f5e0.js": "/build/384.dcf0f5e0.js",
   "build/images/fa-solid-900.svg": "/build/images/fa-solid-900.7a8b4f13.svg",
   "build/images/fa-brands-400.svg": "/build/images/fa-brands-400.2f517e09.svg",
   "build/fonts/lato-normal-italic.woff": "/build/fonts/lato-normal-italic.62a9c838.woff",

templates/admin/blog/edit.html.twig

@@ -5,11 +5,7 @@
 {% block main %}
     <h1>{{ 'title.edit_post'|trans({'id': post.id}) }}</h1>
 
-    {{ include('admin/blog/_form.html.twig', {
-        form: form,
-        button_label: 'action.save'|trans,
-        include_back_to_home_link: true,
-    }, with_context = false) }}
+    <twig:admin:blog:form :form="form" button_label="{{ 'action.save'|trans }}" include_back_to_home_link="false" />
 {% endblock %}
 
 {% block sidebar %}
@@ -20,7 +16,7 @@
     </div>
 
     <div class="section actions">
-        {{ include('admin/blog/_delete_form.html.twig', {post: post}, with_context = false) }}
+        <twig:admin:blog:delete_form :post="post"/>
     </div>
 
     {{ parent() }}

templates/admin/blog/show.html.twig

@@ -16,7 +16,7 @@
 
     {{ post.content|markdown_to_html|sanitize_html }}
 
-    {{ include('blog/_post_tags.html.twig') }}
+    <twig:blog:post_tags :tags="post.tags"/>
 {% endblock %}
 
 {% block sidebar %}
@@ -27,7 +27,7 @@
     </div>
 
     <div class="section">
-        {{ include('admin/blog/_delete_form.html.twig', {post: post}, with_context = false) }}
+        <twig:admin:blog:delete_form :post="post"/>
     </div>
 
     {{ parent() }}

templates/base.html.twig

@@ -36,7 +36,7 @@
                             Symfony Demo
                         </a>
                         <button class="navbar-toggler collapsed" type="button" data-toggle="collapse" data-target="#appNavbar" aria-controls="appNavbar" aria-expanded="false" aria-label="Toggle navigation">
-                        <span class="navbar-toggler-icon"></span>
+                            <span class="navbar-toggler-icon"></span>
                         </button>
 
                         <div class="navbar-collapse collapse" id="appNavbar">
@@ -128,7 +128,7 @@
             {% block body %}
                 <div class="row">
                     <div id="main" class="col-sm-9">
-                        {{ include('default/_flash_messages.html.twig') }}
+                        <twig:flash_messages />
 
                         {% block main %}{% endblock %}
                     </div>

templates/blog/_comment_form.html.twig

@@ -1,40 +1 @@
-{#
-    By default, forms enable client-side validation. This means that you can't
-    test the server-side validation errors from the browser. To temporarily
-    disable this validation, add the 'novalidate' attribute:
-
-    {{ form_start(form, {method: ..., action: ..., attr: {novalidate: 'novalidate'}}) }}
-#}
-
-{{ form_start(form, {method: 'POST', action: path('comment_new', {'postSlug': post.slug})}) }}
-    {#  instead of displaying form fields one by one, you can also display them
-        all with their default options and styles just by calling to this function:
-
-        {{ form_widget(form) }}
-    #}
-
-    <fieldset>
-        <legend>
-            <i class="fa fa-comment" aria-hidden="true"></i> {{ 'title.add_comment'|trans }}
-        </legend>
-
-        {# Render any global form error (e.g. when a constraint on a public getter method failed) #}
-        {{ form_errors(form) }}
-
-        <div class="form-group {% if not form.content.vars.valid %}has-error{% endif %}">
-            {{ form_label(form.content, 'label.content', {label_attr: {class: 'sr-only'}}) }}
-
-            {# Render any errors for the "content" field (e.g. when a class property constraint failed) #}
-            {{ form_errors(form.content) }}
-
-            {{ form_widget(form.content, {attr: {rows: 10}}) }}
-            {{ form_help(form.content) }}
-        </div>
-
-        <div class="form-group">
-            <button class="btn btn-primary float-right" type="submit">
-                <i class="fa fa-paper-plane" aria-hidden="true"></i> {{ 'action.publish_comment'|trans }}
-            </button>
-        </div>
-    </fieldset>
-{{ form_end(form) }}
+<twig:blog:comment_form :form="form" :post="post" />

templates/blog/comment_form_error.html.twig

@@ -6,6 +6,6 @@
     <h1 class="text-danger">{{ 'title.comment_error'|trans }}</h1>
 
     <div class="jumbotron">
-        {{ include('blog/_comment_form.html.twig') }}
+        <twig:blog:comment_form :form="form" :post="post"/>
     </div>
 {% endblock %}

templates/blog/index.html.twig

@@ -4,7 +4,7 @@
 
 {% block main %}
     {% for post in paginator.results %}
-        <twig:post :post="post"/>
+        <twig:blog:post :post="post"/>
     {% else %}
         <div class="jumbotron">{{ 'post.no_posts_found'|trans }}</div>
     {% endfor %}
@@ -55,5 +55,5 @@
     {{ parent() }}
 
     {{ show_source_code(_self) }}
-    {{ include('blog/_rss.html.twig') }}
+    <twig:blog:rss />
 {% endblock %}

templates/blog/post_show.html.twig

@@ -12,7 +12,7 @@
 
     {{ post.content|markdown_to_html|sanitize_html }}
 
-    {{ include('blog/_post_tags.html.twig') }}
+    <twig:blog:post_tags :tags="post.tags" />
 
     <div id="post-add-comment" class="jumbotron">
         {# The 'IS_AUTHENTICATED_FULLY' role ensures that the user has entered
@@ -39,7 +39,7 @@
 
     {% for comment in post.comments %}
         <div class="row post-comment">
-            <a name="comment_{{ comment.id }}"></a>
+            <a id="comment_{{ comment.id }}"></a>
             <h4 class="col-sm-3">
                 <strong>{{ comment.author.fullName }}</strong> {{ 'post.commented_on'|trans }}
                 {# it's not mandatory to set the timezone in localizeddate(). This is done to
@@ -73,5 +73,5 @@
     {{ parent() }}
 
     {{ show_source_code(_self) }}
-    {{ include('blog/_rss.html.twig') }}
+    <twig:blog:rss />
 {% endblock %}

templates/admin/blog/_delete_form.html.twig → templates/components/admin/blog/delete_form.html.twig

@@ -1,4 +1,6 @@
-{{ include('blog/_delete_post_confirmation.html.twig') }}
+{% props post %}
+
+<twig:modal:delete_post_confirmation/>
 <form action="{{ url('admin_post_delete', {id: post.id}) }}" method="post" data-confirmation="true" id="delete-form">
     <input type="hidden" name="token" value="{{ csrf_token('delete') }}" />
     <button type="submit" class="btn btn-lg btn-block btn-danger">

templates/admin/blog/_form.html.twig → templates/components/admin/blog/form.html.twig

@@ -1,24 +1,31 @@
 {#
-    By default, forms enable client-side validation. This means that you can't
-    test the server-side validation errors from the browser. To temporarily
-    disable this validation, add the 'novalidate' attribute:
+By default, forms enable client-side validation. This means that you can't
+test the server-side validation errors from the browser. To temporarily
+disable this validation, add the 'novalidate' attribute:
 
-    {{ form_start(form, {attr: {novalidate: 'novalidate'}}) }}
+{{ form_start(form, {attr: {novalidate: 'novalidate'}}) }}
 #}
 
-{% if show_confirmation|default(false) %}
+{% props
+    form,
+    show_confirmation = false,
+    button_label = 'label.create_post'|trans,
+    include_back_to_home_link = false
+%}
+
+{% if show_confirmation %}
     {% set attr = {'data-confirmation': 'true'} %}
-    {{ include('blog/_delete_post_confirmation.html.twig') }}
+    <twig:modal:delete_post_confirmation/>
 {% endif %}
 
 {{ form_start(form, {attr: attr|default({})}) }}
     {{ form_widget(form) }}
 
     <button type="submit" class="{{ button_css|default("btn btn-primary") }}">
-        <i class="fa fa-save" aria-hidden="true"></i> {{ button_label|default('label.create_post'|trans) }}
+        <i class="fa fa-save" aria-hidden="true"></i> {{ button_label }}
     </button>
 
-    {% if include_back_to_home_link|default(false) %}
+    {% if include_back_to_home_link %}
         <a href="{{ path('admin_post_index') }}" class="btn btn-link">
             <i class="fa fa-list-alt" aria-hidden="true"></i> {{ 'action.back_to_list'|trans }}
         </a>

templates/components/blog/comment_form.html.twig

@@ -0,0 +1,42 @@
+{#
+    By default, forms enable client-side validation. This means that you can't
+    test the server-side validation errors from the browser. To temporarily
+    disable this validation, add the 'novalidate' attribute:
+
+    {{ form_start(form, {method: ..., action: ..., attr: {novalidate: 'novalidate'}}) }}
+#}
+
+{% props form, post %}
+
+{{ form_start(form, {method: 'POST', action: path('comment_new', {'postSlug': post.slug})}) }}
+    {#  instead of displaying form fields one by one, you can also display them
+        all with their default options and styles just by calling to this function:
+
+        {{ form_widget(form) }}
+    #}
+
+    <fieldset>
+        <legend>
+            <i class="fa fa-comment" aria-hidden="true"></i> {{ 'title.add_comment'|trans }}
+        </legend>
+
+        {# Render any global form error (e.g. when a constraint on a public getter method failed) #}
+        {{ form_errors(form) }}
+
+        <div class="form-group {% if not form.content.vars.valid %}has-error{% endif %}">
+            {{ form_label(form.content, 'label.content', {label_attr: {class: 'sr-only'}}) }}
+
+            {# Render any errors for the "content" field (e.g. when a class property constraint failed) #}
+            {{ form_errors(form.content) }}
+
+            {{ form_widget(form.content, {attr: {rows: 10}}) }}
+            {{ form_help(form.content) }}
+        </div>
+
+        <div class="form-group">
+            <button class="btn btn-primary float-right" type="submit">
+                <i class="fa fa-paper-plane" aria-hidden="true"></i> {{ 'action.publish_comment'|trans }}
+            </button>
+        </div>
+    </fieldset>
+{{ form_end(form) }}