Improve Ziggy setup in Inertia stacks (#340)

* Remove unnecessary SSR Inertia data from non-SSR stacks * Remove `@types/ziggy-js` and use Ziggy's own types * Remove unnecessary Ziggy plugin argument * Improve global SSR config typing and replace text in existing files * Override shared config `location` type * formatting --------- Co-authored-by: Taylor Otwell <[email protected]>
laravel · Dec 17, 2023 · 43af1cb · 43af1cb
1 parent c951946
commit 43af1cb
Show file tree

Hide file tree

Showing 10 changed files with 80 additions and 18 deletions.
diff --git a/src/Console/InstallsInertiaStacks.php b/src/Console/InstallsInertiaStacks.php
@@ -35,7 +35,6 @@ protected function installInertiaVueStack()
         if ($this->option('typescript')) {
             $this->updateNodePackages(function ($packages) {
                 return [
-                    '@types/ziggy-js' => '^1.3.2',
                     'typescript' => '^5.0.2',
                     'vue-tsc' => '^1.2.0',
                 ] + $packages;
@@ -166,6 +165,8 @@ protected function installInertiaVueSsrStack()
             $this->replaceInFile("input: 'resources/js/app.js',", "input: 'resources/js/app.js',".PHP_EOL."            ssr: 'resources/js/ssr.js',", base_path('vite.config.js'));
         }
 
+        $this->configureZiggyForSsr();
+
         $this->replaceInFile('vite build', 'vite build && vite build --ssr', base_path('package.json'));
         $this->replaceInFile('/node_modules', '/bootstrap/ssr'.PHP_EOL.'/node_modules', base_path('.gitignore'));
     }
@@ -203,7 +204,6 @@ protected function installInertiaReactStack()
                     '@types/node' => '^18.13.0',
                     '@types/react' => '^18.0.28',
                     '@types/react-dom' => '^18.0.10',
-                    '@types/ziggy-js' => '^1.3.2',
                     'typescript' => '^5.0.2',
                 ] + $packages;
             });
@@ -330,7 +330,75 @@ protected function installInertiaReactSsrStack()
             $this->replaceInFile("input: 'resources/js/app.jsx',", "input: 'resources/js/app.jsx',".PHP_EOL."            ssr: 'resources/js/ssr.jsx',", base_path('vite.config.js'));
         }
 
+        $this->configureZiggyForSsr();
+
         $this->replaceInFile('vite build', 'vite build && vite build --ssr', base_path('package.json'));
         $this->replaceInFile('/node_modules', '/bootstrap/ssr'.PHP_EOL.'/node_modules', base_path('.gitignore'));
     }
+
+    /**
+     * Configure Ziggy for SSR.
+     *
+     * @return void
+     */
+    protected function configureZiggyForSsr()
+    {
+        $this->replaceInFile(
+            <<<'EOT'
+            use Inertia\Middleware;
+            EOT,
+            <<<'EOT'
+            use Inertia\Middleware;
+            use Tightenco\Ziggy\Ziggy;
+            EOT,
+            app_path('Http/Middleware/HandleInertiaRequests.php')
+        );
+
+        $this->replaceInFile(
+            <<<'EOT'
+                        'auth' => [
+                            'user' => $request->user(),
+                        ],
+            EOT,
+            <<<'EOT'
+                        'auth' => [
+                            'user' => $request->user(),
+                        ],
+                        'ziggy' => fn () => [
+                            ...(new Ziggy)->toArray(),
+                            'location' => $request->url(),
+                        ],
+            EOT,
+            app_path('Http/Middleware/HandleInertiaRequests.php')
+        );
+
+        if ($this->option('typescript')) {
+            $this->replaceInFile(
+                <<<'EOT'
+                export interface User {
+                EOT,
+                <<<'EOT'
+                import { Config } from 'ziggy-js';
+
+                export interface User {
+                EOT,
+                resource_path('js/types/index.d.ts')
+            );
+
+            $this->replaceInFile(
+                <<<'EOT'
+                    auth: {
+                        user: User;
+                    };
+                EOT,
+                <<<'EOT'
+                    auth: {
+                        user: User;
+                    };
+                    ziggy: Config & { location: string };
+                EOT,
+                resource_path('js/types/index.d.ts')
+            );
+        }
+    }
 }
diff --git a/stubs/inertia-common/app/Http/Middleware/HandleInertiaRequests.php b/stubs/inertia-common/app/Http/Middleware/HandleInertiaRequests.php
@@ -4,7 +4,6 @@
 
 use Illuminate\Http\Request;
 use Inertia\Middleware;
-use Tightenco\Ziggy\Ziggy;
 
 class HandleInertiaRequests extends Middleware
 {
@@ -35,10 +34,6 @@ public function share(Request $request): array
             'auth' => [
                 'user' => $request->user(),
             ],
-            'ziggy' => fn () => [
-                ...(new Ziggy)->toArray(),
-                'location' => $request->url(),
-            ],
         ];
     }
 }
