@hotwired/turbo
Version:
The speed of a single-page web application without having to write any JavaScript
7,179 lines • 201 kB
JavaScript
/*!
Turbo 8.0.13
Copyright © 2025 37signals LLC
*/
/**
* The MIT License (MIT)
*
* Copyright (c) 2019 Javan Makhmali
*
* Permission is hereby granted, free of charge, to any person obtaining a copy
* of this software and associated documentation files (the "Software"), to deal
* in the Software without restriction, including without limitation the rights
* to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
* copies of the Software, and to permit persons to whom the Software is
* furnished to do so, subject to the following conditions:
*
* The above copyright notice and this permission notice shall be included in
* all copies or substantial portions of the Software.
*
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
* FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
* AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
* LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
* THE SOFTWARE.
*/
(function (prototype) {
if (typeof prototype.requestSubmit == "function") return
prototype.requestSubmit = function (submitter) {
if (submitter) {
validateSubmitter(submitter, this);
submitter.click();
} else {
submitter = document.createElement("input");
submitter.type = "submit";
submitter.hidden = true;
this.appendChild(submitter);
submitter.click();
this.removeChild(submitter);
}
};
function validateSubmitter(submitter, form) {
submitter instanceof HTMLElement || raise(TypeError, "parameter 1 is not of type 'HTMLElement'");
submitter.type == "submit" || raise(TypeError, "The specified element is not a submit button");
submitter.form == form ||
raise(DOMException, "The specified element is not owned by this form element", "NotFoundError");
}
function raise(errorConstructor, message, name) {
throw new errorConstructor("Failed to execute 'requestSubmit' on 'HTMLFormElement': " + message + ".", name)
}
})(HTMLFormElement.prototype);
const submittersByForm = new WeakMap();
function findSubmitterFromClickTarget(target) {
const element = target instanceof Element ? target : target instanceof Node ? target.parentElement : null;
const candidate = element ? element.closest("input, button") : null;
return candidate?.type == "submit" ? candidate : null
}
function clickCaptured(event) {
const submitter = findSubmitterFromClickTarget(event.target);
if (submitter && submitter.form) {
submittersByForm.set(submitter.form, submitter);
}
}
(function () {
if ("submitter" in Event.prototype) return
let prototype = window.Event.prototype;
// Certain versions of Safari 15 have a bug where they won't
// populate the submitter. This hurts TurboDrive's enable/disable detection.
// See https://bugs.webkit.org/show_bug.cgi?id=229660
if ("SubmitEvent" in window) {
const prototypeOfSubmitEvent = window.SubmitEvent.prototype;
if (/Apple Computer/.test(navigator.vendor) && !("submitter" in prototypeOfSubmitEvent)) {
prototype = prototypeOfSubmitEvent;
} else {
return // polyfill not needed
}
}
addEventListener("click", clickCaptured, true);
Object.defineProperty(prototype, "submitter", {
get() {
if (this.type == "submit" && this.target instanceof HTMLFormElement) {
return submittersByForm.get(this.target)
}
}
});
})();
const FrameLoadingStyle = {
eager: "eager",
lazy: "lazy"
};
/**
* Contains a fragment of HTML which is updated based on navigation within
* it (e.g. via links or form submissions).
*
* @customElement turbo-frame
* @example
* <turbo-frame id="messages">
* <a href="/messages/expanded">
* Show all expanded messages in this frame.
* </a>
*
* <form action="/messages">
* Show response from this form within this frame.
* </form>
* </turbo-frame>
*/
class FrameElement extends HTMLElement {
static delegateConstructor = undefined
loaded = Promise.resolve()
static get observedAttributes() {
return ["disabled", "loading", "src"]
}
constructor() {
super();
this.delegate = new FrameElement.delegateConstructor(this);
}
connectedCallback() {
this.delegate.connect();
}
disconnectedCallback() {
this.delegate.disconnect();
}
reload() {
return this.delegate.sourceURLReloaded()
}
attributeChangedCallback(name) {
if (name == "loading") {
this.delegate.loadingStyleChanged();
} else if (name == "src") {
this.delegate.sourceURLChanged();
} else if (name == "disabled") {
this.delegate.disabledChanged();
}
}
/**
* Gets the URL to lazily load source HTML from
*/
get src() {
return this.getAttribute("src")
}
/**
* Sets the URL to lazily load source HTML from
*/
set src(value) {
if (value) {
this.setAttribute("src", value);
} else {
this.removeAttribute("src");
}
}
/**
* Gets the refresh mode for the frame.
*/
get refresh() {
return this.getAttribute("refresh")
}
/**
* Sets the refresh mode for the frame.
*/
set refresh(value) {
if (value) {
this.setAttribute("refresh", value);
} else {
this.removeAttribute("refresh");
}
}
get shouldReloadWithMorph() {
return this.src && this.refresh === "morph"
}
/**
* Determines if the element is loading
*/
get loading() {
return frameLoadingStyleFromString(this.getAttribute("loading") || "")
}
/**
* Sets the value of if the element is loading
*/
set loading(value) {
if (value) {
this.setAttribute("loading", value);
} else {
this.removeAttribute("loading");
}
}
/**
* Gets the disabled state of the frame.
*
* If disabled, no requests will be intercepted by the frame.
*/
get disabled() {
return this.hasAttribute("disabled")
}
/**
* Sets the disabled state of the frame.
*
* If disabled, no requests will be intercepted by the frame.
*/
set disabled(value) {
if (value) {
this.setAttribute("disabled", "");
} else {
this.removeAttribute("disabled");
}
}
/**
* Gets the autoscroll state of the frame.
*
* If true, the frame will be scrolled into view automatically on update.
*/
get autoscroll() {
return this.hasAttribute("autoscroll")
}
/**
* Sets the autoscroll state of the frame.
*
* If true, the frame will be scrolled into view automatically on update.
*/
set autoscroll(value) {
if (value) {
this.setAttribute("autoscroll", "");
} else {
this.removeAttribute("autoscroll");
}
}
/**
* Determines if the element has finished loading
*/
get complete() {
return !this.delegate.isLoading
}
/**
* Gets the active state of the frame.
*
* If inactive, source changes will not be observed.
*/
get isActive() {
return this.ownerDocument === document && !this.isPreview
}
/**
* Sets the active state of the frame.
*
* If inactive, source changes will not be observed.
*/
get isPreview() {
return this.ownerDocument?.documentElement?.hasAttribute("data-turbo-preview")
}
}
function frameLoadingStyleFromString(style) {
switch (style.toLowerCase()) {
case "lazy":
return FrameLoadingStyle.lazy
default:
return FrameLoadingStyle.eager
}
}
const drive = {
enabled: true,
progressBarDelay: 500,
unvisitableExtensions: new Set(
[
".7z", ".aac", ".apk", ".avi", ".bmp", ".bz2", ".css", ".csv", ".deb", ".dmg", ".doc",
".docx", ".exe", ".gif", ".gz", ".heic", ".heif", ".ico", ".iso", ".jpeg", ".jpg",
".js", ".json", ".m4a", ".mkv", ".mov", ".mp3", ".mp4", ".mpeg", ".mpg", ".msi",
".ogg", ".ogv", ".pdf", ".pkg", ".png", ".ppt", ".pptx", ".rar", ".rtf",
".svg", ".tar", ".tif", ".tiff", ".txt", ".wav", ".webm", ".webp", ".wma", ".wmv",
".xls", ".xlsx", ".xml", ".zip"
]
)
};
function activateScriptElement(element) {
if (element.getAttribute("data-turbo-eval") == "false") {
return element
} else {
const createdScriptElement = document.createElement("script");
const cspNonce = getCspNonce();
if (cspNonce) {
createdScriptElement.nonce = cspNonce;
}
createdScriptElement.textContent = element.textContent;
createdScriptElement.async = false;
copyElementAttributes(createdScriptElement, element);
return createdScriptElement
}
}
function copyElementAttributes(destinationElement, sourceElement) {
for (const { name, value } of sourceElement.attributes) {
destinationElement.setAttribute(name, value);
}
}
function createDocumentFragment(html) {
const template = document.createElement("template");
template.innerHTML = html;
return template.content
}
function dispatch(eventName, { target, cancelable, detail } = {}) {
const event = new CustomEvent(eventName, {
cancelable,
bubbles: true,
composed: true,
detail
});
if (target && target.isConnected) {
target.dispatchEvent(event);
} else {
document.documentElement.dispatchEvent(event);
}
return event
}
function cancelEvent(event) {
event.preventDefault();
event.stopImmediatePropagation();
}
function nextRepaint() {
if (document.visibilityState === "hidden") {
return nextEventLoopTick()
} else {
return nextAnimationFrame()
}
}
function nextAnimationFrame() {
return new Promise((resolve) => requestAnimationFrame(() => resolve()))
}
function nextEventLoopTick() {
return new Promise((resolve) => setTimeout(() => resolve(), 0))
}
function nextMicrotask() {
return Promise.resolve()
}
function parseHTMLDocument(html = "") {
return new DOMParser().parseFromString(html, "text/html")
}
function unindent(strings, ...values) {
const lines = interpolate(strings, values).replace(/^\n/, "").split("\n");
const match = lines[0].match(/^\s+/);
const indent = match ? match[0].length : 0;
return lines.map((line) => line.slice(indent)).join("\n")
}
function interpolate(strings, values) {
return strings.reduce((result, string, i) => {
const value = values[i] == undefined ? "" : values[i];
return result + string + value
}, "")
}
function uuid() {
return Array.from({ length: 36 })
.map((_, i) => {
if (i == 8 || i == 13 || i == 18 || i == 23) {
return "-"
} else if (i == 14) {
return "4"
} else if (i == 19) {
return (Math.floor(Math.random() * 4) + 8).toString(16)
} else {
return Math.floor(Math.random() * 15).toString(16)
}
})
.join("")
}
function getAttribute(attributeName, ...elements) {
for (const value of elements.map((element) => element?.getAttribute(attributeName))) {
if (typeof value == "string") return value
}
return null
}
function hasAttribute(attributeName, ...elements) {
return elements.some((element) => element && element.hasAttribute(attributeName))
}
function markAsBusy(...elements) {
for (const element of elements) {
if (element.localName == "turbo-frame") {
element.setAttribute("busy", "");
}
element.setAttribute("aria-busy", "true");
}
}
function clearBusyState(...elements) {
for (const element of elements) {
if (element.localName == "turbo-frame") {
element.removeAttribute("busy");
}
element.removeAttribute("aria-busy");
}
}
function waitForLoad(element, timeoutInMilliseconds = 2000) {
return new Promise((resolve) => {
const onComplete = () => {
element.removeEventListener("error", onComplete);
element.removeEventListener("load", onComplete);
resolve();
};
element.addEventListener("load", onComplete, { once: true });
element.addEventListener("error", onComplete, { once: true });
setTimeout(resolve, timeoutInMilliseconds);
})
}
function getHistoryMethodForAction(action) {
switch (action) {
case "replace":
return history.replaceState
case "advance":
case "restore":
return history.pushState
}
}
function isAction(action) {
return action == "advance" || action == "replace" || action == "restore"
}
function getVisitAction(...elements) {
const action = getAttribute("data-turbo-action", ...elements);
return isAction(action) ? action : null
}
function getMetaElement(name) {
return document.querySelector(`meta[name="${name}"]`)
}
function getMetaContent(name) {
const element = getMetaElement(name);
return element && element.content
}
function getCspNonce() {
const element = getMetaElement("csp-nonce");
if (element) {
const { nonce, content } = element;
return nonce == "" ? content : nonce
}
}
function setMetaContent(name, content) {
let element = getMetaElement(name);
if (!element) {
element = document.createElement("meta");
element.setAttribute("name", name);
document.head.appendChild(element);
}
element.setAttribute("content", content);
return element
}
function findClosestRecursively(element, selector) {
if (element instanceof Element) {
return (
element.closest(selector) || findClosestRecursively(element.assignedSlot || element.getRootNode()?.host, selector)
)
}
}
function elementIsFocusable(element) {
const inertDisabledOrHidden = "[inert], :disabled, [hidden], details:not([open]), dialog:not([open])";
return !!element && element.closest(inertDisabledOrHidden) == null && typeof element.focus == "function"
}
function queryAutofocusableElement(elementOrDocumentFragment) {
return Array.from(elementOrDocumentFragment.querySelectorAll("[autofocus]")).find(elementIsFocusable)
}
async function around(callback, reader) {
const before = reader();
callback();
await nextAnimationFrame();
const after = reader();
return [before, after]
}
function doesNotTargetIFrame(name) {
if (name === "_blank") {
return false
} else if (name) {
for (const element of document.getElementsByName(name)) {
if (element instanceof HTMLIFrameElement) return false
}
return true
} else {
return true
}
}
function findLinkFromClickTarget(target) {
return findClosestRecursively(target, "a[href]:not([target^=_]):not([download])")
}
function getLocationForLink(link) {
return expandURL(link.getAttribute("href") || "")
}
function debounce(fn, delay) {
let timeoutId = null;
return (...args) => {
const callback = () => fn.apply(this, args);
clearTimeout(timeoutId);
timeoutId = setTimeout(callback, delay);
}
}
const submitter = {
"aria-disabled": {
beforeSubmit: submitter => {
submitter.setAttribute("aria-disabled", "true");
submitter.addEventListener("click", cancelEvent);
},
afterSubmit: submitter => {
submitter.removeAttribute("aria-disabled");
submitter.removeEventListener("click", cancelEvent);
}
},
"disabled": {
beforeSubmit: submitter => submitter.disabled = true,
afterSubmit: submitter => submitter.disabled = false
}
};
class Config {
#submitter = null
constructor(config) {
Object.assign(this, config);
}
get submitter() {
return this.#submitter
}
set submitter(value) {
this.#submitter = submitter[value] || value;
}
}
const forms = new Config({
mode: "on",
submitter: "disabled"
});
const config = {
drive,
forms
};
function expandURL(locatable) {
return new URL(locatable.toString(), document.baseURI)
}
function getAnchor(url) {
let anchorMatch;
if (url.hash) {
return url.hash.slice(1)
// eslint-disable-next-line no-cond-assign
} else if ((anchorMatch = url.href.match(/#(.*)$/))) {
return anchorMatch[1]
}
}
function getAction$1(form, submitter) {
const action = submitter?.getAttribute("formaction") || form.getAttribute("action") || form.action;
return expandURL(action)
}
function getExtension(url) {
return (getLastPathComponent(url).match(/\.[^.]*$/) || [])[0] || ""
}
function isPrefixedBy(baseURL, url) {
const prefix = getPrefix(url);
return baseURL.href === expandURL(prefix).href || baseURL.href.startsWith(prefix)
}
function locationIsVisitable(location, rootLocation) {
return isPrefixedBy(location, rootLocation) && !config.drive.unvisitableExtensions.has(getExtension(location))
}
function getRequestURL(url) {
const anchor = getAnchor(url);
return anchor != null ? url.href.slice(0, -(anchor.length + 1)) : url.href
}
function toCacheKey(url) {
return getRequestURL(url)
}
function urlsAreEqual(left, right) {
return expandURL(left).href == expandURL(right).href
}
function getPathComponents(url) {
return url.pathname.split("/").slice(1)
}
function getLastPathComponent(url) {
return getPathComponents(url).slice(-1)[0]
}
function getPrefix(url) {
return addTrailingSlash(url.origin + url.pathname)
}
function addTrailingSlash(value) {
return value.endsWith("/") ? value : value + "/"
}
class FetchResponse {
constructor(response) {
this.response = response;
}
get succeeded() {
return this.response.ok
}
get failed() {
return !this.succeeded
}
get clientError() {
return this.statusCode >= 400 && this.statusCode <= 499
}
get serverError() {
return this.statusCode >= 500 && this.statusCode <= 599
}
get redirected() {
return this.response.redirected
}
get location() {
return expandURL(this.response.url)
}
get isHTML() {
return this.contentType && this.contentType.match(/^(?:text\/([^\s;,]+\b)?html|application\/xhtml\+xml)\b/)
}
get statusCode() {
return this.response.status
}
get contentType() {
return this.header("Content-Type")
}
get responseText() {
return this.response.clone().text()
}
get responseHTML() {
if (this.isHTML) {
return this.response.clone().text()
} else {
return Promise.resolve(undefined)
}
}
header(name) {
return this.response.headers.get(name)
}
}
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();
recentRequests.add(requestUID);
modifiedHeaders.append("X-Turbo-Request-Id", requestUID);
return nativeFetch(url, {
...options,
headers: modifiedHeaders
})
}
function fetchMethodFromString(method) {
switch (method.toLowerCase()) {
case "get":
return FetchMethod.get
case "post":
return FetchMethod.post
case "put":
return FetchMethod.put
case "patch":
return FetchMethod.patch
case "delete":
return FetchMethod.delete
}
}
const FetchMethod = {
get: "get",
post: "post",
put: "put",
patch: "patch",
delete: "delete"
};
function fetchEnctypeFromString(encoding) {
switch (encoding.toLowerCase()) {
case FetchEnctype.multipart:
return FetchEnctype.multipart
case FetchEnctype.plain:
return FetchEnctype.plain
default:
return FetchEnctype.urlEncoded
}
}
const FetchEnctype = {
urlEncoded: "application/x-www-form-urlencoded",
multipart: "multipart/form-data",
plain: "text/plain"
};
class FetchRequest {
abortController = new AbortController()
#resolveRequestPromise = (_value) => {}
constructor(delegate, method, location, requestBody = new URLSearchParams(), target = null, enctype = FetchEnctype.urlEncoded) {
const [url, body] = buildResourceAndBody(expandURL(location), method, requestBody, enctype);
this.delegate = delegate;
this.url = url;
this.target = target;
this.fetchOptions = {
credentials: "same-origin",
redirect: "follow",
method: method.toUpperCase(),
headers: { ...this.defaultHeaders },
body: body,
signal: this.abortSignal,
referrer: this.delegate.referrer?.href
};
this.enctype = enctype;
}
get method() {
return this.fetchOptions.method
}
set method(value) {
const fetchBody = this.isSafe ? this.url.searchParams : this.fetchOptions.body || new FormData();
const fetchMethod = fetchMethodFromString(value) || FetchMethod.get;
this.url.search = "";
const [url, body] = buildResourceAndBody(this.url, fetchMethod, fetchBody, this.enctype);
this.url = url;
this.fetchOptions.body = body;
this.fetchOptions.method = fetchMethod.toUpperCase();
}
get headers() {
return this.fetchOptions.headers
}
set headers(value) {
this.fetchOptions.headers = value;
}
get body() {
if (this.isSafe) {
return this.url.searchParams
} else {
return this.fetchOptions.body
}
}
set body(value) {
this.fetchOptions.body = value;
}
get location() {
return this.url
}
get params() {
return this.url.searchParams
}
get entries() {
return this.body ? Array.from(this.body.entries()) : []
}
cancel() {
this.abortController.abort();
}
async perform() {
const { fetchOptions } = this;
this.delegate.prepareRequest(this);
const event = await this.#allowRequestToBeIntercepted(fetchOptions);
try {
this.delegate.requestStarted(this);
if (event.detail.fetchRequest) {
this.response = event.detail.fetchRequest.response;
} else {
this.response = fetchWithTurboHeaders(this.url.href, fetchOptions);
}
const response = await this.response;
return await this.receive(response)
} catch (error) {
if (error.name !== "AbortError") {
if (this.#willDelegateErrorHandling(error)) {
this.delegate.requestErrored(this, error);
}
throw error
}
} finally {
this.delegate.requestFinished(this);
}
}
async receive(response) {
const fetchResponse = new FetchResponse(response);
const event = dispatch("turbo:before-fetch-response", {
cancelable: true,
detail: { fetchResponse },
target: this.target
});
if (event.defaultPrevented) {
this.delegate.requestPreventedHandlingResponse(this, fetchResponse);
} else if (fetchResponse.succeeded) {
this.delegate.requestSucceededWithResponse(this, fetchResponse);
} else {
this.delegate.requestFailedWithResponse(this, fetchResponse);
}
return fetchResponse
}
get defaultHeaders() {
return {
Accept: "text/html, application/xhtml+xml"
}
}
get isSafe() {
return isSafe(this.method)
}
get abortSignal() {
return this.abortController.signal
}
acceptResponseType(mimeType) {
this.headers["Accept"] = [mimeType, this.headers["Accept"]].join(", ");
}
async #allowRequestToBeIntercepted(fetchOptions) {
const requestInterception = new Promise((resolve) => (this.#resolveRequestPromise = resolve));
const event = dispatch("turbo:before-fetch-request", {
cancelable: true,
detail: {
fetchOptions,
url: this.url,
resume: this.#resolveRequestPromise
},
target: this.target
});
this.url = event.detail.url;
if (event.defaultPrevented) await requestInterception;
return event
}
#willDelegateErrorHandling(error) {
const event = dispatch("turbo:fetch-request-error", {
target: this.target,
cancelable: true,
detail: { request: this, error: error }
});
return !event.defaultPrevented
}
}
function isSafe(fetchMethod) {
return fetchMethodFromString(fetchMethod) == FetchMethod.get
}
function buildResourceAndBody(resource, method, requestBody, enctype) {
const searchParams =
Array.from(requestBody).length > 0 ? new URLSearchParams(entriesExcludingFiles(requestBody)) : resource.searchParams;
if (isSafe(method)) {
return [mergeIntoURLSearchParams(resource, searchParams), null]
} else if (enctype == FetchEnctype.urlEncoded) {
return [resource, searchParams]
} else {
return [resource, requestBody]
}
}
function entriesExcludingFiles(requestBody) {
const entries = [];
for (const [name, value] of requestBody) {
if (value instanceof File) continue
else entries.push([name, value]);
}
return entries
}
function mergeIntoURLSearchParams(url, requestBody) {
const searchParams = new URLSearchParams(entriesExcludingFiles(requestBody));
url.search = searchParams.toString();
return url
}
class AppearanceObserver {
started = false
constructor(delegate, element) {
this.delegate = delegate;
this.element = element;
this.intersectionObserver = new IntersectionObserver(this.intersect);
}
start() {
if (!this.started) {
this.started = true;
this.intersectionObserver.observe(this.element);
}
}
stop() {
if (this.started) {
this.started = false;
this.intersectionObserver.unobserve(this.element);
}
}
intersect = (entries) => {
const lastEntry = entries.slice(-1)[0];
if (lastEntry?.isIntersecting) {
this.delegate.elementAppearedInViewport(this.element);
}
}
}
class StreamMessage {
static contentType = "text/vnd.turbo-stream.html"
static wrap(message) {
if (typeof message == "string") {
return new this(createDocumentFragment(message))
} else {
return message
}
}
constructor(fragment) {
this.fragment = importStreamElements(fragment);
}
}
function importStreamElements(fragment) {
for (const element of fragment.querySelectorAll("turbo-stream")) {
const streamElement = document.importNode(element, true);
for (const inertScriptElement of streamElement.templateElement.content.querySelectorAll("script")) {
inertScriptElement.replaceWith(activateScriptElement(inertScriptElement));
}
element.replaceWith(streamElement);
}
return fragment
}
const PREFETCH_DELAY = 100;
class PrefetchCache {
#prefetchTimeout = null
#prefetched = null
get(url) {
if (this.#prefetched && this.#prefetched.url === url && this.#prefetched.expire > Date.now()) {
return this.#prefetched.request
}
}
setLater(url, request, ttl) {
this.clear();
this.#prefetchTimeout = setTimeout(() => {
request.perform();
this.set(url, request, ttl);
this.#prefetchTimeout = null;
}, PREFETCH_DELAY);
}
set(url, request, ttl) {
this.#prefetched = { url, request, expire: new Date(new Date().getTime() + ttl) };
}
clear() {
if (this.#prefetchTimeout) clearTimeout(this.#prefetchTimeout);
this.#prefetched = null;
}
}
const cacheTtl = 10 * 1000;
const prefetchCache = new PrefetchCache();
const FormSubmissionState = {
initialized: "initialized",
requesting: "requesting",
waiting: "waiting",
receiving: "receiving",
stopping: "stopping",
stopped: "stopped"
};
class FormSubmission {
state = FormSubmissionState.initialized
static confirmMethod(message) {
return Promise.resolve(confirm(message))
}
constructor(delegate, formElement, submitter, mustRedirect = false) {
const method = getMethod(formElement, submitter);
const action = getAction(getFormAction(formElement, submitter), method);
const body = buildFormData(formElement, submitter);
const enctype = getEnctype(formElement, submitter);
this.delegate = delegate;
this.formElement = formElement;
this.submitter = submitter;
this.fetchRequest = new FetchRequest(this, method, action, body, formElement, enctype);
this.mustRedirect = mustRedirect;
}
get method() {
return this.fetchRequest.method
}
set method(value) {
this.fetchRequest.method = value;
}
get action() {
return this.fetchRequest.url.toString()
}
set action(value) {
this.fetchRequest.url = expandURL(value);
}
get body() {
return this.fetchRequest.body
}
get enctype() {
return this.fetchRequest.enctype
}
get isSafe() {
return this.fetchRequest.isSafe
}
get location() {
return this.fetchRequest.url
}
// The submission process
async start() {
const { initialized, requesting } = FormSubmissionState;
const confirmationMessage = getAttribute("data-turbo-confirm", this.submitter, this.formElement);
if (typeof confirmationMessage === "string") {
const confirmMethod = typeof config.forms.confirm === "function" ?
config.forms.confirm :
FormSubmission.confirmMethod;
const answer = await confirmMethod(confirmationMessage, this.formElement, this.submitter);
if (!answer) {
return
}
}
if (this.state == initialized) {
this.state = requesting;
return this.fetchRequest.perform()
}
}
stop() {
const { stopping, stopped } = FormSubmissionState;
if (this.state != stopping && this.state != stopped) {
this.state = stopping;
this.fetchRequest.cancel();
return true
}
}
// Fetch request delegate
prepareRequest(request) {
if (!request.isSafe) {
const token = getCookieValue(getMetaContent("csrf-param")) || getMetaContent("csrf-token");
if (token) {
request.headers["X-CSRF-Token"] = token;
}
}
if (this.requestAcceptsTurboStreamResponse(request)) {
request.acceptResponseType(StreamMessage.contentType);
}
}
requestStarted(_request) {
this.state = FormSubmissionState.waiting;
if (this.submitter) config.forms.submitter.beforeSubmit(this.submitter);
this.setSubmitsWith();
markAsBusy(this.formElement);
dispatch("turbo:submit-start", {
target: this.formElement,
detail: { formSubmission: this }
});
this.delegate.formSubmissionStarted(this);
}
requestPreventedHandlingResponse(request, response) {
prefetchCache.clear();
this.result = { success: response.succeeded, fetchResponse: response };
}
requestSucceededWithResponse(request, response) {
if (response.clientError || response.serverError) {
this.delegate.formSubmissionFailedWithResponse(this, response);
return
}
prefetchCache.clear();
if (this.requestMustRedirect(request) && responseSucceededWithoutRedirect(response)) {
const error = new Error("Form responses must redirect to another location");
this.delegate.formSubmissionErrored(this, error);
} else {
this.state = FormSubmissionState.receiving;
this.result = { success: true, fetchResponse: response };
this.delegate.formSubmissionSucceededWithResponse(this, response);
}
}
requestFailedWithResponse(request, response) {
this.result = { success: false, fetchResponse: response };
this.delegate.formSubmissionFailedWithResponse(this, response);
}
requestErrored(request, error) {
this.result = { success: false, error };
this.delegate.formSubmissionErrored(this, error);
}
requestFinished(_request) {
this.state = FormSubmissionState.stopped;
if (this.submitter) config.forms.submitter.afterSubmit(this.submitter);
this.resetSubmitterText();
clearBusyState(this.formElement);
dispatch("turbo:submit-end", {
target: this.formElement,
detail: { formSubmission: this, ...this.result }
});
this.delegate.formSubmissionFinished(this);
}
// Private
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.isSafe && this.mustRedirect
}
requestAcceptsTurboStreamResponse(request) {
return !request.isSafe || hasAttribute("data-turbo-stream", this.submitter, this.formElement)
}
get submitsWith() {
return this.submitter?.getAttribute("data-turbo-submits-with")
}
}
function buildFormData(formElement, submitter) {
const formData = new FormData(formElement);
const name = submitter?.getAttribute("name");
const value = submitter?.getAttribute("value");
if (name) {
formData.append(name, value || "");
}
return formData
}
function getCookieValue(cookieName) {
if (cookieName != null) {
const cookies = document.cookie ? document.cookie.split("; ") : [];
const cookie = cookies.find((cookie) => cookie.startsWith(cookieName));
if (cookie) {
const value = cookie.split("=").slice(1).join("=");
return value ? decodeURIComponent(value) : undefined
}
}
}
function responseSucceededWithoutRedirect(response) {
return response.statusCode == 200 && !response.redirected
}
function getFormAction(formElement, submitter) {
const formElementAction = typeof formElement.action === "string" ? formElement.action : null;
if (submitter?.hasAttribute("formaction")) {
return submitter.getAttribute("formaction") || ""
} else {
return formElement.getAttribute("action") || formElementAction || ""
}
}
function getAction(formAction, fetchMethod) {
const action = expandURL(formAction);
if (isSafe(fetchMethod)) {
action.search = "";
}
return action
}
function getMethod(formElement, submitter) {
const method = submitter?.getAttribute("formmethod") || formElement.getAttribute("method") || "";
return fetchMethodFromString(method.toLowerCase()) || FetchMethod.get
}
function getEnctype(formElement, submitter) {
return fetchEnctypeFromString(submitter?.getAttribute("formenctype") || formElement.enctype)
}
class Snapshot {
constructor(element) {
this.element = element;
}
get activeElement() {
return this.element.ownerDocument.activeElement
}
get children() {
return [...this.element.children]
}
hasAnchor(anchor) {
return this.getElementForAnchor(anchor) != null
}
getElementForAnchor(anchor) {
return anchor ? this.element.querySelector(`[id='${anchor}'], a[name='${anchor}']`) : null
}
get isConnected() {
return this.element.isConnected
}
get firstAutofocusableElement() {
return queryAutofocusableElement(this.element)
}
get permanentElements() {
return queryPermanentElementsAll(this.element)
}
getPermanentElementById(id) {
return getPermanentElementById(this.element, id)
}
getPermanentElementMapForSnapshot(snapshot) {
const permanentElementMap = {};
for (const currentPermanentElement of this.permanentElements) {
const { id } = currentPermanentElement;
const newPermanentElement = snapshot.getPermanentElementById(id);
if (newPermanentElement) {
permanentElementMap[id] = [currentPermanentElement, newPermanentElement];
}
}
return permanentElementMap
}
}
function getPermanentElementById(node, id) {
return node.querySelector(`#${id}[data-turbo-permanent]`)
}
function queryPermanentElementsAll(node) {
return node.querySelectorAll("[id][data-turbo-permanent]")
}
class FormSubmitObserver {
started = false
constructor(delegate, eventTarget) {
this.delegate = delegate;
this.eventTarget = eventTarget;
}
start() {
if (!this.started) {
this.eventTarget.addEventListener("submit", this.submitCaptured, true);
this.started = true;
}
}
stop() {
if (this.started) {
this.eventTarget.removeEventListener("submit", this.submitCaptured, true);
this.started = false;
}
}
submitCaptured = () => {
this.eventTarget.removeEventListener("submit", this.submitBubbled, false);
this.eventTarget.addEventListener("submit", this.submitBubbled, false);
}
submitBubbled = (event) => {
if (!event.defaultPrevented) {
const form = event.target instanceof HTMLFormElement ? event.target : undefined;
const submitter = event.submitter || undefined;
if (
form &&
submissionDoesNotDismissDialog(form, submitter) &&
submissionDoesNotTargetIFrame(form, submitter) &&
this.delegate.willSubmitForm(form, submitter)
) {
event.preventDefault();
event.stopImmediatePropagation();
this.delegate.formSubmitted(form, submitter);
}
}
}
}
function submissionDoesNotDismissDialog(form, submitter) {
const method = submitter?.getAttribute("formmethod") || form.getAttribute("method");
return method != "dialog"
}
function submissionDoesNotTargetIFrame(form, submitter) {
const target = submitter?.getAttribute("formtarget") || form.getAttribute("target");
return doesNotTargetIFrame(target)
}
class View {
#resolveRenderPromise = (_value) => {}
#resolveInterceptionPromise = (_value) => {}
constructor(delegate, element) {
this.delegate = delegate;
this.element = element;
}
// Scrolling
scrollToAnchor(anchor) {
const element = this.snapshot.getElementForAnchor(anchor);
if (element) {
this.scrollToElement(element);
this.focusElement(element);
} else {
this.scrollToPosition({ x: 0, y: 0 });
}
}
scrollToAnchorFromLocation(location) {
this.scrollToAnchor(getAnchor(location));
}
scrollToElement(element) {
element.scrollIntoView();
}
focusElement(element) {
if (element instanceof HTMLElement) {
if (element.hasAttribute("tabindex")) {
element.focus();
} else {
element.setAttribute("tabindex", "-1");
element.focus();
element.removeAttribute("tabindex");
}
}
}
scrollToPosition({ x, y }) {
this.scrollRoot.scrollTo(x, y);
}
scrollToTop() {
this.scrollToPosition({ x: 0, y: 0 });
}
get scrollRoot() {
return window
}
// Rendering
async render(renderer) {
const { isPreview, shouldRender, willRender, newSnapshot: snapshot } = renderer;
// A workaround to ignore tracked element mismatch reloads when performing
// a promoted Visit from a frame navigation
const shouldInvalidate = willRender;
if (shouldRender) {
try {
this.renderPromise = new Promise((resolve) => (this.#resolveRenderPromise = resolve));
this.renderer = renderer;
await this.prepareToRenderSnapshot(renderer);
const renderInterception = new Promise((resolve) => (this.#resolveInterceptionPromise = resolve));
const options = { resume: this.#resolveInterceptionPromise, render: this.renderer.renderElement, renderMethod: this.renderer.renderMethod };
const immediateRender = this.delegate.allowsImmediateRender(snapshot, options);
if (!immediateRender) await renderInterception;
await this.renderSnapshot(renderer);
this.delegate.viewRenderedSnapshot(snapshot, isPreview, this.renderer.renderMethod);
this.delegate.preloadOnLoadLinksForView(this.element);
this.finishRenderingSnapshot(renderer);
} finally {
delete this.renderer;
this.#resolveRenderPromise(undefined);
delete this.renderPromise;
}
} else if (shouldInvalidate) {
this.invalidate(renderer.reloadReason);
}
}
invalidate(reason) {
this.delegate.viewInvalidated(reason);
}
async prepareToRenderSnapshot(renderer) {
this.markAsPreview(renderer.isPreview);
await renderer.prepareToRender();
}
markAsPreview(isPreview) {
if (isPreview) {
this.element.setAttribute("data-turbo-preview", "");
} else {
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();
}
finishRenderingSnapshot(renderer) {
renderer.finishRendering();
}
}
class FrameView extends View {
missing() {
this.element.innerHTML = `<strong class="turbo-frame-error">Content missing</strong>`;
}
get snapshot() {
return new Snapshot(this.element)
}
}
class LinkInterceptor {
constructor(delegate, element) {
this.delegate = delegate;
this.element = element;
}
start() {
this.element.addEventListener("click", this.clickBubbled);
document.addEventListener("turbo:click", this.linkClicked);
document.addEventListener("turbo:before-visit", this.willVisit);
}
stop() {
this.element.removeEventListener("click", this.clickBubbled);
document.removeEventListener("turbo:click", this.linkClicked);
document.removeEventListener("turbo:before-visit", this.willVisit);
}
clickBubbled = (event) => {
if (this.clickEventIsSignificant(event)) {
this.clickEvent = event;
} else {
delete this.clickEvent;
}
}
linkClicked = (event) => {
if (this.clickEvent && this.clickEventIsSignificant(event)) {
if (this.delegate.shouldInterceptLinkClick(event.target, event.detail.url, event.detail.originalEvent)) {
this.clickEvent.preventDefault();
event.preventDefault();
this.delegate.linkClickIntercepted(event.target, event.detail.url, event.detail.originalEvent);
}
}
delete this.clickEvent;
}
willVisit = (_event) => {
delete this.clickEvent;
}
clickEventIsSignificant(event) {
const target = event.composed ? event.target?.parentElement : event.target;
const element = findLinkFromClickTarget(target) || target;
return element instanceof Element && element.closest("turbo-frame, html") == this.element
}
}
class LinkClickObserver {
started = false
constructor(delegate, eventTarget) {
this.delegate = delegate;
this.eventTarget = eventTarget;
}
start() {
if (!this.started) {
this.eventTarget.addEventListener("click", this.clickCaptured, true);
this.started = true;
}
}
stop() {
if (this.started) {
this.eventTarget.removeEventListener("click", this.clickCaptured, true);
this.started = false;
}
}
clickCaptured = () => {
this.eventTarget.removeEventListener("click", this.clickBubbled, false);
this.eventTarget.addEventListener("click", this.clickBubbled, false);
}
clickBubbled = (event) => {
if (event instanceof MouseEvent && this.clickEventIsSignificant(event)) {
const target = (event.composedPath && event.composedPath()[0]) || event.target;
const link = findLinkFromClickTarget(target);
if (link && doesNotTargetIFrame(link.target)) {
const location = getLocationForLink(link);
if (this.delegate.willFollowLinkToLocation(link, location, event)) {
event.preventDefault();
this.delegate.followedLinkToLocation(link, location);
}
}
}
}
clickEventIsSignificant(event) {
return !(
(event.target && event.target.isContentEditable) ||
event.defaultPrevented ||
event.which > 1 ||
event.altKey ||
event.ctrlKey ||
event.metaKey ||
event.shiftKey
)
}
}
class FormLinkClickObserver {
constructor(delegate, element) {
this.delegate = delegate;
this.linkInterceptor = new LinkClickObserver(this, element);
}
start() {
this.linkInterceptor.start();
}
stop() {
this.linkInterceptor.stop();
}
// Link hover observer delegate
canPrefetchRequestToLocation(link, location) {
return false
}
prefetchAndCacheRequestToLocation(link, location) {
return
}
// Link click observer delegate
willFollowLinkToLocation(link, location, originalEvent) {
return (
this.delegate.willSubmitFormLinkToLocation(link, location, originalEvent) &&
(link.hasAttribute("data-turbo-method") || link.hasAttribute("data-turbo-stream"))
)
}
followedLinkToLocation(link, location) {
const form = document.createElement("form");
const type = "hidden";
for (const [name, value] of location.searchParams) {
form.append(Object.assign(document.createElement("input"), { type, name, value }));
}
const action = Object.assign(location, { search: "" });
form.setAttribute("data-turbo", "true");
form.setAttribute("action", action.href);
form.setAttribute("hidden", "");
const method = link.getAttribute("data-turbo-method");
if (method) form.setAttribute("method", method);
const turboFrame = link.getAttribute("data-turbo-frame");
if (turboFrame) form.setAttribute("data-turbo-frame", turboFrame);
const turboAction = getVisitAction(link);
if (turboAction) form.setAttribute("data-turbo-action", turboAction);
const turboConfirm = link.getAttribute("data-turbo-confirm");
if (turboConfirm) form.setAttribute("data-turbo-confirm", turboConfirm);
const turboStream = link.hasAttribute("data-turbo-stream");
if (turboStream) form.setAttribute("data-turbo-stream", "");
this.delegate.submittedFormLinkToLocation(link, location, form);
document.body.appendChild(form);
form.addEventListener("turbo:submit-end", () => form.remove(), { once: true });
requestAnimationFrame(() => form.requestSubmit());
}
}
class Bardo {
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];
this.delegate.enteringBardo(currentPermanentElement, newPermanentElement);
this.replaceNewPermanentElementWithPlaceholder(newPermanentElement);
}
}
leave() {
for (const id in this.permanentElementMap) {
const [currentPermanentElement] = this.permanentElementMap[id];
this.replaceCurrentPermanentElementWithClone(currentPermanentElement);
this.replacePlaceholderWithPermanentElement(currentPermanentElement);
this.delegate.leavingBardo(currentPermanentElement);
}
}
replaceNewPermanentElementWithPlaceholder(permanentElement) {
const placeholder = createPlaceholderForPermanentElement(permanentElement);
permanentElement.replaceWith(placeholder);
}
replaceCurrentPermanentElementWithClone(permanentElement) {
const clone = permanentElement.cloneNode(true);
permanentElement.replaceWith(clone);
}
replacePlaceholderWithPermanentElement(permanentElement) {
const placeholder = this.getPlaceholderById(permanentElement.id);
placeholder?.replaceWith(permanentElement);
}
getPlaceholderById(id) {
return this.placeholders.find((element) => element.content == id)
}
get placeholders() {
return [...document.querySelectorAll("meta[name=turbo-permanent-placeholder][content]")]
}
}
function createPlaceholderForPermanentElement(permanentElement) {
const element = document.createElement("meta");
element.setAttribute("name", "turbo-permanent-placeholder");
element.setAttribute("content", permanentElement.id);
return element
}
class Renderer {
#activeElement = null
static renderElement(currentElement, newElement) {
// Abstract method
}
constructor(currentSnapshot, newSnapshot, isPreview, willRender = true) {
this.currentSnapshot = currentSnapshot;
this.newSnapshot = newSnapshot;
this.isPreview = isPreview;
this.willRender = willRender;
this.renderElement = this.constructor.renderElement;
this.promise = new Promise((resolve, reject) => (this.resolvingFunctions = { resolve, reject }));
}
get shouldRender() {
return true
}
get shouldAutofocus() {
return true
}
get reloadReason() {
return
}
prepareToRender() {
return
}
render() {
// Abstract method
}
finishRendering() {
if (this.resolvingFunctions) {
this.resolvingFunctions.resolve();
delete this.resolvingFunctions;
}
}
async preservingPermanentElements(callback) {
await Bardo.preservingPermanentElements(this, this.permanentElementMap, callback);
}
focusFirstAutofocusableElement() {
if (this.shouldAutofocus) {
const element = this.connectedSnapshot.firstAutofocusableElement;
if (element) {
element.focus();
}
}
}
// Bardo delegate
enteringBardo(currentPermanentElement) {
if (this.#activeElement) return
if (currentPermanentElement.contains(this.currentSnapshot.activeElement)) {
this.#activeElement = this.currentSnapshot.activeElement;
}
}
leavingBardo(currentPermanentElement) {
if (currentPermanentElement.contains(this.#activeElement) && this.#activeElement instanceof HTMLElement) {
this.#activeElement.focus();
this.#activeElement = null;
}
}
get connectedSnapshot() {
return this.newSnapshot.isConnected ? this.newSnapshot : this.currentSnapshot
}
get currentElement() {
return this.currentSnapshot.element
}
get newElement() {
return this.newSnapshot.element
}
get permanentElementMap() {
return this.currentSnapshot.getPermanentElementMapForSnapshot(this.newSnapshot)
}
get renderMethod() {
return "replace"
}
}
class FrameRenderer extends Renderer {
static renderElement(currentElement, newElement) {
const destinationRange = document.createRange();
destinationRange.selectNodeContents(currentElement);
destinationRange.deleteContents();
const frameElement = newElement;
const sourceRange = frameElement.ownerDocument?.createRange();
if (sourceRange) {
sourceRange.selectNodeContents(frameElement);
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
}
async render() {
await nextRepaint();
this.preservingPermanentElements(() => {
this.loadFrameElement();
});
this.scrollFrameIntoView();
await nextRepaint();
this.focusFirstAutofocusableElement();
await nextRepaint();
this.activateScriptElements();
}
loadFrameElement() {
this.delegate.willRenderFrame(this.currentElement, this.newElement);
this.renderElement(this.currentElement, this.newElement);
}
scrollFrameIntoView() {
if (this.currentElement.autoscroll || this.newElement.autoscroll) {
const element = this.currentElement.firstElementChild;
const block = readScrollLogicalPosition(this.currentElement.getAttribute("data-autoscroll-block"), "end");
const behavior = readScrollBehavior(this.currentElement.getAttribute("data-autoscroll-behavior"), "auto");
if (element) {
element.scrollIntoView({ block, behavior });
return true
}
}
return false
}
activateScriptElements() {
for (const inertScriptElement of this.newScriptElements) {
const activatedScriptElement = activateScriptElement(inertScriptElement);
inertScriptElement.replaceWith(activatedScriptElement);
}
}
get newScriptElements() {
return this.currentElement.querySelectorAll("script")
}
}
function readScrollLogicalPosition(value, defaultValue) {
if (value == "end" || value == "start" || value == "center" || value == "nearest") {
return value
} else {
return defaultValue
}
}
function readScrollBehavior(value, defaultValue) {
if (value == "auto" || value == "smooth") {
return value
} else {
return defaultValue
}
}
/**
* @typedef {object} ConfigHead
*
* @property {'merge' | 'append' | 'morph' | 'none'} [style]
* @property {boolean} [block]
* @property {boolean} [ignore]
* @property {function(Element): boolean} [shouldPreserve]
* @property {function(Element): boolean} [shouldReAppend]
* @property {function(Element): boolean} [shouldRemove]
* @property {function(Element, {added: Node[], kept: Element[], removed: Element[]}): void} [afterHeadMorphed]
*/
/**
* @typedef {object} ConfigCallbacks
*
* @property {function(Node): boolean} [beforeNodeAdded]
* @property {function(Node): void} [afterNodeAdded]
* @property {function(Element, Node): boolean} [beforeNodeMorphed]
* @property {function(Element, Node): void} [afterNodeMorphed]
* @property {function(Element): boolean} [beforeNodeRemoved]
* @property {function(Element): void} [afterNodeRemoved]
* @property {function(string, Element, "update" | "remove"): boolean} [beforeAttributeUpdated]
*/
/**
* @typedef {object} Config
*
* @property {'outerHTML' | 'innerHTML'} [morphStyle]
* @property {boolean} [ignoreActive]
* @property {boolean} [ignoreActiveValue]
* @property {boolean} [restoreFocus]
* @property {ConfigCallbacks} [callbacks]
* @property {ConfigHead} [head]
*/
/**
* @typedef {function} NoOp
*
* @returns {void}
*/
/**
* @typedef {object} ConfigHeadInternal
*
* @property {'merge' | 'append' | 'morph' | 'none'} style
* @property {boolean} [block]
* @property {boolean} [ignore]
* @property {(function(Element): boolean) | NoOp} shouldPreserve
* @property {(function(Element): boolean) | NoOp} shouldReAppend
* @property {(function(Element): boolean) | NoOp} shouldRemove
* @property {(function(Element, {added: Node[], kept: Element[], removed: Element[]}): void) | NoOp} afterHeadMorphed
*/
/**
* @typedef {object} ConfigCallbacksInternal
*
* @property {(function(Node): boolean) | NoOp} beforeNodeAdded
* @property {(function(Node): void) | NoOp} afterNodeAdded
* @property {(function(Node, Node): boolean) | NoOp} beforeNodeMorphed
* @property {(function(Node, Node): void) | NoOp} afterNodeMorphed
* @property {(function(Node): boolean) | NoOp} beforeNodeRemoved
* @property {(function(Node): void) | NoOp} afterNodeRemoved
* @property {(function(string, Element, "update" | "remove"): boolean) | NoOp} beforeAttributeUpdated
*/
/**
* @typedef {object} ConfigInternal
*
* @property {'outerHTML' | 'innerHTML'} morphStyle
* @property {boolean} [ignoreActive]
* @property {boolean} [ignoreActiveValue]
* @property {boolean} [restoreFocus]
* @property {ConfigCallbacksInternal} callbacks
* @property {ConfigHeadInternal} head
*/
/**
* @typedef {Object} IdSets
* @property {Set<string>} persistentIds
* @property {Map<Node, Set<string>>} idMap
*/
/**
* @typedef {Function} Morph
*
* @param {Element | Document} oldNode
* @param {Element | Node | HTMLCollection | Node[] | string | null} newContent
* @param {Config} [config]
* @returns {undefined | Node[]}
*/
// base IIFE to define idiomorph
/**
*
* @type {{defaults: ConfigInternal, morph: Morph}}
*/
var Idiomorph = (function () {
/**
* @typedef {object} MorphContext
*
* @property {Element} target
* @property {Element} newContent
* @property {ConfigInternal} config
* @property {ConfigInternal['morphStyle']} morphStyle
* @property {ConfigInternal['ignoreActive']} ignoreActive
* @property {ConfigInternal['ignoreActiveValue']} ignoreActiveValue
* @property {ConfigInternal['restoreFocus']} restoreFocus
* @property {Map<Node, Set<string>>} idMap
* @property {Set<string>} persistentIds
* @property {ConfigInternal['callbacks']} callbacks
* @property {ConfigInternal['head']} head
* @property {HTMLDivElement} pantry
*/
//=============================================================================
// AND NOW IT BEGINS...
//=============================================================================
const noOp = () => {};
/**
* Default configuration values, updatable by users now
* @type {ConfigInternal}
*/
const defaults = {
morphStyle: "outerHTML",
callbacks: {
beforeNodeAdded: noOp,
afterNodeAdded: noOp,
beforeNodeMorphed: noOp,
afterNodeMorphed: noOp,
beforeNodeRemoved: noOp,
afterNodeRemoved: noOp,
beforeAttributeUpdated: noOp,
},
head: {
style: "merge",
shouldPreserve: (elt) => elt.getAttribute("im-preserve") === "true",
shouldReAppend: (elt) => elt.getAttribute("im-re-append") === "true",
shouldRemove: noOp,
afterHeadMorphed: noOp,
},
restoreFocus: true,
};
/**
* Core idiomorph function for morphing one DOM tree to another
*
* @param {Element | Document} oldNode
* @param {Element | Node | HTMLCollection | Node[] | string | null} newContent
* @param {Config} [config]
* @returns {Promise<Node[]> | Node[]}
*/
function morph(oldNode, newContent, config = {}) {
oldNode = normalizeElement(oldNode);
const newNode = normalizeParent(newContent);
const ctx = createMorphContext(oldNode, newNode, config);
const morphedNodes = saveAndRestoreFocus(ctx, () => {
return withHeadBlocking(
ctx,
oldNode,
newNode,
/** @param {MorphContext} ctx */ (ctx) => {
if (ctx.morphStyle === "innerHTML") {
morphChildren(ctx, oldNode, newNode);
return Array.from(oldNode.childNodes);
} else {
return morphOuterHTML(ctx, oldNode, newNode);
}
},
);
});
ctx.pantry.remove();
return morphedNodes;
}
/**
* Morph just the outerHTML of the oldNode to the newContent
* We have to be careful because the oldNode could have siblings which need to be untouched
* @param {MorphContext} ctx
* @param {Element} oldNode
* @param {Element} newNode
* @returns {Node[]}
*/
function morphOuterHTML(ctx, oldNode, newNode) {
const oldParent = normalizeParent(oldNode);
// basis for calulating which nodes were morphed
// since there may be unmorphed sibling nodes
let childNodes = Array.from(oldParent.childNodes);
const index = childNodes.indexOf(oldNode);
// how many elements are to the right of the oldNode
const rightMargin = childNodes.length - (index + 1);
morphChildren(
ctx,
oldParent,
newNode,
// these two optional params are the secret sauce
oldNode, // start point for iteration
oldNode.nextSibling, // end point for iteration
);
// return just the morphed nodes
childNodes = Array.from(oldParent.childNodes);
return childNodes.slice(index, childNodes.length - rightMargin);
}
/**
* @param {MorphContext} ctx
* @param {Function} fn
* @returns {Promise<Node[]> | Node[]}
*/
function saveAndRestoreFocus(ctx, fn) {
if (!ctx.config.restoreFocus) return fn();
let activeElement =
/** @type {HTMLInputElement|HTMLTextAreaElement|null} */ (
document.activeElement
);
// don't bother if the active element is not an input or textarea
if (
!(
activeElement instanceof HTMLInputElement ||
activeElement instanceof HTMLTextAreaElement
)
) {
return fn();
}
const { id: activeElementId, selectionStart, selectionEnd } = activeElement;
const results = fn();
if (activeElementId && activeElementId !== document.activeElement?.id) {
activeElement = ctx.target.querySelector(`#${activeElementId}`);
activeElement?.focus();
}
if (activeElement && !activeElement.selectionEnd && selectionEnd) {
activeElement.setSelectionRange(selectionStart, selectionEnd);
}
return results;
}
const morphChildren = (function () {
/**
* This is the core algorithm for matching up children. The idea is to use id sets to try to match up
* nodes as faithfully as possible. We greedily match, which allows us to keep the algorithm fast, but
* by using id sets, we are able to better match up with content deeper in the DOM.
*
* Basic algorithm:
* - for each node in the new content:
* - search self and siblings for an id set match, falling back to a soft match
* - if match found
* - remove any nodes up to the match:
* - pantry persistent nodes
* - delete the rest
* - morph the match
* - elsif no match found, and node is persistent
* - find its match by querying the old root (future) and pantry (past)
* - move it and its children here
* - morph it
* - else
* - create a new node from scratch as a last result
*
* @param {MorphContext} ctx the merge context
* @param {Element} oldParent the old content that we are merging the new content into
* @param {Element} newParent the parent element of the new content
* @param {Node|null} [insertionPoint] the point in the DOM we start morphing at (defaults to first child)
* @param {Node|null} [endPoint] the point in the DOM we stop morphing at (defaults to after last child)
*/
function morphChildren(
ctx,
oldParent,
newParent,
insertionPoint = null,
endPoint = null,
) {
// normalize
if (
oldParent instanceof HTMLTemplateElement &&
newParent instanceof HTMLTemplateElement
) {
// @ts-ignore we can pretend the DocumentFragment is an Element
oldParent = oldParent.content;
// @ts-ignore ditto
newParent = newParent.content;
}
insertionPoint ||= oldParent.firstChild;
// run through all the new content
for (const newChild of newParent.childNodes) {
// once we reach the end of the old parent content skip to the end and insert the rest
if (insertionPoint && insertionPoint != endPoint) {
const bestMatch = findBestMatch(
ctx,
newChild,
insertionPoint,
endPoint,
);
if (bestMatch) {
// if the node to morph is not at the insertion point then remove/move up to it
if (bestMatch !== insertionPoint) {
removeNodesBetween(ctx, insertionPoint, bestMatch);
}
morphNode(bestMatch, newChild, ctx);
insertionPoint = bestMatch.nextSibling;
continue;
}
}
// if the matching node is elsewhere in the original content
if (newChild instanceof Element && ctx.persistentIds.has(newChild.id)) {
// move it and all its children here and morph
const movedChild = moveBeforeById(
oldParent,
newChild.id,
insertionPoint,
ctx,
);
morphNode(movedChild, newChild, ctx);
insertionPoint = movedChild.nextSibling;
continue;
}
// last resort: insert the new node from scratch
const insertedNode = createNode(
oldParent,
newChild,
insertionPoint,
ctx,
);
// could be null if beforeNodeAdded prevented insertion
if (insertedNode) {
insertionPoint = insertedNode.nextSibling;
}
}
// remove any remaining old nodes that didn't match up with new content
while (insertionPoint && insertionPoint != endPoint) {
const tempNode = insertionPoint;
insertionPoint = insertionPoint.nextSibling;
removeNode(ctx, tempNode);
}
}
/**
* This performs the action of inserting a new node while handling situations where the node contains
* elements with persistent ids and possible state info we can still preserve by moving in and then morphing
*
* @param {Element} oldParent
* @param {Node} newChild
* @param {Node|null} insertionPoint
* @param {MorphContext} ctx
* @returns {Node|null}
*/
function createNode(oldParent, newChild, insertionPoint, ctx) {
if (ctx.callbacks.beforeNodeAdded(newChild) === false) return null;
if (ctx.idMap.has(newChild)) {
// node has children with ids with possible state so create a dummy elt of same type and apply full morph algorithm
const newEmptyChild = document.createElement(
/** @type {Element} */ (newChild).tagName,
);
oldParent.insertBefore(newEmptyChild, insertionPoint);
morphNode(newEmptyChild, newChild, ctx);
ctx.callbacks.afterNodeAdded(newEmptyChild);
return newEmptyChild;
} else {
// optimisation: no id state to preserve so we can just insert a clone of the newChild and its descendants
const newClonedChild = document.importNode(newChild, true); // importNode to not mutate newParent
oldParent.insertBefore(newClonedChild, insertionPoint);
ctx.callbacks.afterNodeAdded(newClonedChild);
return newClonedChild;
}
}
//=============================================================================
// Matching Functions
//=============================================================================
const findBestMatch = (function () {
/**
* Scans forward from the startPoint to the endPoint looking for a match
* for the node. It looks for an id set match first, then a soft match.
* We abort softmatching if we find two future soft matches, to reduce churn.
* @param {Node} node
* @param {MorphContext} ctx
* @param {Node | null} startPoint
* @param {Node | null} endPoint
* @returns {Node | null}
*/
function findBestMatch(ctx, node, startPoint, endPoint) {
let softMatch = null;
let nextSibling = node.nextSibling;
let siblingSoftMatchCount = 0;
let cursor = startPoint;
while (cursor && cursor != endPoint) {
// soft matching is a prerequisite for id set matching
if (isSoftMatch(cursor, node)) {
if (isIdSetMatch(ctx, cursor, node)) {
return cursor; // found an id set match, we're done!
}
// we haven't yet saved a soft match fallback
if (softMatch === null) {
// the current soft match will hard match something else in the future, leave it
if (!ctx.idMap.has(cursor)) {
// save this as the fallback if we get through the loop without finding a hard match
softMatch = cursor;
}
}
}
if (
softMatch === null &&
nextSibling &&
isSoftMatch(cursor, nextSibling)
) {
// The next new node has a soft match with this node, so
// increment the count of future soft matches
siblingSoftMatchCount++;
nextSibling = nextSibling.nextSibling;
// If there are two future soft matches, block soft matching for this node to allow
// future siblings to soft match. This is to reduce churn in the DOM when an element
// is prepended.
if (siblingSoftMatchCount >= 2) {
softMatch = undefined;
}
}
// if the current node contains active element, stop looking for better future matches,
// because if one is found, this node will be moved to the pantry, reparenting it and thus losing focus
if (cursor.contains(document.activeElement)) break;
cursor = cursor.nextSibling;
}
return softMatch || null;
}
/**
*
* @param {MorphContext} ctx
* @param {Node} oldNode
* @param {Node} newNode
* @returns {boolean}
*/
function isIdSetMatch(ctx, oldNode, newNode) {
let oldSet = ctx.idMap.get(oldNode);
let newSet = ctx.idMap.get(newNode);
if (!newSet || !oldSet) return false;
for (const id of oldSet) {
// a potential match is an id in the new and old nodes that
// has not already been merged into the DOM
// But the newNode content we call this on has not been
// merged yet and we don't allow duplicate IDs so it is simple
if (newSet.has(id)) {
return true;
}
}
return false;
}
/**
*
* @param {Node} oldNode
* @param {Node} newNode
* @returns {boolean}
*/
function isSoftMatch(oldNode, newNode) {
// ok to cast: if one is not element, `id` and `tagName` will be undefined and we'll just compare that.
const oldElt = /** @type {Element} */ (oldNode);
const newElt = /** @type {Element} */ (newNode);
return (
oldElt.nodeType === newElt.nodeType &&
oldElt.tagName === newElt.tagName &&
// If oldElt has an `id` with possible state and it doesn't match newElt.id then avoid morphing.
// We'll still match an anonymous node with an IDed newElt, though, because if it got this far,
// its not persistent, and new nodes can't have any hidden state.
(!oldElt.id || oldElt.id === newElt.id)
);
}
return findBestMatch;
})();
//=============================================================================
// DOM Manipulation Functions
//=============================================================================
/**
* Gets rid of an unwanted DOM node; strategy depends on nature of its reuse:
* - Persistent nodes will be moved to the pantry for later reuse
* - Other nodes will have their hooks called, and then are removed
* @param {MorphContext} ctx
* @param {Node} node
*/
function removeNode(ctx, node) {
// are we going to id set match this later?
if (ctx.idMap.has(node)) {
// skip callbacks and move to pantry
moveBefore(ctx.pantry, node, null);
} else {
// remove for realsies
if (ctx.callbacks.beforeNodeRemoved(node) === false) return;
node.parentNode?.removeChild(node);
ctx.callbacks.afterNodeRemoved(node);
}
}
/**
* Remove nodes between the start and end nodes
* @param {MorphContext} ctx
* @param {Node} startInclusive
* @param {Node} endExclusive
* @returns {Node|null}
*/
function removeNodesBetween(ctx, startInclusive, endExclusive) {
/** @type {Node | null} */
let cursor = startInclusive;
// remove nodes until the endExclusive node
while (cursor && cursor !== endExclusive) {
let tempNode = /** @type {Node} */ (cursor);
cursor = cursor.nextSibling;
removeNode(ctx, tempNode);
}
return cursor;
}
/**
* Search for an element by id within the document and pantry, and move it using moveBefore.
*
* @param {Element} parentNode - The parent node to which the element will be moved.
* @param {string} id - The ID of the element to be moved.
* @param {Node | null} after - The reference node to insert the element before.
* If `null`, the element is appended as the last child.
* @param {MorphContext} ctx
* @returns {Element} The found element
*/
function moveBeforeById(parentNode, id, after, ctx) {
const target =
/** @type {Element} - will always be found */
(
ctx.target.querySelector(`#${id}`) ||
ctx.pantry.querySelector(`#${id}`)
);
removeElementFromAncestorsIdMaps(target, ctx);
moveBefore(parentNode, target, after);
return target;
}
/**
* Removes an element from its ancestors' id maps. This is needed when an element is moved from the
* "future" via `moveBeforeId`. Otherwise, its erstwhile ancestors could be mistakenly moved to the
* pantry rather than being deleted, preventing their removal hooks from being called.
*
* @param {Element} element - element to remove from its ancestors' id maps
* @param {MorphContext} ctx
*/
function removeElementFromAncestorsIdMaps(element, ctx) {
const id = element.id;
/** @ts-ignore - safe to loop in this way **/
while ((element = element.parentNode)) {
let idSet = ctx.idMap.get(element);
if (idSet) {
idSet.delete(id);
if (!idSet.size) {
ctx.idMap.delete(element);
}
}
}
}
/**
* Moves an element before another element within the same parent.
* Uses the proposed `moveBefore` API if available (and working), otherwise falls back to `insertBefore`.
* This is essentialy a forward-compat wrapper.
*
* @param {Element} parentNode - The parent node containing the after element.
* @param {Node} element - The element to be moved.
* @param {Node | null} after - The reference node to insert `element` before.
* If `null`, `element` is appended as the last child.
*/
function moveBefore(parentNode, element, after) {
// @ts-ignore - use proposed moveBefore feature
if (parentNode.moveBefore) {
try {
// @ts-ignore - use proposed moveBefore feature
parentNode.moveBefore(element, after);
} catch (e) {
// fall back to insertBefore as some browsers may fail on moveBefore when trying to move Dom disconnected nodes to pantry
parentNode.insertBefore(element, after);
}
} else {
parentNode.insertBefore(element, after);
}
}
return morphChildren;
})();
//=============================================================================
// Single Node Morphing Code
//=============================================================================
const morphNode = (function () {
/**
* @param {Node} oldNode root node to merge content into
* @param {Node} newContent new content to merge
* @param {MorphContext} ctx the merge context
* @returns {Node | null} the element that ended up in the DOM
*/
function morphNode(oldNode, newContent, ctx) {
if (ctx.ignoreActive && oldNode === document.activeElement) {
// don't morph focused element
return null;
}
if (ctx.callbacks.beforeNodeMorphed(oldNode, newContent) === false) {
return oldNode;
}
if (oldNode instanceof HTMLHeadElement && ctx.head.ignore) ; else if (
oldNode instanceof HTMLHeadElement &&
ctx.head.style !== "morph"
) {
// ok to cast: if newContent wasn't also a <head>, it would've got caught in the `!isSoftMatch` branch above
handleHeadElement(
oldNode,
/** @type {HTMLHeadElement} */ (newContent),
ctx,
);
} else {
morphAttributes(oldNode, newContent, ctx);
if (!ignoreValueOfActiveElement(oldNode, ctx)) {
// @ts-ignore newContent can be a node here because .firstChild will be null
morphChildren(ctx, oldNode, newContent);
}
}
ctx.callbacks.afterNodeMorphed(oldNode, newContent);
return oldNode;
}
/**
* syncs the oldNode to the newNode, copying over all attributes and
* inner element state from the newNode to the oldNode
*
* @param {Node} oldNode the node to copy attributes & state to
* @param {Node} newNode the node to copy attributes & state from
* @param {MorphContext} ctx the merge context
*/
function morphAttributes(oldNode, newNode, ctx) {
let type = newNode.nodeType;
// if is an element type, sync the attributes from the
// new node into the new node
if (type === 1 /* element type */) {
const oldElt = /** @type {Element} */ (oldNode);
const newElt = /** @type {Element} */ (newNode);
const oldAttributes = oldElt.attributes;
const newAttributes = newElt.attributes;
for (const newAttribute of newAttributes) {
if (ignoreAttribute(newAttribute.name, oldElt, "update", ctx)) {
continue;
}
if (oldElt.getAttribute(newAttribute.name) !== newAttribute.value) {
oldElt.setAttribute(newAttribute.name, newAttribute.value);
}
}
// iterate backwards to avoid skipping over items when a delete occurs
for (let i = oldAttributes.length - 1; 0 <= i; i--) {
const oldAttribute = oldAttributes[i];
// toAttributes is a live NamedNodeMap, so iteration+mutation is unsafe
// e.g. custom element attribute callbacks can remove other attributes
if (!oldAttribute) continue;
if (!newElt.hasAttribute(oldAttribute.name)) {
if (ignoreAttribute(oldAttribute.name, oldElt, "remove", ctx)) {
continue;
}
oldElt.removeAttribute(oldAttribute.name);
}
}
if (!ignoreValueOfActiveElement(oldElt, ctx)) {
syncInputValue(oldElt, newElt, ctx);
}
}
// sync text nodes
if (type === 8 /* comment */ || type === 3 /* text */) {
if (oldNode.nodeValue !== newNode.nodeValue) {
oldNode.nodeValue = newNode.nodeValue;
}
}
}
/**
* NB: many bothans died to bring us information:
*
* https://github.com/patrick-steele-idem/morphdom/blob/master/src/specialElHandlers.js
* https://github.com/choojs/nanomorph/blob/master/lib/morph.jsL113
*
* @param {Element} oldElement the element to sync the input value to
* @param {Element} newElement the element to sync the input value from
* @param {MorphContext} ctx the merge context
*/
function syncInputValue(oldElement, newElement, ctx) {
if (
oldElement instanceof HTMLInputElement &&
newElement instanceof HTMLInputElement &&
newElement.type !== "file"
) {
let newValue = newElement.value;
let oldValue = oldElement.value;
// sync boolean attributes
syncBooleanAttribute(oldElement, newElement, "checked", ctx);
syncBooleanAttribute(oldElement, newElement, "disabled", ctx);
if (!newElement.hasAttribute("value")) {
if (!ignoreAttribute("value", oldElement, "remove", ctx)) {
oldElement.value = "";
oldElement.removeAttribute("value");
}
} else if (oldValue !== newValue) {
if (!ignoreAttribute("value", oldElement, "update", ctx)) {
oldElement.setAttribute("value", newValue);
oldElement.value = newValue;
}
}
// TODO: QUESTION(1cg): this used to only check `newElement` unlike the other branches -- why?
// did I break something?
} else if (
oldElement instanceof HTMLOptionElement &&
newElement instanceof HTMLOptionElement
) {
syncBooleanAttribute(oldElement, newElement, "selected", ctx);
} else if (
oldElement instanceof HTMLTextAreaElement &&
newElement instanceof HTMLTextAreaElement
) {
let newValue = newElement.value;
let oldValue = oldElement.value;
if (ignoreAttribute("value", oldElement, "update", ctx)) {
return;
}
if (newValue !== oldValue) {
oldElement.value = newValue;
}
if (
oldElement.firstChild &&
oldElement.firstChild.nodeValue !== newValue
) {
oldElement.firstChild.nodeValue = newValue;
}
}
}
/**
* @param {Element} oldElement element to write the value to
* @param {Element} newElement element to read the value from
* @param {string} attributeName the attribute name
* @param {MorphContext} ctx the merge context
*/
function syncBooleanAttribute(oldElement, newElement, attributeName, ctx) {
// @ts-ignore this function is only used on boolean attrs that are reflected as dom properties
const newLiveValue = newElement[attributeName],
// @ts-ignore ditto
oldLiveValue = oldElement[attributeName];
if (newLiveValue !== oldLiveValue) {
const ignoreUpdate = ignoreAttribute(
attributeName,
oldElement,
"update",
ctx,
);
if (!ignoreUpdate) {
// update attribute's associated DOM property
// @ts-ignore this function is only used on boolean attrs that are reflected as dom properties
oldElement[attributeName] = newElement[attributeName];
}
if (newLiveValue) {
if (!ignoreUpdate) {
// https://developer.mozilla.org/en-US/docs/Glossary/Boolean/HTML
// this is the correct way to set a boolean attribute to "true"
oldElement.setAttribute(attributeName, "");
}
} else {
if (!ignoreAttribute(attributeName, oldElement, "remove", ctx)) {
oldElement.removeAttribute(attributeName);
}
}
}
}
/**
* @param {string} attr the attribute to be mutated
* @param {Element} element the element that is going to be updated
* @param {"update" | "remove"} updateType
* @param {MorphContext} ctx the merge context
* @returns {boolean} true if the attribute should be ignored, false otherwise
*/
function ignoreAttribute(attr, element, updateType, ctx) {
if (
attr === "value" &&
ctx.ignoreActiveValue &&
element === document.activeElement
) {
return true;
}
return (
ctx.callbacks.beforeAttributeUpdated(attr, element, updateType) ===
false
);
}
/**
* @param {Node} possibleActiveElement
* @param {MorphContext} ctx
* @returns {boolean}
*/
function ignoreValueOfActiveElement(possibleActiveElement, ctx) {
return (
!!ctx.ignoreActiveValue &&
possibleActiveElement === document.activeElement &&
possibleActiveElement !== document.body
);
}
return morphNode;
})();
//=============================================================================
// Head Management Functions
//=============================================================================
/**
* @param {MorphContext} ctx
* @param {Element} oldNode
* @param {Element} newNode
* @param {function} callback
* @returns {Node[] | Promise<Node[]>}
*/
function withHeadBlocking(ctx, oldNode, newNode, callback) {
if (ctx.head.block) {
const oldHead = oldNode.querySelector("head");
const newHead = newNode.querySelector("head");
if (oldHead && newHead) {
const promises = handleHeadElement(oldHead, newHead, ctx);
// when head promises resolve, proceed ignoring the head tag
return Promise.all(promises).then(() => {
const newCtx = Object.assign(ctx, {
head: {
block: false,
ignore: true,
},
});
return callback(newCtx);
});
}
}
// just proceed if we not head blocking
return callback(ctx);
}
/**
* The HEAD tag can be handled specially, either w/ a 'merge' or 'append' style
*
* @param {Element} oldHead
* @param {Element} newHead
* @param {MorphContext} ctx
* @returns {Promise<void>[]}
*/
function handleHeadElement(oldHead, newHead, ctx) {
let added = [];
let removed = [];
let preserved = [];
let nodesToAppend = [];
// put all new head elements into a Map, by their outerHTML
let srcToNewHeadNodes = new Map();
for (const newHeadChild of newHead.children) {
srcToNewHeadNodes.set(newHeadChild.outerHTML, newHeadChild);
}
// for each elt in the current head
for (const currentHeadElt of oldHead.children) {
// If the current head element is in the map
let inNewContent = srcToNewHeadNodes.has(currentHeadElt.outerHTML);
let isReAppended = ctx.head.shouldReAppend(currentHeadElt);
let isPreserved = ctx.head.shouldPreserve(currentHeadElt);
if (inNewContent || isPreserved) {
if (isReAppended) {
// remove the current version and let the new version replace it and re-execute
removed.push(currentHeadElt);
} else {
// this element already exists and should not be re-appended, so remove it from
// the new content map, preserving it in the DOM
srcToNewHeadNodes.delete(currentHeadElt.outerHTML);
preserved.push(currentHeadElt);
}
} else {
if (ctx.head.style === "append") {
// we are appending and this existing element is not new content
// so if and only if it is marked for re-append do we do anything
if (isReAppended) {
removed.push(currentHeadElt);
nodesToAppend.push(currentHeadElt);
}
} else {
// if this is a merge, we remove this content since it is not in the new head
if (ctx.head.shouldRemove(currentHeadElt) !== false) {
removed.push(currentHeadElt);
}
}
}
}
// Push the remaining new head elements in the Map into the
// nodes to append to the head tag
nodesToAppend.push(...srcToNewHeadNodes.values());
let promises = [];
for (const newNode of nodesToAppend) {
// TODO: This could theoretically be null, based on type
let newElt = /** @type {ChildNode} */ (
document.createRange().createContextualFragment(newNode.outerHTML)
.firstChild
);
if (ctx.callbacks.beforeNodeAdded(newElt) !== false) {
if (
("href" in newElt && newElt.href) ||
("src" in newElt && newElt.src)
) {
/** @type {(result?: any) => void} */ let resolve;
let promise = new Promise(function (_resolve) {
resolve = _resolve;
});
newElt.addEventListener("load", function () {
resolve();
});
promises.push(promise);
}
oldHead.appendChild(newElt);
ctx.callbacks.afterNodeAdded(newElt);
added.push(newElt);
}
}
// remove all removed elements, after we have appended the new elements to avoid
// additional network requests for things like style sheets
for (const removedElement of removed) {
if (ctx.callbacks.beforeNodeRemoved(removedElement) !== false) {
oldHead.removeChild(removedElement);
ctx.callbacks.afterNodeRemoved(removedElement);
}
}
ctx.head.afterHeadMorphed(oldHead, {
added: added,
kept: preserved,
removed: removed,
});
return promises;
}
//=============================================================================
// Create Morph Context Functions
//=============================================================================
const createMorphContext = (function () {
/**
*
* @param {Element} oldNode
* @param {Element} newContent
* @param {Config} config
* @returns {MorphContext}
*/
function createMorphContext(oldNode, newContent, config) {
const { persistentIds, idMap } = createIdMaps(oldNode, newContent);
const mergedConfig = mergeDefaults(config);
const morphStyle = mergedConfig.morphStyle || "outerHTML";
if (!["innerHTML", "outerHTML"].includes(morphStyle)) {
throw `Do not understand how to morph style ${morphStyle}`;
}
return {
target: oldNode,
newContent: newContent,
config: mergedConfig,
morphStyle: morphStyle,
ignoreActive: mergedConfig.ignoreActive,
ignoreActiveValue: mergedConfig.ignoreActiveValue,
restoreFocus: mergedConfig.restoreFocus,
idMap: idMap,
persistentIds: persistentIds,
pantry: createPantry(),
callbacks: mergedConfig.callbacks,
head: mergedConfig.head,
};
}
/**
* Deep merges the config object and the Idiomorph.defaults object to
* produce a final configuration object
* @param {Config} config
* @returns {ConfigInternal}
*/
function mergeDefaults(config) {
let finalConfig = Object.assign({}, defaults);
// copy top level stuff into final config
Object.assign(finalConfig, config);
// copy callbacks into final config (do this to deep merge the callbacks)
finalConfig.callbacks = Object.assign(
{},
defaults.callbacks,
config.callbacks,
);
// copy head config into final config (do this to deep merge the head)
finalConfig.head = Object.assign({}, defaults.head, config.head);
return finalConfig;
}
/**
* @returns {HTMLDivElement}
*/
function createPantry() {
const pantry = document.createElement("div");
pantry.hidden = true;
document.body.insertAdjacentElement("afterend", pantry);
return pantry;
}
/**
* Returns all elements with an ID contained within the root element and its descendants
*
* @param {Element} root
* @returns {Element[]}
*/
function findIdElements(root) {
let elements = Array.from(root.querySelectorAll("[id]"));
if (root.id) {
elements.push(root);
}
return elements;
}
/**
* A bottom-up algorithm that populates a map of Element -> IdSet.
* The idSet for a given element is the set of all IDs contained within its subtree.
* As an optimzation, we filter these IDs through the given list of persistent IDs,
* because we don't need to bother considering IDed elements that won't be in the new content.
*
* @param {Map<Node, Set<string>>} idMap
* @param {Set<string>} persistentIds
* @param {Element} root
* @param {Element[]} elements
*/
function populateIdMapWithTree(idMap, persistentIds, root, elements) {
for (const elt of elements) {
if (persistentIds.has(elt.id)) {
/** @type {Element|null} */
let current = elt;
// walk up the parent hierarchy of that element, adding the id
// of element to the parent's id set
while (current) {
let idSet = idMap.get(current);
// if the id set doesn't exist, create it and insert it in the map
if (idSet == null) {
idSet = new Set();
idMap.set(current, idSet);
}
idSet.add(elt.id);
if (current === root) break;
current = current.parentElement;
}
}
}
}
/**
* This function computes a map of nodes to all ids contained within that node (inclusive of the
* node). This map can be used to ask if two nodes have intersecting sets of ids, which allows
* for a looser definition of "matching" than tradition id matching, and allows child nodes
* to contribute to a parent nodes matching.
*
* @param {Element} oldContent the old content that will be morphed
* @param {Element} newContent the new content to morph to
* @returns {IdSets}
*/
function createIdMaps(oldContent, newContent) {
const oldIdElements = findIdElements(oldContent);
const newIdElements = findIdElements(newContent);
const persistentIds = createPersistentIds(oldIdElements, newIdElements);
/** @type {Map<Node, Set<string>>} */
let idMap = new Map();
populateIdMapWithTree(idMap, persistentIds, oldContent, oldIdElements);
/** @ts-ignore - if newContent is a duck-typed parent, pass its single child node as the root to halt upwards iteration */
const newRoot = newContent.__idiomorphRoot || newContent;
populateIdMapWithTree(idMap, persistentIds, newRoot, newIdElements);
return { persistentIds, idMap };
}
/**
* This function computes the set of ids that persist between the two contents excluding duplicates
*
* @param {Element[]} oldIdElements
* @param {Element[]} newIdElements
* @returns {Set<string>}
*/
function createPersistentIds(oldIdElements, newIdElements) {
let duplicateIds = new Set();
/** @type {Map<string, string>} */
let oldIdTagNameMap = new Map();
for (const { id, tagName } of oldIdElements) {
if (oldIdTagNameMap.has(id)) {
duplicateIds.add(id);
} else {
oldIdTagNameMap.set(id, tagName);
}
}
let persistentIds = new Set();
for (const { id, tagName } of newIdElements) {
if (persistentIds.has(id)) {
duplicateIds.add(id);
} else if (oldIdTagNameMap.get(id) === tagName) {
persistentIds.add(id);
}
// skip if tag types mismatch because its not possible to morph one tag into another
}
for (const id of duplicateIds) {
persistentIds.delete(id);
}
return persistentIds;
}
return createMorphContext;
})();
//=============================================================================
// HTML Normalization Functions
//=============================================================================
const { normalizeElement, normalizeParent } = (function () {
/** @type {WeakSet<Node>} */
const generatedByIdiomorph = new WeakSet();
/**
*
* @param {Element | Document} content
* @returns {Element}
*/
function normalizeElement(content) {
if (content instanceof Document) {
return content.documentElement;
} else {
return content;
}
}
/**
*
* @param {null | string | Node | HTMLCollection | Node[] | Document & {generatedByIdiomorph:boolean}} newContent
* @returns {Element}
*/
function normalizeParent(newContent) {
if (newContent == null) {
return document.createElement("div"); // dummy parent element
} else if (typeof newContent === "string") {
return normalizeParent(parseContent(newContent));
} else if (
generatedByIdiomorph.has(/** @type {Element} */ (newContent))
) {
// the template tag created by idiomorph parsing can serve as a dummy parent
return /** @type {Element} */ (newContent);
} else if (newContent instanceof Node) {
if (newContent.parentNode) {
// we can't use the parent directly because newContent may have siblings
// that we don't want in the morph, and reparenting might be expensive (TODO is it?),
// so we create a duck-typed parent node instead.
return createDuckTypedParent(newContent);
} else {
// a single node is added as a child to a dummy parent
const dummyParent = document.createElement("div");
dummyParent.append(newContent);
return dummyParent;
}
} else {
// all nodes in the array or HTMLElement collection are consolidated under
// a single dummy parent element
const dummyParent = document.createElement("div");
for (const elt of [...newContent]) {
dummyParent.append(elt);
}
return dummyParent;
}
}
/**
* Creates a fake duck-typed parent element to wrap a single node, without actually reparenting it.
* "If it walks like a duck, and quacks like a duck, then it must be a duck!" -- James Whitcomb Riley (1849–1916)
*
* @param {Node} newContent
* @returns {Element}
*/
function createDuckTypedParent(newContent) {
return /** @type {Element} */ (
/** @type {unknown} */ ({
childNodes: [newContent],
/** @ts-ignore - cover your eyes for a minute, tsc */
querySelectorAll: (s) => {
/** @ts-ignore */
const elements = newContent.querySelectorAll(s);
/** @ts-ignore */
return newContent.matches(s) ? [newContent, ...elements] : elements;
},
/** @ts-ignore */
insertBefore: (n, r) => newContent.parentNode.insertBefore(n, r),
/** @ts-ignore */
moveBefore: (n, r) => newContent.parentNode.moveBefore(n, r),
// for later use with populateIdMapWithTree to halt upwards iteration
get __idiomorphRoot() {
return newContent;
},
})
);
}
/**
*
* @param {string} newContent
* @returns {Node | null | DocumentFragment}
*/
function parseContent(newContent) {
let parser = new DOMParser();
// remove svgs to avoid false-positive matches on head, etc.
let contentWithSvgsRemoved = newContent.replace(
/<svg(\s[^>]*>|>)([\s\S]*?)<\/svg>/gim,
"",
);
// if the newContent contains a html, head or body tag, we can simply parse it w/o wrapping
if (
contentWithSvgsRemoved.match(/<\/html>/) ||
contentWithSvgsRemoved.match(/<\/head>/) ||
contentWithSvgsRemoved.match(/<\/body>/)
) {
let content = parser.parseFromString(newContent, "text/html");
// if it is a full HTML document, return the document itself as the parent container
if (contentWithSvgsRemoved.match(/<\/html>/)) {
generatedByIdiomorph.add(content);
return content;
} else {
// otherwise return the html element as the parent container
let htmlElement = content.firstChild;
if (htmlElement) {
generatedByIdiomorph.add(htmlElement);
}
return htmlElement;
}
} else {
// if it is partial HTML, wrap it in a template tag to provide a parent element and also to help
// deal with touchy tags like tr, tbody, etc.
let responseDoc = parser.parseFromString(
"<body><template>" + newContent + "</template></body>",
"text/html",
);
let content = /** @type {HTMLTemplateElement} */ (
responseDoc.body.querySelector("template")
).content;
generatedByIdiomorph.add(content);
return content;
}
}
return { normalizeElement, normalizeParent };
})();
//=============================================================================
// This is what ends up becoming the Idiomorph global object
//=============================================================================
return {
morph,
defaults,
};
})();
function morphElements(currentElement, newElement, { callbacks, ...options } = {}) {
Idiomorph.morph(currentElement, newElement, {
...options,
callbacks: new DefaultIdiomorphCallbacks(callbacks)
});
}
function morphChildren(currentElement, newElement) {
morphElements(currentElement, newElement.childNodes, {
morphStyle: "innerHTML"
});
}
class DefaultIdiomorphCallbacks {
#beforeNodeMorphed
constructor({ beforeNodeMorphed } = {}) {
this.#beforeNodeMorphed = beforeNodeMorphed || (() => true);
}
beforeNodeAdded = (node) => {
return !(node.id && node.hasAttribute("data-turbo-permanent") && document.getElementById(node.id))
}
beforeNodeMorphed = (currentElement, newElement) => {
if (currentElement instanceof Element) {
if (!currentElement.hasAttribute("data-turbo-permanent") && this.#beforeNodeMorphed(currentElement, newElement)) {
const event = dispatch("turbo:before-morph-element", {
cancelable: true,
target: currentElement,
detail: { currentElement, newElement }
});
return !event.defaultPrevented
} else {
return false
}
}
}
beforeAttributeUpdated = (attributeName, target, mutationType) => {
const event = dispatch("turbo:before-morph-attribute", {
cancelable: true,
target,
detail: { attributeName, mutationType }
});
return !event.defaultPrevented
}
beforeNodeRemoved = (node) => {
return this.beforeNodeMorphed(node)
}
afterNodeMorphed = (currentElement, newElement) => {
if (currentElement instanceof Element) {
dispatch("turbo:morph-element", {
target: currentElement,
detail: { currentElement, newElement }
});
}
}
}
class MorphingFrameRenderer extends FrameRenderer {
static renderElement(currentElement, newElement) {
dispatch("turbo:before-frame-morph", {
target: currentElement,
detail: { currentElement, newElement }
});
morphChildren(currentElement, newElement);
}
async preservingPermanentElements(callback) {
return await callback()
}
}
class ProgressBar {
static animationDuration = 300 /*ms*/
static get defaultCSS() {
return unindent`
.turbo-progress-bar {
position: fixed;
display: block;
top: 0;
left: 0;
height: 3px;
background: #0076ff;
z-index: 2147483647;
transition:
width ${ProgressBar.animationDuration}ms ease-out,
opacity ${ProgressBar.animationDuration / 2}ms ${ProgressBar.animationDuration / 2}ms ease-in;
transform: translate3d(0, 0, 0);
}
`
}
hiding = false
value = 0
visible = false
constructor() {
this.stylesheetElement = this.createStylesheetElement();
this.progressElement = this.createProgressElement();
this.installStylesheetElement();
this.setValue(0);
}
show() {
if (!this.visible) {
this.visible = true;
this.installProgressElement();
this.startTrickling();
}
}
hide() {
if (this.visible && !this.hiding) {
this.hiding = true;
this.fadeProgressElement(() => {
this.uninstallProgressElement();
this.stopTrickling();
this.visible = false;
this.hiding = false;
});
}
}
setValue(value) {
this.value = value;
this.refresh();
}
// Private
installStylesheetElement() {
document.head.insertBefore(this.stylesheetElement, document.head.firstChild);
}
installProgressElement() {
this.progressElement.style.width = "0";
this.progressElement.style.opacity = "1";
document.documentElement.insertBefore(this.progressElement, document.body);
this.refresh();
}
fadeProgressElement(callback) {
this.progressElement.style.opacity = "0";
setTimeout(callback, ProgressBar.animationDuration * 1.5);
}
uninstallProgressElement() {
if (this.progressElement.parentNode) {
document.documentElement.removeChild(this.progressElement);
}
}
startTrickling() {
if (!this.trickleInterval) {
this.trickleInterval = window.setInterval(this.trickle, ProgressBar.animationDuration);
}
}
stopTrickling() {
window.clearInterval(this.trickleInterval);
delete this.trickleInterval;
}
trickle = () => {
this.setValue(this.value + Math.random() / 100);
}
refresh() {
requestAnimationFrame(() => {
this.progressElement.style.width = `${10 + this.value * 90}%`;
});
}
createStylesheetElement() {
const element = document.createElement("style");
element.type = "text/css";
element.textContent = ProgressBar.defaultCSS;
const cspNonce = getCspNonce();
if (cspNonce) {
element.nonce = cspNonce;
}
return element
}
createProgressElement() {
const element = document.createElement("div");
element.className = "turbo-progress-bar";
return element
}
}
class HeadSnapshot extends Snapshot {
detailsByOuterHTML = this.children
.filter((element) => !elementIsNoscript(element))
.map((element) => elementWithoutNonce(element))
.reduce((result, element) => {
const { outerHTML } = element;
const details =
outerHTML in result
? result[outerHTML]
: {
type: elementType(element),
tracked: elementIsTracked(element),
elements: []
};
return {
...result,
[outerHTML]: {
...details,
elements: [...details.elements, element]
}
}
}, {})
get trackedElementSignature() {
return Object.keys(this.detailsByOuterHTML)
.filter((outerHTML) => this.detailsByOuterHTML[outerHTML].tracked)
.join("")
}
getScriptElementsNotInSnapshot(snapshot) {
return this.getElementsMatchingTypeNotInSnapshot("script", snapshot)
}
getStylesheetElementsNotInSnapshot(snapshot) {
return this.getElementsMatchingTypeNotInSnapshot("stylesheet", snapshot)
}
getElementsMatchingTypeNotInSnapshot(matchedType, snapshot) {
return Object.keys(this.detailsByOuterHTML)
.filter((outerHTML) => !(outerHTML in snapshot.detailsByOuterHTML))
.map((outerHTML) => this.detailsByOuterHTML[outerHTML])
.filter(({ type }) => type == matchedType)
.map(({ elements: [element] }) => element)
}
get provisionalElements() {
return Object.keys(this.detailsByOuterHTML).reduce((result, outerHTML) => {
const { type, tracked, elements } = this.detailsByOuterHTML[outerHTML];
if (type == null && !tracked) {
return [...result, ...elements]
} else if (elements.length > 1) {
return [...result, ...elements.slice(1)]
} else {
return result
}
}, [])
}
getMetaValue(name) {
const element = this.findMetaElementByName(name);
return element ? element.getAttribute("content") : null
}
findMetaElementByName(name) {
return Object.keys(this.detailsByOuterHTML).reduce((result, outerHTML) => {
const {
elements: [element]
} = this.detailsByOuterHTML[outerHTML];
return elementIsMetaElementWithName(element, name) ? element : result
}, undefined | undefined)
}
}
function elementType(element) {
if (elementIsScript(element)) {
return "script"
} else if (elementIsStylesheet(element)) {
return "stylesheet"
}
}
function elementIsTracked(element) {
return element.getAttribute("data-turbo-track") == "reload"
}
function elementIsScript(element) {
const tagName = element.localName;
return tagName == "script"
}
function elementIsNoscript(element) {
const tagName = element.localName;
return tagName == "noscript"
}
function elementIsStylesheet(element) {
const tagName = element.localName;
return tagName == "style" || (tagName == "link" && element.getAttribute("rel") == "stylesheet")
}
function elementIsMetaElementWithName(element, name) {
const tagName = element.localName;
return tagName == "meta" && element.getAttribute("name") == name
}
function elementWithoutNonce(element) {
if (element.hasAttribute("nonce")) {
element.setAttribute("nonce", "");
}
return element
}
class PageSnapshot extends Snapshot {
static fromHTMLString(html = "") {
return this.fromDocument(parseHTMLDocument(html))
}
static fromElement(element) {
return this.fromDocument(element.ownerDocument)
}
static fromDocument({ documentElement, body, head }) {
return new this(documentElement, body, new HeadSnapshot(head))
}
constructor(documentElement, body, headSnapshot) {
super(body);
this.documentElement = documentElement;
this.headSnapshot = headSnapshot;
}
clone() {
const clonedElement = this.element.cloneNode(true);
const selectElements = this.element.querySelectorAll("select");
const clonedSelectElements = clonedElement.querySelectorAll("select");
for (const [index, source] of selectElements.entries()) {
const clone = clonedSelectElements[index];
for (const option of clone.selectedOptions) option.selected = false;
for (const option of source.selectedOptions) clone.options[option.index].selected = true;
}
for (const clonedPasswordInput of clonedElement.querySelectorAll('input[type="password"]')) {
clonedPasswordInput.value = "";
}
return new PageSnapshot(this.documentElement, clonedElement, this.headSnapshot)
}
get lang() {
return this.documentElement.getAttribute("lang")
}
get headElement() {
return this.headSnapshot.element
}
get rootLocation() {
const root = this.getSetting("root") ?? "/";
return expandURL(root)
}
get cacheControlValue() {
return this.getSetting("cache-control")
}
get isPreviewable() {
return this.cacheControlValue != "no-preview"
}
get isCacheable() {
return this.cacheControlValue != "no-cache"
}
get isVisitable() {
return this.getSetting("visit-control") != "reload"
}
get prefersViewTransitions() {
return this.headSnapshot.getMetaValue("view-transition") === "same-origin"
}
get shouldMorphPage() {
return this.getSetting("refresh-method") === "morph"
}
get shouldPreserveScrollPosition() {
return this.getSetting("refresh-scroll") === "preserve"
}
// Private
getSetting(name) {
return this.headSnapshot.getMetaValue(`turbo-${name}`)
}
}
class ViewTransitioner {
#viewTransitionStarted = false
#lastOperation = Promise.resolve()
renderChange(useViewTransition, render) {
if (useViewTransition && this.viewTransitionsAvailable && !this.#viewTransitionStarted) {
this.#viewTransitionStarted = true;
this.#lastOperation = this.#lastOperation.then(async () => {
await document.startViewTransition(render).finished;
});
} else {
this.#lastOperation = this.#lastOperation.then(render);
}
return this.#lastOperation
}
get viewTransitionsAvailable() {
return document.startViewTransition
}
}
const defaultOptions = {
action: "advance",
historyChanged: false,
visitCachedSnapshot: () => {},
willRender: true,
updateHistory: true,
shouldCacheSnapshot: true,
acceptsStreamResponse: false
};
const TimingMetric = {
visitStart: "visitStart",
requestStart: "requestStart",
requestEnd: "requestEnd",
visitEnd: "visitEnd"
};
const VisitState = {
initialized: "initialized",
started: "started",
canceled: "canceled",
failed: "failed",
completed: "completed"
};
const SystemStatusCode = {
networkFailure: 0,
timeoutFailure: -1,
contentTypeMismatch: -2
};
const Direction = {
advance: "forward",
restore: "back",
replace: "none"
};
class Visit {
identifier = uuid() // Required by turbo-ios
timingMetrics = {}
followedRedirect = false
historyChanged = false
scrolled = false
shouldCacheSnapshot = true
acceptsStreamResponse = false
snapshotCached = false
state = VisitState.initialized
viewTransitioner = new ViewTransitioner()
constructor(delegate, location, restorationIdentifier, options = {}) {
this.delegate = delegate;
this.location = location;
this.restorationIdentifier = restorationIdentifier || uuid();
const {
action,
historyChanged,
referrer,
snapshot,
snapshotHTML,
response,
visitCachedSnapshot,
willRender,
updateHistory,
shouldCacheSnapshot,
acceptsStreamResponse,
direction
} = {
...defaultOptions,
...options
};
this.action = action;
this.historyChanged = historyChanged;
this.referrer = referrer;
this.snapshot = snapshot;
this.snapshotHTML = snapshotHTML;
this.response = response;
this.isSamePage = this.delegate.locationWithActionIsSamePage(this.location, this.action);
this.isPageRefresh = this.view.isPageRefresh(this);
this.visitCachedSnapshot = visitCachedSnapshot;
this.willRender = willRender;
this.updateHistory = updateHistory;
this.scrolled = !willRender;
this.shouldCacheSnapshot = shouldCacheSnapshot;
this.acceptsStreamResponse = acceptsStreamResponse;
this.direction = direction || Direction[action];
}
get adapter() {
return this.delegate.adapter
}
get view() {
return this.delegate.view
}
get history() {
return this.delegate.history
}
get restorationData() {
return this.history.getRestorationDataForIdentifier(this.restorationIdentifier)
}
get silent() {
return this.isSamePage
}
start() {
if (this.state == VisitState.initialized) {
this.recordTimingMetric(TimingMetric.visitStart);
this.state = VisitState.started;
this.adapter.visitStarted(this);
this.delegate.visitStarted(this);
}
}
cancel() {
if (this.state == VisitState.started) {
if (this.request) {
this.request.cancel();
}
this.cancelRender();
this.state = VisitState.canceled;
}
}
complete() {
if (this.state == VisitState.started) {
this.recordTimingMetric(TimingMetric.visitEnd);
this.adapter.visitCompleted(this);
this.state = VisitState.completed;
this.followRedirect();
if (!this.followedRedirect) {
this.delegate.visitCompleted(this);
}
}
}
fail() {
if (this.state == VisitState.started) {
this.state = VisitState.failed;
this.adapter.visitFailed(this);
this.delegate.visitCompleted(this);
}
}
changeHistory() {
if (!this.historyChanged && this.updateHistory) {
const actionForHistory = this.location.href === this.referrer?.href ? "replace" : this.action;
const method = getHistoryMethodForAction(actionForHistory);
this.history.update(method, this.location, this.restorationIdentifier);
this.historyChanged = true;
}
}
issueRequest() {
if (this.hasPreloadedResponse()) {
this.simulateRequest();
} else if (this.shouldIssueRequest() && !this.request) {
this.request = new FetchRequest(this, FetchMethod.get, this.location);
this.request.perform();
}
}
simulateRequest() {
if (this.response) {
this.startRequest();
this.recordResponse();
this.finishRequest();
}
}
startRequest() {
this.recordTimingMetric(TimingMetric.requestStart);
this.adapter.visitRequestStarted(this);
}
recordResponse(response = this.response) {
this.response = response;
if (response) {
const { statusCode } = response;
if (isSuccessful(statusCode)) {
this.adapter.visitRequestCompleted(this);
} else {
this.adapter.visitRequestFailedWithStatusCode(this, statusCode);
}
}
}
finishRequest() {
this.recordTimingMetric(TimingMetric.requestEnd);
this.adapter.visitRequestFinished(this);
}
loadResponse() {
if (this.response) {
const { statusCode, responseHTML } = this.response;
this.render(async () => {
if (this.shouldCacheSnapshot) this.cacheSnapshot();
if (this.view.renderPromise) await this.view.renderPromise;
if (isSuccessful(statusCode) && responseHTML != null) {
const snapshot = PageSnapshot.fromHTMLString(responseHTML);
await this.renderPageSnapshot(snapshot, false);
this.adapter.visitRendered(this);
this.complete();
} else {
await this.view.renderError(PageSnapshot.fromHTMLString(responseHTML), this);
this.adapter.visitRendered(this);
this.fail();
}
});
}
}
getCachedSnapshot() {
const snapshot = this.view.getCachedSnapshotForLocation(this.location) || this.getPreloadedSnapshot();
if (snapshot && (!getAnchor(this.location) || snapshot.hasAnchor(getAnchor(this.location)))) {
if (this.action == "restore" || snapshot.isPreviewable) {
return snapshot
}
}
}
getPreloadedSnapshot() {
if (this.snapshotHTML) {
return PageSnapshot.fromHTMLString(this.snapshotHTML)
}
}
hasCachedSnapshot() {
return this.getCachedSnapshot() != null
}
loadCachedSnapshot() {
const snapshot = this.getCachedSnapshot();
if (snapshot) {
const isPreview = this.shouldIssueRequest();
this.render(async () => {
this.cacheSnapshot();
if (this.isSamePage || this.isPageRefresh) {
this.adapter.visitRendered(this);
} else {
if (this.view.renderPromise) await this.view.renderPromise;
await this.renderPageSnapshot(snapshot, isPreview);
this.adapter.visitRendered(this);
if (!isPreview) {
this.complete();
}
}
});
}
}
followRedirect() {
if (this.redirectedToLocation && !this.followedRedirect && this.response?.redirected) {
this.adapter.visitProposedToLocation(this.redirectedToLocation, {
action: "replace",
response: this.response,
shouldCacheSnapshot: false,
willRender: false
});
this.followedRedirect = true;
}
}
goToSamePageAnchor() {
if (this.isSamePage) {
this.render(async () => {
this.cacheSnapshot();
this.performScroll();
this.changeHistory();
this.adapter.visitRendered(this);
});
}
}
// Fetch request delegate
prepareRequest(request) {
if (this.acceptsStreamResponse) {
request.acceptResponseType(StreamMessage.contentType);
}
}
requestStarted() {
this.startRequest();
}
requestPreventedHandlingResponse(_request, _response) {}
async requestSucceededWithResponse(request, response) {
const responseHTML = await response.responseHTML;
const { redirected, statusCode } = response;
if (responseHTML == undefined) {
this.recordResponse({
statusCode: SystemStatusCode.contentTypeMismatch,
redirected
});
} else {
this.redirectedToLocation = response.redirected ? response.location : undefined;
this.recordResponse({ statusCode: statusCode, responseHTML, redirected });
}
}
async requestFailedWithResponse(request, response) {
const responseHTML = await response.responseHTML;
const { redirected, statusCode } = response;
if (responseHTML == undefined) {
this.recordResponse({
statusCode: SystemStatusCode.contentTypeMismatch,
redirected
});
} else {
this.recordResponse({ statusCode: statusCode, responseHTML, redirected });
}
}
requestErrored(_request, _error) {
this.recordResponse({
statusCode: SystemStatusCode.networkFailure,
redirected: false
});
}
requestFinished() {
this.finishRequest();
}
// Scrolling
performScroll() {
if (!this.scrolled && !this.view.forceReloaded && !this.view.shouldPreserveScrollPosition(this)) {
if (this.action == "restore") {
this.scrollToRestoredPosition() || this.scrollToAnchor() || this.view.scrollToTop();
} else {
this.scrollToAnchor() || this.view.scrollToTop();
}
if (this.isSamePage) {
this.delegate.visitScrolledToSamePageLocation(this.view.lastRenderedLocation, this.location);
}
this.scrolled = true;
}
}
scrollToRestoredPosition() {
const { scrollPosition } = this.restorationData;
if (scrollPosition) {
this.view.scrollToPosition(scrollPosition);
return true
}
}
scrollToAnchor() {
const anchor = getAnchor(this.location);
if (anchor != null) {
this.view.scrollToAnchor(anchor);
return true
}
}
// Instrumentation
recordTimingMetric(metric) {
this.timingMetrics[metric] = new Date().getTime();
}
getTimingMetrics() {
return { ...this.timingMetrics }
}
// Private
hasPreloadedResponse() {
return typeof this.response == "object"
}
shouldIssueRequest() {
if (this.isSamePage) {
return false
} else if (this.action == "restore") {
return !this.hasCachedSnapshot()
} else {
return this.willRender
}
}
cacheSnapshot() {
if (!this.snapshotCached) {
this.view.cacheSnapshot(this.snapshot).then((snapshot) => snapshot && this.visitCachedSnapshot(snapshot));
this.snapshotCached = true;
}
}
async render(callback) {
this.cancelRender();
await new Promise((resolve) => {
this.frame =
document.visibilityState === "hidden" ? setTimeout(() => resolve(), 0) : requestAnimationFrame(() => resolve());
});
await callback();
delete this.frame;
}
async renderPageSnapshot(snapshot, isPreview) {
await this.viewTransitioner.renderChange(this.view.shouldTransitionTo(snapshot), async () => {
await this.view.renderPage(snapshot, isPreview, this.willRender, this);
this.performScroll();
});
}
cancelRender() {
if (this.frame) {
cancelAnimationFrame(this.frame);
delete this.frame;
}
}
}
function isSuccessful(statusCode) {
return statusCode >= 200 && statusCode < 300
}
class BrowserAdapter {
progressBar = new ProgressBar()
constructor(session) {
this.session = session;
}
visitProposedToLocation(location, options) {
if (locationIsVisitable(location, this.navigator.rootLocation)) {
this.navigator.startVisit(location, options?.restorationIdentifier || uuid(), options);
} else {
window.location.href = location.toString();
}
}
visitStarted(visit) {
this.location = visit.location;
visit.loadCachedSnapshot();
visit.issueRequest();
visit.goToSamePageAnchor();
}
visitRequestStarted(visit) {
this.progressBar.setValue(0);
if (visit.hasCachedSnapshot() || visit.action != "restore") {
this.showVisitProgressBarAfterDelay();
} else {
this.showProgressBar();
}
}
visitRequestCompleted(visit) {
visit.loadResponse();
}
visitRequestFailedWithStatusCode(visit, statusCode) {
switch (statusCode) {
case SystemStatusCode.networkFailure:
case SystemStatusCode.timeoutFailure:
case SystemStatusCode.contentTypeMismatch:
return this.reload({
reason: "request_failed",
context: {
statusCode
}
})
default:
return visit.loadResponse()
}
}
visitRequestFinished(_visit) {}
visitCompleted(_visit) {
this.progressBar.setValue(1);
this.hideVisitProgressBar();
}
pageInvalidated(reason) {
this.reload(reason);
}
visitFailed(_visit) {
this.progressBar.setValue(1);
this.hideVisitProgressBar();
}
visitRendered(_visit) {}
// Link prefetching
linkPrefetchingIsEnabledForLocation(location) {
return true
}
// Form Submission Delegate
formSubmissionStarted(_formSubmission) {
this.progressBar.setValue(0);
this.showFormProgressBarAfterDelay();
}
formSubmissionFinished(_formSubmission) {
this.progressBar.setValue(1);
this.hideFormProgressBar();
}
// Private
showVisitProgressBarAfterDelay() {
this.visitProgressBarTimeout = window.setTimeout(this.showProgressBar, this.session.progressBarDelay);
}
hideVisitProgressBar() {
this.progressBar.hide();
if (this.visitProgressBarTimeout != null) {
window.clearTimeout(this.visitProgressBarTimeout);
delete this.visitProgressBarTimeout;
}
}
showFormProgressBarAfterDelay() {
if (this.formProgressBarTimeout == null) {
this.formProgressBarTimeout = window.setTimeout(this.showProgressBar, this.session.progressBarDelay);
}
}
hideFormProgressBar() {
this.progressBar.hide();
if (this.formProgressBarTimeout != null) {
window.clearTimeout(this.formProgressBarTimeout);
delete this.formProgressBarTimeout;
}
}
showProgressBar = () => {
this.progressBar.show();
}
reload(reason) {
dispatch("turbo:reload", { detail: reason });
window.location.href = this.location?.toString() || window.location.href;
}
get navigator() {
return this.session.navigator
}
}
class CacheObserver {
selector = "[data-turbo-temporary]"
deprecatedSelector = "[data-turbo-cache=false]"
started = false
start() {
if (!this.started) {
this.started = true;
addEventListener("turbo:before-cache", this.removeTemporaryElements, false);
}
}
stop() {
if (this.started) {
this.started = false;
removeEventListener("turbo:before-cache", this.removeTemporaryElements, false);
}
}
removeTemporaryElements = (_event) => {
for (const element of this.temporaryElements) {
element.remove();
}
}
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 {
constructor(session, element) {
this.session = session;
this.element = element;
this.linkInterceptor = new LinkInterceptor(this, element);
this.formSubmitObserver = new FormSubmitObserver(this, element);
}
start() {
this.linkInterceptor.start();
this.formSubmitObserver.start();
}
stop() {
this.linkInterceptor.stop();
this.formSubmitObserver.stop();
}
// Link interceptor delegate
shouldInterceptLinkClick(element, _location, _event) {
return this.#shouldRedirect(element)
}
linkClickIntercepted(element, url, event) {
const frame = this.#findFrameElement(element);
if (frame) {
frame.delegate.linkClickIntercepted(element, url, event);
}
}
// Form submit observer delegate
willSubmitForm(element, submitter) {
return (
element.closest("turbo-frame") == null &&
this.#shouldSubmit(element, submitter) &&
this.#shouldRedirect(element, submitter)
)
}
formSubmitted(element, submitter) {
const frame = this.#findFrameElement(element, submitter);
if (frame) {
frame.delegate.formSubmitted(element, submitter);
}
}
#shouldSubmit(form, submitter) {
const action = getAction$1(form, submitter);
const meta = this.element.ownerDocument.querySelector(`meta[name="turbo-root"]`);
const rootLocation = expandURL(meta?.content ?? "/");
return this.#shouldRedirect(form, submitter) && locationIsVisitable(action, rootLocation)
}
#shouldRedirect(element, submitter) {
const isNavigatable =
element instanceof HTMLFormElement
? this.session.submissionIsNavigatable(element, submitter)
: this.session.elementIsNavigatable(element);
if (isNavigatable) {
const frame = this.#findFrameElement(element, submitter);
return frame ? frame != element.closest("turbo-frame") : false
} else {
return false
}
}
#findFrameElement(element, submitter) {
const id = submitter?.getAttribute("data-turbo-frame") || element.getAttribute("data-turbo-frame");
if (id && id != "_top") {
const frame = this.element.querySelector(`#${id}:not([disabled])`);
if (frame instanceof FrameElement) {
return frame
}
}
}
}
class History {
location
restorationIdentifier = uuid()
restorationData = {}
started = false
pageLoaded = false
currentIndex = 0
constructor(delegate) {
this.delegate = delegate;
}
start() {
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));
}
}
stop() {
if (this.started) {
removeEventListener("popstate", this.onPopState, false);
removeEventListener("load", this.onPageLoad, false);
this.started = false;
}
}
push(location, restorationIdentifier) {
this.update(history.pushState, location, restorationIdentifier);
}
replace(location, restorationIdentifier) {
this.update(history.replaceState, location, restorationIdentifier);
}
update(method, location, restorationIdentifier = uuid()) {
if (method === history.pushState) ++this.currentIndex;
const state = { turbo: { restorationIdentifier, restorationIndex: this.currentIndex } };
method.call(history, state, "", location.href);
this.location = location;
this.restorationIdentifier = restorationIdentifier;
}
// Restoration data
getRestorationDataForIdentifier(restorationIdentifier) {
return this.restorationData[restorationIdentifier] || {}
}
updateRestorationData(additionalData) {
const { restorationIdentifier } = this;
const restorationData = this.restorationData[restorationIdentifier];
this.restorationData[restorationIdentifier] = {
...restorationData,
...additionalData
};
}
// Scroll restoration
assumeControlOfScrollRestoration() {
if (!this.previousScrollRestoration) {
this.previousScrollRestoration = history.scrollRestoration ?? "auto";
history.scrollRestoration = "manual";
}
}
relinquishControlOfScrollRestoration() {
if (this.previousScrollRestoration) {
history.scrollRestoration = this.previousScrollRestoration;
delete this.previousScrollRestoration;
}
}
// Event handlers
onPopState = (event) => {
if (this.shouldHandlePopState()) {
const { turbo } = event.state || {};
if (turbo) {
this.location = new URL(window.location.href);
const { restorationIdentifier, restorationIndex } = turbo;
this.restorationIdentifier = restorationIdentifier;
const direction = restorationIndex > this.currentIndex ? "forward" : "back";
this.delegate.historyPoppedToLocationWithRestorationIdentifierAndDirection(this.location, restorationIdentifier, direction);
this.currentIndex = restorationIndex;
}
}
}
onPageLoad = async (_event) => {
await nextMicrotask();
this.pageLoaded = true;
}
// Private
shouldHandlePopState() {
// Safari dispatches a popstate event after window's load event, ignore it
return this.pageIsLoaded()
}
pageIsLoaded() {
return this.pageLoaded || document.readyState == "complete"
}
}
class LinkPrefetchObserver {
started = false
#prefetchedLink = null
constructor(delegate, eventTarget) {
this.delegate = delegate;
this.eventTarget = eventTarget;
}
start() {
if (this.started) return
if (this.eventTarget.readyState === "loading") {
this.eventTarget.addEventListener("DOMContentLoaded", this.#enable, { once: true });
} else {
this.#enable();
}
}
stop() {
if (!this.started) return
this.eventTarget.removeEventListener("mouseenter", this.#tryToPrefetchRequest, {
capture: true,
passive: true
});
this.eventTarget.removeEventListener("mouseleave", this.#cancelRequestIfObsolete, {
capture: true,
passive: true
});
this.eventTarget.removeEventListener("turbo:before-fetch-request", this.#tryToUsePrefetchedRequest, true);
this.started = false;
}
#enable = () => {
this.eventTarget.addEventListener("mouseenter", this.#tryToPrefetchRequest, {
capture: true,
passive: true
});
this.eventTarget.addEventListener("mouseleave", this.#cancelRequestIfObsolete, {
capture: true,
passive: true
});
this.eventTarget.addEventListener("turbo:before-fetch-request", this.#tryToUsePrefetchedRequest, true);
this.started = true;
}
#tryToPrefetchRequest = (event) => {
if (getMetaContent("turbo-prefetch") === "false") return
const target = event.target;
const isLink = target.matches && target.matches("a[href]:not([target^=_]):not([download])");
if (isLink && this.#isPrefetchable(target)) {
const link = target;
const location = getLocationForLink(link);
if (this.delegate.canPrefetchRequestToLocation(link, location)) {
this.#prefetchedLink = link;
const fetchRequest = new FetchRequest(
this,
FetchMethod.get,
location,
new URLSearchParams(),
target
);
prefetchCache.setLater(location.toString(), fetchRequest, this.#cacheTtl);
}
}
}
#cancelRequestIfObsolete = (event) => {
if (event.target === this.#prefetchedLink) this.#cancelPrefetchRequest();
}
#cancelPrefetchRequest = () => {
prefetchCache.clear();
this.#prefetchedLink = null;
}
#tryToUsePrefetchedRequest = (event) => {
if (event.target.tagName !== "FORM" && event.detail.fetchOptions.method === "GET") {
const cached = prefetchCache.get(event.detail.url.toString());
if (cached) {
// User clicked link, use cache response
event.detail.fetchRequest = cached;
}
prefetchCache.clear();
}
}
prepareRequest(request) {
const link = request.target;
request.headers["X-Sec-Purpose"] = "prefetch";
const turboFrame = link.closest("turbo-frame");
const turboFrameTarget = link.getAttribute("data-turbo-frame") || turboFrame?.getAttribute("target") || turboFrame?.id;
if (turboFrameTarget && turboFrameTarget !== "_top") {
request.headers["Turbo-Frame"] = turboFrameTarget;
}
}
// Fetch request interface
requestSucceededWithResponse() {}
requestStarted(fetchRequest) {}
requestErrored(fetchRequest) {}
requestFinished(fetchRequest) {}
requestPreventedHandlingResponse(fetchRequest, fetchResponse) {}
requestFailedWithResponse(fetchRequest, fetchResponse) {}
get #cacheTtl() {
return Number(getMetaContent("turbo-prefetch-cache-time")) || cacheTtl
}
#isPrefetchable(link) {
const href = link.getAttribute("href");
if (!href) return false
if (unfetchableLink(link)) return false
if (linkToTheSamePage(link)) return false
if (linkOptsOut(link)) return false
if (nonSafeLink(link)) return false
if (eventPrevented(link)) return false
return true
}
}
const unfetchableLink = (link) => {
return link.origin !== document.location.origin || !["http:", "https:"].includes(link.protocol) || link.hasAttribute("target")
};
const linkToTheSamePage = (link) => {
return (link.pathname + link.search === document.location.pathname + document.location.search) || link.href.startsWith("#")
};
const linkOptsOut = (link) => {
if (link.getAttribute("data-turbo-prefetch") === "false") return true
if (link.getAttribute("data-turbo") === "false") return true
const turboPrefetchParent = findClosestRecursively(link, "[data-turbo-prefetch]");
if (turboPrefetchParent && turboPrefetchParent.getAttribute("data-turbo-prefetch") === "false") return true
return false
};
const nonSafeLink = (link) => {
const turboMethod = link.getAttribute("data-turbo-method");
if (turboMethod && turboMethod.toLowerCase() !== "get") return true
if (isUJS(link)) return true
if (link.hasAttribute("data-turbo-confirm")) return true
if (link.hasAttribute("data-turbo-stream")) return true
return false
};
const isUJS = (link) => {
return link.hasAttribute("data-remote") || link.hasAttribute("data-behavior") || link.hasAttribute("data-confirm") || link.hasAttribute("data-method")
};
const eventPrevented = (link) => {
const event = dispatch("turbo:before-prefetch", { target: link, cancelable: true });
return event.defaultPrevented
};
class Navigator {
constructor(delegate) {
this.delegate = delegate;
}
proposeVisit(location, options = {}) {
if (this.delegate.allowsVisitingLocationWithAction(location, options.action)) {
this.delegate.visitProposedToLocation(location, options);
}
}
startVisit(locatable, restorationIdentifier, options = {}) {
this.stop();
this.currentVisit = new Visit(this, expandURL(locatable), restorationIdentifier, {
referrer: this.location,
...options
});
this.currentVisit.start();
}
submitForm(form, submitter) {
this.stop();
this.formSubmission = new FormSubmission(this, form, submitter, true);
this.formSubmission.start();
}
stop() {
if (this.formSubmission) {
this.formSubmission.stop();
delete this.formSubmission;
}
if (this.currentVisit) {
this.currentVisit.cancel();
delete this.currentVisit;
}
}
get adapter() {
return this.delegate.adapter
}
get view() {
return this.delegate.view
}
get rootLocation() {
return this.view.snapshot.rootLocation
}
get history() {
return this.delegate.history
}
// Form submission delegate
formSubmissionStarted(formSubmission) {
// Not all adapters implement formSubmissionStarted
if (typeof this.adapter.formSubmissionStarted === "function") {
this.adapter.formSubmissionStarted(formSubmission);
}
}
async formSubmissionSucceededWithResponse(formSubmission, fetchResponse) {
if (formSubmission == this.formSubmission) {
const responseHTML = await fetchResponse.responseHTML;
if (responseHTML) {
const shouldCacheSnapshot = formSubmission.isSafe;
if (!shouldCacheSnapshot) {
this.view.clearSnapshotCache();
}
const { statusCode, redirected } = fetchResponse;
const action = this.#getActionForFormSubmission(formSubmission, fetchResponse);
const visitOptions = {
action,
shouldCacheSnapshot,
response: { statusCode, responseHTML, redirected }
};
this.proposeVisit(fetchResponse.location, visitOptions);
}
}
}
async formSubmissionFailedWithResponse(formSubmission, fetchResponse) {
const responseHTML = await fetchResponse.responseHTML;
if (responseHTML) {
const snapshot = PageSnapshot.fromHTMLString(responseHTML);
if (fetchResponse.serverError) {
await this.view.renderError(snapshot, this.currentVisit);
} else {
await this.view.renderPage(snapshot, false, true, this.currentVisit);
}
if(!snapshot.shouldPreserveScrollPosition) {
this.view.scrollToTop();
}
this.view.clearSnapshotCache();
}
}
formSubmissionErrored(formSubmission, error) {
console.error(error);
}
formSubmissionFinished(formSubmission) {
// Not all adapters implement formSubmissionFinished
if (typeof this.adapter.formSubmissionFinished === "function") {
this.adapter.formSubmissionFinished(formSubmission);
}
}
// Link prefetching
linkPrefetchingIsEnabledForLocation(location) {
// Not all adapters implement linkPrefetchingIsEnabledForLocation
if (typeof this.adapter.linkPrefetchingIsEnabledForLocation === "function") {
return this.adapter.linkPrefetchingIsEnabledForLocation(location)
}
return true
}
// Visit delegate
visitStarted(visit) {
this.delegate.visitStarted(visit);
}
visitCompleted(visit) {
this.delegate.visitCompleted(visit);
delete this.currentVisit;
}
locationWithActionIsSamePage(location, action) {
const anchor = getAnchor(location);
const currentAnchor = getAnchor(this.view.lastRenderedLocation);
const isRestorationToTop = action === "restore" && typeof anchor === "undefined";
return (
action !== "replace" &&
getRequestURL(location) === getRequestURL(this.view.lastRenderedLocation) &&
(isRestorationToTop || (anchor != null && anchor !== currentAnchor))
)
}
visitScrolledToSamePageLocation(oldURL, newURL) {
this.delegate.visitScrolledToSamePageLocation(oldURL, newURL);
}
// Visits
get location() {
return this.history.location
}
get restorationIdentifier() {
return this.history.restorationIdentifier
}
#getActionForFormSubmission(formSubmission, fetchResponse) {
const { submitter, formElement } = formSubmission;
return getVisitAction(submitter, formElement) || this.#getDefaultAction(fetchResponse)
}
#getDefaultAction(fetchResponse) {
const sameLocationRedirect = fetchResponse.redirected && fetchResponse.location.href === this.location?.href;
return sameLocationRedirect ? "replace" : "advance"
}
}
const PageStage = {
initial: 0,
loading: 1,
interactive: 2,
complete: 3
};
class PageObserver {
stage = PageStage.initial
started = false
constructor(delegate) {
this.delegate = delegate;
}
start() {
if (!this.started) {
if (this.stage == PageStage.initial) {
this.stage = PageStage.loading;
}
document.addEventListener("readystatechange", this.interpretReadyState, false);
addEventListener("pagehide", this.pageWillUnload, false);
this.started = true;
}
}
stop() {
if (this.started) {
document.removeEventListener("readystatechange", this.interpretReadyState, false);
removeEventListener("pagehide", this.pageWillUnload, false);
this.started = false;
}
}
interpretReadyState = () => {
const { readyState } = this;
if (readyState == "interactive") {
this.pageIsInteractive();
} else if (readyState == "complete") {
this.pageIsComplete();
}
}
pageIsInteractive() {
if (this.stage == PageStage.loading) {
this.stage = PageStage.interactive;
this.delegate.pageBecameInteractive();
}
}
pageIsComplete() {
this.pageIsInteractive();
if (this.stage == PageStage.interactive) {
this.stage = PageStage.complete;
this.delegate.pageLoaded();
}
}
pageWillUnload = () => {
this.delegate.pageWillUnload();
}
get readyState() {
return document.readyState
}
}
class ScrollObserver {
started = false
constructor(delegate) {
this.delegate = delegate;
}
start() {
if (!this.started) {
addEventListener("scroll", this.onScroll, false);
this.onScroll();
this.started = true;
}
}
stop() {
if (this.started) {
removeEventListener("scroll", this.onScroll, false);
this.started = false;
}
}
onScroll = () => {
this.updatePosition({ x: window.pageXOffset, y: window.pageYOffset });
}
// Private
updatePosition(position) {
this.delegate.scrollPositionChanged(position);
}
}
class StreamMessageRenderer {
render({ fragment }) {
Bardo.preservingPermanentElements(this, getPermanentElementMapForFragment(fragment), () => {
withAutofocusFromFragment(fragment, () => {
withPreservedFocus(() => {
document.documentElement.appendChild(fragment);
});
});
});
}
// Bardo delegate
enteringBardo(currentPermanentElement, newPermanentElement) {
newPermanentElement.replaceWith(currentPermanentElement.cloneNode(true));
}
leavingBardo() {}
}
function getPermanentElementMapForFragment(fragment) {
const permanentElementsInDocument = queryPermanentElementsAll(document.documentElement);
const permanentElementMap = {};
for (const permanentElementInDocument of permanentElementsInDocument) {
const { id } = permanentElementInDocument;
for (const streamElement of fragment.querySelectorAll("turbo-stream")) {
const elementInStream = getPermanentElementById(streamElement.templateElement.content, id);
if (elementInStream) {
permanentElementMap[id] = [permanentElementInDocument, elementInStream];
}
}
}
return permanentElementMap
}
async function withAutofocusFromFragment(fragment, callback) {
const generatedID = `turbo-stream-autofocus-${uuid()}`;
const turboStreams = fragment.querySelectorAll("turbo-stream");
const elementWithAutofocus = firstAutofocusableElementInStreams(turboStreams);
let willAutofocusId = null;
if (elementWithAutofocus) {
if (elementWithAutofocus.id) {
willAutofocusId = elementWithAutofocus.id;
} else {
willAutofocusId = generatedID;
}
elementWithAutofocus.id = willAutofocusId;
}
callback();
await nextRepaint();
const hasNoActiveElement = document.activeElement == null || document.activeElement == document.body;
if (hasNoActiveElement && willAutofocusId) {
const elementToAutofocus = document.getElementById(willAutofocusId);
if (elementIsFocusable(elementToAutofocus)) {
elementToAutofocus.focus();
}
if (elementToAutofocus && elementToAutofocus.id == generatedID) {
elementToAutofocus.removeAttribute("id");
}
}
}
async function withPreservedFocus(callback) {
const [activeElementBeforeRender, activeElementAfterRender] = await around(callback, () => document.activeElement);
const restoreFocusTo = activeElementBeforeRender && activeElementBeforeRender.id;
if (restoreFocusTo) {
const elementToFocus = document.getElementById(restoreFocusTo);
if (elementIsFocusable(elementToFocus) && elementToFocus != activeElementAfterRender) {
elementToFocus.focus();
}
}
}
function firstAutofocusableElementInStreams(nodeListOfStreamElements) {
for (const streamElement of nodeListOfStreamElements) {
const elementWithAutofocus = queryAutofocusableElement(streamElement.templateElement.content);
if (elementWithAutofocus) return elementWithAutofocus
}
return null
}
class StreamObserver {
sources = new Set()
#started = false
constructor(delegate) {
this.delegate = delegate;
}
start() {
if (!this.#started) {
this.#started = true;
addEventListener("turbo:before-fetch-response", this.inspectFetchResponse, false);
}
}
stop() {
if (this.#started) {
this.#started = false;
removeEventListener("turbo:before-fetch-response", this.inspectFetchResponse, false);
}
}
connectStreamSource(source) {
if (!this.streamSourceIsConnected(source)) {
this.sources.add(source);
source.addEventListener("message", this.receiveMessageEvent, false);
}
}
disconnectStreamSource(source) {
if (this.streamSourceIsConnected(source)) {
this.sources.delete(source);
source.removeEventListener("message", this.receiveMessageEvent, false);
}
}
streamSourceIsConnected(source) {
return this.sources.has(source)
}
inspectFetchResponse = (event) => {
const response = fetchResponseFromEvent(event);
if (response && fetchResponseIsStream(response)) {
event.preventDefault();
this.receiveMessageResponse(response);
}
}
receiveMessageEvent = (event) => {
if (this.#started && typeof event.data == "string") {
this.receiveMessageHTML(event.data);
}
}
async receiveMessageResponse(response) {
const html = await response.responseHTML;
if (html) {
this.receiveMessageHTML(html);
}
}
receiveMessageHTML(html) {
this.delegate.receivedMessageFromStream(StreamMessage.wrap(html));
}
}
function fetchResponseFromEvent(event) {
const fetchResponse = event.detail?.fetchResponse;
if (fetchResponse instanceof FetchResponse) {
return fetchResponse
}
}
function fetchResponseIsStream(response) {
const contentType = response.contentType ?? "";
return contentType.startsWith(StreamMessage.contentType)
}
class ErrorRenderer extends Renderer {
static renderElement(currentElement, newElement) {
const { documentElement, body } = document;
documentElement.replaceChild(newElement, body);
}
async render() {
this.replaceHeadAndBody();
this.activateScriptElements();
}
replaceHeadAndBody() {
const { documentElement, head } = document;
documentElement.replaceChild(this.newHead, head);
this.renderElement(this.currentElement, this.newElement);
}
activateScriptElements() {
for (const replaceableElement of this.scriptElements) {
const parentNode = replaceableElement.parentNode;
if (parentNode) {
const element = activateScriptElement(replaceableElement);
parentNode.replaceChild(element, replaceableElement);
}
}
}
get newHead() {
return this.newSnapshot.headSnapshot.element
}
get scriptElements() {
return document.documentElement.querySelectorAll("script")
}
}
class PageRenderer extends Renderer {
static renderElement(currentElement, newElement) {
if (document.body && newElement instanceof HTMLBodyElement) {
document.body.replaceWith(newElement);
} else {
document.documentElement.appendChild(newElement);
}
}
get shouldRender() {
return this.newSnapshot.isVisitable && this.trackedElementsAreIdentical
}
get reloadReason() {
if (!this.newSnapshot.isVisitable) {
return {
reason: "turbo_visit_control_is_reload"
}
}
if (!this.trackedElementsAreIdentical) {
return {
reason: "tracked_element_mismatch"
}
}
}
async prepareToRender() {
this.#setLanguage();
await this.mergeHead();
}
async render() {
if (this.willRender) {
await this.replaceBody();
}
}
finishRendering() {
super.finishRendering();
if (!this.isPreview) {
this.focusFirstAutofocusableElement();
}
}
get currentHeadSnapshot() {
return this.currentSnapshot.headSnapshot
}
get newHeadSnapshot() {
return this.newSnapshot.headSnapshot
}
get newElement() {
return this.newSnapshot.element
}
#setLanguage() {
const { documentElement } = this.currentSnapshot;
const { lang } = this.newSnapshot;
if (lang) {
documentElement.setAttribute("lang", lang);
} else {
documentElement.removeAttribute("lang");
}
}
async mergeHead() {
const mergedHeadElements = this.mergeProvisionalElements();
const newStylesheetElements = this.copyNewHeadStylesheetElements();
this.copyNewHeadScriptElements();
await mergedHeadElements;
await newStylesheetElements;
if (this.willRender) {
this.removeUnusedDynamicStylesheetElements();
}
}
async replaceBody() {
await this.preservingPermanentElements(async () => {
this.activateNewBody();
await this.assignNewBody();
});
}
get trackedElementsAreIdentical() {
return this.currentHeadSnapshot.trackedElementSignature == this.newHeadSnapshot.trackedElementSignature
}
async copyNewHeadStylesheetElements() {
const loadingElements = [];
for (const element of this.newHeadStylesheetElements) {
loadingElements.push(waitForLoad(element));
document.head.appendChild(element);
}
await Promise.all(loadingElements);
}
copyNewHeadScriptElements() {
for (const element of this.newHeadScriptElements) {
document.head.appendChild(activateScriptElement(element));
}
}
removeUnusedDynamicStylesheetElements() {
for (const element of this.unusedDynamicStylesheetElements) {
document.head.removeChild(element);
}
}
async mergeProvisionalElements() {
const newHeadElements = [...this.newHeadProvisionalElements];
for (const element of this.currentHeadProvisionalElements) {
if (!this.isCurrentElementInElementList(element, newHeadElements)) {
document.head.removeChild(element);
}
}
for (const element of newHeadElements) {
document.head.appendChild(element);
}
}
isCurrentElementInElementList(element, elementList) {
for (const [index, newElement] of elementList.entries()) {
// if title element...
if (element.tagName == "TITLE") {
if (newElement.tagName != "TITLE") {
continue
}
if (element.innerHTML == newElement.innerHTML) {
elementList.splice(index, 1);
return true
}
}
// if any other element...
if (newElement.isEqualNode(element)) {
elementList.splice(index, 1);
return true
}
}
return false
}
removeCurrentHeadProvisionalElements() {
for (const element of this.currentHeadProvisionalElements) {
document.head.removeChild(element);
}
}
copyNewHeadProvisionalElements() {
for (const element of this.newHeadProvisionalElements) {
document.head.appendChild(element);
}
}
activateNewBody() {
document.adoptNode(this.newElement);
this.activateNewBodyScriptElements();
}
activateNewBodyScriptElements() {
for (const inertScriptElement of this.newBodyScriptElements) {
const activatedScriptElement = activateScriptElement(inertScriptElement);
inertScriptElement.replaceWith(activatedScriptElement);
}
}
async assignNewBody() {
await this.renderElement(this.currentElement, this.newElement);
}
get unusedDynamicStylesheetElements() {
return this.oldHeadStylesheetElements.filter((element) => {
return element.getAttribute("data-turbo-track") === "dynamic"
})
}
get oldHeadStylesheetElements() {
return this.currentHeadSnapshot.getStylesheetElementsNotInSnapshot(this.newHeadSnapshot)
}
get newHeadStylesheetElements() {
return this.newHeadSnapshot.getStylesheetElementsNotInSnapshot(this.currentHeadSnapshot)
}
get newHeadScriptElements() {
return this.newHeadSnapshot.getScriptElementsNotInSnapshot(this.currentHeadSnapshot)
}
get currentHeadProvisionalElements() {
return this.currentHeadSnapshot.provisionalElements
}
get newHeadProvisionalElements() {
return this.newHeadSnapshot.provisionalElements
}
get newBodyScriptElements() {
return this.newElement.querySelectorAll("script")
}
}
class MorphingPageRenderer extends PageRenderer {
static renderElement(currentElement, newElement) {
morphElements(currentElement, newElement, {
callbacks: {
beforeNodeMorphed: element => !canRefreshFrame(element)
}
});
for (const frame of currentElement.querySelectorAll("turbo-frame")) {
if (canRefreshFrame(frame)) frame.reload();
}
dispatch("turbo:morph", { detail: { currentElement, newElement } });
}
async preservingPermanentElements(callback) {
return await callback()
}
get renderMethod() {
return "morph"
}
get shouldAutofocus() {
return false
}
}
function canRefreshFrame(frame) {
return frame instanceof FrameElement &&
frame.src &&
frame.refresh === "morph" &&
!frame.closest("[data-turbo-permanent]")
}
class SnapshotCache {
keys = []
snapshots = {}
constructor(size) {
this.size = size;
}
has(location) {
return toCacheKey(location) in this.snapshots
}
get(location) {
if (this.has(location)) {
const snapshot = this.read(location);
this.touch(location);
return snapshot
}
}
put(location, snapshot) {
this.write(location, snapshot);
this.touch(location);
return snapshot
}
clear() {
this.snapshots = {};
}
// Private
read(location) {
return this.snapshots[toCacheKey(location)]
}
write(location, snapshot) {
this.snapshots[toCacheKey(location)] = snapshot;
}
touch(location) {
const key = toCacheKey(location);
const index = this.keys.indexOf(key);
if (index > -1) this.keys.splice(index, 1);
this.keys.unshift(key);
this.trim();
}
trim() {
for (const key of this.keys.splice(this.size)) {
delete this.snapshots[key];
}
}
}
class PageView extends View {
snapshotCache = new SnapshotCache(10)
lastRenderedLocation = new URL(location.href)
forceReloaded = false
shouldTransitionTo(newSnapshot) {
return this.snapshot.prefersViewTransitions && newSnapshot.prefersViewTransitions
}
renderPage(snapshot, isPreview = false, willRender = true, visit) {
const shouldMorphPage = this.isPageRefresh(visit) && this.snapshot.shouldMorphPage;
const rendererClass = shouldMorphPage ? MorphingPageRenderer : PageRenderer;
const renderer = new rendererClass(this.snapshot, snapshot, isPreview, willRender);
if (!renderer.shouldRender) {
this.forceReloaded = true;
} else {
visit?.changeHistory();
}
return this.render(renderer)
}
renderError(snapshot, visit) {
visit?.changeHistory();
const renderer = new ErrorRenderer(this.snapshot, snapshot, false);
return this.render(renderer)
}
clearSnapshotCache() {
this.snapshotCache.clear();
}
async cacheSnapshot(snapshot = this.snapshot) {
if (snapshot.isCacheable) {
this.delegate.viewWillCacheSnapshot();
const { lastRenderedLocation: location } = this;
await nextEventLoopTick();
const cachedSnapshot = snapshot.clone();
this.snapshotCache.put(location, cachedSnapshot);
return cachedSnapshot
}
}
getCachedSnapshotForLocation(location) {
return this.snapshotCache.get(location)
}
isPageRefresh(visit) {
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)
}
}
class Preloader {
selector = "a[data-turbo-preload]"
constructor(delegate, snapshotCache) {
this.delegate = delegate;
this.snapshotCache = snapshotCache;
}
start() {
if (document.readyState === "loading") {
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)) {
if (this.delegate.shouldPreloadLink(link)) {
this.preloadURL(link);
}
}
}
async preloadURL(link) {
const location = new URL(link.href);
if (this.snapshotCache.has(location)) {
return
}
const fetchRequest = new FetchRequest(this, FetchMethod.get, location, new URLSearchParams(), link);
await fetchRequest.perform();
}
// Fetch request delegate
prepareRequest(fetchRequest) {
fetchRequest.headers["X-Sec-Purpose"] = "prefetch";
}
async requestSucceededWithResponse(fetchRequest, fetchResponse) {
try {
const responseHTML = await fetchResponse.responseHTML;
const snapshot = PageSnapshot.fromHTMLString(responseHTML);
this.snapshotCache.put(fetchRequest.url, snapshot);
} catch (_) {
// If we cannot preload that is ok!
}
}
requestStarted(fetchRequest) {}
requestErrored(fetchRequest) {}
requestFinished(fetchRequest) {}
requestPreventedHandlingResponse(fetchRequest, fetchResponse) {}
requestFailedWithResponse(fetchRequest, fetchResponse) {}
#preloadAll = () => {
this.preloadOnLoadLinksForView(document.body);
}
}
class Cache {
constructor(session) {
this.session = session;
}
clear() {
this.session.clearCache();
}
resetCacheControl() {
this.#setCacheControl("");
}
exemptPageFromCache() {
this.#setCacheControl("no-cache");
}
exemptPageFromPreview() {
this.#setCacheControl("no-preview");
}
#setCacheControl(value) {
setMetaContent("turbo-cache-control", value);
}
}
class Session {
navigator = new Navigator(this)
history = new History(this)
view = new PageView(this, document.documentElement)
adapter = new BrowserAdapter(this)
pageObserver = new PageObserver(this)
cacheObserver = new CacheObserver()
linkPrefetchObserver = new LinkPrefetchObserver(this, document)
linkClickObserver = new LinkClickObserver(this, window)
formSubmitObserver = new FormSubmitObserver(this, document)
scrollObserver = new ScrollObserver(this)
streamObserver = new StreamObserver(this)
formLinkClickObserver = new FormLinkClickObserver(this, document.documentElement)
frameRedirector = new FrameRedirector(this, document.documentElement)
streamMessageRenderer = new StreamMessageRenderer()
cache = new Cache(this)
enabled = true
started = false
#pageRefreshDebouncePeriod = 150
constructor(recentRequests) {
this.recentRequests = recentRequests;
this.preloader = new Preloader(this, this.view.snapshotCache);
this.debouncedRefresh = this.refresh;
this.pageRefreshDebouncePeriod = this.pageRefreshDebouncePeriod;
}
start() {
if (!this.started) {
this.pageObserver.start();
this.cacheObserver.start();
this.linkPrefetchObserver.start();
this.formLinkClickObserver.start();
this.linkClickObserver.start();
this.formSubmitObserver.start();
this.scrollObserver.start();
this.streamObserver.start();
this.frameRedirector.start();
this.history.start();
this.preloader.start();
this.started = true;
this.enabled = true;
}
}
disable() {
this.enabled = false;
}
stop() {
if (this.started) {
this.pageObserver.stop();
this.cacheObserver.stop();
this.linkPrefetchObserver.stop();
this.formLinkClickObserver.stop();
this.linkClickObserver.stop();
this.formSubmitObserver.stop();
this.scrollObserver.stop();
this.streamObserver.stop();
this.frameRedirector.stop();
this.history.stop();
this.preloader.stop();
this.started = false;
}
}
registerAdapter(adapter) {
this.adapter = adapter;
}
visit(location, options = {}) {
const frameElement = options.frame ? document.getElementById(options.frame) : null;
if (frameElement instanceof FrameElement) {
const action = options.action || getVisitAction(frameElement);
frameElement.delegate.proposeVisitIfNavigatedWithAction(frameElement, action);
frameElement.src = location.toString();
} else {
this.navigator.proposeVisit(expandURL(location), options);
}
}
refresh(url, requestId) {
const isRecentRequest = requestId && this.recentRequests.has(requestId);
const isCurrentUrl = url === document.baseURI;
if (!isRecentRequest && !this.navigator.currentVisit && isCurrentUrl) {
this.visit(url, { action: "replace", shouldCacheSnapshot: false });
}
}
connectStreamSource(source) {
this.streamObserver.connectStreamSource(source);
}
disconnectStreamSource(source) {
this.streamObserver.disconnectStreamSource(source);
}
renderStreamMessage(message) {
this.streamMessageRenderer.render(StreamMessage.wrap(message));
}
clearCache() {
this.view.clearSnapshotCache();
}
setProgressBarDelay(delay) {
console.warn(
"Please replace `session.setProgressBarDelay(delay)` with `session.progressBarDelay = delay`. The function is deprecated and will be removed in a future version of Turbo.`"
);
this.progressBarDelay = delay;
}
set progressBarDelay(delay) {
config.drive.progressBarDelay = delay;
}
get progressBarDelay() {
return config.drive.progressBarDelay
}
set drive(value) {
config.drive.enabled = value;
}
get drive() {
return config.drive.enabled
}
set formMode(value) {
config.forms.mode = value;
}
get formMode() {
return config.forms.mode
}
get location() {
return this.history.location
}
get restorationIdentifier() {
return this.history.restorationIdentifier
}
get pageRefreshDebouncePeriod() {
return this.#pageRefreshDebouncePeriod
}
set pageRefreshDebouncePeriod(value) {
this.refresh = debounce(this.debouncedRefresh.bind(this), value);
this.#pageRefreshDebouncePeriod = value;
}
// Preloader delegate
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)
}
}
// History delegate
historyPoppedToLocationWithRestorationIdentifierAndDirection(location, restorationIdentifier, direction) {
if (this.enabled) {
this.navigator.startVisit(location, restorationIdentifier, {
action: "restore",
historyChanged: true,
direction
});
} else {
this.adapter.pageInvalidated({
reason: "turbo_disabled"
});
}
}
// Scroll observer delegate
scrollPositionChanged(position) {
this.history.updateRestorationData({ scrollPosition: position });
}
// Form click observer delegate
willSubmitFormLinkToLocation(link, location) {
return this.elementIsNavigatable(link) && locationIsVisitable(location, this.snapshot.rootLocation)
}
submittedFormLinkToLocation() {}
// Link hover observer delegate
canPrefetchRequestToLocation(link, location) {
return (
this.elementIsNavigatable(link) &&
locationIsVisitable(location, this.snapshot.rootLocation) &&
this.navigator.linkPrefetchingIsEnabledForLocation(location)
)
}
// Link click observer delegate
willFollowLinkToLocation(link, location, event) {
return (
this.elementIsNavigatable(link) &&
locationIsVisitable(location, this.snapshot.rootLocation) &&
this.applicationAllowsFollowingLinkToLocation(link, location, event)
)
}
followedLinkToLocation(link, location) {
const action = this.getActionForLink(link);
const acceptsStreamResponse = link.hasAttribute("data-turbo-stream");
this.visit(location.href, { action, acceptsStreamResponse });
}
// Navigator delegate
allowsVisitingLocationWithAction(location, action) {
return this.locationWithActionIsSamePage(location, action) || this.applicationAllowsVisitingLocation(location)
}
visitProposedToLocation(location, options) {
extendURLWithDeprecatedProperties(location);
this.adapter.visitProposedToLocation(location, options);
}
// Visit delegate
visitStarted(visit) {
if (!visit.acceptsStreamResponse) {
markAsBusy(document.documentElement);
this.view.markVisitDirection(visit.direction);
}
extendURLWithDeprecatedProperties(visit.location);
if (!visit.silent) {
this.notifyApplicationAfterVisitingLocation(visit.location, visit.action);
}
}
visitCompleted(visit) {
this.view.unmarkVisitDirection();
clearBusyState(document.documentElement);
this.notifyApplicationAfterPageLoad(visit.getTimingMetrics());
}
locationWithActionIsSamePage(location, action) {
return this.navigator.locationWithActionIsSamePage(location, action)
}
visitScrolledToSamePageLocation(oldURL, newURL) {
this.notifyApplicationAfterVisitingSamePageLocation(oldURL, newURL);
}
// Form submit observer delegate
willSubmitForm(form, submitter) {
const action = getAction$1(form, submitter);
return (
this.submissionIsNavigatable(form, submitter) &&
locationIsVisitable(expandURL(action), this.snapshot.rootLocation)
)
}
formSubmitted(form, submitter) {
this.navigator.submitForm(form, submitter);
}
// Page observer delegate
pageBecameInteractive() {
this.view.lastRenderedLocation = this.location;
this.notifyApplicationAfterPageLoad();
}
pageLoaded() {
this.history.assumeControlOfScrollRestoration();
}
pageWillUnload() {
this.history.relinquishControlOfScrollRestoration();
}
// Stream observer delegate
receivedMessageFromStream(message) {
this.renderStreamMessage(message);
}
// Page view delegate
viewWillCacheSnapshot() {
if (!this.navigator.currentVisit?.silent) {
this.notifyApplicationBeforeCachingSnapshot();
}
}
allowsImmediateRender({ element }, options) {
const event = this.notifyApplicationBeforeRender(element, options);
const {
defaultPrevented,
detail: { render }
} = event;
if (this.view.renderer && render) {
this.view.renderer.renderElement = render;
}
return !defaultPrevented
}
viewRenderedSnapshot(_snapshot, _isPreview, renderMethod) {
this.view.lastRenderedLocation = this.history.location;
this.notifyApplicationAfterRender(renderMethod);
}
preloadOnLoadLinksForView(element) {
this.preloader.preloadOnLoadLinksForView(element);
}
viewInvalidated(reason) {
this.adapter.pageInvalidated(reason);
}
// Frame element
frameLoaded(frame) {
this.notifyApplicationAfterFrameLoad(frame);
}
frameRendered(fetchResponse, frame) {
this.notifyApplicationAfterFrameRender(fetchResponse, frame);
}
// Application events
applicationAllowsFollowingLinkToLocation(link, location, ev) {
const event = this.notifyApplicationAfterClickingLinkToLocation(link, location, ev);
return !event.defaultPrevented
}
applicationAllowsVisitingLocation(location) {
const event = this.notifyApplicationBeforeVisitingLocation(location);
return !event.defaultPrevented
}
notifyApplicationAfterClickingLinkToLocation(link, location, event) {
return dispatch("turbo:click", {
target: link,
detail: { url: location.href, originalEvent: event },
cancelable: true
})
}
notifyApplicationBeforeVisitingLocation(location) {
return dispatch("turbo:before-visit", {
detail: { url: location.href },
cancelable: true
})
}
notifyApplicationAfterVisitingLocation(location, action) {
return dispatch("turbo:visit", { detail: { url: location.href, action } })
}
notifyApplicationBeforeCachingSnapshot() {
return dispatch("turbo:before-cache")
}
notifyApplicationBeforeRender(newBody, options) {
return dispatch("turbo:before-render", {
detail: { newBody, ...options },
cancelable: true
})
}
notifyApplicationAfterRender(renderMethod) {
return dispatch("turbo:render", { detail: { renderMethod } })
}
notifyApplicationAfterPageLoad(timing = {}) {
return dispatch("turbo:load", {
detail: { url: this.location.href, timing }
})
}
notifyApplicationAfterVisitingSamePageLocation(oldURL, newURL) {
dispatchEvent(
new HashChangeEvent("hashchange", {
oldURL: oldURL.toString(),
newURL: newURL.toString()
})
);
}
notifyApplicationAfterFrameLoad(frame) {
return dispatch("turbo:frame-load", { target: frame })
}
notifyApplicationAfterFrameRender(fetchResponse, frame) {
return dispatch("turbo:frame-render", {
detail: { fetchResponse },
target: frame,
cancelable: true
})
}
// Helpers
submissionIsNavigatable(form, submitter) {
if (config.forms.mode == "off") {
return false
} else {
const submitterIsNavigatable = submitter ? this.elementIsNavigatable(submitter) : true;
if (config.forms.mode == "optin") {
return submitterIsNavigatable && form.closest('[data-turbo="true"]') != null
} else {
return submitterIsNavigatable && this.elementIsNavigatable(form)
}
}
}
elementIsNavigatable(element) {
const container = findClosestRecursively(element, "[data-turbo]");
const withinFrame = findClosestRecursively(element, "turbo-frame");
// Check if Drive is enabled on the session or we're within a Frame.
if (config.drive.enabled || withinFrame) {
// Element is navigatable by default, unless `data-turbo="false"`.
if (container) {
return container.getAttribute("data-turbo") != "false"
} else {
return true
}
} else {
// Element isn't navigatable by default, unless `data-turbo="true"`.
if (container) {
return container.getAttribute("data-turbo") == "true"
} else {
return false
}
}
}
// Private
getActionForLink(link) {
return getVisitAction(link) || "advance"
}
get snapshot() {
return this.view.snapshot
}
}
// Older versions of the Turbo Native adapters referenced the
// `Location#absoluteURL` property in their implementations of
// the `Adapter#visitProposedToLocation()` and `#visitStarted()`
// methods. The Location class has since been removed in favor
// of the DOM URL API, and accordingly all Adapter methods now
// receive URL objects.
//
// We alias #absoluteURL to #toString() here to avoid crashing
// older adapters which do not expect URL objects. We should
// consider removing this support at some point in the future.
function extendURLWithDeprecatedProperties(url) {
Object.defineProperties(url, deprecatedLocationPropertyDescriptors);
}
const deprecatedLocationPropertyDescriptors = {
absoluteURL: {
get() {
return this.toString()
}
}
};
const session = new Session(recentRequests);
const { cache, navigator: navigator$1 } = session;
/**
* Starts the main session.
* This initialises any necessary observers such as those to monitor
* link interactions.
*/
function start() {
session.start();
}
/**
* Registers an adapter for the main session.
*
* @param adapter Adapter to register
*/
function registerAdapter(adapter) {
session.registerAdapter(adapter);
}
/**
* Performs an application visit to the given location.
*
* @param location Location to visit (a URL or path)
* @param options Options to apply
* @param options.action Type of history navigation to apply ("restore",
* "replace" or "advance")
* @param options.historyChanged Specifies whether the browser history has
* already been changed for this visit or not
* @param options.referrer Specifies the referrer of this visit such that
* navigations to the same page will not result in a new history entry.
* @param options.snapshotHTML Cached snapshot to render
* @param options.response Response of the specified location
*/
function visit(location, options) {
session.visit(location, options);
}
/**
* Connects a stream source to the main session.
*
* @param source Stream source to connect
*/
function connectStreamSource(source) {
session.connectStreamSource(source);
}
/**
* Disconnects a stream source from the main session.
*
* @param source Stream source to disconnect
*/
function disconnectStreamSource(source) {
session.disconnectStreamSource(source);
}
/**
* Renders a stream message to the main session by appending it to the
* current document.
*
* @param message Message to render
*/
function renderStreamMessage(message) {
session.renderStreamMessage(message);
}
/**
* Removes all entries from the Turbo Drive page cache.
* Call this when state has changed on the server that may affect cached pages.
*
* @deprecated since version 7.2.0 in favor of `Turbo.cache.clear()`
*/
function clearCache() {
console.warn(
"Please replace `Turbo.clearCache()` with `Turbo.cache.clear()`. The top-level function is deprecated and will be removed in a future version of Turbo.`"
);
session.clearCache();
}
/**
* Sets the delay after which the progress bar will appear during navigation.
*
* The progress bar appears after 500ms by default.
*
* Note that this method has no effect when used with the iOS or Android
* adapters.
*
* @param delay Time to delay in milliseconds
*/
function setProgressBarDelay(delay) {
console.warn(
"Please replace `Turbo.setProgressBarDelay(delay)` with `Turbo.config.drive.progressBarDelay = delay`. The top-level function is deprecated and will be removed in a future version of Turbo.`"
);
config.drive.progressBarDelay = delay;
}
function setConfirmMethod(confirmMethod) {
console.warn(
"Please replace `Turbo.setConfirmMethod(confirmMethod)` with `Turbo.config.forms.confirm = confirmMethod`. The top-level function is deprecated and will be removed in a future version of Turbo.`"
);
config.forms.confirm = confirmMethod;
}
function setFormMode(mode) {
console.warn(
"Please replace `Turbo.setFormMode(mode)` with `Turbo.config.forms.mode = mode`. The top-level function is deprecated and will be removed in a future version of Turbo.`"
);
config.forms.mode = mode;
}
var Turbo = /*#__PURE__*/Object.freeze({
__proto__: null,
navigator: navigator$1,
session: session,
cache: cache,
PageRenderer: PageRenderer,
PageSnapshot: PageSnapshot,
FrameRenderer: FrameRenderer,
fetch: fetchWithTurboHeaders,
config: config,
start: start,
registerAdapter: registerAdapter,
visit: visit,
connectStreamSource: connectStreamSource,
disconnectStreamSource: disconnectStreamSource,
renderStreamMessage: renderStreamMessage,
clearCache: clearCache,
setProgressBarDelay: setProgressBarDelay,
setConfirmMethod: setConfirmMethod,
setFormMode: setFormMode
});
class TurboFrameMissingError extends Error {}
class FrameController {
fetchResponseLoaded = (_fetchResponse) => Promise.resolve()
#currentFetchRequest = null
#resolveVisitPromise = () => {}
#connected = false
#hasBeenLoaded = false
#ignoredAttributes = new Set()
#shouldMorphFrame = false
action = null
constructor(element) {
this.element = element;
this.view = new FrameView(this, this.element);
this.appearanceObserver = new AppearanceObserver(this, this.element);
this.formLinkClickObserver = new FormLinkClickObserver(this, this.element);
this.linkInterceptor = new LinkInterceptor(this, this.element);
this.restorationIdentifier = uuid();
this.formSubmitObserver = new FormSubmitObserver(this, this.element);
}
// Frame delegate
connect() {
if (!this.#connected) {
this.#connected = true;
if (this.loadingStyle == FrameLoadingStyle.lazy) {
this.appearanceObserver.start();
} else {
this.#loadSourceURL();
}
this.formLinkClickObserver.start();
this.linkInterceptor.start();
this.formSubmitObserver.start();
}
}
disconnect() {
if (this.#connected) {
this.#connected = false;
this.appearanceObserver.stop();
this.formLinkClickObserver.stop();
this.linkInterceptor.stop();
this.formSubmitObserver.stop();
}
}
disabledChanged() {
if (this.loadingStyle == FrameLoadingStyle.eager) {
this.#loadSourceURL();
}
}
sourceURLChanged() {
if (this.#isIgnoringChangesTo("src")) return
if (this.element.isConnected) {
this.complete = false;
}
if (this.loadingStyle == FrameLoadingStyle.eager || this.#hasBeenLoaded) {
this.#loadSourceURL();
}
}
sourceURLReloaded() {
const { refresh, src } = this.element;
this.#shouldMorphFrame = src && refresh === "morph";
this.element.removeAttribute("complete");
this.element.src = null;
this.element.src = src;
return this.element.loaded
}
loadingStyleChanged() {
if (this.loadingStyle == FrameLoadingStyle.lazy) {
this.appearanceObserver.start();
} else {
this.appearanceObserver.stop();
this.#loadSourceURL();
}
}
async #loadSourceURL() {
if (this.enabled && this.isActive && !this.complete && this.sourceURL) {
this.element.loaded = this.#visit(expandURL(this.sourceURL));
this.appearanceObserver.stop();
await this.element.loaded;
this.#hasBeenLoaded = true;
}
}
async loadResponse(fetchResponse) {
if (fetchResponse.redirected || (fetchResponse.succeeded && fetchResponse.isHTML)) {
this.sourceURL = fetchResponse.response.url;
}
try {
const html = await fetchResponse.responseHTML;
if (html) {
const document = parseHTMLDocument(html);
const pageSnapshot = PageSnapshot.fromDocument(document);
if (pageSnapshot.isVisitable) {
await this.#loadFrameResponse(fetchResponse, document);
} else {
await this.#handleUnvisitableFrameResponse(fetchResponse);
}
}
} finally {
this.#shouldMorphFrame = false;
this.fetchResponseLoaded = () => Promise.resolve();
}
}
// Appearance observer delegate
elementAppearedInViewport(element) {
this.proposeVisitIfNavigatedWithAction(element, getVisitAction(element));
this.#loadSourceURL();
}
// Form link click observer delegate
willSubmitFormLinkToLocation(link) {
return this.#shouldInterceptNavigation(link)
}
submittedFormLinkToLocation(link, _location, form) {
const frame = this.#findFrameElement(link);
if (frame) form.setAttribute("data-turbo-frame", frame.id);
}
// Link interceptor delegate
shouldInterceptLinkClick(element, _location, _event) {
return this.#shouldInterceptNavigation(element)
}
linkClickIntercepted(element, location) {
this.#navigateFrame(element, location);
}
// Form submit observer delegate
willSubmitForm(element, submitter) {
return element.closest("turbo-frame") == this.element && this.#shouldInterceptNavigation(element, submitter)
}
formSubmitted(element, submitter) {
if (this.formSubmission) {
this.formSubmission.stop();
}
this.formSubmission = new FormSubmission(this, element, submitter);
const { fetchRequest } = this.formSubmission;
this.prepareRequest(fetchRequest);
this.formSubmission.start();
}
// Fetch request delegate
prepareRequest(request) {
request.headers["Turbo-Frame"] = this.id;
if (this.currentNavigationElement?.hasAttribute("data-turbo-stream")) {
request.acceptResponseType(StreamMessage.contentType);
}
}
requestStarted(_request) {
markAsBusy(this.element);
}
requestPreventedHandlingResponse(_request, _response) {
this.#resolveVisitPromise();
}
async requestSucceededWithResponse(request, response) {
await this.loadResponse(response);
this.#resolveVisitPromise();
}
async requestFailedWithResponse(request, response) {
await this.loadResponse(response);
this.#resolveVisitPromise();
}
requestErrored(request, error) {
console.error(error);
this.#resolveVisitPromise();
}
requestFinished(_request) {
clearBusyState(this.element);
}
// Form submission delegate
formSubmissionStarted({ formElement }) {
markAsBusy(formElement, this.#findFrameElement(formElement));
}
formSubmissionSucceededWithResponse(formSubmission, response) {
const frame = this.#findFrameElement(formSubmission.formElement, formSubmission.submitter);
frame.delegate.proposeVisitIfNavigatedWithAction(frame, getVisitAction(formSubmission.submitter, formSubmission.formElement, frame));
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);
}
formSubmissionFinished({ formElement }) {
clearBusyState(formElement, this.#findFrameElement(formElement));
}
// View delegate
allowsImmediateRender({ element: newFrame }, options) {
const event = dispatch("turbo:before-frame-render", {
target: this.element,
detail: { newFrame, ...options },
cancelable: true
});
const {
defaultPrevented,
detail: { render }
} = event;
if (this.view.renderer && render) {
this.view.renderer.renderElement = render;
}
return !defaultPrevented
}
viewRenderedSnapshot(_snapshot, _isPreview, _renderMethod) {}
preloadOnLoadLinksForView(element) {
session.preloadOnLoadLinksForView(element);
}
viewInvalidated() {}
// Frame renderer delegate
willRenderFrame(currentElement, _newElement) {
this.previousFrameElement = currentElement.cloneNode(true);
}
visitCachedSnapshot = ({ element }) => {
const frame = element.querySelector("#" + this.element.id);
if (frame && this.previousFrameElement) {
frame.replaceChildren(...this.previousFrameElement.children);
}
delete this.previousFrameElement;
}
// Private
async #loadFrameResponse(fetchResponse, document) {
const newFrameElement = await this.extractForeignFrameElement(document.body);
const rendererClass = this.#shouldMorphFrame ? MorphingFrameRenderer : FrameRenderer;
if (newFrameElement) {
const snapshot = new Snapshot(newFrameElement);
const renderer = new rendererClass(this, this.view.snapshot, snapshot, 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);
await this.fetchResponseLoaded(fetchResponse);
} else if (this.#willHandleFrameMissingFromResponse(fetchResponse)) {
this.#handleFrameMissingFromResponse(fetchResponse);
}
}
async #visit(url) {
const request = new FetchRequest(this, FetchMethod.get, url, new URLSearchParams(), this.element);
this.#currentFetchRequest?.cancel();
this.#currentFetchRequest = request;
return new Promise((resolve) => {
this.#resolveVisitPromise = () => {
this.#resolveVisitPromise = () => {};
this.#currentFetchRequest = null;
resolve();
};
request.perform();
})
}
#navigateFrame(element, url, submitter) {
const frame = this.#findFrameElement(element, submitter);
frame.delegate.proposeVisitIfNavigatedWithAction(frame, getVisitAction(submitter, element, frame));
this.#withCurrentNavigationElement(element, () => {
frame.src = url;
});
}
proposeVisitIfNavigatedWithAction(frame, action = null) {
this.action = action;
if (this.action) {
const pageSnapshot = PageSnapshot.fromElement(frame).clone();
const { visitCachedSnapshot } = frame.delegate;
frame.delegate.fetchResponseLoaded = async (fetchResponse) => {
if (frame.src) {
const { statusCode, redirected } = fetchResponse;
const responseHTML = await fetchResponse.responseHTML;
const response = { statusCode, redirected, responseHTML };
const options = {
response,
visitCachedSnapshot,
willRender: false,
updateHistory: false,
restorationIdentifier: this.restorationIdentifier,
snapshot: pageSnapshot
};
if (this.action) options.action = this.action;
session.visit(frame.src, options);
}
};
}
}
changeHistory() {
if (this.action) {
const method = getHistoryMethodForAction(this.action);
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;
const visit = async (url, options) => {
if (url instanceof Response) {
this.#visitResponse(url);
} else {
session.visit(url, options);
}
};
const event = dispatch("turbo:frame-missing", {
target: this.element,
detail: { response, visit },
cancelable: true
});
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;
const { location, redirected, statusCode } = wrapped;
return session.visit(location, { response: { redirected, statusCode, responseHTML } })
}
#findFrameElement(element, submitter) {
const id = getAttribute("data-turbo-frame", submitter, element) || this.element.getAttribute("target");
return getFrameElementById(id) ?? this.element
}
async extractForeignFrameElement(container) {
let element;
const id = CSS.escape(this.id);
try {
element = activateElement(container.querySelector(`turbo-frame#${id}`), this.sourceURL);
if (element) {
return element
}
element = activateElement(container.querySelector(`turbo-frame[src][recurse~=${id}]`), this.sourceURL);
if (element) {
await element.loaded;
return await this.extractForeignFrameElement(element)
}
} catch (error) {
console.error(error);
return new FrameElement()
}
return null
}
#formActionIsVisitable(form, submitter) {
const action = getAction$1(form, submitter);
return locationIsVisitable(expandURL(action), this.rootLocation)
}
#shouldInterceptNavigation(element, submitter) {
const id = getAttribute("data-turbo-frame", submitter, element) || this.element.getAttribute("target");
if (element instanceof HTMLFormElement && !this.#formActionIsVisitable(element, submitter)) {
return false
}
if (!this.enabled || id == "_top") {
return false
}
if (id) {
const frameElement = getFrameElementById(id);
if (frameElement) {
return !frameElement.disabled
}
}
if (!session.elementIsNavigatable(element)) {
return false
}
if (submitter && !session.elementIsNavigatable(submitter)) {
return false
}
return true
}
// Computed properties
get id() {
return this.element.id
}
get enabled() {
return !this.element.disabled
}
get sourceURL() {
if (this.element.src) {
return this.element.src
}
}
set sourceURL(sourceURL) {
this.#ignoringChangesToAttribute("src", () => {
this.element.src = sourceURL ?? null;
});
}
get loadingStyle() {
return this.element.loading
}
get isLoading() {
return this.formSubmission !== undefined || this.#resolveVisitPromise() !== undefined
}
get complete() {
return this.element.hasAttribute("complete")
}
set complete(value) {
if (value) {
this.element.setAttribute("complete", "");
} else {
this.element.removeAttribute("complete");
}
}
get isActive() {
return this.element.isActive && this.#connected
}
get rootLocation() {
const meta = this.element.ownerDocument.querySelector(`meta[name="turbo-root"]`);
const root = meta?.content ?? "/";
return expandURL(root)
}
#isIgnoringChangesTo(attributeName) {
return this.#ignoredAttributes.has(attributeName)
}
#ignoringChangesToAttribute(attributeName, callback) {
this.#ignoredAttributes.add(attributeName);
callback();
this.#ignoredAttributes.delete(attributeName);
}
#withCurrentNavigationElement(element, callback) {
this.currentNavigationElement = element;
callback();
delete this.currentNavigationElement;
}
}
function getFrameElementById(id) {
if (id != null) {
const element = document.getElementById(id);
if (element instanceof FrameElement) {
return element
}
}
}
function activateElement(element, currentURL) {
if (element) {
const src = element.getAttribute("src");
if (src != null && currentURL != null && urlsAreEqual(src, currentURL)) {
throw new Error(`Matching <turbo-frame id="${element.id}"> element has a source URL which references itself`)
}
if (element.ownerDocument !== document) {
element = document.importNode(element, true);
}
if (element instanceof FrameElement) {
element.connectedCallback();
element.disconnectedCallback();
return element
}
}
}
const StreamActions = {
after() {
this.targetElements.forEach((e) => e.parentElement?.insertBefore(this.templateContent, e.nextSibling));
},
append() {
this.removeDuplicateTargetChildren();
this.targetElements.forEach((e) => e.append(this.templateContent));
},
before() {
this.targetElements.forEach((e) => e.parentElement?.insertBefore(this.templateContent, e));
},
prepend() {
this.removeDuplicateTargetChildren();
this.targetElements.forEach((e) => e.prepend(this.templateContent));
},
remove() {
this.targetElements.forEach((e) => e.remove());
},
replace() {
const method = this.getAttribute("method");
this.targetElements.forEach((targetElement) => {
if (method === "morph") {
morphElements(targetElement, this.templateContent);
} else {
targetElement.replaceWith(this.templateContent);
}
});
},
update() {
const method = this.getAttribute("method");
this.targetElements.forEach((targetElement) => {
if (method === "morph") {
morphChildren(targetElement, this.templateContent);
} else {
targetElement.innerHTML = "";
targetElement.append(this.templateContent);
}
});
},
refresh() {
session.refresh(this.baseURI, this.requestId);
}
};
// <turbo-stream action=replace target=id><template>...
/**
* Renders updates to the page from a stream of messages.
*
* Using the `action` attribute, this can be configured one of eight ways:
*
* - `after` - inserts the result after the target
* - `append` - appends the result to the target
* - `before` - inserts the result before the target
* - `prepend` - prepends the result to the target
* - `refresh` - initiates a page refresh
* - `remove` - removes the target
* - `replace` - replaces the outer HTML of the target
* - `update` - replaces the inner HTML of the target
*
* @customElement turbo-stream
* @example
* <turbo-stream action="append" target="dom_id">
* <template>
* Content to append to target designated with the dom_id.
* </template>
* </turbo-stream>
*/
class StreamElement extends HTMLElement {
static async renderElement(newElement) {
await newElement.performAction();
}
async connectedCallback() {
try {
await this.render();
} catch (error) {
console.error(error);
} finally {
this.disconnect();
}
}
async render() {
return (this.renderPromise ??= (async () => {
const event = this.beforeRenderEvent;
if (this.dispatchEvent(event)) {
await nextRepaint();
await event.detail.render(this);
}
})())
}
disconnect() {
try {
this.remove();
// eslint-disable-next-line no-empty
} catch {}
}
/**
* Removes duplicate children (by ID)
*/
removeDuplicateTargetChildren() {
this.duplicateChildren.forEach((c) => c.remove());
}
/**
* Gets the list of duplicate children (i.e. those with the same ID)
*/
get duplicateChildren() {
const existingChildren = this.targetElements.flatMap((e) => [...e.children]).filter((c) => !!c.getAttribute("id"));
const newChildrenIds = [...(this.templateContent?.children || [])].filter((c) => !!c.getAttribute("id")).map((c) => c.getAttribute("id"));
return existingChildren.filter((c) => newChildrenIds.includes(c.getAttribute("id")))
}
/**
* Gets the action function to be performed.
*/
get performAction() {
if (this.action) {
const actionFunction = StreamActions[this.action];
if (actionFunction) {
return actionFunction
}
this.#raise("unknown action");
}
this.#raise("action attribute is missing");
}
/**
* Gets the target elements which the template will be rendered to.
*/
get targetElements() {
if (this.target) {
return this.targetElementsById
} else if (this.targets) {
return this.targetElementsByQuery
} else {
this.#raise("target or targets attribute is missing");
}
}
/**
* Gets the contents of the main `<template>`.
*/
get templateContent() {
return this.templateElement.content.cloneNode(true)
}
/**
* Gets the main `<template>` used for rendering
*/
get templateElement() {
if (this.firstElementChild === null) {
const template = this.ownerDocument.createElement("template");
this.appendChild(template);
return template
} else if (this.firstElementChild instanceof HTMLTemplateElement) {
return this.firstElementChild
}
this.#raise("first child element must be a <template> element");
}
/**
* Gets the current action.
*/
get action() {
return this.getAttribute("action")
}
/**
* Gets the current target (an element ID) to which the result will
* be rendered.
*/
get target() {
return this.getAttribute("target")
}
/**
* Gets the current "targets" selector (a CSS selector)
*/
get targets() {
return this.getAttribute("targets")
}
/**
* Reads the request-id attribute
*/
get requestId() {
return this.getAttribute("request-id")
}
#raise(message) {
throw new Error(`${this.description}: ${message}`)
}
get description() {
return (this.outerHTML.match(/<[^>]+>/) ?? [])[0] ?? "<turbo-stream>"
}
get beforeRenderEvent() {
return new CustomEvent("turbo:before-stream-render", {
bubbles: true,
cancelable: true,
detail: { newStream: this, render: StreamElement.renderElement }
})
}
get targetElementsById() {
const element = this.ownerDocument?.getElementById(this.target);
if (element !== null) {
return [element]
} else {
return []
}
}
get targetElementsByQuery() {
const elements = this.ownerDocument?.querySelectorAll(this.targets);
if (elements.length !== 0) {
return Array.prototype.slice.call(elements)
} else {
return []
}
}
}
class StreamSourceElement extends HTMLElement {
streamSource = null
connectedCallback() {
this.streamSource = this.src.match(/^ws{1,2}:/) ? new WebSocket(this.src) : new EventSource(this.src);
connectStreamSource(this.streamSource);
}
disconnectedCallback() {
if (this.streamSource) {
this.streamSource.close();
disconnectStreamSource(this.streamSource);
}
}
get src() {
return this.getAttribute("src") || ""
}
}
FrameElement.delegateConstructor = FrameController;
if (customElements.get("turbo-frame") === undefined) {
customElements.define("turbo-frame", FrameElement);
}
if (customElements.get("turbo-stream") === undefined) {
customElements.define("turbo-stream", StreamElement);
}
if (customElements.get("turbo-stream-source") === undefined) {
customElements.define("turbo-stream-source", StreamSourceElement);
}
(() => {
let element = document.currentScript;
if (!element) return
if (element.hasAttribute("data-turbo-suppress-warning")) return
element = element.parentElement;
while (element) {
if (element == document.body) {
return console.warn(
unindent`
You are loading Turbo from a <script> element inside the <body> element. This is probably not what you meant to do!
Load your application’s JavaScript bundle inside the <head> element instead. <script> elements in <body> are evaluated with each page change.
For more information, see: https://turbo.hotwired.dev/handbook/building#working-with-script-elements
——
Suppress this warning by adding a "data-turbo-suppress-warning" attribute to: %s
`,
element.outerHTML
)
}
element = element.parentElement;
}
})();
window.Turbo = { ...Turbo, StreamActions };
start();
export { FetchEnctype, FetchMethod, FetchRequest, FetchResponse, FrameElement, FrameLoadingStyle, FrameRenderer, PageRenderer, PageSnapshot, StreamActions, StreamElement, StreamSourceElement, cache, clearCache, config, connectStreamSource, disconnectStreamSource, fetchWithTurboHeaders as fetch, fetchEnctypeFromString, fetchMethodFromString, isSafe, navigator$1 as navigator, registerAdapter, renderStreamMessage, session, setConfirmMethod, setFormMode, setProgressBarDelay, start, visit };