[5.x] Allow extra x-data to be passed to alpine forms

src/Forms/JsDrivers/AbstractJsDriver.php

@@ -4,21 +4,24 @@
 
 use Statamic\Forms\Form;
 use Statamic\Support\Str;
+use Statamic\Tags\Parameters;
 
 abstract class AbstractJsDriver implements JsDriver
 {
     protected $form;
     protected $options;
+    protected $params;
 
     /**
      * Instantiate JS driver.
      *
      * @param  array  $options
      */
-    public function __construct(Form $form, $options = [])
+    public function __construct(Form $form, $options = [], ?Parameters $params = null)
     {
         $this->form = $form;
         $this->options = $options;
+        $this->params = $params;
 
         if (method_exists($this, 'parseOptions')) {
             $this->parseOptions($options);

src/Forms/JsDrivers/Alpine.php

@@ -25,8 +25,14 @@ protected function parseOptions($options)
      */
     public function addToFormAttributes()
     {
+        $extraData = $this->params->pull('x-data', []);
+
+        if (is_string($extraData)) {
+            $extraData = json_decode($extraData);
+        }
+
         return [
-            'x-data' => $this->renderAlpineXData($this->getInitialFormData(), $this->scope),
+            'x-data' => $this->renderAlpineXData(collect($this->getInitialFormData())->merge($extraData)->all(), $this->scope),
         ];
     }
 

src/Forms/Tags.php

@@ -300,7 +300,7 @@ protected function parseJsParamDriverAndOptions($value, $form)
             throw new \Exception("Cannot find JS driver class for [{$handle}]!");
         }
 
-        $instance = new $class($form, $options);
+        $instance = new $class($form, $options, $this->params);
 
         if (! $instance instanceof JsDriver) {
             throw new \Exception("JS driver must implement [Statamic\Forms\JsDrivers\JsDriver] interface!");

tests/Tags/Form/FormCreateAlpineTest.php

@@ -430,6 +430,50 @@ public function it_dynamically_renders_field_with_fallback_to_default_partial_x_
         $this->assertFieldRendersHtml('<input type="text" name="custom" value="" x-model="my_form.custom">', $config, [], ['js' => 'alpine:my_form']);
     }
 
+    /** @test */
+    public function it_merges_any_x_data_passed_to_the_tag()
+    {
+        $output = $this->tag('{{ form:contact js="alpine:my_form" \x-data=\'{"extra":"yes"}\' }}{{ /form:contact }}');
+
+        $expectedXData = $this->jsonEncode([
+            'my_form' => [
+                'name' => null,
+                'email' => null,
+                'message' => null,
+                'fav_animals' => [],
+                'fav_colour' => null,
+                'fav_subject' => null,
+                'winnie' => null,
+                'extra' => 'yes',
+            ],
+        ]);
+
+        $expected = '<form method="POST" action="http://localhost/!/forms/contact" x-data="'.$expectedXData.'">';
+
+        $this->assertStringContainsString($expected, $output);
+
+        $params = ['xdata' => ['extra' => 'no']];
+
+        $output = $this->tag('{{ form:contact js="alpine:my_form" :x-data="xdata" }}{{ /form:contact }}', $params);
+
+        $expectedXData = $this->jsonEncode([
+            'my_form' => [
+                'name' => null,
+                'email' => null,
+                'message' => null,
+                'fav_animals' => [],
+                'fav_colour' => null,
+                'fav_subject' => null,
+                'winnie' => null,
+                'extra' => 'no',
+            ],
+        ]);
+
+        $expected = '<form method="POST" action="http://localhost/!/forms/contact" x-data="'.$expectedXData.'">';
+
+        $this->assertStringContainsString($expected, $output);
+    }
+
     private function jsonEncode($data)
     {
         return Statamic::modify($data)->toJson()->entities();

tests/Tags/Form/FormTestCase.php

@@ -67,9 +67,9 @@ public function post($uri, array $data = [], array $headers = [])
         ], $headers));
     }
 
-    protected function tag($tag)
+    protected function tag($tag, $params = [])
     {
-        return Parse::template($tag, []);
+        return Parse::template($tag, $params);
     }
 
     protected function createForm($blueprintContents = null, $handle = null)