revine 1.4.1 → 1.5.0

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/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/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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "revine",
-  "version": "1.4.1",
+  "version": "1.5.0",
   "description": "A react framework, but better.",
   "license": "MIT",
   "author": "Rachit Bharadwaj",

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/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/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;
+}