@float.js/core 2.0.7 → 2.2.0
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.
- package/README.md +66 -0
- package/dist/cli/index.js +620 -135
- package/dist/cli/index.js.map +1 -1
- package/dist/index.d.ts +1 -1
- package/dist/index.js +630 -145
- package/dist/index.js.map +1 -1
- package/dist/router/index.d.ts +4 -0
- package/dist/router/index.js +32 -2
- package/dist/router/index.js.map +1 -1
- package/dist/server/index.js +557 -72
- package/dist/server/index.js.map +1 -1
- package/package.json +12 -1
package/README.md
CHANGED
|
@@ -12,6 +12,10 @@ Float.js is a blazing-fast, full-stack React framework with file-based routing,
|
|
|
12
12
|
- 📡 **API Routes** - Crea APIs con archivos `route.ts`
|
|
13
13
|
- 🤖 **AI Ready** - Soporte nativo para streaming con OpenAI/Anthropic
|
|
14
14
|
- 📊 **Dev Dashboard** - Panel de desarrollo en `/__float`
|
|
15
|
+
- 🎨 **Tailwind CSS** - Auto-setup automático con PostCSS
|
|
16
|
+
- 🔄 **Layouts** - Layouts anidados con jerarquía automática
|
|
17
|
+
- ⏳ **Loading States** - Loading UI con Suspense boundaries
|
|
18
|
+
- 💾 **Persistent Cache** - Builds 10x más rápidos con caché en disco
|
|
15
19
|
|
|
16
20
|
## Quick Start
|
|
17
21
|
|
|
@@ -71,6 +75,68 @@ export function POST(request: Request) {
|
|
|
71
75
|
}
|
|
72
76
|
```
|
|
73
77
|
|
|
78
|
+
## Tailwind CSS
|
|
79
|
+
|
|
80
|
+
Float.js automatically sets up Tailwind CSS when you run `float dev`. If Tailwind isn't configured, it will:
|
|
81
|
+
|
|
82
|
+
1. Create `tailwind.config.js`
|
|
83
|
+
2. Create `postcss.config.js`
|
|
84
|
+
3. Create `app/globals.css` with Tailwind directives
|
|
85
|
+
4. Create `app/layout.tsx` to import global styles
|
|
86
|
+
|
|
87
|
+
Install Tailwind dependencies:
|
|
88
|
+
|
|
89
|
+
```bash
|
|
90
|
+
npm install -D tailwindcss postcss autoprefixer
|
|
91
|
+
```
|
|
92
|
+
|
|
93
|
+
Your components will automatically use Tailwind classes:
|
|
94
|
+
|
|
95
|
+
```tsx
|
|
96
|
+
export default function Home() {
|
|
97
|
+
return (
|
|
98
|
+
<div className="flex items-center justify-center min-h-screen">
|
|
99
|
+
<h1 className="text-4xl font-bold text-blue-600">Hello Float!</h1>
|
|
100
|
+
</div>
|
|
101
|
+
)
|
|
102
|
+
}
|
|
103
|
+
```
|
|
104
|
+
|
|
105
|
+
## Layouts & Loading States
|
|
106
|
+
|
|
107
|
+
Create shared UI with layouts and loading states:
|
|
108
|
+
|
|
109
|
+
```tsx
|
|
110
|
+
// app/layout.tsx - Root layout
|
|
111
|
+
export default function RootLayout({ children }: { children: React.ReactNode }) {
|
|
112
|
+
return (
|
|
113
|
+
<html lang="en">
|
|
114
|
+
<body>
|
|
115
|
+
<nav>My App</nav>
|
|
116
|
+
{children}
|
|
117
|
+
</body>
|
|
118
|
+
</html>
|
|
119
|
+
)
|
|
120
|
+
}
|
|
121
|
+
|
|
122
|
+
// app/dashboard/layout.tsx - Nested layout
|
|
123
|
+
export default function DashboardLayout({ children }: { children: React.ReactNode }) {
|
|
124
|
+
return (
|
|
125
|
+
<div className="dashboard">
|
|
126
|
+
<aside>Sidebar</aside>
|
|
127
|
+
<main>{children}</main>
|
|
128
|
+
</div>
|
|
129
|
+
)
|
|
130
|
+
}
|
|
131
|
+
|
|
132
|
+
// app/dashboard/loading.tsx - Loading UI
|
|
133
|
+
export default function Loading() {
|
|
134
|
+
return <div>Loading dashboard...</div>
|
|
135
|
+
}
|
|
136
|
+
```
|
|
137
|
+
|
|
138
|
+
Layouts are nested automatically: `RootLayout` → `DashboardLayout` → `Page`
|
|
139
|
+
|
|
74
140
|
## CLI Commands
|
|
75
141
|
|
|
76
142
|
| Command | Description |
|