Generate Laravel routes for typescript (SPA)

GenerateTypescriptRoutes.md

Laravel Command to generate route endpoints that can be used in typescript fully threeshakable.

GenerateTypescriptRoutes.php

<?php

namespace App\Console\Commands;

use Illuminate\Console\Command;
use Illuminate\Support\Str;
use Illuminate\Support\Facades\File;
use Illuminate\Support\Facades\Route;

class GenerateTypescriptRoutes extends Command
{
    /**
     * The name and signature of the console command.
     *
     * @var string
     */
    protected $signature = 'app:generate-typescript-routes';

    /**
     * The console command description.
     *
     * @var string
     */
    protected $description = 'Generate a typescript file with all the routes (treeshakable)';

    /**
     * Execute the console command.
     */
    public function handle()
    {
        $contents = collect(Route::getRoutes()->getRoutesByName())->map(function ($route, $name) {

            preg_match_all('/\{(.*?)\}/', $route->uri(), $args, PREG_SET_ORDER);

            $argstr = collect($args)
                ->map(fn ($a) => $a[1] . ": string | number")
                ->add('query?: QueryParams')
                ->join(', ');

            $path = preg_replace_callback('/\{(.*?)\}/', function ($match) {
                $isOptional = strpos($match[1], '?') !== false;
                return '${' . str_replace('?', '', $match[1]) . ($isOptional ? " ?? ''" : '') . '}';
            }, $route->uri());

            if (substr($path, 0, 1) !== '/') {
                $path = '/'. $path;
            }

            $safeName = Str::snake(str_replace(['-', '.'], '_', $name));

            return "/** {$name} */
export function route_to_{$safeName}({$argstr}) { return withQuery(`{$path}`, query); }\n";
        })->join("\n");

$header = '
// _______  _______  __    _  _______  ______    _______  _______  _______  ______
// |       ||       ||  |  | ||       ||    _ |  |   _   ||       ||       ||      |
// |    ___||    ___||   |_| ||    ___||   | ||  |  |_|  ||_     _||    ___||  _    |
// |   | __ |   |___ |       ||   |___ |   |_||_ |       |  |   |  |   |___ | | |   |
// |   ||  ||    ___||  _    ||    ___||    __  ||       |  |   |  |    ___|| |_|   |
// |   |_| ||   |___ | | |   ||   |___ |   |  | ||   _   |  |   |  |   |___ |       |
// |_______||_______||_|  |__||_______||___|  |_||__| |__|  |___|  |_______||______|
//
// Generated with:
// php artisan app:generate-typescript-routes

export type QueryParams = string | string[][] | Record<string, string> | URLSearchParams | undefined;

function withQuery(path: string, query: QueryParams)  {
  const searchParams = new URLSearchParams(query);
  return `${path}${searchParams.size > 0 ? `?${searchParams.toString()}` : \'\'}`;
}
';
        File::put(resource_path('js/routes.ts'), $header . "\n" . $contents);
        $this->info(resource_path('js/routes.ts') . ' succesfully generated');
    }
}

Example generated routes.ts

// _______  _______  __    _  _______  ______    _______  _______  _______  ______
// |       ||       ||  |  | ||       ||    _ |  |   _   ||       ||       ||      |
// |    ___||    ___||   |_| ||    ___||   | ||  |  |_|  ||_     _||    ___||  _    |
// |   | __ |   |___ |       ||   |___ |   |_||_ |       |  |   |  |   |___ | | |   |
// |   ||  ||    ___||  _    ||    ___||    __  ||       |  |   |  |    ___|| |_|   |
// |   |_| ||   |___ | | |   ||   |___ |   |  | ||   _   |  |   |  |   |___ |       |
// |_______||_______||_|  |__||_______||___|  |_||__| |__|  |___|  |_______||______|
//
// Generated with:
// php artisan app:generate-typescript-routes

export type QueryParams = string | string[][] | Record<string, string> | URLSearchParams | undefined;

function withQuery(path: string, query: QueryParams)  {
  const searchParams = new URLSearchParams(query);
  return `${path}${searchParams.size > 0 ? `?${searchParams.toString()}` : ''}`;
}

/** register */
export function route_to_register(query?: QueryParams) { return withQuery(`/register`, query); }

/** login */
export function route_to_login(query?: QueryParams) { return withQuery(`/login`, query); }

Usage

php artisan app:generate-typescript-routes

App.vue

<template>
    <a :href="route_to_login()">Login</a>
    <a :href="route_to_login({ backUrl: '/homepage' })">Login</a>
</template>
<script lang="ts" setup"></script>