-
Notifications
You must be signed in to change notification settings - Fork 246
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.
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
Generate on save #321
Comments
Cool idea! Ziggy doesn't currently provide any way to do this, no. You might be able to do it with Mix, Mix provides a I think this is outside the scope of Ziggy itself, but let me know if you get it working and I'd be happy to add a note about it to the docs! |
@bakerkretzmar sorry for the late reply 🙏 this was my solution inside I'm including it inside my webpack.mix.js file.
I hope it helps. |
@nacr nice! I think you could use const mix = require('laravel-mix');
const { exec } = require('child_process');
mix.extend('ziggy', new class {
register(config = {}) {
this.watch = config.watch ?? ['routes/**/*.php'];
this.path = config.path ?? '';
this.enabled = config.enabled ?? !Mix.inProduction();
}
boot() {
if (!this.enabled) return;
const command = () => exec(
`php artisan ziggy:generate ${this.path}`,
(error, stdout, stderr) => console.log(stdout)
);
command();
if (Mix.isWatching() && this.watch) {
((require('chokidar')).watch(this.watch))
.on('change', (path) => {
console.log(`${path} changed...`);
command();
});
};
}
}());
mix.js('resources/js/app.js', 'public/js')
.postCss('resources/css/app.css', 'public/css', [])
.ziggy(); Note also the |
may i know how to do that in Vite bundler ? @bakerkretzmar |
@caturandi-labs I'm still not very familiar with Vite so I don't know, sorry. Take a look at their Plugin API docs: https://vitejs.dev/guide/api-plugin.html Vite uses Rollup for production builds so my guess would be that their plugin system is very similar to Rollup's. |
|
Hello, @bakerkretzmar since Laravel now uses Vite. This is my current solution.
I'm using Laravel Sail in other setups the path may change. You can find more info on the Vite Plugin used here: |
I had a lot of problems with all solutions above. The main one was lack of types. I managed to figure out something like this: I'm using Vue 2.7, but I'm sure something similar can be used in Vue 3. Do the installation part from the docs. app.blade.php: <head>
{{-- Other imports --}}
@routes {{-- as per ziggy docs --}}
</head> This makes sure I always have up to date routes. Create // window.d.ts
// route definition from @types/ziggy-js
import route from "ziggy-js";
declare global {
interface Window {
// This hints the compiler that there will be globally defined route function
route: typeof route;
}
} // ziggy-js.d.ts
import Vue from "vue"; // This import needs to be here
import route from "ziggy-js";
declare module "vue/types/vue" {
// Hints type of $route for vue
// This will be neded later
interface Vue {
$route: typeof route;
}
} You need to include this declarations in tsconfig.json {
"include": [
"*.d.ts",
"resources/ts/**/*",
"resources/ts/**/*.d.ts",
"resources/ts/**/*.vue",
],
} I added $route to Vue manually: // main.ts
// other imports
Vue.prototype.$route = window.route;
createInertiaApp({ ... }); Now I can use $route function in Vue with type hints: I'm pretty sure this can be done simpler, but I have no idea how :) |
@nacr wasn't able to get your suggestion for @bakerkretzmar to work unfortunately I eventually came across this vite-plugin-run plugin which has worked perfectly for me
|
I want to share my version of a plugin for auto-generation in Vite, is based on the Full Reload Plugin which Laravel uses for auto-refresh (so, it doesn't need any other dependency). However, it lacks all the configs and tweaks from the Mix plugin. // vite.ziggy.js
import { normalizePath } from 'vite';
import { exec } from 'child_process';
import { relative, resolve } from 'path';
import picomatch from 'picomatch';
import colors from 'picocolors';
import ziggy from 'ziggy-js/package.json';
export default function ZiggyPlugin(config) {
const root = process.cwd();
const log = config?.log ?? true;
const delay = config?.delay ?? 0;
return {
name: 'ziggy-plugin',
enforce: 'pre',
apply: 'serve',
// NOTE: Enable globbing so that Vite keeps track of the template files.
config: () => ({ server: { watch: { disableGlobbing: false } } }),
configureServer(server) {
server.httpServer.once('listening', () => {
setTimeout(() => {
server.config.logger.info(`\n ${colors.blue(`${colors.bold('ZIGGY')} v${ziggy.version}`)} ${colors.dim('ready')}`);
}, 200);
});
const files = normalizePath(resolve(root, 'routes/**'));
const command = () => exec('php artisan ziggy:generate');
command();
const shouldReload = picomatch(files);
const checkReload = (path) => {
if (shouldReload(path)) {
setTimeout(command, delay);
if (log) {
server.config.logger.info(`${colors.green(`${relative(root, path)} changed, regenarating ziggy file.`)}`, { clear: true, timestamp: true });
}
}
};
// Ensure Vite keeps track of the files and triggers generation as needed.
server.watcher.add(files);
// Perform a generation if any of the watched files changes.
server.watcher.on('add', checkReload);
server.watcher.on('change', checkReload);
},
};
} // vite.config.js
import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import ziggy from './vite.ziggy.js';
export default defineConfig({
plugins: [
laravel({
input: ['resources/js/app.js', 'resources/scss/app.scss'],
}),
ziggy({
// Indicates if the regenerations must be logged. Default true.
log: false,
// How many milliseconds to wait before regenerating after a file change. Default 0.
delay: 100,
}),
],
}); |
This Answer is work for me |
Description
Is there a way to run ziggy:generate on save of any routes file?
Suggestion
May be inside a mix pipeline?
The text was updated successfully, but these errors were encountered: