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 ----------------- pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy