create-fluxstack 1.21.1 → 1.22.1

package/core/server/live/websocket-plugin.ts

@@ -26,24 +26,43 @@ export const liveComponentsPlugin: Plugin = {
   tags: ['websocket', 'real-time', 'live-components'],
 
   setup: async (context: PluginContext) => {
-    // Generate auto-generated-components.ts then import it dynamically
+    const isProd = process.env.NODE_ENV === 'production'
     const componentsPath = path.join(process.cwd(), 'app', 'server', 'live')
-    generateLiveComponentsFile({
-      componentsDir: componentsPath,
-      outFile: path.join(__dirname, 'auto-generated-components.ts'),
-      importPrefix: '@app/server/live',
-    })
+
+    // Em DEV: (re)gera o auto-generated-components.ts varrendo o disco.
+    // Em PROD: o app/server/live não existe no dist — o registro estático já
+    // foi gerado no build e bundlado. Pular a geração (evita erro de FS).
+    if (!isProd) {
+      generateLiveComponentsFile({
+        componentsDir: componentsPath,
+        outFile: path.join(__dirname, 'auto-generated-components.ts'),
+        importPrefix: '@app/server/live',
+      })
+    }
     const { liveComponentClasses } = await import('./auto-generated-components')
 
-    const transport = new ElysiaTransport(context.app as import('elysia').Elysia)
+    // dual-Elysia: FluxStack tem elysia@1.4.7, @fluxstack/live-elysia (monorepo
+    // linkado) tem elysia@1.4.28 — tipos de instâncias DIFERENTES, mesma API em
+    // runtime. `as never` neutraliza o mismatch de tipo no argumento.
+    const transport = new ElysiaTransport(context.app as never)
 
-    // Auto-discover LiveRoom classes from rooms/ directory
+    // Rooms: em DEV, auto-descobre varrendo rooms/ (import do disco). Em PROD,
+    // usa o registro ESTÁTICO (@app/server/live/rooms) — import do disco em prod
+    // carregaria uma instância separada do @fluxstack/live (context null). O
+    // registro estático entra no bundle com o context único do LiveServer.
     const roomsPath = path.join(componentsPath, 'rooms')
-    const discoveredRooms = await discoverRoomClasses(roomsPath)
+    const discoveredRooms = isProd
+      ? (await import('@app/server/live/rooms')).liveRoomClasses as LiveRoomClass[]
+      : await discoverRoomClasses(roomsPath)
 
     liveServer = new LiveServer({
       transport,
-      componentsPath,
+      // SÓ em dev: componentsPath dispara o auto-discover dinâmico (import() do
+      // disco). Em PROD isso carrega os componentes de uma instância SEPARADA do
+      // @fluxstack/live (source linkado), com _ctx null → "LiveServer.start() must
+      // be called". Em prod usamos APENAS o registro estático (components), que
+      // está no mesmo bundle onde start() setou o context.
+      ...(isProd ? {} : { componentsPath }),
       wsPath: '/api/live/ws',
       httpPrefix: '/api/live',
       rooms: [...discoveredRooms, ...pendingRoomClasses],

package/core/utils/version.ts

@@ -1,6 +1,6 @@
-/**
- * FluxStack Framework Version
- * Single source of truth for version number
- * Auto-synced with package.json
- */
-export const FLUXSTACK_VERSION = '1.21.1'
+/**
+ * FluxStack Framework Version
+ * Single source of truth for version number
+ * Auto-synced with package.json
+ */
+export const FLUXSTACK_VERSION = '1.22.1'

package/create-fluxstack.ts

@@ -35,8 +35,12 @@ import { resolve, join, basename } from 'path'
 import { existsSync, mkdirSync, cpSync, writeFileSync, readFileSync, readdirSync } from 'fs'
 import chalk from 'chalk'
 import ora from 'ora'
+import prompts from 'prompts'
 import { FLUXSTACK_VERSION } from './core/utils/version'
 
+/** Modo de renderização do projeto criado. */
+type RenderMode = 'spa' | 'ssr'
+
 const logo = `
 ⚡ ███████ ██      ██    ██ ██   ██ ███████ ████████  █████   ██████ ██   ██
    ██      ██      ██    ██  ██ ██  ██         ██    ██   ██ ██      ██  ██
@@ -52,20 +56,67 @@ program
   .name('create-fluxstack')
   .description('⚡ Create FluxStack apps with zero configuration')
   .version(FLUXSTACK_VERSION)
-  .argument('[project-name]', 'Name of the project to create')
+  .argument('[project-name]', 'Name of the project to create (use "." for current dir; omit for interactive mode)')
   .option('--no-install', 'Skip dependency installation')
   .option('--no-git', 'Skip git initialization')
+  .option('--mode <mode>', 'Render mode: "spa" or "ssr" (skips the prompt)')
   .action(async (projectName, options) => {
     console.clear()
     console.log(chalk.magenta(logo))
 
+    // ── Modo INTERATIVO: sem project-name → pergunta tudo pelo terminal ──
+    // create-fluxstack .        → cria na pasta atual
+    // create-fluxstack my-app   → cria em ./my-app
+    // create-fluxstack          → menu interativo (pergunta nome + modo)
+    let renderMode: RenderMode | undefined =
+      options.mode === 'spa' || options.mode === 'ssr' ? options.mode : undefined
+
     if (!projectName || projectName.trim().length === 0) {
-      console.log(chalk.red('❌ Project name is required'))
-      console.log(chalk.gray('Usage: bunx create-fluxstack@latest my-app'))
-      console.log(chalk.gray('   or: bunx create-fluxstack@latest .'))
-      process.exit(1)
+      const answers = await prompts(
+        [
+          {
+            type: 'text',
+            name: 'projectName',
+            message: 'Nome do projeto (use "." para a pasta atual):',
+            initial: 'my-fluxstack-app',
+            validate: (v: string) => (v && v.trim().length > 0 ? true : 'Informe um nome ou "."'),
+          },
+          {
+            type: renderMode ? null : 'select',
+            name: 'mode',
+            message: 'Modo de renderização:',
+            choices: [
+              { title: 'SSR (RSC)', description: 'Server-rendered + React Server Components + ilhas Live (padrão)', value: 'ssr' },
+              { title: 'SPA', description: 'Client-side puro (mais simples)', value: 'spa' },
+            ],
+            initial: 0, // SSR é o padrão
+          },
+        ],
+        { onCancel: () => { console.log(chalk.gray('\nCancelado.')); process.exit(0) } },
+      )
+      projectName = answers.projectName
+      renderMode = renderMode ?? (answers.mode as RenderMode)
+    } else if (!renderMode) {
+      // Tem nome mas não passou --mode → pergunta só o modo.
+      const { mode } = await prompts(
+        {
+          type: 'select',
+          name: 'mode',
+          message: 'Modo de renderização:',
+          choices: [
+            { title: 'SSR (RSC)', description: 'Server-rendered + React Server Components + ilhas Live (padrão)', value: 'ssr' },
+            { title: 'SPA', description: 'Client-side puro (mais simples)', value: 'spa' },
+          ],
+          initial: 0, // SSR é o padrão
+        },
+        { onCancel: () => { console.log(chalk.gray('\nCancelado.')); process.exit(0) } },
+      )
+      renderMode = (mode as RenderMode) ?? 'ssr'
     }
 
+    // SSR é o padrão do FluxStack; SPA continua disponível via escolha/--mode.
+    renderMode = renderMode ?? 'ssr'
+
     const currentDir = import.meta.dir
 
     // Normalize path: remove trailing slashes (which may indicate current dir usage like path/.)
@@ -105,6 +156,7 @@ program
 
     console.log(chalk.cyan(`\n🚀 Creating FluxStack project: ${chalk.bold(displayName)}`))
     console.log(chalk.gray(`📁 Location: ${projectPath}`))
+    console.log(chalk.gray(`🎨 Render mode: ${chalk.bold(renderMode === 'ssr' ? 'SSR (RSC)' : 'SPA')}`))
     
     // Create project directory
     const spinner = ora('Creating project structure...').start()
@@ -427,6 +479,13 @@ bun.lockb
         envContent = envContent.replace('NODE_ENV=production', 'NODE_ENV=development')
         // Customize app name to match project name
         envContent = envContent.replace('VITE_APP_NAME=FluxStack', `VITE_APP_NAME=${actualProjectName}`)
+        // Render mode escolhido: liga RSC (SSR) ou mantém SPA.
+        const rscLine = `\n# Render mode (escolhido na criação): RSC/SSR liga server-rendering\nRSC_ENABLED=${renderMode === 'ssr' ? 'true' : 'false'}\n`
+        if (/^RSC_ENABLED=/m.test(envContent)) {
+          envContent = envContent.replace(/^RSC_ENABLED=.*$/m, `RSC_ENABLED=${renderMode === 'ssr' ? 'true' : 'false'}`)
+        } else {
+          envContent += rscLine
+        }
         writeFileSync(envPath, envContent)
       }
 

package/package.json

@@ -1,108 +1,112 @@
-{
-  "name": "create-fluxstack",
-  "version": "1.21.1",
-  "description": "⚡ Revolutionary full-stack TypeScript framework with Declarative Config System, Elysia + React + Bun",
-  "keywords": [
-    "framework",
-    "full-stack",
-    "typescript",
-    "elysia",
-    "react",
-    "bun",
-    "vite"
-  ],
-  "author": "FluxStack Team",
-  "license": "MIT",
-  "homepage": "https://github.com/MarcosBrendonDePaula/FluxStack",
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/MarcosBrendonDePaula/FluxStack.git"
-  },
-  "module": "app/server/index.ts",
-  "type": "module",
-  "bin": {
-    "create-fluxstack": "create-fluxstack.ts"
-  },
-  "scripts": {
-    "dev": "bun run core/cli/index.ts dev",
-    "dev:frontend": "bun run core/cli/index.ts dev --frontend-only",
-    "dev:backend": "bun run core/cli/index.ts dev --backend-only",
-    "build": "cross-env NODE_ENV=production bun run core/cli/index.ts build",
-    "build:frontend": "cross-env NODE_ENV=production bun run core/cli/index.ts build --frontend-only",
-    "build:backend": "cross-env NODE_ENV=production bun run core/cli/index.ts build --backend-only",
-    "build:exe": "cross-env NODE_ENV=production && bun run core/cli/index.ts build && bun run core/cli/index.ts build:exe",
-    "start": "NODE_ENV=production bun dist/index.js",
-    "create": "bun run core/cli/index.ts create",
-    "cli": "bun run core/cli/index.ts",
-    "make:component": "bun run core/cli/index.ts make:component",
-    "sync-version": "bun run core/utils/sync-version.ts",
-    "test": "vitest",
-    "test:ui": "vitest --ui",
-    "test:coverage": "vitest run --coverage",
-    "typecheck:api": "tsc --noEmit -p tsconfig.api-strict.json",
-    "test:e2e": "playwright test",
-    "test:e2e:ui": "playwright test --ui",
-    "test:e2e:headed": "playwright test --headed"
-  },
-  "devDependencies": {
-    "@eslint/js": "^9.30.1",
-    "@noble/curves": "1.2.0",
-    "@noble/hashes": "1.3.2",
-    "@playwright/test": "^1.58.2",
-    "@tailwindcss/vite": "^4.1.13",
-    "@testing-library/jest-dom": "^6.6.4",
-    "@testing-library/react": "^16.3.0",
-    "@testing-library/user-event": "^14.6.1",
-    "@types/bun": "latest",
-    "@types/node": "^24.5.2",
-    "@types/react": "^19.1.8",
-    "@types/react-dom": "^19.1.6",
-    "@vitest/coverage-v8": "^3.2.4",
-    "@vitest/ui": "^3.2.4",
-    "baseline-browser-mapping": "^2.10.7",
-    "cross-env": "^10.1.0",
-    "eslint": "^9.30.1",
-    "eslint-plugin-react-hooks": "^5.2.0",
-    "eslint-plugin-react-refresh": "^0.4.20",
-    "globals": "^16.3.0",
-    "jsdom": "^26.1.0",
-    "rollup": "4.20.0",
-    "tailwindcss": "^4.1.13",
-    "typescript": "^5.8.3",
-    "typescript-eslint": "^8.35.1",
-    "vite-plugin-checker": "^0.12.0",
-    "vite-tsconfig-paths": "^6.0.5",
-    "vitest": "^3.2.4"
-  },
-  "dependencies": {
-    "@elysiajs/eden": "^1.3.2",
-    "@elysiajs/swagger": "^1.3.1",
-    "@fluxstack/config": "^1.0.0",
-    "@fluxstack/live": "^1.0.0",
-    "@fluxstack/live-client": "^0.9.1",
-    "@fluxstack/live-elysia": "^0.9.1",
-    "@fluxstack/live-react": "^0.9.1",
-    "@fluxstack/plugin-kit": "^0.4.0",
-    "@fluxstack/plugin-crypto-auth": "^1.0.0",
-    "@fluxstack/plugin-csrf-protection": "^1.1.0",
-    "@vitejs/plugin-react": "^4.6.0",
-    "chalk": "^5.3.0",
-    "commander": "^12.1.0",
-    "elysia": "^1.4.6",
-    "lightningcss": "^1.30.1",
-    "ora": "^8.1.0",
-    "react": "^19.1.0",
-    "react-dom": "^19.1.0",
-    "react-icons": "^5.5.0",
-    "react-router": "^7.9.3",
-    "uuid": "^13.0.0",
-    "vite": "^7.1.7",
-    "winston": "^3.18.3",
-    "winston-daily-rotate-file": "^5.0.0",
-    "zustand": "^5.0.8"
-  },
-  "engines": {
-    "bun": ">=1.2.0"
-  },
-  "preferredPackageManager": "bun"
-}
+{
+  "name": "create-fluxstack",
+  "version": "1.22.1",
+  "description": "⚡ Revolutionary full-stack TypeScript framework with Declarative Config System, Elysia + React + Bun",
+  "keywords": [
+    "framework",
+    "full-stack",
+    "typescript",
+    "elysia",
+    "react",
+    "bun",
+    "vite"
+  ],
+  "author": "FluxStack Team",
+  "license": "MIT",
+  "homepage": "https://github.com/MarcosBrendonDePaula/FluxStack",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/MarcosBrendonDePaula/FluxStack.git"
+  },
+  "module": "app/server/index.ts",
+  "type": "module",
+  "bin": {
+    "create-fluxstack": "create-fluxstack.ts"
+  },
+  "scripts": {
+    "dev": "bun run core/cli/index.ts dev",
+    "dev:frontend": "bun run core/cli/index.ts dev --frontend-only",
+    "dev:backend": "bun run core/cli/index.ts dev --backend-only",
+    "build": "cross-env NODE_ENV=production bun run core/cli/index.ts build",
+    "build:frontend": "cross-env NODE_ENV=production bun run core/cli/index.ts build --frontend-only",
+    "build:backend": "cross-env NODE_ENV=production bun run core/cli/index.ts build --backend-only",
+    "build:exe": "cross-env NODE_ENV=production && bun run core/cli/index.ts build && bun run core/cli/index.ts build:exe",
+    "start": "NODE_ENV=production bun dist/index.js",
+    "create": "bun run core/cli/index.ts create",
+    "cli": "bun run core/cli/index.ts",
+    "make:component": "bun run core/cli/index.ts make:component",
+    "sync-version": "bun run core/utils/sync-version.ts",
+    "test": "vitest",
+    "test:ui": "vitest --ui",
+    "test:coverage": "vitest run --coverage",
+    "typecheck:api": "tsc --noEmit -p tsconfig.api-strict.json",
+    "test:e2e": "playwright test",
+    "test:e2e:ui": "playwright test --ui",
+    "test:e2e:headed": "playwright test --headed"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.30.1",
+    "@noble/curves": "1.2.0",
+    "@noble/hashes": "1.3.2",
+    "@playwright/test": "^1.58.2",
+    "@tailwindcss/vite": "^4.1.13",
+    "@testing-library/jest-dom": "^6.6.4",
+    "@testing-library/react": "^16.3.0",
+    "@testing-library/user-event": "^14.6.1",
+    "@types/bun": "latest",
+    "@types/node": "^24.5.2",
+    "@types/react": "^19.1.8",
+    "@types/react-dom": "^19.1.6",
+    "@vitest/coverage-v8": "^3.2.4",
+    "@vitest/ui": "^3.2.4",
+    "baseline-browser-mapping": "^2.10.7",
+    "cross-env": "^10.1.0",
+    "eslint": "^9.30.1",
+    "eslint-plugin-react-hooks": "^5.2.0",
+    "eslint-plugin-react-refresh": "^0.4.20",
+    "globals": "^16.3.0",
+    "jsdom": "^26.1.0",
+    "rollup": "4.20.0",
+    "tailwindcss": "^4.1.13",
+    "typescript": "^5.8.3",
+    "typescript-eslint": "^8.35.1",
+    "vite-plugin-checker": "^0.12.0",
+    "vite-tsconfig-paths": "^6.0.5",
+    "vitest": "^3.2.4"
+  },
+  "dependencies": {
+    "@elysiajs/eden": "^1.3.2",
+    "@elysiajs/swagger": "^1.3.1",
+    "@fluxstack/config": "^1.0.0",
+    "@fluxstack/live": "^0.10.0",
+    "@fluxstack/live-client": "^0.10.0",
+    "@fluxstack/live-elysia": "^0.10.0",
+    "@fluxstack/live-react": "^0.10.0",
+    "@fluxstack/plugin-crypto-auth": "^1.0.0",
+    "@fluxstack/plugin-csrf-protection": "^1.2.0",
+    "@fluxstack/plugin-kit": "^0.4.0",
+    "@types/prompts": "^2.4.9",
+    "@vitejs/plugin-react": "^4.6.0",
+    "@vitejs/plugin-rsc": "^0.5.26",
+    "chalk": "^5.3.0",
+    "commander": "^12.1.0",
+    "elysia": "^1.4.6",
+    "lightningcss": "^1.30.1",
+    "ora": "^8.1.0",
+    "prompts": "^2.4.2",
+    "react": "^19.1.0",
+    "react-dom": "^19.1.0",
+    "react-icons": "^5.5.0",
+    "react-router": "^7.9.3",
+    "react-server-dom-webpack": "^19.2.6",
+    "uuid": "^13.0.0",
+    "vite": "^7.1.7",
+    "winston": "^3.18.3",
+    "winston-daily-rotate-file": "^5.0.0",
+    "zustand": "^5.0.8"
+  },
+  "engines": {
+    "bun": ">=1.2.0"
+  },
+  "preferredPackageManager": "bun"
+}

package/playwright.config.ts

@@ -11,7 +11,10 @@ export default defineConfig({
   timeout: 30_000,
 
   use: {
-    baseURL: 'http://localhost:5173',
+    // Entrar pela 3000 (Elysia) — o app de verdade: API + WebSocket + frontend
+    // (via proxy Vite). A 5173 é o Vite dev cru (sem WebSocket Live), detalhe
+    // interno. Pela 3000 tudo é mesma origem, então o WS conecta sozinho.
+    baseURL: 'http://localhost:3000',
     trace: 'on-first-retry',
   },
 
@@ -24,7 +27,8 @@ export default defineConfig({
 
   webServer: {
     command: 'bun run dev',
-    port: 5173,
+    // Espera a 3000 (Elysia) ficar pronta — é por onde os testes entram.
+    port: 3000,
     reuseExistingServer: !process.env.CI,
     timeout: 30_000,
   },

package/vite.config.ts

@@ -9,6 +9,13 @@ import { fluxstackVitePlugins } from './core/build/vite-plugins'
 // Root directory (vite.config.ts is in project root)
 const rootDir = import.meta.dirname
 
+// RSC (React Server Components) — modo PADRÃO do FluxStack. Adiciona os 3
+// ambientes (rsc/ssr/client) ao Vite e o Elysia dirige o handler RSC
+// (serverHandler:false = plugin não instala middleware próprio). Paths dos
+// entries relativos ao `root` do Vite (app/client).
+// Para SPA puro: RSC_ENABLED=false no ambiente.
+const RSC_ENABLED = process.env.RSC_ENABLED !== 'false'
+
 // When using bun-linked @fluxstack/live-* packages locally, point Vite at the
 // TypeScript source instead of pre-built dist. This ensures a single React
 // context (no dual-instance problem) and gives us HMR for the library code.
@@ -29,6 +36,21 @@ export default defineConfig({
   plugins: [
     // FluxStack internal plugins (live-strip, tsconfig-paths, type-checker)
     ...fluxstackVitePlugins(),
+    // RSC plugin ANTES do react() — quando ligado, ele gerencia os ambientes.
+    // Entries com caminho ABSOLUTO: no dev relativo ao root funciona, mas no
+    // `vite build` o rollup resolve relativo ao cwd e não acha — absoluto cobre os dois.
+    ...(RSC_ENABLED
+      ? [
+          (await import('@vitejs/plugin-rsc')).default({
+            serverHandler: false,
+            entries: {
+              rsc: resolve(rootDir, 'app/client/src/framework/entry.rsc.tsx'),
+              ssr: resolve(rootDir, 'app/client/src/framework/entry.ssr.tsx'),
+              client: resolve(rootDir, 'app/client/src/framework/entry.browser.tsx'),
+            },
+          }),
+        ]
+      : []),
     react(),
     tailwindcss(),
   ],

package/app/client/.live-stubs/LiveUpload.js

@@ -1,15 +0,0 @@
-export class LiveUpload {
-  static componentName = 'LiveUpload'
-  static defaultState = {
-    status: 'idle',
-    progress: 0,
-    fileName: '',
-    fileSize: 0,
-    fileType: '',
-    fileUrl: '',
-    bytesUploaded: 0,
-    totalBytes: 0,
-    error: null
-  }
-  static publicActions = ['startUpload', 'updateProgress', 'completeUpload', 'failUpload', 'reset']
-}