olova 2.0.55 → 2.0.57

package/README.md

@@ -1,321 +1,61 @@
-# Olova
+# vite-plugin-olova
 
-> Next.js-style file-based routing for Vite + React
-
-Olova brings the intuitive file-based routing conventions from Next.js App Router to your Vite + React applications. Build modern web apps with nested layouts, dynamic routes, loading states, and error boundaries - all through your file structure.
-
-## Features
-
-- 📁 **File-based routing** - Create routes by adding files to your `app` directory
-- 🏗️ **Nested layouts** - Share UI between routes with layout components
-- 🔄 **Dynamic routes** - Support for `[slug]`, `[...catchAll]`, and route groups `(group)`
-- ⏳ **Loading states** - Per-route loading UI with `loading.tsx`
-- ❌ **Error boundaries** - Per-route error handling with `error.tsx`
-- 🔗 **Client-side navigation** - Seamless SPA navigation with `Link` component
-- 🪝 **React hooks** - `usePathname`, `useParams`, `useSearchParams`, `useRouter`
-- ⚡ **Vite plugin** - Automatic route generation at build time
+A Vite plugin for building SSR/SSG applications with React and the Olova framework.
 
 ## Installation
 
 ```bash
-npm install olova
+npm install vite-plugin-olova
 ```
 
-## Quick Start
+## Usage
 
-### 1. Configure Vite
+Add the plugin to your `vite.config.ts`:
 
-```ts
-// vite.config.ts
+```typescript
 import { defineConfig } from "vite";
 import react from "@vitejs/plugin-react";
