create-fluxstack 1.8.3 → 1.10.1

package/app/client/src/live/QuickUploadTest.tsx

@@ -0,0 +1,193 @@
+// 🚀 Quick Upload Test - Compact upload tester for home page
+import { useState, useRef } from 'react'
+import { useTypedLiveComponent, useChunkedUpload, useLiveComponents } from '@/core/client'
+
+// Import component type DIRECTLY from backend - full type inference!
+import type { LiveFileUploadComponent } from '@/server/live/LiveFileUploadComponent'
+
+export function QuickUploadTest() {
+  const fileInputRef = useRef<HTMLInputElement>(null)
+  const [selectedFile, setSelectedFile] = useState<File | null>(null)
+
+  // Get sendMessageAndWait from LiveComponents context
+  const { sendMessageAndWait } = useLiveComponents()
+
+  // Setup Live Component with full type inference
+  const {
+    state,
+    call,
+    componentId,
+    connected
+  } = useTypedLiveComponent<LiveFileUploadComponent>('LiveFileUpload', {
+    uploadedFiles: [],
+    maxFiles: 10
+  })
+
+  // Setup Chunked Upload with Adaptive Chunking
+  const {
+    uploading,
+    progress,
+    error: uploadError,
+    uploadFile,
+    cancelUpload,
+    reset: resetUpload,
+    bytesUploaded,
+    totalBytes
+  } = useChunkedUpload(componentId || '', {
+    chunkSize: 64 * 1024,
+    maxFileSize: 500 * 1024 * 1024,
+    allowedTypes: [], // Aceita todos os tipos
+    sendMessageAndWait,
+
+    // Enable Adaptive Chunking
+    adaptiveChunking: true,
+    adaptiveConfig: {
+      minChunkSize: 16 * 1024,
+      maxChunkSize: 512 * 1024,
+      initialChunkSize: 64 * 1024,
+      targetLatency: 200,
+      adjustmentFactor: 1.5,
+      measurementWindow: 3
+    },
+
+    onComplete: async (response) => {
+      if (selectedFile && response.fileUrl) {
+        await call('onFileUploaded', {
+          filename: selectedFile.name,
+          fileUrl: response.fileUrl
+        })
+      }
+      setSelectedFile(null)
+      resetUpload()
+      if (fileInputRef.current) {
+        fileInputRef.current.value = ''
+      }
+    },
+
+    onError: (error) => {
+      console.error('Upload error:', error)
+    }
+  })
+
+  const handleFileSelect = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const file = e.target.files?.[0]
+    if (file) {
+      setSelectedFile(file)
+      resetUpload()
+    }
+  }
+
+  const handleUpload = async () => {
+    if (!selectedFile) return
+    await uploadFile(selectedFile)
+  }
+
+  const formatBytes = (bytes: number): string => {
+    if (bytes === 0) return '0 B'
+    const k = 1024
+    const sizes = ['B', 'KB', 'MB']
+    const i = Math.floor(Math.log(bytes) / Math.log(k))
+    return Math.round(bytes / Math.pow(k, i) * 100) / 100 + ' ' + sizes[i]
+  }
+
+  if (!connected) {
+    return (
+      <div className="bg-white/5 backdrop-blur-sm border border-white/10 rounded-2xl p-6">
+        <div className="text-yellow-400 text-sm">🔌 Connecting...</div>
+      </div>
+    )
+  }
+
+  return (
+    <div className="bg-white/5 backdrop-blur-sm border border-white/10 rounded-2xl p-6 hover:bg-white/10 transition-all">
+      <div className="flex items-center gap-3 mb-4">
+        <div className="text-3xl">📤</div>
+        <div>
+          <h3 className="text-lg font-semibold text-white">Adaptive Upload Test</h3>
+          <p className="text-xs text-gray-400">Dynamic chunk sizing enabled</p>
+        </div>
+      </div>
+
+      {/* File Input */}
+      <div className="space-y-3">
+        <input
+          ref={fileInputRef}
+          type="file"
+          onChange={handleFileSelect}
+          disabled={uploading}
+          className="block w-full text-sm text-gray-300 file:mr-3 file:py-2 file:px-4 file:rounded-lg file:border-0 file:text-sm file:font-semibold file:bg-purple-600 file:text-white hover:file:bg-purple-700 disabled:opacity-50 cursor-pointer"
+        />
+
+        {/* Selected File */}
+        {selectedFile && !uploading && (
+          <div className="text-sm text-gray-300">
+            📁 {selectedFile.name} ({formatBytes(selectedFile.size)})
+          </div>
+        )}
+
+        {/* Upload Progress */}
+        {uploading && (
+          <div className="space-y-2">
+            <div className="flex justify-between text-xs text-gray-300">
+              <span>Uploading...</span>
+              <span>{progress.toFixed(1)}%</span>
+            </div>
+            <div className="w-full bg-gray-700 rounded-full h-2">
+              <div
+                className="bg-gradient-to-r from-blue-500 to-purple-600 h-2 rounded-full transition-all duration-300"
+                style={{ width: `${progress}%` }}
+              />
+            </div>
+            <div className="text-xs text-gray-400">
+              {formatBytes(bytesUploaded)} / {formatBytes(totalBytes)}
+            </div>
+          </div>
+        )}
+
+        {/* Error */}
+        {uploadError && (
+          <div className="text-xs text-red-400">❌ {uploadError}</div>
+        )}
+
+        {/* Buttons */}
+        <div className="flex gap-2">
+          <button
+            onClick={handleUpload}
+            disabled={!selectedFile || uploading}
+            className="flex-1 px-4 py-2 bg-gradient-to-r from-blue-500 to-purple-600 text-white rounded-lg hover:shadow-lg hover:shadow-purple-500/50 disabled:opacity-50 disabled:cursor-not-allowed font-medium text-sm transition-all"
+          >
+            {uploading ? '⏳ Uploading...' : '🚀 Upload'}
+          </button>
+
+          {uploading && (
+            <button
+              onClick={cancelUpload}
+              className="px-4 py-2 bg-red-600 text-white rounded-lg hover:bg-red-700 font-medium text-sm"
+            >
+              ❌
+            </button>
+          )}
+        </div>
+
+        {/* Last Upload Info */}
+        {state.uploadedFiles.length > 0 && !uploading && (
+          <div className="pt-3 border-t border-white/10">
+            <div className="text-xs text-green-400">
+              ✅ Last: {state.uploadedFiles[0].filename}
+            </div>
+          </div>
+        )}
+
+        {/* Quick Stats */}
+        <div className="pt-3 border-t border-white/10">
+          <div className="text-xs text-gray-400 space-y-1">
+            <div>🚀 Adaptive: 16KB - 512KB</div>
+            <div>📊 Target: 200ms/chunk</div>
+            <div>💾 Max: 500MB</div>
+            <div>📁 All file types</div>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}

