@flexireact/core 1.0.1 → 2.0.0

package/README.md

@@ -1,25 +1,34 @@
 <p align="center">
-  <img src="./assets/logo.png" alt="FlexiReact Logo" width="400" />
+  <img src="./assets/flexireact.webp" alt="FlexiReact Logo" width="400" />
 </p>
 
-<h1 align="center">FlexiReact</h1>
+<h1 align="center">FlexiReact v2</h1>
 
 <p align="center">
   <strong>The Modern React Framework</strong>
 </p>
 
 <p align="center">
-  A blazing-fast React framework with TypeScript, Tailwind CSS, SSR, SSG, Islands architecture, and file-based routing.<br/>
+  A blazing-fast React framework with TypeScript, Tailwind CSS v4, SSR, SSG, Islands architecture, and file-based routing.<br/>
   Inspired by Next.js, Remix, Astro, and TanStack Start — but simpler and lighter.
 </p>
 
 <p align="center">
-  <a href="https://www.npmjs.com/package/flexireact"><img src="https://img.shields.io/npm/v/flexireact.svg" alt="npm version" /></a>
+  <a href="https://www.npmjs.com/package/@flexireact/core"><img src="https://img.shields.io/npm/v/@flexireact/core.svg" alt="npm version" /></a>
   <a href="https://opensource.org/licenses/MIT"><img src="https://img.shields.io/badge/License-MIT-yellow.svg" alt="License: MIT" /></a>
-  <a href="#"><img src="https://img.shields.io/badge/TypeScript-Ready-blue.svg" alt="TypeScript Ready" /></a>
-  <a href="#"><img src="https://img.shields.io/badge/Tailwind-CSS-38B2AC.svg" alt="Tailwind CSS" /></a>
+  <a href="#"><img src="https://img.shields.io/badge/TypeScript-Native-blue.svg" alt="TypeScript Native" /></a>
+  <a href="#"><img src="https://img.shields.io/badge/Tailwind-v4-38B2AC.svg" alt="Tailwind CSS v4" /></a>
 </p>
 
+## 🆕 What's New in v2
+
+- **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
+- **Modern 404 Page** — Beautiful, interactive error pages
+- **Enhanced DevTools** — Precise error messages with color-coded render times
+- **Improved CLI** — TypeScript-based CLI with better templates
+
 ## ✨ Features
 
 ### 🏗️ Core Framework
@@ -140,8 +149,9 @@
 
 ```bash
 # Create a new project
-npx flexireact create myapp
-cd myapp
+npx create-flexireact@latest my-app
+cd my-app
+npm install
 
 # Start development server
 npm run dev
@@ -155,51 +165,73 @@ npm run start
 
 Open http://localhost:3000
 
-## 📁 Project Structure
+## 📁 Project Structure (v2)
+
+FlexiReact v2 introduces a new `routes/` directory with enhanced routing capabilities:
 
 ```
 myapp/
-├── app/                       # App directory
-│   ├── components/            # Reusable components
-│   │   ├── Button.tsx         # Button component
-│   │   ├── Card.tsx           # Card component
-│   │   ├── Navbar.tsx         # Navigation bar
-│   │   └── index.ts           # Component exports
+├── app/                        # App directory (layout, components, styles)
+│   ├── components/
+│   │   ├── ui/                 # UI components (Button, Card, etc.)
+│   │   └── layout/             # Layout components (Navbar, Footer)
 │   ├── styles/
-│   │   └── globals.css        # Global styles + Tailwind
-│   └── layout.tsx             # Root layout
-├── pages/                     # Routes (file-based)
-│   ├── index.tsx              # → /
-│   ├── about.tsx              # → /about
+│   │   └── globals.css         # Global styles + Tailwind v4
+│   ├── providers/              # React context providers
+│   └── layout.tsx              # Root layout
+├── routes/                     # FlexiReact v2 file-based routing
+│   ├── (public)/               # Route groups (don't affect URL)
+│   │   ├── home.tsx            # → /
+│   │   └── about.tsx           # → /about
 │   ├── blog/
