npm - create-fluxstack - Versions diffs - 1.21.1 → 1.22.1 - Mend

create-fluxstack 1.21.1 → 1.22.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (55) hide show

package/app/client/src/App.tsx +9 -11
package/app/client/src/components/AppLayout.tsx +291 -290
package/app/client/src/components/BackButton.tsx +17 -16
package/app/client/src/components/ColorWheel.tsx +1 -0
package/app/client/src/components/DemoPage.tsx +136 -135
package/app/client/src/components/ErrorBoundary.tsx +2 -1
package/app/client/src/components/LiveErrorBoundary.tsx +2 -1
package/app/client/src/components/ThemePicker.tsx +1 -0
package/app/client/src/framework/ClientOnly.tsx +14 -0
package/app/client/src/framework/LivePage.tsx +55 -0
package/app/client/src/framework/RscHomePage.tsx +125 -0
package/app/client/src/framework/RscLink.tsx +31 -0
package/app/client/src/framework/RscNav.tsx +42 -0
package/app/client/src/framework/RscRoot.tsx +54 -0
package/app/client/src/framework/csrf.ts +22 -0
package/app/client/src/framework/entry.browser.tsx +51 -0
package/app/client/src/framework/entry.rsc.tsx +41 -0
package/app/client/src/framework/entry.ssr.tsx +12 -0
package/app/client/src/framework/navigation.ts +29 -0
package/app/client/src/framework/params.tsx +22 -0
package/app/client/src/framework/routes.ts +143 -0
package/app/client/src/framework/vite-rsc.d.ts +21 -0
package/app/client/src/hooks/useThemeClock.ts +16 -1
package/app/client/src/live/AuthDemo.tsx +271 -270
package/app/client/src/live/CounterDemo.tsx +152 -151
package/app/client/src/live/FormDemo.tsx +141 -140
package/app/client/src/live/PingPongDemo.tsx +181 -180
package/app/client/src/live/RoomChatDemo.tsx +398 -397
package/app/client/src/live/SharedCounterDemo.tsx +2 -1
package/app/client/src/pages/ApiTestPage.tsx +1 -0
package/app/client/src/pages/auth.tsx +13 -0
package/app/client/src/pages/blog/[slug].tsx +23 -0
package/app/client/src/pages/counter.tsx +15 -0
package/app/client/src/pages/form.tsx +13 -0
package/app/client/src/pages/index.tsx +9 -0
package/app/client/src/pages/ping-pong.tsx +13 -0
package/app/client/src/pages/room-chat.tsx +13 -0
package/app/client/src/pages/shared-counter.tsx +13 -0
package/app/client/src/pages/sobre.tsx +19 -0
package/app/server/index.ts +5 -1
package/app/server/live/rooms/index.ts +14 -0
package/config/system/plugins.config.ts +12 -2
package/core/cli/commands/dev.ts +9 -1
package/core/plugins/built-in/rsc/index.ts +156 -0
package/core/plugins/built-in/ssr/bun-asset-loader.ts +46 -0
package/core/plugins/built-in/ssr/index.ts +143 -0
package/core/plugins/built-in/ssr/registry.ts +38 -0
package/core/plugins/built-in/vite/index.ts +7 -0
package/core/server/live/websocket-plugin.ts +29 -10
package/core/utils/version.ts +6 -6
package/create-fluxstack.ts +64 -5
package/package.json +112 -108
package/playwright.config.ts +6 -2
package/vite.config.ts +22 -0
package/app/client/.live-stubs/LiveUpload.js +0 -15

package/app/client/src/framework/csrf.ts ADDED Viewed

@@ -0,0 +1,22 @@
+// CSRF via SSR — gera o token no server e o entrega já no HTML.
+//
+// Em vez do client fazer fetch('/api/__csrf') após carregar (round-trip extra),
+// o render SSR gera o token, injeta <meta name="csrf-token"> no <head> e seta o
+// cookie XSRF-TOKEN na resposta. O client nasce com o token — zero round-trip.
+// (Padrão Rails/Laravel/Livewire: token no HTML inicial.)
+import { randomBytes } from 'crypto'
+export const CSRF_COOKIE = 'XSRF-TOKEN'
+/** Gera um token CSRF hex (mesmo formato do CsrfService do plugin). */
+export function generateCsrfToken(bytes = 32): string {
+  return randomBytes(bytes).toString('hex')
+}
+/** Monta o Set-Cookie do token (NÃO httpOnly — o JS client precisa ler). */
+export function buildCsrfCookie(token: string, secure: boolean): string {
+  const parts = [`${CSRF_COOKIE}=${token}`, 'Path=/', 'SameSite=Lax']
+  if (secure) parts.push('Secure')
+  return parts.join('; ')
+}

