@very-simple/ajax 1.0.0-beta.3 → 1.0.0-beta.5

package/README.md

@@ -74,6 +74,9 @@ start({
   progressHideDelay: 500,
   // Prefix used for the `data-ajax-*` attributes.
   prefix: 'data-ajax-',
+  // Default selectors to swap instead of the whole `<body>`, used for visits
+  // that don't specify their own `regions` (e.g. via `data-ajax-regions`).
+  regions: [],
   // Custom scroll handling, e.g. restoring position on back/forward visits.
   scrollBehavior: ({ isBackForward, savedPosition }) =>
     isBackForward ? savedPosition : { top: 0 },

package/dist/index.d.ts

@@ -36,6 +36,8 @@ interface Config {
     progressHideDelay?: number;
     /** Prefix used for the `data-ajax-*` attributes. */
     prefix?: string;
+    /** Default regions used for visits that don't specify their own. */
+    regions?: string[];
     /** Called after an element is added to the DOM by a merge. */
     mount?: (el: Element) => void;
     /** Called before an element is removed from the DOM by a merge. */
@@ -72,6 +74,11 @@ type EventMap = {
     'before-visit': Payload;
     'before-swap': Payload;
     'after-swap': Payload;
+    'progress-start': Record<string, never>;
+    progress: {
+        progress: number;
+    };
+    'progress-end': Record<string, never>;
 };
 type DomEventMap = {
     [K in keyof EventMap as `ajax:${K & string}`]: CustomEvent<EventMap[K]>;

package/dist/index.js

@@ -6,7 +6,8 @@ var config = {
   viewTransitions: false,
   loadingDelay: 500,
   progressHideDelay: 500,
-  prefix: "data-ajax-"
+  prefix: "data-ajax-",
+  regions: []
 };
 
 // src/load.ts
@@ -14,6 +15,7 @@ var parser = new DOMParser();
 var currentLoadController;
 var progress = 0;
 var trickleInterval;
+var emit = (type, payload) => document.dispatchEvent(new CustomEvent(`ajax:${type}`, { detail: payload }));
 var cache = /* @__PURE__ */ new Map();
 var load = async (url, regions, options) => {
   let progressDelayTimeout;
@@ -22,8 +24,7 @@ var load = async (url, regions, options) => {
     currentLoadController = new AbortController();
     setProgress(0);
     progressDelayTimeout = window.setTimeout(() => {
-      toggleLoading(true);
-      toggleProgress(true);
+      emit("progress-start", {});
       startTrickle();
     }, options.loadingDelay);
     const response = await fetch(url, {
@@ -49,8 +50,7 @@ var load = async (url, regions, options) => {
     clearTimeout(progressDelayTimeout);
     stopTrickle();
     setProgress(1);
-    toggleLoading(false);
-    setTimeout(() => toggleProgress(false), options.progressHideDelay);
+    setTimeout(() => emit("progress-end", {}), options.progressHideDelay);
   }
 };
 var parseHtml = (html) => parser.parseFromString(html, "text/html");
@@ -62,13 +62,8 @@ var startTrickle = () => trickleInterval = window.setInterval(trickle, 300);
 var stopTrickle = () => clearInterval(trickleInterval);
 var setProgress = (value) => {
   progress = value;
-  document.documentElement.style.setProperty(
-    "--ajax-progress",
-    `${Math.round(value * 1e4) / 100}%`
-  );
+  emit("progress", { progress: value });
 };
-var toggleProgress = (state) => document.documentElement.toggleAttribute(`${config.prefix}progress`, state);
-var toggleLoading = (state) => document.documentElement.toggleAttribute(`${config.prefix}loading`, state);
 
 // src/merge.ts
 import { Idiomorph } from "idiomorph/dist/idiomorph.esm.js";
@@ -204,7 +199,7 @@ var normalizeUrl = (url) => {
     return url;
   }
 };
-var emit = (type, payload) => {
+var emit2 = (type, payload) => {
   const waiting = [];
   const waitUntil = (promise) => waiting.push(Promise.resolve(promise));
   payload = { ...payload, waitUntil };
@@ -222,7 +217,7 @@ var visit = async (url, {
   autoFocus = true,
   request,
   state,
-  regions = [],
+  regions = config.regions,
   morphHeads = config.morphHeads,
   merge: mergeStrategy = config.merge,
   executeScripts: shouldExecuteScripts = config.executeScripts,
@@ -238,7 +233,7 @@ var visit = async (url, {
   currentVisitController = new AbortController();
   const { signal } = currentVisitController;
   if (url === currentUrl) historyMode = "none";
-  await emit("before-visit", {
+  await emit2("before-visit", {
     from: { url: fromUrl, state: fromState, document },
     to: { url, state },
     signal,
@@ -265,7 +260,7 @@ var visit = async (url, {
   else if (historyMode === "push") history.pushState(state, "", url);
   const from = { url: fromUrl, state: fromState, document };
   const to = { url, state, document: newDocument };
-  await emit("before-swap", { from, to, isBackForward, signal });
+  await emit2("before-swap", { from, to, isBackForward, signal });
   if (signal.aborted) return;
   const getMergeStrategy = (oldEl, newEl) => newEl.getAttribute(`${config.prefix}merge`) || oldEl.getAttribute(`${config.prefix}merge`) || mergeStrategy;
   let autoFocusEl;
@@ -318,18 +313,18 @@ var visit = async (url, {
     await document.startViewTransition(async () => {
       if (morphHeads) Idiomorph2.morph(document.head, newDocument.head);
       await mergeRegions();
-      await emit("after-swap", { from, to, isBackForward, signal });
+      await emit2("after-swap", { from, to, isBackForward, signal });
       applyScrollBehavior();
     }).ready;
   } else {
     if (morphHeads) Idiomorph2.morph(document.head, newDocument.head);
     await mergeRegions();
-    await emit("after-swap", { from, to, isBackForward, signal });
+    await emit2("after-swap", { from, to, isBackForward, signal });
     applyScrollBehavior();
   }
   if (signal.aborted) return;
   if (autoFocus) autoFocusEl?.focus({ preventScroll: true });
-  emit("load", { from, to, isBackForward });
+  emit2("load", { from, to, isBackForward });
 };
 
 // src/intercept.ts
@@ -379,7 +374,7 @@ var interceptHistory = () => {
     visit(window.location.href, {
       history: "none",
       isBackForward: true,
-      regions: currentState?.regions ?? [],
+      regions: currentState?.regions ?? config.regions,
       state: event.state
     });
   });

package/package.json

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