grab-url 1.0.6 → 1.0.8

package/src/grab-api.ts

@@ -1,29 +1,15 @@
 import {
   printJSONStructure,
   log,
-  showAlert,
-  setupDevTools,
   type LogOptions,
-} from "./log";
-
-/**
- * TODO
- *  - react tests
- *  - grab error popup and dev tool
- *  - show net log in alert
- *  - progress
- *  - pagination working
- *  - tests in stackblitz
- *  - loading icons
- *  - cache revalidation
- */
+} from "./log-json";
 
 /**
  * ### GRAB: Generate Request to API from Browser
- * ![GrabAPILogo](https://i.imgur.com/qrQWkeb.png)
+ * ![GrabAPILogo](https://i.imgur.com/xWD7gyV.png)
  *
  * 1. **GRAB is the FBEST Request Manager: Functionally Brilliant, Elegantly Simple Tool**: One Function, no dependencies,
- *    minimalist syntax, [more features than alternatives](https://grab.js.org/guide/Comparisons)
+ *    minimalist syntax, [more features than alternatives](https://grab.js.org/docs/Comparisons)
  * 2. **Auto-JSON Convert**: Pass parameters and get response or error in JSON, handling other data types as is.
  * 3. **isLoading Status**: Sets `.isLoading=true` on the pre-initialized response object so you can show a "Loading..." in any framework
  * 4. **Debug Logging**: Adds global `log()` and prints colored JSON structure, response, timing for requests in test.
@@ -39,7 +25,7 @@ import {
  * 14. **Framework Agnostic**: Alternatives like TanStack work only in component initialization and depend on React & others.
  * 15. **Globals**: Adds to window in browser or global in Node.js so you only import once: `grab()`, `log()`, `grab.log`, `grab.mock`, `grab.defaults`
  * 16. **TypeScript Tooltips**: Developers can hover over option names and autocomplete TypeScript.
- * 17. **Request Stategies**: [🎯 Examples](https://grab.js.org/guide/Examples) show common stategies like debounce, repeat, proxy, unit tests, interceptors, file upload, etc
+ * 17. **Request Stategies**: [🎯 Examples](https://grab.js.org/docs/Examples) show common stategies like debounce, repeat, proxy, unit tests, interceptors, file upload, etc
  * 18. **Rate Limiting**: Built-in rate limiting to prevent multi-click cascading responses, require to wait seconds between requests.
  * 19. **Repeat**: Repeat request this many times, or repeat every X seconds to poll for updates.
  * 20. **Loading Icons**: Import from `grab-url/icons` to get enhanced animated loading icons.
@@ -77,33 +63,27 @@ import {
  * @param {any} [...params] All other params become GET params, POST body, and other methods.
  * @returns {Promise<Object>} The response object with resulting data or .error if error.
  * @author [vtempest (2025)](https://github.com/vtempest/GRAB-URL)
- * @see  [🎯 Examples](https://grab.js.org/guide/Examples) [📑 Docs](https://grab.js.org)
- * @example import grab from 'grab-url';
- * let res = {};
- * await grab('search', {
- *   response: res,
- *   query: "search words"
- * })
+ * @see [🎯 Examples](https://grab.js.org/docs/Examples) [📑 Docs](https://grab.js.org)
  */
 export default async function grab<TResponse = any, TParams = any>(
   path: string,
   options: GrabOptions<TResponse, TParams>
 ): Promise<GrabResponse<TResponse>> {
-  let {
+  var {
     headers,
     response = {} as any, // Pre-initialized object to set the response in. isLoading and error are also set on this object.
     method = options.post // set post: true for POST, omit for GET
       ? "POST"
       : options.put
-      ? "PUT"
-      : options.patch
-      ? "PATCH"
-      : "GET",
+        ? "PUT"
+        : options.patch
+          ? "PATCH"
+          : "GET",
     cache = false, // Enable/disable frontend caching
     cacheForTime = 60, // Seconds to consider data stale and invalidate cache
     timeout = 30, // Request timeout in seconds
     baseURL = (typeof process !== "undefined" && process.env.SERVER_API_URL) ||
-      "/api/", // Use env var or default to /api/
+    "/api/", // Use env var or default to /api/
     cancelOngoingIfNew = false, // Cancel previous request for same path
     cancelNewIfOngoing = false, // Don't make new request if one is ongoing
     rateLimit = 0, // Minimum seconds between requests
@@ -127,7 +107,7 @@ export default async function grab<TResponse = any, TParams = any>(
     put = false,
     patch = false,
     body = null,
-    ...params // All other params become request params/query
+    ...params  // All other params become request params/query
   } = {
     // Destructure options with defaults, merging with any globally set defaults
     ...(typeof window !== "undefined"
@@ -181,7 +161,7 @@ export default async function grab<TResponse = any, TParams = any>(
     }
 
     // regrab on stale, on window refocus, on network
-    if (typeof window !== undefined) {
+    if (typeof window !== "undefined") {
       const regrab = async () => await grab(path, { ...options, cache: false });
       if (regrabOnStale && cache) setTimeout(regrab, 1000 * cacheForTime);
       if (regrabOnNetwork) window.addEventListener("online", regrab);
@@ -202,19 +182,23 @@ export default async function grab<TResponse = any, TParams = any>(
 
     // Configure infinite scroll behavior if enabled
     // Attaches scroll listener to specified element that triggers next page load
-    if (infiniteScroll?.length && typeof window !== "undefined") {
+    if (infiniteScroll?.length && typeof paginateElement !== "undefined"
+      && typeof window !== "undefined") {
       let paginateDOM =
         typeof paginateElement === "string"
           ? document.querySelector(paginateElement)
           : paginateElement;
 
-      if (window.scrollListener) 
+      if (!paginateDOM) log("paginateDOM not found", { color: "red" });
+      else if (window.scrollListener
+        && typeof paginateDOM !== "undefined"
+        && typeof paginateDOM.removeEventListener === "function")
         paginateDOM.removeEventListener("scroll", window.scrollListener);
 
       // Your modified scroll listener with position saving
       window.scrollListener = async (event) => {
         const t = event.target as HTMLElement;
-        
+
         // Save scroll position whenever user scrolls
         localStorage.setItem(
           "scroll",
@@ -230,7 +214,8 @@ export default async function grab<TResponse = any, TParams = any>(
         }
       };
 
-      paginateDOM.addEventListener("scroll", window.scrollListener);
+      if (paginateDOM)
+        paginateDOM.addEventListener("scroll", window.scrollListener);
     }
 
     // Check request history for a previous request with same path/params
@@ -276,8 +261,7 @@ export default async function grab<TResponse = any, TParams = any>(
 
       // Update page tracking
       if (priorRequest) priorRequest.currentPage = pageNumber;
-      // @ts-ignore
-      params[paginateKey] = pageNumber;
+      params = { ...params, [paginateKey]: pageNumber };
     }
 
     // Set loading state on response object
@@ -373,7 +357,7 @@ export default async function grab<TResponse = any, TParams = any>(
       // Make actual API request and handle response based on content type
       res = await fetch(baseURL + path + paramsGETRequest, fetchParams).catch(
         (e) => {
-          throw new Error(e);
+          throw new Error(e.message);
         }
       );
 
@@ -390,8 +374,8 @@ export default async function grab<TResponse = any, TParams = any>(
             ? res && res.json()
             : type.includes("application/pdf") ||
               type.includes("application/octet-stream")
-            ? res.blob()
-            : res.text()
+              ? res.blob()
+              : res.text()
           : res.json()
         ).catch((e) => {
           throw new Error("Error parsing response: " + e);
@@ -423,15 +407,15 @@ export default async function grab<TResponse = any, TParams = any>(
     if (debug) {
       logger(
         "Path:" +
-          baseURL +
-          path +
-          paramsGETRequest +
-          "\n" +
-          JSON.stringify(options, null, 2) +
-          "\nTime: " +
-          elapsedTime +
-          "s\nResponse: " +
-          printJSONStructure(res)
+        baseURL +
+        path +
+        paramsGETRequest +
+        "\n" +
+        JSON.stringify(options, null, 2) +
+        "\nTime: " +
+        elapsedTime +
+        "s\nResponse: " +
+        printJSONStructure(res)
       );
       // console.log(res);
     }
@@ -467,8 +451,9 @@ export default async function grab<TResponse = any, TParams = any>(
     // Handle any errors that occurred during request processing
     let errorMessage =
       "Error: " + error.message + "\nPath:" + baseURL + path + "\n";
-    JSON.stringify(params);
+    // JSON.stringify(params);
 
+    // if onError hook is passed
     if (typeof onError === "function")
       onError(error.message, baseURL + path, params);
 
@@ -483,7 +468,7 @@ export default async function grab<TResponse = any, TParams = any>(
     // Do not show errors for duplicate aborted requests
     if (!error.message.includes("signal") && options.debug) {
       logger(errorMessage, { color: "red" });
-      if (debug && typeof document !== undefined) showAlert(errorMessage);
+      if (debug && typeof document !== "undefined") showAlert(errorMessage);
     }
     response.error = error.message;
     if (typeof response === "function") {
@@ -513,8 +498,8 @@ export default async function grab<TResponse = any, TParams = any>(
  */
 grab.instance =
   (defaults = {}) =>
-  (path, options = {}) =>
-    grab(path, { ...defaults, ...options });
+    (path, options = {}) =>
+      grab(path, { ...defaults, ...options });
 
 // delays execution so that future calls may override and only executes last one
 const debouncer = async (func, wait) => {
@@ -532,7 +517,6 @@ const debouncer = async (func, wait) => {
 // Add globals to window in browser, or global in Node.js
 if (typeof window !== "undefined") {
   window.log = log;
-  // @ts-ignore
   window.grab = grab;
 
   window.grab.log = [];
@@ -564,6 +548,73 @@ if (typeof window !== "undefined") {
   globalThis.grab = grab.instance();
 }
 
+
+
+/**
+ * Shows message in a modal overlay with scrollable message stack
+ * and is easier to dismiss unlike alert() which blocks window.
+ * Creates a semi-transparent overlay with a white box containing the message.
+ * @param {string} msg - The message to display
+ */
+export function showAlert(msg) {
+  if (typeof document === "undefined") return;
+  let o = document.getElementById("alert-overlay"),
+    list;
+
+  // Create overlay and alert box if they don't exist
+  if (!o) {
+    o = document.body.appendChild(document.createElement("div"));
+    o.id = "alert-overlay";
+    o.setAttribute(
+      "style",
+      "position:fixed;inset:0;z-index:9999;background:rgba(0,0,0,0.5);display:flex;align-items:center;justify-content:center"
+    );
+    o.innerHTML = `<div id="alert-box" style="background:#fff;padding:1.5em 2em;border-radius:8px;box-shadow:0 2px 16px #0003;min-width:220px;max-height:80vh;position:relative;display:flex;flex-direction:column;">
+      <button id="close-alert" style="position:absolute;top:12px;right:20px;font-size:1.5em;background:none;border:none;cursor:pointer;color:black;">&times;</button>
+      <div id="alert-list" style="overflow:auto;flex:1;"></div>
+    </div>`;
+
+    // Add click handlers to close overlay
+    o.addEventListener("click", (e) => e.target == o && o.remove());
+    document.getElementById("close-alert").onclick = () => o.remove();
+  }
+
+  list = o.querySelector("#alert-list");
+
+  // Add new message to list
+  list.innerHTML += `<div style="border-bottom:1px solid #333; font-size:1.2em;margin:0.5em 0;">${msg}</div>`;
+}
+
+/**
+ * Sets up development tools for debugging API requests
+ * Adds a keyboard shortcut (Ctrl+Alt+I) that shows a modal with request history
+ * Each request entry shows:
+ * - Request path
+ * - Request details
+ * - Response data
+ * - Timestamp
+ */
+export function setupDevTools() {
+  // Keyboard shortcut (Ctrl+Alt+I) to toggle debug view
+  document.addEventListener("keydown", (e) => {
+    if (e.key === "i" && e.ctrlKey && e.altKey) {
+      // Create HTML of the grab.log requests
+      let html = " ";
+      for (let request of grab.log) {
+        html += `<div style="margin-bottom:1em; border-bottom:1px solid #ccc; padding-bottom:1em;">
+          <b>Path:</b> ${request.path}<br>
+          <b>Request:</b> ${printJSONStructure(request.request, 0, 'html')}<br>
+          <b>Response:</b> ${printJSONStructure(request.response, 0, 'html')}<br> 
+          <b>Time:</b> ${new Date(request.lastFetchTime).toLocaleString()}
+        </div>`;
+      }
+      showAlert(html);
+    }
+  });
+}
+
+
+
 /***************** TYPESCRIPT INTERFACES *****************/
 
 // Core response object that gets populated with API response data
@@ -602,7 +653,7 @@ export type GrabOptions<TResponse = any, TParams = any> = TParams & {
   /** default=false Whether to log the request and response */
   debug?: boolean;
   /** default=null [page key, response field to concatenate, element with results] */
-  infiniteScroll?: [string, string, string];
+  infiniteScroll?: [string, string, string | HTMLElement];
   /** default=false Pass this with options to set those options as defaults for all requests */
   setDefaults?: boolean;
   /** default=0 Retry failed requests this many times */
@@ -689,23 +740,23 @@ export interface GrabGlobal {
 export interface GrabFunction {
   /**
    * ### GRAB: Generate Request to API from Browser
-   * ![grabAPILogo](https://i.imgur.com/qrQWkeb.png)
+   * ![grabAPILogo](https://i.imgur.com/xWD7gyV.png)
    * Make API request with path
    * @returns {Promise<Object>} The response object with resulting data or .error if error.
    * @author [vtempest (2025)](https://github.com/vtempest/GRAB-URL)
-   * @see  [🎯 Examples](https://grab.js.org/guide/Examples) [📑 Docs](https://grab.js.org/lib)
+   * @see  [🎯 Examples](https://grab.js.org/docs/Examples) [📑 Docs](https://grab.js.org/lib)
    */
-  <TResponse = any, TParams = Record<string, any>>(path: string): Promise<
+  <TResponse = any, TParams = Record<string, any>>(path: string, options?: GrabOptions<TResponse, TParams>): Promise<
     GrabResponse<TResponse>
   >;
 
   /**
    * ### GRAB: Generate Request to API from Browser
-   * ![grabAPILogo](https://i.imgur.com/qrQWkeb.png)
+   * ![grabAPILogo](https://i.imgur.com/xWD7gyV.png)
    * Make API request with path and options/parameters
    * @returns {Promise<Object>} The response object with resulting data or .error if error.
    * @author [vtempest (2025)](https://github.com/vtempest/GRAB-URL)
-   * @see  [🎯 Examples](https://grab.js.org/guide/Examples) [📑 Docs](https://grab.js.org/lib)
+   * @see  [🎯 Examples](https://grab.js.org/docs/Examples) [📑 Docs](https://grab.js.org/lib)
    */
   <TResponse = any, TParams = Record<string, any>>(
     path: string,
@@ -744,15 +795,6 @@ export interface printJSONStructureFunction {
   (obj: any): string;
 }
 
-// Helper type for creating typed API clients
-// export type TypedGrabFunction = <
-//   TResponse = any,
-//   TParams = Record<string, any>
-// >(
-//   path: string,
-//   config?: GrabOptions<TResponse, TParams>
-// ) => Promise<GrabResponse<TResponse>>;
-
 declare global {
   // Browser globals
   interface Window {
@@ -774,4 +816,4 @@ declare global {
   var grab: GrabFunction;
 }
 
-export { grab, log, showAlert, printJSONStructure };
+export { grab, log, printJSONStructure };

package/src/grab-url.js

@@ -4,48 +4,17 @@ import fs from 'fs';
 import path from 'path';
 import { pipeline } from 'stream/promises';
 import { Readable } from 'stream';
-import cliProgress from 'cli-progress';
-import chalk from 'chalk';
-import ora from 'ora';
-import Table from 'cli-table3';
-import grab, { log } from '../dist/grab-api.es.js';
 import readline from 'readline';
 import { readFileSync } from 'fs';
-import { fileURLToPath, pathToFileURL } from 'url';
-import { dirname, join } from 'path';
-
-// Try multiple possible paths for spinners.json
-const __filename = fileURLToPath(import.meta.url);
-const __dirname = dirname(__filename);
-
-let spinners;
-try {
-  // Try the icons/cli path first (where it actually exists)
-  spinners = JSON.parse(readFileSync(join(__dirname, 'icons', 'cli', 'spinners.json'), 'utf8'));
-} catch (error) {
-  try {
-    // Try the local path
-    spinners = JSON.parse(readFileSync(join(__dirname, 'spinners.json'), 'utf8'));
-  } catch (error2) {
-    try {
-      // Try the parent directory (src)
-      spinners = JSON.parse(readFileSync(join(__dirname, '..', 'spinners.json'), 'utf8'));
-    } catch (error3) {
-      try {
-        // Try the current working directory
-        spinners = JSON.parse(readFileSync(join(process.cwd(), 'src', 'spinners.json'), 'utf8'));
-      } catch (error4) {
-        // Fallback to default spinners if file not found
-        console.warn('Could not load spinners.json, using defaults');
-        spinners = {
-          dots: { frames: ['⠋', '⠙', '⠹', '⠸', '⠼', '⠴', '⠦', '⠧', '⠇', '⠏'] },
-          line: { frames: ['-', '\\', '|', '/'] },
-          arrow: { frames: ['←', '↖', '↑', '↗', '→', '↘', '↓', '↙'] }
-        };
-      }
-    }
-  }
-}
+import {  join } from 'path';
+import spinners from './icons/cli/spinners';
+import grab, { log } from './grab-api';
+import { pathToFileURL } from 'url';
+
+import cliProgress from 'cli-progress';
+import chalk from 'chalk';
+// Use cli-spinners for spinner animations
+const __dirname = dirname(import.meta.url);
 
 // --- ArgParser from grab-cli.js ---
 class ArgParser {
@@ -741,16 +710,14 @@ formatTotalSpeed(bytesPerSecond) {
  */
 async downloadMultipleFiles(downloads) {
   try {
-    console.log(this.colors.primary(`🚀 Starting download of ${downloads.length} files...\n`));
-
     // Set up global keyboard listener for pause/resume and add URL BEFORE starting downloads
     this.setupGlobalKeyboardListener();
     
     // Print header row with emojis
-    this.printHeaderRow();
+    // this.printHeaderRow();
 
     // Show keyboard shortcut info for pause/resume in multibar view
-    console.log(this.colors.info('💡 Press p to pause/resume downloads, a to add URL.'));
+    // console.log(this.colors.info('💡 [p] pause/resume downloads, [a] add URL.'));
 
     // Get random colors for the multibar
     const masterBarColor = this.getRandomBarColor();
@@ -973,7 +940,6 @@ async downloadMultipleFiles(downloads) {
     const successful = results.filter(r => r.status === 'fulfilled' && r.value.success).length;
     const failed = results.length - successful;
 
-    console.log(this.colors.green(`✅ Successful: ${successful}/${downloads.length}`));
     if (failed > 0) {
       console.log(this.colors.error(`❌ Failed: ${failed}/${downloads.length}`));
       
@@ -985,11 +951,11 @@ async downloadMultipleFiles(downloads) {
         }
       });
     }
-
+    
     // Random celebration emoji
     const celebrationEmojis = ['🥳', '🎊', '🎈', '🌟', '💯', '🚀', '✨', '🔥'];
     const randomEmoji = celebrationEmojis[Math.floor(Math.random() * celebrationEmojis.length)];
-    console.log(this.colors.success(`${randomEmoji} Batch download completed! ${randomEmoji}`));
+    console.log(this.colors.green(`${randomEmoji} Success: ${successful}/${downloads.length}`));
 
     this.clearAbortControllers();
     
@@ -1819,7 +1785,7 @@ setupFallbackKeyboardListener() {
     };
     
     process.stdin.on('data', handleKeypress);
-    console.log(this.colors.info('💡 Keyboard listener active: Press p to pause/resume, a to add URL'));
+    // console.log(this.colors.info('💡 Keyboard listener active: [p] pause/resume, [a] add URL'));
   }
 }
 
@@ -1972,22 +1938,6 @@ if (__isMain) {
       if (i === 0 && outputFile) filename = outputFile;
       return { url, outputPath: filename };
     });
-    // Show detected downloads in a table
-    const detectedTable = new Table({
-      head: ['#', 'URL'],
-      colWidths: [4, 80],
-      colAligns: ['right', 'left'],
-      style: { 'padding-left': 1, 'padding-right': 1, head: [], border: [] }
-    });
-    downloads.forEach((download, index) => {
-      detectedTable.push([
-        (index + 1).toString(),
-        download.url
-      ]);
-    });
-    console.log(chalk.cyan.bold(`Detected ${downloads.length} download(s):`));
-    console.log(detectedTable.toString());
-    console.log('');
     // Prepare download objects with filenames
     const downloadObjects = downloads.map((download, index) => {
       let actualUrl = download.url;
@@ -2005,23 +1955,7 @@ if (__isMain) {
         filename: path.basename(filename)
       };
     });
-    // Show download queue in a table
-    const queueTable = new Table({
-      head: ['#', 'Filename', 'Output Path'],
-      colWidths: [4, 32, 54],
-      colAligns: ['right', 'left', 'left'],
-      style: { 'padding-left': 1, 'padding-right': 1, head: [], border: [] }
-    });
-    downloadObjects.forEach((downloadObj, index) => {
-      queueTable.push([
-        (index + 1).toString(),
-        downloadObj.filename,
-        downloadObj.outputPath
-      ]);
-    });
-    console.log(chalk.cyan.bold('\nDownload Queue:'));
-    console.log(queueTable.toString());
-    console.log('');
+    
     try {
       await downloader.downloadMultipleFiles(downloadObjects);
       // Display individual file stats in a table