From 9e5a4fd33dce720acacea65d2f32690fec8c957c Mon Sep 17 00:00:00 2001 From: Dennis de Best Date: Sat, 16 Nov 2024 11:59:27 +0100 Subject: [PATCH 1/3] Add maker bundle information Add information on how to use the maker bundle to craete twig components, especially on how to create them in a subdirectory --- doc/index.rst | 20 ++++++++++++++++++++ 1 file changed, 20 insertions(+) diff --git a/doc/index.rst b/doc/index.rst index b110ee0..e39d00d 100644 --- a/doc/index.rst +++ b/doc/index.rst @@ -122,6 +122,26 @@ and any other components by running: Take a moment to fist pump - then come back! +You can also use the ``make`` commands to generate the component PHP and twig files : + +.. code-block:: terminal + + $ php bin/console make:twig-component Alert + +If you want your component to reside in a sub directory like ``src/twig/Components/Alert/`` and make a specific component for a Danger alert you can run: + +.. code-block:: terminal + + $ php bin/console make:twig-component Alert\\Danger + +Or: + +.. code-block:: terminal + + $ php bin/console make:twig-component 'Alert\Danger' + +This wil render the php file at ``src\twig\Components\Alert\Danger.php`` and the twig file at ``templates\components\Alert\Danger.html.twig`` + .. _naming: Naming Your Component From 80c368bafef148bb593d316e8a082ab5ef0bb544 Mon Sep 17 00:00:00 2001 From: Hugo Alliaume Date: Sat, 7 Dec 2024 11:22:22 +0100 Subject: [PATCH 2/3] [Doc][TwigComponent] Simplify examples, use a tip --- doc/index.rst | 42 ++++++++++++++++-------------------------- 1 file changed, 16 insertions(+), 26 deletions(-) diff --git a/doc/index.rst b/doc/index.rst index e39d00d..aa1de3a 100644 --- a/doc/index.rst +++ b/doc/index.rst @@ -122,25 +122,14 @@ and any other components by running: Take a moment to fist pump - then come back! -You can also use the ``make`` commands to generate the component PHP and twig files : +.. tip -.. code-block:: terminal - - $ php bin/console make:twig-component Alert - -If you want your component to reside in a sub directory like ``src/twig/Components/Alert/`` and make a specific component for a Danger alert you can run: - -.. code-block:: terminal - - $ php bin/console make:twig-component Alert\\Danger - -Or: + 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\Danger' + .. code-block:: terminal -This wil render the php file at ``src\twig\Components\Alert\Danger.php`` and the twig file at ``templates\components\Alert\Danger.html.twig`` + $ php bin/console make:twig-component Alert .. _naming: @@ -317,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: @@ -527,14 +516,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. @@ -711,7 +700,7 @@ You can also add more, named blocks: Render these in the normal way. - + .. code-block:: html+twig @@ -1791,3 +1780,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 From 9b347f6ca2d9e18cee630787f0a6aa453982bf18 Mon Sep 17 00:00:00 2001 From: Javier Eguiluz Date: Sat, 7 Dec 2024 12:30:01 +0100 Subject: [PATCH 3/3] [Doc] Mention how to work with Twig macros in Twig Components --- doc/index.rst | 15 +++++++++++++++ 1 file changed, 15 insertions(+) diff --git a/doc/index.rst b/doc/index.rst index aa1de3a..5dc1c4d 100644 --- a/doc/index.rst +++ b/doc/index.rst @@ -365,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 -----------------