-import { olova } from "olova/plugin";
+import { olova } from "vite-plugin-olova";
 
 export default defineConfig({
   plugins: [
     react(),
     olova({
-      appDir: "src/app", // Your app directory
+      staticPaths: ["/about", "/contact"], // Optional: additional paths to pre-render
     }),
   ],
 });
 ```
 
-### 2. Create your app structure
-
-```
-src/app/
-├── layout.tsx       # Root layout
-├── page.tsx         # Home page (/)
-├── loading.tsx      # Loading state
-├── error.tsx        # Error boundary
-├── about/
-│   └── page.tsx     # About page (/about)
-├── blog/
-│   ├── layout.tsx   # Blog layout
-│   ├── page.tsx     # Blog index (/blog)
-│   └── [slug]/
-│       └── page.tsx # Blog post (/blog/:slug)
-└── (marketing)/
-    └── pricing/
-        └── page.tsx # Pricing (/pricing) - grouped route
-```
-
-### 3. Set up the router
-
-```tsx
-// src/main.tsx
-import { StrictMode } from "react";
-import { createRoot } from "react-dom/client";
-import { OlovaRouter } from "olova";
-import { routes } from "virtual:olova-routes";
-
-createRoot(document.getElementById("root")!).render(
-  <StrictMode>
-    <OlovaRouter routes={routes} />
-  </StrictMode>
-);
-```
-
-## File Conventions
-
-| File            | Purpose                                                |
-| --------------- | ------------------------------------------------------ |
-| `page.tsx`      | UI for the route (required for route to be accessible) |
-| `layout.tsx`    | Shared layout wrapping child routes                    |
-| `loading.tsx`   | Loading UI shown while page loads                      |
-| `error.tsx`     | Error UI shown when errors occur                       |
-| `not-found.tsx` | 404 UI for the route                                   |
-
-## Route Patterns
-
-### Static Routes
-
-```
-app/about/page.tsx → /about
-app/contact/page.tsx → /contact
-```
-
-### Dynamic Routes
-
-```
-app/blog/[slug]/page.tsx → /blog/:slug
-app/users/[id]/page.tsx → /users/:id
-```
-
-### Catch-all Routes
-
-```
-app/docs/[...slug]/page.tsx → /docs/*
-```
-
-### Route Groups
-
-Route groups `(folder)` organize files without affecting the URL:
-
-```
-app/(marketing)/pricing/page.tsx → /pricing
-app/(marketing)/about/page.tsx → /about
-```
-
-## Components
-
-### Link
-
-Client-side navigation with prefetching:
-
-```tsx
-import { Link } from 'olova';
-
-<Link href="/about">About</Link>
-<Link href="/blog/my-post" replace>Blog Post</Link>
-```
-
-### NavLink
-
-Navigation link with active state:
-
-```tsx
-import { NavLink } from "olova";
-
-<NavLink href="/dashboard" activeClassName="text-blue-500" exact>
-  Dashboard
-</NavLink>;
-```
-
-## Hooks
-
-### usePathname
-
-Get the current pathname:
-
-```tsx
-import { usePathname } from "olova";
-
-function Component() {
-  const pathname = usePathname();
-  return <div>Current path: {pathname}</div>;
-}
-```
-
-### useParams
-
-Access route parameters:
-
-```tsx
-import { useParams } from "olova";
-
-function BlogPost() {
-  const { slug } = useParams<{ slug: string }>();
-  return <div>Reading: {slug}</div>;
-}
-```
-
-### useSearchParams
-
-Access URL search parameters:
-
-```tsx
-import { useSearchParams } from "olova";
-
-function SearchPage() {
-  const searchParams = useSearchParams();
-  const query = searchParams.get("q");
-  return <div>Searching for: {query}</div>;
-}
-```
-
-### useRouter
-
-Programmatic navigation:
-
-```tsx
-import { useRouter } from "olova";
-
-function Component() {
-  const router = useRouter();
-
-  return (
-    <button onClick={() => router.push("/dashboard")}>Go to Dashboard</button>
-  );
-}
-```
-
-Router methods:
-
-- `push(url)` - Navigate to URL
-- `replace(url)` - Navigate without adding to history
-- `back()` - Go back
-- `forward()` - Go forward
-- `refresh()` - Refresh current route
-- `prefetch(url)` - Prefetch a route
-
-## Page Props
-
-Pages receive `params` and `searchParams`:
-
-```tsx
-// app/blog/[slug]/page.tsx
-interface PageProps {
-  params: { slug: string };
-  searchParams: Record<string, string>;
-}
-
-export default function BlogPost({ params, searchParams }: PageProps) {
-  return (
-    <article>
-      <h1>Post: {params.slug}</h1>
-    </article>
-  );
-}
-```
-
-## Layout Props
-
-Layouts receive `children` and `params`:
-
-```tsx
-// app/blog/layout.tsx
-interface LayoutProps {
-  children: React.ReactNode;
-  params: { slug?: string };
-}
-
-export default function BlogLayout({ children }: LayoutProps) {
-  return (
-    <div className="blog-layout">
-      <nav>Blog Navigation</nav>
-      <main>{children}</main>
-    </div>
-  );
-}
-```
-
-## Error Handling
+## How It Works
 
-Create `error.tsx` to handle errors in a route segment:
+The plugin provides:
 
-```tsx
-// app/blog/error.tsx
-interface ErrorProps {
-  error: Error;
-  reset: () => void;
-}
+1. **`vite-plugin-olova`** - The main Vite plugin
+2. **`vite-plugin-olova/entry-client`** - Client-side hydration entry
+3. **`vite-plugin-olova/entry-server`** - Server-side rendering entry
 
-export default function BlogError({ error, reset }: ErrorProps) {
-  return (
-    <div>
-      <h2>Something went wrong!</h2>
-      <p>{error.message}</p>
-      <button onClick={reset}>Try again</button>
-    </div>
-  );
-}
-```
-
-## Loading States
-
-Create `loading.tsx` for loading UI:
-
-```tsx
-// app/blog/loading.tsx
-export default function BlogLoading() {
-  return (
-    <div className="animate-pulse">
-      <div className="h-8 bg-gray-200 rounded w-3/4 mb-4" />
-      <div className="h-4 bg-gray-200 rounded w-full mb-2" />
-      <div className="h-4 bg-gray-200 rounded w-5/6" />
-    </div>
-  );
-}
-```
-
-## Plugin Options
+The entry files use `virtual:olova-app` which resolves to your app's route configuration from `@/route.tree`.
 
-```ts
-olova({
-  // Directory containing routes (default: 'src/app')
-  appDir: "src/app",
+## Features
 
-  // File extensions to look for (default: ['.tsx', '.ts', '.jsx', '.js'])
-  extensions: [".tsx", ".ts"],
+- **SSR (Server-Side Rendering)**: Full server-side rendering support during development
+- **SSG (Static Site Generation)**: Automatically generates static HTML files at build time
+- **Route-based code splitting**: Lazy loading for optimal performance
+- **Hydration**: Seamless client-side hydration
 
-  // Base URL path (default: '/')
-  basePath: "",
+## Options
 
-  // Enable trailing slashes (default: false)
-  trailingSlash: false,
-});
-```
+| Option        | Type       | Description                                     |
+| ------------- | ---------- | ----------------------------------------------- |
+| `staticPaths` | `string[]` | Additional paths to pre-render during SSG build |
 
-## TypeScript
+## Peer Dependencies
 
-Olova is fully typed. Import types for your pages and layouts:
-
-```tsx
-import type { PageProps, LayoutProps, ErrorProps, LoadingProps } from "olova";
-```
+- `react` >= 18.0.0
+- `react-dom` >= 18.0.0
+- `vite` >= 5.0.0
 
 ## License
 
-MIT © sera
+MIT