Skip to content

Commit

Permalink
minor #2384 [TwigComponent] Add tip about make:twig-component comma…
Browse files Browse the repository at this point in the history
…nd (DennisdeBest, Kocal)

This PR was merged into the 2.x branch.

Discussion
----------

[TwigComponent] Add tip about `make:twig-component` command

Add information on how to use the maker bundle to craete twig components, especially on how to create them in a subdirectory

| Q             | A
| ------------- | ---
| Bug fix?      | no
| New feature?  | no

Commits
-------

18edb28 [Doc][TwigComponent] Simplify examples, use a tip
16a5bfe Add maker bundle information
  • Loading branch information
Kocal committed Dec 7, 2024
2 parents 6008eed + 18edb28 commit 52b64e1
Showing 1 changed file with 20 additions and 10 deletions.
30 changes: 20 additions & 10 deletions src/TwigComponent/doc/index.rst
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -297,22 +306,22 @@ prefix the attribute with ``:`` or use the normal ``{{ }}`` syntax:
// pass object, array, or anything you imagine
<twig:Alert :foo="{col: ['foo', 'oof']}" />

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' #}
<twig:Alert message="..." withCloseButton="false" />

{# ✅ use the 'false' boolean value #}
<twig:Alert message="..." withCloseButton="{{ false }}" />

{# ✅ use the dynamic syntax #}
<twig:Alert message="..." :withCloseButton="false" />
<twig:Alert message="..." :withCloseButton="false" />

Don't forget that you can mix and match props with attributes that you
want to render on the root element:
Expand Down Expand Up @@ -507,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.
Expand Down Expand Up @@ -691,7 +700,7 @@ You can also add more, named blocks:
</div>

Render these in the normal way.

.. code-block:: html+twig

<twig:Alert type="success">
Expand Down Expand Up @@ -1771,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

0 comments on commit 52b64e1

Please sign in to comment.