inertiajs · Apr 23, 2021 · Apr 23, 2021 · Apr 23, 2021 · Apr 23, 2021 · May 7, 2021
Showing with 145 additions and 61 deletions.

+1 −0 packages/inertia-vue/tests/cypress/integration/links.test.js

+76 −27 packages/inertia-vue3/src/app.js

+53 −31 packages/inertia/src/router.ts

+15 −3 packages/inertia/src/types.ts
diff --git a/packages/inertia-vue/tests/cypress/integration/links.test.js b/packages/inertia-vue/tests/cypress/integration/links.test.js
@@ -824,6 +824,7 @@ describe('Links', () => {
 
       it('restores all tracked scroll regions when pressing the back button from another website', () => {
         cy.get('.off-site')
+          .wait(50)
           .click({ force: true })
           .then(() => {
             cy.url().should('eq', Cypress.config().baseUrl + '/non-inertia')

diff --git a/packages/inertia-vue3/src/app.js b/packages/inertia-vue3/src/app.js
@@ -1,11 +1,16 @@
 import useForm from './useForm'
 import remember from './remember'
-import { computed, h, markRaw, ref } from 'vue'
+import { computed, h, markRaw, ref, nextTick } from 'vue'
 import { createHeadManager, Inertia } from '@inertiajs/inertia'
+import cloneDeep from 'lodash.clonedeep'
 
-const component = ref(null)
 const page = ref({})
-const key = ref(null)
+const pageKey = ref(null)
+const pageComponent = ref(null)
+
+const dialog = ref({})
+const dialogKey = ref(null)
+const dialogComponent = ref(null)
 let headManager = null
 
 export default {
@@ -35,9 +40,9 @@ export default {
     },
   },
   setup({ initialPage, initialComponent, resolveComponent, titleCallback, onHeadUpdate }) {
-    component.value = initialComponent ? markRaw(initialComponent) : null
+    pageComponent.value = initialComponent ? markRaw(initialComponent) : null
+    pageKey.value = null
     page.value = initialPage
-    key.value = null
 
     const isServer = typeof window === 'undefined'
     headManager = createHeadManager(isServer, titleCallback, onHeadUpdate)
@@ -47,37 +52,80 @@ export default {
         initialPage,
         resolveComponent,
         swapComponent: async (args) => {
-          component.value = markRaw(args.component)
-          page.value = args.page
-          key.value = args.preserveState ? key.value : Date.now()
+          const { dialog: _dialog, ..._page } = args.page
+
+          page.value = _page
+          pageKey.value = (args.preserveState || args.dialogComponent) ? pageKey.value : Date.now()
+          pageComponent.value = markRaw(args.component)
+
+          if (args.dialogComponent) {
+            nextTick(() => {
+              function shouldAppear() {
+                const newKey = [args.dialogComponent, ...Object.values(args.dialogComponent.components)].find(component => component.dialogKey)?.dialogKey
+                const currentKey = [dialogComponent.value || {}, ...Object.values(dialogComponent.value?.components || {})].find(component => component.dialogKey)?.dialogKey
+
+                return !_dialog.eager &&
+                    !(dialog.value.open &&
+                      (_dialog.component === dialog.value.component || (newKey && currentKey && newKey === currentKey))
+                    )
+              }
+
+              dialog.value = { ...cloneDeep(_dialog), open: true, appear: shouldAppear() }
+              dialogKey.value = (args.preserveState && args.dialogComponent) ? dialogKey.value : Date.now()
+              dialogComponent.value = markRaw(args.dialogComponent)
+            })
+          } else if (dialog.value.open === true) {
+            dialog.value.open = false
+          }
         },
       })
     }
 
-    return () => {
-      if (component.value) {
-        component.value.inheritAttrs = !!component.value.inheritAttrs
+    function renderPage() {
+      pageComponent.value.inheritAttrs = !!pageComponent.value.inheritAttrs
 
-        const child = h(component.value, {
-          ...page.value.props,
-          key: key.value,
-        })
+      return h(pageComponent.value, {
+        ...page.value.props,
+        dialog: false,
+        key: pageKey.value,
+      })
+    }
 
-        if (component.value.layout) {
-          if (typeof component.value.layout === 'function') {
-            return component.value.layout(h, child)
-          }
+    function renderLayout(child) {
+      if (typeof pageComponent.value.layout === 'function') {
+        return pageComponent.value.layout(h, child)
+      } else if (Array.isArray(pageComponent.value.layout)) {
+        return pageComponent.value.layout
+          .concat(child)
+          .reverse()
+          .reduce((child, layout) => {
+            layout.inheritAttrs = !!layout.inheritAttrs
+            return h(layout, { ...page.value.props }, () => child)
+          })
+      }
 
-          return (Array.isArray(component.value.layout) ? component.value.layout : [component.value.layout])
-            .concat(child)
-            .reverse()
-            .reduce((child, layout) => {
-              layout.inheritAttrs = !!layout.inheritAttrs
-              return h(layout, { ...page.value.props }, () => child)
-            })
+      return [
+        h(pageComponent.value.layout, { ...page.value.props }, () => child),
+        renderDialog(),
+      ]
+    }
+
+    function renderDialog() {
+      return dialogComponent.value ? h(dialogComponent.value, {
+        ...dialog.value.props,
+        key: dialogKey.value,
+      }) : null
+    }
+
+    return () => {
+      if (pageComponent.value) {
+        const page = renderPage()
+
+        if (pageComponent.value.layout) {
+          return renderLayout(page)
         }
 
-        return child
+        return [page, renderDialog()]
       }
     }
   },
@@ -89,6 +137,7 @@ export const plugin = {
 
     Object.defineProperty(app.config.globalProperties, '$inertia', { get: () => Inertia })
     Object.defineProperty(app.config.globalProperties, '$page', { get: () => page.value })
+    Object.defineProperty(app.config.globalProperties, '$dialog', { get: () => dialog.value })
     Object.defineProperty(app.config.globalProperties, '$headManager', { get: () => headManager })
 
     app.mixin(remember)

diff --git a/packages/inertia/src/router.ts b/packages/inertia/src/router.ts
@@ -83,15 +83,17 @@ export class Router {
     }
   }
 
-  protected restoreScrollPositions(): void {
+  protected restoreScrollPositions(attempt = 1): void {
     if (this.page.scrollRegions) {
-      this.scrollRegions().forEach((region: Element, index: number) => {
-        const scrollPosition = this.page.scrollRegions[index]
-        if (scrollPosition) {
-          region.scrollTop = scrollPosition.top
-          region.scrollLeft = scrollPosition.left
-        }
-      })
+      const availableRegions = this.scrollRegions()
+      if (attempt <= 20 && (this.page.scrollRegions.length !== availableRegions.length)) {
+        Promise.resolve().then(() => this.restoreScrollPositions(attempt + 1))
+      } else {
+        return availableRegions.forEach((region: Element, index: number) => {
+          region.scrollTop = this.page.scrollRegions[index].top
+          region.scrollLeft = this.page.scrollRegions[index].left
+        })
+      }
     }
   }
 
@@ -275,6 +277,7 @@ export class Router {
         Accept: 'text/html, application/xhtml+xml',
         'X-Requested-With': 'XMLHttpRequest',
         'X-Inertia': true,
+        'X-Inertia-Context': this.page.context,
         ...(only.length ? {
           'X-Inertia-Partial-Component': this.page.component,
           'X-Inertia-Partial-Data': only.join(','),
@@ -294,22 +297,31 @@ export class Router {
         return Promise.reject({ response })
       }
 
-      const pageResponse: Page = response.data
-      if (only.length && pageResponse.component === this.page.component) {
-        pageResponse.props = { ...this.page.props, ...pageResponse.props }
+      let page: Page = response.data
+      if (response.data.type === 'dialog') {
+        page = this.page
+        page.dialog = {
+          component: response.data.component,
+          props: response.data.props,
+          url: response.data.url,
+          eager: false,
+        }
+      }
+      if (only.length && page.component === this.page.component) {
+        page.props = { ...this.page.props, ...page.props }
       }
-      preserveScroll = this.resolvePreserveOption(preserveScroll, pageResponse) as boolean
-      preserveState = this.resolvePreserveOption(preserveState, pageResponse)
-      if (preserveState && window.history.state?.rememberedState && pageResponse.component === this.page.component) {
-        pageResponse.rememberedState = window.history.state.rememberedState
+      preserveScroll = this.resolvePreserveOption(preserveScroll, page)
+      preserveState = this.resolvePreserveOption(preserveState, page)
+      if (preserveState && window.history.state?.rememberedState && page.component === this.page.component) {
+        page.rememberedState = window.history.state.rememberedState
       }
       const requestUrl = url
-      const responseUrl = hrefToUrl(pageResponse.url)
+      const responseUrl = hrefToUrl(page.url)
       if (requestUrl.hash && !responseUrl.hash && urlWithoutHash(requestUrl).href === responseUrl.href) {
         responseUrl.hash = requestUrl.hash
-        pageResponse.url = responseUrl.href
+        page.url = responseUrl.href
       }
-      return this.setPage(pageResponse, { visitId, replace, preserveScroll, preserveState })
+      return this.setPage(page, { visitId, replace, preserveScroll, preserveState })
     }).then(() => {
       const errors = this.page.props.errors || {}
       if (Object.keys(errors).length > 0) {
@@ -368,28 +380,30 @@ export class Router {
       if (visitId === this.visitId) {
         page.scrollRegions = page.scrollRegions || []
         page.rememberedState = page.rememberedState || {}
-        replace = replace || hrefToUrl(page.url).href === window.location.href
+        replace = replace || hrefToUrl(page.dialog?.url || page.url).href === window.location.href
         replace ? this.replaceState(page) : this.pushState(page)
-        this.swapComponent({ component, page, preserveState }).then(() => {
-          if (!preserveScroll) {
-            this.resetScrollPositions()
-          }
-          if (!replace) {
-            fireNavigateEvent(page)
-          }
+        Promise.resolve(page.dialog ? this.resolveComponent(page.dialog.component) : null).then(dialogComponent => {
+          this.swapComponent({ component, page, preserveState, dialogComponent }).then(() => {
+            if (!preserveScroll) {
+              this.resetScrollPositions()
+            }
+            if (!replace) {
+              fireNavigateEvent(page)
+            }
+          })
         })
       }
     })
   }
 
   protected pushState(page: Page): void {
     this.page = page
-    window.history.pushState(page, '', page.url)
+    window.history.pushState(page, '', page.dialog?.url || page.url)
   }
 
   protected replaceState(page: Page): void {
     this.page = page
-    window.history.replaceState(page, '', page.url)
+    window.history.replaceState(page, '', page.dialog?.url || page.url)
   }
 
   protected handlePopstateEvent(event: PopStateEvent): void {
@@ -399,9 +413,11 @@ export class Router {
       Promise.resolve(this.resolveComponent(page.component)).then(component => {
         if (visitId === this.visitId) {
           this.page = page
-          this.swapComponent({ component, page, preserveState: false }).then(() => {
-            this.restoreScrollPositions()
-            fireNavigateEvent(page)
+          Promise.resolve(page.dialog ? this.resolveComponent(page.dialog.component) : null).then(dialogComponent => {
+            this.swapComponent({component, page, preserveState: false, dialogComponent}).then(() => {
+              this.restoreScrollPositions()
+              fireNavigateEvent(page)
+            })
           })
         }
       })
@@ -442,6 +458,12 @@ export class Router {
     return this.visit(url, { preserveState: true, ...options, method: Method.DELETE })
   }
 
+  public closeDialog(): void {
+    delete this.page.dialog
+    delete this.page.rememberedState
+    this.setPage(this.page)
+  }
+
   public remember(data: unknown, key = 'default'): void {
     this.replaceState({
       ...this.page,

diff --git a/packages/inertia/src/types.ts b/packages/inertia/src/types.ts
@@ -19,17 +19,27 @@ export interface PageProps {
   [key: string]: unknown
 }
 
-export interface Page<SharedProps = PageProps> {
+export interface PagePayload<SharedProps = PageProps> {
   component: string,
   props: PageProps & SharedProps & {
     errors: Errors & ErrorBag;
   }
   url: string,
-  version: string|null
+}
+
+export interface DialogPayload extends PagePayload {
+  eager?: boolean
+}
+
+export interface Page<SharedProps = PageProps> extends PagePayload<SharedProps> {
+  type?: string,
+  dialog?: DialogPayload,
+  context: string,
+  version: string|null,
 
   // Refactor away
   scrollRegions: Array<{ top: number, left: number }>
-  rememberedState: Record<string, unknown>
+  rememberedState?: Record<string, unknown>
   resolvedErrors: Errors
 }
 
@@ -39,10 +49,12 @@ export type PageHandler = ({
   component,
   page,
   preserveState,
+  dialogComponent,
 }: {
   component: Component,
   page: Page,
   preserveState: PreserveStateOption,
+  dialogComponent?: Component|null
 }) => Promise<unknown>
 
 export type PreserveStateOption = boolean|string|((page: Page) => boolean)