@flexireact/core 3.0.3 → 4.0.0

package/README.md

@@ -2,7 +2,7 @@
   <img src="./assets/flexireact.webp" alt="FlexiReact Logo" width="400" />
 </p>
 
-<h1 align="center">⚡ FlexiReact v3</h1>
+<h1 align="center">⚡ FlexiReact v4</h1>
 
 <p align="center">
   <strong>The Future of React Development</strong>
@@ -48,16 +48,14 @@ Open [http://localhost:3000](http://localhost:3000) 🎉
 
 ---
 
-## 🆕 What's New in v3.0
+## 🆕 What's New in v4
 
-### v3.0.0 — The Future of React
-- **🌐 Universal Edge Runtime** — Deploy anywhere: Node.js, Bun, Deno, Cloudflare Workers, Vercel Edge
-- **⚡ Smart Caching** — TTL, stale-while-revalidate, tag-based invalidation
-- **🎯 Partial Prerendering (PPR)** — Static shell + streaming dynamic content
-- **🛠️ CLI Scaffolding** — Generate pages, components, hooks, APIs with `flexi g`
-- **🔧 Advanced DevTools** — Routes, Components, Network, Performance monitoring
-- **🎨 FlexiUI Integration** — 50+ beautiful, accessible React components
-- **📱 Sexy Templates** — Modern, responsive landing pages out of the box
+### v4.0.0 — React 19 Native Edition
+- **⚛️ React 19 Native** — Full support for React 19 (Actions, `useActionState`, `useOptimistic`, `useFormStatus`, `use()`)
+- **🚀 Enhanced Actions** — Simplified server action handling with native React 19 primitives
+- **🔄 Improved Hydration** — Leveraging React 19 `onRecoverableError` for better error resilience
+- **📦 New Hooks API** — Centralized `core/hooks` module for React 19 + FlexiReact utilities
+- **⚡ Version 4.0** — Major release with stability improvements and updated CLI templates
 
 ## ✨ Features
 
@@ -92,8 +90,9 @@ Open [http://localhost:3000](http://localhost:3000) 🎉
 | 🚀 **Prefetch** | Automatic link prefetching for instant navigation |
 | 🔍 **TanStack Query** | Built-in support for useQuery, useMutation, and caching |
 | 🐻 **Zustand / Jotai** | Lightweight state management integration |
-| ⚡ **Optimistic Updates** | Instant UI feedback with automatic rollback |
-| ⏳ **Suspense Ready** | React Suspense for loading states and streaming |
+| ⚡ **Optimistic Updates** | Instant UI feedback with `useOptimistic` (React 19) |
+| ⏳ **Suspense Ready** | React Suspense and `use()` hook for async data |
+| 🏗️ **Actions State** | Native `useActionState` and `useFormStatus` support |
 
 ### 🛡️ Middleware & Security
 
@@ -147,7 +146,7 @@ Open [http://localhost:3000](http://localhost:3000) 🎉
 | 🎣 **Lifecycle Hooks** | `beforeRender`, `afterRender`, `onError` hooks |
 | 📦 **Custom Templates** | Create and share your own project templates |
 | 🔄 **Migration Tools** | Automatic migration from Next.js, CRA, Vite |
-| ⚙️ **Config API** | Fully customizable `flexireact.config.ts` |
+| ⚙️ **Config API** | Fully customizable `@flexireact/core.config.ts` |
 
 ---
 
@@ -746,7 +745,7 @@ export default {
 ### Built-in Plugins
 
 ```js
-import { builtinPlugins } from 'flexireact';
+import { builtinPlugins } from '@flexireact/core';
 
 export default {
   plugins: [
@@ -859,7 +858,7 @@ Islands provide partial hydration:
 
 | Package | Version | Description |
 |---------|---------|-------------|
-| [@flexireact/core](https://www.npmjs.com/package/@flexireact/core) | ![npm](https://img.shields.io/npm/v/@flexireact/core?color=00FF9C) | Core framework |
+| [flexireact](https://www.npmjs.com/package/flexireact) | ![npm](https://img.shields.io/npm/v/@flexireact/core?color=00FF9C) | Core framework |
 | [@flexireact/flexi-ui](https://www.npmjs.com/package/@flexireact/flexi-ui) | ![npm](https://img.shields.io/npm/v/@flexireact/flexi-ui?color=00FF9C) | UI components |
 | [create-flexireact](https://www.npmjs.com/package/create-flexireact) | ![npm](https://img.shields.io/npm/v/create-flexireact?color=00FF9C) | Project scaffolding |
 

package/dist/cli/index.js

@@ -730,8 +730,8 @@ async function createDefaultTemplate(projectPath, name, useTypeScript) {
       doctor: "flexi doctor"
     },
     dependencies: {
-      react: "^18.3.1",
-      "react-dom": "^18.3.1",
+      react: "^19.0.0",
+      "react-dom": "^19.0.0",
       "class-variance-authority": "^0.7.0",
       clsx: "^2.1.1",
       "tailwind-merge": "^2.5.5",
@@ -743,8 +743,8 @@ async function createDefaultTemplate(projectPath, name, useTypeScript) {
       autoprefixer: "^10.4.20",
       ...useTypeScript ? {
         typescript: "^5.7.2",
-        "@types/react": "^18.3.14",
-        "@types/react-dom": "^18.3.2",
+        "@types/react": "^19.0.0",
+        "@types/react-dom": "^19.0.0",
         "@types/node": "^22.10.1"
       } : {}
     }
@@ -1104,7 +1104,7 @@ const styles = {
     fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
   },
   nav: {
-    position: 'fixed' as const,
+    position: 'fixed',
     top: 0,
     left: 0,
     right: 0,
@@ -1136,10 +1136,10 @@ const styles = {
   navLink: { color: '#94a3b8', textDecoration: 'none', fontSize: 14 },
   hero: {
     display: 'flex',
-    flexDirection: 'column' as const,
+    flexDirection: 'column',
     alignItems: 'center',
     justifyContent: 'center',
-    textAlign: 'center' as const,
+    textAlign: 'center',
     padding: '140px 24px 80px',
   },
   badge: {
@@ -1168,7 +1168,7 @@ const styles = {
     lineHeight: 1.6,
     marginBottom: 32,
   },
-  buttons: { display: 'flex', gap: 16, flexWrap: 'wrap' as const, justifyContent: 'center' },
+  buttons: { display: 'flex', gap: 16, flexWrap: 'wrap', justifyContent: 'center' },
   primaryBtn: {
     background: 'linear-gradient(135deg, #6366f1, #8b5cf6)',
     color: '#fff',
@@ -1195,7 +1195,7 @@ const styles = {
   featuresTitle: {
     fontSize: 32,
     fontWeight: 700,
-    textAlign: 'center' as const,
+    textAlign: 'center',
     marginBottom: 48,
   },
   grid: {
@@ -1213,7 +1213,7 @@ const styles = {
   cardTitle: { fontSize: 18, fontWeight: 600, marginBottom: 8 },
   cardDesc: { fontSize: 14, color: '#94a3b8', lineHeight: 1.5 },
   footer: {
-    textAlign: 'center' as const,
+    textAlign: 'center',
     padding: 32,
     color: '#64748b',
     borderTop: '1px solid rgba(255,255,255,0.1)',
@@ -1229,7 +1229,7 @@ export function get(req${ext === "tsx" ? ": any" : ""}, res${ext === "tsx" ? ":
   res.json({
     message: 'Hello from FlexiReact API! \u{1F680}',
     timestamp: new Date().toISOString(),
-    framework: 'FlexiReact v2.1'
+    framework: 'FlexiReact v3.1'
   });
 }
 
@@ -1254,15 +1254,24 @@ ${pc2.cyan("   \u2502")}   ${pc2.dim("The Modern React Framework")}          ${p
 ${pc2.cyan("   \u2502")}                                         ${pc2.cyan("\u2502")}
 ${pc2.cyan("   \u2570\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u256F")}
 `);
-  const startDevPath = path2.join(__dirname2, "..", "core", "start-dev.ts");
+  const isBuilt = __dirname2.includes("dist");
+  const ext = isBuilt ? "js" : "ts";
+  const startDevDir = isBuilt ? path2.join(__dirname2, "..", "core") : path2.join(__dirname2, "..", "core");
+  const startDevPath = path2.join(startDevDir, `start-dev.${ext}`);
+  const tsxBin = "tsx";
   const child = spawn(
     "npx",
-    ["tsx", startDevPath],
+    [tsxBin, startDevPath],
     {
       stdio: "inherit",
       cwd: process.cwd(),
       shell: true,
-      env: { ...process.env, NODE_ENV: "development", FORCE_COLOR: "1" }
+      env: {
+        ...process.env,
+        NODE_ENV: "development",
+        FORCE_COLOR: "1",
+        NODE_PATH: path2.join(process.cwd(), "node_modules")
+      }
     }
   );
   child.on("error", (error) => {
@@ -1282,8 +1291,11 @@ async function runBuild(options = {}) {
   log2.blank();
   const spinner = ora({ text: "Compiling...", color: "cyan" }).start();
   try {
-    const buildPath = path2.join(__dirname2, "..", "core", "build", "index.js");
-    const configPath = path2.join(__dirname2, "..", "core", "config.js");
+    const isBuilt = __dirname2.includes("dist");
+    const ext = isBuilt ? "js" : "ts";
+    const coreDir = isBuilt ? path2.join(__dirname2, "..", "core") : path2.join(__dirname2, "..", "core");
+    const buildPath = path2.join(coreDir, "build", `index.${ext}`);
+    const configPath = path2.join(coreDir, `config.${ext}`);
     const buildModule = await import(pathToFileURL(buildPath).href);
     const configModule = await import(pathToFileURL(configPath).href);
     const projectRoot = process.cwd();
@@ -1338,7 +1350,9 @@ async function runStart() {
   log2.blank();
   log2.info("Starting production server...");
   log2.blank();
-  const startProdPath = path2.join(__dirname2, "..", "core", "start-prod.ts");
+  const isBuilt = __dirname2.includes("dist");
+  const ext = isBuilt ? "js" : "ts";
+  const startProdPath = path2.join(__dirname2, "..", "core", `start-prod.${ext}`);
   const child = spawn(
     "npx",
     ["tsx", startProdPath],