turbo-rails 1.3.3 → 1.4.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: ecb315ac4b0462119b892a555ba5942ac1de84d8bdc565e31d0e166ac244a6c1
-  data.tar.gz: a2e2033e73b26803e9b87962ac451b825257e1f052cb86cef013e0b8eb16bbcd
+  metadata.gz: 40ccdc123db34929af83c559e6bf6c65ca3027b5fd765546143f6093d34662a7
+  data.tar.gz: 7236691e0dbf00c61fb51039212c9316b7d0fc5d03370e939c5c318b56ab70c7
 SHA512:
-  metadata.gz: d830701cc6b05ceb930ed1d873998849d870f7b25701ccc3d5cede6f5659eb107e175a46465963a23bf1239fd3aeb798f105155047324644446305e1fea34d71
-  data.tar.gz: 0bb9370f532eb74a8230320c1aed5ac1d4e5f434873d017454ffe1c005daa124f413ffe1ee11df1cb49f325f85fcd417b9db6bd6909b234d87032d56dcb99284
+  metadata.gz: e7b6bdb711d3e712ac96bd52fc6f909d2ea5beaa2ba664d10e4678792afc58bb61ecce45ccb9b745e8f3706e5221917c754c2a461caff4be864e294050aba10d
+  data.tar.gz: a6d86dc5249f31161e4f7c3e31cfcda725b1173f0c63348c81f0cd62135688408b4b963540f80564d5eec1fb86f7601090e24c00ed5a55fa5e9c5277a18d75a4

data/Rakefile

@@ -9,7 +9,20 @@ load "rails/tasks/statistics.rake"
 Rake::TestTask.new do |test|
   test.libs << "test"
   test.test_files = FileList["test/**/*_test.rb"]
-  test.warning = false
 end
 
-task default: :test
+task :test_prereq do
+  puts "Installing Ruby dependencies"
+  `bundle install`
+
+  puts "Installing JavaScript dependencies"
+  `yarn install`
+
+  puts "Building JavaScript"
+  `yarn build`
+
+  puts "Preparing test database"
+  `cd test/dummy; ./bin/rails db:test:prepare; cd ../..`
+end
+
+task default: [:test_prereq, :test]

data/app/assets/javascripts/turbo.js

