@very-simple/ajax 0.5.3 → 0.6.0

package/dist/index.d.ts

@@ -6,6 +6,8 @@ interface VisitOptions {
     morphHeads?: boolean;
     autoFocus?: boolean;
     loadingDelay?: number;
+    progressHideDelay?: number;
+    request?: RequestInit;
 }
 type MergeStrategy = 'replace' | 'morph' | 'before' | 'after' | 'prepend' | 'append' | 'update';
 interface Config {
@@ -13,6 +15,7 @@ interface Config {
     merge?: MergeStrategy;
     morphHeads?: boolean;
     loadingDelay?: number;
+    progressHideDelay?: number;
 }
 type EventMap = {
     visit: {
@@ -39,7 +42,7 @@ declare global {
 
 declare const _default: {
     start: ({ watchHistory, merge, morphHeads, loadingDelay, }?: Config) => void;
-    visit: (url: string, { action, emitEvents, isBackForward, morphHeads, merge: mergeStrategy, loadingDelay, autoFocus, }?: VisitOptions) => Promise<void>;
+    visit: (url: string, { action, emitEvents, isBackForward, morphHeads, merge: mergeStrategy, loadingDelay, progressHideDelay, autoFocus, request, }?: VisitOptions) => Promise<void>;
 };
 
 export { _default as default };

package/dist/index.js

@@ -3,61 +3,38 @@ var globalConfig = {
   watchHistory: true,
   morphHeads: true,
   merge: "replace",
-  loadingDelay: 500
+  loadingDelay: 500,
+  progressHideDelay: 500
 };
 
 // src/load.ts
 var parser = new DOMParser();
 var currentLoadController;
+var progress = 0;
+var trickleInterval;
 var load = async (url, regionIds, options) => {
   let progressDelayTimeout;
   try {
     currentLoadController?.abort();
     currentLoadController = new AbortController();
     setProgress(0);
-    progressDelayTimeout = window.setTimeout(
-      () => toggleLoading(true),
-      options.loadingDelay
-    );
+    progressDelayTimeout = window.setTimeout(() => {
+      toggleLoading(true);
+      toggleProgress(true);
+      startTrickle();
+    }, options.loadingDelay);
     const response = await fetch(url, {
+      ...options.request,
       headers: {
+        ...options.request?.headers,
         "X-Very-Simple-Request": "true",
         "X-Very-Simple-Regions": regionIds.join(" ")
       },
       signal: currentLoadController.signal
     });
-    const reader = response.body?.getReader();
-    const contentLengthHeader = response.headers.get("Content-Length");
-    const length = parseInt(contentLengthHeader ?? "0");
-    let receivedBytes = 0;
-    const stream = new ReadableStream({
-      start(controller) {
-        const read = async () => {
-          const { done, value } = await reader.read();
-          if (done) {
-            if (contentLengthHeader && receivedBytes > length) {
-              console.warn(
-                `Server sent more data (${receivedBytes} bytes) than specified in Content-Length header (${length} bytes).`
-              );
-            }
-            controller.close();
-            return;
-          }
-          receivedBytes += value.length;
-          if (contentLengthHeader) {
-            const progress = Math.min(receivedBytes / length, 1);
-            setProgress(progress);
-          }
-          controller.enqueue(value);
-          read();
-        };
-        read();
-      }
-    });
-    const html = await new Response(stream, {
-      headers: { "Content-Type": "text/html" }
-    }).text();
-    return parser.parseFromString(html, "text/html");
+    const html = await response.text();
+    const document2 = parser.parseFromString(html, "text/html");
+    return { document: document2, url: response.url };
   } catch (e) {
     setProgress(0);
     const isAbortError = e instanceof DOMException && e.name === "AbortError";
@@ -66,13 +43,26 @@ var load = async (url, regionIds, options) => {
     }
   } finally {
     clearTimeout(progressDelayTimeout);
+    stopTrickle();
+    setProgress(1);
     toggleLoading(false);
+    setTimeout(() => toggleProgress(false), options.progressHideDelay);
   }
 };
-var setProgress = (value) => document.documentElement.style.setProperty(
-  "--simple-progress",
-  `${Math.round(value * 1e4) / 100}%`
-);
+var trickle = () => {
+  const amount = -0.095 * progress + 0.1;
+  setProgress(progress + Math.random() * amount);
+};
+var startTrickle = () => trickleInterval = window.setInterval(trickle, 300);
+var stopTrickle = () => clearInterval(trickleInterval);
+var setProgress = (value) => {
+  progress = value;
+  document.documentElement.style.setProperty(
+    "--simple-progress",
+    `${Math.round(value * 1e4) / 100}%`
+  );
+};
+var toggleProgress = (state) => document.documentElement.toggleAttribute("data-simple-progress", state);
 var toggleLoading = (state) => document.documentElement.toggleAttribute("data-simple-loading", state);
 
 // src/merge.ts
@@ -155,7 +145,9 @@ var visit = async (url, {
   morphHeads = globalConfig.morphHeads,
   merge: mergeStrategy = globalConfig.merge,
   loadingDelay = globalConfig.loadingDelay,
-  autoFocus = true
+  progressHideDelay = globalConfig.progressHideDelay,
+  autoFocus = true,
+  request
 } = {}) => {
   prevUrl = currentUrl;
   currentUrl = url;
@@ -165,7 +157,11 @@ var visit = async (url, {
     newDocument = cache.get(url)?.cloneNode(true);
   }
   const regions = findRegions(document);
-  newDocument ??= await load(url, Array.from(regions.keys()), { loadingDelay });
+  if (!newDocument) {
+    const options = { loadingDelay, progressHideDelay, request };
+    const result = await load(url, Array.from(regions.keys()), options);
+    if (result) ({ url, document: newDocument } = result);
+  }
   if (!newDocument) return;
   if (emitEvents) emit("before-render", { url, prevUrl, newDocument });
   if (!isBackForward) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@very-simple/ajax",
-  "version": "0.5.3",
+  "version": "0.6.0",
   "description": "A very simple turbolinks inspired library",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",