free-framework 4.8.4 → 4.8.11

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -234,6 +234,16 @@ if (server.namedMiddlewares['auth']) server.namedMiddlewares['AuthGuard'] = serv
234
234
  " <main id=\"free-app-root\">\n" +
235
235
  " ${pageHtml}\n" +
236
236
  " </main>\n" +
237
+ " ${process.env.NODE_ENV !== 'production' ? `\n" +
238
+ " <script>\n" +
239
+ " (function connectHMR() {\n" +
240
+ " const ws = new WebSocket('ws://' + location.host + '/_free_hmr');\n" +
241
+ " ws.onclose = () => { \n" +
242
+ " setTimeout(() => fetch('/').then(() => window.location.reload()).catch(connectHMR), 500); \n" +
243
+ " };\n" +
244
+ " console.log('[Free Engine] ⚡ HMR Active');\n" +
245
+ " })();\n" +
246
+ " </script>` : ''}\n" +
237
247
  "</body>\n" +
238
248
  "</html>`;\n" +
239
249
  " res.header('Content-Type', 'text/html').send(fullHTML);\n" +
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "free-framework",
3
- "version": "4.8.4",
3
+ "version": "4.8.11",
4
4
  "description": "Professional Node.js engine for the .free language. Blazing-fast SSR, Islands Architecture, and built-in ORM.",
5
5
  "main": "index.js",
