Add router configuration for displaying modal on non-Inertia responses

packages/core/src/index.ts

@@ -1,7 +1,8 @@
 import { Router } from './router'
 
 export { default as createHeadManager } from './head'
-export { hide as hideProgress, reveal as revealProgress, default as setupProgress } from './progress'
+export { setupModal } from './modal'
+export { default as setupProgress, hide as hideProgress, reveal as revealProgress } from './progress'
 export { default as shouldIntercept } from './shouldIntercept'
 export * from './types'
 export { hrefToUrl, mergeDataIntoQueryString, urlWithoutHash } from './url'

packages/core/src/modal.ts

@@ -1,6 +1,22 @@
+import { ModalConfig } from './types'
+
+const settings: ModalConfig = {
+  showOnNonInertiaResponse: true,
+}
+
+export const setupModal = (options: Partial<ModalConfig>): void => {
+  Object.assign(settings, options)
+}
+
+export const getConfig = (): ModalConfig => {
+  return { ...settings }
+}
+
 export default {
   modal: null,
   listener: null,
+  setupModal,
+  getConfig,
 
   show(html: Record<string, unknown> | string): void {
     if (typeof html === 'object') {

packages/core/src/response.ts

@@ -90,7 +90,9 @@ export class Response {
     }
 
     if (fireInvalidEvent(response)) {
-      return modal.show(response.data)
+      if (modal.getConfig().showOnNonInertiaResponse) {
+        return modal.show(response.data)
+      }
     }
   }
 

packages/core/src/types.ts

@@ -336,6 +336,10 @@ export type ProgressSettings = {
   color: string
 }
 
+export type ModalConfig = {
+  showOnNonInertiaResponse?: boolean
+}
+
 declare global {
   interface DocumentEventMap {
     'inertia:before': GlobalEvent<'before'>

packages/react/src/createInertiaApp.ts

@@ -1,4 +1,4 @@
-import { Page, PageProps, PageResolver, router, setupProgress } from '@inertiajs/core'
+import { Page, PageProps, PageResolver, router, setupModal, setupProgress } from '@inertiajs/core'
 import { ComponentType, FunctionComponent, Key, ReactElement, ReactNode, createElement } from 'react'
 import { renderToString } from 'react-dom/server'
 import App from './App'
@@ -30,6 +30,7 @@ export type SetupOptions<ElementType, SharedProps extends PageProps> = {
 type BaseInertiaAppOptions = {
   title?: HeadManagerTitleCallback
   resolve: PageResolver
+  showModalOnNonInertiaResponse?: boolean
 }
 
 type CreateInertiaAppSetupReturnType = ReactInstance | void
@@ -71,6 +72,7 @@ export default async function createInertiaApp<SharedProps extends PageProps = P
   progress = {},
   page,
   render,
+  showModalOnNonInertiaResponse = true,
 }: InertiaAppOptionsForCSR<SharedProps> | InertiaAppOptionsForSSR<SharedProps>): Promise<
   CreateInertiaAppSetupReturnType | CreateInertiaAppSSRContent
 > {
@@ -82,6 +84,10 @@ export default async function createInertiaApp<SharedProps extends PageProps = P
 
   let head = []
 
+  if (!isServer) {
+    setupModal({ showOnNonInertiaResponse: showModalOnNonInertiaResponse })
+  }
+
   const reactApp = await Promise.all([
     resolveComponent(initialPage.component),
     router.decryptHistory().catch(() => {}),

packages/svelte/src/createInertiaApp.ts

@@ -1,4 +1,4 @@
-import { router, setupProgress, type InertiaAppResponse, type Page } from '@inertiajs/core'
+import { router, setupModal, setupProgress, type InertiaAppResponse, type Page } from '@inertiajs/core'
 import escape from 'html-escape'
 import type { ComponentType } from 'svelte'
 import App, { type InertiaAppProps } from './components/App.svelte'
@@ -24,6 +24,7 @@ interface CreateInertiaAppProps {
         showSpinner?: boolean
       }
   page?: Page
+  showModalOnNonInertiaResponse?: boolean
 }
 
 export default async function createInertiaApp({
@@ -32,12 +33,17 @@ export default async function createInertiaApp({
   setup,
   progress = {},
   page,
+  showModalOnNonInertiaResponse = true,
 }: CreateInertiaAppProps): InertiaAppResponse {
   const isServer = typeof window === 'undefined'
   const el = isServer ? null : document.getElementById(id)
   const initialPage: Page = page || JSON.parse(el?.dataset.page || '{}')
   const resolveComponent = (name: string) => Promise.resolve(resolve(name))
 
+  if (!isServer) {
+    setupModal({ showOnNonInertiaResponse: showModalOnNonInertiaResponse })
+  }
+
   const [initialComponent] = await Promise.all([
     resolveComponent(initialPage.component),
     router.decryptHistory().catch(() => {}),

packages/vue3/src/createInertiaApp.ts

@@ -1,4 +1,4 @@
-import { Page, router, setupProgress } from '@inertiajs/core'
+import { Page, router, setupModal, setupProgress } from '@inertiajs/core'
 import { DefineComponent, Plugin, App as VueApp, createSSRApp, h } from 'vue'
 import App, { InertiaApp, InertiaAppProps, plugin } from './app'
 
@@ -17,6 +17,7 @@ interface CreateInertiaAppProps {
       }
   page?: Page
   render?: (app: VueApp) => Promise<string>
+  showModalOnNonInertiaResponse?: boolean
 }
 
 export default async function createInertiaApp({
@@ -27,6 +28,7 @@ export default async function createInertiaApp({
   progress = {},
   page,
   render,
+  showModalOnNonInertiaResponse = true,
 }: CreateInertiaAppProps): Promise<{ head: string[]; body: string }> {
   const isServer = typeof window === 'undefined'
   const el = isServer ? null : document.getElementById(id)
@@ -35,6 +37,10 @@ export default async function createInertiaApp({
 
   let head = []
 
+  if (!isServer) {
+    setupModal({ showOnNonInertiaResponse: showModalOnNonInertiaResponse })
+  }
+
   const vueApp = await Promise.all([
     resolveComponent(initialPage.component),
     router.decryptHistory().catch(() => {}),