From 43af1cb5c61fad25748c30b9c1b0f108e43ba5a3 Mon Sep 17 00:00:00 2001 From: Jacob Baker-Kretzmar Date: Sun, 17 Dec 2023 10:49:44 -0500 Subject: [PATCH] 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 --- src/Console/InstallsInertiaStacks.php | 72 ++++++++++++++++++- .../Http/Middleware/HandleInertiaRequests.php | 5 -- stubs/inertia-common/jsconfig.json | 3 +- .../resources/js/types/global.d.ts | 3 +- stubs/inertia-react-ts/tsconfig.json | 3 +- stubs/inertia-vue-ts/resources/js/app.ts | 2 +- stubs/inertia-vue-ts/resources/js/ssr.ts | 2 - .../resources/js/types/global.d.ts | 3 +- stubs/inertia-vue-ts/tsconfig.json | 3 +- stubs/inertia-vue/resources/js/app.js | 2 +- 10 files changed, 80 insertions(+), 18 deletions(-) diff --git a/src/Console/InstallsInertiaStacks.php b/src/Console/InstallsInertiaStacks.php index 9d68f91be..45083bbaa 100644 --- 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 index bb2c7fa02..c73606599 100644 --- 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 index 97921a98e..626935479 100644 --- 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 index 994efd8aa..baff86977 100644 --- a/stubs/inertia-react-ts/resources/js/types/global.d.ts +++ b/stubs/inertia-react-ts/resources/js/types/global.d.ts @@ -1,5 +1,5 @@ import { AxiosInstance } from 'axios'; -import ziggyRoute, { Config as ZiggyConfig } from 'ziggy-js'; +import ziggyRoute from 'ziggy-js'; declare global { interface Window { @@ -7,5 +7,4 @@ declare global { } var route: typeof ziggyRoute; - var Ziggy: ZiggyConfig; } diff --git a/stubs/inertia-react-ts/tsconfig.json b/stubs/inertia-react-ts/tsconfig.json index 9ad892ffd..78b34078a 100644 --- 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 index 3c9fb9f6b..40b588844 100644 --- 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 index 36e5249af..e5c79210d 100644 --- 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 index 63acb0c87..71b8be6a5 100644 --- 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 index 39c12667d..fab818e64 100644 --- 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 index 3bd40df3a..643d1a537 100644 --- 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: {