Change server to expect JSON data

Author: weaverryan

.php-cs-fixer.dist.php

@@ -24,6 +24,7 @@
             ->append([__FILE__])
             ->notPath('#/Fixtures/#')
             ->notPath('#/app/var/#')
+            ->notPath('#/var/cache/#')
             ->notPath('Turbo/Attribute/Broadcast.php') // Need https://github.com/FriendsOfPHP/PHP-CS-Fixer/issues/4702
     )
 ;

src/LiveComponent/CHANGELOG.md

@@ -2,6 +2,11 @@
 
 ## 2.1.0
 
+-   Your component's live "data" is now send over Ajax as a JSON string.
+    Previously data was sent as pure query parameters or as pure POST data.
+    However, this made it impossible to keep certain data types, like
+    distinguishing between `null` and `''`. This has no impact on end-users.
+
 -   Added `data-live-ignore` attribute. If included in an element, that element
     will not be updated on re-render.
 

src/LiveComponent/src/ComponentWithFormTrait.php

@@ -178,7 +178,13 @@ private function extractFormValues(FormView $formView): array
         $values = [];
         foreach ($formView->children as $child) {
             $name = $child->vars['name'];
-            if (\count($child->children) > 0) {
+
+            // if there are children, expand their values recursively
+            // UNLESS the field is "expanded": in that case the value
+            // is already correct. For example, an expanded ChoiceType with
+            // options "text" and "phone" would already have a value in the format
+            // ["text"] (assuming "text" is checked and "phone" is not).
+            if (!($child->vars['expanded'] ?? false) && \count($child->children) > 0) {
                 $values[$name] = $this->extractFormValues($child);
 
                 continue;

src/LiveComponent/src/EventListener/LiveComponentSubscriber.php

@@ -122,10 +122,13 @@ public function onKernelController(ControllerEvent $event): void
             return;
         }
 
-        $data = array_merge(
-            $request->query->all(),
-            $request->request->all()
-        );
+        if ($request->query->has('data')) {
+            // ?data=
+            $data = json_decode($request->query->get('data'), true, 512, \JSON_THROW_ON_ERROR);
+        } else {
+            // OR body of the request is JSON
+            $data = json_decode($request->getContent(), true, 512, \JSON_THROW_ON_ERROR);
+        }
 
         if (!\is_array($controller = $event->getController()) || 2 !== \count($controller)) {
             throw new \RuntimeException('Not a valid live component.');

src/LiveComponent/tests/Functional/EventListener/LiveComponentSubscriberTest.php

@@ -54,7 +54,7 @@ public function testCanRenderComponentAsHtml(): void
 
         $this->browser()
             ->throwExceptions()
-            ->get('/_components/component1?'.http_build_query($dehydrated))
+            ->get('/_components/component1?data='.urlencode(json_encode($dehydrated)))
             ->assertSuccessful()
             ->assertHeaderContains('Content-Type', 'html')
             ->assertContains('Prop1: '.$entity->id)
@@ -80,16 +80,17 @@ public function testCanExecuteComponentAction(): void
 
         $this->browser()
             ->throwExceptions()
-            ->get('/_components/component2?'.http_build_query($dehydrated))
+            ->get('/_components/component2?data='.urlencode(json_encode($dehydrated)))
             ->assertSuccessful()
             ->assertHeaderContains('Content-Type', 'html')
             ->assertContains('Count: 1')
             ->use(function (HtmlResponse $response) use (&$token) {
                 // get a valid token to use for actions
                 $token = $response->crawler()->filter('div')->first()->attr('data-live-csrf-value');
             })
-            ->post('/_components/component2/increase?'.http_build_query($dehydrated), [
+            ->post('/_components/component2/increase', [
                 'headers' => ['X-CSRF-TOKEN' => $token],
+                'body' => json_encode($dehydrated),
             ])
             ->assertSuccessful()
             ->assertHeaderContains('Content-Type', 'html')
@@ -168,7 +169,7 @@ public function testBeforeReRenderHookOnlyExecutedDuringAjax(): void
             ->visit('/render-template/template1')
             ->assertSuccessful()
             ->assertSee('BeforeReRenderCalled: No')
-            ->get('/_components/component2?'.http_build_query($dehydrated))
+            ->get('/_components/component2?data='.urlencode(json_encode($dehydrated)))
             ->assertSuccessful()
             ->assertSee('BeforeReRenderCalled: Yes')
         ;
@@ -190,25 +191,27 @@ public function testCanRedirectFromComponentAction(): void
 
         $this->browser()
             ->throwExceptions()
-            ->get('/_components/component2?'.http_build_query($dehydrated))
+            ->get('/_components/component2?data='.urlencode(json_encode($dehydrated)))
             ->assertSuccessful()
             ->use(function (HtmlResponse $response) use (&$token) {
                 // get a valid token to use for actions
                 $token = $response->crawler()->filter('div')->first()->attr('data-live-csrf-value');
             })
             ->interceptRedirects()
             // with no custom header, it redirects like a normal browser
-            ->post('/_components/component2/redirect?'.http_build_query($dehydrated), [
+            ->post('/_components/component2/redirect', [
                 'headers' => ['X-CSRF-TOKEN' => $token],
+                'body' => json_encode($dehydrated),
             ])
             ->assertRedirectedTo('/')
 
             // with custom header, a special 204 is returned
-            ->post('/_components/component2/redirect?'.http_build_query($dehydrated), [
+            ->post('/_components/component2/redirect', [
                 'headers' => [
                     'Accept' => 'application/vnd.live-component+html',
                     'X-CSRF-TOKEN' => $token,
                 ],
+                'body' => json_encode($dehydrated),
             ])
             ->assertStatus(204)
             ->assertHeaderEquals('Location', '/')
@@ -229,13 +232,10 @@ public function testInjectsLiveArgs(): void
         $dehydrated = $hydrator->dehydrate($component);
         $token = null;
 
-        $dehydratedWithArgs = array_merge($dehydrated, [
-            'args' => http_build_query(['arg1' => 'hello', 'arg2' => 666, 'custom' => '33.3']),
-        ]);
-
+        $argsQueryParams = http_build_query(['args' => http_build_query(['arg1' => 'hello', 'arg2' => 666, 'custom' => '33.3'])]);
         $this->browser()
             ->throwExceptions()
-            ->get('/_components/component6?'.http_build_query($dehydrated))
+            ->get('/_components/component6?data='.urlencode(json_encode($dehydrated)).'&'.$argsQueryParams)
             ->assertSuccessful()
             ->assertHeaderContains('Content-Type', 'html')
             ->assertContains('Arg1: not provided')
@@ -245,8 +245,9 @@ public function testInjectsLiveArgs(): void
                 // get a valid token to use for actions
                 $token = $response->crawler()->filter('div')->first()->attr('data-live-csrf-value');
             })
-            ->post('/_components/component6/inject?'.http_build_query($dehydratedWithArgs), [
+            ->post('/_components/component6/inject?'.$argsQueryParams, [
                 'headers' => ['X-CSRF-TOKEN' => $token],
+                'body' => json_encode($dehydrated),
             ])
             ->assertSuccessful()
             ->assertHeaderContains('Content-Type', 'html')

src/LiveComponent/tests/Functional/Form/ComponentWithFormTest.php

@@ -46,7 +46,7 @@ public function testFormValuesRebuildAfterFormChanges(): void
         $token = null;
 
         $this->browser()
-            ->get('/_components/form_with_collection_type?'.http_build_query($dehydrated))
+            ->get('/_components/form_with_collection_type?data='.urlencode(json_encode($dehydrated)))
             ->use(function (HtmlResponse $response) use (&$dehydrated, &$token) {
                 // mimic user typing
                 $dehydrated['blog_post_form']['content'] = 'changed description by user';
@@ -56,7 +56,7 @@ public function testFormValuesRebuildAfterFormChanges(): void
 
             // post to action, which will add a new embedded comment
             ->post('/_components/form_with_collection_type/addComment', [
-                'body' => $dehydrated,
+                'body' => json_encode($dehydrated),
                 'headers' => ['X-CSRF-TOKEN' => $token],
             ])
             ->assertStatus(422)
@@ -92,7 +92,7 @@ public function testFormValuesRebuildAfterFormChanges(): void
 
             // post to action, which will remove the original embedded comment
             ->post('/_components/form_with_collection_type/removeComment?'.http_build_query(['args' => 'index=0']), [
-                'body' => $dehydrated,
+                'body' => json_encode($dehydrated),
                 'headers' => ['X-CSRF-TOKEN' => $token],
             ])
             ->assertStatus(422)
@@ -136,7 +136,7 @@ public function testFormRemembersValidationFromInitialForm(): void
         $dehydrated['validatedFields'][] = 'blog_post_form.content';
 
         $this->browser()
-            ->get('/_components/form_with_collection_type?'.http_build_query($dehydrated))
+            ->get('/_components/form_with_collection_type?data='.urlencode(json_encode($dehydrated)))
             // normal validation happened
             ->assertContains('The content field is too short')
             // title is STILL validated as all fields should be validated