fusee-framework 1.6.0 → 1.8.0

package/README.md

@@ -1,123 +1,145 @@
-# Fusée Framework 🚀
-**v1.6.0 — Signals-First JS Framework | Atomic Reactivity | Peak Performance**
-
-Fusée is a custom, high-performance fine-grained reactive JavaScript framework built for speed and simplicity. It features a recursive, non-greedy compiler, a signals-based reactivity engine, Dependency Injection for components and a comprehensive CLI for instant application scaffolding.
-
----
-
-## ⚡ Quick Start
-
-The fastest way to get started with Fusée is via the CLI:
-
-```bash
-# 1. Install Fusée globally
-npm install -g fusee-framework
-
-# 2. Scaffold your first project
-create-fusee-app .
-```
-Follow the interactive prompt to choose your template (**JavaScript** or **TypeScript**) and launch your app with `npm run dev`!
-
----
-
-## 🔥 Key Features
-
-- **Signals-First Reactivity**: Modern atomic updates that ensure only the modified parts of the DOM are touched.
-- **Recursive Hybrid Compiler**: A robust architectural approach to node traversal, eliminating rendering bugs while maintaining "greedy" directive processing for speed.
-- **Strict Component System**: Use `defineComponent` for prop validation, lifecycle hooks (`onMount`, `onUnmount`), and automated cleanup.
-- **Optimized Directives**: Native support for `f-if`, `f-for`, `f-model`, `f-text`, `f-cloak` and more.
-- **Performance Shield (`f-once`)**: Isolate and stabilize static subtrees to prevent unnecessary reactivity.
-- **Vite Integration**: Full support for the fastest development workflow and Hot Module Replacement (HMR).
-
----
-
-## 🛠 Project Structure
-
-A typical Fusée project looks like this:
-
-- **`framework/`**: The core reactive engine.
-- **`app/`**: Your application logic (routes, components).
-- **`index.html`**: The entry point of your reactive world.
-
----
-
-## 📝 Example Component
-
-```javascript
-export const Welcome = defineComponent({
-    setup() {
-        const name = signal('World');
-        const count = signal(0);
-        const double = computed(() => count() * 2);
-
-        return {
-            name,
-            count,
-            double,
-            inc: () => count(count() + 1),
-            template: `
-                <div class="card">
-                    <h2>Hello, {{ name }}!</h2>
-                    <input f-model="name" placeholder="Name" />
-                    
-                    <button @click.debounce.300ms="inc">
-                        Clicked {{ count }} times
-                    </button>
-                    
-                    <p f-if="count() > 0">
-                        Double: <strong>{{ double }}</strong>
-                    </p>
-                </div>
-            `
-        };
-    }
-});
-```
-
----
-
-## ✅ Quality Assurance & Testing
-
-Fusée is built with a test-driven mindset to ensure the reliability of its reactivity engine and component lifecycle.
-
-- **Total Tests:** `385`
-- **Status:** `All Passed`
-- **Framework:** [Vitest](https://vitest.dev/)
-- **Environment:** JSDOM (Browser simulation)
-
-### Running Tests
-
-```bash
-# Run all tests (easiest)
-npm test
-
-# Run all tests with verbose output
-npx vitest --reporter=verbose
-
-# Run type tests only
-npx vitest run --typecheck
-
-# Run tests in watch mode
-npx vitest
-```
-
-### Test Coverage includes:
-*   **Reactivity Engine:** 100% (Signals, Batching, Computed, Watchers).
-*   **Component System:** Props, Slots, Async Components, and Lifecycle Hooks.
-*   **Dependency Injection:** Nested Provide/Inject and Shadowing.
-*   **Directives:** `f-if`, `f-for`, `f-model`, and Event Modifiers.
-*   **Events:** Event delegation and native event handling.
-*   **Memory Safety:** Explicit checks for memory leaks and automatic effect disposal.
-*   **Type Safety:** Comprehensive TypeScript definitions and type tests.
-*   **Integration Tests:** Advanced module combinations and edge cases.
-
----
-
-## 🚀 Future Roadmap
-
-- [ ] Advanced file-based routing support and state management
-- [ ] SSR support
-- [ ] Lightweight compiler which transforms declarative HTML into optimized runtime instructions
-- [ ] Integrated backend development support
-
-Built with ❤️ by me, Sebi Somu, a forward-thinking JavaScript Architect.
+# Fusée Framework
+
+**v1.8.0 — Signals-First JS Framework | Atomic Reactivity | Peak Performance**
+
+Fusée is a custom, high-performance fine-grained reactive JavaScript framework built for speed and simplicity. It features a recursive, non-greedy compiler, a signals-based reactivity engine, Dependency Injection for components and a comprehensive CLI for instant application scaffolding.
+
+---
+
+## Quick Start
+
+The fastest way to get started with Fusée is via the **Go-Powered CLI**:
+
+```bash
+# 1. Install Fusée CLI globally
+npm install -g fusee-framework
+
+# 2. Scaffold a new high-performance project
+create-fusee-app my-awesome-app
+# or simply
+fusee init my-awesome-app
+```
+
+Follow the interactive prompt to choose your template (**JavaScript** or **TypeScript**) and launch your app instantly!
+
+---
+
+## File-Based Routing (Nuxt-style)
+
+Fusée now supports automated, file-based routing!
+
+- **Pages**: Just drop a file in `app/pages/` and it becomes a route.
+- **Layouts**: Use `app/pages/_layout.js` to wrap your pages in consistent UI structures.
+- **Dynamic Routes**: Support for `[id].js` style dynamic parameters.
+
+```bash
+# Generate a new page instantly
+fusee generate page contact
+```
+
+---
+
+## Key Features
+
+- **New Go-Powered CLI**: Blazing fast project scaffolding and resource generation.
+- **Signals/Resources-First Reactivity**: Modern atomic updates that ensure only the modified parts of the DOM are touched.
+- **Nuxt-style File Routing**: Automated route discovery with layout support.
+- **Recursive Hybrid Compiler**: A robust architectural approach to node traversal.
+- **Optimized Directives**: Native support for `f-if`, `f-for`, `f-model`, `f-text`, `f-cloak` and more.
+- **Performance Shield (`f-once`)**: Isolate and stabilize static subtrees.
+- **Vite Integration**: Full support for the fastest development workflow and HMR.
+- **Dependency Injection**: Nested Provide/Inject and Shadowing.
+- **Memory Safety**: Explicit checks for memory leaks and automatic effect disposal.
+
+---
+
+## Project Structure
+
+A typical Fusée project looks like this:
+
+- **`framework/`**: The core reactive engine.
+- **`app/`**: Your application logic (routes, components).
+- **`index.html`**: The entry point of your reactive world.
+
+---
+
+## Example Component
+
+```javascript
+export const Welcome = defineComponent({
+  setup() {
+    const name = signal("World");
+    const count = signal(0);
+    const double = computed(() => count() * 2);
+
+    return {
+      name,
+      count,
+      double,
+      inc: () => count(count() + 1),
+      template: `
+                <div class="card">
+                    <h2>Hello, {{ name }}!</h2>
+                    <input f-model="name" placeholder="Name" />
+                    
+                    <button @click.debounce.300ms="inc">
+                        Clicked {{ count }} times
+                    </button>
+                    
+                    <p f-if="count() > 0">
+                        Double: <strong>{{ double }}</strong>
+                    </p>
+                </div>
+            `,
+    };
+  },
+});
+```
+
+---
+
+## Quality Assurance & Testing
+
+Fusée is built with a test-driven mindset to ensure the reliability of its reactivity engine and component lifecycle.
+
+- **Total Tests:** `527`
+- **Status:** `All Passed`
+- **Framework:** [Vitest](https://vitest.dev/)
+- **Environment:** JSDOM (Browser simulation)
+
+### Running Tests
+
+```bash
+# Run all tests (easiest)
+npm test
+
+# Run all tests with verbose output
+npx vitest --reporter=verbose
+
+# Run type tests only
+npx vitest run --typecheck
+
+# Run tests in watch mode
+npx vitest
+```
+
+### Test Coverage includes:
+
+- **Reactivity Engine:** 100% (Signals, Batching, Computed, Watchers).
+- **Component System:** Props, Slots, Async Components, and Lifecycle Hooks.
+- **Dependency Injection:** Nested Provide/Inject and Shadowing.
+- **Directives:** `f-if`, `f-for`, `f-model`, and Event Modifiers.
+- **Events:** Event delegation and native event handling.
+- **Memory Safety:** Explicit checks for memory leaks and automatic effect disposal.
+- **Type Safety:** Comprehensive TypeScript definitions and type tests.
+- **Integration Tests:** Advanced module combinations and edge cases.
+
+---
+
+## Future Roadmap
+
+- [ ] Advanced state management and SSR support
+- [ ] Lightweight compiler which transforms declarative HTML into optimized runtime instructions
+- [ ] Integrated backend development support
+
+Built by me, Sebi Somu, a forward-thinking JavaScript Architect.