package/app/client/src/framework/entry.browser.tsx ADDED Viewed

@@ -0,0 +1,51 @@
+// ENTRY BROWSER do FluxStack — controlador client puro do RSC.
+// Roda UMA vez no load. Responsável por:
+//  1. Hidratar o documento RSC inicial.
+//  2. Registrar a navegação SPA (sem reload) no singleton — busca o .rsc da
+//     rota e re-renderiza só o conteúdo, mantendo o processo client vivo.
+//  3. Manter um keep-alive da conexão WebSocket fora da árvore RSC, num root
+//     próprio que nunca é tocado pela navegação → 1 conexão para a sessão toda.
+//
+// Por que aqui e não no RootClient: o RootClient (client component dentro do
+// payload RSC) não monta seu useEffect de forma confiável na hidratação. O
+// entry.browser é client puro e SEMPRE roda — é o lugar certo para o controle.
+import { createFromFetch } from '@vitejs/plugin-rsc/browser'
+import { hydrateRoot, createRoot, type Root } from 'react-dom/client'
+import { StrictMode, startTransition, type ReactNode } from 'react'
+import { LiveComponentsProvider } from '@/core/client'
+import { setNavigate } from './navigation'
+// createFromFetch retorna o payload RSC desserializado como árvore React,
+// mas tipado como Promise<unknown>. Cast seguro para ReactNode.
+const fetchRsc = (url: string) => createFromFetch(fetch(url)) as Promise<ReactNode>
+async function main() {
+  // 1. Hidratação inicial do documento.
+  const initial = await fetchRsc(window.location.href + '.rsc')
+  const documentRoot: Root = hydrateRoot(document, initial)
+  // 2. Navegação SPA: re-renderiza o documento com o payload da nova rota.
+  //    Como é o MESMO root React, o processo client (e o keep-alive) persistem.
+  async function navigate(href: string, push = true) {
+    const payload = await fetchRsc(href + '.rsc')
+    startTransition(() => documentRoot.render(payload))
+    if (push) window.history.pushState(null, '', href)
+  }
+  setNavigate(navigate)
+  window.addEventListener('popstate', () => navigate(window.location.pathname, false))
+  // 3. Keep-alive da conexão WS — root separado, nunca tocado pela navegação.
+  const keepAliveEl = document.createElement('div')
+  keepAliveEl.style.display = 'none'
+  keepAliveEl.setAttribute('data-ws-keepalive', '')
+  document.body.appendChild(keepAliveEl)
+  createRoot(keepAliveEl).render(
+    <StrictMode>
+      <LiveComponentsProvider autoConnect reconnectInterval={1000} heartbeatInterval={30000}>
+        {null}
+      </LiveComponentsProvider>
+    </StrictMode>,
+  )
+}
+main()

package/app/client/src/framework/entry.rsc.tsx ADDED Viewed

