@very-simple/ajax 0.6.0 → 0.7.1
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 +2 -1
- package/dist/index.js +21 -27
- package/package.json +1 -1
package/dist/index.d.ts
CHANGED
|
@@ -8,6 +8,7 @@ interface VisitOptions {
|
|
|
8
8
|
loadingDelay?: number;
|
|
9
9
|
progressHideDelay?: number;
|
|
10
10
|
request?: RequestInit;
|
|
11
|
+
regions?: string[];
|
|
11
12
|
}
|
|
12
13
|
type MergeStrategy = 'replace' | 'morph' | 'before' | 'after' | 'prepend' | 'append' | 'update';
|
|
13
14
|
interface Config {
|
|
@@ -42,7 +43,7 @@ declare global {
|
|
|
42
43
|
|
|
43
44
|
declare const _default: {
|
|
44
45
|
start: ({ watchHistory, merge, morphHeads, loadingDelay, }?: Config) => void;
|
|
45
|
-
visit: (url: string, { action, emitEvents, isBackForward, morphHeads, merge: mergeStrategy, loadingDelay, progressHideDelay, autoFocus, request, }?: VisitOptions) => Promise<void>;
|
|
46
|
+
visit: (url: string, { action, emitEvents, isBackForward, morphHeads, merge: mergeStrategy, loadingDelay, progressHideDelay, autoFocus, request, regions, }?: VisitOptions) => Promise<void>;
|
|
46
47
|
};
|
|
47
48
|
|
|
48
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();
|
|
@@ -28,13 +28,13 @@ var load = async (url, regionIds, options) => {
|
|
|
28
28
|
headers: {
|
|
29
29
|
...options.request?.headers,
|
|
30
30
|
"X-Very-Simple-Request": "true",
|
|
31
|
-
"X-Very-Simple-Regions":
|
|
31
|
+
"X-Very-Simple-Regions": regions.join(" ")
|
|
32
32
|
},
|
|
33
33
|
signal: currentLoadController.signal
|
|
34
34
|
});
|
|
35
35
|
const html = await response.text();
|
|
36
36
|
const document2 = parser.parseFromString(html, "text/html");
|
|
37
|
-
return { document: document2,
|
|
37
|
+
return { document: document2, response };
|
|
38
38
|
} catch (e) {
|
|
39
39
|
setProgress(0);
|
|
40
40
|
const isAbortError = e instanceof DOMException && e.name === "AbortError";
|
|
@@ -147,39 +147,41 @@ var visit = async (url, {
|
|
|
147
147
|
loadingDelay = globalConfig.loadingDelay,
|
|
148
148
|
progressHideDelay = globalConfig.progressHideDelay,
|
|
149
149
|
autoFocus = true,
|
|
150
|
-
request
|
|
150
|
+
request,
|
|
151
|
+
regions = []
|
|
151
152
|
} = {}) => {
|
|
152
|
-
prevUrl = currentUrl;
|
|
153
|
-
currentUrl = url;
|
|
154
153
|
if (emitEvents) emit("before-visit", { url, prevUrl });
|
|
155
154
|
let newDocument;
|
|
156
155
|
if (isBackForward) {
|
|
157
156
|
newDocument = cache.get(url)?.cloneNode(true);
|
|
158
157
|
}
|
|
159
|
-
const regions = findRegions(document);
|
|
160
158
|
if (!newDocument) {
|
|
161
159
|
const options = { loadingDelay, progressHideDelay, request };
|
|
162
|
-
const result = await load(url,
|
|
163
|
-
if (result)
|
|
160
|
+
const result = await load(url, regions, options);
|
|
161
|
+
if (result) {
|
|
162
|
+
newDocument = result.document;
|
|
163
|
+
url = result.response.redirected ? result.response.url : url;
|
|
164
|
+
}
|
|
164
165
|
}
|
|
165
166
|
if (!newDocument) return;
|
|
167
|
+
prevUrl = currentUrl;
|
|
168
|
+
currentUrl = url;
|
|
166
169
|
if (emitEvents) emit("before-render", { url, prevUrl, newDocument });
|
|
167
170
|
if (!isBackForward) {
|
|
168
171
|
const cacheId = window.location.pathname + window.location.search;
|
|
169
172
|
cache.set(cacheId, document.cloneNode(true));
|
|
170
173
|
}
|
|
171
174
|
if (morphHeads) Idiomorph2.morph(document.head, newDocument.head);
|
|
172
|
-
const getMergeStrategy = (oldEl, newEl) => newEl.dataset.
|
|
175
|
+
const getMergeStrategy = (oldEl, newEl) => newEl.dataset.simpleMerge || oldEl.dataset.simpleMerge || mergeStrategy;
|
|
173
176
|
let autoFocusEl;
|
|
174
|
-
const
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
const newRegion = newRegions.get(id);
|
|
177
|
+
const hasMatchingRegions = regions?.some(
|
|
178
|
+
(selector) => document.querySelector(selector) && newDocument.querySelector(selector)
|
|
179
|
+
);
|
|
180
|
+
if (hasMatchingRegions) {
|
|
181
|
+
for (const id of regions) {
|
|
182
|
+
const region = document.querySelector(id);
|
|
183
|
+
const newRegion = newDocument.querySelector(id);
|
|
184
|
+
if (!region || !newRegion) continue;
|
|
183
185
|
const strategy = getMergeStrategy(region, newRegion);
|
|
184
186
|
const result = merge(region, newRegion, strategy);
|
|
185
187
|
autoFocusEl ??= result.autoFocusEl;
|
|
@@ -196,14 +198,6 @@ var visit = async (url, {
|
|
|
196
198
|
else if (action === "push") history.pushState(null, "", url);
|
|
197
199
|
if (emitEvents) emit("visit", { url, prevUrl });
|
|
198
200
|
};
|
|
199
|
-
var findRegions = (doc) => {
|
|
200
|
-
let regions = /* @__PURE__ */ new Map();
|
|
201
|
-
doc.querySelectorAll("[data-simple-ajax]").forEach((el) => {
|
|
202
|
-
if (!el.id) console.warn(`Ajax region is missing an id:`, el);
|
|
203
|
-
else regions.set(el.id, el);
|
|
204
|
-
});
|
|
205
|
-
return regions;
|
|
206
|
-
};
|
|
207
201
|
|
|
208
202
|
// src/start.ts
|
|
209
203
|
var start = ({
|