create-fluxstack 1.16.0 → 1.17.0

package/CHANGELOG.md

@@ -0,0 +1,80 @@
+# Changelog
+
+All notable changes to FluxStack will be documented in this file.
+
+## [1.16.0] - 2026-03-13
+
+### Major Refactor: Extract Live Components to Monorepo
+
+Live Components code has been extracted from `core/` into standalone npm packages under the `@fluxstack/live` scope. This reduces the framework core by ~11,000 lines and allows the Live system to be versioned and published independently.
+
+### Changed
+
+- **Live Components are now npm packages**: `@fluxstack/live`, `@fluxstack/live-client`, `@fluxstack/live-react`, `@fluxstack/live-elysia`
+- `core/server/live/` reduced from full implementation to thin re-exports from `@fluxstack/live` and `@fluxstack/live-elysia`
+- `core/client/` reduced from full implementation to re-exports from `@fluxstack/live-client` and `@fluxstack/live-react`
+- Vite config now includes source aliases for `@fluxstack/live`, `@fluxstack/live-client`, and `@fluxstack/live-react` (frontend dev uses TypeScript source directly)
+- Tests migrated to v0.3.0 API: `setLiveComponentContext` DI pattern replaces `vi.mock`, async flush for `WsSendBatcher`
+- CI Bun version updated to 1.3.2
+
+### Added
+
+- Typed LiveRoom demos: `LivePingPong`, `LiveSharedCounter` with dedicated Room classes (`ChatRoom`, `CounterRoom`, `DirectoryRoom`, `PingRoom`)
+- `PingPongDemo.tsx`, `SharedCounterDemo.tsx` — new frontend demo components
+- `LLMD/resources/live-binary-delta.md` — binary delta codec documentation
+- `plugins/*/bun.lock` added to `.gitignore`
+- Bundler now logs stdout/stderr on build failure for CI debugging
+
+### Removed
+
+- `core/server/live/ComponentRegistry.ts`, `WebSocketConnectionManager.ts`, `StateSignature.ts`, `LiveRoomManager.ts`, `RoomEventBus.ts`, `RoomStateManager.ts`, `FileUploadManager.ts`, `LiveComponentPerformanceMonitor.ts`, `LiveDebugger.ts`, `LiveLogger.ts` — moved to `@fluxstack/live`
+- `core/server/live/auth/` — moved to `@fluxstack/live`
+- `core/server/live/__tests__/` — moved to `fluxstack-live` monorepo
+- `core/client/LiveComponentsProvider.tsx`, `Live.tsx`, `LiveDebugger.tsx` — moved to `@fluxstack/live-react`
+- `core/client/hooks/useLiveComponent.ts`, `useRoom.ts`, `useRoomProxy.ts`, `useLiveDebugger.ts`, `useChunkedUpload.ts`, `useLiveChunkedUpload.ts`, `AdaptiveChunkSizer.ts`, `state-validator.ts` — moved to `@fluxstack/live-client`
+- `core/build/vite-plugin-live-strip.ts` — moved to `@fluxstack/live`
+- `LiveDebugger` UI and exports (removed entirely, not extracted)
+- `LiveChat` and `LiveTodoList` demo components (replaced by new typed demos)
+- `ChatDemo.tsx`, `TodoListDemo.tsx`, `LiveDebuggerPanel.tsx` — replaced by new demos
+- `workspace.json` — stale config referencing non-existent `./packages/*`
+
+### Fixed
+
+- Bun bundler failing on Linux CI with `"Could not resolve: @fluxstack/live"` — caused by `"bun"` export condition in `@fluxstack/live@0.3.0` pointing to non-existent `src/` (fixed in `@fluxstack/live@0.3.1`)
+- `live-components-generator.ts` basename extraction bug
+- Vite aliases made conditional for CI compatibility
+
+---
+
+## [1.14.0] - 2026-02-15
+
+### Security
+
+- Harden Live Components against critical vulnerabilities: action whitelist enforcement, state prototype pollution guard, WebSocket message size limits, rate limiting
+- Add `$private` server-only state with `TPrivate` generic for type-safe private data
+- `ExtractActions` type now respects `publicActions` whitelist
+- Harden static-files plugin with security headers, path traversal protection, streaming support
+
+### Added
+
+- **Live Component Debugger**: draggable floating window for real-time component inspection with rooms tab, collapsible JSON tree, settings panel (font size, compact mode, word wrap)
+- Server-controlled debug activation (`DEBUG_LIVE` env var, defaults to `false`)
+- Live component logs forwarded to debug panel as `LOG` events
+- Two-channel logging architecture (LiveLogger for structured logs)
+- Dynamic favicon and page title that change per route
+- FluxStack logo in navbar with route-based hue shift and Live Docs button
+- Mobile responsive layout with floating logo and adaptive sizing
+
+### Fixed
+
+- Prevent LiveDebugger from being imported in client-side bundle
+- Normalize path separators in static file serving on Windows
+- Handle undefined type from reactive config with nullish coalesce
+- `setValue` added to `LiveForm.publicActions` to enable `$field()` sync
+- Preserve active tab when selecting component in debugger
+- Stop click propagation on expanded event details
+
+### Changed
+
+- Static-files plugin refactored to use Bun-native APIs instead of Node `fs`
+- Debug config read from FluxStack config system instead of raw env vars