6
6
  "bin": {
package/runtime/server.js CHANGED
@@ -15,13 +15,33 @@ const { LRUCache } = require('lru-cache');
15
15
 
16
16
  class FreeServer {
17
17
  constructor() {
18
- console.log(`[Free Engine] ⚙️ Runtime Core v4.8.3 initializing...`);
18
+ console.log(`[Free Engine] ⚙️ Runtime Core v4.8.11 initializing...`);
19
19
  this.app = new HyperExpress.Server();
20
20
  this.viewsPath = process.env.VIEWS_PATH || nodePath.join(process.cwd(), 'views');
21
21
  this.namedMiddlewares = {};
22
22
  this.errorViews = {};
23
23
  this.plugins = [];
24
24
 
25
+ // HMR (Live Reload) WebSocket Endpoint
26
+ if (process.env.NODE_ENV !== 'production') {
27
+ this.app.ws('/_free_hmr', (ws) => {
28
+ ws.on('message', () => { }); // Keep alive
29
+ });
30
+ }
31
+
32
+ // Catch-all 404 handler
33
+ this.app.set_not_found_handler((req, res) => {
34
+ const acceptsHtml = req.headers['accept']?.includes('text/html');
35
+ if (acceptsHtml) {
36
+ const premium404 = nodePath.join(__dirname, 'views/404.html');
37
+ if (fs.existsSync(premium404)) {
38
+ return res.status(404).header('Content-Type', 'text/html').send(fs.readFileSync(premium404));
39
+ }
40
+ return res.status(404).send('<h1>404</h1><p>Page Not Found</p>');
41
+ }
42
+ res.status(404).json({ success: false, error: 'Route not found' });
43
+ });
44
+
25
45
  // 1. Absolute Top Logger
26
46
  this.app.use((req, res, next) => {
27
47
  console.log(`[Free Engine] 📥 [${new Date().toLocaleTimeString()}] Incoming: ${req.method} ${req.url}`);
@@ -0,0 +1,77 @@
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+
4
+ <head>
5
+ <meta charset="UTF-8">
6
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
7
+ <title>404 | Free Ultra</title>
8
+ <link rel="preconnect" href="https://fonts.googleapis.com">
9
+ <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
10
+ <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700;900&display=swap" rel="stylesheet">
11
+ <style>
12
+ :root {
13
+ --primary: #fff;
14
+ --bg: #000;
15
+ --border: #27272a;
16
+ }
17
+
18
+ body {
19
+ margin: 0;
20
+ font-family: 'Inter', system-ui, sans-serif;
21
+ background: var(--bg);
22
+ color: white;
23
+ height: 100vh;
24
+ display: flex;
25
+ align-items: center;
26
+ justify-content: center;
27
+ overflow: hidden;
28
+ background-image: radial-gradient(circle at 2px 2px, rgba(255, 255, 255, 0.05) 1px, transparent 0);
29
+ background-size: 40px 40px;
30
+ }
31
+
32
+ .container {
33
+ text-align: center;
34
+ }
35
+
36
+ h1 {
37
+ font-size: 10rem;
38
+ font-weight: 900;
39
+ margin: 0;
40
+ line-height: 1;
41
+ letter-spacing: -5px;
42
+ }
43
+
44
+ p {
45
+ color: #71717a;
46
+ font-size: 1.25rem;
47
+ margin-top: 20px;
48
+ }
49
+
50
+ .btn {
51
+ display: inline-block;
52
+ margin-top: 40px;
53
+ padding: 12px 30px;
54
+ background: white;
55
+ color: black;
56
+ text-decoration: none;
57
+ font-weight: 600;
58
+ border-radius: 8px;
59
+ transition: all 0.2s;
60
+ }
61
+
62
+ .btn:hover {
63
+ opacity: 0.9;
64
+ transform: translateY(-2px);
65
+ }
66
+ </style>
67
+ </head>
68
+
69
+ <body>
70
+ <div class="container">
71
+ <h1>404</h1>
72
+ <p>The page you're looking for has vanished into the void.</p>
73
+ <a href="/" class="btn">Return Home</a>
74
+ </div>
75
+ </body>
76
+
77
+ </html>
@@ -0,0 +1,200 @@
1
+ component Docs {
2
+ div class="min-h-screen bg-black text-zinc-300 font-sans selection:bg-white selection:text-black" {
3
+ // Navigation / Header Space
4
+ div class="container-pro pt-32 pb-20" {
5
+ span class="badge-pro mb-4 animate-pulse" { text "v4.8.10 | Cloud Docs" }
6
+ h1 class="text-6xl md:text-8xl font-black text-white tracking-tighter mb-8 leading-none" {
7
+ text "Free Ultra"
8
+ br;
9
+ span class="text-zinc-700" { text "Documentation" }
10
+ }
11
+ p class="text-xl md:text-2xl text-zinc-500 max-w-2xl leading-relaxed mb-12" {
12
+ text "The complete 'A to Z' guide to mastering the world's fastest Islands Architecture framework."
13
+ }
14
+
15
+ div class="flex flex-wrap gap-4" {
16
+ a href="#philosophy" class="btn-pro" { text "Core Philosophy" }
17
+ a href="#cli" class="btn-outline" { text "CLI Commands" }
18
+ a href="#vscode" class="btn-outline" { text "VS Code Setup" }
19
+ }
20
+ }
21
+
22
+ // Content Sections
23
+ div class="container-pro space-y-32 pb-40" {
24
+
25
+ // 1. Core Philosophy
26
+ section id="philosophy" {
27
+ div class="grid md:grid-cols-2 gap-16 items-start" {
28
+ div {
29
+ h2 class="text-4xl font-bold text-white mb-6 tracking-tight" { text "1. Core Philosophy" }
30
+ p class="mb-6 leading-relaxed" {
31
+ text "Free Ultra isn't just another framework. It's a high-performance engine built on the principle of "
32
+ strong class="text-white" { text "Zero-JS by Default" }
33
+ text ". We use "
34
+ strong class="text-white" { text "Islands Architecture" }
35
+ text " to ensure your pages load instantly while remaining fully interactive."
36
+ }
37
+ ul class="space-y-4 text-sm" {
38
+ li class="flex gap-3" { span class="text-white" { text "•" } text "Blazing-fast SSR powered by HyperExpress." }
39
+ li class="flex gap-3" { span class="text-white" { text "•" } text "Selective Hydration: Only JavaScript that's needed enters the browser." }
40
+ li class="flex gap-3" { span class="text-white" { text "•" } text "Unified Syntax: The .free language unifies HTML, CSS, and Logic." }
41
+ }
42
+ }
43
+ div class="card-pro bg-zinc-900/20" {
44
+ pre {
45
+ code {
46
+ text "// Pure Performance\n"
47
+ text "component Fast {\n"
48
+ text " h1 { text 'Zero Delay' }\n"
49
+ text " // Static by default\n"
50
+ text "}"
51
+ }
52
+ }
53
+ }
54
+ }
55
+ }
56
+
57
+ // 2. The Free Language
58
+ section id="language" {
59
+ h2 class="text-4xl font-bold text-white mb-12 tracking-tight" { text "2. The .free Language" }
60
+ div class="grid md:grid-cols-3 gap-8" {
61
+ div class="card-pro" {
62
+ h3 class="text-xl font-bold text-white mb-4" { text "Components" }
63
+ p class="text-sm leading-relaxed" {
64
+ text "Components are the heart of Free. Defined with the "
65
+ code class="text-white" { text "component" }
66
+ text " keyword, they encapsulate structure and scoped styling."
67
+ }
68
+ }
69
+ div class="card-pro" {
70
+ h3 class="text-xl font-bold text-white mb-4" { text "State Management" }
71
+ p class="text-sm leading-relaxed" {
72
+ text "Use "
73
+ code class="text-white" { text "onMount" }
74
+ text " and "
75
+ code class="text-white" { text "onDestroy" }
76
+ text " to manage lifecycle. Logic is handled in actions that bridge server and client."
77
+ }
78
+ }
79
+ div class="card-pro" {
80
+ h3 class="text-xl font-bold text-white mb-4" { text "Partial Rendering" }
81
+ p class="text-sm leading-relaxed" {
82
+ text "The SPA engine uses partial rendering (X-Free-Partial) to update only the content area, keeping transitions smooth as silk."
83
+ }
84
+ }
85
+ }
86
+ }
87
+
88
+ // 3. Routing & ORM
89
+ section id="orm" {
90
+ div class="grid md:grid-cols-2 gap-16" {
91
+ div {
92
+ h2 class="text-4xl font-bold text-white mb-6 tracking-tight" { text "3. Routing & Logic" }
93
+ p class="mb-6" {
94
+ text "Routes are separated into "
95
+ code class="text-white" { text "web.free" }
96
+ text " for HTML pages and "
97
+ code class="text-white" { text "api.free" }
98
+ text " for JSON endpoints. All logic is handled via high-speed action handlers."
99
+ }
100
+ div class="card-pro border-zinc-800" {
101
+ h4 class="text-white font-bold mb-2" { text "Built-in ORM" }
102
+ p class="text-sm" {
103
+ text "Zero-config SQLite integration. Run "
104
+ code class="text-white" { text "ORM.migrate()" }
105
+ text " and your models are ready. No complex drivers or boilerplate needed."
106
+ }
107
+ }
108
+ }
109
+ div class="card-pro bg-zinc-950" {
110
+ pre {
111
+ code {
112
+ text "get \"/dashboard\" -> Dashboard\n\n"
113
+ text "post \"/api/login\" {\n"
114
+ text " const user = await ORM.find('User', { email: body.email });\n"
115
+ text " return { success: !!user };\n"
116
+ text "}"
117
+ }
118
+ }
119
+ }
120
+ }
121
+ }
122
+
123
+ // 4. CLI Power-user
124
+ section id="cli" {
125
+ h2 class="text-4xl font-bold text-white mb-12 tracking-tight" { text "4. CLI Power-user Guide" }
126
+ div class="grid grid-cols-1 md:grid-cols-2 gap-4" {
127
+ div class="flex justify-between p-4 border border-zinc-800 rounded-lg hover:border-zinc-600 transition-colors" {
128
+ code class="text-white" { text "free serve" }
129
+ span class="text-zinc-600 truncate" { text "Ignites development server with HMR" }
130
+ }
131
+ div class="flex justify-between p-4 border border-zinc-800 rounded-lg hover:border-zinc-600 transition-colors" {
132
+ code class="text-white" { text "free make:crud <name>" }
133
+ span class="text-zinc-600 truncate" { text "Generates full MVC scaffold" }
134
+ }
135
+ div class="flex justify-between p-4 border border-zinc-800 rounded-lg hover:border-zinc-600 transition-colors" {
136
+ code class="text-white" { text "free doctor" }
137
+ span class="text-zinc-600 truncate" { text "Audits and repairs environment" }
138
+ }
139
+ div class="flex justify-between p-4 border border-zinc-800 rounded-lg hover:border-zinc-600 transition-colors" {
140
+ code class="text-white" { text "free bench" }
141
+ span class="text-zinc-600 truncate" { text "Runs load tests on your routes" }
142
+ }
143
+ div class="flex justify-between p-4 border border-zinc-800 rounded-lg hover:border-zinc-600 transition-colors" {
144
+ code class="text-white" { text "free route:list" }
145
+ span class="text-zinc-600 truncate" { text "Displays all registered endpoints" }
146
+ }
147
+ }
148
+ }
149
+
150
+ // 5. IDE Extensions
151
+ section id="vscode" {
152
+ div class="bg-zinc-900/10 border border-zinc-800 rounded-3xl p-12" {
153
+ h2 class="text-4xl font-bold text-white mb-8 tracking-tight" { text "5. IDE Ecosystem" }
154
+
155
+ div class="grid md:grid-cols-2 gap-12" {
156
+ div {
157
+ h3 class="text-2xl font-bold text-white mb-4" { text "Visual Studio Code" }
158
+ p class="mb-6 text-sm" { text "Get syntax highlighting, auto-completion, and deep linting for .free files." }
159
+ div class="space-y-4" {
160
+ a href="https://marketplace.visualstudio.com/items?itemName=dev-omartolba.free-vscode" class="block text-zinc-400 hover:text-white transition-colors flex items-center gap-2" {
161
+ text "→ Install from VS Marketplace"
162
+ }
163
+ a href="https://open-vsx.org/extension/dev-omartolba/free-vscode" class="block text-zinc-400 hover:text-white transition-colors flex items-center gap-2" {
164
+ text "→ Install from Antigravity / Open VSX"
165
+ }
166
+ }
167
+ }
168
+ div {
169
+ h3 class="text-2xl font-bold text-white mb-4" { text "Manual Installation" }
170
+ p class="mb-4 text-xs font-mono uppercase tracking-widest text-zinc-600" { text "Air-gapped Setup" }
171
+ div class="card-pro bg-black border-zinc-800 p-6" {
172
+ ol class="text-sm space-y-3" {
173
+ li { text "1. Download the .vsix file from GitHub." }
174
+ li { text "2. Open VS Code." }
175
+ li { text "3. Run 'Extensions: Install from VSIX...' command." }
176
+ }
177
+ }
178
+ }
179
+ }
180
+ }
181
+ }
182
+ }
183
+
184
+ // Footer
185
+ footer class="border-t border-zinc-900 py-20" {
186
+ div class="container-pro text-center" {
187
+ p class="text-sm text-zinc-600" {
188
+ text "Free Ultra Framework © 2026. Built for professionals. "
189
+ a href="https://omar-fathy.xyz/free-docs/guide.php" class="text-zinc-400 hover:text-white" { text "Official Encyclopedia" }
190
+ }
191
+ </div>
192
+ }
193
+ }
194
+
195
+ style {
196
+ html { scroll-behavior: smooth; }
197
+ .hero-title { background: linear-gradient(to right, #fff, #555); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
198
+ .badge-pro { display: inline-block; }
199
+ }
200
+ }
@@ -8,17 +8,25 @@ component Header {
8
8
 
9
9
  div class="hidden md:flex gap-6" {
10
10
  a href="/" class="nav-link font-medium" { text "Home" }
11
- a href="/dashboard" class="nav-link font-medium" { text "Dashboard" }
12
11
  a href="/docs" class="nav-link font-medium" { text "Documentation" }
12
+ if (props.user) {
13
+ a href="/dashboard" class="nav-link font-medium" { text "Dashboard" }
14
+ }
13
15
  }
14
16
  }
15
17
 
16
18
  div class="flex items-center gap-4" {
17
19
  span class="badge-pro" {
18
- text "v4.8.4"
20
+ text "v4.8.7"
19
21
  }
20
- a href="/login" class="text-sm font-medium text-white hover:opacity-80 transition-opacity" {
21
- text "Sign In"
22
+ if (props.user) {
23
+ a href="/logout" class="text-sm font-medium text-white hover:opacity-80 transition-opacity" {
24
+ text "Logout (${props.user.name})"
25
+ }
26
+ } else {
27
+ a href="/login" class="text-sm font-medium text-white hover:opacity-80 transition-opacity" {
28
+ text "Sign In"
29
+ }
22
30
  }
23
31
  }
24
32
  }
@@ -4,7 +4,7 @@ component Home {
4
4
  section class="container-pro text-center pt-24 pb-20" {
5
5
  div class="inline-flex items-center gap-2 px-3 py-1 rounded-full border border-border bg-zinc-900/50 text-[11px] font-bold text-zinc-500 mb-8" {
6
6
  span class="w-1.5 h-1.5 rounded-full bg-emerald-500 animate-pulse" { }
7
- text "VERSION 4.8.2 IS NOW LIVE"
7
+ text "VERSION 4.8.10 IS NOW LIVE"
8
8
  }
9
9
 
10
10
  h1 class="hero-title" {
@@ -18,10 +18,10 @@ component Home {
18
18
  }
19
19
 
20
20
  div class="flex flex-wrap justify-center gap-5" {
21
- a href="/docs" class="btn-pro" {
22
- text "Get Started"
21
+ a href="https://omar-fathy.xyz/free-docs/guide.php" class="btn-pro" {
22
+ text "Read Encyclopedia"
23
23
  svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" {
24
- path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3" { }
24
+ path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18 18.247 18.477 16.5 18c-1.746 0-3.332.477-4.5 1.253" { }
25
25
  }
26
26
  }
27
27
  a href="https://github.com/dev-omartolba" class="btn-outline" {
@@ -0,0 +1,31 @@
1
+ component Login {
2
+ div class="min-h-screen flex items-center justify-center bg-black px-8" {
3
+ div class="w-full max-w-md" {
4
+ div class="text-center mb-10" {
5
+ h2 class="text-3xl font-bold tracking-tight text-white" { text "Welcome Back" }
6
+ p class="text-zinc-500 mt-2" { text "Sign in to your enterprise console" }
7
+ }
8
+
9
+ div class="card-pro" {
10
+ form class="space-y-6" {
11
+ div {
12
+ label class="block text-sm font-medium text-zinc-400 mb-2" { text "Email Address" }
13
+ input type="email" class="w-full bg-black border border-zinc-800 rounded-lg px-4 py-3 text-white focus:border-white transition-colors outline-none" placeholder="name@company.com";
14
+ }
15
+ div {
16
+ label class="block text-sm font-medium text-zinc-400 mb-2" { text "Password" }
17
+ input type="password" class="w-full bg-black border border-zinc-800 rounded-lg px-4 py-3 text-white focus:border-white transition-colors outline-none" placeholder="••••••••";
18
+ }
19
+ button type="submit" class="btn-pro w-full justify-center py-3" {
20
+ text "Continue"
21
+ }
22
+ }
23
+ }
24
+
25
+ p class="text-center text-zinc-500 mt-8 text-sm" {
26
+ text "Don't have an account? "
27
+ a href="/register" class="text-white hover:underline" { text "Create one" }
28
+ }
29
+ }
30
+ }
31
+ }
@@ -16,10 +16,14 @@
16
16
  // A simple GET request that renders the 'Home' view component
17
17
  get "/" -> Home
18
18
 
19
+ // Documentation & Authentication
20
+ get "/docs" -> Docs
21
+ get "/login" -> Login
22
+
19
23
  // Example of a route that points to a dedicated controller logic before rendering
20
24
  // Ensure the 'Dashboard' view is defined in resources/views
21
25
  get "/dashboard" {
22
26
  // Calling an action/controller before returning the view
23
27
  // The controller should handle checking if the user is authenticated
24
- // return Dashboard;
28
+ return Dashboard;
25
29
  }