Skip to content

Improve Ziggy setup in Inertia stacks #340

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 6 commits into from
Dec 17, 2023
Merged

Improve Ziggy setup in Inertia stacks #340

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
11d1132
Remove unnecessary SSR Inertia data from non-SSR stacks
bakerkretzmar Dec 16, 2023
e7552a4
Remove `@types/ziggy-js` and use Ziggy's own types
bakerkretzmar Dec 16, 2023
a94a1ef
Remove unnecessary Ziggy plugin argument
bakerkretzmar Dec 16, 2023
709b5c9
Improve global SSR config typing and replace text in existing files
bakerkretzmar Dec 16, 2023
ce6f1ad
Override shared config `location` type
bakerkretzmar Dec 16, 2023
25adf71
formatting
taylorotwell Dec 17, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
72 changes: 70 additions & 2 deletions src/Console/InstallsInertiaStacks.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -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'));
}
Expand Down Expand Up @@ -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;
});
Expand Down Expand Up @@ -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')
);
}
}
}
5 changes: 0 additions & 5 deletions stubs/inertia-common/app/Http/Middleware/HandleInertiaRequests.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,6 @@

use Illuminate\Http\Request;
use Inertia\Middleware;
use Tightenco\Ziggy\Ziggy;

class HandleInertiaRequests extends Middleware
{
Expand Down Expand Up @@ -35,10 +34,6 @@ public function share(Request $request): array
'auth' => [
'user' => $request->user(),
],
'ziggy' => fn () => [
...(new Ziggy)->toArray(),
'location' => $request->url(),
],
];
}
}
3 changes: 2 additions & 1 deletion stubs/inertia-common/jsconfig.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,8 @@
"compilerOptions": {
"baseUrl": ".",
"paths": {
"@/*": ["resources/js/*"]
"@/*": ["resources/js/*"],
"ziggy-js": ["./vendor/tightenco/ziggy"]
}
},
"exclude": ["node_modules", "public"]
Expand Down
3 changes: 1 addition & 2 deletions stubs/inertia-react-ts/resources/js/types/global.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;
}
3 changes: 2 additions & 1 deletion stubs/inertia-react-ts/tsconfig.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"]
Expand Down
2 changes: 1 addition & 1 deletion stubs/inertia-vue-ts/resources/js/app.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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: {
Expand Down
2 changes: 0 additions & 2 deletions stubs/inertia-vue-ts/resources/js/ssr.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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),
});
},
Expand Down
3 changes: 1 addition & 2 deletions stubs/inertia-vue-ts/resources/js/types/global.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 {
Expand All @@ -9,7 +9,6 @@ declare global {
}

var route: typeof ziggyRoute;
var Ziggy: ZiggyConfig;
}

declare module 'vue' {
Expand Down
3 changes: 2 additions & 1 deletion stubs/inertia-vue-ts/tsconfig.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"]
Expand Down
2 changes: 1 addition & 1 deletion stubs/inertia-vue/resources/js/app.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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: {
Expand Down