@inertiajs/core 2.2.11 → 2.2.13

package/dist/index.esm.js

@@ -1,5 +1,5 @@
 // src/router.ts
-import { cloneDeep as cloneDeep2, get as get3, set as set3 } from "lodash-es";
+import { cloneDeep as cloneDeep3, get as get3, set as set3 } from "lodash-es";
 
 // src/config.ts
 import { get, has, set } from "lodash-es";
@@ -35,7 +35,9 @@ var config = new Config({
     recentlySuccessfulDuration: 2e3
   },
   future: {
-    preserveEqualProps: false
+    preserveEqualProps: false,
+    useDataInertiaHeadAttribute: false,
+    useDialogForErrorModal: false
   },
   prefetch: {
     cacheFor: 3e4
@@ -93,7 +95,7 @@ var firePrefetchingEvent = (visit) => {
 };
 
 // src/history.ts
-import { isEqual } from "lodash-es";
+import { cloneDeep, isEqual } from "lodash-es";
 
 // src/sessionStorage.ts
 var SessionStorage = class {
@@ -476,7 +478,8 @@ var CurrentPage = class {
   set(page2, {
     replace = false,
     preserveScroll = false,
-    preserveState = false
+    preserveState = false,
+    viewTransition = false
   } = {}) {
     if (Object.keys(page2.deferredProps || {}).length) {
       this.pendingDeferredProps = {
@@ -503,6 +506,9 @@ var CurrentPage = class {
         replace ? history.replaceState(page2, () => resolve(null)) : history.pushState(page2, () => resolve(null));
       }).then(() => {
         const isNewComponent = !this.isTheSame(page2);
+        if (!isNewComponent && Object.keys(page2.props.errors || {}).length > 0) {
+          viewTransition = false;
+        }
         this.page = page2;
         this.cleared = false;
         if (isNewComponent) {
@@ -512,7 +518,12 @@ var CurrentPage = class {
           this.fireEventsFor("firstLoad");
         }
         this.isFirstPageLoad = false;
-        return this.swap({ component, page: page2, preserveState }).then(() => {
+        return this.swap({
+          component,
+          page: page2,
+          preserveState,
+          viewTransition
+        }).then(() => {
           if (preserveScroll) {
             window.requestAnimationFrame(() => Scroll.restoreScrollRegions(scrollRegions));
           } else {
@@ -536,7 +547,7 @@ var CurrentPage = class {
       this.page = page2;
       this.cleared = false;
       history.setCurrent(page2);
-      return this.swap({ component, page: page2, preserveState });
+      return this.swap({ component, page: page2, preserveState, viewTransition: false });
     });
   }
   clear() {
@@ -562,9 +573,18 @@ var CurrentPage = class {
   swap({
     component,
     page: page2,
-    preserveState
+    preserveState,
+    viewTransition
   }) {
-    return this.swapComponent({ component, page: page2, preserveState });
+    const doSwap = () => this.swapComponent({ component, page: page2, preserveState });
+    if (!viewTransition || !document?.startViewTransition) {
+      return doSwap();
+    }
+    const viewTransitionCallback = typeof viewTransition === "boolean" ? () => null : viewTransition;
+    return new Promise((resolve) => {
+      const transitionResult = document.startViewTransition(() => doSwap().then(resolve));
+      viewTransitionCallback(transitionResult);
+    });
   }
   resolve(component) {
     return Promise.resolve(this.resolveComponent(component));
@@ -657,9 +677,21 @@ var History = class {
       });
     });
   }
+  clonePageProps(page2) {
+    try {
+      structuredClone(page2.props);
+      return page2;
+    } catch {
+      return {
+        ...page2,
+        props: cloneDeep(page2.props)
+      };
+    }
+  }
   getPageData(page2) {
+    const pageWithClonedProps = this.clonePageProps(page2);
     return new Promise((resolve) => {
-      return page2.encryptHistory ? encryptHistory(page2).then(resolve) : resolve(page2);
+      return page2.encryptHistory ? encryptHistory(pageWithClonedProps).then(resolve) : resolve(pageWithClonedProps);
     });
   }
   processQueue() {
@@ -1038,7 +1070,7 @@ var Polls = class {
 var polls = new Polls();
 
 // src/prefetched.ts
-import { cloneDeep } from "lodash-es";
+import { cloneDeep as cloneDeep2 } from "lodash-es";
 
 // src/objectUtils.ts
 var objectsAreEqual = (obj1, obj2, excludeKeys) => {
@@ -1255,7 +1287,7 @@ var PrefetchedRequests = class {
     }) || null;
   }
   withoutPurposePrefetchHeader(params) {
-    const newParams = cloneDeep(params);
+    const newParams = cloneDeep2(params);
     if (newParams.headers["Purpose"] === "prefetch") {
       delete newParams.headers["Purpose"];
     }
@@ -1280,7 +1312,8 @@ var PrefetchedRequests = class {
         "onPrefetched",
         "onCancelToken",
         "onPrefetching",
-        "async"
+        "async",
+        "viewTransition"
       ]
     );
   }
@@ -1437,7 +1470,7 @@ import { get as get2, isEqual as isEqual2, set as set2 } from "lodash-es";
 var modal_default = {
   modal: null,
   listener: null,
-  show(html) {
+  createIframeAndPage(html) {
     if (typeof html === "object") {
       html = `All Inertia requests must receive a valid Inertia response, however a plain JSON response was received.<hr>${JSON.stringify(
         html
@@ -1446,6 +1479,15 @@ var modal_default = {
     const page2 = document.createElement("html");
     page2.innerHTML = html;
     page2.querySelectorAll("a").forEach((a) => a.setAttribute("target", "_top"));
+    const iframe = document.createElement("iframe");
+    iframe.style.backgroundColor = "white";
+    iframe.style.borderRadius = "5px";
+    iframe.style.width = "100%";
+    iframe.style.height = "100%";
+    return { iframe, page: page2 };
+  },
+  show(html) {
+    const { iframe, page: page2 } = this.createIframeAndPage(html);
     this.modal = document.createElement("div");
     this.modal.style.position = "fixed";
     this.modal.style.width = "100vw";
@@ -1455,11 +1497,6 @@ var modal_default = {
     this.modal.style.backgroundColor = "rgba(0, 0, 0, .6)";
     this.modal.style.zIndex = 2e5;
     this.modal.addEventListener("click", () => this.hide());
-    const iframe = document.createElement("iframe");
-    iframe.style.backgroundColor = "white";
-    iframe.style.borderRadius = "5px";
-    iframe.style.width = "100%";
-    iframe.style.height = "100%";
     this.modal.appendChild(iframe);
     document.body.prepend(this.modal);
     document.body.style.overflow = "hidden";
@@ -1485,6 +1522,55 @@ var modal_default = {
   }
 };
 
+// src/dialog.ts
+var dialog_default = {
+  show(html) {
+    const { iframe, page: page2 } = modal_default.createIframeAndPage(html);
+    iframe.style.boxSizing = "border-box";
+    iframe.style.display = "block";
+    const dialog = document.createElement("dialog");
+    dialog.id = "inertia-error-dialog";
+    Object.assign(dialog.style, {
+      width: "calc(100vw - 100px)",
+      height: "calc(100vh - 100px)",
+      padding: "0",
+      margin: "auto",
+      border: "none",
+      backgroundColor: "transparent"
+    });
+    const dialogStyleElement = document.createElement("style");
+    dialogStyleElement.textContent = `
+      dialog#inertia-error-dialog::backdrop {
+        background-color: rgba(0, 0, 0, 0.6);
+      }
+
+      dialog#inertia-error-dialog:focus {
+        outline: none;
+      }
+    `;
+    document.head.appendChild(dialogStyleElement);
+    dialog.addEventListener("click", (event) => {
+      if (event.target === dialog) {
+        dialog.close();
+      }
+    });
+    dialog.addEventListener("close", () => {
+      dialogStyleElement.remove();
+      dialog.remove();
+    });
+    dialog.appendChild(iframe);
+    document.body.prepend(dialog);
+    dialog.showModal();
+    dialog.focus();
+    if (!iframe.contentWindow) {
+      throw new Error("iframe not yet ready.");
+    }
+    iframe.contentWindow.document.open();
+    iframe.contentWindow.document.write(page2.outerHTML);
+    iframe.contentWindow.document.close();
+  }
+};
+
 // src/response.ts
 var queue2 = new Queue();
 var Response = class _Response {
@@ -1548,7 +1634,7 @@ var Response = class _Response {
       data: this.getDataFromResponse(this.response.data)
     };
     if (fireInvalidEvent(response)) {
-      return modal_default.show(response.data);
+      return config.get("future.useDialogForErrorModal") ? dialog_default.show(response.data) : modal_default.show(response.data);
     }
   }
   isInertiaResponse() {
@@ -1601,7 +1687,8 @@ var Response = class _Response {
     return page.set(pageResponse, {
       replace: this.requestParams.all().replace,
       preserveScroll: this.requestParams.all().preserveScroll,
-      preserveState: this.requestParams.all().preserveState
+      preserveState: this.requestParams.all().preserveState,
+      viewTransition: this.requestParams.all().viewTransition
     });
   }
   getDataFromResponse(response) {
@@ -2038,7 +2125,8 @@ var Router = class {
       ...options,
       async: true,
       showProgress: false,
-      prefetch: true
+      prefetch: true,
+      viewTransition: false
     });
     const visitUrl = visit.url.origin + visit.url.pathname + visit.url.search;
     const currentUrl = window.location.origin + window.location.pathname + window.location.search;
@@ -2099,7 +2187,7 @@ var Router = class {
       preserveState: true,
       props(currentProps) {
         const newValue = typeof value === "function" ? value(get3(currentProps, name), currentProps) : value;
-        return set3(cloneDeep2(currentProps), name, newValue);
+        return set3(cloneDeep3(currentProps), name, newValue);
       },
       ...options || {}
     });
@@ -2136,7 +2224,7 @@ var Router = class {
   clientVisit(params, { replace = false } = {}) {
     const current = page.get();
     const props = typeof params.props === "function" ? params.props(current.props) : params.props ?? current.props;
-    const { onError, onFinish, onSuccess, ...pageParams } = params;
+    const { viewTransition, onError, onFinish, onSuccess, ...pageParams } = params;
     const page2 = {
       ...current,
       ...pageParams,
@@ -2147,7 +2235,8 @@ var Router = class {
     page.set(page2, {
       replace,
       preserveScroll,
-      preserveState
+      preserveState,
+      viewTransition
     }).then(() => {
       const errors = page.get().props.errors || {};
       if (Object.keys(errors).length === 0) {
@@ -2163,7 +2252,8 @@ var Router = class {
         ...options,
         async: true,
         showProgress: false,
-        prefetch: true
+        prefetch: true,
+        viewTransition: false
       }),
       ...this.getVisitEvents(options)
     };
@@ -2175,7 +2265,7 @@ var Router = class {
       options.method = options.method ?? urlMethodPair.method;
     }
     const defaultVisitOptionsCallback = config.get("visitOptions");
-    const configuredOptions = defaultVisitOptionsCallback ? defaultVisitOptionsCallback(href.toString(), cloneDeep2(options)) || {} : {};
+    const configuredOptions = defaultVisitOptionsCallback ? defaultVisitOptionsCallback(href.toString(), cloneDeep3(options)) || {} : {};
     const mergedOptions = {
       method: "get",
       data: {},
@@ -2195,6 +2285,7 @@ var Router = class {
       preserveUrl: false,
       prefetch: false,
       invalidateCacheTags: [],
+      viewTransition: false,
       ...options,
       ...configuredOptions
     };
@@ -2381,6 +2472,9 @@ function formDataToObject(source) {
 
 // src/head.ts
 var Renderer = {
+  preferredAttribute() {
+    return config.get("future.useDataInertiaHeadAttribute") ? "data-inertia" : "inertia";
+  },
   buildDOMElement(tag) {
     const template = document.createElement("template");
     template.innerHTML = tag;
@@ -2396,12 +2490,13 @@ var Renderer = {
     return script;
   },
   isInertiaManagedElement(element) {
-    return element.nodeType === Node.ELEMENT_NODE && element.getAttribute("inertia") !== null;
+    return element.nodeType === Node.ELEMENT_NODE && element.getAttribute(this.preferredAttribute()) !== null;
   },
   findMatchingElementIndex(element, elements) {
-    const key = element.getAttribute("inertia");
+    const attribute = this.preferredAttribute();
+    const key = element.getAttribute(attribute);
     if (key !== null) {
-      return elements.findIndex((element2) => element2.getAttribute("inertia") === key);
+      return elements.findIndex((element2) => element2.getAttribute(attribute) === key);
     }
     return -1;
   },
@@ -2452,8 +2547,9 @@ function createHeadManager(isServer2, titleCallback, onUpdate) {
   }
   function collect() {
     const title = titleCallback("");
+    const attribute = Renderer.preferredAttribute();
     const defaults = {
-      ...title ? { title: `<title inertia="">${title}</title>` } : {}
+      ...title ? { title: `<title ${attribute}="">${title}</title>` } : {}
     };
     const elements = Object.values(states).reduce((carry, elements2) => carry.concat(elements2), []).reduce((carry, element) => {
       if (element.indexOf("<") === -1) {
@@ -2464,7 +2560,7 @@ function createHeadManager(isServer2, titleCallback, onUpdate) {
         carry.title = title2 ? `${title2[1]}${titleCallback(title2[2])}${title2[3]}` : element;
         return carry;
       }
-      const match = element.match(/ inertia="[^"]+"/);
+      const match = element.match(attribute === "inertia" ? / inertia="[^"]+"/ : / data-inertia="[^"]+"/);
       if (match) {
         carry[match[0]] = element;
       } else {
@@ -2483,6 +2579,7 @@ function createHeadManager(isServer2, titleCallback, onUpdate) {
     createProvider: function() {
       const id = connect();
       return {
+        preferredAttribute: Renderer.preferredAttribute,
         reconnect: () => reconnect(id),
         update: (elements) => update(id, elements),
         disconnect: () => disconnect(id)