package/app/client/src/main.tsx

@@ -1,10 +1,10 @@
-import { StrictMode } from 'react'
-import { createRoot } from 'react-dom/client'
-import './index.css'
-import App from './App.tsx'
-
-createRoot(document.getElementById('root')!).render(
-  <StrictMode>
-    <App />
-  </StrictMode>,
-)
+import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+import './index.css'
+import App from './App.tsx'
+
+createRoot(document.getElementById('root')!).render(
+  <StrictMode>
+    <App />
+  </StrictMode>,
+)

package/app/client/src/vite-env.d.ts

@@ -1 +1 @@
-/// <reference types="vite/client" />
+/// <reference types="vite/client" />

package/app/client/tsconfig.app.json

@@ -1,44 +1,45 @@
-{
-  "compilerOptions": {
-    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
-    "target": "ES2022",
-    "useDefineForClassFields": true,
-    "lib": ["ES2022", "DOM", "DOM.Iterable"],
-    "module": "ESNext",
-    "skipLibCheck": true,
-
-    /* Bundler mode */
-    "moduleResolution": "bundler",
-    "allowImportingTsExtensions": true,
-    "verbatimModuleSyntax": true,
-    "moduleDetection": "force",
-    "noEmit": true,
-    "jsx": "react-jsx",
-
-    /* Path mapping (alias support) */
-    "baseUrl": ".",
-    "paths": {
-      "@/*": ["./src/*"],
-      "@/components/*": ["./src/components/*"],
-      "@/utils/*": ["./src/utils/*"],
-      "@/hooks/*": ["./src/hooks/*"],
-      "@/assets/*": ["./src/assets/*"],
-      "@/lib/*": ["./src/lib/*"],
-      "@/types/*": ["./src/types/*"],
-      "@/shared/*": ["../shared/*"],
-      "@/core/*": ["../../core/*"],
-      "@/config/*": ["../../config/*"],
-      "fluxstack": ["../../core/client/fluxstack"],
-      "elysia": ["../../node_modules/elysia"]
-    },
-
-    /* Linting */
-    "strict": true,
-    "noUnusedLocals": true,
-    "noUnusedParameters": true,
-    "erasableSyntaxOnly": true,
-    "noFallthroughCasesInSwitch": true,
-    "noUncheckedSideEffectImports": true
-  },
-  "include": ["src"]
-}
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
+    "target": "ES2022",
+    "useDefineForClassFields": true,
+    "lib": ["ES2022", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "jsx": "react-jsx",
+
+    /* Path mapping (alias support) */
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./src/*"],
+      "@/components/*": ["./src/components/*"],
+      "@/utils/*": ["./src/utils/*"],
+      "@/hooks/*": ["./src/hooks/*"],
+      "@/assets/*": ["./src/assets/*"],
+      "@/lib/*": ["./src/lib/*"],
+      "@/types/*": ["./src/types/*"],
+      "@/shared/*": ["../shared/*"],
+      "@/server/*": ["../server/*"],
+      "@/core/*": ["../../core/*"],
+      "@/config/*": ["../../config/*"],
+      "fluxstack": ["../../core/client/fluxstack"],
+      "elysia": ["../../node_modules/elysia"]
+    },
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "erasableSyntaxOnly": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true
+  },
+  "include": ["src"]
+}

package/app/client/tsconfig.node.json

@@ -1,25 +1,25 @@
-{
-  "compilerOptions": {
-    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
-    "target": "ES2023",
-    "lib": ["ES2023"],
-    "module": "ESNext",
-    "skipLibCheck": true,
-
-    /* Bundler mode */
-    "moduleResolution": "bundler",
-    "allowImportingTsExtensions": true,
-    "verbatimModuleSyntax": true,
-    "moduleDetection": "force",
-    "noEmit": true,
-
-    /* Linting */
-    "strict": true,
-    "noUnusedLocals": true,
-    "noUnusedParameters": true,
-    "erasableSyntaxOnly": true,
-    "noFallthroughCasesInSwitch": true,
-    "noUncheckedSideEffectImports": true
-  },
-  "include": ["vite.config.ts"]
-}
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
+    "target": "ES2023",
+    "lib": ["ES2023"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "erasableSyntaxOnly": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true
+  },
+  "include": ["vite.config.ts"]
+}

