Migrate to typelizer routes

Author: skryukov

Gemfile

@@ -47,7 +47,7 @@ gem "inertia_rails", "~> 3.19"
 gem "authentication-zero"
 
 # Brings Rails named routes to javascript
-gem "js-routes"
+gem "typelizer"
 
 group :development, :test do
   # See https://guides.rubyonrails.org/debugging_rails_applications.html#debugging-with-the-debug-gem

Gemfile.lock

@@ -82,9 +82,10 @@ GEM
     base64 (0.3.0)
     bcrypt (3.1.22)
     bcrypt_pbkdf (1.1.2)
+    benchmark (0.5.0)
     bigdecimal (4.1.2)
     bindex (0.8.1)
-    bootsnap (1.23.0)
+    bootsnap (1.24.1)
       msgpack (~> 1.2)
     brakeman (8.0.4)
       racc
@@ -145,9 +146,6 @@ GEM
     jbuilder (2.14.1)
       actionview (>= 7.0.0)
       activesupport (>= 7.0.0)
-    js-routes (2.3.6)
-      railties (>= 5)
-      sorbet-runtime
     json (2.19.4)
     kamal (2.11.0)
       activesupport (>= 7.0)
@@ -181,12 +179,12 @@ GEM
     marcel (1.1.0)
     matrix (0.4.3)
     mini_mime (1.1.5)
-    minitest (6.0.5)
+    minitest (6.0.6)
       drb (~> 2.0)
       prism (~> 1.5)
     msgpack (1.8.0)
     mutex_m (0.3.0)
-    net-imap (0.6.3)
+    net-imap (0.6.4)
       date
       net-protocol
     net-pop (0.1.2)
@@ -201,22 +199,22 @@ GEM
       net-protocol
     net-ssh (7.3.2)
     nio4r (2.7.5)
-    nokogiri (1.19.2-aarch64-linux-gnu)
+    nokogiri (1.19.3-aarch64-linux-gnu)
       racc (~> 1.4)
-    nokogiri (1.19.2-aarch64-linux-musl)
+    nokogiri (1.19.3-aarch64-linux-musl)
       racc (~> 1.4)
-    nokogiri (1.19.2-arm-linux-gnu)
+    nokogiri (1.19.3-arm-linux-gnu)
       racc (~> 1.4)
-    nokogiri (1.19.2-arm-linux-musl)
+    nokogiri (1.19.3-arm-linux-musl)
       racc (~> 1.4)
-    nokogiri (1.19.2-arm64-darwin)
+    nokogiri (1.19.3-arm64-darwin)
       racc (~> 1.4)
-    nokogiri (1.19.2-x86_64-linux-gnu)
+    nokogiri (1.19.3-x86_64-linux-gnu)
       racc (~> 1.4)
-    nokogiri (1.19.2-x86_64-linux-musl)
+    nokogiri (1.19.3-x86_64-linux-musl)
       racc (~> 1.4)
     ostruct (0.6.3)
-    parallel (2.0.1)
+    parallel (2.1.0)
     parser (3.3.11.1)
       ast (~> 2.4.1)
       racc
@@ -232,7 +230,7 @@ GEM
       date
       stringio
     public_suffix (7.0.5)
-    puma (8.0.0)
+    puma (8.0.1)
       nio4r (~> 2.0)
     raabro (1.4.0)
     racc (1.8.1)
@@ -356,7 +354,6 @@ GEM
       fugit (~> 1.11)
       railties (>= 7.1)
       thor (>= 1.3.1)
-    sorbet-runtime (0.6.13153)
     sqlite3 (2.9.3-aarch64-linux-gnu)
     sqlite3 (2.9.3-aarch64-linux-musl)
     sqlite3 (2.9.3-arm-linux-gnu)
@@ -379,6 +376,9 @@ GEM
     thruster (0.1.20-x86_64-linux)
     timeout (0.6.1)
     tsort (0.2.0)
+    typelizer (0.13.0)
+      benchmark
+      railties (>= 6.1.0)
     tzinfo (2.0.6)
       concurrent-ruby (~> 1.0)
     unicode-display_width (3.2.0)
