free-framework 4.4.0

package/templates/app-template/app/views/counter.free

@@ -0,0 +1,23 @@
+component Counter {
+    state count = 0
+
+    div class="glass p-8 flex flex-col items-center gap-6 max-w-sm mx-auto mt-20" {
+        h2 class="text-2xl font-bold" {
+            text "Interactive Island"
+        }
+        
+        div class="text-6xl font-black text-glow" {
+            span class="state-bind" data-bind="count" { text "{count}" }
+        }
+
+        div class="flex gap-4" {
+            button class="btn-premium" onclick="count++" {
+                text "Increment"
+            }
+
+            button class="px-6 py-3 bg-white/10 hover:bg-white/20 rounded-xl transition-all" onclick="Free.call('addTask', { title: 'Count is ' + state.count }).then(() => alert('Saved!'))" {
+                text "Save Task to DB"
+            }
+        }
+    }
+}

package/templates/app-template/app/views/header.free

@@ -0,0 +1,13 @@
+component Header {
+    nav class="fixed top-0 left-0 right-0 z-50 px-8 py-4 glass flex justify-between items-center m-4" {
+        h1 class="text-xl font-black text-glow" {
+            text "Free Ultra"
+        }
+        
+        div class="flex gap-6 text-sm font-medium opacity-70" {
+            link "Docs" "/docs" class="hover:text-primary transition-colors"
+            link "Benchmarks" "/benchmarks" class="hover:text-primary transition-colors"
+            link "Community" "/community" class="hover:text-primary transition-colors"
+        }
+    }
+}

package/templates/app-template/config/app.js

@@ -0,0 +1,32 @@
+/**
+ * config/app.js
+ * 
+ * --------------------------------------------------------------------------
+ * Application Configuration
+ * --------------------------------------------------------------------------
+ * 
+ * This file contains the core configuration for your Free Framework application.
+ * You can set the application name, environment, and debug mode here.
+ * It is highly recommended to use the .env file to manage these settings
+ * across different environments (local, staging, production).
+ * 
+ * @security This file should NEVER contain hardcoded secrets. Always use process.env.
+ */
+
+module.exports = {
+    // The name of your application, used in logs, emails, and UI elements.
+    name: process.env.APP_NAME || 'Free Enterprise App',
+
+    // The environment the application is running in (e.g., 'local', 'staging', 'production').
+    env: process.env.NODE_ENV || 'development',
+
+    // Debug mode determines if detailed error stack traces are shown to the user.
+    // [SECURITY WARNING]: ALWAYS set this to 'false' in production to prevent sensitive logic leaks!
+    debug: process.env.APP_DEBUG === 'true' || true,
+
+    // The base URL of your application, used for generating absolute links.
+    url: process.env.APP_URL || 'http://localhost:3000',
+
+    // The default timezone for your application's dates and logging.
+    timezone: 'UTC',
+};

package/templates/app-template/config/auth.js

@@ -0,0 +1,39 @@
+/**
+ * config/auth.js
+ * 
+ * --------------------------------------------------------------------------
+ * Authentication & Security Configuration
+ * --------------------------------------------------------------------------
+ * 
+ * This file governs how your application handles user authentication,
+ * password hashing (bcrypt), and stateless API protection using JSON Web Tokens (JWT).
+ * 
+ * @security The JWT_SECRET must be a long, cryptographically secure random string.
+ * Do NOT commit your actual production `.env` file to version control.
+ */
+
+module.exports = {
+    // ── JSON Web Token (JWT) Settings ─────────────────────────────────────────
+
+    // The secret key used to sign and verify JWT tokens. 
+    // If compromised, attackers can forge logins. Keeps this extremely safe.
+    jwt_secret: process.env.JWT_SECRET || 'CHANGE_THIS_FATAL_DEFAULT_SECRET_IMMEDIATELY',
+
+    // How long until the JWT token expires (e.g., '1h', '7d', '30d').
+    // Shorter lifespans are more secure but require users to log in more often.
+    jwt_expires_in: process.env.JWT_EXPIRES_IN || '7d',
+
+
+    // ── Password Hashing Settings ──────────────────────────────────────────────
+
+    // The number of salt rounds for bcrypt. 
+    // 10 is the industry standard balance between security and performance.
+    // Higher numbers = more secure against brute-force, but slower logins/registrations.
+    bcrypt_rounds: 10,
+
+
+    // ── CSRF (Cross-Site Request Forgery) Protection ───────────────────────────
+
+    // Free Framework can automatically protect form submissions from CSRF attacks.
+    csrf_enabled: process.env.CSRF_ENABLED === 'true' || true,
+};