@@ -56,13 +56,11 @@ function clickCaptured(event) {
 
 (function() {
   if ("submitter" in Event.prototype) return;
-  let prototype;
+  let prototype = window.Event.prototype;
   if ("SubmitEvent" in window && /Apple Computer/.test(navigator.vendor)) {
     prototype = window.SubmitEvent.prototype;
   } else if ("SubmitEvent" in window) {
     return;
-  } else {
-    prototype = window.Event.prototype;
   }
   addEventListener("click", clickCaptured, true);
   Object.defineProperty(prototype, "submitter", {
@@ -82,14 +80,14 @@ var FrameLoadingStyle;
 })(FrameLoadingStyle || (FrameLoadingStyle = {}));
 
 class FrameElement extends HTMLElement {
+  static get observedAttributes() {
+    return [ "disabled", "complete", "loading", "src" ];
+  }
   constructor() {
     super();
     this.loaded = Promise.resolve();
     this.delegate = new FrameElement.delegateConstructor(this);
   }
-  static get observedAttributes() {
-    return [ "disabled", "complete", "loading", "src" ];
-  }
   connectedCallback() {
     this.delegate.connect();
   }
@@ -560,7 +558,7 @@ class FetchRequest {
       credentials: "same-origin",
       headers: this.headers,
       redirect: "follow",
-      body: this.isIdempotent ? null : this.body,
+      body: this.isSafe ? null : this.body,
       signal: this.abortSignal,
       referrer: (_a = this.delegate.referrer) === null || _a === void 0 ? void 0 : _a.href
     };
@@ -570,8 +568,8 @@ class FetchRequest {
       Accept: "text/html, application/xhtml+xml"
     };
   }
-  get isIdempotent() {
-    return this.method == FetchMethod.get;
+  get isSafe() {
+    return this.method === FetchMethod.get;
   }
   get abortSignal() {
     return this.abortController.signal;
@@ -633,9 +631,6 @@ class AppearanceObserver {
 }
 
 class StreamMessage {
-  constructor(fragment) {
-    this.fragment = importStreamElements(fragment);
-  }
   static wrap(message) {
     if (typeof message == "string") {
       return new this(createDocumentFragment(message));
@@ -643,6 +638,9 @@ class StreamMessage {
       return message;
     }
   }
+  constructor(fragment) {
+    this.fragment = importStreamElements(fragment);
+  }
 }
 
 StreamMessage.contentType = "text/vnd.turbo-stream.html";
@@ -691,6 +689,9 @@ function formEnctypeFromString(encoding) {
 }
 
 class FormSubmission {
+  static confirmMethod(message, _element, _submitter) {
+    return Promise.resolve(confirm(message));
+  }
   constructor(delegate, formElement, submitter, mustRedirect = false) {
     this.state = FormSubmissionState.initialized;
     this.delegate = delegate;
@@ -704,9 +705,6 @@ class FormSubmission {
     this.fetchRequest = new FetchRequest(this, this.method, this.location, this.body, this.formElement);
     this.mustRedirect = mustRedirect;
   }
-  static confirmMethod(message, _element, _submitter) {
-    return Promise.resolve(confirm(message));
-  }
   get method() {
     var _a;
     const method = ((_a = this.submitter) === null || _a === void 0 ? void 0 : _a.getAttribute("formmethod")) || this.formElement.getAttribute("method") || "";
@@ -732,8 +730,8 @@ class FormSubmission {
     var _a;
     return formEnctypeFromString(((_a = this.submitter) === null || _a === void 0 ? void 0 : _a.getAttribute("formenctype")) || this.formElement.enctype);
   }
-  get isIdempotent() {
-    return this.fetchRequest.isIdempotent;
+  get isSafe() {
+    return this.fetchRequest.isSafe;
   }
   get stringFormData() {
     return [ ...this.formData ].reduce(((entries, [name, value]) => entries.concat(typeof value == "string" ? [ [ name, value ] ] : [])), []);
@@ -761,7 +759,7 @@ class FormSubmission {
     }
   }
   prepareRequest(request) {
-    if (!request.isIdempotent) {
+    if (!request.isSafe) {
       const token = getCookieValue(getMetaContent("csrf-param")) || getMetaContent("csrf-token");
       if (token) {
         request.headers["X-CSRF-Token"] = token;
@@ -775,6 +773,7 @@ class FormSubmission {
     var _a;
     this.state = FormSubmissionState.waiting;
     (_a = this.submitter) === null || _a === void 0 ? void 0 : _a.setAttribute("disabled", "");
+    this.setSubmitsWith();
     dispatch("turbo:submit-start", {
       target: this.formElement,
       detail: {
@@ -822,6 +821,7 @@ class FormSubmission {
     var _a;
     this.state = FormSubmissionState.stopped;
     (_a = this.submitter) === null || _a === void 0 ? void 0 : _a.removeAttribute("disabled");
+    this.resetSubmitterText();
     dispatch("turbo:submit-end", {
       target: this.formElement,
       detail: Object.assign({
@@ -830,11 +830,35 @@ class FormSubmission {
     });
     this.delegate.formSubmissionFinished(this);
   }
+  setSubmitsWith() {
+    if (!this.submitter || !this.submitsWith) return;
+    if (this.submitter.matches("button")) {
+      this.originalSubmitText = this.submitter.innerHTML;
+      this.submitter.innerHTML = this.submitsWith;
+    } else if (this.submitter.matches("input")) {
+      const input = this.submitter;
+      this.originalSubmitText = input.value;
+      input.value = this.submitsWith;
+    }
+  }
+  resetSubmitterText() {
+    if (!this.submitter || !this.originalSubmitText) return;
+    if (this.submitter.matches("button")) {
+      this.submitter.innerHTML = this.originalSubmitText;
+    } else if (this.submitter.matches("input")) {
+      const input = this.submitter;
+      input.value = this.originalSubmitText;
+    }
+  }
   requestMustRedirect(request) {
-    return !request.isIdempotent && this.mustRedirect;
+    return !request.isSafe && this.mustRedirect;
   }
   requestAcceptsTurboStreamResponse(request) {
-    return !request.isIdempotent || hasAttribute("data-turbo-stream", this.submitter, this.formElement);
+    return !request.isSafe || hasAttribute("data-turbo-stream", this.submitter, this.formElement);
+  }
+  get submitsWith() {
+    var _a;
+    return (_a = this.submitter) === null || _a === void 0 ? void 0 : _a.getAttribute("data-turbo-submits-with");
   }
 }
 
@@ -1076,8 +1100,8 @@ class View {
 }
 
 class FrameView extends View {
-  invalidate() {
-    this.element.innerHTML = "";
+  missing() {
+    this.element.innerHTML = `<strong class="turbo-frame-error">Content missing</strong>`;
   }
   get snapshot() {
     return new Snapshot(this.element);
@@ -1232,16 +1256,16 @@ class FormLinkClickObserver {
 }
 
 class Bardo {
-  constructor(delegate, permanentElementMap) {
-    this.delegate = delegate;
-    this.permanentElementMap = permanentElementMap;
-  }
   static async preservingPermanentElements(delegate, permanentElementMap, callback) {
     const bardo = new this(delegate, permanentElementMap);
     bardo.enter();
     await callback();
     bardo.leave();
   }
+  constructor(delegate, permanentElementMap) {
+    this.delegate = delegate;
+    this.permanentElementMap = permanentElementMap;
+  }
   enter() {
     for (const id in this.permanentElementMap) {
       const [currentPermanentElement, newPermanentElement] = this.permanentElementMap[id];
@@ -1352,10 +1376,6 @@ function elementIsFocusable(element) {
 }
 
 class FrameRenderer extends Renderer {
-  constructor(delegate, currentSnapshot, newSnapshot, renderElement, isPreview, willRender = true) {
-    super(currentSnapshot, newSnapshot, renderElement, isPreview, willRender);
-    this.delegate = delegate;
-  }
   static renderElement(currentElement, newElement) {
     var _a;
     const destinationRange = document.createRange();
@@ -1368,6 +1388,10 @@ class FrameRenderer extends Renderer {
       currentElement.appendChild(sourceRange.extractContents());
     }
   }
+  constructor(delegate, currentSnapshot, newSnapshot, renderElement, isPreview, willRender = true) {
+    super(currentSnapshot, newSnapshot, renderElement, isPreview, willRender);
+    this.delegate = delegate;
+  }
   get shouldRender() {
     return true;
   }
@@ -1429,18 +1453,6 @@ function readScrollBehavior(value, defaultValue) {
 }
 
 class ProgressBar {
-  constructor() {
-    this.hiding = false;
-    this.value = 0;
-    this.visible = false;
-    this.trickle = () => {
-      this.setValue(this.value + Math.random() / 100);
-    };
-    this.stylesheetElement = this.createStylesheetElement();
-    this.progressElement = this.createProgressElement();
-    this.installStylesheetElement();
-    this.setValue(0);
-  }
   static get defaultCSS() {
     return unindent`
       .turbo-progress-bar {
@@ -1458,6 +1470,18 @@ class ProgressBar {
       }
     `;
   }
+  constructor() {
+    this.hiding = false;
+    this.value = 0;
+    this.visible = false;
+    this.trickle = () => {
+      this.setValue(this.value + Math.random() / 100);
+    };
+    this.stylesheetElement = this.createStylesheetElement();
+    this.progressElement = this.createProgressElement();
+    this.installStylesheetElement();
+    this.setValue(0);
+  }
   show() {
     if (!this.visible) {
       this.visible = true;
@@ -1626,10 +1650,6 @@ function elementWithoutNonce(element) {
 }
 
 class PageSnapshot extends Snapshot {
-  constructor(element, headSnapshot) {
-    super(element);
-    this.headSnapshot = headSnapshot;
-  }
   static fromHTMLString(html = "") {
     return this.fromDocument(parseHTMLDocument(html));
   }
@@ -1639,6 +1659,10 @@ class PageSnapshot extends Snapshot {
   static fromDocument({head: head, body: body}) {
     return new this(body, new HeadSnapshot(head));
   }
+  constructor(element, headSnapshot) {
+    super(element);
+    this.headSnapshot = headSnapshot;
+  }
   clone() {
     const clonedElement = this.element.cloneNode(true);
     const selectElements = this.element.querySelectorAll("select");
@@ -2143,10 +2167,11 @@ class BrowserAdapter {
 
 class CacheObserver {
   constructor() {
+    this.selector = "[data-turbo-temporary]";
+    this.deprecatedSelector = "[data-turbo-cache=false]";
     this.started = false;
-    this.removeStaleElements = _event => {
-      const staleElements = [ ...document.querySelectorAll('[data-turbo-cache="false"]') ];
-      for (const element of staleElements) {
+    this.removeTemporaryElements = _event => {
+      for (const element of this.temporaryElements) {
         element.remove();
       }
     };
@@ -2154,15 +2179,25 @@ class CacheObserver {
   start() {
     if (!this.started) {
       this.started = true;
-      addEventListener("turbo:before-cache", this.removeStaleElements, false);
+      addEventListener("turbo:before-cache", this.removeTemporaryElements, false);
     }
   }
   stop() {
     if (this.started) {
       this.started = false;
-      removeEventListener("turbo:before-cache", this.removeStaleElements, false);
+      removeEventListener("turbo:before-cache", this.removeTemporaryElements, false);
     }
   }
+  get temporaryElements() {
+    return [ ...document.querySelectorAll(this.selector), ...this.temporaryElementsWithDeprecation ];
+  }
+  get temporaryElementsWithDeprecation() {
+    const elements = document.querySelectorAll(this.deprecatedSelector);
+    if (elements.length) {
+      console.warn(`The ${this.deprecatedSelector} selector is deprecated and will be removed in a future version. Use ${this.selector} instead.`);
+    }
+    return [ ...elements ];
+  }
 }
 
 class FrameRedirector {
@@ -2361,7 +2396,7 @@ class Navigator {
     if (formSubmission == this.formSubmission) {
       const responseHTML = await fetchResponse.responseHTML;
       if (responseHTML) {
-        const shouldCacheSnapshot = formSubmission.method == FetchMethod.get;
+        const shouldCacheSnapshot = formSubmission.isSafe;
         if (!shouldCacheSnapshot) {
           this.view.clearSnapshotCache();
         }
@@ -3362,6 +3397,8 @@ var Turbo = Object.freeze({
   StreamActions: StreamActions
 });
 
+class TurboFrameMissingError extends Error {}
+
 class FrameController {
   constructor(element) {
     this.fetchResponseLoaded = _fetchResponse => {};
@@ -3458,26 +3495,14 @@ class FrameController {
     try {
       const html = await fetchResponse.responseHTML;
       if (html) {
-        const {body: body} = parseHTMLDocument(html);
-        const newFrameElement = await this.extractForeignFrameElement(body);
-        if (newFrameElement) {
-          const snapshot = new Snapshot(newFrameElement);
-          const renderer = new FrameRenderer(this, this.view.snapshot, snapshot, FrameRenderer.renderElement, false, false);
-          if (this.view.renderPromise) await this.view.renderPromise;
-          this.changeHistory();
-          await this.view.render(renderer);
-          this.complete = true;
-          session.frameRendered(fetchResponse, this.element);
-          session.frameLoaded(this.element);
-          this.fetchResponseLoaded(fetchResponse);
-        } else if (this.willHandleFrameMissingFromResponse(fetchResponse)) {
-          console.warn(`A matching frame for #${this.element.id} was missing from the response, transforming into full-page Visit.`);
-          this.visitResponse(fetchResponse.response);
+        const document = parseHTMLDocument(html);
+        const pageSnapshot = PageSnapshot.fromDocument(document);
+        if (pageSnapshot.isVisitable) {
+          await this.loadFrameResponse(fetchResponse, document);
+        } else {
+          await this.handleUnvisitableFrameResponse(fetchResponse);
         }
       }
-    } catch (error) {
-      console.error(error);
-      this.view.invalidate();
     } finally {
       this.fetchResponseLoaded = () => {};
     }
@@ -3529,7 +3554,6 @@ class FrameController {
     this.resolveVisitPromise();
   }
   async requestFailedWithResponse(request, response) {
-    console.error(response);
     await this.loadResponse(response);
     this.resolveVisitPromise();
   }
@@ -3547,9 +3571,13 @@ class FrameController {
     const frame = this.findFrameElement(formSubmission.formElement, formSubmission.submitter);
     frame.delegate.proposeVisitIfNavigatedWithAction(frame, formSubmission.formElement, formSubmission.submitter);
     frame.delegate.loadResponse(response);
+    if (!formSubmission.isSafe) {
+      session.clearCache();
+    }
   }
   formSubmissionFailedWithResponse(formSubmission, fetchResponse) {
     this.element.delegate.loadResponse(fetchResponse);
+    session.clearCache();
   }
   formSubmissionErrored(formSubmission, error) {
     console.error(error);
@@ -3579,6 +3607,22 @@ class FrameController {
   willRenderFrame(currentElement, _newElement) {
     this.previousFrameElement = currentElement.cloneNode(true);
   }
+  async loadFrameResponse(fetchResponse, document) {
+    const newFrameElement = await this.extractForeignFrameElement(document.body);
+    if (newFrameElement) {
+      const snapshot = new Snapshot(newFrameElement);
+      const renderer = new FrameRenderer(this, this.view.snapshot, snapshot, FrameRenderer.renderElement, false, false);
+      if (this.view.renderPromise) await this.view.renderPromise;
+      this.changeHistory();
+      await this.view.render(renderer);
+      this.complete = true;
+      session.frameRendered(fetchResponse, this.element);
+      session.frameLoaded(this.element);
+      this.fetchResponseLoaded(fetchResponse);
+    } else if (this.willHandleFrameMissingFromResponse(fetchResponse)) {
+      this.handleFrameMissingFromResponse(fetchResponse);
+    }
+  }
   async visit(url) {
     var _a;
     const request = new FetchRequest(this, FetchMethod.get, url, new URLSearchParams, this.element);
@@ -3634,6 +3678,10 @@ class FrameController {
       session.history.update(method, expandURL(this.element.src || ""), this.restorationIdentifier);
     }
   }
+  async handleUnvisitableFrameResponse(fetchResponse) {
+    console.warn(`The response (${fetchResponse.statusCode}) from <turbo-frame id="${this.element.id}"> is performing a full page visit due to turbo-visit-control.`);
+    await this.visitResponse(fetchResponse.response);
+  }
   willHandleFrameMissingFromResponse(fetchResponse) {
     this.element.setAttribute("complete", "");
     const response = fetchResponse.response;
@@ -3654,6 +3702,14 @@ class FrameController {
     });
     return !event.defaultPrevented;
   }
+  handleFrameMissingFromResponse(fetchResponse) {
+    this.view.missing();
+    this.throwFrameMissingError(fetchResponse);
+  }
+  throwFrameMissingError(fetchResponse) {
+    const message = `The response (${fetchResponse.statusCode}) did not contain the expected <turbo-frame id="${this.element.id}"> and will be ignored. To perform a full page visit instead, set turbo-visit-control to reload.`;
+    throw new TurboFrameMissingError(message);
+  }
   async visitResponse(response) {
     const wrapped = new FetchResponse(response);
     const responseHTML = await wrapped.responseHTML;
@@ -4048,7 +4104,9 @@ class TurboCableStreamSourceElement extends HTMLElement {
   async connectedCallback() {
     connectStreamSource(this);
     this.subscription = await subscribeTo(this.channel, {
-      received: this.dispatchMessageEvent.bind(this)
+      received: this.dispatchMessageEvent.bind(this),
+      connected: this.subscriptionConnected.bind(this),
+      disconnected: this.subscriptionDisconnected.bind(this)
     });
   }
   disconnectedCallback() {
@@ -4061,6 +4119,12 @@ class TurboCableStreamSourceElement extends HTMLElement {
     });
     return this.dispatchEvent(event);
   }
+  subscriptionConnected() {
+    this.setAttribute("connected", "");
+  }
+  subscriptionDisconnected() {
+    this.removeAttribute("connected");
+  }
   get channel() {
     const channel = this.getAttribute("channel");
     const signed_stream_name = this.getAttribute("signed-stream-name");