free-framework 4.7.2 → 4.8.2

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.
@@ -207,11 +207,11 @@ if (server.namedMiddlewares['auth']) server.namedMiddlewares['AuthGuard'] = serv
207
207
  " <meta name=\"csrf-token\" content=\"${res.context.csrfToken || ''}\">\n" +
208
208
  " <link rel=\"preconnect\" href=\"https://fonts.googleapis.com\">\n" +
209
209
  " <link rel=\"preconnect\" href=\"https://fonts.gstatic.com\" crossorigin>\n" +
210
- " <link href=\"https://fonts.googleapis.com/css2?family=Outfit:wght@100..900&display=swap\" rel=\"stylesheet\">\n" +
210
+ " <link href=\"https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700;900&display=swap\" rel=\"stylesheet\">\n" +
211
211
  " <link rel=\"stylesheet\" href=\"/css/app.css\">\n" +
212
212
  " <style>\n" +
213
- " :root { --primary:#00ff88; --secondary:#00bdff; --dark:#050505; }\n" +
214
- " body { margin:0; font-family:'Outfit', system-ui, sans-serif; background:var(--dark); color:white; overflow-x:hidden; scroll-behavior:smooth; }\n" +
213
+ " :root { --primary:#fff; --bg:#000; --border:#222; }\n" +
214
+ " body { margin:0; font-family:'Inter', system-ui, sans-serif; background:var(--bg); color:#fff; -webkit-font-smoothing:antialiased; }\n" +
215
215
  " ${scopedCSS}\n" +
216
216
  " </style>\n" +
217
217
  " <script src=\"/free-runtime.js\" defer></script>\n" +
@@ -317,7 +317,7 @@ function parseTag(token, tokens, filename, source) {
317
317
  attrs[attrName] = attrVal;
318
318
  }
319
319
  children.push({ type: 'tag', name: 'a', attributes: attrs, content: txt });
320
- } else if (next.type === 'IDENTIFIER') {
320
+ } else if (next.type === 'IDENTIFIER' || next.type === 'KEYWORD') {
321
321
  children.push(parseTag(next, tokens, filename, source));
322
322
  }
323
323
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "free-framework",
3
- "version": "4.7.2",
3
+ "version": "4.8.2",
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
@@ -57,7 +57,7 @@ class FreeServer {
57
57
  console.log(`[Free Engine] 📄 Serving static: ${lookupPath}`);
58
58
  const ext = nodePath.extname(fullPath);
59
59
  const mimes = { '.js': 'application/javascript', '.css': 'text/css', '.png': 'image/png', '.jpg': 'image/jpeg', '.svg': 'image/svg+xml' };
60
- res.type(mimes[ext] || 'text/plain');
60
+ res.header('Content-Type', mimes[ext] || 'text/plain');
61
61
  return res.send(fs.readFileSync(fullPath));
62
62
  }
63
63
 
@@ -3,84 +3,60 @@
3
3
  @tailwind utilities;
4
4
 
5
5
  :root {
6
- --primary: #00ff88;
7
- --primary-glow: rgba(0, 255, 136, 0.4);
8
- --secondary: #00bdff;
9
- --dark: #050505;
10
- --surface: rgba(255, 255, 255, 0.03);
11
- --glass-border: rgba(255, 255, 255, 0.1);
6
+ --primary: #fff;
7
+ --secondary: #a1a1aa;
8
+ --bg: #000;
9
+ --surface: #09090b;
10
+ --border: #27272a;
11
+ --text-main: #fafafa;
12
+ --text-muted: #71717a;
12
13
  }
13
14
 