package/templates/app-template/config/database.js

@@ -0,0 +1,54 @@
+/**
+ * config/database.js
+ * 
+ * --------------------------------------------------------------------------
+ * Database Configuration
+ * --------------------------------------------------------------------------
+ * 
+ * Free Framework uses a powerful ORM connection pool (Knex.js) under the hood.
+ * This file maps your environment variables into the actual database driver settings.
+ * MySQL (mysql2) is the recommended production default for maximum throughput.
+ * 
+ * @security Ensure database ports are not exposed publicly, and use strong passwords.
+ */
+
+module.exports = {
+    // The default database connection to use.
+    default: process.env.DB_CLIENT || 'mysql2',
+
+    connections: {
+        // High-performance MySQL connection settings
+        mysql2: {
+            host: process.env.DB_HOST || '127.0.0.1',
+            port: process.env.DB_PORT || 3306,
+            user: process.env.DB_USER || 'root',
+            password: process.env.DB_PASS || '',
+            database: process.env.DB_NAME || 'free_db',
+
+            // Connection pooling is crucial for enterprise apps handling thousands of requests.
+            // It prevents the server from creating a new connection for every single query.
+            pool: {
+                min: Number(process.env.DB_POOL_MIN) || 5,
+                max: Number(process.env.DB_POOL_MAX) || 50
+            }
+        },
+
+        // PostgreSQL settings
+        pg: {
+            host: process.env.DB_HOST || '127.0.0.1',
+            port: process.env.DB_PORT || 5432,
+            user: process.env.DB_USER || 'postgres',
+            password: process.env.DB_PASS || '',
+            database: process.env.DB_NAME || 'free_db',
+            pool: {
+                min: Number(process.env.DB_POOL_MIN) || 2,
+                max: Number(process.env.DB_POOL_MAX) || 20
+            }
+        },
+
+        // SQLite settings (For rapid local development/testing only. NOT for high-traffic production)
+        sqlite3: {
+            filename: process.env.DB_PATH || 'database/database.sqlite'
+        }
+    }
+};

package/templates/app-template/package.json

@@ -0,0 +1,28 @@
+{
+  "name": "free-app",
+  "version": "1.0.0",
+  "description": "A new Free Framework application",
+  "main": "index.js",
+  "scripts": {
+    "start": "free serve",
+    "build": "free build"
+  },
+  "dependencies": {
+    "hyper-express": "^6.14.0",
+    "knex": "^3.1.0",
+    "mysql2": "^3.9.2",
+    "pg": "^8.11.3",
+    "live-directory": "^2.1.0",
+    "lru-cache": "^10.2.0",
+    "clean-css": "^5.3.3",
+    "html-minifier-terser": "^7.2.0",
+    "dotenv": "^16.4.5",
+    "bcryptjs": "^2.4.3",
+    "jsonwebtoken": "^9.0.2"
+  },
+  "devDependencies": {
+    "tailwindcss": "^3.4.1",
+    "postcss": "^8.4.35",
+    "autoprefixer": "^10.4.18"
+  }
+}

package/templates/app-template/resources/css/app.css

@@ -0,0 +1,11 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+/* --------------------------------------------------------------------------
+ * Free Framework Enterprise Styles
+ * --------------------------------------------------------------------------
+ * 
+ * You can write custom CSS here or use Tailwind's utility classes directly
+ * in your .free components.
+ */

package/templates/app-template/resources/views/dashboard.free

@@ -0,0 +1,25 @@
+/**
+* resources/views/dashboard.free
+*
+* An example of a protected dashboard view.
+* Demonstrates querying data from a Database (if configured).
+*/
+
+component Dashboard {
+  style {
+    .dashboard-container { padding: 2rem; background: #f3f4f6; min-height: 100vh; }
+    .card { background: white; padding: 1.5rem; border-radius: 0.5rem; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1); }
+  }
+
+  div class="dashboard-container" {
+    div class="max-w-4xl mx-auto" {
+      h1 class="text-3xl font-bold mb-6 text-gray-800" { text "Secure Dashboard" }
+
+      div class="card" {
+        h2 class="text-xl font-semibold mb-2" { text "System Status" }
+        p class="text-gray-600" { text "If you are seeing this, your enterprise framework was successfully generated and routed!" }
+        p class="text-sm mt-4 text-gray-400" { text "Tip: Check routes/web.free and app/Http/Controllers to see how this page operates." }
+      }
+    }
+  }
+}