diff --git a/stubs/inertia-common/jsconfig.json b/stubs/inertia-common/jsconfig.json
@@ -2,7 +2,8 @@
     "compilerOptions": {
         "baseUrl": ".",
         "paths": {
-            "@/*": ["resources/js/*"]
+            "@/*": ["resources/js/*"],
+            "ziggy-js": ["./vendor/tightenco/ziggy"]
         }
     },
     "exclude": ["node_modules", "public"]

diff --git a/stubs/inertia-react-ts/resources/js/types/global.d.ts b/stubs/inertia-react-ts/resources/js/types/global.d.ts
@@ -1,11 +1,10 @@
 import { AxiosInstance } from 'axios';
-import ziggyRoute, { Config as ZiggyConfig } from 'ziggy-js';
+import ziggyRoute from 'ziggy-js';
 
 declare global {
     interface Window {
         axios: AxiosInstance;
     }
 
     var route: typeof ziggyRoute;
-    var Ziggy: ZiggyConfig;
 }
diff --git a/stubs/inertia-react-ts/tsconfig.json b/stubs/inertia-react-ts/tsconfig.json
@@ -11,7 +11,8 @@
         "forceConsistentCasingInFileNames": true,
         "noEmit": true,
         "paths": {
-            "@/*": ["./resources/js/*"]
+            "@/*": ["./resources/js/*"],
+            "ziggy-js": ["./vendor/tightenco/ziggy"]
         }
     },
     "include": ["resources/js/**/*.ts", "resources/js/**/*.tsx", "resources/js/**/*.d.ts"]

diff --git a/stubs/inertia-vue-ts/resources/js/app.ts b/stubs/inertia-vue-ts/resources/js/app.ts
@@ -14,7 +14,7 @@ createInertiaApp({
     setup({ el, App, props, plugin }) {
         createApp({ render: () => h(App, props) })
             .use(plugin)
-            .use(ZiggyVue, Ziggy)
+            .use(ZiggyVue)
             .mount(el);
     },
     progress: {

diff --git a/stubs/inertia-vue-ts/resources/js/ssr.ts b/stubs/inertia-vue-ts/resources/js/ssr.ts
@@ -17,9 +17,7 @@ createServer((page) =>
             return createSSRApp({ render: () => h(App, props) })
                 .use(plugin)
                 .use(ZiggyVue, {
-                    // @ts-expect-error
                     ...page.props.ziggy,
-                    // @ts-expect-error
                     location: new URL(page.props.ziggy.location),
                 });
         },

diff --git a/stubs/inertia-vue-ts/resources/js/types/global.d.ts b/stubs/inertia-vue-ts/resources/js/types/global.d.ts
@@ -1,6 +1,6 @@
 import { PageProps as InertiaPageProps } from '@inertiajs/core';
 import { AxiosInstance } from 'axios';
-import ziggyRoute, { Config as ZiggyConfig } from 'ziggy-js';
+import ziggyRoute from 'ziggy-js';
 import { PageProps as AppPageProps } from './';
 
 declare global {
@@ -9,7 +9,6 @@ declare global {
     }
 
     var route: typeof ziggyRoute;
-    var Ziggy: ZiggyConfig;
 }
 
 declare module 'vue' {

diff --git a/stubs/inertia-vue-ts/tsconfig.json b/stubs/inertia-vue-ts/tsconfig.json
@@ -12,7 +12,8 @@
         "noEmit": true,
         "skipLibCheck": true,
         "paths": {
-            "@/*": ["./resources/js/*"]
+            "@/*": ["./resources/js/*"],
+            "ziggy-js": ["./vendor/tightenco/ziggy"]
         }
     },
     "include": ["resources/js/**/*.ts", "resources/js/**/*.d.ts", "resources/js/**/*.vue"]

diff --git a/stubs/inertia-vue/resources/js/app.js b/stubs/inertia-vue/resources/js/app.js
@@ -14,7 +14,7 @@ createInertiaApp({
     setup({ el, App, props, plugin }) {
         return createApp({ render: () => h(App, props) })
             .use(plugin)
-            .use(ZiggyVue, Ziggy)
+            .use(ZiggyVue)
             .mount(el);
     },
     progress: {