14
15
  body {
15
- @apply bg-black text-gray-100 selection:bg-primary selection:text-black;
16
+ @apply bg-[#000] text-zinc-50 selection:bg-white selection:text-black;
17
+ font-family: 'Inter', system-ui, -apple-system, sans-serif;
18
+ -webkit-font-smoothing: antialiased;
16
19
  background-image:
17
- radial-gradient(circle at 20% 20%, rgba(0, 255, 136, 0.05) 0%, transparent 40%),
18
- radial-gradient(circle at 80% 80%, rgba(0, 189, 255, 0.05) 0%, transparent 40%);
20
+ linear-gradient(to bottom, transparent, var(--bg)),
21
+ radial-gradient(circle at 2px 2px, rgba(255, 255, 255, 0.05) 1px, transparent 0);
22
+ background-size: 100% 100%, 40px 40px;
19
23
  }
20
24
 
21
- .glass {
22
- @apply backdrop-blur-xl bg-white/5 border border-white/10;
23
- box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.8);
25
+ .container-pro {
26
+ @apply max-w-6xl mx-auto px-8;
24
27
  }
25
28
 
26
- .nav-link {
27
- @apply relative py-2 transition-all duration-300 hover:text-primary;
28
- }
29
-
30
- .nav-link::after {
31
- content: '';
32
- @apply absolute bottom-0 left-0 w-0 h-0.5 bg-primary transition-all duration-300;
33
- }
34
-
35
- .nav-link:hover::after {
36
- @apply w-full;
37
- }
38
-
39
- .btn-premium {
40
- @apply px-8 py-4 rounded-full font-bold transition-all duration-500 relative overflow-hidden flex items-center gap-2;
41
- background: linear-gradient(135deg, var(--primary), var(--secondary));
29
+ .btn-pro {
30
+ @apply px-6 py-2.5 rounded-lg font-semibold transition-all duration-300 flex items-center gap-2;
31
+ background: #fff;
42
32
  color: #000;
43
- box-shadow: 0 0 20px var(--primary-glow);
33
+ box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1), 0 4px 12px rgba(0, 0, 0, 0.4);
44
34
  }
45
35
 
46
- .btn-premium:hover {
47
- @apply scale-105;
48
- box-shadow: 0 0 40px var(--primary-glow);
36
+ .btn-pro:hover {
37
+ @apply opacity-90 -translate-y-0.5 shadow-xl;
49
38
  }
50
39
 
51
- .hero-text {
52
- @apply text-7xl md:text-9xl font-black tracking-tighter leading-none;
53
- background: linear-gradient(180deg, #fff 0%, #888 100%);
54
- -webkit-background-clip: text;
55
- -webkit-text-fill-color: transparent;
40
+ .btn-outline {
41
+ @apply px-6 py-2.5 rounded-lg border border-border font-semibold text-zinc-300 transition-all hover:bg-zinc-900 hover:text-white;
56
42
  }
57
43
 
58
- @keyframes float {
59
- 0% {
60
- transform: translateY(0px);
61
- }
62
-
63
- 50% {
64
- transform: translateY(-20px);
65
- }
44
+ .card-pro {
45
+ @apply p-8 rounded-2xl border border-border bg-[#09090b]/50 backdrop-blur-sm transition-all duration-300 hover:border-zinc-700 hover:bg-[#09090b];
46
+ }
66
47
 
67
- 100% {
68
- transform: translateY(0px);
69
- }
48
+ .hero-title {
49
+ @apply text-6xl md:text-8xl font-extrabold tracking-tight text-white mb-8 leading-[1.1];
70
50
  }
71
51
 
72
- .animate-float {
73
- animation: float 6s ease-in-out infinite;
52
+ .nav-link {
53
+ @apply text-sm font-medium text-zinc-500 transition-colors hover:text-white;
74
54
  }
75
55
 
76
- .feature-card {
77
- @apply p-8 rounded-3xl glass transition-all duration-500 hover:-translate-y-2 hover:border-primary/30;
56
+ .badge-pro {
57
+ @apply px-2.5 py-1 rounded-full border border-border bg-zinc-900/50 text-[10px] font-bold tracking-tighter uppercase text-zinc-400;
78
58
  }
79
59
 
80
- /* --------------------------------------------------------------------------
81
- * Free Framework Enterprise Styles
82
- * --------------------------------------------------------------------------
83
- *
84
- * You can write custom CSS here or use Tailwind's utility classes directly
85
- * in your .free components.
86
- */
60
+ pre {
61
+ @apply bg-zinc-950 border border-border rounded-xl p-6 font-mono text-sm overflow-x-auto text-zinc-300;
62
+ }
@@ -1,15 +1,12 @@
1
1
  component Header {
2
- header class="fixed top-0 left-0 w-full z-50 transition-all duration-300 border-b border-white/5 backdrop-blur-md bg-black/30" {
3
- nav class="max-w-7xl mx-auto px-6 h-20 flex items-center justify-between" {
2
+ header class="fixed top-0 left-0 w-full z-50 bg-black border-b border-border h-16 flex items-center" {
3
+ nav class="container-pro w-full flex items-center justify-between" {
4
4
  div class="flex items-center gap-8" {
5
- a href="/" class="flex items-center gap-2 group" {
6
- div class="w-10 h-10 rounded-xl bg-gradient-to-tr from-primary to-secondary flex items-center justify-center shadow-lg shadow-primary/20 group-hover:rotate-12 transition-transform duration-500" {
7
- span class="text-black font-black text-xl" { text "F" }
8
- }
9
- span class="text-2xl font-black tracking-tighter text-white" { text "FREE ULTRA" }
5
+ a href="/" class="text-white font-bold tracking-tight text-lg" {
6
+ text "FREE ULTRA"
10
7
  }
11
8
 
12
- div class="hidden md:flex items-center gap-6 ml-8" {
9
+ div class="hidden md:flex gap-6" {
13
10
  a href="/" class="nav-link font-medium" { text "Home" }
14
11
  a href="/dashboard" class="nav-link font-medium" { text "Dashboard" }
15
12
  a href="/docs" class="nav-link font-medium" { text "Documentation" }
@@ -17,10 +14,10 @@ component Header {
17
14
  }
18
15
 
19
16
  div class="flex items-center gap-4" {
20
- span class="hidden sm:inline-flex items-center px-3 py-1 rounded-full bg-primary/10 border border-primary/20 text-primary text-xs font-bold tracking-widest uppercase animate-pulse" {
21
- text "v4.7.0 ACTIVE"
17
+ span class="badge-pro" {
18
+ text "v4.8.0-STABLE"
22
19
  }
23
- a href="/login" class="px-5 py-2 rounded-full border border-white/10 hover:bg-white/5 transition-colors font-semibold" {
20
+ a href="/login" class="text-sm font-medium text-white hover:opacity-80 transition-opacity" {
24
21
  text "Sign In"
25
22
  }
26
23
  }
@@ -1,73 +1,65 @@
1
- /**
2
- * resources/views/home.free
3
- *
4
- * The default landing page component.
5
- * Features modern Tailwind styling and demonstrates basic reactive state.
6
- */
7
-
8
1
  component Home {
9
- style {
10
- .hero { min-height: 100vh; display: flex; flex-direction: column; justify-content: center; align-items: center; background: linear-gradient(to right, #1f2937, #111827); color: white; }
11
- }
12
-
13
- main class="pt-32 pb-20 px-6" {
14
- // Hero Section
15
- section class="relative max-w-7xl mx-auto flex flex-col items-center text-center py-20 md:py-32" {
16
- div class="absolute -top-20 w-72 h-72 bg-primary/20 rounded-full blur-[120px] -z-10 animate-pulse" { }
17
- div class="absolute top-40 -right-20 w-96 h-96 bg-secondary/10 rounded-full blur-[150px] -z-10" { }
2
+ main class="pt-32 pb-40 overflow-hidden" {
3
+ // Hero
4
+ section class="container-pro text-center pt-24 pb-20" {
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
+ span class="w-1.5 h-1.5 rounded-full bg-emerald-500 animate-pulse" { }
7
+ text "VERSION 4.8.2 IS NOW LIVE"
8
+ }
18
9
 
19
- h1 class="hero-text mb-8" {
20
- text "Build Faster."
10
+ h1 class="hero-title" {
11
+ text "The Engine for"
21
12
  br { }
22
- span class="text-primary" { text "Deploy Sharper." }
13
+ span class="text-zinc-600" { text "High-Performance." }
23
14
  }
24
15
 
25
- p class="text-xl md:text-2xl text-gray-400 max-w-2xl mb-12 font-medium leading-relaxed" {
26
- text "The Enterprise Node.js Ecosystem you've been waiting for. Powered by Islands Architecture, built-in ORM, and Extreme SSR Performance."
16
+ p class="text-xl md:text-2xl text-zinc-500 max-w-3xl mx-auto mb-12 leading-relaxed font-medium" {
17
+ text "Experience the future of SSR with Islands Architecture, built-in Reactive state, and Enterprise-grade security. Small footprint, infinite power."
27
18
  }
28
19
 
29
- div class="flex flex-wrap justify-center gap-6" {
30
- a href="/docs" class="btn-premium" {
31
- span { text "Get Started" }
32
- svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" {
33
- path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="Arrow-right" { }
20
+ div class="flex flex-wrap justify-center gap-5" {
21
+ a href="/docs" class="btn-pro" {
22
+ text "Get Started"
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" { }
34
25
  }
35
26
  }
36
- a href="https://github.com/dev-omartolba" class="px-8 py-4 rounded-full glass font-bold hover:bg-white/10 transition-all flex items-center gap-2" {
27
+ a href="https://github.com/dev-omartolba" class="btn-outline" {
37
28
  text "View Source"
38
29
  }
39
30
  }
40
31
 
41
- div class="mt-20 w-full glass rounded-[40px] p-4 animate-float" {
42
- div class="rounded-[32px] overflow-hidden border border-white/5 bg-black/40" {
43
- div class="px-4 py-3 border-b border-white/5 flex gap-2" {
44
- div class="w-3 h-3 rounded-full bg-red-500/50" { }
45
- div class="w-3 h-3 rounded-full bg-yellow-500/50" { }
46
- div class="w-3 h-3 rounded-full bg-green-500/50" { }
47
- }
48
- pre class="p-8 text-left text-primary font-mono text-lg" {
49
- code { text "npx free-framework new my-app" }
50
- }
32
+ div class="mt-24 max-w-4xl mx-auto relative" {
33
+ div class="absolute -inset-1 bg-gradient-to-r from-zinc-800 to-zinc-900 rounded-2xl blur opacity-20" { }
34
+ pre class="relative" {
35
+ code { text "$ npx free-framework@latest new my-project" }
51
36
  }
52
37
  }
53
38
  }
54
39
 
55
- // Features Section
56
- section class="max-w-7xl mx-auto py-32" {
57
- h2 class="text-4xl md:text-6xl font-black mb-20 text-center" { text "Why Free Ultra?" }
58
-
40
+ // Features
41
+ section class="container-pro pt-32" {
59
42
  div class="grid md:grid-cols-3 gap-8" {
60
- div class="feature-card" {
61
- h3 class="text-2xl font-bold mb-4 text-primary" { text "HyperExpress Core" }
62
- p class="text-gray-400" { text "Built on top of uWebSockets.js, providing the fastest HTTP/WebSocket performance in the Node.js ecosystem." }
43
+ div class="card-pro" {
44
+ div class="w-10 h-10 rounded-lg bg-zinc-900 border border-border flex items-center justify-center mb-6" {
45
+ text ""
46
+ }
47
+ h3 class="text-xl font-bold mb-3" { text "Speed" }
48
+ p class="text-base text-zinc-500 leading-relaxed" { text "Zero-overhead runtime powered by HyperExpress for sub-millisecond responses." }
63
49
  }
64
- div class="feature-card" {
65
- h3 class="text-2xl font-bold mb-4 text-secondary" { text "Islands Architecture" }
66
- p class="text-gray-400" { text "Ships zero Javascript by default. Only hydrate the components that need interactivity for ultimate SEO and speed." }
50
+ div class="card-pro" {
51
+ div class="w-10 h-10 rounded-lg bg-zinc-900 border border-border flex items-center justify-center mb-6" {
52
+ text "🏝️"
53
+ }
54
+ h3 class="text-xl font-bold mb-3" { text "Islands" }
55
+ p class="text-base text-zinc-500 leading-relaxed" { text "Partial hydration logic that ships minimal JavaScript for maximum SEO benefits." }
67
56
  }
68
- div class="feature-card" {
69
- h3 class="text-2xl font-bold mb-4 text-white" { text "Pro-Grade ORM" }
70
- p class="text-gray-400" { text "A built-in migration system and elegant Model layer that makes database management a breeze." }
57
+ div class="card-pro" {
58
+ div class="w-10 h-10 rounded-lg bg-zinc-900 border border-border flex items-center justify-center mb-6" {
59
+ text "🛡️"
60
+ }
61
+ h3 class="text-xl font-bold mb-3" { text "Security" }
62
+ p class="text-base text-zinc-500 leading-relaxed" { text "Built-in DDoS protection, CSRF guards, and secure-by-default environment." }
71
63
  }
72
64
  }
73
65
  }