package/templates/app-template/resources/views/home.free

@@ -0,0 +1,26 @@
+/**
+* resources/views/home.free
+*
+* The default landing page component.
+* Features modern Tailwind styling and demonstrates basic reactive state.
+*/
+
+component Home {
+  style {
+    .hero { min-height: 100vh; display: flex; flex-direction: column; justify-content: center; align-items: center; background: linear-gradient(to right, #1f2937, #111827); color: white; }
+  }
+
+  div class="hero text-center" {
+    h1 class="text-6xl font-extrabold mb-4 bg-clip-text text-transparent bg-gradient-to-r from-blue-400 to-emerald-400" {
+      text "Free Framework"
+    }
+    p class="text-xl mb-8 text-gray-300" {
+      text "The Enterprise Node.js Ecosystem. MVC, JWT, and Extreme Performance."
+    }
+
+    div class="flex gap-4" {
+      a href="https://github.com/omartolba" class="px-6 py-3 bg-blue-600 hover:bg-blue-700 rounded-lg font-bold transition-colors" { text "Documentation" }
+      a href="/dashboard" class="px-6 py-3 bg-gray-700 hover:bg-gray-600 rounded-lg font-bold transition-colors" { text "View Dashboard" }
+    }
+  }
+}

package/templates/app-template/routes/api.free

@@ -0,0 +1,22 @@
+/**
+* routes/api.free
+*
+* --------------------------------------------------------------------------
+* API Routes
+* --------------------------------------------------------------------------
+*
+* Here is where you can register API routes for your application. These
+* routes are loaded by the RouteServiceProvider and are typically assigned
+* to the "api" middleware group. They generate RESTful JSON responses.
+*
+* Security: All API endpoints dealing with sensitive data MUST be protected
+* by JWT authentication middleware.
+*/
+
+// Auth Endpoints - These point to the AuthController actions
+post "/api/register" -> register
+post "/api/login" -> login
+
+// Example of a protected API Endpoint
+// Any route defined here should have its logic handled purely in a Controller (action)
+// returning JSON objects { success: true, data: [...] }

package/templates/app-template/routes/web.free

@@ -0,0 +1,25 @@
+/**
+* routes/web.free
+*
+* --------------------------------------------------------------------------
+* Web Routes
+* --------------------------------------------------------------------------
+*
+* Here is where you can register web routes for your application. These
+* routes are typically meant to return HTML/Views to the user's browser.
+*
+* Security: These routes are public by default. To protect a route, you can
+* attach middleware globally via server configuration, or handle checks inside the
+* individual controller actions.
+*/
+
+// A simple GET request that renders the 'Home' view component
+get "/" -> Home
+
+// Example of a route that points to a dedicated controller logic before rendering
+// Ensure the 'Dashboard' view is defined in resources/views
+get "/dashboard" {
+  // Calling an action/controller before returning the view
+  // The controller should handle checking if the user is authenticated
+  // return Dashboard;
+}

package/templates/app-template/tailwind.config.js

@@ -0,0 +1,21 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+    content: [
+        "./app/**/*.free",
+        "./views/**/*.html",
+        "./public/**/*.js"
+    ],
+    theme: {
+        extend: {
+            colors: {
+                primary: '#00ff88',
+                secondary: '#00bdff',
+                dark: '#0a0a0a',
+            },
+            fontFamily: {
+                sans: ['Outfit', 'sans-serif'],
+            },
+        },
+    },
+    plugins: [],
+}

package/templates/app-template/views/about.ejs

@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>About Free</title>
+    <style>
+        body {
+            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            height: 100vh;
+            margin: 0;
+            background: #f0f2f5;
+        }
+
+        .card {
+            background: white;
+            padding: 2rem;
+            border-radius: 12px;
+            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+            text-align: center;
+        }
+
+        h1 {
+            color: #1a73e8;
+        }
+
+        a {
+            color: #1a73e8;
+            text-decoration: none;
+            font-weight: bold;
+        }
+    </style>
+</head>
+
+<body>
+    <div class="card">
+        <h1>About Free Framework</h1>
+        <p>Free is a modern full-stack web framework built for speed and simplicity.</p>
+        <p><a href="/">Back to Home</a></p>
+    </div>
+</body>
+
+</html>

package/templates/app-template/views/home.ejs

@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Welcome to Free</title>
+    <meta name="csrf-token" content="<%= csrfToken %>">
+    <script src="/free-runtime.js" defer></script>
+    <style>
+        body {
+            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            height: 100vh;
+            margin: 0;
+            background: #f0f2f5;
+        }
+
+        .card {
+            background: white;
+            padding: 2rem;
+            border-radius: 12px;
+            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+            text-align: center;
+        }
+
+        h1 {
+            color: #1a73e8;
+        }
+
+        p {
+            color: #5f6368;
+        }
+    </style>
+</head>
+
+<body>
+    <div class="card">
+        <h1>Welcome to Free Framework</h1>
+        <p>Your full-stack application is up and running!</p>
+        <p>Edit <code>app/routes.free</code> to get started.</p>
+
+        <div style="margin-top: 2rem; padding: 1rem; border: 1px dashed #ccc;">
+            <h3>Interactive Demo</h3>
+            <%- renderComponent('Counter') %>
+        </div>
+    </div>
+</body>
+
+</html>

package/templates/auth/login.html

@@ -0,0 +1,144 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+    <meta charset="UTF-8">
+    <title>Login</title>
+    <link href="https://fonts.googleapis.com/css2?family=Outfit:wght@400;700;900&display=swap" rel="stylesheet">
+    <style>
+        * {
+            box-sizing: border-box;
+            margin: 0;
+            padding: 0
+        }
+
+        body {
+            min-height: 100vh;
+            background: #050505;
+            color: white;
+            font-family: 'Outfit', sans-serif;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            justify-content: center
+        }
+
+        .card {
+            background: #111;
+            border: 1px solid #222;
+            border-radius: 20px;
+            padding: 3rem;
+            width: 100%;
+            max-width: 400px
+        }
+
+        h1 {
+            font-size: 2rem;
+            font-weight: 900;
+            margin-bottom: 0.5rem;
+            background: linear-gradient(90deg, #00ff88, #00bdff);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent
+        }
+
+        p {
+            color: #666;
+            margin-bottom: 2rem;
+            font-size: 0.9rem
+        }
+
+        input {
+            width: 100%;
+            padding: 1rem;
+            border-radius: 10px;
+            background: #000;
+            border: 1px solid #333;
+            color: white;
+            margin-bottom: 1rem;
+            font-size: 1rem;
+            outline: none;
+            transition: 0.2s
+        }
+
+        input:focus {
+            border-color: #00ff88
+        }
+
+        button {
+            width: 100%;
+            padding: 1rem;
+            background: #00ff88;
+            color: #000;
+            font-weight: 900;
+            border: none;
+            border-radius: 10px;
+            cursor: pointer;
+            font-size: 1rem;
+            transition: 0.2s
+        }
+
+        button:hover {
+            background: #00e077
+        }
+
+        .footer {
+            margin-top: 1.5rem;
+            text-align: center;
+            color: #555;
+            font-size: 0.9rem
+        }
+
+        a {
+            color: #00ff88;
+            text-decoration: none
+        }
+
+        .err {
+            background: #ff336622;
+            border: 1px solid #ff3366;
+            color: #ff3366;
+            padding: 0.8rem;
+            border-radius: 8px;
+            margin-bottom: 1rem;
+            font-size: 0.9rem;
+            display: none
+        }
+    </style>
+</head>
+
+<body>
+    <div class="card">
+        <h1>Welcome back</h1>
+        <p>Login to your account to continue</p>
+        <div class="err" id="err"></div>
+        <form onsubmit="doLogin(event)">
+            <input type="email" id="email" placeholder="Email" required>
+            <input type="password" id="password" placeholder="Password" required>
+            <button type="submit">Login</button>
+        </form>
+        <div class="footer">No account? <a href="{{registerPath}}">Register &rarr;</a></div>
+    </div>
+    <script>
+        async function doLogin(e) {
+            e.preventDefault();
+            const r = await fetch('/_free/auth/login', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({
+                    email: document.getElementById('email').value,
+                    password: document.getElementById('password').value
+                })
+            });
+            const d = await r.json();
+            if (d.success) {
+                window.location = '/dashboard';
+            } else {
+                const el = document.getElementById('err');
+                el.textContent = d.error || 'Login failed';
+                el.style.display = 'block';
+            }
+        }
+    </script>
+</body>
+
+</html>