Skip to content

Commit 22f23b3

Browse files
committed
minor #2843 [Doc] Update the docs about the mount() method of Twig components (javiereguiluz)
This PR was squashed before being merged into the 2.x branch. Discussion ---------- [Doc] Update the docs about the mount() method of Twig components | Q | A | ------------- | --- | Bug fix? | no | New feature? | no | Docs? | yes | Issues | - | License | MIT Today I had some issues understanding how the `mount()` method works, so I propose these changes to clarify things. Commits ------- 8467f24 [Doc] Update the docs about the mount() method of Twig components
2 parents 3b69d31 + 8467f24 commit 22f23b3

File tree

1 file changed

+58
-19
lines changed

1 file changed

+58
-19
lines changed

src/TwigComponent/doc/index.rst

Lines changed: 58 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -447,15 +447,24 @@ need to populate, you can render it with:
447447
Mounting Data
448448
-------------
449449

450-
Most of the time, you will create public properties and then pass values
451-
to those as "props" when rendering. But there are several hooks in case
452-
you need to do something more complex.
450+
Most of the time, you will create public properties and pass values to them
451+
as "props" when rendering the component. However, there are several hooks
452+
available when you need to perform more complex logic.
453453

454454
The mount() Method
455455
~~~~~~~~~~~~~~~~~~
456456

457-
For more control over how your "props" are handled, you can create a method
458-
called ``mount()``::
457+
The ``mount()`` method gives you more control over how your "props" are handled.
458+
It is called once, immediately after the component is instantiated, **but before**
459+
the component system assigns the props you passed when rendering.
460+
461+
For example, if you call your component like this:
462+
463+
.. code-block:: html+twig
464+
465+
<twig:Alert type="error" message="..."/>
466+
467+
The following code won't work as expected::
459468

460469
// src/Twig/Components/Alert.php
461470
// ...
@@ -466,30 +475,60 @@ called ``mount()``::
466475
public string $message;
467476
public string $type = 'success';
468477

469-
public function mount(bool $isSuccess = true): void
478+
public function mount(): void
470479
{
471-
$this->type = $isSuccess ? 'success' : 'danger';
480+
{# ❌ this won't work: at this point $type still has its default value.
481+
Passed values are not yet available in props. #}
482+
if ('error' === $this->type) {
483+
// ...
484+
}
472485
}
473486

474487
// ...
475488
}
476489

477-
The ``mount()`` method is called just one time: immediately after your
478-
component is instantiated. Because the method has an ``$isSuccess``
479-
argument, if we pass an ``isSuccess`` prop when rendering, it will be
480-
passed to ``mount()``.
490+
Inside ``mount()``, each prop has only its *default* value (or ``null`` if it is
491+
untyped and has no default). If you need a prop's value, declare a parameter in
492+
``mount()`` whose name matches the prop instead of reading the public property::
493+
494+
public function mount(string $type): void
495+
{
496+
{# ✅ this works as expected: the $type argument in PHP has the value
497+
passed to the 'type' prop in the Twig template #}
498+
if ('error' === $type) {
499+
// ...
500+
}
501+
}
502+
503+
If a prop name (e.g. ``type``) matches an argument name in ``mount()``,
504+
its value will be passed only to the method. The component system **will not**
505+
set it on a public property or use it in the component's ``attributes``.
506+
507+
``mount()`` can also receive props **even when no matching public property
508+
exists**. For example, pass an ``isError`` prop instead of ``type``:
481509

482510
.. code-block:: html+twig
483511

484-
<twig:Alert
485-
isSuccess="{{ false }}"
486-
message="Danger Will Robinson!"
487-
/>
512+
<twig:Alert isError="{{ true }}" message="..."/>
488513

489-
If a prop name (e.g. ``isSuccess``) matches an argument name in ``mount()``,
490-
the prop will be passed as that argument and the component system will
491-
**not** try to set it directly on a property or use it for the component
492-
``attributes``.
514+
Define a ``$isError`` argument to capture the prop and initialize other
515+
properties using that value::
516+
517+
#[AsTwigComponent]
518+
class Alert
519+
{
520+
public string $message;
521+
public string $type = 'success';
522+
523+
public function mount(bool $isError = false): void
524+
{
525+
if ($isError) {
526+
$this->type = 'danger';
527+
}
528+
}
529+
530+
// ...
531+
}
493532

494533
PreMount Hook
495534
~~~~~~~~~~~~~

0 commit comments

Comments
 (0)