Skip to content

[LiveComponent] Clean versionadded #3049

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Aug 24, 2025
Merged

[LiveComponent] Clean versionadded #3049

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
68 changes: 8 additions & 60 deletions src/LiveComponent/doc/index.rst
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -275,21 +275,11 @@ Add an input to the template:
<strong>{{ this.randomNumber }}</strong>
</div>

.. versionadded:: 2.5

Before version 2.5, you needed to also set ``value="{{ max }}"``
on the ``<input>``. That is now set automatically for all
"data-model" fields.

The key is the ``data-model`` attribute. Thanks
to that, when the user types, the ``$max`` property on
the component will automatically update!

.. versionadded:: 2.3

Before version 2.3, you also needed a ``data-action="live#update"``
attribute. That attribute should now be removed.

How? Live components *listens* to the ``input`` event and
sends an Ajax request to re-render the component with the
new data!
Expand Down Expand Up @@ -734,10 +724,6 @@ persisted entities, which dehydrate to an ``id``).
Using DTO's on a LiveProp
~~~~~~~~~~~~~~~~~~~~~~~~~

.. versionadded:: 2.12

The automatic (de)hydration of DTO objects was introduced in LiveComponents 2.12.

You can also use a DTO (i.e. data transfer object / any simple class) with LiveProp as long as the property has the correct type::

class ComponentWithAddressDto
Expand Down Expand Up @@ -818,10 +804,6 @@ and ``dehydrateWith`` options on ``LiveProp``::
Hydration Extensions
~~~~~~~~~~~~~~~~~~~~

.. versionadded:: 2.8

The ``HydrationExtensionInterface`` system was added in LiveComponents 2.8.

If you frequently hydrate/dehydrate the same type of object, you can create a custom
hydration extension to make this easier. For example, if you frequently hydrate
a custom ``Food`` object, a hydration extension might look like this::
Expand Down Expand Up @@ -939,12 +921,6 @@ of the change:
Adding a Stimulus Controller to your Component Root Element
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

.. versionadded:: 2.9

The ability to use the ``defaults()`` method with ``stimulus_controller()``
was added in TwigComponents 2.9 and requires ``symfony/stimulus-bundle``.
Previously, ``stimulus_controller()`` was passed to ``attributes.add()``.

To add a custom Stimulus controller to your root component element:

.. code-block:: html+twig
Expand Down Expand Up @@ -1315,10 +1291,6 @@ shortcuts. We even added a flash message!
Uploading files
---------------

.. versionadded:: 2.11

The ability to upload files to actions was added in version 2.11.

Files aren't sent to the component by default. You need to use a live action
to handle the files and tell the component when the file should be sent:

Expand Down Expand Up @@ -1385,7 +1357,9 @@ The files will be available in a regular ``$request->files`` files bag::
Downloading files
-----------------

Currently, Live Components do not natively support returning file responses directly from a LiveAction. However, you can implement file downloads by redirecting to a route that handles the file response.
Currently, Live Components do not natively support returning file responses
directly from a LiveAction. However, you can implement file downloads by
redirecting to a route that handles the file response.

Create a LiveAction that generates the URL for the file download and returns a ``RedirectResponse``::

Expand All @@ -1410,7 +1384,9 @@ Create a LiveAction that generates the URL for the file download and returns a `

.. tip::

When Turbo is enabled, if a LiveAction response redirects to another URL, Turbo will make a request to prefetch the content. Here, adding ``data-turbo="false"`` ensures that the download URL is called only once.
When Turbo is enabled, if a LiveAction response redirects to another URL,
Turbo will make a request to prefetch the content. Here, adding ``data-turbo="false"``
ensures that the download URL is called only once.


.. _forms:
Expand Down Expand Up @@ -1781,10 +1757,6 @@ To fix this, set the ``always_empty`` option to ``false`` in your form::
Resetting the Form
~~~~~~~~~~~~~~~~~~

.. versionadded:: 2.10

The ``resetForm()`` method was added in LiveComponent 2.10.

After submitting a form via an action, you might want to "reset" the form
back to its initial state so you can use it again. Do that by calling
``resetForm()`` in your action instead of redirecting::
Expand Down Expand Up @@ -2379,10 +2351,6 @@ as soon as the page loads (``defer``) or when the component becomes visible
Loading "defer" (Ajax on Load)
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

.. versionadded:: 2.13.0

The ability to defer loading a component was added in Live Components 2.13.

If a component is heavy to render, you can defer rendering it until after
the page has loaded. To do this, add a ``loading="defer"`` attribute:

Expand All @@ -2402,10 +2370,6 @@ real component once the page has loaded.
Loading "lazy" (Ajax when Visible)
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

.. versionadded:: 2.17.0

The ability to load a component "lazily" was added in Live Components 2.17.

The ``lazy`` option is similar to ``defer``, but it defers the loading of
the component until it's in the viewport. This is useful for components that
are far down the page and are not needed until the user scrolls to them.
Expand Down Expand Up @@ -2442,9 +2406,9 @@ You can define some content to be rendered while the component is loading, eithe
inside the component template (the ``placeholder`` macro) or from the calling template
(the ``loading-template`` attribute and the ``loadingContent`` block).

.. versionadded:: 2.16.0
.. versionadded:: 2.16

Defining a placeholder macro into the component template was added in Live Components 2.16.0.
Defining a placeholder macro into the component template was added in Live Components 2.16.

In the component template, define a ``placeholder`` macro, outside of the
component's main content. This macro will be called when the component is deferred:
Expand Down Expand Up @@ -2562,10 +2526,6 @@ You can also trigger a specific "action" instead of a normal re-render:
Changing the URL when a LiveProp changes
----------------------------------------

.. versionadded:: 2.14

The ``url`` option was introduced in Live Components 2.14.

If you want the URL to update when a ``LiveProp`` changes, you can do that with the ``url`` option::

// src/Twig/Components/SearchModule.php
Expand Down Expand Up @@ -3710,10 +3670,6 @@ Then specify this new route on your component:
use DefaultActionTrait;
}

.. versionadded:: 2.14

The ``urlReferenceType`` option was added in LiveComponents 2.14.

You can also control the type of the generated URL:

.. code-block:: diff
Expand All @@ -3733,10 +3689,6 @@ You can also control the type of the generated URL:
Add a Hook on LiveProp Update
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

.. versionadded:: 2.12

The ``onUpdated`` option was added in LiveComponents 2.12.

If you want to run custom code after a specific LiveProp is updated,
you can do it by adding an ``onUpdated`` option set to a public method name
on the component::
Expand Down Expand Up @@ -3836,10 +3788,6 @@ The `Twig Component debug command`_ can help you.
Test Helper
-----------

.. versionadded:: 2.11

The test helper was added in LiveComponents 2.11.

Interact With Live-Components
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

Expand Down