create-fluxstack 1.10.1 → 1.12.0

package/app/client/src/pages/ApiTestPage.tsx

@@ -0,0 +1,108 @@
+import type { ReactNode } from 'react'
+import { BackButton } from '../components/BackButton'
+
+export function ApiTestPage({
+  apiResponse,
+  isLoading,
+  onHealth,
+  onGetUsers,
+  onCreateUser
+}: {
+  apiResponse: string
+  isLoading: boolean
+  onHealth: () => void
+  onGetUsers: () => void
+  onCreateUser: () => void
+}) {
+  return (
+    <div className="container mx-auto px-4 py-8 max-w-4xl">
+      <div className="flex items-center gap-4 mb-8">
+        <BackButton />
+        <h1 className="text-3xl font-bold bg-gradient-to-r from-blue-400 via-purple-400 to-pink-400 bg-clip-text text-transparent">
+          Eden Treaty API Test
+        </h1>
+      </div>
+
+      <div className="grid grid-cols-1 md:grid-cols-3 gap-4 mb-8">
+        <ActionCard
+          icon="🏥"
+          title="GET /api/health"
+          subtitle="Health Check"
+          onClick={onHealth}
+          disabled={isLoading}
+          className="bg-emerald-500/20 border-emerald-500/30 text-emerald-300 hover:bg-emerald-500/30"
+        />
+        <ActionCard
+          icon="👥"
+          title="GET /api/users"
+          subtitle="List Users"
+          onClick={onGetUsers}
+          disabled={isLoading}
+          className="bg-blue-500/20 border-blue-500/30 text-blue-300 hover:bg-blue-500/30"
+        />
+        <ActionCard
+          icon="➕"
+          title="POST /api/users"
+          subtitle="Create User"
+          onClick={onCreateUser}
+          disabled={isLoading}
+          className="bg-purple-500/20 border-purple-500/30 text-purple-300 hover:bg-purple-500/30"
+        />
+      </div>
+
+      <div className="bg-black/40 backdrop-blur-sm border border-white/10 rounded-2xl p-6">
+        <div className="flex items-center justify-between mb-4">
+          <h2 className="text-lg font-semibold text-white">Response</h2>
+          {isLoading && (
+            <div className="flex items-center gap-2 text-yellow-400">
+              <div className="w-4 h-4 border-2 border-yellow-400 border-t-transparent rounded-full animate-spin"></div>
+              Loading...
+            </div>
+          )}
+        </div>
+        <pre className="bg-black/60 rounded-xl p-4 overflow-auto max-h-96 text-sm font-mono">
+          <code className="text-green-400">
+            {apiResponse || '// Click a button above to test the API\\n// Type inference works automatically!'}
+          </code>
+        </pre>
+      </div>
+
+      <div className="mt-8 bg-white/5 border border-white/10 rounded-xl p-6">
+        <h3 className="text-lg font-semibold text-white mb-3">How it works</h3>
+        <div className="text-gray-400 text-sm space-y-2">
+          <p>OK <code className="text-purple-400">api.health.get()</code> - Full type inference from server</p>
+          <p>OK <code className="text-purple-400">api.users.post({'{ name, email }'})</code> - Request body is typed</p>
+          <p>OK <code className="text-purple-400">{'{ data, error }'}</code> - Response is typed automatically</p>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+function ActionCard({
+  icon,
+  title,
+  subtitle,
+  onClick,
+  disabled,
+  className
+}: {
+  icon: ReactNode
+  title: string
+  subtitle: string
+  onClick: () => void
+  disabled: boolean
+  className: string
+}) {
+  return (
+    <button
+      onClick={onClick}
+      disabled={disabled}
+      className={`px-6 py-4 border rounded-xl font-medium transition-all disabled:opacity-50 ${className}`}
+    >
+      <div className="text-2xl mb-2">{icon}</div>
+      <div>{title}</div>
+      <div className="text-xs opacity-70 mt-1">{subtitle}</div>
+    </button>
+  )
+}

package/app/client/src/pages/HomePage.tsx

@@ -0,0 +1,76 @@
+import { Link } from 'react-router'
+import { FaFire } from 'react-icons/fa'
+
+export function HomePage({ apiStatus }: { apiStatus: 'checking' | 'online' | 'offline' }) {
+  return (
+    <div className="flex flex-col items-center justify-center min-h-[calc(100vh-72px)] px-6 text-center">
+      <div className="mb-8 animate-pulse-slow">
+        <FaFire className="text-8xl text-orange-500 drop-shadow-2xl" />
+      </div>
+
+      <h1 className="text-6xl md:text-7xl font-bold mb-4 bg-gradient-to-r from-blue-400 via-purple-400 to-pink-400 bg-clip-text text-transparent">
+        FluxStack
+      </h1>
+
+      <p className="text-xl md:text-2xl text-gray-300 mb-8 max-w-2xl">
+        Full-stack TypeScript framework with{' '}
+        <span className="text-purple-400 font-semibold">Bun</span>,{' '}
+        <span className="text-blue-400 font-semibold">Elysia</span>, and{' '}
+        <span className="text-cyan-400 font-semibold">React</span>
+      </p>
+
+      <div className="mb-12">
+        <div className={`inline-flex items-center gap-2 px-4 py-2 rounded-full text-sm font-medium transition-all ${
+          apiStatus === 'online'
+            ? 'bg-emerald-500/20 text-emerald-300 border border-emerald-500/30'
+            : apiStatus === 'offline'
+            ? 'bg-red-500/20 text-red-300 border border-red-500/30'
+            : 'bg-yellow-500/20 text-yellow-300 border border-yellow-500/30'
+        }`}>
+          <div className={`w-2 h-2 rounded-full ${
+            apiStatus === 'online' ? 'bg-emerald-400' : apiStatus === 'offline' ? 'bg-red-400' : 'bg-yellow-400'
+          }`}></div>
+          <span>{apiStatus === 'checking' ? 'Checking API...' : apiStatus === 'online' ? 'API Online' : 'API Offline'}</span>
+        </div>
+      </div>
+
+      <div className="grid grid-cols-1 md:grid-cols-3 gap-6 mb-12 max-w-4xl">
+        <div className="bg-white/5 backdrop-blur-sm border border-white/10 rounded-2xl p-6 hover:bg-white/10 transition-all">
+          <div className="text-3xl mb-3">⚡</div>
+          <h3 className="text-lg font-semibold text-white mb-2">Ultra Rápido</h3>
+          <p className="text-gray-400 text-sm">Bun runtime 3x mais rápido que Node.js</p>
+        </div>
+
+        <div className="bg-white/5 backdrop-blur-sm border border-white/10 rounded-2xl p-6 hover:bg-white/10 transition-all">
+          <div className="text-3xl mb-3">🔒</div>
+          <h3 className="text-lg font-semibold text-white mb-2">Type Safe</h3>
+          <p className="text-gray-400 text-sm">Eden Treaty com inferência automática</p>
+        </div>
+
+        <div className="bg-white/5 backdrop-blur-sm border border-white/10 rounded-2xl p-6 hover:bg-white/10 transition-all">
+          <div className="text-3xl mb-3">🔥</div>
+          <h3 className="text-lg font-semibold text-white mb-2">Live Components</h3>
+          <p className="text-gray-400 text-sm">Estado reativo no servidor estilo Livewire</p>
+        </div>
+      </div>
+
+      <div className="mt-4 text-gray-500 text-sm">
+        Use a navegação no topo para acessar as demos.
+      </div>
+
+      <div className="mt-16 text-gray-500 text-sm">
+        <p>Desenvolvido com ❤️ usando TypeScript</p>
+      </div>
+
+      <style>{`
+        @keyframes pulse-slow {
+          0%, 100% { opacity: 1; }
+          50% { opacity: 0.8; }
+        }
+        .animate-pulse-slow {
+          animation: pulse-slow 3s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+        }
+      `}</style>
+    </div>
+  )
+}

package/app/server/app.ts

@@ -2,8 +2,7 @@
  * 🎯 Application Instance - Single Source of Truth
  *
  * This instance is used by:
- * - index.ts (full-stack mode)
- * - backend-only.ts (backend standalone mode)
+ * - index.ts (full-stack & backend-only modes via FLUXSTACK_MODE env)
  * - Eden Treaty client (type inference)
  *
  * This ensures that the type exported for Eden Treaty is exactly
@@ -12,13 +11,11 @@
 
 import { Elysia } from "elysia"
 import { apiRoutes } from "./routes"
-import { envTestRoute } from "./routes/env-test"
 
 /**
  * Main application instance with all routes registered
  */
 export const appInstance = new Elysia()
-  .use(envTestRoute)  // Environment test/debug endpoint
   .use(apiRoutes)     // Main application routes
 
 // Export the type correctly for Eden Treaty

package/app/server/controllers/users.controller.ts

@@ -1,6 +1,5 @@
-import type { CreateUserRequest } from '@/app/shared/types'
+import type { CreateUserRequest } from '@app/shared/types'
 
-// User type
 export interface User {
   id: number
   name: string
@@ -8,88 +7,81 @@ export interface User {
   createdAt: Date
 }
 
-// In-memory storage for users (for testing purposes)
-let users: User[] = []
-let nextId = 1
-
+/**
+ * In-memory user store for demonstration purposes.
+ * Replace with a real database (e.g. Drizzle, Prisma) for production use.
+ */
 export class UsersController {
-  /**
-   * Get all users
-   */
+  private static users: User[] = []
+  private static nextId = 1
+
   static async getUsers() {
     return {
-      users
+      success: true as const,
+      users: this.users,
+      count: this.users.length
     }
   }
 
-  /**
-   * Get user by ID
-   */
   static async getUserById(id: number) {
-    const user = users.find(u => u.id === id)
+    const user = this.users.find(u => u.id === id)
     if (!user) {
-      return null
+      return {
+        success: false as const,
+        error: 'Usuario nao encontrado'
+      }
+    }
+    return {
+      success: true as const,
+      user
     }
-    return { user }
   }
 
-  /**
-   * Create a new user
-   */
   static async createUser(data: CreateUserRequest) {
-    // Check for duplicate email
-    const existingUser = users.find(u => u.email === data.email)
+    const existingUser = this.users.find(u => u.email === data.email)
     if (existingUser) {
       return {
-        success: false,
-        message: 'Email já está em uso'
+        success: false as const,
+        error: 'Email ja esta em uso'
       }
     }
 
-    // Create new user
     const newUser: User = {
-      id: nextId++,
+      id: this.nextId++,
       name: data.name,
       email: data.email,
       createdAt: new Date()
     }
 
-    users.push(newUser)
+    this.users.push(newUser)
 
     return {
-      success: true,
-      user: newUser
+      success: true as const,
+      user: newUser,
+      message: 'Usuario criado com sucesso'
     }
   }
 
-  /**
-   * Delete user by ID
-   */
   static async deleteUser(id: number) {
-    const userIndex = users.findIndex(u => u.id === id)
+    const userIndex = this.users.findIndex(u => u.id === id)
 
     if (userIndex === -1) {
       return {
-        success: false,
-        message: 'Usuário não encontrado'
+        success: false as const,
+        message: 'Usuario nao encontrado'
       }
     }
 
-    const deletedUser = users[userIndex]
-    users.splice(userIndex, 1)
+    this.users.splice(userIndex, 1)
 
     return {
-      success: true,
-      user: deletedUser,
-      message: 'Usuário deletado com sucesso'
+      success: true as const,
+      message: 'Usuario deletado com sucesso'
     }
   }
 
-  /**
-   * Reset users array for testing purposes
-   */
   static resetForTesting() {
-    users = []
-    nextId = 1
+    this.users = []
+    this.nextId = 1
   }
 }

package/app/server/index.ts

@@ -1,42 +1,32 @@
 /**
  * FluxStack Application Server Entry Point
+ *
+ * Modos (via FLUXSTACK_MODE ou appConfig.mode):
+ * - full-stack: Backend + Vite + LiveComponents (padrão)
+ * - backend-only: Backend + LiveComponents (sem Vite)
+ *
+ * Frontend-only roda direto do core (core/client/standalone-entry.ts)
+ *
+ * 📖 Docs: ai-context/reference/plugin-security.md
  */
 
-// Core
-import { FluxStackFramework } from "@/core/server"
-import { helpers } from "@/core/utils/env"
-import { appConfig } from "@/config/app.config"
-import { serverConfig } from "@/config/server.config"
+import { FluxStackFramework } from "@core/server"
+import { vitePlugin } from "@core/plugins/built-in/vite"
+import { swaggerPlugin } from "@core/plugins/built-in/swagger"
+import { liveComponentsPlugin } from "@core/server/live/websocket-plugin"
+import { appInstance } from "@server/app"
+import { appConfig } from "@config"
 
-// Plugins
-import { vitePlugin, swaggerPlugin, liveComponentsPlugin, staticFilesPlugin } from "@/core/server"
-import cryptoAuthPlugin from "@/plugins/crypto-auth"
-// Routes & Components
-import { appInstance } from "./app"
-
-// Server
-const app = new FluxStackFramework({
-  server: {
-    ...serverConfig.server,
-    cors: serverConfig.cors,
-    middleware: []
-  },
-  app: {
-    name: appConfig.name,
-    version: appConfig.version
-  },
-  client: {
-    port: serverConfig.server.backendPort,
-    proxy: { target: helpers.getServerUrl() },
-    build: { sourceMaps: false, minify: false, target: 'es2020', outDir: 'dist' }
-  }
-})
-  .use(cryptoAuthPlugin)
-  .use(vitePlugin)
-  .use(staticFilesPlugin)
-  .use(liveComponentsPlugin)
-  .routes(appInstance)
+const framework = new FluxStackFramework()
   .use(swaggerPlugin)
-  .listen()
+  .use(liveComponentsPlugin)
+
+// Vite apenas em full-stack
+if (appConfig.mode !== 'backend-only') {
+  framework.use(vitePlugin)
+}
+
+framework.routes(appInstance)
+await framework.listen()
 
-export type App = typeof app
+export const app = framework

package/app/server/live/LiveChat.ts

@@ -0,0 +1,77 @@
+// LiveChat - Chat compartilhado por sala
+
+import { LiveComponent, type FluxStackWebSocket } from '@core/types/types'
+
+// Componente Cliente (Ctrl+Click para navegar)
+import type { ChatDemo as _Client } from '@client/src/live/ChatDemo'
+
+export type ChatMessage = {
+  id: string
+  user: string
+  text: string
+  timestamp: number
+}
+
+export class LiveChat extends LiveComponent<typeof LiveChat.defaultState> {
+  static componentName = 'LiveChat'
+  static defaultState = {
+    messages: [] as ChatMessage[]
+  }
+  protected roomType = 'chat'
+  private maxMessages = 50
+  private static roomHistory = new Map<string, ChatMessage[]>()
+
+  constructor(initialState: Partial<typeof LiveChat.defaultState> = {}, ws: FluxStackWebSocket, options?: { room?: string; userId?: string }) {
+    super(initialState, ws, options)
+
+    this.onRoomEvent<ChatMessage>('NEW_MESSAGE', (message) => {
+      this.addMessage(message)
+    })
+
+    if (this.room) {
+      const history = LiveChat.roomHistory.get(this.room) || []
+      if (history.length > 0) {
+        this.setState({ messages: history })
+      }
+    }
+  }
+
+  private addMessage(message: ChatMessage) {
+    const next = [...this.state.messages, message].slice(-this.maxMessages)
+    if (this.room) {
+      LiveChat.roomHistory.set(this.room, next)
+    }
+    this.setState({ messages: next })
+  }
+
+  async sendMessage(payload: { user: string; text: string }) {
+    const text = payload.text?.trim()
+    const user = payload.user?.trim() || 'anonymous'
+
+    if (!text) {
+      throw new Error('Message cannot be empty')
+    }
+
+    if (text.length > 500) {
+      throw new Error('Message too long')
+    }
+
+    const message: ChatMessage = {
+      id: `msg-${Date.now()}-${Math.random().toString(36).slice(2, 8)}`,
+      user,
+      text,
+      timestamp: Date.now()
+    }
+
+    const next = [...this.state.messages, message].slice(-this.maxMessages)
+    if (this.room) {
+      LiveChat.roomHistory.set(this.room, next)
+    }
+
+    this.emitRoomEventWithState('NEW_MESSAGE', message, {
+      messages: next
+    })
+
+    return { success: true }
+  }
+}

package/app/server/live/LiveCounter.ts

@@ -0,0 +1,67 @@
+// LiveCounter - Contador compartilhado usando Room Events
+
+import { LiveComponent, type FluxStackWebSocket } from '@core/types/types'
+
+// Componente Cliente (Ctrl+Click para navegar)
+import type { CounterDemo as _Client } from '@client/src/live/CounterDemo'
+
+export class LiveCounter extends LiveComponent<typeof LiveCounter.defaultState> {
+  static componentName = 'LiveCounter'
+  static defaultState = {
+    count: 0,
+    lastUpdatedBy: null as string | null,
+    connectedUsers: 0
+  }
+  protected roomType = 'counter'
+
+  constructor(initialState: Partial<typeof LiveCounter.defaultState> = {}, ws: FluxStackWebSocket, options?: { room?: string; userId?: string }) {
+    super(initialState, ws, options)
+
+    this.onRoomEvent<{ count: number; userId: string }>('COUNT_CHANGED', (data) => {
+      this.setState({ count: data.count, lastUpdatedBy: data.userId })
+    })
+
+    this.onRoomEvent<{ connectedUsers: number }>('USER_COUNT_CHANGED', (data) => {
+      this.setState({ connectedUsers: data.connectedUsers })
+    })
+
+    this.notifyUserJoined()
+  }
+
+  private notifyUserJoined() {
+    const newCount = this.state.connectedUsers + 1
+    this.emitRoomEventWithState('USER_COUNT_CHANGED', { connectedUsers: newCount }, { connectedUsers: newCount })
+  }
+
+  async increment() {
+    const newCount = this.state.count + 1
+    this.emitRoomEventWithState('COUNT_CHANGED', { count: newCount, userId: this.userId || 'anonymous' }, {
+      count: newCount,
+      lastUpdatedBy: this.userId || 'anonymous'
+    })
+    return { success: true, count: newCount }
+  }
+
+  async decrement() {
+    const newCount = this.state.count - 1
+    this.emitRoomEventWithState('COUNT_CHANGED', { count: newCount, userId: this.userId || 'anonymous' }, {
+      count: newCount,
+      lastUpdatedBy: this.userId || 'anonymous'
+    })
+    return { success: true, count: newCount }
+  }
+
+  async reset() {
+    this.emitRoomEventWithState('COUNT_CHANGED', { count: 0, userId: this.userId || 'anonymous' }, {
+      count: 0,
+      lastUpdatedBy: this.userId || 'anonymous'
+    })
+    return { success: true, count: 0 }
+  }
+
+  destroy() {
+    const newCount = Math.max(0, this.state.connectedUsers - 1)
+    this.emitRoomEvent('USER_COUNT_CHANGED', { connectedUsers: newCount })
+    super.destroy()
+  }
+}

package/app/server/live/LiveForm.ts

@@ -0,0 +1,63 @@
+// LiveForm - Formulário reativo com estado no servidor
+
+import { LiveComponent } from "@core/types/types"
+
+// Componente Cliente (Ctrl+Click para navegar)
+import type { FormDemo as _Client } from '@client/src/live/FormDemo'
+
+export class LiveForm extends LiveComponent<typeof LiveForm.defaultState> {
+  static componentName = 'LiveForm'
+  static defaultState = {
+    name: '',
+    email: '',
+    message: '',
+    submitted: false,
+    submittedAt: null as string | null
+  }
+
+  async submit() {
+    const { name, email, message } = this.state
+
+    if (!name || !email) {
+      throw new Error('Nome e email são obrigatórios')
+    }
+
+    console.log(`📝 Form submitted:`, { name, email, message })
+
+    this.setState({
+      submitted: true,
+      submittedAt: new Date().toISOString()
+    })
+
+    return {
+      success: true,
+      data: { name, email, message },
+      submittedAt: this.state.submittedAt
+    }
+  }
+
+  async reset() {
+    this.setState({
+      name: '',
+      email: '',
+      message: '',
+      submitted: false,
+      submittedAt: null
+    })
+
+    return { success: true }
+  }
+
+  async validate() {
+    const errors: Record<string, string> = {}
+
+    if (!this.state.name) errors.name = 'Nome é obrigatório'
+    if (!this.state.email) errors.email = 'Email é obrigatório'
+    else if (!this.state.email.includes('@')) errors.email = 'Email inválido'
+
+    return {
+      valid: Object.keys(errors).length === 0,
+      errors
+    }
+  }
+}

package/app/server/live/LiveLocalCounter.ts

@@ -0,0 +1,32 @@
+// LiveLocalCounter - Contador sem eventos de sala
+
+import { LiveComponent } from '@core/types/types'
+
+// Componente Cliente (Ctrl+Click para navegar)
+import type { CounterDemo as _Client } from '@client/src/live/CounterDemo'
+
+export class LiveLocalCounter extends LiveComponent<typeof LiveLocalCounter.defaultState> {
+  static componentName = 'LiveLocalCounter'
+  static defaultState = {
+    count: 0,
+    clicks: 0
+  }
+
+  async increment() {
+    this.state.count++
+    this.state.clicks++
+    return { success: true, count: this.state.count }
+  }
+
+  async decrement() {
+    this.state.count--
+    this.state.clicks++
+    return { success: true, count: this.state.count }
+  }
+
+  async reset() {
+    this.state.count = 0
+    this.state.clicks++
+    return { success: true, count: 0 }
+  }
+}