Setup Alba for Inertia

skryukov · skryukov · commit e36b79cc11a5 · 2025-12-08T22:47:58.000+03:00
diff --git a/.prettierignore b/.prettierignore
@@ -3,3 +3,4 @@ build
 coverage
 
 app/frontend/routes
+app/frontend/types/serializers
diff --git a/Gemfile b/Gemfile
@@ -49,6 +49,11 @@ gem "authentication-zero"
 # Brings Rails named routes to javascript
 gem "js-routes"
 
+# Use Abla and Typelizer for CoC rendering
+gem "alba", "~> 3.10"
+gem "alba-inertia", "~> 0.1.2"
+gem "typelizer", "~> 0.5.4"
+
 group :development, :test do
   # See https://guides.rubyonrails.org/debugging_rails_applications.html#debugging-with-the-debug-gem
   gem "debug", platforms: %i[ mri windows ], require: "debug/prelude"
diff --git a/Gemfile.lock b/Gemfile.lock
@@ -77,11 +77,17 @@ GEM
       uri (>= 0.13.1)
     addressable (2.8.8)
       public_suffix (>= 2.0.2, < 8.0)
+    alba (3.10.0)
+    alba-inertia (0.1.2)
+      alba
+      inertia_rails
+      zeitwerk
     ast (2.4.3)
     authentication-zero (4.0.3)
     base64 (0.3.0)
     bcrypt (3.1.20)
     bcrypt_pbkdf (1.1.2)
+    benchmark (0.5.0)
     bigdecimal (3.3.1)
     bindex (0.8.1)
     bootsnap (1.19.0)
@@ -378,6 +384,9 @@ GEM
     thruster (0.1.16-x86_64-linux)
     timeout (0.5.0)
     tsort (0.2.0)
+    typelizer (0.5.4)
+      benchmark
+      railties (>= 6.0.0)
     tzinfo (2.0.6)
       concurrent-ruby (~> 1.0)
     unicode-display_width (3.2.0)
@@ -420,6 +429,8 @@ PLATFORMS
   x86_64-linux-musl
 
 DEPENDENCIES
+  alba (~> 3.10)
+  alba-inertia (~> 0.1.2)
   authentication-zero
   bcrypt (~> 3.1.7)
   bootsnap
@@ -445,6 +456,7 @@ DEPENDENCIES
   solid_queue
   sqlite3 (>= 2.1)
   thruster
+  typelizer (~> 0.5.4)
   tzinfo-data
   vite_rails (~> 3.0)
   web-console
diff --git a/app/controllers/identity/password_resets_controller.rb b/app/controllers/identity/password_resets_controller.rb
@@ -9,7 +9,8 @@ def new
   end
 
   def edit
-    render inertia: {email: @user.email, sid: params[:sid]}
+    @email = @user.email
+    @sid = params[:sid]
   end
 
   def create
diff --git a/app/controllers/inertia_controller.rb b/app/controllers/inertia_controller.rb
@@ -1,12 +1,9 @@
 # frozen_string_literal: true
 
 class InertiaController < ApplicationController
-  inertia_config default_render: true
-  inertia_share flash: -> { flash.to_hash },
-      auth: {
-        user: -> { Current.user.as_json(only: %i[id name email verified created_at updated_at]) },
-        session: -> { Current.session.as_json(only: %i[id]) }
-      }
+  include Alba::Inertia::Controller
+
+  inertia_share { SharedPropsSerializer.new(self).to_inertia }
 
   private
 
diff --git a/app/controllers/settings/sessions_controller.rb b/app/controllers/settings/sessions_controller.rb
@@ -2,8 +2,6 @@
 
 class Settings::SessionsController < InertiaController
   def index
-    sessions = Current.user.sessions.order(created_at: :desc)
-
-    render inertia: {sessions: sessions.as_json(only: %i[id user_agent ip_address created_at])}
+    @sessions = Current.user.sessions.order(created_at: :desc)
   end
 end
diff --git a/app/controllers/users_controller.rb b/app/controllers/users_controller.rb
@@ -5,7 +5,6 @@ class UsersController < InertiaController
   before_action :require_no_authentication, only: %i[new create]
 
   def new