@@ -0,0 +1,41 @@
+// ENTRY RSC do FluxStack. Default export = handler chamado pelo Elysia.
+import { renderToReadableStream } from '@vitejs/plugin-rsc/rsc'
+import { RscDocument } from './RscRoot'
+import { generateCsrfToken, buildCsrfCookie, CSRF_COOKIE } from './csrf'
+export default async function handler(request: Request): Promise<Response> {
+  const url = new URL(request.url)
+  const isRscNav = url.pathname.endsWith('.rsc')
+  const pathname = url.pathname.replace(/\.rsc$/, '') || '/'
+  // CSRF via SSR: reusa o token do cookie se já existe; senão gera um novo.
+  // O token vai como <meta name="csrf-token"> no HTML, então o client não
+  // precisa fazer fetch('/api/__csrf') — nasce com o token (zero round-trip).
+  const cookieHeader = request.headers.get('cookie') ?? ''
+  const existing = cookieHeader.match(new RegExp(`${CSRF_COOKIE}=([^;]+)`))?.[1]
+  const csrfToken = existing ?? generateCsrfToken()
+  const rscStream = renderToReadableStream(<RscDocument pathname={pathname} csrfToken={csrfToken} />)
+  if (isRscNav) {
+    return new Response(rscStream, {
+      headers: { 'Content-type': 'text/x-component;charset=utf-8' },
+    })
+  }
+  const ssrEntry = await import.meta.viteRsc.loadModule<
+    typeof import('./entry.ssr')
+  >('ssr', 'index')
+  const htmlStream = await ssrEntry.handleSsr(rscStream)
+  const headers: Record<string, string> = { 'Content-type': 'text/html' }
+  if (!existing) {
+    // Seta o cookie só na primeira vez (secure em https).
+    headers['Set-Cookie'] = buildCsrfCookie(csrfToken, url.protocol === 'https:')
+  }
+  return new Response(htmlStream, { headers })
+}
+if (import.meta.hot) {
+  import.meta.hot.accept()
+}

package/app/client/src/framework/entry.ssr.tsx ADDED Viewed

@@ -0,0 +1,12 @@
+// ENTRY SSR do FluxStack. Payload RSC -> HTML, com bootstrap do client.
+import { createFromReadableStream } from '@vitejs/plugin-rsc/ssr'
+import { renderToReadableStream } from 'react-dom/server.edge'
+import type { ReactNode } from 'react'
+export async function handleSsr(rscStream: ReadableStream) {
+  // payload RSC desserializado é uma árvore React (tipado como unknown).
+  const root = (await createFromReadableStream(rscStream)) as ReactNode
+  const bootstrapScriptContent =
+    await import.meta.viteRsc.loadBootstrapScriptContent('index')
+  return renderToReadableStream(root, { bootstrapScriptContent })
+}

package/app/client/src/framework/navigation.ts ADDED Viewed

@@ -0,0 +1,29 @@
+// Navegação RSC via window (global verdadeiro), NÃO via singleton de módulo.
+//
+// Por quê window e não um let de módulo: no RSC, o mesmo módulo pode ser
+// carregado em ambientes/grafos diferentes (o RscLink vem do grafo do payload;
+// o entry.browser é o grafo client). Um `let` de módulo teria instâncias
+// separadas — setNavigate no entry não seria visto pelo RscLink. window é o
+// único estado compartilhado garantido entre eles no browser.
+type NavigateFn = (href: string, push?: boolean) => void
+declare global {
+  interface Window { __rscNavigate?: NavigateFn }
+}
+/** O entry.browser registra a função de navegação. */
+export function setNavigate(fn: NavigateFn | null) {
+  if (typeof window !== 'undefined') {
+    window.__rscNavigate = fn ?? undefined
+  }
+}
+/** O RscLink chama isto no clique. Fallback: navegação nativa (full reload). */
+export function navigate(href: string) {
+  if (typeof window !== 'undefined' && window.__rscNavigate) {
+    window.__rscNavigate(href)
+  } else if (typeof window !== 'undefined') {
+    window.location.href = href
+  }
+}

package/app/client/src/framework/params.tsx ADDED Viewed

@@ -0,0 +1,22 @@
+'use client'
+// useParams() — conveniência CLIENT para acessar os params da rota.
+//
+// A fonte da verdade é o `params` PROP (passado pelo roteador, funciona em server
+// E client component, 0 JS preservado). Este hook é açúcar opcional para client
+// components que preferem o estilo react-router. Só funciona dentro de um
+// <ParamsProvider> (provido automaticamente por client boundaries como LivePage).
+//
+// Regra: `params` prop em qualquer página; useParams() só em 'use client'.
+import { createContext, useContext } from 'react'
+import type { ReactNode } from 'react'
+import type { RouteParams } from './routes'
+const ParamsContext = createContext<RouteParams>({})
+export function ParamsProvider({ params, children }: { params: RouteParams; children: ReactNode }) {
+  return <ParamsContext.Provider value={params}>{children}</ParamsContext.Provider>
+}
+export function useParams<T extends RouteParams = RouteParams>(): T {
+  return useContext(ParamsContext) as T
+}

package/app/client/src/framework/routes.ts ADDED Viewed

