|
| 1 | +[](https://github.com/SynergiTech/laravel-magic-enums/actions/workflows/js-test.yaml) |
| 2 | +[](https://github.com/SynergiTech/laravel-magic-enums/actions/workflows/php-test.yaml) |
| 3 | + |
| 4 | +# Laravel Magic Enums |
| 5 | + |
| 6 | +Have you ever wanted to reference your PHP enums in your frontend code but ended up (or didn't want to end up) duplicating them manually? Well here is your answer. |
| 7 | + |
| 8 | +## Installing |
| 9 | + |
| 10 | +You need both sides to get started. |
| 11 | + |
| 12 | +```sh |
| 13 | +$ composer require synergitech/laravel-magic-enums |
| 14 | +$ npm install --save laravel-magic-enums |
| 15 | +``` |
| 16 | + |
| 17 | +## Getting Started |
| 18 | + |
| 19 | +1. Add the trait from this package to your enums |
| 20 | + |
| 21 | +```php |
| 22 | +<?php |
| 23 | + |
| 24 | +namespace App\Enums; |
| 25 | + |
| 26 | +use SynergiTech\MagicEnums\Traits\WithToVueArray; |
| 27 | + |
| 28 | +enum YourEnum: string |
| 29 | +{ |
| 30 | + use WithToVueArray; |
| 31 | +... |
| 32 | +``` |
| 33 | + |
| 34 | +2. Include the route somewhere in your routes file of choice, in this example we are going to create `/api/enums`. |
| 35 | + |
| 36 | +```php |
| 37 | +<?php |
| 38 | + |
| 39 | +use Illuminate\Support\Facades\Route; |
| 40 | +use SynergiTech\MagicEnums\Facades\MagicEnumsRouteFacade; |
| 41 | + |
| 42 | +Route::prefix('/api')->group(function () { |
| 43 | + MagicEnumsRouteFacade::enumsController(); |
| 44 | +}); |
| 45 | +``` |
| 46 | + |
| 47 | +You can obviously include middleware on it if you wish, e.g. for an authenticated session, but this may affect your frontend's ability to initialise, so please be careful. |
| 48 | + |
| 49 | +We recommend you don't include sensitive information in your enums. |
| 50 | + |
| 51 | +3. We work primarily with Inertia and Vue so the integration looks something like this. Note the use of `async`/`await` and reusing the route we created earlier. |
| 52 | + |
| 53 | +```js |
| 54 | +import { vueEnumPlugin } from "laravel-magic-enums"; |
| 55 | +import { createApp, h } from "vue"; |
| 56 | +import { createInertiaApp } from "@inertiajs/vue3"; |
| 57 | + |
| 58 | +createInertiaApp({ |
| 59 | + resolve: (name) => { |
| 60 | + const pages = import.meta.glob("./Pages/**/*.vue"); |
| 61 | + return pages[`./Pages/${name}.vue`](); |
| 62 | + }, |
| 63 | + |
| 64 | + async setup({ el, App, props, plugin }) { |
| 65 | + createApp({ render: () => h(App, props) }) |
| 66 | + .use(await vueEnumPlugin("/api/enums")) |
| 67 | + .mount(el); |
| 68 | + }, |
| 69 | +... |
| 70 | +``` |
| 71 | +
|
| 72 | +4. During development, you can have Vite reload automatically when your enums change. This is handled by `chokidar`. You might also wish to compile a types definition so your IDE knows the details of the enums. We recommend adding this file to your `.gitignore` file. |
| 73 | +
|
| 74 | +While not necessary, you can also provide a cli command to `prettierCommand` to format the generated TypeScript file according to your project's standards. |
| 75 | +
|
| 76 | +Update your `vite.config.js` as follows. You'll notice we provide both the directory and the endpoint. |
| 77 | +
|
| 78 | +```js |
| 79 | +import { defineConfig } from 'vite'; |
| 80 | +import laravel from 'laravel-vite-plugin'; |
| 81 | +import vue from '@vitejs/plugin-vue'; |
| 82 | +import { laravelMagicEnums } from "laravel-magic-enums/vite"; |
| 83 | + |
| 84 | +export default defineConfig({ |
| 85 | + plugins: [ |
| 86 | + laravel({ |
| 87 | + ... |
| 88 | + }), |
| 89 | + vue({ |
| 90 | + ... |
| 91 | + }), |
| 92 | + laravelMagicEnums({ |
| 93 | + enumDir: "./app/Enums", |
| 94 | + enumEndpoint: "http://localhost/api/enums", |
| 95 | + interfaceOutput: "./resources/js/globals.d.ts", |
| 96 | + prettierCommand: "prettier --write", |
| 97 | + }), |
| 98 | + ], |
| 99 | +... |
| 100 | +``` |
| 101 | +
|
| 102 | +5. Now in your frontend, you can reference your enums as if they were key-value objects. |
| 103 | +
|
| 104 | +```js |
| 105 | +import { useEnums } from 'laravel-magic-enums'; |
| 106 | + |
| 107 | +const { YourEnum, YourOtherEnum } = useEnums(); |
| 108 | +``` |
| 109 | +
|
| 110 | +## Advanced Usage |
| 111 | +
|
| 112 | +### Sub Enums |
| 113 | +
|
| 114 | +You may choose to have an array within your enum of a subset of the values for a specific purpose or grouping. |
| 115 | +
|
| 116 | +If you use the PHP attribute `SynergiTech\MagicEnums\Attributes\AppendConstToMagic`, then an extra enum representing this will be available in the frontend. |
| 117 | +
|
| 118 | +You may also have an array which maps some or all of the values of the enum to a different string. |
| 119 | +
|
| 120 | +If you use the PHP attribute `SynergiTech\MagicEnums\Attributes\AppendValueToMagic`, then an extra enum representing this will be available in the frontend. |
| 121 | +
|
| 122 | +For example: |
| 123 | +
|
| 124 | +```php |
| 125 | +<?php |
| 126 | + |
| 127 | +namespace App\Enums; |
| 128 | + |
| 129 | +use SynergiTech\MagicEnums\Attributes\AppendConstToMagic; |
| 130 | +use SynergiTech\MagicEnums\Attributes\AppendValueToMagic; |
| 131 | +use SynergiTech\MagicEnums\Traits\WithToVueArray; |
| 132 | + |
| 133 | +enum TestingEnum: string |
| 134 | +{ |
| 135 | + use WithToVueArray; |
| 136 | + |
| 137 | + case First = 'first'; |
| 138 | + case Second = 'second'; |
| 139 | + case Third = 'third'; |
| 140 | + |
| 141 | + #[AppendConstToMagic] |
| 142 | + public const JUST_ONE = [ |
| 143 | + self::First, |
| 144 | + ]; |
| 145 | + |
| 146 | + #[AppendValueToMagic] |
| 147 | + public const COLOURS = [ |
| 148 | + self::First->value => 'red', |
| 149 | + ]; |
| 150 | +} |
| 151 | +``` |
| 152 | +
|
| 153 | +Will create the output: |
| 154 | +
|
| 155 | +```js |
| 156 | +TestingEnum: { |
| 157 | + First: "first", |
| 158 | + Second: "second", |
| 159 | + Third: "third" |
| 160 | +}, |
| 161 | +TestingEnumJustOne: { |
| 162 | + First: "first" |
| 163 | +}, |
| 164 | +TestingEnumColours: { |
| 165 | + First: "red" |
| 166 | +} |
| 167 | +``` |
| 168 | +
|
| 169 | +### Cache and Versioning |
| 170 | +
|
| 171 | +To avoid rebuilding the json everytime the endpoint is requested, you can add a file named `VERSION` to your root folder. Magic Enums will determine whether to cache the output based on the time this file was last touched. You can specify a custom cache key in the config. |
0 commit comments