Ability to use <script> element for initial page data (#788)

* Ability to use `<script>` element for initial page data

* Rename config key

* Refactor hardcoded `_page` suffix

* Prevent escaping JSON

Author: pascalbaljet

config/inertia.php

@@ -64,6 +64,8 @@
 
     ],
 
+    'use_script_element_for_initial_page' => (bool) env('INERTIA_USE_SCRIPT_ELEMENT_FOR_INITIAL_PAGE', false),
+
     /*
     |--------------------------------------------------------------------------
     | Testing

src/Directive.php

@@ -23,6 +23,8 @@ public static function compile($expression = ''): string
 
             if ($__inertiaSsrResponse) {
                 echo $__inertiaSsrResponse->body;
+            } elseif (config(\'inertia.use_script_element_for_initial_page\')) {
+                ?><script data-page="'.$id.'" type="application/json">{!! json_encode($page) !!}</script><div id="'.$id.'"></div><?php
             } else {
                 ?><div id="'.$id.'" data-page="{{ json_encode($page) }}"></div><?php
             }

tests/DirectiveTest.php

@@ -63,6 +63,21 @@ public function test_inertia_directive_renders_the_root_element(): void
         $this->assertSame($html, $this->renderView("@inertia('')", ['page' => self::EXAMPLE_PAGE_OBJECT]));
     }
 
+    public function test_inertia_directive_renders_the_root_element_and_script_element(): void
+    {
+        Config::set([
+            'inertia.ssr.enabled' => false,
+            'inertia.use_script_element_for_initial_page' => true,
+        ]);
+
+        $html = '<script data-page="app" type="application/json">{"component":"Foo\/Bar","props":{"foo":"bar"},"url":"\/test","version":"","encryptHistory":false,"clearHistory":false}</script><div id="app"></div>';
+
+        $this->assertSame($html, $this->renderView('@inertia', ['page' => self::EXAMPLE_PAGE_OBJECT]));
+        $this->assertSame($html, $this->renderView('@inertia()', ['page' => self::EXAMPLE_PAGE_OBJECT]));
+        $this->assertSame($html, $this->renderView('@inertia("")', ['page' => self::EXAMPLE_PAGE_OBJECT]));
+        $this->assertSame($html, $this->renderView("@inertia('')", ['page' => self::EXAMPLE_PAGE_OBJECT]));
+    }
+
     public function test_inertia_directive_renders_server_side_rendered_content_when_enabled(): void
     {
         Config::set(['inertia.ssr.enabled' => true]);
@@ -84,6 +99,20 @@ public function test_inertia_directive_can_use_a_different_root_element_id(): vo
         $this->assertSame($html, $this->renderView('@inertia("foo")', ['page' => self::EXAMPLE_PAGE_OBJECT]));
     }
 
+    public function test_inertia_directive_can_use_a_different_root_element_id_when_using_script_element(): void
+    {
+        Config::set([
+            'inertia.ssr.enabled' => false,
+            'inertia.use_script_element_for_initial_page' => true,
+        ]);
+
+        $html = '<script data-page="foo" type="application/json">{"component":"Foo\/Bar","props":{"foo":"bar"},"url":"\/test","version":"","encryptHistory":false,"clearHistory":false}</script><div id="foo"></div>';
+
+        $this->assertSame($html, $this->renderView('@inertia(foo)', ['page' => self::EXAMPLE_PAGE_OBJECT]));
+        $this->assertSame($html, $this->renderView("@inertia('foo')", ['page' => self::EXAMPLE_PAGE_OBJECT]));
+        $this->assertSame($html, $this->renderView('@inertia("foo")', ['page' => self::EXAMPLE_PAGE_OBJECT]));
+    }
+
     public function test_inertia_head_directive_renders_nothing(): void
     {
         Config::set(['inertia.ssr.enabled' => false]);