@flexireact/core 2.2.0 → 2.3.0

package/README.md

@@ -20,8 +20,21 @@
   <a href="#"><img src="https://img.shields.io/badge/Tailwind-v4-38B2AC.svg" alt="Tailwind CSS v4" /></a>
 </p>
 
-## 🆕 What's New in v2
+## 🆕 What's New in v2.2
 
+### v2.2.0 (Latest)
+- **🌊 Streaming SSR** — Progressive HTML rendering with React 18 `renderToPipeableStream`
+- **⚡ Server Actions** — Call server functions directly from client components
+- **🔗 Link Prefetching** — Automatic prefetch on hover/viewport visibility
+
+### v2.1.0
+- **🛠️ Server Helpers** — `redirect()`, `notFound()`, `json()`, `cookies`, `headers`
+- **🚧 Error/Loading Boundaries** — Per-segment `error.tsx` and `loading.tsx`
+- **🔐 Route Middleware** — `_middleware.ts` for per-route logic
+- **📊 Bundle Analyzer** — `flexi build --analyze`
+- **🔄 CI/CD** — GitHub Actions workflow
+
+### v2.0.0
 - **TypeScript Native** — Core rewritten in TypeScript for better DX
 - **Tailwind CSS v4** — New `@import "tailwindcss"` and `@theme` syntax
 - **Routes Directory** — New `routes/` directory with route groups, dynamic segments
@@ -401,21 +414,117 @@ export function post(req, res) {
 }
 ```
 
+## ⚡ Server Actions (v2.2+)
+
+Call server functions directly from client components:
+
+```tsx
+// actions.ts
+'use server';
+import { serverAction, redirect, cookies } from '@flexireact/core';
+
+export const createUser = serverAction(async (formData: FormData) => {
+  const name = formData.get('name') as string;
+  const user = await db.users.create({ name });
+  
+  // Set a cookie
+  cookies.set('userId', user.id);
+  
+  // Redirect after action
+  redirect('/users');
+});
+
+// Form.tsx
+'use client';
+import { createUser } from './actions';
+
+export function CreateUserForm() {
+  return (
+    <form action={createUser}>
+      <input name="name" placeholder="Name" required />
+      <button type="submit">Create User</button>
+    </form>
+  );
+}
+```
+
+## 🔗 Link with Prefetching (v2.1+)
+
+Enhanced Link component with automatic prefetching:
+
+```tsx
+import { Link } from '@flexireact/core/client';
+
+// Prefetch on hover (default)
+<Link href="/about">About</Link>
+
+// Prefetch when visible in viewport
+<Link href="/products" prefetch="viewport">Products</Link>
+
+// Replace history instead of push
+<Link href="/login" replace>Login</Link>
+
+// Programmatic navigation
+import { useRouter } from '@flexireact/core/client';
+
+function MyComponent() {
+  const router = useRouter();
+  
+  return (
+    <button onClick={() => router.push('/dashboard')}>
+      Go to Dashboard
+    </button>
+  );
+}
+```
+
+## 🛠️ Server Helpers (v2.1+)
+
+Utility functions for server-side operations:
+
+```tsx
+import { redirect, notFound, json, cookies, headers } from '@flexireact/core';
+
+// Redirect
+redirect('/dashboard');
+redirect('/login', 'permanent'); // 308 redirect
+
+// Not Found
+notFound(); // Throws 404
+
+// JSON Response (in API routes)
+return json({ data: 'hello' }, { status: 200 });
+
+// Cookies
+const token = cookies.get(request, 'token');
+const setCookie = cookies.set('session', 'abc123', { 
+  httpOnly: true, 
+  maxAge: 86400 
+});
+
+// Headers
+const auth = headers.bearerToken(request);
+const corsHeaders = headers.cors({ origin: '*' });
+const securityHeaders = headers.security();
+```
+
 ## 🛡️ Middleware
 
-Create `middleware.js` in your project root:
+### Global Middleware
+
+Create `middleware.ts` in your project root:
+
+```ts
+import { redirect, cookies } from '@flexireact/core';
 
-```js
 export default function middleware(request) {
   // Protect routes
   if (request.pathname.startsWith('/admin')) {
-    if (!request.cookie('token')) {
-      return MiddlewareResponse.redirect('/login');
+    const token = cookies.get(request, 'token');
+    if (!token) {
+      redirect('/login');
     }
   }
-  
-  // Continue
-  return MiddlewareResponse.next();
 }
 
 export const config = {
@@ -423,6 +532,32 @@ export const config = {
 };
 ```
 
