turbo-rails 2.0.0.pre.beta.1 → 2.0.0.pre.beta.2

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: d64d1046010fe176342eb0dc1269ce42575b3875e8fbea14eebd282455eb28ee
-  data.tar.gz: 0da2bd6fdcf894118945c41d3f297c5e3638d1ff732a58b89980f033cc950ead
+  metadata.gz: d87101284e042e02ec6ba74cdf085367415619ee0c0f1c8b4013ad18022c00c7
+  data.tar.gz: 1d514a6ece035de00be6c8af254662476343db15827ca02b27fbcd7caab14d5f
 SHA512:
-  metadata.gz: 02ce010eaa7cf96ee30e931499da76ff7beb95525c7cd1a2edd775f6aa354e8524cdbcd7bae2c8806416c6566bb7876ab3d1550fb0f29c18fe007daf2f8b0003
-  data.tar.gz: f31df5f93132755af3045511f998e38886240656eca467de4de278682ffd1e7c101402aab704988ab6294309d79dc8e767d72ea4d4283c26eb1ac974b7bfd2a6
+  metadata.gz: 1b81a8c738ec5f9ff1c3584a4598e116eb5e54557295717e8eaa6ae582d66408c0554477a1bbf7a623bc8d409e45db1e984892c7a784aea2047163c719fb97a7
+  data.tar.gz: 1f86ba10f8bd0b76a722eac75490bc309e292e5dd04c7a488b153792ae9f00c9aef4cedf6dc28534569366c7089667abeaa8ac7ad9458ed50a82be58fec13f42

data/app/assets/javascripts/turbo.js

