@very-simple/ajax 0.5.4 → 0.7.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.d.ts +3 -1
- package/dist/index.js +18 -24
- package/package.json +1 -1
package/dist/index.d.ts
CHANGED
|
@@ -7,6 +7,8 @@ interface VisitOptions {
|
|
|
7
7
|
autoFocus?: boolean;
|
|
8
8
|
loadingDelay?: number;
|
|
9
9
|
progressHideDelay?: number;
|
|
10
|
+
request?: RequestInit;
|
|
11
|
+
regions?: string[];
|
|
10
12
|
}
|
|
11
13
|
type MergeStrategy = 'replace' | 'morph' | 'before' | 'after' | 'prepend' | 'append' | 'update';
|
|
12
14
|
interface Config {
|
|
@@ -41,7 +43,7 @@ declare global {
|
|
|
41
43
|
|
|
42
44
|
declare const _default: {
|
|
43
45
|
start: ({ watchHistory, merge, morphHeads, loadingDelay, }?: Config) => void;
|
|
44
|
-
visit: (url: string, { action, emitEvents, isBackForward, morphHeads, merge: mergeStrategy, loadingDelay, progressHideDelay, autoFocus, }?: VisitOptions) => Promise<void>;
|
|
46
|
+
visit: (url: string, { action, emitEvents, isBackForward, morphHeads, merge: mergeStrategy, loadingDelay, progressHideDelay, autoFocus, request, regions, }?: VisitOptions) => Promise<void>;
|
|
45
47
|
};
|
|
46
48
|
|
|
47
49
|
export { _default as default };
|
package/dist/index.js
CHANGED
|
@@ -12,7 +12,7 @@ var parser = new DOMParser();
|
|
|
12
12
|
var currentLoadController;
|
|
13
13
|
var progress = 0;
|
|
14
14
|
var trickleInterval;
|
|
15
|
-
var load = async (url,
|
|
15
|
+
var load = async (url, regions, options) => {
|
|
16
16
|
let progressDelayTimeout;
|
|
17
17
|
try {
|
|
18
18
|
currentLoadController?.abort();
|
|
@@ -24,9 +24,11 @@ var load = async (url, regionIds, options) => {
|
|
|
24
24
|
startTrickle();
|
|
25
25
|
}, options.loadingDelay);
|
|
26
26
|
const response = await fetch(url, {
|
|
27
|
+
...options.request,
|
|
27
28
|
headers: {
|
|
29
|
+
...options.request?.headers,
|
|
28
30
|
"X-Very-Simple-Request": "true",
|
|
29
|
-
"X-Very-Simple-Regions":
|
|
31
|
+
"X-Very-Simple-Regions": regions.join(" ")
|
|
30
32
|
},
|
|
31
33
|
signal: currentLoadController.signal
|
|
32
34
|
});
|
|
@@ -144,7 +146,9 @@ var visit = async (url, {
|
|
|
144
146
|
merge: mergeStrategy = globalConfig.merge,
|
|
145
147
|
loadingDelay = globalConfig.loadingDelay,
|
|
146
148
|
progressHideDelay = globalConfig.progressHideDelay,
|
|
147
|
-
autoFocus = true
|
|
149
|
+
autoFocus = true,
|
|
150
|
+
request,
|
|
151
|
+
regions = []
|
|
148
152
|
} = {}) => {
|
|
149
153
|
prevUrl = currentUrl;
|
|
150
154
|
currentUrl = url;
|
|
@@ -153,10 +157,9 @@ var visit = async (url, {
|
|
|
153
157
|
if (isBackForward) {
|
|
154
158
|
newDocument = cache.get(url)?.cloneNode(true);
|
|
155
159
|
}
|
|
156
|
-
const regions = findRegions(document);
|
|
157
160
|
if (!newDocument) {
|
|
158
|
-
const options = { loadingDelay, progressHideDelay };
|
|
159
|
-
const result = await load(url,
|
|
161
|
+
const options = { loadingDelay, progressHideDelay, request };
|
|
162
|
+
const result = await load(url, regions, options);
|
|
160
163
|
if (result) ({ url, document: newDocument } = result);
|
|
161
164
|
}
|
|
162
165
|
if (!newDocument) return;
|
|
@@ -166,17 +169,16 @@ var visit = async (url, {
|
|
|
166
169
|
cache.set(cacheId, document.cloneNode(true));
|
|
167
170
|
}
|
|
168
171
|
if (morphHeads) Idiomorph2.morph(document.head, newDocument.head);
|
|
169
|
-
const getMergeStrategy = (oldEl, newEl) => newEl.dataset.
|
|
172
|
+
const getMergeStrategy = (oldEl, newEl) => newEl.dataset.simpleMerge || oldEl.dataset.simpleMerge || mergeStrategy;
|
|
170
173
|
let autoFocusEl;
|
|
171
|
-
const
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
const newRegion = newRegions.get(id);
|
|
174
|
+
const hasMatchingRegions = regions?.some(
|
|
175
|
+
(selector) => document.querySelector(selector) && newDocument.querySelector(selector)
|
|
176
|
+
);
|
|
177
|
+
if (hasMatchingRegions) {
|
|
178
|
+
for (const id of regions) {
|
|
179
|
+
const region = document.querySelector(id);
|
|
180
|
+
const newRegion = newDocument.querySelector(id);
|
|
181
|
+
if (!region || !newRegion) continue;
|
|
180
182
|
const strategy = getMergeStrategy(region, newRegion);
|
|
181
183
|
const result = merge(region, newRegion, strategy);
|
|
182
184
|
autoFocusEl ??= result.autoFocusEl;
|
|
@@ -193,14 +195,6 @@ var visit = async (url, {
|
|
|
193
195
|
else if (action === "push") history.pushState(null, "", url);
|
|
194
196
|
if (emitEvents) emit("visit", { url, prevUrl });
|
|
195
197
|
};
|
|
196
|
-
var findRegions = (doc) => {
|
|
197
|
-
let regions = /* @__PURE__ */ new Map();
|
|
198
|
-
doc.querySelectorAll("[data-simple-ajax]").forEach((el) => {
|
|
199
|
-
if (!el.id) console.warn(`Ajax region is missing an id:`, el);
|
|
200
|
-
else regions.set(el.id, el);
|
|
201
|
-
});
|
|
202
|
-
return regions;
|
|
203
|
-
};
|
|
204
198
|
|
|
205
199
|
// src/start.ts
|
|
206
200
|
var start = ({
|