-    @user = User.new
   end
 
   def create
diff --git a/app/frontend/components/app-header.tsx b/app/frontend/components/app-header.tsx
@@ -213,7 +213,7 @@ export function AppHeader({ breadcrumbs = [] }: AppHeaderProps) {
               <DropdownMenuTrigger asChild>
                 <Button variant="ghost" className="size-10 rounded-full p-1">
                   <Avatar className="size-8 overflow-hidden rounded-full">
-                    <AvatarImage src={auth.user.avatar} alt={auth.user.name} />
+                    <AvatarImage alt={auth.user.name} />
                     <AvatarFallback className="rounded-lg bg-neutral-200 text-black dark:bg-neutral-700 dark:text-white">
                       {getInitials(auth.user.name)}
                     </AvatarFallback>
diff --git a/app/frontend/components/user-info.tsx b/app/frontend/components/user-info.tsx
@@ -14,7 +14,7 @@ export function UserInfo({
   return (
     <>
       <Avatar className="h-8 w-8 overflow-hidden rounded-full">
-        <AvatarImage src={user.avatar} alt={user.name} />
+        <AvatarImage alt={user.name} />
         <AvatarFallback className="rounded-lg bg-neutral-200 text-black dark:bg-neutral-700 dark:text-white">
           {getInitials(user.name)}
         </AvatarFallback>
diff --git a/app/frontend/components/user-menu-content.tsx b/app/frontend/components/user-menu-content.tsx
@@ -10,15 +10,10 @@ import {
 import { UserInfo } from "@/components/user-info"
 import { useMobileNavigation } from "@/hooks/use-mobile-navigation"
 import { sessionPath, settingsProfilePath } from "@/routes"
-import type { User } from "@/types"
+import type { SharedProps } from "@/types"
 
 interface UserMenuContentProps {
-  auth: {
-    session: {
-      id: string
-    }
-    user: User
-  }
+  auth: SharedProps["auth"]
 }
 
 export function UserMenuContent({ auth }: UserMenuContentProps) {
diff --git a/app/frontend/pages/identity/password_resets/edit.tsx b/app/frontend/pages/identity/password_resets/edit.tsx
@@ -7,13 +7,12 @@ import { Label } from "@/components/ui/label"
 import { Spinner } from "@/components/ui/spinner"
 import AuthLayout from "@/layouts/auth-layout"
 import { identityPasswordResetPath } from "@/routes"
+import type { IdentityPasswordResetsEdit } from "@/types"
 
-interface ResetPasswordProps {
-  sid: string
-  email: string
-}
-
-export default function ResetPassword({ sid, email }: ResetPasswordProps) {
+export default function ResetPassword({
+  sid,
+  email,
+}: IdentityPasswordResetsEdit) {
   return (
     <AuthLayout
       title="Reset password"
diff --git a/app/frontend/pages/settings/sessions/index.tsx b/app/frontend/pages/settings/sessions/index.tsx
@@ -6,7 +6,7 @@ import { Button } from "@/components/ui/button"
 import AppLayout from "@/layouts/app-layout"
 import SettingsLayout from "@/layouts/settings/layout"
 import { sessionPath, settingsSessionsPath } from "@/routes"
-import type { BreadcrumbItem, Session } from "@/types"
+import type { BreadcrumbItem, SettingsSessionsIndex } from "@/types"
 
 const breadcrumbs: BreadcrumbItem[] = [
   {
@@ -15,11 +15,7 @@ const breadcrumbs: BreadcrumbItem[] = [
   },
 ]
 
-interface SessionsProps {
-  sessions: Session[]
-}
-
-export default function Sessions({ sessions }: SessionsProps) {
+export default function Sessions({ sessions }: SettingsSessionsIndex) {
   const { auth } = usePage().props
 
   return (
diff --git a/app/frontend/types/global.d.ts b/app/frontend/types/global.d.ts
@@ -1,7 +1,7 @@
-import type { SharedData } from "./index"
+import type { SharedProps } from "@/types"
 
 declare module "@inertiajs/core" {
   export interface InertiaConfig {
-    sharedPageProps: SharedData
+    sharedPageProps: SharedProps
   }
 }
diff --git a/app/frontend/types/index.ts b/app/frontend/types/index.ts
@@ -1,9 +1,6 @@
 import type { LucideIcon } from "lucide-react"
 
-export interface Auth {
-  user: User
-  session: Pick<Session, "id">
-}
+export * from "@/types/serializers"
 
 export interface BreadcrumbItem {
   title: string
@@ -21,26 +18,3 @@ export interface Flash {
   alert?: string
   notice?: string
 }
-
-export interface SharedData {
-  auth: Auth
-  flash: Flash
-}
-
-export interface User {
-  id: number
-  name: string
-  email: string
-  avatar?: string
-  verified: boolean
-  created_at: string
-  updated_at: string
-  [key: string]: unknown // This allows for additional properties...
-}
-
-export interface Session {
-  id: string
-  user_agent: string
-  ip_address: string
-  created_at: string
-}
diff --git a/app/frontend/types/serializers/Auth.ts b/app/frontend/types/serializers/Auth.ts
@@ -0,0 +1,11 @@
+// Typelizer digest 5c8311bdf86f5b7572b202327953ecec
+//
+// DO NOT MODIFY: This file was automatically generated by Typelizer.
+import type {User, Session} from '@/types'
+
+type Auth = {
+  user: User;
+  session: Session;
+}
+
+export default Auth;
diff --git a/app/frontend/types/serializers/IdentityPasswordResetsEdit.ts b/app/frontend/types/serializers/IdentityPasswordResetsEdit.ts
@@ -0,0 +1,10 @@
+// Typelizer digest 6a1840911deef0a61af477dd94f6f568
+//
+// DO NOT MODIFY: This file was automatically generated by Typelizer.
+
+type IdentityPasswordResetsEdit = {
+  email: string;
+  sid?: string;
+}
+
+export default IdentityPasswordResetsEdit;
diff --git a/app/frontend/types/serializers/Session.ts b/app/frontend/types/serializers/Session.ts
@@ -0,0 +1,16 @@
+// Typelizer digest 29f1d80675cd43bb64942096d4c48d23
+//
+// DO NOT MODIFY: This file was automatically generated by Typelizer.
+
+type Session = {
+  id: number;
+}
+
+type SessionDetailsTrait = {
+  user_agent: string | null;
+  ip_address: string | null;
+  created_at: string;
+}
+
+export default Session;
+export type { SessionDetailsTrait };
diff --git a/app/frontend/types/serializers/SettingsSessionsIndex.ts b/app/frontend/types/serializers/SettingsSessionsIndex.ts
@@ -0,0 +1,10 @@
+// Typelizer digest 828615176a64fb2ba75b2d47f4863a87
+//
+// DO NOT MODIFY: This file was automatically generated by Typelizer.
+import type {Session, SessionDetailsTrait} from '@/types'
+
+type SettingsSessionsIndex = {
+  sessions: Array<Session & SessionDetailsTrait>;
+}
+
+export default SettingsSessionsIndex;
diff --git a/app/frontend/types/serializers/SharedProps.ts b/app/frontend/types/serializers/SharedProps.ts
@@ -0,0 +1,11 @@
+// Typelizer digest eab446289062e8a43bfb41a4b3831419
+//
+// DO NOT MODIFY: This file was automatically generated by Typelizer.
+import type {Flash, Auth} from '@/types'
+
+type SharedProps = {
+  flash: Flash;
+  auth: Auth;
+}
+
+export default SharedProps;
diff --git a/app/frontend/types/serializers/User.ts b/app/frontend/types/serializers/User.ts
@@ -0,0 +1,14 @@
+// Typelizer digest 6dc76f4ac4e0569b14fd395215e42125
+//
+// DO NOT MODIFY: This file was automatically generated by Typelizer.
+
+type User = {
+  id: number;
+  name: string;
+  email: string;
+  verified: boolean;
+  created_at: string;
+  updated_at: string;
+}
+
+export default User;
diff --git a/app/frontend/types/serializers/index.ts b/app/frontend/types/serializers/index.ts
@@ -0,0 +1,9 @@
+// Typelizer digest 9623eb46d29598224157553ab4f0568c
+//
+// DO NOT MODIFY: This file was automatically generated by Typelizer.
+export type { default as Auth } from './Auth'
+export type { default as IdentityPasswordResetsEdit } from './IdentityPasswordResetsEdit'
+export type { default as Session, SessionDetailsTrait } from './Session'
+export type { default as SettingsSessionsIndex } from './SettingsSessionsIndex'
+export type { default as SharedProps } from './SharedProps'
+export type { default as User } from './User'
diff --git a/app/serializers/application_serializer.rb b/app/serializers/application_serializer.rb
@@ -0,0 +1,10 @@
+# frozen_string_literal: true
+
+class ApplicationSerializer
+  include Alba::Resource
+
+  helper Typelizer::DSL
+  helper Alba::Inertia::Resource
+
+  include Rails.application.routes.url_helpers
+end
diff --git a/app/serializers/auth_serializer.rb b/app/serializers/auth_serializer.rb
@@ -0,0 +1,6 @@
+# frozen_string_literal: true
+
+class AuthSerializer < ApplicationSerializer
+  one :user
+  one :session
+end
diff --git a/app/serializers/identity/password_resets_edit_serializer.rb b/app/serializers/identity/password_resets_edit_serializer.rb
@@ -0,0 +1,8 @@
+# frozen_string_literal: true
+
+module Identity
+  class PasswordResetsEditSerializer < ApplicationSerializer
+    attributes :email, :sid
+    typelize email: :string, sid: :string?
+  end
+end
diff --git a/app/serializers/session_serializer.rb b/app/serializers/session_serializer.rb
@@ -0,0 +1,9 @@
+# frozen_string_literal: true
+
+class SessionSerializer < ApplicationSerializer
+  attributes :id
+
+  trait :details do
+    attributes :user_agent, :ip_address, :created_at
+  end
+end
diff --git a/app/serializers/settings/sessions_index_serializer.rb b/app/serializers/settings/sessions_index_serializer.rb
@@ -0,0 +1,7 @@
+# frozen_string_literal: true
+
+module Settings
+  class SessionsIndexSerializer < ApplicationSerializer
+    has_many :sessions, with_traits: :details
+  end
+end
diff --git a/app/serializers/shared_props_serializer.rb b/app/serializers/shared_props_serializer.rb
@@ -0,0 +1,10 @@
+# frozen_string_literal: true
+
+class SharedPropsSerializer < ApplicationSerializer
+  typelize "Flash"
+  attribute :flash do |object, _|
+    object.flash.to_hash
+  end
+
+  one :auth, source: proc { Current }
+end
diff --git a/app/serializers/user_serializer.rb b/app/serializers/user_serializer.rb
@@ -0,0 +1,5 @@
+# frozen_string_literal: true
+
+class UserSerializer < ApplicationSerializer
+  attributes :id, :name, :email, :verified, :created_at, :updated_at
+end
diff --git a/config/initializers/alba.rb b/config/initializers/alba.rb
@@ -0,0 +1,4 @@
+# frozen_string_literal: true
+
+Alba.backend = :active_support
+Alba.inflector = :active_support
diff --git a/eslint.config.js b/eslint.config.js
@@ -9,7 +9,7 @@ import tseslint from "typescript-eslint"
 /** @type {import('eslint').Linter.Config[]} */
 export default [
   { files: ["app/frontend/**/*.{js,mjs,cjs,ts,jsx,tsx}"] },
-  { ignores: ["app/frontend/routes/*"] },
+  { ignores: ["app/frontend/routes/*", "app/frontend/types/serializers/*"] },
   {
     settings: {
       react: {
diff --git a/package-lock.json b/package-lock.json

Original file line number	Diff line number	Diff line change
`@@ -3,3 +3,4 @@ build`
`3`	`3`	`coverage`
`4`	`4`
`5`	`5`	`app/frontend/routes`
	`6`	`+app/frontend/types/serializers`