Throw on invalid <ModalContainer> instance count

src/lib/ModalContainer.svelte

@@ -2,13 +2,15 @@
   import { onDestroy, onMount } from 'svelte';
 
   import Modal from './Modal.svelte';
-  import { animating, destroyModals, stack, updateOptions } from './service';
+  import { animating, destroyModals, stack, updateOptions, modalContainerCount } from './service';
 
   export let options: Record<string, any> = {};
 
   $: updateOptions(options);
 
   onMount(() => {
+    modalContainerCount.update(($count) => $count + 1);
+
     let unsubscribeStack = stack.subscribe(($stack) => {
       document.body.classList.toggle('spm-scrolling-disabled', $stack.length > 0);
     });

src/lib/service.ts

@@ -5,6 +5,7 @@ import { derived, get, writable } from 'svelte/store';
 import { Modal } from './modal';
 import type { ModalOptions, PropsWithoutCloseModal } from './types';
 
+export const modalContainerCount = writable<number>(0);
 export const animating = writable<boolean>(false);
 export const stack = writable<Modal<any>[]>([]);
 export const count = derived(stack, ($stack) => $stack.filter((modal) => !modal.isClosing).length);
@@ -30,6 +31,12 @@ export const openModal = <T extends SvelteComponent>(
   props?: PropsWithoutCloseModal<T> | null, // `null` is a convenience for when you don't want to pass any props but do want to pass options
   options?: ModalOptions
 ): Modal<T> => {
+  if (get(modalContainerCount) === 0) {
+    throw new Error('<ModalContainer /> is missing');
+  } else if (get(modalContainerCount) > 1) {
+    throw new Error('Multiple <ModalContainer /> instances exist in the application. Please make sure there is only one rendered at a time.');
+  }
+
   let modal: Modal<T> = new Modal(component, props ?? undefined, options);
 
   stack.update((modals) => [...modals, modal]);

tests-ct/TestApp.svelte

@@ -17,14 +17,22 @@
   export let modalContainerOptions = {};
   export let modalProps: any;
   export let openModalOptions = {};
+  export let modalContainerCount = 1;
 
   export let resultCallback = (_: unknown) => {
     /**/
   };
 
+  let errorMessage: string | undefined;
+
   async function openFooModal() {
-    let result = await openModal(TestModal, modalProps, openModalOptions);
-    resultCallback(result);
+    try {
+      await openModal(TestModal);
+      let result = await openModal(TestModal, modalProps, openModalOptions);
+      resultCallback(result);
+    } catch (error) {
+      errorMessage = (error as Error).toString();
+    }
   }
 </script>
 
@@ -44,4 +52,10 @@
   </Wrapper>
 {/if}
 
-<ModalContainer options={modalContainerOptions} />
+{#each Array.from({ length: modalContainerCount }) as _}
+  <ModalContainer options={modalContainerOptions} />
+{/each}
+
+{#if errorMessage}
+  <p data-testid="error-message">{errorMessage}</p>
+{/if}

tests-ct/modal-container.spec.js

@@ -0,0 +1,42 @@
+import { expect, test } from '@playwright/experimental-ct-svelte';
+
+import TestApp from './TestApp.svelte';
+
+test.describe('ModalContainer', () => {
+  test.beforeEach(async ({ page }) => {
+    // Reduced motion will speed up animations which comes handy for testing
+    await page.emulateMedia({ reducedMotion: 'reduce' });
+  });
+
+  test('missing', async ({ mount, page }) => {
+    await mount(TestApp, {
+      props: {
+        modalContainerCount: 0,
+      },
+    });
+
+    await expect(page.getByTestId('error-message')).toBeHidden();
+
+    await page.getByTestId('open-modal-button').click();
+
+    await expect(page.getByTestId('error-message')).toHaveText(
+      'Error: <ModalContainer /> is missing'
+    );
+  });
+
+  test('too many', async ({ mount, page, context }) => {
+    await mount(TestApp, {
+      props: {
+        modalContainerCount: 2,
+      },
+    });
+
+    await expect(page.getByTestId('error-message')).toBeHidden();
+
+    await page.getByTestId('open-modal-button').click();
+
+    await expect(page.getByTestId('error-message')).toHaveText(
+      'Error: Multiple <ModalContainer /> instances exist in the application. Please make sure there is only one rendered at a time.'
+    );
+  });
+});