refactor: pre-rxjs refactor

Author: mateothegreat

demo/src/lib/basic.ts

@@ -5,13 +5,13 @@ import Basic from "./basic.svelte";
 export const openBasic = (): ModalInstance<CustomBasicProps> => {
   return manager.open<CustomBasicProps>({
     component: Basic,
-    backdrop: {
-      class: "custom-backdrop-class",
-      attributes: {
-        "data-where-am-i": "backdrop",
-        "data-my-component-name": "basic.svelte"
-      }
-    },
+    // backdrop: {
+    //   class: "custom-backdrop-class",
+    //   attributes: {
+    //     "data-where-am-i": "backdrop",
+    //     "data-my-component-name": "basic.svelte"
+    //   }
+    // },
     dialog: {
       attributes: {
         "data-where-am-i": "dialog",

demo/src/lib/escapable.ts

@@ -26,7 +26,20 @@ export const openEscapeable = (): ModalInstance<EscapableProps> => {
   const instance = manager.open<EscapableProps>({
     id: "modal-escapable",
     component: Modal,
-    backdrop: false,
+    backdrop: {
+      class: "custom-backdrop-class",
+      attributes: {
+        "data-where-am-i": "backdrop",
+        "data-my-component-name": "escapable.svelte"
+      }
+    },
+    dialog: {
+      class: "custom-dialog-class",
+      attributes: {
+        "data-where-am-i": "dialog",
+        "data-my-component-name": "escapable.svelte"
+      }
+    },
     keybindings: [
       {
         key: Key.Escape,
@@ -35,13 +48,6 @@ export const openEscapeable = (): ModalInstance<EscapableProps> => {
             instance.manager.open<EscapableProps>({
               id: `${instance.config.id}-escapable`,
               component: CloseConfirmation,
-              backdrop: {
-                class: "custom-backdrop-class",
-                attributes: {
-                  "data-where-am-i": "backdrop",
-                  "data-my-component-name": "escapable.svelte"
-                }
-              },
               props: {
                 ref: instance as unknown as ModalInstance<EscapableProps>,
                 close: (parent: ModalInstance<EscapableProps>) => {

package.json

@@ -2,11 +2,11 @@
   "name": "@mateothegreat/svelte5-modal-manager",
   "version": "0.2.5",
   "type": "module",
-  "moduleResolution": "bundler",
-  "svelte": "./index.js",
-  "types": "./index.d.ts",
   "exports": {
-    ".": "./src/index.ts"
+    ".": {
+      "types": "./src/index.ts",
+      "svelte": "./src/index.ts"
+    }
   },
   "files": [
     "./src"
@@ -17,23 +17,23 @@
     "dev": "cd demo && npm run dev"
   },
   "devDependencies": {
-    "@sveltejs/package": "^2.3.12",
-    "@sveltejs/vite-plugin-svelte": "^5.1.0",
+    "@sveltejs/package": "^2.3.10",
+    "@sveltejs/vite-plugin-svelte": "^5.0.3",
     "@testing-library/svelte": "^5.2.8",
     "@tsconfig/svelte": "^5.0.4",
     "@types/node": "^24.0.10",
     "autoprefixer": "^10.4.21",
     "cpx": "^1.5.0",
     "jsdom": "^26.1.0",
-    "prettier-plugin-svelte": "^3.4.0",
-    "prettier-plugin-tailwindcss": "^0.6.13",
+    "prettier-plugin-svelte": "^3.3.3",
+    "prettier-plugin-tailwindcss": "^0.6.11",
     "rimraf": "^6.0.1",
-    "runed": "^0.29.2",
-    "svelte": "^5.35.3",
-    "svelte-check": "^4.2.2",
+    "runed": "^0.23.4",
+    "svelte": "^5.22.6",
+    "svelte-check": "^4.1.5",
     "tslib": "^2.8.1",
-    "typescript": "^5.8.3",
-    "vitest": "^3.2.4"
+    "typescript": "^5.8.2",
+    "vitest": "^3.0.8"
   },
   "peerDependencies": {
     "svelte": "^5.0.0"

src/index.ts

@@ -0,0 +1 @@
+export * from "./lib";

src/lib/manager.ts

@@ -54,7 +54,6 @@ export class ModalManager {
    * @param id - The unique identifier of the modal to close.
    */
   close(id: string): void {
-    console.log("closing", id, this.instances.get(id)?.overlay);
     unmount(this.instances.get(id)?.overlay);
 
     this.instances.delete(id);
@@ -89,7 +88,6 @@ export class ModalManager {
     // Move all modals that were above this one down by 1
     for (const modal of this.instances.values()) {
       if (modal.index > currentIndex) {
-        console.log("moving down", modal.config.id, modal.index, modal.index - 1);
         modal.index--;
       }
     }
@@ -110,7 +108,6 @@ export class ModalManager {
   private reorder(): void {
     const modals = Array.from(this.instances.values()).sort((a, b) => a.index - b.index);
     modals.forEach((modal, i) => {
-      console.log("reordering", modal.config.id, modal.index, i);
       modal.index = i;
 
       // Set the last modal as top

src/lib/modal.svelte

@@ -71,10 +71,10 @@
     }
   };
 
-  const backdropConfig = $derived(backdrop(instance.config.backdrop));
+  const backdropConfig = backdrop(instance.config.backdrop);
 </script>
 
-{#if backdropConfig}
+{#if backdropConfig && instance.manager.instances.size === 0}
   <div
     onmousedown={handleClick}
     id={instance.config.id}
@@ -101,6 +101,7 @@
       class={instance.config.dialog?.class}
       class:modal-content={true}
       {...instance.config.dialog?.attributes}>
+      {JSON.stringify(instance.config.dialog)}
       <div class="dialog-wrapper">
         <instance.config.component {instance} />
       </div>
@@ -120,8 +121,6 @@
         left: 0;
         right: 0;
         top: 0;
-        background-color: rgba(0, 0, 0, 0.5);
-        backdrop-filter: blur(4px);
         transition: all 500ms;
         display: flex;
         justify-content: center;