package/app/server/index.ts

@@ -1,115 +1,42 @@
 /**
- * 🚀 FluxStack Application Server Entry Point
- * Main server configuration and initialization
+ * FluxStack Application Server Entry Point
  */
 
-// ===== Core Framework =====
+// Core
 import { FluxStackFramework } from "@/core/server"
-import { isDevelopment } from "@/core/utils/helpers"
-import { DEBUG } from "@/core/utils/logger"
 import { helpers } from "@/core/utils/env"
-
-// ===== Configuration =====
 import { appConfig } from "@/config/app.config"
 import { serverConfig } from "@/config/server.config"
 
-// ===== Plugins =====
-import {
-  vitePlugin,
-  swaggerPlugin,
-  staticPlugin,
-  liveComponentsPlugin,
-  staticFilesPlugin
-} from "@/core/server"
+// Plugins
+import { vitePlugin, swaggerPlugin, liveComponentsPlugin, staticFilesPlugin } from "@/core/server"
 import cryptoAuthPlugin from "@/plugins/crypto-auth"
-
-// ===== Application Routes =====
+// Routes & Components
 import { appInstance } from "./app"
 
-// ===== Live Components Registration =====
-// Import auto-generated component registrations from core/ (for production build)
-// The generator creates this file in core/ to prevent accidental user modifications
-// This ensures components are registered before the plugin tries to use them
-import "@/core/server/live/auto-generated-components"
-
-// ===== Startup Logging =====
-DEBUG('🔧 Loading declarative configuration...')
-DEBUG(`📊 Environment: ${appConfig.env}`)
-DEBUG(`🚀 Port: ${serverConfig.server.port}`)
-DEBUG(`🌐 Host: ${serverConfig.server.host}`)
-
-// ===== Framework Configuration Helper =====
-/**
- * Creates FluxStack framework configuration from declarative configs
- */
-function createFrameworkConfig() {
-  return {
-    server: {
-      port: serverConfig.server.port,
-      host: serverConfig.server.host,
-      apiPrefix: serverConfig.server.apiPrefix,
-      cors: {
-        origins: serverConfig.cors.origins,
-        methods: serverConfig.cors.methods,
-        headers: serverConfig.cors.headers,
-        credentials: serverConfig.cors.credentials
-      },
-      middleware: []
-    },
-    app: {
-      name: appConfig.name,
-      version: appConfig.version
-    },
-    client: {
-      port: serverConfig.server.backendPort,
-      proxy: {
-        target: helpers.getServerUrl()
-      },
-      build: {
-        sourceMaps: false,
-        minify: false,
-        target: 'es2020' as any,
-        outDir: 'dist'
-      }
-    }
+// 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' }
   }
-}
-
-// ===== Initialize Application =====
-const app = new FluxStackFramework(createFrameworkConfig())
-
-// ===== Register Plugins =====
-// Note: Logger is part of core, not a plugin
-
-// 1. Authentication plugin (must be registered first)
-app.use(cryptoAuthPlugin)
-
-// 2. Development/Production plugins (conditional)
-if (isDevelopment()) {
-  app.use(vitePlugin)  // Development: Vite dev server
-} else {
-  app.use(staticPlugin)  // Production: Static file serving
-}
-
-// 3. Static files (after Vite, before Live Components to avoid conflicts)
-app.use(staticFilesPlugin)
-
-// 4. Live Components (WebSocket support)
-app.use(liveComponentsPlugin)
-
-// ===== Register Routes =====
-// Note: Routes are now registered in app.ts (including envTestRoute)
-app.routes(appInstance)
-
-// ===== Final Setup =====
-
-// Swagger documentation (must be last to discover all routes)
-app.use(swaggerPlugin)
-
-// ===== Start Server =====
-// Banner will be displayed automatically by the framework
-app.listen()
-
-// ===== Eden Treaty Type Export =====
-// Export application type for type-safe client communication
-export type App = typeof app
+})
+  .use(cryptoAuthPlugin)
+  .use(vitePlugin)
+  .use(staticFilesPlugin)
+  .use(liveComponentsPlugin)
+  .routes(appInstance)
+  .use(swaggerPlugin)
+  .listen()
+
+export type App = typeof app

