@very-simple/ajax 0.4.0

package/README.md

@@ -0,0 +1,16 @@
+# 🧩 Very Simple Ajax
+
+A very simple turbolinks inspired library based on [Idiomorph](https://github.com/bigskysoftware/idiomorph).
+You can use it for progressive enhancements and to give your multi-page websites a SPA-like feel.
+
+💾 only ~3kb (minify and gzip)
+
+## Installation
+
+```
+npm install @very-simple/ajax
+```
+
+## Usage
+
+Checkout the `/examples` folder for more examples. Better documentation coming soon...

package/dist/index.d.ts

@@ -0,0 +1,20 @@
+interface VisitOptions {
+    action?: 'push' | 'replace' | 'none';
+    emitEvents?: boolean;
+    isBackForward?: boolean;
+    merge?: MergeStrategy;
+    morphHeads?: boolean;
+    autoFocus?: boolean;
+}
+type MergeStrategy = 'replace' | 'morph' | 'before' | 'after' | 'prepend' | 'append' | 'update';
+interface Config {
+    watchHistory?: boolean;
+    merge?: MergeStrategy;
+}
+
+declare const _default: {
+    start: ({ watchHistory, merge, }?: Config) => void;
+    visit: (url: string, { action, emitEvents, isBackForward, morphHeads, merge: mergeStrategy, autoFocus, }?: VisitOptions) => Promise<void>;
+};
+
+export { _default as default };

package/dist/index.js

@@ -0,0 +1,212 @@
+// src/config.ts
+var globalConfig = {
+  watchHistory: true,
+  merge: "replace"
+};
+
+// src/load.ts
+var parser = new DOMParser();
+var progress = 0;
+var currentLoadController;
+var load = async (url, regionIds) => {
+  let progressDelayTimeout;
+  try {
+    currentLoadController?.abort();
+    currentLoadController = new AbortController();
+    setProgress(0);
+    progressDelayTimeout = window.setTimeout(() => toggleLoading(true), 500);
+    const response = await fetch(url, {
+      headers: {
+        "X-Very-Simple-Request": "true",
+        "X-Very-Simple-Regions": regionIds.join(" ")
+      },
+      signal: currentLoadController.signal
+    });
+    const reader = response.body?.getReader();
+    const length = parseInt(response.headers.get("Content-Length") ?? "0");
+    let receivedBytes = 0;
+    const stream = new ReadableStream({
+      start(controller) {
+        const read = async () => {
+          const { done, value } = await reader.read();
+          if (done) {
+            controller.close();
+            return;
+          }
+          receivedBytes += value.length;
+          setProgress(receivedBytes / length);
+          controller.enqueue(value);
+          read();
+        };
+        read();
+      }
+    });
+    const html = await new Response(stream, {
+      headers: { "Content-Type": "text/html" }
+    }).text();
+    return parser.parseFromString(html, "text/html");
+  } catch (e) {
+    setProgress(0);
+    const isAbortError = e instanceof DOMException && e.name === "AbortError";
+    if (isAbortError || currentLoadController?.signal.aborted) {
+      window.location.reload();
+    }
+  } finally {
+    clearTimeout(progressDelayTimeout);
+    toggleLoading(false);
+  }
+};
+var setProgress = (value) => {
+  progress = value;
+  document.documentElement.style.setProperty(
+    "--simple-progress",
+    `${value * 100}%`
+  );
+};
+var toggleLoading = (state) => document.documentElement.toggleAttribute("data-simple-loading", state);
+
+// src/merge.ts
+import { Idiomorph } from "idiomorph/dist/idiomorph.esm.js";
+var merge = (region, newRegion, strategy) => {
+  let autoFocusEl;
+  if (strategy === "replace") {
+    region.replaceWith(newRegion);
+  } else if (strategy === "before") {
+    region.insertAdjacentElement("beforebegin", newRegion);
+  } else if (strategy === "after") {
+    region.insertAdjacentElement("afterend", newRegion);
+  } else if (strategy === "prepend") {
+    region.insertAdjacentElement("afterbegin", newRegion);
+  } else if (strategy === "append") {
+    region.insertAdjacentElement("beforeend", newRegion);
+  } else if (strategy === "update") {
+    region.replaceChildren(...Array.from(newRegion.children));
+  } else if (strategy === "morph") {
+    const result = morph(region, newRegion);
+    autoFocusEl = result.autoFocusEl;
+  }
+  if (strategy !== "morph") {
+    newRegion.querySelectorAll("[data-simple-permanent][id]").forEach((el) => {
+      const originalEL = region.querySelector(`#${el.id}`);
+      if (originalEL) el.replaceWith(originalEL);
+    });
+  }
+  if (newRegion.hasAttribute("data-simple-autofocus") || newRegion.autofocus) {
+    autoFocusEl ??= newRegion;
+  }
+  autoFocusEl ??= newRegion.querySelector("[data-simple-autofocus]") ?? newRegion.querySelector("[autofocus]") ?? void 0;
+  return { autoFocusEl };
+};
+var morph = (container, newContainer) => {
+  const manualReplacements = [];
+  let autoFocusEls = [];
+  Idiomorph.morph(container, newContainer, {
+    callbacks: {
+      afterNodeMorphed(_, newNode) {
+        if (newNode instanceof HTMLElement && (newNode.autofocus || newNode.dataset.simpleAutofocus)) {
+          autoFocusEls.push(newNode);
+        }
+      },
+      beforeNodeMorphed(oldNode, newNode) {
+        if (!(oldNode instanceof HTMLElement)) return true;
+        if (!(newNode instanceof HTMLElement)) return true;
+        if (oldNode.hasAttribute("data-simple-permanent") && oldNode.id === newNode.id)
+          return false;
+        const oldComponent = oldNode.dataset.simpleComponent;
+        const newComponent = newNode.dataset.simpleComponent;
+        if (!oldComponent || oldComponent === newComponent) return true;
+        manualReplacements.push([oldNode, newNode]);
+      }
+    }
+  });
+  for (const [oldEl, newEl] of manualReplacements) oldEl.replaceWith(newEl);
+  const autoFocusEl = autoFocusEls.find((el) => el.dataset.simpleAutofocus) ?? autoFocusEls.find((el) => el.autofocus);
+  return { autoFocusEl };
+};
+
+// src/visit.ts
+import { Idiomorph as Idiomorph2 } from "idiomorph/dist/idiomorph.esm.js";
+var cache = /* @__PURE__ */ new Map();
+var emit = async (type, payload) => {
+  const event = new CustomEvent(`simple-ajax:${type}`, { detail: payload });
+  document.dispatchEvent(event);
+};
+var visit = async (url, {
+  action = "none",
+  emitEvents = true,
+  isBackForward = false,
+  morphHeads = false,
+  merge: mergeStrategy = globalConfig.merge,
+  autoFocus = true
+} = {}) => {
+  if (emitEvents) emit("before-visit", { url });
+  let newDocument;
+  if (isBackForward) {
+    newDocument = cache.get(url)?.cloneNode(true);
+  } else {
+    const cacheId = window.location.pathname + window.location.search;
+    cache.set(cacheId, document.cloneNode(true));
+  }
+  const regions = findRegions(document);
+  newDocument ??= await load(url, Array.from(regions.keys()));
+  if (!newDocument) return;
+  if (emitEvents) emit("before-render", { url, newDocument });
+  if (morphHeads) Idiomorph2.morph(document.head, newDocument.head);
+  const getMergeStrategy = (oldEl, newEl) => newEl.dataset.simpleAjax || oldEl.dataset.simpleAjax || mergeStrategy;
+  let autoFocusEl;
+  const newRegions = findRegions(newDocument);
+  const regionKeys = new Set(regions.keys());
+  const newRegionKeys = new Set(newRegions.keys());
+  const commonRegionKeys = regionKeys.intersection(newRegionKeys);
+  const hasCommonRegions = commonRegionKeys.size > 0;
+  if (hasCommonRegions) {
+    for (const id of commonRegionKeys) {
+      const region = regions.get(id);
+      const newRegion = newRegions.get(id);
+      const strategy = getMergeStrategy(region, newRegion);
+      const result = merge(region, newRegion, strategy);
+      autoFocusEl ??= result.autoFocusEl;
+    }
+  } else {
+    const region = document.body;
+    const newRegion = newDocument.body;
+    const strategy = getMergeStrategy(region, newRegion);
+    const result = merge(region, newRegion, strategy);
+    autoFocusEl = result.autoFocusEl;
+  }
+  if (autoFocus) autoFocusEl?.focus();
+  if (action === "replace") history.replaceState(null, "", url);
+  else if (action === "push") history.pushState(null, "", url);
+  if (emitEvents) emit("visit", { url });
+};
+var findRegions = (doc) => {
+  let regions = /* @__PURE__ */ new Map();
+  doc.querySelectorAll("[data-simple-ajax]").forEach((el) => {
+    if (!el.id) console.warn(`Ajax region is missing an id:`, el);
+    else regions.set(el.id, el);
+  });
+  return regions;
+};
+
+// src/start.ts
+var start = ({
+  watchHistory = true,
+  merge: merge2 = "replace"
+} = {}) => {
+  globalConfig.merge = merge2;
+  globalConfig.watchHistory = watchHistory;
+  if (watchHistory) {
+    window.addEventListener("popstate", async () => {
+      await visit(window.location.pathname + window.location.search, {
+        action: "none",
+        isBackForward: true
+      });
+    });
+  }
+};
+
+// src/index.ts
+var src_default = { start, visit };
+export {
+  src_default as default
+};

package/package.json

@@ -0,0 +1,36 @@
+{
+  "name": "@very-simple/ajax",
+  "version": "0.4.0",
+  "description": "A very simple turbolinks inspired library",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "type": "module",
+  "files": [
+    "dist/**"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/very-simple/ajax.git"
+  },
+  "scripts": {
+    "build": "rm -rf ./dist && tsup src/index.ts --dts --format esm",
+    "dev": "vite",
+    "test": "playwright test",
+    "release": "npm run build && npm run test && bumpp"
+  },
+  "author": "arnoson",
+  "license": "MIT",
+  "devDependencies": {
+    "@picocss/pico": "^2.0.6",
+    "@playwright/test": "^1.48.2",
+    "@types/node": "^18.19.64",
+    "@very-simple/components": "^0.6.0",
+    "bumpp": "^9.8.1",
+    "tsup": "8",
+    "typescript": "^5",
+    "vite": "^5"
+  },
+  "dependencies": {
+    "idiomorph": "^0.3.0"
+  }
+}