@@ -0,0 +1,143 @@
+// File-based routing — descoberta automática de páginas (com rotas dinâmicas).
+//
+// O dev cria um arquivo em app/client/src/pages/ exportando default um componente
+// React. Ele vira uma rota automaticamente. SEM editar RscRoot, entries, nav.
+//
+// Convenção de nomes (relativo a pages/):
+//   index.tsx          -> /
+//   sobre.tsx          -> /sobre
+//   blog/index.tsx     -> /blog
+//   blog/[slug].tsx    -> /blog/:slug        (dinâmica — params.slug)
+//   user/[id].tsx      -> /user/:id          (dinâmica — params.id)
+//   docs/[...rest].tsx -> /docs/*            (catch-all — params.rest = array)
+//
+// A página recebe `{ params }` como prop (funciona em server E client component).
+// No client, também pode usar useParams() (ver ParamsContext).
+//
+// Metadata opcional: export const title = '...'; export const nav = false|'Label'.
+import type { ComponentType } from 'react'
+export type RouteParams = Record<string, string | string[]>
+export interface PageProps {
+  params: RouteParams
+}
+export interface PageModule {
+  default: ComponentType<PageProps>
+  title?: string
+  nav?: boolean | string
+}
+export interface RouteEntry {
+  /** path estilo express (ex: /blog/:slug, /docs/*) — só p/ exibição/debug */
+  path: string
+  Component: ComponentType<PageProps>
+  title: string
+  inNav: boolean
+  navLabel: string
+  /** regex que casa o pathname; grupos nomeados = params */
+  matcher: RegExp
+  /** nomes dos params na ordem (p/ catch-all marcamos com flag) */
+  paramNames: { name: string; catchAll: boolean }[]
+  /** true se a rota tem segmentos dinâmicos */
+  dynamic: boolean
+}
+const allModules = import.meta.glob<PageModule>('../pages/**/*.tsx', { eager: true })
+// Convenção: arquivos de ROTA são kebab-case/lowercase. PascalCase (HomePage.tsx)
+// são COMPONENTES auxiliares, ignorados. [slug] começa com '[', também válido.
+const modules = Object.fromEntries(
+  Object.entries(allModules).filter(([file]) => {
+    const base = file.split('/').pop() ?? ''
+    return !/^[A-Z]/.test(base)
+  }),
+)
+/** Converte o caminho do arquivo no path estilo express. */
+function fileToPath(file: string): string {
+  let p = file.replace('../pages', '').replace(/\.tsx$/, '')
+  p = p.replace(/\/index$/, '')
+  if (p === '') p = '/'
+  // [...rest] -> * (catch-all); [slug] -> :slug
+  p = p.replace(/\[\.\.\.([^\]]+)\]/g, '*').replace(/\[([^\]]+)\]/g, ':$1')
+  return p || '/'
+}
+/** Compila o path em regex + lista de params. */
+function compile(path: string): { matcher: RegExp; paramNames: { name: string; catchAll: boolean }[] } {
+  const paramNames: { name: string; catchAll: boolean }[] = []
+  // capturar o nome original do arquivo p/ catch-all: refazemos a partir do file
+  // mas aqui derivamos do próprio path: ':x' e '*' (catch-all usa nome 'rest' fixo
+  // quando vier de [...rest]; preservamos abaixo no map principal).
+  const pattern = path
+    .split('/')
+    .map((seg) => {
+      if (seg === '*') {
+        paramNames.push({ name: '*', catchAll: true })
+        return '(?<catchall>.*)'
+      }
+      if (seg.startsWith(':')) {
+        const name = seg.slice(1)
+        paramNames.push({ name, catchAll: false })
+        return `(?<${name}>[^/]+)`
+      }
+      return seg.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')
+    })
+    .join('/')
+  const matcher = new RegExp(`^${pattern}/?$`)
+  return { matcher, paramNames }
+}
+export const routes: RouteEntry[] = Object.entries(modules)
+  .map(([file, mod]) => {
+    const path = fileToPath(file)
+    // nome real do catch-all vem do arquivo ([...rest] -> 'rest')
+    const catchAllName = file.match(/\[\.\.\.([^\]]+)\]/)?.[1]
+    const { matcher, paramNames } = compile(path)
+    // substitui o placeholder '*' pelo nome real do catch-all
+    for (const p of paramNames) if (p.catchAll && catchAllName) p.name = catchAllName
+    const dynamic = paramNames.length > 0
+    const title = mod.title ?? deriveTitle(path)
+    const inNav = mod.nav !== false && !dynamic // rotas dinâmicas não vão na navbar por padrão
+    const navLabel = typeof mod.nav === 'string' ? mod.nav : title
+    return { path, Component: mod.default, title, inNav, navLabel, matcher, paramNames, dynamic }
+  })
+  // ESTÁTICAS antes de DINÂMICAS (senão /blog/novo casaria /blog/:slug antes de /blog/novo);
+  // entre estáticas, / primeiro depois alfabético.
+  .sort((a, b) => {
+    if (a.dynamic !== b.dynamic) return a.dynamic ? 1 : -1
+    if (a.path === '/') return -1
+    if (b.path === '/') return 1
+    return a.path.localeCompare(b.path)
+  })
+function deriveTitle(path: string): string {
+  if (path === '/') return 'Home'
+  const last = path.split('/').filter(Boolean).pop() ?? ''
+  const clean = last.replace(/^[:*]/, '')
+  return clean.charAt(0).toUpperCase() + clean.slice(1)
+}
+export interface MatchResult {
+  route: RouteEntry
+  params: RouteParams
+}
+/** Procura a rota que casa com um pathname, extraindo os params. */
+export function matchRoute(pathname: string): MatchResult | undefined {
+  for (const route of routes) {
+    const m = route.matcher.exec(pathname)
+    if (!m) continue
+    const params: RouteParams = {}
+    for (const p of route.paramNames) {
+      const raw = p.catchAll ? m.groups?.catchall : m.groups?.[p.name]
+      if (raw === undefined) continue
+      params[p.name] = p.catchAll ? raw.split('/').filter(Boolean) : raw
+    }
+    return { route, params }
+  }
+  return undefined
+}