+### Route Middleware (v2.1+)
+
+Create `_middleware.ts` in any route directory:
+
+```
+routes/
+  admin/
+    _middleware.ts   # Runs for all /admin/* routes
+    dashboard.tsx
+    settings.tsx
+```
+
+```ts
+// routes/admin/_middleware.ts
+export default async function middleware(req, res, { route, params }) {
+  const user = await getUser(req);
+  
+  if (!user?.isAdmin) {
+    return { redirect: '/login' };
+  }
+  
+  // Continue to route
+  return { user };
+}
+```
+
 ## 🔧 Configuration
 
 Create `flexireact.config.js`:
@@ -496,15 +631,68 @@ export default {
 ## 🖥️ CLI Commands
 
 ```bash
-flexi create <name>   # Create new project
-flexi dev             # Start dev server
-flexi build           # Build for production
-flexi start           # Start production server
-flexi doctor          # Check project health
-flexi --version       # Show version
-flexi help            # Show help
+flexi create <name>      # Create new project
+flexi dev                # Start dev server
+flexi build              # Build for production
+flexi build --analyze    # Build with bundle analysis
+flexi start              # Start production server
+flexi doctor             # Check project health
+flexi --version          # Show version
+flexi help               # Show help
 ```
 
+### Bundle Analysis (v2.1+)
+
+```bash
+flexi build --analyze
+```
+
+Output:
+```
+📊 Bundle Analysis:
+
+  ─────────────────────────────────────────────────
+  File                                   Size
+  ─────────────────────────────────────────────────
+  client/main.js                         45.2 KB (13.56 KB gzip)
+  client/vendor.js                       120.5 KB (38.2 KB gzip)
+  server/pages.js                        12.3 KB
+  ─────────────────────────────────────────────────
+  Total:                                 178 KB
+  Gzipped:                               51.76 KB
+```
+
+## 🌊 Streaming SSR (v2.2+)
+
+Progressive HTML rendering with React 18:
+
+```tsx
+import { renderPageStream, streamToResponse } from '@flexireact/core';
+
+// In your server handler
+const { stream, shellReady } = await renderPageStream({
+  Component: MyPage,
+  props: { data },
+  loading: LoadingSpinner,
+  error: ErrorBoundary,
+  title: 'My Page',
+  styles: ['/styles.css']
+});
+
+// Wait for shell (initial HTML) to be ready
+await shellReady;
+
+// Stream to response
+res.setHeader('Content-Type', 'text/html');
+streamToResponse(res, stream);
+```
+
+Benefits:
+- **Faster Time to First Byte (TTFB)** — Send HTML as it's ready
+- **Progressive Loading** — Users see content immediately
+- **Suspense Support** — Loading states stream in as data resolves
+- **Better UX** — No blank screen while waiting for data
+
 ## 📚 Concepts Explained
 
 ### React Server Components (RSC)

package/core/font/index.ts

@@ -0,0 +1,306 @@
+/**
+ * FlexiReact Font Optimization
+ * 
+ * Optimized font loading with:
+ * - Automatic font subsetting
+ * - Preload hints generation
+ * - Font-display: swap by default
+ * - Self-hosted Google Fonts
+ * - Variable font support
+ * - CSS variable generation
+ */
+
+import fs from 'fs';
+import path from 'path';
+import crypto from 'crypto';
+
+// Font configuration
+export interface FontConfig {
+  family: string;
+  weight?: string | number | (string | number)[];
+  style?: 'normal' | 'italic' | 'oblique';
+  subsets?: string[];
+  display?: 'auto' | 'block' | 'swap' | 'fallback' | 'optional';
+  preload?: boolean;
+  fallback?: string[];
+  variable?: string;
+  adjustFontFallback?: boolean;
+}
+
+export interface FontResult {
+  className: string;
+  style: {
+    fontFamily: string;
+    fontWeight?: number | string;
+    fontStyle?: string;
+  };
+  variable?: string;
+}
+
+// Google Fonts API
+const GOOGLE_FONTS_API = 'https://fonts.googleapis.com/css2';
+
+// Popular Google Fonts with their weights
+export const googleFonts = {
+  Inter: {
+    weights: [100, 200, 300, 400, 500, 600, 700, 800, 900],
+    variable: true,
+    subsets: ['latin', 'latin-ext', 'cyrillic', 'greek', 'vietnamese']
+  },
+  Roboto: {
+    weights: [100, 300, 400, 500, 700, 900],
+    variable: false,
+    subsets: ['latin', 'latin-ext', 'cyrillic', 'greek', 'vietnamese']
+  },
+  'Open Sans': {
+    weights: [300, 400, 500, 600, 700, 800],
+    variable: true,
+    subsets: ['latin', 'latin-ext', 'cyrillic', 'greek', 'vietnamese']
+  },
+  Poppins: {
+    weights: [100, 200, 300, 400, 500, 600, 700, 800, 900],
+    variable: false,
+    subsets: ['latin', 'latin-ext']
+  },
+  Montserrat: {
+    weights: [100, 200, 300, 400, 500, 600, 700, 800, 900],
+    variable: true,
+    subsets: ['latin', 'latin-ext', 'cyrillic', 'vietnamese']
+  },
+  'Fira Code': {
+    weights: [300, 400, 500, 600, 700],
+    variable: true,
+    subsets: ['latin', 'latin-ext', 'cyrillic', 'greek']
+  },
+  'JetBrains Mono': {
+    weights: [100, 200, 300, 400, 500, 600, 700, 800],
+    variable: true,
+    subsets: ['latin', 'latin-ext', 'cyrillic', 'greek']
+  },
+  Geist: {
+    weights: [100, 200, 300, 400, 500, 600, 700, 800, 900],
+    variable: true,
+    subsets: ['latin', 'latin-ext']
+  },
+  'Geist Mono': {
+    weights: [100, 200, 300, 400, 500, 600, 700, 800, 900],
+    variable: true,
+    subsets: ['latin', 'latin-ext']
+  }
+};
+
+// Generate font CSS
+export function generateFontCSS(config: FontConfig): string {
+  const {
+    family,
+    weight = 400,
+    style = 'normal',
+    display = 'swap',
+    fallback = ['system-ui', 'sans-serif'],
+    variable
+  } = config;
+
+  const weights = Array.isArray(weight) ? weight : [weight];
+  const fallbackStr = fallback.map(f => f.includes(' ') ? `"${f}"` : f).join(', ');
+
+  let css = '';
+
+  // Generate @font-face for each weight
+  for (const w of weights) {
+    css += `
+@font-face {
+  font-family: '${family}';
+  font-style: ${style};
+  font-weight: ${w};
+  font-display: ${display};
+  src: local('${family}'),
+       url('/_flexi/font/${encodeURIComponent(family)}?weight=${w}&style=${style}') format('woff2');
+}
+`;
+  }
+
+  // Generate CSS variable if specified
+  if (variable) {
+    css += `
+:root {
+  ${variable}: '${family}', ${fallbackStr};
+}
+`;
+  }
+
+  return css;
+}
+
+// Generate preload link tags
+export function generateFontPreloadTags(fonts: FontConfig[]): string {
+  return fonts
+    .filter(f => f.preload !== false)
+    .map(f => {
+      const weights = Array.isArray(f.weight) ? f.weight : [f.weight || 400];
+      return weights.map(w => 
+        `<link rel="preload" href="/_flexi/font/${encodeURIComponent(f.family)}?weight=${w}&style=${f.style || 'normal'}" as="font" type="font/woff2" crossorigin>`
+      ).join('\n');
+    })
+    .join('\n');
+}
+
+// Create a font loader function (like next/font)
+export function createFont(config: FontConfig): FontResult {
+  const {
+    family,
+    weight = 400,
+    style = 'normal',
+    fallback = ['system-ui', 'sans-serif'],
+    variable
+  } = config;
+
+  // Generate unique class name
+  const hash = crypto
+    .createHash('md5')
+    .update(`${family}-${weight}-${style}`)
+    .digest('hex')
+    .slice(0, 8);
+
+  const className = `__font_${hash}`;
+  const fallbackStr = fallback.map(f => f.includes(' ') ? `"${f}"` : f).join(', ');
+
+  return {
+    className,
+    style: {
+      fontFamily: `'${family}', ${fallbackStr}`,
+      fontWeight: Array.isArray(weight) ? undefined : weight,
+      fontStyle: style
+    },
+    variable: variable || undefined
+  };
+}
+
+// Google Font loader
+export function googleFont(config: FontConfig): FontResult {
+  return createFont({
+    ...config,
+    // Google Fonts are always preloaded
+    preload: true
+  });
+}
+
+// Local font loader
+export function localFont(config: FontConfig & { src: string | { path: string; weight?: string | number; style?: string }[] }): FontResult {
+  return createFont(config);
+}
+
+// Handle font requests
+export async function handleFontRequest(
+  req: any,
+  res: any
+): Promise<void> {
+  const url = new URL(req.url, `http://${req.headers.host}`);
+  const pathParts = url.pathname.split('/');
+  const fontFamily = decodeURIComponent(pathParts[pathParts.length - 1] || '');
+  const weight = url.searchParams.get('weight') || '400';
+  const style = url.searchParams.get('style') || 'normal';
+
+  if (!fontFamily) {
+    res.writeHead(400, { 'Content-Type': 'text/plain' });
+    res.end('Missing font family');
+    return;
+  }
+
+  try {
+    // Check local cache first
+    const cacheDir = path.join(process.cwd(), '.flexi', 'font-cache');
+    const cacheKey = crypto
+      .createHash('md5')
+      .update(`${fontFamily}-${weight}-${style}`)
+      .digest('hex');
+    const cachePath = path.join(cacheDir, `${cacheKey}.woff2`);
+
+    if (fs.existsSync(cachePath)) {
+      const fontData = fs.readFileSync(cachePath);
+      res.writeHead(200, {
+        'Content-Type': 'font/woff2',
+        'Cache-Control': 'public, max-age=31536000, immutable',
+        'X-Flexi-Font-Cache': 'HIT'
+      });
+      res.end(fontData);
+      return;
+    }
+
+    // Fetch from Google Fonts
+    const googleUrl = `${GOOGLE_FONTS_API}?family=${encodeURIComponent(fontFamily)}:wght@${weight}&display=swap`;
+    
+    const cssResponse = await fetch(googleUrl, {
+      headers: {
+        'User-Agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36'
+      }
+    });
+
+    if (!cssResponse.ok) {
+      throw new Error('Failed to fetch font CSS');
+    }
+
+    const css = await cssResponse.text();
+    
+    // Extract woff2 URL from CSS
+    const woff2Match = css.match(/url\((https:\/\/fonts\.gstatic\.com[^)]+\.woff2)\)/);
+    
+    if (!woff2Match) {
+      throw new Error('Could not find woff2 URL');
+    }
+
+    // Fetch the actual font file
+    const fontResponse = await fetch(woff2Match[1]);
+    
+    if (!fontResponse.ok) {
+      throw new Error('Failed to fetch font file');
+    }
+
+    const fontBuffer = Buffer.from(await fontResponse.arrayBuffer());
+
+    // Cache the font
+    if (!fs.existsSync(cacheDir)) {
+      fs.mkdirSync(cacheDir, { recursive: true });
+    }
+    fs.writeFileSync(cachePath, fontBuffer);
+
+    // Serve the font
+    res.writeHead(200, {
+      'Content-Type': 'font/woff2',
+      'Cache-Control': 'public, max-age=31536000, immutable',
+      'X-Flexi-Font-Cache': 'MISS'
+    });
+    res.end(fontBuffer);
+
+  } catch (error: any) {
+    console.error('Font loading error:', error);
+    res.writeHead(500, { 'Content-Type': 'text/plain' });
+    res.end('Font loading failed');
+  }
+}
+
+// Pre-built font configurations
+export const fonts = {
+  // Sans-serif
+  inter: (config: Partial<FontConfig> = {}) => googleFont({ family: 'Inter', variable: '--font-inter', ...config }),
+  roboto: (config: Partial<FontConfig> = {}) => googleFont({ family: 'Roboto', variable: '--font-roboto', ...config }),
+  openSans: (config: Partial<FontConfig> = {}) => googleFont({ family: 'Open Sans', variable: '--font-open-sans', ...config }),
+  poppins: (config: Partial<FontConfig> = {}) => googleFont({ family: 'Poppins', variable: '--font-poppins', ...config }),
+  montserrat: (config: Partial<FontConfig> = {}) => googleFont({ family: 'Montserrat', variable: '--font-montserrat', ...config }),
+  geist: (config: Partial<FontConfig> = {}) => googleFont({ family: 'Geist', variable: '--font-geist', ...config }),
+  
+  // Monospace
+  firaCode: (config: Partial<FontConfig> = {}) => googleFont({ family: 'Fira Code', variable: '--font-fira-code', fallback: ['monospace'], ...config }),
+  jetbrainsMono: (config: Partial<FontConfig> = {}) => googleFont({ family: 'JetBrains Mono', variable: '--font-jetbrains', fallback: ['monospace'], ...config }),
+  geistMono: (config: Partial<FontConfig> = {}) => googleFont({ family: 'Geist Mono', variable: '--font-geist-mono', fallback: ['monospace'], ...config })
+};
+
+export default {
+  createFont,
+  googleFont,
+  localFont,
+  generateFontCSS,
+  generateFontPreloadTags,
+  handleFontRequest,
+  fonts,
+  googleFonts
+};