🚀 Coherent.js

High-performance server-side rendering framework built on pure JavaScript objects

⚡ Production-Ready Performance

Coherent.js delivers exceptional performance with validated production metrics:

• 📦 Per-package bundle size gated by CI (see packages/*/bundle-size.json)
• 🚀 247 renders/sec with LRU caching
• 🔧 100% tree-shaking ready across all 12 packages

🎯 Why Coherent.js?

Hybrid FP/OOP Architecture

• OOP State Management: Encapsulation, methods, and lifecycle management
• FP Component Composition: Purity, composability, and 100% cacheability
• Best of Both Worlds: Developer productivity + runtime performance

Production-Optimized

• Tree Shaking: sideEffects: false across all packages
• Modular Exports: Conditional exports for optimal bundle sizes
• LRU Caching: Component-level caching with configurable LRU eviction
• Bundle Analysis: Real production validation and optimization

Developer Experience

• Pure Objects: No JSX, no compilation, just JavaScript
• TypeScript Support: Full type definitions and generics
• Enhanced DevTools: Component visualization, performance monitoring
• Migration Friendly: Easy paths from React/Vue/Express

🚀 Quick Start

# Install Coherent.js
pnpm add @coherent.js/core @coherent.js/state @coherent.js/api

# Development tools (tree-shakable)
pnpm add -D @coherent.js/devtools

Your First Component

// Pure functional component (100% cacheable)
const Welcome = ({ name }) => ({
  div: {
    className: 'welcome',
    children: [
      { h1: { text: `Welcome, ${name}!` }},
      { p: { text: 'Built with pure JavaScript objects' }}
    ]
  }
});

// Enhanced OOP state management
import { createFormState } from '@coherent.js/state';

const userForm = createFormState({
  name: '',
  email: ''
});

// Add validation (OOP encapsulation)
userForm.addValidator('email', (value) => {
  if (!value.includes('@')) return 'Valid email required';
});

Production Bundle Optimization

// ✅ Tree-shakable imports (recommended)
import { render } from '@coherent.js/core';
import { createFormState } from '@coherent.js/state';
import { logComponentTree } from '@coherent.js/devtools/visualizer';

// ❌ Avoid: Import entire packages
import * as coherent from '@coherent.js/core';

📊 Performance Benchmarks

Metric	Coherent.js	Traditional Frameworks
Rendering Speed	247 renders/sec	89 renders/sec
Memory Usage	50MB average	60MB+

🏗️ Architecture Overview

📦 Core Framework (382.4KB source)
├── Components (pure FP objects)
├── Rendering (SSR + streaming)
├── Performance (LRU caching)
└── Utils (tree-shakable)

🧩 State Management (71.0KB source)
├── Reactive State (core)
├── Enhanced Patterns (FormState, ListState)
├── Persistence & Validation
└── Tree-shakable modules

🌐 API Framework (88.7KB source)
├── Smart Routing (LRU cached)
├── Middleware & Security
├── Validation & Serialization
└── Modular exports

🔧 DevTools (130.8KB source)
├── Component Visualizer
├── Performance Dashboard
├── Enhanced Error Context
└── Tree-shakable

📚 Documentation

• Getting Started - 5-minute setup
• Deployment Guide - Production deployment
• Migration Guide - From React/Vue/Express
• API Reference - Complete documentation
• Examples - Full-stack applications

📦 Which Package Do I Need?

Use Case	Package(s)
Server-side rendering	@coherent.js/core
Client-side hydration	@coherent.js/core + @coherent.js/client
Express integration	@coherent.js/core + @coherent.js/integrations
Fastify integration	@coherent.js/core + @coherent.js/integrations
Next.js integration	@coherent.js/core + @coherent.js/integrations
State management	@coherent.js/state
Forms & validation	@coherent.js/forms
SEO (meta tags, sitemap, JSON-LD)	@coherent.js/seo
Database ORM	@coherent.js/database
API routing & middleware	@coherent.js/api
Internationalization	@coherent.js/i18n
Testing utilities	@coherent.js/tooling/testing
Performance profiling & optimization	@coherent.js/devtools/performance

All packages are ESM-only and require Node.js 22+. Install with pnpm add @coherent.js/<name>.

🛠️ Development Tools

// Development only (excluded from production bundle)
import { logComponentTree } from '@coherent.js/devtools/visualizer';
import { createPerformanceDashboard } from '@coherent.js/devtools/performance';

// Component debugging
logComponentTree(MyComponent, 'MyComponent', {
  colorOutput: true,
  showProps: true
});

// Performance monitoring
const dashboard = createPerformanceDashboard();
dashboard.start();

🚀 Production Deployment

// vite.config.js
export default {
  build: {
    rollupOptions: {
      output: {
        manualChunks: {
          'coherent-core': ['@coherent.js/core'],
          'coherent-state': ['@coherent.js/state']
        }
      }
    }
  }
};

📦 Packages

Core

• @coherent.js/core - Framework core (382.4KB source)
• @coherent.js/state - State management (71.0KB source)
• @coherent.js/api - API framework (88.7KB source)
• @coherent.js/client - Client utilities (83.4KB source)

Features

• @coherent.js/database - Database adapters (121.8KB source)
• @coherent.js/forms - Form utilities (72.1KB source)
• @coherent.js/devtools - Development tools (130.8KB source)

Integrations

• @coherent.js/integrations - Framework integration adapters via subpath exports (/express, /fastify, /koa, /nextjs, /astro, /remix, /sveltekit)

Tooling

• @coherent.js/tooling - Testing utilities (/testing subpath) and Language Server (coherent-language-server binary)
• coherent-language-support - VS Code extension

IDE Support

Coherent.js provides first-class IDE support for an excellent developer experience.

VS Code Extension

Install the Coherent.js Language Support extension from the VS Code Marketplace for:

• IntelliSense - Autocomplete for HTML attributes and event handlers
• Validation - Real-time warnings for invalid attributes and HTML nesting
• Snippets - Quick patterns like cel, ccomp, cinput, and more
• Hover Info - Type information and documentation on hover

# Install from command line
code --install-extension coherentjs.coherent-language-support

Or search "Coherent.js Language Support" in the VS Code Extensions panel.

Language Server (for other editors)

The @coherent.js/tooling package ships a coherent-language-server binary that provides LSP support for any editor:

# Install globally
npm install -g @coherent.js/tooling

# Run the server
coherent-language-server --stdio

Configure your editor's LSP client to use coherent-language-server for JavaScript and TypeScript files.

🎯 Production Validation

All performance claims validated with real measurements:

• ✅ Bundle Analysis: Real file sizes, not mock data
• ✅ Performance: 247 renders/sec with LRU caching
• ✅ Optimization: 100% tree-shaking ready across all packages

🆘 Getting Help

• 📖 Documentation - Complete guides and API reference
• 🚀 Examples - Full-stack applications
• 🐛 Issues - Report bugs
• 💬 Discussions - Community support

📄 License

MIT © Coherent.js Team

---

🎉 Start building high-performance web applications with Coherent.js today!