package/app/client/src/framework/vite-rsc.d.ts ADDED Viewed

@@ -0,0 +1,21 @@
+// Tipos da extensão `import.meta.viteRsc` do @vitejs/plugin-rsc.
+// O plugin injeta essas APIs em build/dev, mas os tipos nem sempre são
+// captados pelo tsconfig do app — declaramos aqui para o type-check passar.
+import type { ReactNode } from 'react'
+declare global {
+  interface ImportMeta {
+    readonly viteRsc: {
+      /** Carrega um módulo de outro ambiente (ex: 'ssr', 'index'). */
+      loadModule<T = unknown>(environment: string, entry: string): Promise<T>
+      /** Conteúdo JS do bootstrap do client entry (para renderToReadableStream). */
+      loadBootstrapScriptContent(entry: string): Promise<string>
+    }
+  }
+}
+// createFromReadableStream / createFromFetch retornam a árvore React desserializada
+// tipada como unknown; usamos este alias quando precisamos de ReactNode.
+export type RscNode = ReactNode
+export {}

package/app/client/src/hooks/useThemeClock.ts CHANGED Viewed

@@ -1,3 +1,4 @@
+'use client'
 /**
  * React hook for the palette system — respects theme.config.ts
  *
@@ -44,8 +45,22 @@ function getConfiguredPalette(): ColorPalette {
   return generatePalette()
 }
+/**
+ * Paleta inicial DETERMINÍSTICA para o primeiro render (SSR + primeira render
+ * do client). Em modo 'auto', generatePalette() depende de new Date(), o que
+ * difere entre server e client e causa hydration mismatch. Por isso o estado
+ * inicial usa sempre 'midday' (fixo); a paleta real baseada na hora é aplicada
+ * no useEffect, que só roda no client após o mount.
+ */
+function getInitialPalette(): ColorPalette {
+  if (themeConfig.mode === 'auto') {
+    return buildPaletteFromHues(themeConfig.hue ?? 270, 'midday')
+  }
+  return getConfiguredPalette()
+}
 export function useThemeClock(): ColorPalette {
-  const [palette, setPalette] = useState<ColorPalette>(getConfiguredPalette)
+  const [palette, setPalette] = useState<ColorPalette>(getInitialPalette)
   useEffect(() => {
     const initial = getConfiguredPalette()