revine 1.4.1 → 1.5.1

package/README.md

@@ -53,6 +53,48 @@ src/pages/about.tsx → /about
 
 src/pages/blog/[slug].tsx → /blog/:slug
 
+## Data Fetching & Caching
+
+Revine includes built-in support for cached API calls, allowing you to easily store and reuse server responses.
+
+### `revineFetch`
+
+A wrapper around the native `fetch` API with caching capabilities.
+
+```typescript
+import { revineFetch } from "revine";
+
+const data = await revineFetch("https://api.example.com/data", {
+  cacheTTL: 60000, // Cache for 1 minute (in ms)
+  persist: true    // Optional: Persist to localStorage
+});
+```
+
+### `useFetch` Hook
+
+A React hook for making cached API calls within components.
+
+```tsx
+import { useFetch } from "revine";
+
+function MyComponent() {
+  const { data, loading, error, revalidate } = useFetch("https://api.example.com/data", {
+    cacheTTL: 300000, // 5 minutes
+    persist: true
+  });
+
+  if (loading) return <div>Loading...</div>;
+  if (error) return <div>Error: {error.message}</div>;
+
+  return (
+    <div>
+      <pre>{JSON.stringify(data, null, 2)}</pre>
+      <button onClick={() => revalidate()}>Refresh Data</button>
+    </div>
+  );
+}
+```
+
 ## Contributing
 
 ### Clone repository

package/dist/client.d.ts

@@ -6,6 +6,9 @@ export type { LinkProps } from "./components/Link.js";
 export { NavLink } from "./components/NavLink.js";
 export type { NavLinkProps } from "./components/NavLink.js";
 export { useRouter } from "./hooks/useRouter.js";
+export { useFetch } from "./hooks/useFetch.js";
+export { revineFetch } from "./runtime/fetch.js";
+export type { RevineFetchOptions } from "./runtime/fetch.js";
 export { defineConfig } from "./runtime/defineConfig.js";
 export { env, envAll } from "./runtime/env.js";
 export { middlewareResponse } from "./runtime/middleware.js";

package/dist/client.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"client.d.ts","sourceRoot":"","sources":["../src/client.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,MAAM,EACN,cAAc,EACd,WAAW,EACX,WAAW,EACX,SAAS,EACT,eAAe,EAChB,MAAM,kBAAkB,CAAC;AAC1B,OAAO,EAAE,KAAK,EAAE,MAAM,uBAAuB,CAAC;AAC9C,YAAY,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AACxD,OAAO,EAAE,IAAI,EAAE,MAAM,sBAAsB,CAAC;AAC5C,YAAY,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAC;AACtD,OAAO,EAAE,OAAO,EAAE,MAAM,yBAAyB,CAAC;AAClD,YAAY,EAAE,YAAY,EAAE,MAAM,yBAAyB,CAAC;AAC5D,OAAO,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAC;AACjD,OAAO,EAAE,YAAY,EAAE,MAAM,2BAA2B,CAAC;AACzD,OAAO,EAAE,GAAG,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAC;AAC/C,OAAO,EAAE,kBAAkB,EAAE,MAAM,yBAAyB,CAAC;AAC7D,YAAY,EAAE,gBAAgB,EAAE,YAAY,EAAE,iBAAiB,EAAE,kBAAkB,EAAE,MAAM,yBAAyB,CAAC;AACrH,YAAY,EAAE,WAAW,EAAE,MAAM,oBAAoB,CAAC"}
+{"version":3,"file":"client.d.ts","sourceRoot":"","sources":["../src/client.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,MAAM,EACN,cAAc,EACd,WAAW,EACX,WAAW,EACX,SAAS,EACT,eAAe,EAChB,MAAM,kBAAkB,CAAC;AAC1B,OAAO,EAAE,KAAK,EAAE,MAAM,uBAAuB,CAAC;AAC9C,YAAY,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AACxD,OAAO,EAAE,IAAI,EAAE,MAAM,sBAAsB,CAAC;AAC5C,YAAY,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAC;AACtD,OAAO,EAAE,OAAO,EAAE,MAAM,yBAAyB,CAAC;AAClD,YAAY,EAAE,YAAY,EAAE,MAAM,yBAAyB,CAAC;AAC5D,OAAO,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAC;AACjD,OAAO,EAAE,QAAQ,EAAE,MAAM,qBAAqB,CAAC;AAC/C,OAAO,EAAE,WAAW,EAAE,MAAM,oBAAoB,CAAC;AACjD,YAAY,EAAE,kBAAkB,EAAE,MAAM,oBAAoB,CAAC;AAC7D,OAAO,EAAE,YAAY,EAAE,MAAM,2BAA2B,CAAC;AACzD,OAAO,EAAE,GAAG,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAC;AAC/C,OAAO,EAAE,kBAAkB,EAAE,MAAM,yBAAyB,CAAC;AAC7D,YAAY,EAAE,gBAAgB,EAAE,YAAY,EAAE,iBAAiB,EAAE,kBAAkB,EAAE,MAAM,yBAAyB,CAAC;AACrH,YAAY,EAAE,WAAW,EAAE,MAAM,oBAAoB,CAAC"}

package/dist/client.js

@@ -3,6 +3,8 @@ export { Image } from "./components/Image.js";
 export { Link } from "./components/Link.js";
 export { NavLink } from "./components/NavLink.js";
 export { useRouter } from "./hooks/useRouter.js";
+export { useFetch } from "./hooks/useFetch.js";
+export { revineFetch } from "./runtime/fetch.js";
 export { defineConfig } from "./runtime/defineConfig.js";
 export { env, envAll } from "./runtime/env.js";
 export { middlewareResponse } from "./runtime/middleware.js";

package/dist/commands/createProject.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"createProject.d.ts","sourceRoot":"","sources":["../../src/commands/createProject.ts"],"names":[],"mappings":"AAsDA,wBAAsB,aAAa,CACjC,WAAW,EAAE,MAAM,EACnB,OAAO,EAAE;IAAE,KAAK,CAAC,EAAE,OAAO,CAAA;CAAE,iBA6E7B"}
+{"version":3,"file":"createProject.d.ts","sourceRoot":"","sources":["../../src/commands/createProject.ts"],"names":[],"mappings":"AAwDA,wBAAsB,aAAa,CACjC,WAAW,EAAE,MAAM,EACnB,OAAO,EAAE;IAAE,KAAK,CAAC,EAAE,OAAO,CAAA;CAAE,iBA8F7B"}

