PHPackages                             dimtrovich/zygot - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. [API Development](/categories/api)
4. /
5. dimtrovich/zygot

ActiveLibrary[API Development](/categories/api)

dimtrovich/zygot
================

Exporte toutes vos routes nommées BlitzPHP et fournit une fonction route() en JavaScript. Inspiré de tightenco/ziggy

097JavaScript

Since Apr 3Pushed 1y ago1 watchersCompare

[ Source](https://github.com/dimtrovich/zygot)[ Packagist](https://packagist.org/packages/dimtrovich/zygot)[ RSS](/packages/dimtrovich-zygot/feed)WikiDiscussions main Synced yesterday

READMEChangelogDependenciesVersions (1)Used By (0)

[![Zygot - Utilisez vos routes nommées BlitzPHP en JavaScript](https://raw.githubusercontent.com/dimtrovich/zygot/main/zygot-banner.png)](https://raw.githubusercontent.com/dimtrovich/zygot/main/zygot-banner.png)

Zygot – Utilisez vos routes nommées BlitzPHP en JavaScript
==========================================================

[](#zygot--utilisez-vos-routes-nommées-blitzphp-en-javascript)

[![GitHub Actions Status](https://camo.githubusercontent.com/775e4a0a42a38b698ca992fc47bf8db2dde1f4aa6e831a954bed56f3733444c8/68747470733a2f2f696d672e736869656c64732e696f2f6769746875622f616374696f6e732f776f726b666c6f772f7374617475732f64696d74726f766963682f7a79676f742f746573742e796d6c3f6272616e63683d6d61696e267374796c653d666c6174)](https://github.com/dimtrovich/zygot/actions?query=workflow:Tests+branch:main)[![Latest Version on Packagist](https://camo.githubusercontent.com/5e84e928ceddb70ce3583d5e8fd2beb99bee728d4efaf41ded2e773b6b4fb4c4/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f762f64696d74726f766963682f7a79676f742e7376673f7374796c653d666c6174)](https://packagist.org/packages/dimtrovich/zygot)[![Downloads on Packagist](https://camo.githubusercontent.com/ad92058c77777affa956554b30ef4bb0dc63774b7ce83b2d500034d2b04b56da/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f64742f64696d74726f766963682f7a79676f742e7376673f7374796c653d666c6174)](https://packagist.org/packages/dimtrovich/zygot)[![Latest Version on NPM](https://camo.githubusercontent.com/7c6dfd1e35266403fb4ecb3574b74e4b8404e7a0268d4a178535fc6edb9cfd3b/68747470733a2f2f696d672e736869656c64732e696f2f6e706d2f762f7a79676f742d6a732e7376673f7374796c653d666c6174)](https://npmjs.com/package/zygot-js)[![Downloads on NPM](https://camo.githubusercontent.com/96bcb41f68e685bad1f26bea45c712cc67f66484d0fb3e2840b3994dff4d40de/68747470733a2f2f696d672e736869656c64732e696f2f6e706d2f64742f7a79676f742d6a732e7376673f7374796c653d666c6174)](https://npmjs.com/package/zygot-js)

Credits
-------

[](#credits)

Zygot est une réadaptation du package [Ziggy](https://github.com/tighten/ziggy) pour pouvoir avoir le même fonctionnement avec BlitzPHP. De ce fait tout le mérite revient à [Daniel Coulbourne](https://twitter.com/DCoulbourne), [Jake Bathman](https://twitter.com/jakebathman), [Matt Stauffer](https://twitter.com/stauffermatt), [Jacob Baker-Kretzmar](https://twitter.com/bakerkretzmar) et [tous les autres contributeurs](https://github.com/tighten/ziggy/contributors).

---

---

Zygot fournit une fonction d'assistance JavaScript `route()` qui fonctionne comme celle de BlitzPHP, ce qui facilite l'utilisation de vos routes nommées BlitzPHP en JavaScript.

Zygot prend en charge toutes les versions de BlitzPHP à partir de `0.4` et tous les navigateurs modernes.

- [**Installation**](#installation)
- [**Utilisation**](#utilisation)
    - [Le helper `route()`](#le-helper-route)
    - [La classe `Router`](#la-classe-router)
    - [Support TypeScript](#support-typescript)
- [**Configuration avancée**](#configuration-avanc%C3%A9e)
    - [Frameworks JavaScript](#frameworks-javascript)
    - [Vue](#vue)
    - [React](#react)
    - [SPAs o dépôts séparés](#spas-ou-d%C3%A9p%C3%B4ts-s%C3%A9par%C3%A9s)
- [**Filtrage des routes**](#filtrage-des-routes)
    - [Filtrage de base](#filtrage-de-base)
    - [Filtrage à l'aide de groupes](#filtrage-%C3%A0-l'aide-de-groupes)
- [**Autre**](#autre)
- [**Contribution**](#contribution)

Installation
------------

[](#installation)

Installez Zygot dans votre application BlitzPHP avec `composer require dimtrovich/zygot`.

Ajoutez la fonction `` à votre mise en page principale (*avant* le JavaScript de votre application), et la fonction d'assistance `route()` sera désormais disponible globalement dans votre code JavaScript !

> Par défaut, la sortie de la fonction `` inclut une liste de toutes les routes de votre application et de leurs paramètres. Cette liste de routes est incluse dans le code HTML de la page et peut être consultée par les utilisateurs finaux. Pour configurer les itinéraires inclus dans cette liste, ou pour afficher et masquer différentes routes sur différentes pages, consultez [Filtrer les routes](#filtering-routes).

Utilisation
-----------

[](#utilisation)

#### Le helper `route()`

[](#le-helper-route)

La fonction d'aide `route()` de Zygot fonctionne comme celle de BlitzPHP - vous pouvez lui transmettre le nom de l'une de vos routes et les paramètres que vous souhaitez transmettre à la route, et elle renverra une URL.

**Utilisation basique**

```
// app/Config/routes.php

$routes->get('posts', fn (Request $request) => /* ... */, ['as' => 'posts.index']);
```

```
// app.js

route('posts.index'); // 'https://zygot.test/posts'
```

**Avec des paramètres**

```
// app/Config/routes.php

$routes->get('posts/(:num)', fn (int $postId, Request $request) => /* ... */, ['as' => 'posts.show']);

// Uniquement BlitzPHP v0.4.2+
$routes->get('posts/{post}', fn ($post, Request $request) => /* ... */, ['as' => 'posts.show']);
```

```
// app.js

route('posts.show', 1);           // 'https://zygot.test/posts/1'
route('posts.show', [1]);         // 'https://zygot.test/posts/1'
route('posts.show', { post: 1 }); // 'https://zygot.test/posts/1'
```

**Avec plusieurs parametres**

```
// app/Config/routes.php

$routes->get('events/(:num)/venues/(:num)', fn (int $eventId, int $venueId, Request $request) => /* ... */, ['as' => 'events.venues.show']);

// Uniquement BlitzPHP v0.4.2+
$routes->get('events/{event}/venues/{venue}', fn ($event, $venue, Request $request) => /* ... */, ['as' => 'events.venues.show']);
```

```
// app.js

route('events.venues.show', [1, 2]);                 // 'https://zygot.test/events/1/venues/2'
route('events.venues.show', { event: 1, venue: 2 }); // 'https://zygot.test/events/1/venues/2'
```

**Avec les parametres de la requete (query strings)**

```
// app/Config/routes.php

$routes->get('events/(:num)/venues/(:num)', fn (int $eventId, int $venueId, Request $request) => /* ... */, ['as' => 'events.venues.show']);

// Uniquement BlitzPHP v0.4.2+
$routes->get('events/{event}/venues/{venue}', fn ($event, $venue, Request $request) => /* ... */, ['as' => 'events.venues.show']);
```

```
// app.js

route('events.venues.show', {
    event: 1,
    venue: 2,
    page: 5,
    count: 10,
});
// 'https://zygot.test/events/1/venues/2?page=5&count=10'
```

Comme l'assistant `route()` de BlitzPHP, Zygot encode automatiquement les paramètres de requête booléens sous forme d'entiers dans la chaîne de requête :

```
route('events.venues.show', {
    event: 1,
    venue: 2,
	draft: false,
	overdue: true,
});
// 'https://zygot.test/events/1/venues/2?draft=0&overdue=1'
```

**Avec les valeurs de paramètre par défaut**

Voir la [documentation BlitzPHP sur les valeurs des paramètres de route par défaut](https://blitz-php.com/docs/urls#default-values).

```
// app/Config/routes.php

$routes->get('{locale}/posts/(:num)', fn (int $postId, Request $request) => /* ... */, ['as' => 'posts.show']);
```

```
// app/Middlewares/SetLocale.php

config()->set('app.locale', $user->locale ?? 'de');
```

```
// app.js

route('posts.show', 1); // 'https://zygot.test/de/posts/1'
```

**Exemple pratique AJAX**

```
const post = { id: 1, title: 'Zygot Stardust' };

return axios.get(route('posts.show', post)).then((response) => response.data);
```

#### The `Router` class

[](#the-router-class)

Calling Zygot's `route()` helper function with no arguments will return an instance of the JavaScript `Router` class, which has some other useful properties and methods.

**Checking the current route: `route().current()`**

```
// Route called 'events.index', with URI '/events'
// Current window URL is https://zygot.test/events

route().current();               // 'events.index'
route().current('events.index'); // true
route().current('events.*');     // true
route().current('events.show');  // false
```

The `current()` method optionally accepts parameters as its second argument, and will check that their values also match in the current URL:

```
// Route called 'events.venues.show', with URI '/events/{event}/venues/{venue}'
// Current window URL is https://myapp.com/events/1/venues/2?authors=all

route().current('events.venues.show', { event: 1, venue: 2 }); // true
route().current('events.venues.show', { authors: 'all' });     // true
route().current('events.venues.show', { venue: 6 });           // false
```

**Checking if a route exists: `route().has()`**

```
// App has only one named route, 'home'

route().has('home');   // true
route().has('orders'); // false
```

**Retrieving the current route params: `route().params`**

```
// Route called 'events.venues.show', with URI '/events/{event}/venues/{venue}'
// Current window URL is https://myapp.com/events/1/venues/2?authors=all

route().params; // { event: '1', venue: '2', authors: 'all' }
```

> Note: parameter values retrieved with `route().params` will always be returned as strings.

#### TypeScript support

[](#typescript-support)

Pour le moment, aucun support TypeScript n'est disponible pour Zygot. Toutes vos contributions sont les bienvenues

Configuration avancée
---------------------

[](#configuration-avancée)

#### Frameworks JavaScript

[](#frameworks-javascript)

Si vous n'utilisez pas la fonction ``, Zygot fournit une commande Klinge pour sortir sa configuration et ses routes vers un fichier : `php klinge zygot:generate`. Par défaut, cette commande stocke vos routes dans `resources/js/zygot.js`, mais vous pouvez personnaliser ce chemin en passant une valeur différente comme argument à la commande Klinge ou en définissant la valeur de configuration `zygot.output.path`. Alternativement, vous pouvez renvoyer la configuration de Zygot en tant que JSON à partir d'un point de terminaison dans votre API BlitzPHP (voir [Récupérer les routes et la configuration de Zygot à partir d'un point de terminaison API](#retrieving-ziggys-routes-and-config-from-an-api-endpoint) ci-dessous pour un exemple de configuration).

Le fichier généré par `php klinge zygot:generate` ressemblera à ceci :

```
// zygot.js

const Zygot = {
    routes: {"home":{"uri":"\/","methods":["GET","HEAD"],"domain":null},"login":{"uri":"login","methods":["GET","HEAD"],"domain":null}},
    url: 'http://zygot.test',
    port: false
};

export { Zygot };
```

Vous pouvez éventuellement créer un alias pour faciliter l'importation des fichiers source principaux de Zygot :

```
// vite.config.js
export default defineConfig({
    resolve: {
        alias: {
            zygot: 'vendor/dimtrovich/zygot/dist',
            // 'vendor/dimtrovich/zygot/dist/vue.es.js' if using the Vue plugin
        },
    },
});
```

```
// webpack.mix.js

// Mix v6
const path = require('path');

mix.alias({
    zygot: path.resolve('vendor/dimtrovich/zygot/dist'),
    // 'vendor/dimtrovich/zygot/dist/vue' if using the Vue plugin
});

// Mix v5
const path = require('path');

mix.webpackConfig({
    resolve: {
        alias: {
            zygot: path.resolve('vendor/dimtrovich/zygot/dist'),
        },
    },
});
```

Enfin, importez et utilisez Zygot comme n'importe quelle autre bibliothèque JavaScript. Étant donné que l'objet de configuration Zygot n'est pas disponible globalement dans cette configuration, vous devrez généralement le transmettre manuellement à la fonction `route()` :

```
// app.js

import route from 'zygot';
import { Zygot } from './zygot';

// ...

route('home', undefined, undefined, Zygot);
```

#### Vue

[](#vue)

Zygot inclut un plugin Vue pour faciliter l'utilisation du helper `route()` dans votre application Vue :

```
import { createApp } from 'vue';
import { ZiggyVue } from 'zygot';
import { Zygot } from './zygot';
import App from './App';

createApp(App).use(ZiggyVue, Zygot);

// Vue 2
import Vue from 'vue'
import { ZiggyVue } from 'zygot';
import { Zygot } from './zygot';

Vue.use(ZiggyVue, Zygot);
```

Si vous utilisez ce plugin avec l'alias d'importation `zygot` indiqué ci-dessus, assurez-vous de mettre à jour l'alias en `vendor/dimtrovich/zygot/dist/vue.es.js` (Vite) ou `vendor/dimtrovich/zygot/dist/ vue` (Laravel Mix).

> Remarque : Si vous utilisez la fonction `` dans vos vues, la configuration de Zygot sera déjà disponible globalement, vous n'avez donc pas besoin d'importer l'objet de configuration `Zygot` et de le passer dans `use()`.

Vous pouvez désormais utiliser `route()` n'importe où dans vos composants et modèles Vue, comme ceci :

```
Accueil
```

#### React

[](#react)

Pour utiliser Zygot avec React, commencez par importer la fonction `route()` et votre configuration Zygot. Étant donné que l'objet de configuration Zygot n'est pas disponible globalement dans cette configuration, vous devrez le transmettre manuellement à la fonction `route()` :

```
// app.js

import route from 'zygot';
import { Zygot } from './zygot';

// ...

route('home', undefined, undefined, Zygot);
```

Nous travaillons sur l'ajout d'un hook à Zygot pour rendre cela plus propre, mais pour l'instant, assurez-vous de passer l'objet de configuration comme quatrième argument à la fonction `route()` comme indiqué ci-dessus.

> Remarque : Si vous utilisez la fonction `` dans vos vues, le helper `route()` sera déjà disponible globalement, y compris dans votre application React, vous n'avez donc pas besoin d'importer `route` ou `Zygot` partout.

#### SPAs ou dépôts séparés

[](#spas-ou-dépôts-séparés)

La fonction d'aide `route()` de Zygot est également disponible sous forme de package NPM, pour une utilisation dans des projets JavaScript gérés séparément de leur backend BlitzPHP (c'est-à-dire sans Composer ou un répertoire `vendor`). Vous pouvez installer le package NPM avec `npm install zygot-js`.

Pour rendre vos routes disponibles sur le frontend pour cette fonction à utiliser, vous pouvez soit exécuter `php klinge zygot:generate` et ajouter le fichier de routes généré à votre projet, ou vous pouvez renvoyer la configuration de Zygot en tant que JSON à partir d'un point de terminaison dans votre API BlitzPHP (voir [Récupération des routes et de la configuration de Zygot à partir d'un point de terminaison API](#retrieving-ziggys-routes-and-config-from-an-api-endpoint) ci-dessous pour un exemple de configuration).

Ensuite, importez et utilisez Zygot comme ci-dessus :

```
// app.js

import route from 'zygot-js';

import { Zygot } from './zygot';
// ou...
const response = await fetch('/api/zygot');
const Zygot = await response.json();

// ...

route('home', undefined, undefined, Zygot);
```

Filtrage des routes
-------------------

[](#filtrage-des-routes)

Zygot prend en charge le filtrage des routes qu'il met à la disposition de votre JavaScript, ce qui est très bien si vous avez certaines routes que vous ne souhaitez pas voir incluses et visibles dans la source de la réponse renvoyée aux clients. Le filtrage des routes est facultatif. Par défaut, Zygot inclut toutes les routes nommées de votre application.

#### Filtrage de base

[](#filtrage-de-base)

Pour configurer le filtrage de route de base, créez un fichier de configuration dans votre application BlitzPHP à `app/Config/zygot.php` et définissez **soit** un paramètre `only` ou `except` comme un tableau de modèles de noms de route.

> Remarque : Vous devez choisir l'un ou l'autre. Définir à la fois "only" et "except" désactivera complètement le filtrage et renverra toutes les routes nommées.

```
// app/Config/zygot.php

return [
    'only' => ['home', 'posts.index', 'posts.show'],
];
```

Vous pouvez également utiliser des astérisques comme caractères génériques dans les filtres de routage. Dans l'exemple ci-dessous, `admin.*` exclura les routes nommées `admin.login` et `admin.register` :

```
// app/Config/zygot.php

return [
    'except' => ['_debugbar.*', 'horizon.*', 'admin.*'],
];
```

#### Filtrage à l'aide de groupes

[](#filtrage-à-laide-de-groupes)

Vous pouvez également définir des groupes de routes que vous souhaitez rendre disponibles à différents endroits de votre application, à l'aide d'une clé "groups" dans votre fichier de configuration :

```
// app/Config/zygot.php

return [
    'groups' => [
        'admin' => ['admin.*', 'users.*'],
        'author' => ['posts.*'],
    ],
];
```

Ensuite, vous pouvez exposer un groupe spécifique en passant le nom du groupe dans la fonction `zygot()` :

```
// app/Views/layouts/main.php

	---
	...