@flexireact/core 1.0.2 → 2.0.1

package/README.md

@@ -2,24 +2,33 @@
   <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/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
@@ -156,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>;
 }
 ```
 
@@ -209,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>
+  );
 }
 ```
 
@@ -480,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
@@ -544,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/{config.js → config.ts}

@@ -63,8 +63,11 @@ export const defaultConfig = {
  * @param {string} projectRoot - Path to project root
  * @returns {Object} Merged configuration
  */
-export async function loadConfig(projectRoot) {
-  const configPath = path.join(projectRoot, 'flexireact.config.js');
+export async function loadConfig(projectRoot: string) {
+  // Try .ts first, then .js
+  const configPathTs = path.join(projectRoot, 'flexireact.config.ts');
+  const configPathJs = path.join(projectRoot, 'flexireact.config.js');
+  const configPath = fs.existsSync(configPathTs) ? configPathTs : configPathJs;
   
   let userConfig = {};
   
@@ -73,8 +76,8 @@ export async function loadConfig(projectRoot) {
       const configUrl = pathToFileURL(configPath).href;
       const module = await import(`${configUrl}?t=${Date.now()}`);
       userConfig = module.default || module;
-    } catch (error) {
-      console.warn('Warning: Failed to load flexireact.config.js:', error.message);
+    } catch (error: any) {
+      console.warn('Warning: Failed to load flexireact config:', error.message);
     }
   }
   

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

@@ -3,6 +3,9 @@
  * A modern React framework with RSC, SSG, Islands, and more
  */
 
+// Types
+export type { FlexiConfig, Route, RouteType as RouteTypeEnum, PageProps, LayoutProps } from './types.js';
+
 // Core exports
 export { loadConfig, defaultConfig, resolvePaths } from './config.js';
 export { createRequestContext, useRequest, useParams, useQuery, usePathname } from './context.js';
@@ -15,7 +18,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';
@@ -67,7 +71,7 @@ export {
 } from './plugins/index.js';
 
 // Version
-export const VERSION = '2.0.0';
+export const VERSION = '2.0.1';
 
 // Default export
 export default {

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);