package/dist/commands/createProject.js

@@ -7,7 +7,9 @@ import { askForTailwindSetup, initGit, runProject } from "../prompts/index.js";
 import { installDependencies } from "../setup/dependencies.js";
 import { setupTailwind } from "../setup/tailwind.js";
 import { copyTemplate } from "../utils/file.js";
-import { logError, logInfo } from "../utils/logger.js";
+import { logError, logStep, logSuccess, getLogo } from "../utils/logger.js";
+import boxen from "boxen";
+import chalk from "chalk";
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = path.dirname(__filename);
 const GITIGNORE_CONTENT = `# Dependencies
@@ -55,7 +57,7 @@ export async function createProject(projectName, options) {
     const projectDir = path.resolve(projectName);
     const isCurrentDir = [".", "./"].includes(projectName);
     try {
-        logInfo(`Creating project in ${projectDir}...`);
+        logStep(`Creating project in ${chalk.cyan(projectDir)}...`);
         // Ensure the project directory exists
         await fs.ensureDir(projectDir);
         // This copies everything, including hidden directories like .revine
@@ -89,17 +91,31 @@ export async function createProject(projectName, options) {
         // Update README with the project name
         await updateReadme(readmePath, finalProjectName);
         // Install dependencies
-        logInfo("\nInstalling dependencies...");
+        logStep("Installing dependencies...");
         await installDependencies(projectDir);
         // If Tailwind is selected, set it up
         if (useTailwind) {
+            logStep("Setting up Tailwind CSS...");
             await setupTailwind(projectDir);
         }
-        logInfo(`\nSuccess! Created project at ${projectDir}`);
-        logInfo("\nStart developing with:");
-        if (!isCurrentDir)
-            console.log(`  cd ${projectName}`);
-        console.log("  npm run dev\n");
+        logSuccess(`Project created at ${chalk.cyan(projectDir)}`);
+        const successContent = [
+            getLogo(),
+            "",
+            `${chalk.bold.green("Success!")} Your Revine project is ready.`,
+            "",
+            `${chalk.white("Next steps:")}`,
+            !isCurrentDir ? `${chalk.dim("1.")} ${chalk.cyan(`cd ${projectName}`)}` : "",
+            `${isCurrentDir ? chalk.dim("1.") : chalk.dim("2.")} ${chalk.cyan("npm run dev")}`,
+            "",
+            `${chalk.dim("Happy coding!")}`
+        ].filter(Boolean).join("\n");
+        console.log(boxen(successContent, {
+            padding: 1,
+            margin: { top: 1, bottom: 1, left: 0, right: 0 },
+            borderStyle: "round",
+            borderColor: "green",
+        }));
         // Check if Git exists and initialize repository if user agrees
         await initGit(projectDir);
         // Prompt to run project

package/dist/hooks/useFetch.d.ts

@@ -0,0 +1,14 @@
+import { RevineFetchOptions } from "../runtime/fetch.js";
+export interface UseFetchResult<T> {
+    data: T | null;
+    loading: boolean;
+    error: Error | null;
+    revalidate: () => Promise<void>;
+}
+/**
+ * A React hook for making cached API calls.
+ * @param url The URL to fetch
+ * @param options Fetch and cache options
+ */
+export declare function useFetch<T = any>(url: string, options?: RevineFetchOptions): UseFetchResult<T>;
+//# sourceMappingURL=useFetch.d.ts.map

package/dist/hooks/useFetch.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useFetch.d.ts","sourceRoot":"","sources":["../../src/hooks/useFetch.ts"],"names":[],"mappings":"AACA,OAAO,EAAe,kBAAkB,EAAE,MAAM,qBAAqB,CAAC;AAEtE,MAAM,WAAW,cAAc,CAAC,CAAC;IAC/B,IAAI,EAAE,CAAC,GAAG,IAAI,CAAC;IACf,OAAO,EAAE,OAAO,CAAC;IACjB,KAAK,EAAE,KAAK,GAAG,IAAI,CAAC;IACpB,UAAU,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;CACjC;AAED;;;;GAIG;AACH,wBAAgB,QAAQ,CAAC,CAAC,GAAG,GAAG,EAC9B,GAAG,EAAE,MAAM,EACX,OAAO,GAAE,kBAAuB,GAC/B,cAAc,CAAC,CAAC,CAAC,CA+BnB"}

package/dist/hooks/useFetch.js

@@ -0,0 +1,38 @@
+import { useState, useEffect } from "react";
+import { revineFetch } from "../runtime/fetch.js";
+/**
+ * A React hook for making cached API calls.
+ * @param url The URL to fetch
+ * @param options Fetch and cache options
+ */
+export function useFetch(url, options = {}) {
+    const [data, setData] = useState(null);
+    const [loading, setLoading] = useState(true);
+    const [error, setError] = useState(null);
+    const fetchData = async (isRevalidating = false) => {
+        try {
+            setLoading(true);
+            const result = await revineFetch(url, {
+                ...options,
+                revalidate: isRevalidating || options.revalidate,
+            });
+            setData(result);
+            setError(null);
+        }
+        catch (err) {
+            setError(err instanceof Error ? err : new Error(String(err)));
+        }
+        finally {
+            setLoading(false);
+        }
+    };
+    useEffect(() => {
+        fetchData();
+    }, [url, JSON.stringify(options)]);
+    return {
+        data,
+        loading,
+        error,
+        revalidate: () => fetchData(true),
+    };
+}

package/dist/index.js

@@ -4,6 +4,8 @@ import { readFileSync } from "fs";
 import path from "path";
 import { fileURLToPath } from "url";
 import { createProject } from "./commands/createProject.js";
+import { printDevServerInfo, logStep, logSuccess, logBrand } from "./utils/logger.js";
+import chalk from "chalk";
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = path.dirname(__filename);
 const pkgPath = path.resolve(__dirname, "../package.json");
@@ -23,25 +25,33 @@ const runViteCommand = async (command) => {
     const { generateRevineViteConfig } = await import(path.resolve(__dirname, "runtime/bundler/generateConfig.js"));
     const config = await generateRevineViteConfig();
     if (command === "dev") {
+        const startTime = Date.now();
         const server = await vite.createServer({
             ...config,
             configFile: false, // we pass config directly, no file needed
         });
         await server.listen();
-        server.printUrls();
+        const port = server.config.server.port || 3000;
+        printDevServerInfo(pkg.version, port, startTime);
     }
     else if (command === "build") {
+        const startTime = Date.now();
+        logStep("Building project for production...");
         await vite.build({
             ...config,
             configFile: false,
         });
+        const duration = Date.now() - startTime;
+        logSuccess(`Build completed in ${chalk.bold(duration)}ms`);
     }
     else if (command === "preview") {
+        const startTime = Date.now();
         const server = await vite.preview({
             ...config,
             configFile: false,
         });
-        server.printUrls();
+        const port = server.config.preview.port || 3000;
+        printDevServerInfo(pkg.version, port, startTime);
     }
 };
 // Root command — handles: npx revine <project-name>
@@ -78,4 +88,5 @@ program
     .command("preview")
     .description("Preview the production build")
     .action(() => runViteCommand("preview"));
+logBrand();
 program.parse(process.argv);

package/dist/runtime/bundler/defaults/vite.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"vite.d.ts","sourceRoot":"","sources":["../../../../src/runtime/bundler/defaults/vite.ts"],"names":[],"mappings":"AAKA,eAAO,MAAM,iBAAiB;;;;;;;;;;;;;;;;;;;CAsB7B,CAAC"}
+{"version":3,"file":"vite.d.ts","sourceRoot":"","sources":["../../../../src/runtime/bundler/defaults/vite.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,iBAAiB;;;;;;;;;;;;;;;;;;;CAsB7B,CAAC"}

package/dist/runtime/bundler/defaults/vite.js

@@ -1,9 +1,8 @@
 import react from "@vitejs/plugin-react";
 import path from "path";
 import { revinePlugin } from "../revinePlugin.js";
-import { revineLoggerPlugin } from "../viteLoggerPlugin.js";
 export const defaultViteConfig = {
-    plugins: [react(), revinePlugin(), revineLoggerPlugin()],
+    plugins: [react(), revinePlugin()],
     logLevel: "silent",
     // Only expose env variables prefixed with REVINE_PUBLIC_ to the browser bundle.
     // Variables without this prefix are never included in client-side code.

package/dist/runtime/cache.d.ts

@@ -0,0 +1,10 @@
+declare class RevineCache {
+    private memoryCache;
+    set<T>(key: string, data: T, ttl: number, persist?: boolean): void;
+    get<T>(key: string): T | null;
+    delete(key: string): void;
+    clear(): void;
+}
+export declare const revineCache: RevineCache;
+export {};
+//# sourceMappingURL=cache.d.ts.map

package/dist/runtime/cache.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"cache.d.ts","sourceRoot":"","sources":["../../src/runtime/cache.ts"],"names":[],"mappings":"AAKA,cAAM,WAAW;IACf,OAAO,CAAC,WAAW,CAAsC;IAEzD,GAAG,CAAC,CAAC,EAAE,GAAG,EAAE,MAAM,EAAE,IAAI,EAAE,CAAC,EAAE,GAAG,EAAE,MAAM,EAAE,OAAO,GAAE,OAAe;IAiBlE,GAAG,CAAC,CAAC,EAAE,GAAG,EAAE,MAAM,GAAG,CAAC,GAAG,IAAI;IA4B7B,MAAM,CAAC,GAAG,EAAE,MAAM;IAOlB,KAAK;CAQN;AAED,eAAO,MAAM,WAAW,aAAoB,CAAC"}

package/dist/runtime/cache.js

@@ -0,0 +1,61 @@
+class RevineCache {
+    constructor() {
+        this.memoryCache = new Map();
+    }
+    set(key, data, ttl, persist = false) {
+        const entry = {
+            data,
+            expiry: Date.now() + ttl,
+        };
+        this.memoryCache.set(key, entry);
+        if (persist && typeof window !== "undefined") {
+            try {
+                localStorage.setItem(`revine_cache_${key}`, JSON.stringify(entry));
+            }
+            catch (e) {
+                console.warn("Revine Cache: Failed to persist to localStorage", e);
+            }
+        }
+    }
+    get(key) {
+        // Check memory cache first
+        let entry = this.memoryCache.get(key);
+        // If not in memory, check localStorage
+        if (!entry && typeof window !== "undefined") {
+            try {
+                const persisted = localStorage.getItem(`revine_cache_${key}`);
+                if (persisted) {
+                    entry = JSON.parse(persisted);
+                    // Sync back to memory cache
+                    if (entry)
+                        this.memoryCache.set(key, entry);
+                }
+            }
+            catch (e) {
+                console.warn("Revine Cache: Failed to read from localStorage", e);
+            }
+        }
+        if (!entry)
+            return null;
+        if (Date.now() > entry.expiry) {
+            this.delete(key);
+            return null;
+        }
+        return entry.data;
+    }
+    delete(key) {
+        this.memoryCache.delete(key);
+        if (typeof window !== "undefined") {
+            localStorage.removeItem(`revine_cache_${key}`);
+        }
+    }
+    clear() {
+        this.memoryCache.clear();
+        if (typeof window !== "undefined") {
+            Object.keys(localStorage)
+                .filter((key) => key.startsWith("revine_cache_"))
+                .forEach((key) => localStorage.removeItem(key));
+        }
+    }
+}
+export const revineCache = new RevineCache();

package/dist/runtime/fetch.d.ts

@@ -0,0 +1,12 @@
+export interface RevineFetchOptions extends RequestInit {
+    cacheTTL?: number;
+    persist?: boolean;
+    revalidate?: boolean;
+}
+/**
+ * Enhanced fetch with caching capabilities.
+ * @param url The URL to fetch
+ * @param options Fetch options plus cache configuration
+ */
+export declare function revineFetch<T = any>(url: string, options?: RevineFetchOptions): Promise<T>;
+//# sourceMappingURL=fetch.d.ts.map

package/dist/runtime/fetch.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"fetch.d.ts","sourceRoot":"","sources":["../../src/runtime/fetch.ts"],"names":[],"mappings":"AAEA,MAAM,WAAW,kBAAmB,SAAQ,WAAW;IACrD,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED;;;;GAIG;AACH,wBAAsB,WAAW,CAAC,CAAC,GAAG,GAAG,EACvC,GAAG,EAAE,MAAM,EACX,OAAO,GAAE,kBAAuB,GAC/B,OAAO,CAAC,CAAC,CAAC,CAiCZ"}

package/dist/runtime/fetch.js

@@ -0,0 +1,32 @@
+import { revineCache } from "./cache.js";
+/**
+ * Enhanced fetch with caching capabilities.
+ * @param url The URL to fetch
+ * @param options Fetch options plus cache configuration
+ */
+export async function revineFetch(url, options = {}) {
+    const { cacheTTL = 0, persist = false, revalidate = false, ...fetchOptions } = options;
+    // Cache works if cacheTTL > 0. Usually only for GET, but GraphQL uses POST.
+    const isCacheable = cacheTTL > 0;
+    // Create a more robust cache key that includes the method and body for POST requests
+    const method = (fetchOptions.method || "GET").toUpperCase();
+    const bodyKey = fetchOptions.body ? `_body:${fetchOptions.body}` : "";
+    const cacheKey = `fetch_${method}_${url}_${JSON.stringify(fetchOptions.headers || {})}${bodyKey}`;
+    if (isCacheable && !revalidate) {
+        const cachedData = revineCache.get(cacheKey);
+        if (cachedData !== null) {
+            return cachedData;
+        }
+    }
+    const response = await fetch(url, fetchOptions);
+    if (!response.ok) {
+        const error = new Error(`Revine Fetch Error: ${response.status} ${response.statusText}`);
+        error.status = response.status;
+        throw error;
+    }
+    const data = await response.json();
+    if (isCacheable) {
+        revineCache.set(cacheKey, data, cacheTTL, persist);
+    }
+    return data;
+}

package/dist/utils/logger.d.ts

@@ -1,3 +1,8 @@
 export declare function logInfo(message: string): void;
 export declare function logError(message: string, error?: any): void;
+export declare function logBrand(): void;
+export declare function getLogo(): string;
+export declare function logStep(message: string): void;
+export declare function logSuccess(message: string): void;
+export declare function printDevServerInfo(version: string, port: number, startTime: number): void;
 //# sourceMappingURL=logger.d.ts.map

package/dist/utils/logger.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"logger.d.ts","sourceRoot":"","sources":["../../src/utils/logger.ts"],"names":[],"mappings":"AAEA,wBAAgB,OAAO,CAAC,OAAO,EAAE,MAAM,QAEtC;AAED,wBAAgB,QAAQ,CAAC,OAAO,EAAE,MAAM,EAAE,KAAK,CAAC,EAAE,GAAG,QAEpD"}
+{"version":3,"file":"logger.d.ts","sourceRoot":"","sources":["../../src/utils/logger.ts"],"names":[],"mappings":"AAKA,wBAAgB,OAAO,CAAC,OAAO,EAAE,MAAM,QAEtC;AAED,wBAAgB,QAAQ,CAAC,OAAO,EAAE,MAAM,EAAE,KAAK,CAAC,EAAE,GAAG,QAEpD;AAID,wBAAgB,QAAQ,SAEvB;AAED,wBAAgB,OAAO,WAQtB;AAED,wBAAgB,OAAO,CAAC,OAAO,EAAE,MAAM,QAEtC;AAED,wBAAgB,UAAU,CAAC,OAAO,EAAE,MAAM,QAEzC;AAED,wBAAgB,kBAAkB,CAAC,OAAO,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,QAyClF"}

package/dist/utils/logger.js

@@ -1,7 +1,65 @@
 import chalk from "chalk";
+import boxen from "boxen";
+import os from "os";
+import gradient from "gradient-string";
 export function logInfo(message) {
     console.log(chalk.cyan(message));
 }
 export function logError(message, error) {
     console.error(chalk.red(message), error || "");
 }
+const revineGradient = gradient(["#7c3aed", "#a78bfa", "#f472b6"]);
+export function logBrand() {
+    console.log(chalk.bold(revineGradient("\n  ◆ REVINE\n")));
+}
+export function getLogo() {
+    return chalk.bold(revineGradient.multiline([
+        "  ____  _______   _____ _   _  _____ ",
+        " |  _ \\| ____\\ \\ / /_ _| \\ | || ____|",
+        " | |_) |  _|  \\ V / | ||  \\| ||  _|  ",
+        " |  _ <| |___  \\ /  | || |\\  || |___ ",
+        " |_| \\_\\_____|  \\_/ |___|_| \\_||_____|"
+    ].join("\n")));
+}
+export function logStep(message) {
+    console.log(`${revineGradient("⚡")} ${message}`);
+}
+export function logSuccess(message) {
+    console.log(`${chalk.green("✔")} ${message}`);
+}
+export function printDevServerInfo(version, port, startTime) {
+    const duration = Date.now() - startTime;
+    const localUrl = `http://localhost:${port}/`;
+    const networkInterfaces = os.networkInterfaces();
+    const networkUrls = [];
+    for (const interfaceName in networkInterfaces) {
+        const interfaces = networkInterfaces[interfaceName];
+        if (interfaces) {
+            for (const iface of interfaces) {
+                if (iface.family === "IPv4" && !iface.internal) {
+                    networkUrls.push(`http://${iface.address}:${port}/`);
+                }
+            }
+        }
+    }
+    const logo = getLogo();
+    const content = [
+        logo,
+        "",
+        `${chalk.dim("Framework Version:")} ${chalk.bold.white(`v${version}`)}`,
+        "",
+        `${chalk.cyan("➜")}  ${chalk.bold("Local:")}   ${chalk.blue(localUrl)}`,
+        ...networkUrls.map(url => `${chalk.cyan("➜")}  ${chalk.bold("Network:")} ${chalk.blue(url)}`),
+        "",
+        `${chalk.dim("Ready in")} ${chalk.bold.white(duration)}${chalk.dim("ms")}`,
+    ].join("\n");
+    const boxed = boxen(content, {
+        padding: 1,
+        margin: { top: 1, bottom: 1, left: 0, right: 0 },
+        borderStyle: "round",
+        borderColor: "dim",
+        title: chalk.bold.white(" DEV SERVER "),
+        titleAlignment: "left",
+    });
+    console.log("\n" + boxed + "\n");
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "revine",
-  "version": "1.4.1",
+  "version": "1.5.1",
   "description": "A react framework, but better.",
   "license": "MIT",
   "author": "Rachit Bharadwaj",