package/app/server/live/LiveFileUploadComponent.ts

@@ -0,0 +1,77 @@
+// 📤 Live File Upload Component - Universal file upload with chunking
+import { LiveComponent } from '@/core/types/types'
+
+interface FileUploadState {
+  uploadedFiles: Array<{
+    id: string
+    filename: string
+    url: string
+    uploadedAt: number
+  }>
+  maxFiles: number
+}
+
+export class LiveFileUploadComponent extends LiveComponent<FileUploadState> {
+  constructor(initialState: FileUploadState, ws: any, options?: { room?: string; userId?: string }) {
+    super({
+      uploadedFiles: [],
+      maxFiles: 10,
+      ...initialState
+    }, ws, options)
+  }
+
+  /**
+   * Handle successful file upload
+   * This is called from the client after useChunkedUpload completes
+   */
+  async onFileUploaded(payload: { filename: string; fileUrl: string }): Promise<void> {
+    const { filename, fileUrl } = payload
+
+    // Add new file to the list
+    const newFile = {
+      id: `file-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`,
+      filename,
+      url: fileUrl,
+      uploadedAt: Date.now()
+    }
+
+    // Limit to maxFiles
+    const updatedFiles = [newFile, ...this.state.uploadedFiles].slice(0, this.state.maxFiles)
+
+    // Update state and broadcast to all clients
+    this.setState({
+      uploadedFiles: updatedFiles
+    })
+  }
+
+  /**
+   * Remove an uploaded file
+   */
+  async removeFile(payload: { fileId: string }): Promise<void> {
+    this.setState({
+      uploadedFiles: this.state.uploadedFiles.filter(file => file.id !== payload.fileId)
+    })
+  }
+
+  /**
+   * Clear all uploaded files
+   */
+  async clearAll(): Promise<void> {
+    this.setState({
+      uploadedFiles: []
+    })
+  }
+
+  /**
+   * Get upload statistics
+   */
+  async getStats(): Promise<{
+    totalFiles: number
+    remainingSlots: number
+  }> {
+    return {
+      totalFiles: this.state.uploadedFiles.length,
+      remainingSlots: this.state.maxFiles - this.state.uploadedFiles.length
+    }
+  }
+}

package/app/server/live/register-components.ts

@@ -1,19 +1,19 @@
-// ⚠️ DEPRECATION NOTICE
-// This file has been moved to: core/server/live/auto-generated-components.ts
-//
-// The auto-generated component registration is now located in the core/ directory
-// to prevent accidental user modifications and keep framework code separate from
-// application code.
-//
-// If you're looking for component registration logic:
-// - Generated file: core/server/live/auto-generated-components.ts (auto-generated during build)
-// - Generator: core/build/live-components-generator.ts
-// - Import location: app/server/index.ts
-//
-// To add new Live Components:
-// 1. Create your component class in this directory (app/server/live/)
-// 2. Extend LiveComponent class
-// 3. Run 'bun run build' to regenerate the registration file
-
-// This file intentionally left empty - do not import
-export {}
+// ⚠️ DEPRECATION NOTICE
+// This file has been moved to: core/server/live/auto-generated-components.ts
+//
+// The auto-generated component registration is now located in the core/ directory
+// to prevent accidental user modifications and keep framework code separate from
+// application code.
+//
+// If you're looking for component registration logic:
+// - Generated file: core/server/live/auto-generated-components.ts (auto-generated during build)
+// - Generator: core/build/live-components-generator.ts
+// - Import location: app/server/index.ts
+//
+// To add new Live Components:
+// 1. Create your component class in this directory (app/server/live/)
+// 2. Extend LiveComponent class
+// 3. Run 'bun run build' to regenerate the registration file
+
+// This file intentionally left empty - do not import
+export {}