Skip to content

feat: grafex dev — watch mode with live preview#47

Merged
andresilva-cc merged 1 commit intomainfrom
feat/dev-mode
Mar 21, 2026
Merged

feat: grafex dev — watch mode with live preview#47
andresilva-cc merged 1 commit intomainfrom
feat/dev-mode

Conversation

@andresilva-cc
Copy link
Copy Markdown
Contributor

Summary

  • grafex dev --file card.tsx starts a live preview server
  • SSE-based instant updates on file changes (no page reload)
  • Watches composition file, imports (via esbuild metafile), and CSS files
  • Variant switcher dropdown when composition has config.variants
  • Colored terminal output: render times (green/yellow/red), file changes, errors
  • Error overlay in browser preview, error dedup in terminal
  • Content hash deduplication for macOS fs.watch duplicate events
  • Render-in-progress mutex prevents concurrent renders
  • Loading placeholder sized to composition dimensions
  • --variant flag sets initial variant (dropdown still available)

Closes #29

Test plan

  • 287 tests pass
  • Live preview updates on file changes
  • Variant switching works in UI and terminal
  • Syntax errors show in both terminal and browser overlay
  • Recovery from errors works (fix and save)
  • Colored render times in terminal and browser
  • No duplicate logs from macOS fs.watch
  • Ctrl+C shuts down cleanly

HTTP server with SSE for instant updates. File watching for
composition, CSS, and import dependencies. Variant switcher
dropdown. Colored terminal output with render times. Error
overlay in browser. Content hash dedup for macOS fs.watch.

Closes #29
@vercel
Copy link
Copy Markdown

vercel Bot commented Mar 21, 2026

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated (UTC)
grafex Ready Ready Preview, Comment Mar 21, 2026 0:43am

@andresilva-cc andresilva-cc merged commit 61037e3 into main Mar 21, 2026
5 checks passed
@andresilva-cc andresilva-cc deleted the feat/dev-mode branch March 21, 2026 12:44
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

feat: grafex dev — watch mode with live preview

1 participant