@@ -1,5 +1,5 @@
 /*!
-Turbo 8.0.0-beta.1
+Turbo 8.0.0-beta.2
 Copyright © 2023 37signals LLC
  */
 (function(prototype) {
@@ -485,12 +485,31 @@ async function around(callback, reader) {
   return [ before, after ];
 }
 
-function fetch(url, options = {}) {
+class LimitedSet extends Set {
+  constructor(maxSize) {
+    super();
+    this.maxSize = maxSize;
+  }
+  add(value) {
+    if (this.size >= this.maxSize) {
+      const iterator = this.values();
+      const oldestValue = iterator.next().value;
+      this.delete(oldestValue);
+    }
+    super.add(value);
+  }
+}
+
+const recentRequests = new LimitedSet(20);
+
+const nativeFetch = window.fetch;
+
+function fetchWithTurboHeaders(url, options = {}) {
   const modifiedHeaders = new Headers(options.headers || {});
   const requestUID = uuid();
-  window.Turbo.session.recentRequests.add(requestUID);
+  recentRequests.add(requestUID);
   modifiedHeaders.append("X-Turbo-Request-Id", requestUID);
-  return window.fetch(url, {
+  return nativeFetch(url, {
     ...options,
     headers: modifiedHeaders
   });
@@ -609,7 +628,7 @@ class FetchRequest {
     await this.#allowRequestToBeIntercepted(fetchOptions);
     try {
       this.delegate.requestStarted(this);
-      const response = await fetch(this.url.href, fetchOptions);
+      const response = await fetchWithTurboHeaders(this.url.href, fetchOptions);
       return await this.receive(response);
     } catch (error) {
       if (error.name !== "AbortError") {
@@ -848,6 +867,7 @@ class FormSubmission {
     this.state = FormSubmissionState.waiting;
     this.submitter?.setAttribute("disabled", "");
     this.setSubmitsWith();
+    markAsBusy(this.formElement);
     dispatch("turbo:submit-start", {
       target: this.formElement,
       detail: {
@@ -895,6 +915,7 @@ class FormSubmission {
     this.state = FormSubmissionState.stopped;
     this.submitter?.removeAttribute("disabled");
     this.resetSubmitterText();
+    clearBusyState(this.formElement);
     dispatch("turbo:submit-end", {
       target: this.formElement,
       detail: {
@@ -1176,6 +1197,12 @@ class View {
       this.element.removeAttribute("data-turbo-preview");
     }
   }
+  markVisitDirection(direction) {
+    this.element.setAttribute("data-turbo-visit-direction", direction);
+  }
+  unmarkVisitDirection() {
+    this.element.removeAttribute("data-turbo-visit-direction");
+  }
   async renderSnapshot(renderer) {
     await renderer.render();
   }
@@ -1480,14 +1507,14 @@ class FrameRenderer extends Renderer {
     return true;
   }
   async render() {
-    await nextAnimationFrame();
+    await nextRepaint();
     this.preservingPermanentElements((() => {
       this.loadFrameElement();
     }));
     this.scrollFrameIntoView();
-    await nextAnimationFrame();
+    await nextRepaint();
     this.focusFirstAutofocusableElement();
-    await nextAnimationFrame();
+    await nextRepaint();
     this.activateScriptElements();
   }
   loadFrameElement() {
@@ -1846,6 +1873,12 @@ const SystemStatusCode = {
   contentTypeMismatch: -2
 };
 
+const Direction = {
+  advance: "forward",
+  restore: "back",
+  replace: "none"
+};
+
 class Visit {
   identifier=uuid();
   timingMetrics={};
@@ -1861,7 +1894,7 @@ class Visit {
     this.delegate = delegate;
     this.location = location;
     this.restorationIdentifier = restorationIdentifier || uuid();
-    const {action: action, historyChanged: historyChanged, referrer: referrer, snapshot: snapshot, snapshotHTML: snapshotHTML, response: response, visitCachedSnapshot: visitCachedSnapshot, willRender: willRender, updateHistory: updateHistory, shouldCacheSnapshot: shouldCacheSnapshot, acceptsStreamResponse: acceptsStreamResponse} = {
+    const {action: action, historyChanged: historyChanged, referrer: referrer, snapshot: snapshot, snapshotHTML: snapshotHTML, response: response, visitCachedSnapshot: visitCachedSnapshot, willRender: willRender, updateHistory: updateHistory, shouldCacheSnapshot: shouldCacheSnapshot, acceptsStreamResponse: acceptsStreamResponse, direction: direction} = {
       ...defaultOptions,
       ...options
     };
@@ -1878,6 +1911,7 @@ class Visit {
     this.scrolled = !willRender;
     this.shouldCacheSnapshot = shouldCacheSnapshot;
     this.acceptsStreamResponse = acceptsStreamResponse;
+    this.direction = direction || Direction[action];
   }
   get adapter() {
     return this.delegate.adapter;
@@ -2098,7 +2132,7 @@ class Visit {
     this.finishRequest();
   }
   performScroll() {
-    if (!this.scrolled && !this.view.forceReloaded && !this.view.snapshot.shouldPreserveScrollPosition) {
+    if (!this.scrolled && !this.view.forceReloaded && !this.view.shouldPreserveScrollPosition(this)) {
       if (this.action == "restore") {
         this.scrollToRestoredPosition() || this.scrollToAnchor() || this.view.scrollToTop();
       } else {
@@ -2162,9 +2196,7 @@ class Visit {
   }
   async render(callback) {
     this.cancelRender();
-    await new Promise((resolve => {
-      this.frame = requestAnimationFrame((() => resolve()));
-    }));
+    this.frame = await nextRepaint();
     await callback();
     delete this.frame;
   }
@@ -2386,6 +2418,7 @@ class History {
   restorationData={};
   started=false;
   pageLoaded=false;
+  currentIndex=0;
   constructor(delegate) {
     this.delegate = delegate;
   }
@@ -2393,6 +2426,7 @@ class History {
     if (!this.started) {
       addEventListener("popstate", this.onPopState, false);
       addEventListener("load", this.onPageLoad, false);
+      this.currentIndex = history.state?.turbo?.restorationIndex || 0;
       this.started = true;
       this.replace(new URL(window.location.href));
     }
@@ -2411,9 +2445,11 @@ class History {
     this.update(history.replaceState, location, restorationIdentifier);
   }
   update(method, location, restorationIdentifier = uuid()) {
+    if (method === history.pushState) ++this.currentIndex;
     const state = {
       turbo: {
-        restorationIdentifier: restorationIdentifier
+        restorationIdentifier: restorationIdentifier,
+        restorationIndex: this.currentIndex
       }
     };
     method.call(history, state, "", location.href);
@@ -2448,9 +2484,11 @@ class History {
       const {turbo: turbo} = event.state || {};
       if (turbo) {
         this.location = new URL(window.location.href);
-        const {restorationIdentifier: restorationIdentifier} = turbo;
+        const {restorationIdentifier: restorationIdentifier, restorationIndex: restorationIndex} = turbo;
         this.restorationIdentifier = restorationIdentifier;
-        this.delegate.historyPoppedToLocationWithRestorationIdentifier(this.location, restorationIdentifier);
+        const direction = restorationIndex > this.currentIndex ? "forward" : "back";
+        this.delegate.historyPoppedToLocationWithRestorationIdentifierAndDirection(this.location, restorationIdentifier, direction);
+        this.currentIndex = restorationIndex;
       }
     }
   };
@@ -2725,7 +2763,7 @@ async function withAutofocusFromFragment(fragment, callback) {
     elementWithAutofocus.id = willAutofocusId;
   }
   callback();
-  await nextAnimationFrame();
+  await nextRepaint();
   const hasNoActiveElement = document.activeElement == null || document.activeElement == document.body;
   if (hasNoActiveElement && willAutofocusId) {
     const elementToAutofocus = document.getElementById(willAutofocusId);
@@ -3663,7 +3701,10 @@ class PageView extends View {
     return this.snapshotCache.get(location);
   }
   isPageRefresh(visit) {
-    return !visit || this.lastRenderedLocation.href === visit.location.href && visit.action === "replace";
+    return !visit || this.lastRenderedLocation.pathname === visit.location.pathname && visit.action === "replace";
+  }
+  shouldPreserveScrollPosition(visit) {
+    return this.isPageRefresh(visit) && this.snapshot.shouldPreserveScrollPosition;
   }
   get snapshot() {
     return PageSnapshot.fromElement(this.element);
@@ -3672,24 +3713,25 @@ class PageView extends View {
 
 class Preloader {
   selector="a[data-turbo-preload]";
-  constructor(delegate) {
+  constructor(delegate, snapshotCache) {
     this.delegate = delegate;
-  }
-  get snapshotCache() {
-    return this.delegate.navigator.view.snapshotCache;
+    this.snapshotCache = snapshotCache;
   }
   start() {
     if (document.readyState === "loading") {
-      return document.addEventListener("DOMContentLoaded", (() => {
-        this.preloadOnLoadLinksForView(document.body);
-      }));
+      document.addEventListener("DOMContentLoaded", this.#preloadAll);
     } else {
       this.preloadOnLoadLinksForView(document.body);
     }
   }
+  stop() {
+    document.removeEventListener("DOMContentLoaded", this.#preloadAll);
+  }
   preloadOnLoadLinksForView(element) {
     for (const link of element.querySelectorAll(this.selector)) {
-      this.preloadURL(link);
+      if (this.delegate.shouldPreloadLink(link)) {
+        this.preloadURL(link);
+      }
     }
   }
   async preloadURL(link) {
@@ -3697,33 +3739,27 @@ class Preloader {
     if (this.snapshotCache.has(location)) {
       return;
     }
-    try {
-      const response = await fetch(location.toString(), {
-        headers: {
-          "Sec-Purpose": "prefetch",
-          Accept: "text/html"
-        }
-      });
-      const responseText = await response.text();
-      const snapshot = PageSnapshot.fromHTMLString(responseText);
-      this.snapshotCache.put(location, snapshot);
-    } catch (_) {}
+    const fetchRequest = new FetchRequest(this, FetchMethod.get, location, new URLSearchParams, link);
+    await fetchRequest.perform();
   }
-}
-
-class LimitedSet extends Set {
-  constructor(maxSize) {
-    super();
-    this.maxSize = maxSize;
+  prepareRequest(fetchRequest) {
+    fetchRequest.headers["Sec-Purpose"] = "prefetch";
   }
-  add(value) {
-    if (this.size >= this.maxSize) {
-      const iterator = this.values();
-      const oldestValue = iterator.next().value;
-      this.delete(oldestValue);
-    }
-    super.add(value);
+  async requestSucceededWithResponse(fetchRequest, fetchResponse) {
+    try {
+      const responseHTML = await fetchResponse.responseHTML;
+      const snapshot = PageSnapshot.fromHTMLString(responseHTML);
+      this.snapshotCache.put(fetchRequest.url, snapshot);
+    } catch (_) {}
   }
+  requestStarted(fetchRequest) {}
+  requestErrored(fetchRequest) {}
+  requestFinished(fetchRequest) {}
+  requestPreventedHandlingResponse(fetchRequest, fetchResponse) {}
+  requestFailedWithResponse(fetchRequest, fetchResponse) {}
+  #preloadAll=() => {
+    this.preloadOnLoadLinksForView(document.body);
+  };
 }
 
 class Cache {
@@ -3750,7 +3786,6 @@ class Cache {
 class Session {
   navigator=new Navigator(this);
   history=new History(this);
-  preloader=new Preloader(this);
   view=new PageView(this, document.documentElement);
   adapter=new BrowserAdapter(this);
   pageObserver=new PageObserver(this);
@@ -3763,12 +3798,15 @@ class Session {
   frameRedirector=new FrameRedirector(this, document.documentElement);
   streamMessageRenderer=new StreamMessageRenderer;
   cache=new Cache(this);
-  recentRequests=new LimitedSet(20);
   drive=true;
   enabled=true;
   progressBarDelay=500;
   started=false;
   formMode="on";
+  constructor(recentRequests) {
+    this.recentRequests = recentRequests;
+    this.preloader = new Preloader(this, this.view.snapshotCache);
+  }
   start() {
     if (!this.started) {
       this.pageObserver.start();
@@ -3799,6 +3837,7 @@ class Session {
       this.streamObserver.stop();
       this.frameRedirector.stop();
       this.history.stop();
+      this.preloader.stop();
       this.started = false;
     }
   }
@@ -3847,11 +3886,24 @@ class Session {
   get restorationIdentifier() {
     return this.history.restorationIdentifier;
   }
-  historyPoppedToLocationWithRestorationIdentifier(location, restorationIdentifier) {
+  shouldPreloadLink(element) {
+    const isUnsafe = element.hasAttribute("data-turbo-method");
+    const isStream = element.hasAttribute("data-turbo-stream");
+    const frameTarget = element.getAttribute("data-turbo-frame");
+    const frame = frameTarget == "_top" ? null : document.getElementById(frameTarget) || findClosestRecursively(element, "turbo-frame:not([disabled])");
+    if (isUnsafe || isStream || frame instanceof FrameElement) {
+      return false;
+    } else {
+      const location = new URL(element.href);
+      return this.elementIsNavigatable(element) && locationIsVisitable(location, this.snapshot.rootLocation);
+    }
+  }
+  historyPoppedToLocationWithRestorationIdentifierAndDirection(location, restorationIdentifier, direction) {
     if (this.enabled) {
       this.navigator.startVisit(location, restorationIdentifier, {
         action: "restore",
-        historyChanged: true
+        historyChanged: true,
+        direction: direction
       });
     } else {
       this.adapter.pageInvalidated({
@@ -3889,6 +3941,7 @@ class Session {
   visitStarted(visit) {
     if (!visit.acceptsStreamResponse) {
       markAsBusy(document.documentElement);
+      this.view.markVisitDirection(visit.direction);
     }
     extendURLWithDeprecatedProperties(visit.location);
     if (!visit.silent) {
@@ -3896,6 +3949,7 @@ class Session {
     }
   }
   visitCompleted(visit) {
+    this.view.unmarkVisitDirection();
     clearBusyState(document.documentElement);
     this.notifyApplicationAfterPageLoad(visit.getTimingMetrics());
   }
@@ -4086,7 +4140,7 @@ const deprecatedLocationPropertyDescriptors = {
   }
 };
 
-const session = new Session;
+const session = new Session(recentRequests);
 
 const {cache: cache, navigator: navigator$1} = session;
 
@@ -4139,7 +4193,7 @@ var Turbo = Object.freeze({
   PageRenderer: PageRenderer,
   PageSnapshot: PageSnapshot,
   FrameRenderer: FrameRenderer,
-  fetch: fetch,
+  fetch: fetchWithTurboHeaders,
   start: start,
   registerAdapter: registerAdapter,
   visit: visit,
@@ -4806,11 +4860,14 @@ if (customElements.get("turbo-stream-source") === undefined) {
   }
 })();
 
-window.Turbo = Turbo;
+window.Turbo = {
+  ...Turbo,
+  StreamActions: StreamActions
+};
 
 start();
 
-var turbo_es2017Esm = Object.freeze({
+var Turbo$1 = Object.freeze({
   __proto__: null,
   FetchEnctype: FetchEnctype,
   FetchMethod: FetchMethod,
@@ -4828,7 +4885,7 @@ var turbo_es2017Esm = Object.freeze({
   clearCache: clearCache,
   connectStreamSource: connectStreamSource,
   disconnectStreamSource: disconnectStreamSource,
-  fetch: fetch,
+  fetch: fetchWithTurboHeaders,
   fetchEnctypeFromString: fetchEnctypeFromString,
   fetchMethodFromString: fetchMethodFromString,
   isSafe: isSafe,
@@ -4979,6 +5036,8 @@ function isBodyInit(body) {
   return body instanceof FormData || body instanceof URLSearchParams;
 }
 
+window.Turbo = Turbo$1;
+
 addEventListener("turbo:before-fetch-request", encodeMethodIntoRequestBody);
 
 var adapters = {
@@ -5514,4 +5573,4 @@ var index = Object.freeze({
   getConfig: getConfig
 });
 
-export { turbo_es2017Esm as Turbo, cable };
+export { Turbo$1 as Turbo, cable };