-│   │   ├── index.tsx          # → /blog
-│   │   └── [slug].tsx         # → /blog/:slug
+│   │   ├── index.tsx           # → /blog
+│   │   └── [slug].tsx          # → /blog/:slug
 │   └── api/
-│       └── hello.ts           # → /api/hello
-├── public/                    # Static assets
-├── tailwind.config.js         # Tailwind configuration
-├── tsconfig.json              # TypeScript configuration
-├── flexireact.config.ts       # FlexiReact configuration
+│       └── hello.ts            # → /api/hello
+├── lib/                        # Utilities
+│   └── utils.ts
+├── public/                     # Static assets
+├── tsconfig.json               # TypeScript configuration
+├── flexireact.config.ts        # FlexiReact configuration
 └── package.json
 ```
 
-## 🛣️ Routing
+## 🛣️ Routing (v2)
+
+FlexiReact v2 supports three routing conventions (in priority order):
+
+### 1. Routes Directory (Recommended)
+
+| File | Route |
+|------|-------|
+| `routes/(public)/home.tsx` | `/` |
+| `routes/(public)/about.tsx` | `/about` |
+| `routes/blog/index.tsx` | `/blog` |
+| `routes/blog/[slug].tsx` | `/blog/:slug` |
+| `routes/[...path].tsx` | Catch-all route |
+| `routes/api/hello.ts` | `/api/hello` |
+
+### 2. App Directory (Next.js style)
+
+| File | Route |
+|------|-------|
+| `app/page.tsx` | `/` |
+| `app/about/page.tsx` | `/about` |
+| `app/blog/[slug]/page.tsx` | `/blog/:slug` |
 
-### Page Routes
+### 3. Pages Directory (Legacy)
 
 | File | Route |
 |------|-------|
-| `pages/index.jsx` | `/` |
-| `pages/about.jsx` | `/about` |
-| `pages/blog/[slug].jsx` | `/blog/:slug` |
-| `pages/[...path].jsx` | Catch-all route |
+| `pages/index.tsx` | `/` |
+| `pages/about.tsx` | `/about` |
 
 ### Dynamic Routes
 
-```jsx
-// pages/users/[id].jsx
-export default function User({ params }) {
-  return <h1>User: {params.id}</h1>;
+```tsx
+// routes/blog/[slug].tsx
+export default function BlogPost({ params }: { params: { slug: string } }) {
+  return <h1>Post: {params.slug}</h1>;
 }
 ```
 
@@ -208,42 +240,62 @@ export default function User({ params }) {
 Use parentheses to group routes without affecting the URL:
 
 ```
-pages/
-  (marketing)/
-    about.jsx      # → /about
-    contact.jsx    # → /contact
-  (app)/
-    dashboard.jsx  # → /dashboard
+routes/
+  (public)/
+    home.tsx       # → /
+    about.tsx      # → /about
+  (dashboard)/
+    settings.tsx   # → /settings
 ```
 
 ## 📐 Layouts
 
-Create persistent layouts in `layouts/`:
+Create layouts in `app/layout.tsx` or within route directories:
 
-```jsx
-// layouts/root.jsx
-export default function RootLayout({ children }) {
+```tsx
+// app/layout.tsx
+import { Navbar } from './components/layout/Navbar';
+import { Footer } from './components/layout/Footer';
+
+export default function RootLayout({ children }: { children: React.ReactNode }) {
   return (
-    <div>
-      <header>My App</header>
-      <main>{children}</main>
-      <footer>© 2024</footer>
-    </div>
+    <html lang="en" className="dark">
+      <head>
+        <link rel="stylesheet" href="/styles.css" />
+      </head>
+      <body className="bg-background text-foreground">
+        <Navbar />
+        <main>{children}</main>
+        <Footer />
+      </body>
+    </html>
   );
 }
 ```
 
 ## ⏳ Loading & Error States
 
-```jsx
-// pages/loading.jsx
+```tsx
+// routes/loading.tsx
 export default function Loading() {
-  return <div>Loading...</div>;
+  return (
+    <div className="flex items-center justify-center min-h-screen">
+      <div className="w-8 h-8 border-2 border-primary border-t-transparent rounded-full animate-spin" />
+    </div>
+  );
 }
 
-// pages/error.jsx
-export default function Error({ error }) {
-  return <div>Error: {error.message}</div>;
+// routes/error.tsx
+export default function Error({ error, reset }: { error: Error; reset: () => void }) {
+  return (
+    <div className="flex flex-col items-center justify-center min-h-screen">
+      <h1 className="text-4xl font-bold text-red-500">Something went wrong</h1>
+      <p className="text-gray-400 mt-4">{error.message}</p>
+      <button onClick={reset} className="mt-8 px-6 py-3 bg-primary text-black rounded-lg">
+        Try again
+      </button>
+    </div>
+  );
 }
 ```
 
@@ -479,63 +531,6 @@ Islands provide partial hydration:
 - **Better performance** — less code to parse/execute
 - **Selective loading** — hydrate on visibility, interaction, etc.
 
-## 🎨 FlexiUI - Official UI Library
-
-FlexiReact comes with an official UI component library: **@flexireact/flexi-ui**
-
-```bash
-npm install @flexireact/flexi-ui
-```
-
-### Features
-- 🌙 **Dark-first design** with neon emerald accents
-- ♿ **Fully accessible** (ARIA-compliant, Radix UI primitives)
-- 🎯 **TypeScript native** with full type safety
-- 🌳 **Tree-shakeable** — import only what you need
-- ⚡ **SSR ready** — works with FlexiReact SSR
-
-### Quick Setup
-
-```js
-// tailwind.config.js
-const { flexiUIPlugin } = require('@flexireact/flexi-ui/tailwind');
-
-module.exports = {
-  darkMode: 'class',
-  content: [
-    './pages/**/*.{js,ts,jsx,tsx}',
-    './node_modules/@flexireact/flexi-ui/dist/**/*.js',
-  ],
-  plugins: [flexiUIPlugin],
-};
-```
-
-### Usage
-
-```jsx
-import { Button, Card, Badge, Input } from '@flexireact/flexi-ui';
-
-export default function MyPage() {
-  return (
-    <Card>
-      <Badge variant="success">New</Badge>
-      <h2>Welcome!</h2>
-      <Input placeholder="Enter your email" />
-      <Button>Get Started</Button>
-    </Card>
-  );
-}
-```
-
-### Available Components
-- **Core**: Button, Input, Textarea, Checkbox, Switch, Select
-- **Display**: Card, Badge, Avatar, Tooltip
-- **Feedback**: Alert, Toast, Spinner, Skeleton, Progress
-- **Overlay**: Modal, Drawer, Dropdown
-- **Layout**: Separator, Tabs
-
-📖 [FlexiUI Documentation](https://github.com/flexireact/flexi-ui)
-
 ---
 
 ## 📋 Requirements
@@ -543,7 +538,13 @@ export default function MyPage() {
 - Node.js 18+
 - React 18+
 
+## 🔗 Links
+
+- [GitHub Repository](https://github.com/flexireact/flexireact)
+- [npm Package](https://www.npmjs.com/package/@flexireact/core)
+- [Issues](https://github.com/flexireact/flexireact/issues)
+
 ## 📄 License
 
-MIT
+MIT © [FlexiReact Team](https://github.com/flexireact)
 

package/bin/flexireact.js

@@ -0,0 +1,23 @@
+#!/usr/bin/env node
+
+/**
+ * FlexiReact CLI Entry Point
+ * Uses tsx to run TypeScript CLI directly
+ */
+
+import { spawnSync } from 'child_process';
+import { fileURLToPath } from 'url';
+import { dirname, join } from 'path';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = dirname(__filename);
+
+const cliPath = join(__dirname, '..', 'cli', 'index.ts');
+
+// Run the CLI with tsx
+const result = spawnSync('npx', ['tsx', cliPath, ...process.argv.slice(2)], {
+  stdio: 'inherit',
+  shell: true,
+});
+
+process.exit(result.status ?? 0);

package/cli/index.ts

@@ -112,7 +112,7 @@ async function createProject(projectName?: string): Promise<void> {
       name: 'projectName',
       message: 'Project name:',
       initial: 'my-flexi-app',
-      validate: (value) => value.length > 0 || 'Project name is required'
+      validate: (value: string) => value.length > 0 || 'Project name is required'
     });
     name = response.projectName;
     if (!name) process.exit(1);
@@ -830,21 +830,15 @@ ${pc.cyan('   │')}                                         ${pc.cyan('│')}
 ${pc.cyan('   ╰─────────────────────────────────────────╯')}
 `);
 
-  const loaderPath = path.join(__dirname, '..', 'core', 'loader.js');
-  const serverPath = path.join(__dirname, '..', 'core', 'server', 'index.js');
-  const loaderUrl = pathToFileURL(loaderPath).href;
+  const startDevPath = path.join(__dirname, '..', 'core', 'start-dev.ts');
 
   const child = spawn(
-    process.execPath,
-    [
-      '--import',
-      `data:text/javascript,import { register } from 'node:module'; register('${loaderUrl}', import.meta.url);`,
-      '-e',
-      `import('${pathToFileURL(serverPath).href}').then(m => m.createServer({ mode: 'development' }))`
-    ],
+    'npx',
+    ['tsx', startDevPath],
     {
       stdio: 'inherit',
       cwd: process.cwd(),
+      shell: true,
       env: { ...process.env, NODE_ENV: 'development', FORCE_COLOR: '1' }
     }
   );
@@ -909,21 +903,15 @@ async function runStart(): Promise<void> {
   log.info('Starting production server...');
   log.blank();
 
-  const loaderPath = path.join(__dirname, '..', 'core', 'loader.js');
-  const serverPath = path.join(__dirname, '..', 'core', 'server', 'index.js');
-  const loaderUrl = pathToFileURL(loaderPath).href;
+  const startProdPath = path.join(__dirname, '..', 'core', 'start-prod.ts');
 
   const child = spawn(
-    process.execPath,
-    [
-      '--import',
-      `data:text/javascript,import { register } from 'node:module'; register('${loaderUrl}', import.meta.url);`,
-      '-e',
-      `import('${pathToFileURL(serverPath).href}').then(m => m.createServer({ mode: 'production' }))`
-    ],
+    'npx',
+    ['tsx', startProdPath],
     {
       stdio: 'inherit',
       cwd: process.cwd(),
+      shell: true,
       env: { ...process.env, NODE_ENV: 'production' }
     }
   );

package/core/cli/{logger.js → logger.ts}

@@ -65,7 +65,13 @@ const box = {
   verticalLeft: '┤',
 };
 
-function createBox(content, options = {}) {
+interface BoxOptions {
+  padding?: number;
+  borderColor?: (s: string) => string;
+  width?: number;
+}
+
+function createBox(content: string, options: BoxOptions = {}) {
   const { 
     padding = 1, 
     borderColor = colors.primary,
@@ -180,7 +186,7 @@ function pluginLoader(plugins = []) {
 // HTTP Request Logger
 // ============================================================================
 
-function request(method, path, statusCode, duration, options = {}) {
+function request(method: string, path: string, statusCode: number, duration: number, options: { type?: string } = {}) {
   const { type = 'dynamic' } = options;
   
   // Method colors

package/core/client/{hydration.js → hydration.ts}

@@ -6,6 +6,16 @@
 import React from 'react';
 import { hydrateRoot, createRoot } from 'react-dom/client';
 
+// Extend Window interface for __FLEXI_DATA__
+declare global {
+  interface Window {
+    __FLEXI_DATA__?: {
+      islands?: any[];
+      props?: Record<string, any>;
+    };
+  }
+}
+
 /**
  * Hydrates a specific island component
  */

package/core/client/{islands.js → islands.ts}

@@ -40,7 +40,12 @@ export function IslandBoundary({ children, fallback = null, name = 'island' }) {
 /**
  * Creates a lazy-loaded island
  */
-export function createClientIsland(loader, options = {}) {
+interface LazyIslandOptions {
+  fallback?: React.ReactNode;
+  name?: string;
+}
+
+export function createClientIsland(loader: () => Promise<any>, options: LazyIslandOptions = {}) {
   const { fallback = null, name = 'lazy-island' } = options;
 
   return function LazyIsland(props) {

package/core/client/{navigation.js → navigation.ts}

@@ -6,7 +6,10 @@
 import React from 'react';
 
 // Navigation state
-const navigationState = {
+const navigationState: {
+  listeners: Set<(url: string) => void>;
+  prefetched: Set<string>;
+} = {
   listeners: new Set(),
   prefetched: new Set()
 };
@@ -14,7 +17,12 @@ const navigationState = {
 /**
  * Navigates to a new URL
  */
-export function navigate(url, options = {}) {
+interface NavigateOptions {
+  replace?: boolean;
+  scroll?: boolean;
+}
+
+export function navigate(url: string, options: NavigateOptions = {}) {
   const { replace = false, scroll = true } = options;
 
   if (replace) {

package/core/client/{runtime.js → runtime.ts}

@@ -6,6 +6,22 @@
 import { hydrateAllIslands, setupProgressiveHydration } from './hydration.js';
 import { navigate, prefetch } from './navigation.js';
 
+// Extend Window interface
+declare global {
+  interface Window {
+    FlexiReact: {
+      navigate: typeof navigate;
+      prefetch: typeof prefetch;
+      hydrateAllIslands: typeof hydrateAllIslands;
+      setupProgressiveHydration: typeof setupProgressiveHydration;
+    };
+    __FLEXI_DATA__?: {
+      islands?: any[];
+      props?: Record<string, any>;
+    };
+  }
+}
+
 // Expose to global scope
 window.FlexiReact = {
   navigate,

package/core/{index.js → index.ts}

@@ -15,7 +15,8 @@ export { buildRouteTree, matchRoute, findRouteLayouts, RouteType } from './route
 export { renderPage, renderError, renderLoading } from './render/index.js';
 
 // Server
-export { createServer } from './server/index.js';
+import { createServer } from './server/index.js';
+export { createServer };
 
 // Build
 export { build, buildDev, BuildMode } from './build/index.js';

package/core/islands/{index.js → index.ts}

@@ -63,8 +63,13 @@ export function getRegisteredIslands() {
 /**
  * Creates an island component wrapper
  */
-export function createIsland(Component, options = {}) {
-  const { name = Component.name || 'Island', clientPath } = options;
+interface IslandOptions {
+  name?: string;
+  clientPath?: string;
+}
+
+export function createIsland(Component: React.ComponentType<any>, options: IslandOptions = {}) {
+  const { name = (Component as any).name || 'Island', clientPath } = options;
 
   function IslandWrapper(props) {
     return Island({
@@ -148,9 +153,16 @@ export const LoadStrategy = {
 /**
  * Creates a lazy island that hydrates based on strategy
  */
-export function createLazyIsland(Component, options = {}) {
+interface LazyIslandOptions {
+  name?: string;
+  clientPath?: string;
+  strategy?: string;
+  media?: string | null;
+}
+
+export function createLazyIsland(Component: React.ComponentType<any>, options: LazyIslandOptions = {}) {
   const {
-    name = Component.name || 'LazyIsland',
+    name = (Component as any).name || 'LazyIsland',
     clientPath,
     strategy = LoadStrategy.VISIBLE,
     media = null

package/core/{logger.js → logger.ts}

@@ -122,7 +122,7 @@ export const logger = {
   },
 
   // HTTP request log - Compact single line like Next.js
-  request(method, path, status, time, extra = {}) {
+  request(method: string, path: string, status: number, time: number, extra: { type?: string } = {}) {
     const methodColor = getMethodColor(method);
     const statusColor = getStatusColor(status);
     const timeStr = formatTime(time);

package/core/middleware/{index.js → index.ts}

@@ -29,8 +29,22 @@ import { pathToFileURL } from 'url';
 /**
  * Middleware response helpers
  */
+interface MiddlewareResponseOptions {
+  type?: string;
+  status?: number;
+  headers?: Record<string, string>;
+  body?: any;
+  url?: string | null;
+}
+
 export class MiddlewareResponse {
-  constructor(options = {}) {
+  type: string;
+  status: number;
+  headers: Map<string, string>;
+  body: any;
+  url: string | null;
+
+  constructor(options: MiddlewareResponseOptions = {}) {
     this.type = options.type || 'next';
     this.status = options.status || 200;
     this.headers = new Map(Object.entries(options.headers || {}));
@@ -69,7 +83,7 @@ export class MiddlewareResponse {
   /**
    * Return a JSON response
    */
-  static json(data, options = {}) {
+  static json(data: any, options: { status?: number; headers?: Record<string, string> } = {}) {
     return new MiddlewareResponse({
       type: 'response',
       status: options.status || 200,
@@ -81,7 +95,7 @@ export class MiddlewareResponse {
   /**
    * Return an HTML response
    */
-  static html(content, options = {}) {
+  static html(content: string, options: { status?: number; headers?: Record<string, string> } = {}) {
     return new MiddlewareResponse({
       type: 'response',
       status: options.status || 200,
@@ -95,7 +109,16 @@ export class MiddlewareResponse {
  * Middleware request wrapper
  */
 export class MiddlewareRequest {
-  constructor(req) {
+  raw: any;
+  method: string;
+  url: string;
+  headers: Map<string, string>;
+  pathname: string;
+  searchParams: URLSearchParams;
+  query: Record<string, string>;
+  cookies: Map<string, string>;
+
+  constructor(req: any) {
     this.raw = req;
     this.method = req.method;
     this.url = req.url;
@@ -105,7 +128,7 @@ export class MiddlewareRequest {
     const parsedUrl = new URL(req.url, `http://${req.headers.host || 'localhost'}`);
     this.pathname = parsedUrl.pathname;
     this.searchParams = parsedUrl.searchParams;
-    this.query = Object.fromEntries(parsedUrl.searchParams);
+    this.query = Object.fromEntries(parsedUrl.searchParams) as Record<string, string>;
     
     // Parse cookies
     this.cookies = this._parseCookies(req.headers.cookie || '');
@@ -274,7 +297,7 @@ export const middlewares = {
   /**
    * CORS middleware
    */
-  cors(options = {}) {
+  cors(options: { origin?: string; methods?: string; headers?: string; credentials?: boolean } = {}) {
     const {
       origin = '*',
       methods = 'GET,HEAD,PUT,PATCH,POST,DELETE',
@@ -294,7 +317,7 @@ export const middlewares = {
 
       // Handle preflight
       if (request.method === 'OPTIONS') {
-        return MiddlewareResponse.json({}, { status: 204, headers: response.headers });
+        return MiddlewareResponse.json({}, { status: 204, headers: Object.fromEntries(response.headers) });
       }
 
       return response;
@@ -330,7 +353,7 @@ export const middlewares = {
   /**
    * Rate limiting middleware
    */
-  rateLimit(options = {}) {
+  rateLimit(options: { windowMs?: number; max?: number } = {}) {
     const { windowMs = 60000, max = 100 } = options;
     const requests = new Map();
 
@@ -369,7 +392,7 @@ export const middlewares = {
   /**
    * Logging middleware
    */
-  logger(options = {}) {
+  logger(options: { format?: string } = {}) {
     const { format = 'combined' } = options;
 
     return (request) => {