@inertiajs/core 3.0.0-beta.2 → 3.0.0-beta.3

package/dist/index.js

@@ -1,5 +1,5 @@
 // src/router.ts
-import { cloneDeep as cloneDeep3, get as get7, isEqual as isEqual3, set as set5 } from "lodash-es";
+import { cloneDeep as cloneDeep4, get as get7, isEqual as isEqual3, set as set5 } from "lodash-es";
 
 // src/config.ts
 import { get, has, set } from "lodash-es";
@@ -99,7 +99,7 @@ var fireFlashEvent = (flash) => {
 };
 
 // src/history.ts
-import { cloneDeep as cloneDeep2, isEqual } from "lodash-es";
+import { cloneDeep as cloneDeep3, isEqual } from "lodash-es";
 
 // src/sessionStorage.ts
 var SessionStorage = class {
@@ -271,7 +271,7 @@ var getKeyFromSessionStorage = async () => {
 };
 
 // src/page.ts
-import { get as get3, set as set3 } from "lodash-es";
+import { cloneDeep as cloneDeep2, get as get3, set as set3 } from "lodash-es";
 
 // src/prefetched.ts
 import { cloneDeep, get as get2 } from "lodash-es";
@@ -976,9 +976,9 @@ function resolveUrlMethodPairComponent(pair) {
   if (!pair.component) {
     return null;
   }
-  if (Array.isArray(pair.component)) {
+  if (typeof pair.component !== "string") {
     console.error(
-      `The "component" property on the URL method pair received an array of components (${pair.component.join(", ")}), but only a single component string is supported for instant visits. Pass an explicit component name instead.`
+      `The "component" property on the URL method pair received multiple components (${Object.keys(pair.component).join(", ")}), but only a single component string is supported for instant visits. Use the withComponent() method to specify which component to use.`
     );
     return null;
   }
@@ -1001,6 +1001,9 @@ var CurrentPage = class {
     this.cleared = false;
     this.pendingDeferredProps = null;
     this.historyQuotaExceeded = false;
+    this.optimisticBaseline = {};
+    this.pendingOptimistics = [];
+    this.optimisticCounter = 0;
   }
   init({
     initialPage,
@@ -1048,7 +1051,6 @@ var CurrentPage = class {
       const scrollRegions = !isServer3 && preserveScroll ? Scroll.getScrollRegions() : [];
       replace = replace || isSameUrlWithoutHash(hrefToUrl(page2.url), location);
       const pageForHistory = { ...page2, flash: {} };
-      delete pageForHistory.optimisticUpdatedAt;
       return new Promise(
         (resolve) => replace ? history.replaceState(pageForHistory, resolve) : history.pushState(pageForHistory, resolve)
       ).then(() => {
@@ -1147,7 +1149,7 @@ var CurrentPage = class {
     viewTransition
   }) {
     const doSwap = () => this.swapComponent({ component, page: page2, preserveState });
-    if (!viewTransition || !document?.startViewTransition) {
+    if (!viewTransition || !document?.startViewTransition || document.visibilityState === "hidden") {
       return doSwap();
     }
     const viewTransitionCallback = typeof viewTransition === "boolean" ? () => null : viewTransition;
@@ -1159,19 +1161,55 @@ var CurrentPage = class {
   resolve(component, page2) {
     return Promise.resolve(this.resolveComponent(component, page2));
   }
-  recordOptimisticUpdate(keys, updatedAt) {
-    if (!this.page.optimisticUpdatedAt) {
-      this.page.optimisticUpdatedAt = {};
+  nextOptimisticId() {
+    return ++this.optimisticCounter;
+  }
+  setBaseline(key, value) {
+    if (!(key in this.optimisticBaseline)) {
+      this.optimisticBaseline[key] = value;
+    }
+  }
+  updateBaseline(key, value) {
+    if (key in this.optimisticBaseline) {
+      this.optimisticBaseline[key] = value;
+    }
+  }
+  hasBaseline(key) {
+    return key in this.optimisticBaseline;
+  }
+  registerOptimistic(id, callback) {
+    this.pendingOptimistics.push({ id, callback });
+  }
+  unregisterOptimistic(id) {
+    this.pendingOptimistics = this.pendingOptimistics.filter((entry) => entry.id !== id);
+  }
+  replayOptimistics() {
+    const baselineKeys = Object.keys(this.optimisticBaseline);
+    if (baselineKeys.length === 0) {
+      return {};
     }
-    for (const key of keys) {
-      if (updatedAt > (this.page.optimisticUpdatedAt[key] || 0)) {
-        this.page.optimisticUpdatedAt[key] = updatedAt;
+    const props = cloneDeep2(this.page.props);
+    for (const key of baselineKeys) {
+      props[key] = cloneDeep2(this.optimisticBaseline[key]);
+    }
+    for (const { callback } of this.pendingOptimistics) {
+      const result = callback(cloneDeep2(props));
+      if (result) {
+        Object.assign(props, result);
       }
     }
+    const replayedProps = {};
+    for (const key of baselineKeys) {
+      replayedProps[key] = props[key];
+    }
+    return replayedProps;
   }
-  shouldPreserveOptimistic(key, updatedAt) {
-    const lastUpdatedAt = this.page.optimisticUpdatedAt?.[key];
-    return lastUpdatedAt !== void 0 && updatedAt < lastUpdatedAt;
+  pendingOptimisticCount() {
+    return this.pendingOptimistics.length;
+  }
+  clearOptimisticState() {
+    this.optimisticBaseline = {};
+    this.pendingOptimistics = [];
   }
   isTheSame(page2) {
     return this.page.component === page2.component;
@@ -1280,7 +1318,7 @@ var History = class {
     } catch {
       return {
         ...page2,
-        props: cloneDeep2(page2.props)
+        props: cloneDeep3(page2.props)
       };
     }
   }
@@ -2231,7 +2269,6 @@ var Response = class _Response {
     }
     await history.processQueue();
     history.preserveUrl = this.requestParams.all().preserveUrl;
-    const previousFlash = page.get().flash;
     await this.setPage();
     const errors = page.get().props.errors || {};
     if (Object.keys(errors).length > 0) {
@@ -2244,7 +2281,7 @@ var Response = class _Response {
       router.flush(page.get().url);
     }
     const { flash } = page.get();
-    if (Object.keys(flash).length > 0 && (!this.requestParams.isPartial() || !isEqual2(flash, previousFlash))) {
+    if (Object.keys(flash).length > 0 && !this.requestParams.isDeferredPropsRequest()) {
       fireFlashEvent(flash);
       this.requestParams.all().onFlash(flash);
     }
@@ -2383,16 +2420,15 @@ var Response = class _Response {
     return responseUrl.pathname + responseUrl.search + responseUrl.hash;
   }
   preserveOptimisticProps(pageResponse) {
-    const optimisticUpdatedAt = page.get().optimisticUpdatedAt;
-    if (!optimisticUpdatedAt || !router.hasPendingOptimistic()) {
+    if (!router.hasPendingOptimistic()) {
       return;
     }
     for (const key of Object.keys(pageResponse.props)) {
-      if (key in optimisticUpdatedAt) {
+      if (page.hasBaseline(key)) {
+        page.updateBaseline(key, pageResponse.props[key]);
         pageResponse.props[key] = page.get().props[key];
       }
     }
-    pageResponse.optimisticUpdatedAt = { ...optimisticUpdatedAt };
   }
   preserveEqualProps(pageResponse) {
     if (pageResponse.component !== page.get().component) {
@@ -2715,7 +2751,7 @@ var RequestStream = class {
   }
   send(request) {
     this.requests.push(request);
-    request.send().then(() => {
+    request.send().finally(() => {
       this.requests = this.requests.filter((r) => r !== request);
     });
   }
@@ -3004,7 +3040,7 @@ var Router = class {
       preserveState: true,
       props(currentProps) {
         const newValue = typeof value === "function" ? value(get7(currentProps, name), currentProps) : value;
-        return set5(cloneDeep3(currentProps), name, newValue);
+        return set5(cloneDeep4(currentProps), name, newValue);
       },
       ...options || {}
     });
@@ -3102,7 +3138,7 @@ var Router = class {
     const sharedProps = Object.fromEntries(
       (current.sharedProps ?? []).filter((key) => key in current.props).map((key) => [key, current.props[key]])
     );
-    const resolvedPageProps = typeof visit.pageProps === "function" ? visit.pageProps(cloneDeep3(current.props), cloneDeep3(sharedProps)) : visit.pageProps;
+    const resolvedPageProps = typeof visit.pageProps === "function" ? visit.pageProps(cloneDeep4(current.props), cloneDeep4(sharedProps)) : visit.pageProps;
     const intermediateProps = resolvedPageProps !== null ? { ...resolvedPageProps } : { ...sharedProps };
     const intermediatePage = {
       component: visit.component,
@@ -3144,7 +3180,7 @@ var Router = class {
       options.method = options.method ?? urlMethodPair.method;
     }
     const defaultVisitOptionsCallback = config.get("visitOptions");
-    const configuredOptions = defaultVisitOptionsCallback ? defaultVisitOptionsCallback(href.toString(), cloneDeep3(options)) || {} : {};
+    const configuredOptions = defaultVisitOptionsCallback ? defaultVisitOptionsCallback(href.toString(), cloneDeep4(options)) || {} : {};
     const mergedOptions = {
       method: "get",
       data: {},
@@ -3211,21 +3247,25 @@ var Router = class {
   }
   applyOptimisticUpdate(optimistic, events) {
     const currentProps = page.get().props;
-    const optimisticProps = optimistic(cloneDeep3(currentProps));
+    const optimisticProps = optimistic(cloneDeep4(currentProps));
     if (!optimisticProps) {
       return;
     }
-    const propsSnapshot = {};
+    const changedKeys = [];
     for (const key of Object.keys(optimisticProps)) {
       if (!isEqual3(currentProps[key], optimisticProps[key])) {
-        propsSnapshot[key] = cloneDeep3(currentProps[key]);
+        changedKeys.push(key);
       }
     }
-    if (Object.keys(propsSnapshot).length === 0) {
+    if (changedKeys.length === 0) {
       return;
     }
-    const updatedAt = Date.now();
-    page.recordOptimisticUpdate(Object.keys(propsSnapshot), updatedAt);
+    const id = page.nextOptimisticId();
+    const component = page.get().component;
+    for (const key of changedKeys) {
+      page.setBaseline(key, cloneDeep4(currentProps[key]));
+    }
+    page.registerOptimistic(id, optimistic);
     page.setPropsQuietly({ ...currentProps, ...optimisticProps });
     let shouldRestore = true;
     const originalOnSuccess = events.onSuccess;
@@ -3235,17 +3275,16 @@ var Router = class {
     };
     const originalOnFinish = events.onFinish;
     events.onFinish = (visit) => {
-      if (shouldRestore) {
-        const propsToRestore = {};
-        for (const [key, value] of Object.entries(propsSnapshot)) {
-          if (!page.shouldPreserveOptimistic(key, updatedAt)) {
-            propsToRestore[key] = value;
-          }
-        }
-        if (Object.keys(propsToRestore).length > 0) {
-          page.setPropsQuietly({ ...page.get().props, ...propsToRestore });
+      page.unregisterOptimistic(id);
+      if (shouldRestore && page.get().component === component) {
+        const replayedProps = page.replayOptimistics();
+        if (Object.keys(replayedProps).length > 0) {
+          page.setPropsQuietly({ ...page.get().props, ...replayedProps });
         }
       }
+      if (page.pendingOptimisticCount() === 0) {
+        page.clearOptimisticState();
+      }
       return originalOnFinish(visit);
     };
   }