package/app/client/src/App.tsx

@@ -157,8 +157,16 @@ function AppContent() {
 }
 
 function App() {
+  // In dev, connect WebSocket directly to backend (port 3000) to avoid
+  // Vite proxy overhead and HMR WebSocket contention on port 5173.
+  // In production, both are served from the same origin so auto-detect works.
+  const wsUrl = import.meta.env.DEV
+    ? 'ws://localhost:3000/api/live/ws'
+    : undefined
+
   return (
     <LiveComponentsProvider
+      url={wsUrl}
       autoConnect={true}
       reconnectInterval={1000}
       maxReconnectAttempts={5}

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

@@ -126,7 +126,7 @@ function AdminSection() {
             User: <span className="text-emerald-300">{panel.$state.currentUser || '...'}</span>
           </div>
           <div className="text-gray-400">
-            Roles: <span className="text-yellow-300">{panel.$state.currentRoles.join(', ') || '...'}</span>
+            Roles: <span className="text-yellow-300">{panel.$state.currentRoles?.join(', ') || '...'}</span>
           </div>
         </div>
       </div>
@@ -139,7 +139,7 @@ function AdminSection() {
 
       {/* User list */}
       <div className="space-y-2 mb-4">
-        {panel.$state.users.map(user => (
+        {(panel.$state.users ?? []).map(user => (
           <div key={user.id} className="flex items-center justify-between bg-black/20 rounded-lg px-4 py-2">
             <div>
               <span className="text-white font-medium">{user.name}</span>
@@ -174,7 +174,7 @@ function AdminSection() {
       </div>
 
       {/* Audit log */}
-      {panel.$state.audit.length > 0 && (
+      {(panel.$state.audit?.length ?? 0) > 0 && (
         <div className="mt-4 pt-4 border-t border-white/10">
           <div className="flex items-center justify-between mb-2">
             <h4 className="text-sm font-semibold text-gray-300">Audit Log</h4>
@@ -187,7 +187,7 @@ function AdminSection() {
             </button>
           </div>
           <div className="space-y-1 max-h-32 overflow-auto">
-            {panel.$state.audit.map((entry, i) => (
+            {(panel.$state.audit ?? []).map((entry, i) => (
               <div key={i} className="text-xs text-gray-500">
                 <span className="text-gray-400">{new Date(entry.timestamp).toLocaleTimeString()}</span>
                 {' '}<span className="text-blue-300">{entry.action}</span>

package/core/build/bundler.ts

@@ -4,6 +4,7 @@ import { join } from "path"
 import type { FluxStackConfig } from "../config"
 import type { BundleResult, BundleOptions } from "../types/build"
 import { buildLogger } from "../utils/build-logger"
+import { generateLiveComponentsFile } from "@fluxstack/live/build"
 
 export interface BundlerConfig {
   target: 'bun' | 'node' | 'docker'
@@ -54,12 +55,15 @@ export class Bundler {
           assets: await this.getClientAssets()
         }
       } else {
+        const stdout = await new Response(buildProcess.stdout).text()
         const stderr = await new Response(buildProcess.stderr).text()
         buildLogger.error("Client bundle failed")
+        if (stdout.trim()) buildLogger.error(`stdout:\n${stdout.trim()}`)
+        if (stderr.trim()) buildLogger.error(`stderr:\n${stderr.trim()}`)
         return {
           success: false,
           duration,
-          error: stderr || "Client build failed"
+          error: stderr || stdout || "Client build failed"
         }
       }
     } catch (error) {
@@ -76,11 +80,10 @@ export class Bundler {
     buildLogger.section('Server Build', '⚡')
 
     const startTime = Date.now()
-    let liveComponentsGenerator: any = null
 
     try {
-      // Run pre-build steps
-      liveComponentsGenerator = await this.runPreBuildSteps()
+      // Run pre-build steps (component discovery + plugins generation)
+      await this.runPreBuildSteps()
 
       // Ensure output directory exists
       this.ensureOutputDirectory()
@@ -120,7 +123,7 @@ export class Bundler {
         buildLogger.success(`Server bundle completed in ${buildLogger.formatDuration(duration)}`)
 
         // Run post-build cleanup
-        await this.runPostBuildCleanup(liveComponentsGenerator)
+        await this.runPostBuildCleanup()
 
         return {
           success: true,
@@ -129,16 +132,20 @@ export class Bundler {
           entryPoint: join(this.config.outDir, "index.js")
         }
       } else {
+        const stdout = await new Response(buildProcess.stdout).text()
+        const stderr = await new Response(buildProcess.stderr).text()
+
         buildLogger.error("Server bundle failed")
+        if (stdout.trim()) buildLogger.error(`stdout:\n${stdout.trim()}`)
+        if (stderr.trim()) buildLogger.error(`stderr:\n${stderr.trim()}`)
 
         // Run post-build cleanup
-        await this.runPostBuildCleanup(liveComponentsGenerator)
+        await this.runPostBuildCleanup()
 
-        const stderr = await new Response(buildProcess.stderr).text()
         return {
           success: false,
           duration,
-          error: stderr || "Server build failed"
+          error: stderr || stdout || "Server build failed"
         }
       }
     } catch (error) {
@@ -146,7 +153,7 @@ export class Bundler {
 
       // 🧹 CLEANUP: Restore original files on error
       try {
-        await this.runPostBuildCleanup(liveComponentsGenerator)
+        await this.runPostBuildCleanup()
       } catch (cleanupError) {
         buildLogger.warn(`Failed to cleanup generated files: ${cleanupError}`)
       }
@@ -163,11 +170,10 @@ export class Bundler {
     buildLogger.section('Executable Build', '📦')
 
     const startTime = Date.now()
-    let liveComponentsGenerator: any = null
 
     try {
-      // Run pre-build steps
-      liveComponentsGenerator = await this.runPreBuildSteps()
+      // Run pre-build steps (component discovery + plugins generation)
+      await this.runPreBuildSteps()
 
       // Ensure output directory exists
       this.ensureOutputDirectory()
@@ -248,7 +254,7 @@ export class Bundler {
         buildLogger.success(`Executable compiled in ${buildLogger.formatDuration(duration)}`)
 
         // Run post-build cleanup
-        await this.runPostBuildCleanup(liveComponentsGenerator)
+        await this.runPostBuildCleanup()
 
         return {
           success: true,
@@ -260,7 +266,7 @@ export class Bundler {
         buildLogger.error("Executable compilation failed")
 
         // Run post-build cleanup
-        await this.runPostBuildCleanup(liveComponentsGenerator)
+        await this.runPostBuildCleanup()
 
         const stderr = await new Response(buildProcess.stderr).text()
         return {
@@ -274,7 +280,7 @@ export class Bundler {
 
       // 🧹 CLEANUP: Restore original files on error
       try {
-        await this.runPostBuildCleanup(liveComponentsGenerator)
+        await this.runPostBuildCleanup()
       } catch (cleanupError) {
         buildLogger.warn(`Failed to cleanup generated files: ${cleanupError}`)
       }
@@ -313,30 +319,38 @@ export class Bundler {
   }
 
   /**
-   * Run pre-build steps (Live Components and Plugins generation)
+   * Run pre-build steps (component discovery + plugins generation)
    */
-  private async runPreBuildSteps(): Promise<any> {
+  private async runPreBuildSteps(): Promise<void> {
     // 🚀 PRE-BUILD: Auto-generate Live Components registration
-    const generatorModule = await import('./live-components-generator')
-    const liveComponentsGenerator = generatorModule.liveComponentsGenerator
-    await liveComponentsGenerator.preBuild()
+    this.discoverLiveComponents()
 
     // 🔌 PRE-BUILD: Auto-generate FluxStack Plugins registration
     const pluginsGeneratorModule = await import('./flux-plugins-generator')
     const fluxPluginsGenerator = pluginsGeneratorModule.fluxPluginsGenerator
     await fluxPluginsGenerator.preBuild()
-
-    return liveComponentsGenerator
   }
 
   /**
-   * Run post-build cleanup
+   * Scan and generate the Live Components registration file.
    */
-  private async runPostBuildCleanup(liveComponentsGenerator: any): Promise<void> {
-    if (liveComponentsGenerator) {
-      await liveComponentsGenerator.postBuild(false)
+  private discoverLiveComponents(): void {
+    const count = generateLiveComponentsFile({
+      componentsDir: join(process.cwd(), 'app', 'server', 'live'),
+      outFile: join(process.cwd(), 'core', 'server', 'live', 'auto-generated-components.ts'),
+      importPrefix: '@app/server/live',
+    })
+    if (count >= 0) {
+      buildLogger.success(`Discovered ${count} Live Components`)
+    } else {
+      buildLogger.warn('No app/server/live/ directory found, skipping component discovery')
     }
+  }
 
+  /**
+   * Run post-build cleanup
+   */
+  private async runPostBuildCleanup(): Promise<void> {
     const pluginsGeneratorModule = await import('./flux-plugins-generator')
     const fluxPluginsGenerator = pluginsGeneratorModule.fluxPluginsGenerator
     await fluxPluginsGenerator.postBuild(false)