feature #378 Model rendering overhaul (weaverryan)

This PR was squashed before being merged into the 2.x branch.

Discussion
----------

Model rendering overhaul

| Q             | A
| ------------- | ---
| Bug fix?      | yes
| New feature?  | yes
| Tickets       | None
| License       | MIT

Hi!

tl;dr

```twig
BEFORE:
<input
    data-model="firstName"
    data-action="live#update"
>

AFTER:
<input
    data-model="firstName"
>
```

This PR makes it so that you *only* need to use `data-model` to bind an input to a `LiveProp` on your component object. This also introduces:

A) **model modifiers** (e.g. `data-model="on(change)|norender|firstName"` to update the model on change and skip re-rendering)

B) **A new way to "opt in" to the `name` attribute being used in place of `data-model`**: you now add a `data-model` to the `form` tag surrounding your fields: `<form data-model"*">`.

All of this is explained more in the CHANGELOG and documentation.

The motivation behind this change was actually to fix a bug. If you typed into field (A), then quickly typed into field (B) before the re-render Ajax request finished from changing field (A), when that Ajax call *did* finish, it would "replace" your custom changes to field (B). Basically, what you just typed disappears. Fixing this meant making `live_controller.ts` listen to the `input` event in all situations and track "unsynced inputs". And since we were now listening to the `input` event all the time, it seemed logical to no longer require the user to do this manually with `data-action="live#update"`.

This PR also overhauls the test suite to make it *much* more readable and user friends 🌞 and also completes the conversion to TypeScript by removing all of the TS warnings.

Cheers!

Commits
-------

d3aaf4f Model rendering overhaul

Author: weaverryan

src/Autocomplete/assets/dist/controller.js

@@ -1,25 +1,25 @@
 import { Controller } from '@hotwired/stimulus';
 import TomSelect from 'tom-select';
 
-/******************************************************************************
-Copyright (c) Microsoft Corporation.
-
-Permission to use, copy, modify, and/or distribute this software for any
-purpose with or without fee is hereby granted.
-
-THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
-REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
-AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
-INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
-LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
-OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
-PERFORMANCE OF THIS SOFTWARE.
-***************************************************************************** */
-
-function __classPrivateFieldGet(receiver, state, kind, f) {
-    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
-    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
-    return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
+/******************************************************************************
+Copyright (c) Microsoft Corporation.
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+PERFORMANCE OF THIS SOFTWARE.
+***************************************************************************** */
+
+function __classPrivateFieldGet(receiver, state, kind, f) {
+    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
+    return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
 }
 
 var _instances, _getCommonConfig, _createAutocomplete, _createAutocompleteWithHtmlContents, _createAutocompleteWithRemoteData, _stripTags, _mergeObjects, _createTomSelect, _dispatchEvent;

src/Chartjs/Twig/ChartExtension.php

@@ -12,6 +12,7 @@
 namespace Symfony\UX\Chartjs\Twig;
 
 use Symfony\UX\Chartjs\Model\Chart;
+use Symfony\WebpackEncoreBundle\Dto\StimulusControllersDto;
 use Symfony\WebpackEncoreBundle\Twig\StimulusTwigExtension;
 use Twig\Environment;
 use Twig\Extension\AbstractExtension;
@@ -49,7 +50,16 @@ public function renderChart(Environment $env, Chart $chart, array $attributes =
         }
         $controllers['@symfony/ux-chartjs/chart'] = ['view' => $chart->createView()];
 
-        $html = '<canvas '.$this->stimulus->renderStimulusController($env, $controllers).' ';
+        if (class_exists(StimulusControllersDto::class)) {
+            $dto = new StimulusControllersDto($env);
+            foreach ($controllers as $name => $controllerValues) {
+                $dto->addController($name, $controllerValues);
+            }
+
+            $html = '<canvas '.$dto.' ';
+        } else {
+            $html = '<canvas '.$this->stimulus->renderStimulusController($env, $controllers).' ';
+        }
 
         foreach ($chart->getAttributes() as $name => $value) {
             if ('data-controller' === $name) {

src/LiveComponent/CHANGELOG.md

@@ -1,5 +1,68 @@
 # CHANGELOG
 
+## 2.3.0
+
+-   [BC BREAK] The `data-action="live#update"` attribute must now be
+    removed from **nearly** all elements. This is because LiveComponents
+    now automatically listens to the `input` event on all elements
+    with a `data-model` attribute and updates the data. If you previously
+    used `data-action="change->live#update"` to list on the `change`
+    event, now you should use the `on(change)` modifier inside `data-model`.
+
+```twig
+<!-- BEFORE -->
+<input
+    data-model="max"
+    data-action="change->live#update"
+>
+
+<!-- AFTER -->
+<input
+    data-model="on(change)|max"
+>
+```
+
+-   [BC BREAK] The `live#updateDefer` action was removed entirely.
+    Now, to update a model without triggering a re-render, use the
+    `norender` modifier for `data-model`:
+
+```twig
+<!-- BEFORE -->
+<input
+    data-model="max"
+    data-action="live#updateDefer"
+>
+
+<!-- AFTER -->
+<input
+    data-model="norender|max"
+>
+```
+
+-   [BC BREAK] The `name` attribute is no longer automatically used to
+    update a model when a parent component has `data-action="change->live#update"`.
+    To make a form's fields behave like "model" fields (but using the
+    `name` attribute instead of `data-model`) you need to add a `data-model`
+    attribute to the `<form>` element around your fields (NOTE: the
+    new attribute is automatically added to your `form` element when
+    using `ComponentWithFormTrait`):
+
+```twig
+<!-- BEFORE -->
+<form data-action="change->live#update">
+    <input
+        name="max"
+    >
+</form>
+
+<!-- AFTER -->
+<form data-model="on(change)|*">
+    <input
+        name="max"
+    >
+</form>
+```
+
 ## 2.2.0
 
 -   The bundle now properly exposes a `live` controller, which can be