@inertiajs/core 2.2.12 → 2.2.13

package/dist/index.esm.js

@@ -35,7 +35,9 @@ var config = new Config({
     recentlySuccessfulDuration: 2e3
   },
   future: {
-    preserveEqualProps: false
+    preserveEqualProps: false,
+    useDataInertiaHeadAttribute: false,
+    useDialogForErrorModal: false
   },
   prefetch: {
     cacheFor: 3e4
@@ -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));
@@ -1292,7 +1312,8 @@ var PrefetchedRequests = class {
         "onPrefetched",
         "onCancelToken",
         "onPrefetching",
-        "async"
+        "async",
+        "viewTransition"
       ]
     );
   }
@@ -1449,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
@@ -1458,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";
@@ -1467,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";
@@ -1497,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 {
@@ -1560,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() {
@@ -1613,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) {
@@ -2050,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;
@@ -2148,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,
@@ -2159,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) {
@@ -2175,7 +2252,8 @@ var Router = class {
         ...options,
         async: true,
         showProgress: false,
-        prefetch: true
+        prefetch: true,
+        viewTransition: false
       }),
       ...this.getVisitEvents(options)
     };
@@ -2207,6 +2285,7 @@ var Router = class {
       preserveUrl: false,
       prefetch: false,
       invalidateCacheTags: [],
+      viewTransition: false,
       ...options,
       ...configuredOptions
     };
@@ -2393,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;
@@ -2408,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;
   },
@@ -2464,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) {
@@ -2476,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 {
@@ -2495,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)