rename classes

docs/content/docs/api/modals-component.mdx

@@ -2,8 +2,6 @@
 title: <Modals />
 layout: $lib/layouts/BaseLayout.astro
 ---
-import { Code } from '@astrojs/starlight/components';
-import ModalsDTS from '../../../../dist/modals-context.svelte.d.ts?raw'
 
 Renders the current stack of modals
 

docs/content/docs/api/modals.mdx

@@ -3,7 +3,7 @@ title: modals
 layout: $lib/layouts/BaseLayout.astro
 ---
 import { Code, Badge} from '@astrojs/starlight/components';
-import ModalsDTS from '../../../../dist/modals-context.svelte.d.ts?raw'
+import ModalsDTS from '../../../../dist/modal-stack.svelte.d.ts?raw'
 
 The main entry point for the modals API.
 

src/lib/ModalContext.svelte

@@ -3,11 +3,11 @@
   import { on } from 'svelte/events'
 
   const key = Symbol('modal')
-  function setModal(modal: Modal) {
+  function setModal(modal: StackedModal) {
     setContext(key, modal)
   }
 
-  export function getModal(): Modal {
+  export function getModal(): StackedModal {
     return getContext(key)
   }
 
@@ -43,9 +43,9 @@
 </script>
 
 <script lang="ts">
-  import type { Modal } from './modal.svelte'
+  import type { StackedModal } from './stacked-modal.svelte'
 
-  const { modal, children }: { modal: Modal; children: any } = $props()
+  const { modal, children }: { modal: StackedModal; children: any } = $props()
 
   setModal(modal)
 </script>

src/lib/Modals.svelte

@@ -1,27 +1,27 @@
 <script lang="ts" module>
-  export const modals = new ModalsContext()
+  export const modals = new ModalStack()
 
   export interface ModalsProps {
-    context?: ModalsContext
-    backdrop?: Snippet<[modals: ModalsContext]>
+    context?: ModalStack
+    backdrop?: Snippet<[modals: ModalStack]>
     modal?: Snippet<
       [
         modal: {
           component: ModalComponent<ModalProps<any>, {}, string>
           props: ModalProps
         },
-        modals: ModalsContext
+        modals: ModalStack
       ]
     >
-    loading?: Snippet<[modals: ModalsContext]>
+    loading?: Snippet<[modals: ModalStack]>
   }
 </script>
 
 <script lang="ts">
   import type { Snippet } from 'svelte'
   import ModalContext from './ModalContext.svelte'
-  import type { ModalProps } from './modal.svelte'
-  import { ModalsContext } from './modals-context.svelte'
+  import type { ModalProps } from './stacked-modal.svelte'
+  import { ModalStack } from './modal-stack.svelte'
   import type { LazyModalComponent, ModalComponent } from './types'
 
   function isLazyModal(

src/lib/index.ts

@@ -1,5 +1,5 @@
 export { default as Modals, modals, type ModalsProps } from './Modals.svelte'
 export { getModal, onBeforeClose, exitBeforeEnter } from './ModalContext.svelte'
-export * from './modal.svelte'
-export * from './modals-context.svelte'
+export * from './stacked-modal.svelte'
+export * from './modal-stack.svelte'
 export type { LazyModalComponent, ModalComponent } from './types.d.ts'

src/lib/legacy.svelte.ts

@@ -1,11 +1,11 @@
 import { writable } from 'svelte/store'
-import { ModalsContext } from './modals-context.svelte'
+import { ModalStack } from './modal-stack.svelte'
 import { modals } from './Modals.svelte'
-import { Modal } from './modal.svelte'
+import { StackedModal } from './stacked-modal.svelte'
 import Modals from './LegacyModals.svelte'
 
-const modalsStore = writable<Modal[]>([])
-const actionStore = writable<ModalsContext['action']>(null)
+const modalsStore = writable<StackedModal[]>([])
+const actionStore = writable<ModalStack['action']>(null)
 
 // sync rune to modals store
 $effect.root(() => {
@@ -17,7 +17,7 @@ $effect.root(() => {
   actionStore.set(modals.action)
 })
 
-const openModal: ModalsContext['open'] = async (...args) => {
+const openModal: ModalStack['open'] = async (...args) => {
   try {
     return await modals.open(...args)
   } catch (e) {

src/lib/modals-context.svelte.ts → src/lib/modal-stack.svelte.ts

@@ -1,11 +1,11 @@
-import { Modal, type ModalProps } from './modal.svelte'
+import { StackedModal, type ModalProps } from './stacked-modal.svelte'
 import type { LazyModalComponent, ModalComponent } from './types'
 
-export class ModalsContext {
+export class ModalStack {
   /**
    * The current stack of modals
    */
-  stack = $state<Modal[]>([])
+  stack = $state<StackedModal[]>([])
 
   /**
    * The last action that was performed on the modals stack. This
@@ -65,7 +65,7 @@ export class ModalsContext {
       this.transitioning = true
     }
 
-    const modal = new Modal(this, {
+    const modal = new StackedModal(this, {
       id: options?.id,
       component,
       props

src/lib/modal.svelte.ts → src/lib/stacked-modal.svelte.ts

@@ -1,5 +1,4 @@
-import { get, writable, type Writable } from 'svelte/store'
-import { ModalsContext } from './modals-context.svelte'
+import { ModalStack } from './modal-stack.svelte'
 import type { LazyModalComponent, ModalComponent } from './types'
 
 export interface ModalProps<ReturnValue = any> extends Record<string, any> {
@@ -11,18 +10,18 @@ export interface ModalProps<ReturnValue = any> extends Record<string, any> {
 
 type CloseFn<R> = (...args: R extends void ? [] : [result: R]) => boolean
 
-export class Modal<R = any> {
+export class StackedModal<R = any> {
   private static _idCounter = 0
   private _props: Record<string, any>
   private result = createDeferredPromise<R>()
 
   id: string
   component: ModalComponent | LazyModalComponent
-  modals: ModalsContext
+  modals: ModalStack
   exitBeforeEnter = $state(false)
 
   constructor(
-    modals: ModalsContext,
+    modals: ModalStack,
     {
       id,
       component,
@@ -33,7 +32,7 @@ export class Modal<R = any> {
       props?: Record<string, any>
     }
   ) {
-    this.id = id || (Modal._idCounter++).toString()
+    this.id = id || (StackedModal._idCounter++).toString()
     this.component = component
     this._props = props ?? {}
     this.modals = modals
@@ -50,7 +49,7 @@ export class Modal<R = any> {
   })
 
   get index() {
-    return this.modals.stack.indexOf(this as Modal<any>)
+    return this.modals.stack.indexOf(this as StackedModal<any>)
   }
 
   get props(): ModalProps & Record<string, any> {

src/lib/types.d.ts

@@ -1,5 +1,5 @@
 import type { Component } from 'svelte'
-import type { ModalProps } from './modal.svelte'
+import type { ModalProps } from './stacked-modal.svelte'
 
 export type ModalComponent<
   Props extends ModalProps<any> = ModalProps<any>,

src/tests/modal.spec.ts

@@ -1,13 +1,13 @@
 /* eslint-disable @typescript-eslint/no-empty-function */
-import { Modal, ModalsContext, type ModalComponent, type ModalProps } from '../lib'
+import { StackedModal, ModalStack, type ModalComponent, type ModalProps } from '../lib'
 
 const FakeComponent = class {} as any as ModalComponent<ModalProps<{ foo: 'bar' }>>
 
-const modals = new ModalsContext()
+const modals = new ModalStack()
 
 describe('close', () => {
   test('returns the value from modal.close()', async () => {
-    const modal = new Modal(modals, { component: FakeComponent })
+    const modal = new StackedModal(modals, { component: FakeComponent })
     modals.stack[0] = modal
     const promise = modal.promise
 
@@ -19,7 +19,7 @@ describe('close', () => {
   })
 
   test('return type of modal.close is inferred', async () => {
-    const modal = new Modal(modals, { component: FakeComponent })
+    const modal = new StackedModal(modals, { component: FakeComponent })
     modals.stack[0] = modal
     const promise = modal.promise
     modal.close({ foo: 'bar' })
@@ -33,7 +33,7 @@ describe('onBeforeClose', () => {
   test('prevents closing modal', () => {
     const fn = vi.fn().mockImplementation(() => false)
 
-    const modal = new Modal(modals, { component: FakeComponent })
+    const modal = new StackedModal(modals, { component: FakeComponent })
     modal.onBeforeClose = fn
 
     expect(modal.close()).toBe(false)
@@ -43,7 +43,7 @@ describe('onBeforeClose', () => {
   test('allows modal to close', () => {
     const fn = vi.fn().mockImplementation(() => true)
 
-    const modal = new Modal(modals, { component: FakeComponent })
+    const modal = new StackedModal(modals, { component: FakeComponent })
     modal.onBeforeClose = fn
 
     expect(modal.close()).toBe(true)