@@ -431,7 +431,6 @@ DEPENDENCIES
   factory_bot_rails
   inertia_rails (~> 3.19)
   jbuilder
-  js-routes
   kamal
   letter_opener
   propshaft
@@ -445,6 +444,7 @@ DEPENDENCIES
   solid_queue
   sqlite3 (>= 2.1)
   thruster
+  typelizer
   tzinfo-data
   vite_rails (~> 3.0)
   web-console

app/frontend/components/app-header.tsx

@@ -32,7 +32,7 @@ import {
 import { UserMenuContent } from "@/components/user-menu-content"
 import { useInitials } from "@/hooks/use-initials"
 import { cn } from "@/lib/utils"
-import { dashboardPath } from "@/routes"
+import { dashboard } from "@/routes"
 import type { BreadcrumbItem, NavItem } from "@/types"
 
 import AppLogo from "./app-logo"
@@ -41,7 +41,7 @@ import AppLogoIcon from "./app-logo-icon"
 const mainNavItems: NavItem[] = [
   {
     title: "Dashboard",
-    href: dashboardPath(),
+    href: dashboard.index().url,
     icon: LayoutGrid,
   },
 ]
@@ -134,7 +134,7 @@ export function AppHeader({ breadcrumbs = [] }: AppHeaderProps) {
           </div>
 
           <Link
-            href={dashboardPath()}
+            href={dashboard.index()}
             prefetch
             className="flex items-center space-x-2"
           >

app/frontend/components/app-sidebar.tsx

@@ -13,15 +13,15 @@ import {
   SidebarMenuButton,
   SidebarMenuItem,
 } from "@/components/ui/sidebar"
-import { dashboardPath } from "@/routes"
+import { dashboard } from "@/routes"
 import type { NavItem } from "@/types"
 
 import AppLogo from "./app-logo"
 
 const mainNavItems: NavItem[] = [
   {
     title: "Dashboard",
-    href: dashboardPath(),
+    href: dashboard.index().url,
     icon: LayoutGrid,
   },
 ]
@@ -46,7 +46,7 @@ export function AppSidebar() {
         <SidebarMenu>
           <SidebarMenuItem>
             <SidebarMenuButton size="lg" asChild>
-              <Link href={dashboardPath()} prefetch>
+              <Link href={dashboard.index()} prefetch>
                 <AppLogo />
               </Link>
             </SidebarMenuButton>

app/frontend/components/delete-user.tsx

@@ -14,7 +14,7 @@ import {
 } from "@/components/ui/dialog"
 import { Field, FieldError, FieldLabel } from "@/components/ui/field"
 import { Input } from "@/components/ui/input"
-import { usersPath } from "@/routes"
+import { users } from "@/routes"
 
 export default function DeleteUser() {
   const passwordInput = useRef<HTMLInputElement>(null)
@@ -47,8 +47,7 @@ export default function DeleteUser() {
               you would like to permanently delete your account.
             </DialogDescription>
             <Form
-              method="delete"
-              action={usersPath()}
+              action={users.destroy()}
               options={{
                 preserveScroll: true,
               }}

app/frontend/components/user-menu-content.tsx

@@ -9,7 +9,7 @@ import {
 } from "@/components/ui/dropdown-menu"
 import { UserInfo } from "@/components/user-info"
 import { useMobileNavigation } from "@/hooks/use-mobile-navigation"
-import { sessionPath, settingsProfilePath } from "@/routes"
+import { sessions, settingsProfiles } from "@/routes"
 import type { User } from "@/types"
 
 interface UserMenuContentProps {
@@ -42,7 +42,7 @@ export function UserMenuContent({ auth }: UserMenuContentProps) {
         <DropdownMenuItem asChild>
           <Link
             className="block w-full"
-            href={settingsProfilePath()}
+            href={settingsProfiles.show()}
             as="button"
             prefetch
             onClick={cleanup}
@@ -56,8 +56,7 @@ export function UserMenuContent({ auth }: UserMenuContentProps) {
       <DropdownMenuItem asChild>
         <Link
           className="block w-full"
-          method="delete"
-          href={sessionPath({ id: session.id })}
+          href={sessions.destroy(session.id)}
           as="button"
           onClick={handleLogout}
         >

app/frontend/layouts/auth/auth-card-layout.tsx

@@ -9,7 +9,7 @@ import {
   CardHeader,
   CardTitle,
 } from "@/components/ui/card"
-import { rootPath } from "@/routes"
+import { home } from "@/routes"
 
 export default function AuthCardLayout({
   children,
@@ -24,7 +24,7 @@ export default function AuthCardLayout({
     <div className="bg-muted flex min-h-svh flex-col items-center justify-center gap-6 p-6 md:p-10">
       <div className="flex w-full max-w-md flex-col gap-6">
         <Link
-          href={rootPath()}
+          href={home.index()}
           className="flex items-center gap-2 self-center font-medium"
         >
           <div className="flex h-9 w-9 items-center justify-center">

app/frontend/layouts/auth/auth-simple-layout.tsx

@@ -2,7 +2,7 @@ import { Link } from "@inertiajs/react"
 import type { PropsWithChildren } from "react"
 
 import AppLogoIcon from "@/components/app-logo-icon"
-import { rootPath } from "@/routes"
+import { home } from "@/routes"
 
 interface AuthLayoutProps {
   name?: string
@@ -21,7 +21,7 @@ export default function AuthSimpleLayout({
         <div className="flex flex-col gap-8">
           <div className="flex flex-col items-center gap-4">
             <Link
-              href={rootPath()}
+              href={home.index()}
               className="flex flex-col items-center gap-2 font-medium"
             >
               <div className="mb-1 flex size-14 items-center justify-center rounded-md">

app/frontend/layouts/auth/auth-split-layout.tsx

@@ -2,7 +2,7 @@ import { Link } from "@inertiajs/react"
 import type { PropsWithChildren } from "react"
 
 import AppLogoIcon from "@/components/app-logo-icon"
-import { rootPath } from "@/routes"
+import { home } from "@/routes"
 
 interface AuthLayoutProps {
   title?: string
@@ -19,7 +19,7 @@ export default function AuthSplitLayout({
       <div className="bg-muted relative hidden h-full flex-col p-10 text-white lg:flex dark:border-r">
         <div className="absolute inset-0 bg-zinc-900" />
         <Link
-          href={rootPath()}
+          href={home.index()}
           className="relative z-20 flex items-center text-lg font-medium"
         >
           <AppLogoIcon className="mr-2 size-8 fill-current text-white" />
@@ -39,7 +39,7 @@ export default function AuthSplitLayout({
       <div className="w-full lg:p-8">
         <div className="mx-auto flex w-full flex-col justify-center space-y-6 sm:w-[350px]">
           <Link
-            href={rootPath()}
+            href={home.index()}
             className="relative z-20 flex items-center justify-center lg:hidden"
           >
             <AppLogoIcon className="h-10 fill-current text-black sm:h-12" />

app/frontend/layouts/settings/layout.tsx

@@ -6,39 +6,34 @@ import { Button } from "@/components/ui/button"
 import { Separator } from "@/components/ui/separator"
 import { cn } from "@/lib/utils"
 import {
-  settingsAppearancePath,
-  settingsEmailPath,
-  settingsPasswordPath,
-  settingsProfilePath,
-  settingsSessionsPath,
+  settingsAppearance,
+  settingsEmails,
+  settingsPasswords,
+  settingsProfiles,
+  settingsSessions,
 } from "@/routes"
 import type { NavItem } from "@/types"
 
 const sidebarNavItems: NavItem[] = [
   {
     title: "Profile",
-    href: settingsProfilePath(),
-    icon: null,
+    href: settingsProfiles.show().url,
   },
   {
     title: "Email",
-    href: settingsEmailPath(),
-    icon: null,
+    href: settingsEmails.show().url,
   },
   {
     title: "Password",
-    href: settingsPasswordPath(),
-    icon: null,
+    href: settingsPasswords.show().url,
   },
   {
     title: "Sessions",
-    href: settingsSessionsPath(),
-    icon: null,
+    href: settingsSessions.index().url,
   },
   {
     title: "Appearance",
-    href: settingsAppearancePath(),
-    icon: null,
+    href: settingsAppearance().url,
   },
 ]