diff --git a/doc/index.rst b/doc/index.rst
index b110ee0..5dc1c4d 100644
--- a/doc/index.rst
+++ b/doc/index.rst
@@ -122,6 +122,15 @@ and any other components by running:
Take a moment to fist pump - then come back!
+.. tip
+
+ If you use the `Symfony MakerBundle`_, you can easily create a new component
+ with the ``make:twig-component`` command:
+
+ .. code-block:: terminal
+
+ $ php bin/console make:twig-component Alert
+
.. _naming:
Naming Your Component
@@ -297,22 +306,22 @@ prefix the attribute with ``:`` or use the normal ``{{ }}`` syntax:
// pass object, array, or anything you imagine
-Boolean props are converted using PHP's type juggling rules. The
-string ``"false"`` is converted to the boolean ``true``.
+Boolean props are converted using PHP's type juggling rules. The
+string ``"false"`` is converted to the boolean ``true``.
-To pass the boolean ``false``, you can pass a Twig expression
+To pass the boolean ``false``, you can pass a Twig expression
``{{ false }}`` or use the dynamic syntax (with the ``:`` prefix):
.. code-block:: html+twig
- {# ❌ the string 'false' is converted to the boolean 'true' #}
+ {# ❌ the string 'false' is converted to the boolean 'true' #}
{# ✅ use the 'false' boolean value #}
-
+
{# ✅ use the dynamic syntax #}
-
+
Don't forget that you can mix and match props with attributes that you
want to render on the root element:
@@ -356,6 +365,21 @@ You can even give the block default content. See
:ref:`Passing HTML to Components via Block `
for more info.
+The only limitation when defining contents inside a component using the HTML syntax
+is that you cannot import macros using the ``_self`` keyword. You must always use
+the full template path:
+
+.. code-block:: html+twig
+
+
+ {# ❌ this won't work #}
+ {% from _self import message_formatter %}
+ {# ✅ this works as expected #}
+ {% from 'some/path/template.html.twig' import message_formatter %}
+
+ {{ message_formatter('...') }}
+
+
Fetching Services
-----------------
@@ -507,14 +531,14 @@ component use a ``PreMount`` hook::
an error will be prompted, indicating that one or more options do not exist.
To avoid this, use the ``ignoreUndefined()`` method with ``true``.
See `ignore not defined options`_ for more info::
-
+
$resolver->setIgnoreUndefined(true);
-
+
The major drawback of this configuration is that the OptionsResolver will
remove every non-defined option when resolving data. To maintain props that
have not been defined within the OptionsResolver, combine the data from the
hook with the resolved data::
-
+
return $resolver->resolve($data) + $data;
The data returned from ``preMount()`` will be used as the props for mounting.
@@ -691,7 +715,7 @@ You can also add more, named blocks:
Render these in the normal way.
-
+
.. code-block:: html+twig
@@ -1771,3 +1795,4 @@ https://symfony.com/doc/current/contributing/code/bc.html
.. _`shadcn/ui`: https://ui.shadcn.com
.. _`tales-from-a-dev/twig-tailwind-extra`: https://github.com/tales-from-a-dev/twig-tailwind-extra
.. _`ignore not defined options`: https://symfony.com/doc/current/components/options_resolver.html#ignore-not-defined-options
+.. _`Symfony MakerBundle`: https://symfony.com/bundles/SymfonyMakerBundle/current/index.html