@@ -27,10 +27,12 @@
   },
   "dependencies": {
     "@vitejs/plugin-react": "^4.2.1",
+    "boxen": "^8.0.1",
     "chalk": "^5.4.1",
     "commander": "^13.1.0",
     "dotenv": "^16.4.5",
     "fs-extra": "^11.3.0",
+    "gradient-string": "^3.0.0",
     "inquirer": "^12.4.1",
     "lodash-es": "^4.17.21",
     "react": "^18.2.0",

package/roadmap.md

@@ -22,4 +22,7 @@
 ## Styling
 - add shadcn support
 - add font support ( google fonts)
-- add theme support with tailwind
+- add theme support with tailwind
+
+## API calling
+- caching the server response

package/src/client.ts

@@ -13,6 +13,9 @@ export type { LinkProps } from "./components/Link.js";
 export { NavLink } from "./components/NavLink.js";
 export type { NavLinkProps } from "./components/NavLink.js";
 export { useRouter } from "./hooks/useRouter.js";
+export { useFetch } from "./hooks/useFetch.js";
+export { revineFetch } from "./runtime/fetch.js";
+export type { RevineFetchOptions } from "./runtime/fetch.js";
 export { defineConfig } from "./runtime/defineConfig.js";
 export { env, envAll } from "./runtime/env.js";
 export { middlewareResponse } from "./runtime/middleware.js";

package/src/commands/createProject.ts

@@ -7,7 +7,9 @@ import { askForTailwindSetup, initGit, runProject } from "../prompts/index.js";
 import { installDependencies } from "../setup/dependencies.js";
 import { setupTailwind } from "../setup/tailwind.js";
 import { copyTemplate } from "../utils/file.js";
-import { logError, logInfo } from "../utils/logger.js";
+import { logError, logInfo, logStep, logSuccess, getLogo } from "../utils/logger.js";
+import boxen from "boxen";
+import chalk from "chalk";
 
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = path.dirname(__filename);
@@ -62,7 +64,7 @@ export async function createProject(
   const isCurrentDir = [".", "./"].includes(projectName);
 
   try {
-    logInfo(`Creating project in ${projectDir}...`);
+    logStep(`Creating project in ${chalk.cyan(projectDir)}...`);
 
     // Ensure the project directory exists
     await fs.ensureDir(projectDir);
@@ -109,18 +111,35 @@ export async function createProject(
     await updateReadme(readmePath, finalProjectName);
 
     // Install dependencies
-    logInfo("\nInstalling dependencies...");
+    logStep("Installing dependencies...");
     await installDependencies(projectDir);
 
     // If Tailwind is selected, set it up
     if (useTailwind) {
+      logStep("Setting up Tailwind CSS...");
       await setupTailwind(projectDir);
     }
 
-    logInfo(`\nSuccess! Created project at ${projectDir}`);
-    logInfo("\nStart developing with:");
-    if (!isCurrentDir) console.log(`  cd ${projectName}`);
-    console.log("  npm run dev\n");
+    logSuccess(`Project created at ${chalk.cyan(projectDir)}`);
+
+    const successContent = [
+      getLogo(),
+      "",
+      `${chalk.bold.green("Success!")} Your Revine project is ready.`,
+      "",
+      `${chalk.white("Next steps:")}`,
+      !isCurrentDir ? `${chalk.dim("1.")} ${chalk.cyan(`cd ${projectName}`)}` : "",
+      `${isCurrentDir ? chalk.dim("1.") : chalk.dim("2.")} ${chalk.cyan("npm run dev")}`,
+      "",
+      `${chalk.dim("Happy coding!")}`
+    ].filter(Boolean).join("\n");
+
+    console.log(boxen(successContent, {
+      padding: 1,
+      margin: { top: 1, bottom: 1, left: 0, right: 0 },
+      borderStyle: "round",
+      borderColor: "green",
+    }));
 
     // Check if Git exists and initialize repository if user agrees
     await initGit(projectDir);

package/src/hooks/useFetch.ts

@@ -0,0 +1,50 @@
+import { useState, useEffect } from "react";
+import { revineFetch, RevineFetchOptions } from "../runtime/fetch.js";
+
+export interface UseFetchResult<T> {
+  data: T | null;
+  loading: boolean;
+  error: Error | null;
+  revalidate: () => Promise<void>;
+}
+
+/**
+ * A React hook for making cached API calls.
+ * @param url The URL to fetch
+ * @param options Fetch and cache options
+ */
+export function useFetch<T = any>(
+  url: string,
+  options: RevineFetchOptions = {}
+): UseFetchResult<T> {
+  const [data, setData] = useState<T | null>(null);
+  const [loading, setLoading] = useState<boolean>(true);
+  const [error, setError] = useState<Error | null>(null);
+
+  const fetchData = async (isRevalidating: boolean = false) => {
+    try {
+      setLoading(true);
+      const result = await revineFetch<T>(url, {
+        ...options,
+        revalidate: isRevalidating || options.revalidate,
+      });
+      setData(result);
+      setError(null);
+    } catch (err) {
+      setError(err instanceof Error ? err : new Error(String(err)));
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    fetchData();
+  }, [url, JSON.stringify(options)]);
+
+  return {
+    data,
+    loading,
+    error,
+    revalidate: () => fetchData(true),
+  };
+}

package/src/index.ts

@@ -4,6 +4,8 @@ import { readFileSync } from "fs";
 import path from "path";
 import { fileURLToPath } from "url";
 import { createProject } from "./commands/createProject.js";
+import { printDevServerInfo, logStep, logSuccess, logBrand } from "./utils/logger.js";
+import chalk from "chalk";
 
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = path.dirname(__filename);
@@ -40,23 +42,31 @@ const runViteCommand = async (command: string) => {
   const config = await generateRevineViteConfig();
 
   if (command === "dev") {
+    const startTime = Date.now();
     const server = await vite.createServer({
       ...config,
       configFile: false, // we pass config directly, no file needed
     });
     await server.listen();
-    server.printUrls();
+    const port = server.config.server.port || 3000;
+    printDevServerInfo(pkg.version, port, startTime);
   } else if (command === "build") {
+    const startTime = Date.now();
+    logStep("Building project for production...");
     await vite.build({
       ...config,
       configFile: false,
     });
+    const duration = Date.now() - startTime;
+    logSuccess(`Build completed in ${chalk.bold(duration)}ms`);
   } else if (command === "preview") {
+    const startTime = Date.now();
     const server = await vite.preview({
       ...config,
       configFile: false,
     });
-    server.printUrls();
+    const port = server.config.preview.port || 3000;
+    printDevServerInfo(pkg.version, port, startTime);
   }
 };
 
@@ -98,4 +108,6 @@ program
   .description("Preview the production build")
   .action(() => runViteCommand("preview"));
 
+logBrand();
+
 program.parse(process.argv);

package/src/runtime/bundler/defaults/vite.ts

@@ -1,10 +1,9 @@
 import react from "@vitejs/plugin-react";
 import path from "path";
 import { revinePlugin } from "../revinePlugin.js";
-import { revineLoggerPlugin } from "../viteLoggerPlugin.js";
 
 export const defaultViteConfig = {
-  plugins: [react(), revinePlugin(), revineLoggerPlugin()],
+  plugins: [react(), revinePlugin()],
   logLevel: "silent",
   // Only expose env variables prefixed with REVINE_PUBLIC_ to the browser bundle.
   // Variables without this prefix are never included in client-side code.

package/src/runtime/cache.ts

@@ -0,0 +1,71 @@
+type CacheEntry<T> = {
+  data: T;
+  expiry: number;
+};
+
+class RevineCache {
+  private memoryCache = new Map<string, CacheEntry<any>>();
+
+  set<T>(key: string, data: T, ttl: number, persist: boolean = false) {
+    const entry: CacheEntry<T> = {
+      data,
+      expiry: Date.now() + ttl,
+    };
+
+    this.memoryCache.set(key, entry);
+
+    if (persist && typeof window !== "undefined") {
+      try {
+        localStorage.setItem(`revine_cache_${key}`, JSON.stringify(entry));
+      } catch (e) {
+        console.warn("Revine Cache: Failed to persist to localStorage", e);
+      }
+    }
+  }
+
+  get<T>(key: string): T | null {
+    // Check memory cache first
+    let entry = this.memoryCache.get(key);
+
+    // If not in memory, check localStorage
+    if (!entry && typeof window !== "undefined") {
+      try {
+        const persisted = localStorage.getItem(`revine_cache_${key}`);
+        if (persisted) {
+          entry = JSON.parse(persisted);
+          // Sync back to memory cache
+          if (entry) this.memoryCache.set(key, entry);
+        }
+      } catch (e) {
+        console.warn("Revine Cache: Failed to read from localStorage", e);
+      }
+    }
+
+    if (!entry) return null;
+
+    if (Date.now() > entry.expiry) {
+      this.delete(key);
+      return null;
+    }
+
+    return entry.data;
+  }
+
+  delete(key: string) {
+    this.memoryCache.delete(key);
+    if (typeof window !== "undefined") {
+      localStorage.removeItem(`revine_cache_${key}`);
+    }
+  }
+
+  clear() {
+    this.memoryCache.clear();
+    if (typeof window !== "undefined") {
+      Object.keys(localStorage)
+        .filter((key) => key.startsWith("revine_cache_"))
+        .forEach((key) => localStorage.removeItem(key));
+    }
+  }
+}
+
+export const revineCache = new RevineCache();

package/src/runtime/fetch.ts

@@ -0,0 +1,50 @@
+import { revineCache } from "./cache.js";
+
+export interface RevineFetchOptions extends RequestInit {
+  cacheTTL?: number; // TTL in milliseconds
+  persist?: boolean; // Whether to persist cache to localStorage
+  revalidate?: boolean; // If true, force fetch and update cache
+}
+
+/**
+ * Enhanced fetch with caching capabilities.
+ * @param url The URL to fetch
+ * @param options Fetch options plus cache configuration
+ */
+export async function revineFetch<T = any>(
+  url: string,
+  options: RevineFetchOptions = {}
+): Promise<T> {
+  const { cacheTTL = 0, persist = false, revalidate = false, ...fetchOptions } = options;
+
+  // Cache works if cacheTTL > 0. Usually only for GET, but GraphQL uses POST.
+  const isCacheable = cacheTTL > 0;
+  
+  // Create a more robust cache key that includes the method and body for POST requests
+  const method = (fetchOptions.method || "GET").toUpperCase();
+  const bodyKey = fetchOptions.body ? `_body:${fetchOptions.body}` : "";
+  const cacheKey = `fetch_${method}_${url}_${JSON.stringify(fetchOptions.headers || {})}${bodyKey}`;
+
+  if (isCacheable && !revalidate) {
+    const cachedData = revineCache.get<T>(cacheKey);
+    if (cachedData !== null) {
+      return cachedData;
+    }
+  }
+
+  const response = await fetch(url, fetchOptions);
+
+  if (!response.ok) {
+    const error: any = new Error(`Revine Fetch Error: ${response.status} ${response.statusText}`);
+    error.status = response.status;
+    throw error;
+  }
+
+  const data = await response.json();
+
+  if (isCacheable) {
+    revineCache.set(cacheKey, data, cacheTTL, persist);
+  }
+
+  return data;
+}

package/src/utils/logger.ts

@@ -1,4 +1,7 @@
 import chalk from "chalk";
+import boxen from "boxen";
+import os from "os";
+import gradient from "gradient-string";
 
 export function logInfo(message: string) {
   console.log(chalk.cyan(message));
@@ -7,3 +10,70 @@ export function logInfo(message: string) {
 export function logError(message: string, error?: any) {
   console.error(chalk.red(message), error || "");
 }
+
+const revineGradient = gradient(["#7c3aed", "#a78bfa", "#f472b6"]);
+
+export function logBrand() {
+  console.log(chalk.bold(revineGradient("\n  ◆ REVINE\n")));
+}
+
+export function getLogo() {
+  return chalk.bold(revineGradient.multiline([
+    "  ____  _______   _____ _   _  _____ ",
+    " |  _ \\| ____\\ \\ / /_ _| \\ | || ____|",
+    " | |_) |  _|  \\ V / | ||  \\| ||  _|  ",
+    " |  _ <| |___  \\ /  | || |\\  || |___ ",
+    " |_| \\_\\_____|  \\_/ |___|_| \\_||_____|"
+  ].join("\n")));
+}
+
+export function logStep(message: string) {
+  console.log(`${revineGradient("⚡")} ${message}`);
+}
+
+export function logSuccess(message: string) {
+  console.log(`${chalk.green("✔")} ${message}`);
+}
+
+export function printDevServerInfo(version: string, port: number, startTime: number) {
+  const duration = Date.now() - startTime;
+  const localUrl = `http://localhost:${port}/`;
+  
+  const networkInterfaces = os.networkInterfaces();
+  const networkUrls: string[] = [];
+  
+  for (const interfaceName in networkInterfaces) {
+    const interfaces = networkInterfaces[interfaceName];
+    if (interfaces) {
+      for (const iface of interfaces) {
+        if (iface.family === "IPv4" && !iface.internal) {
+          networkUrls.push(`http://${iface.address}:${port}/`);
+        }
+      }
+    }
+  }
+
+  const logo = getLogo();
+
+  const content = [
+    logo,
+    "",
+    `${chalk.dim("Framework Version:")} ${chalk.bold.white(`v${version}`)}`,
+    "",
+    `${chalk.cyan("➜")}  ${chalk.bold("Local:")}   ${chalk.blue(localUrl)}`,
+    ...networkUrls.map(url => `${chalk.cyan("➜")}  ${chalk.bold("Network:")} ${chalk.blue(url)}`),
+    "",
+    `${chalk.dim("Ready in")} ${chalk.bold.white(duration)}${chalk.dim("ms")}`,
+  ].join("\n");
+
+  const boxed = boxen(content, {
+    padding: 1,
+    margin: { top: 1, bottom: 1, left: 0, right: 0 },
+    borderStyle: "round",
+    borderColor: "dim",
+    title: chalk.bold.white(" DEV SERVER "),
+    titleAlignment: "left",
+  });
+
+  console.log("\n" + boxed + "\n");
+}

package/src/runtime/bundler/viteLoggerPlugin.ts

@@ -1,63 +0,0 @@
-import chalk from "chalk";
-import os from "os";
-import type { Plugin, ViteDevServer } from "vite";
-
-/**
- * Reads all non-internal IPv4 addresses from the host machine's
- * network interfaces so we can display them regardless of Vite's
- * resolvedUrls behaviour (which can be empty when logLevel is silent).
- */
-function getNetworkAddresses(): string[] {
-  const interfaces = os.networkInterfaces();
-  const addresses: string[] = [];
-
-  for (const nets of Object.values(interfaces)) {
-    if (!nets) continue;
-    for (const net of nets) {
-      // Only include external IPv4 addresses
-      if (net.family === "IPv4" && !net.internal) {
-        addresses.push(net.address);
-      }
-    }
-  }
-
-  return addresses;
-}
-
-export function revineLoggerPlugin(): Plugin {
-  const indigo = chalk.hex("#6d28d9");
-
-  return {
-    name: "revine-logger",
-    configureServer(server: ViteDevServer) {
-      server.httpServer?.once("listening", () => {
-        const protocol = server.config.server.https ? "https" : "http";
-        const port = server.config.server.port ?? 3000;
-        const localUrl =
-          server.resolvedUrls?.local[0] ?? `${protocol}://localhost:${port}/`;
-
-        // Always derive network URLs from OS interfaces — reliable even with logLevel: silent
-        const networkUrls =
-          server.resolvedUrls?.network?.length
-            ? server.resolvedUrls.network
-            : getNetworkAddresses().map((addr) => `${protocol}://${addr}:${port}/`);
-
-        console.log(indigo("─────────────────────────────────────────────"));
-        console.log(indigo.bold("🚀 Revine Dev Server is now running!"));
-        console.log(indigo("─────────────────────────────────────────────"));
-        console.log(indigo(`Local:   ${chalk.green(localUrl)}`));
-
-        if (networkUrls.length) {
-          networkUrls.forEach((url: string) => {
-            console.log(indigo(`Network: ${chalk.green(url)}`));
-          });
-        } else {
-          console.log(indigo(`Network: ${chalk.dim("not available")}`));
-        }
-
-        console.log(indigo("─────────────────────────────────────────────"));
-        console.log("");
-      });
-    },
-  };
-}