support lazy loading components

Author: mattjennings

.eslintrc.cjs

@@ -1,20 +1,23 @@
 module.exports = {
-	root: true,
-	parser: '@typescript-eslint/parser',
-	extends: ['eslint:recommended', 'plugin:@typescript-eslint/recommended', 'prettier'],
-	plugins: ['svelte3', '@typescript-eslint'],
-	ignorePatterns: ['*.cjs'],
-	overrides: [{ files: ['*.svelte'], processor: 'svelte3/svelte3' }],
-	settings: {
-		'svelte3/typescript': () => require('typescript')
-	},
-	parserOptions: {
-		sourceType: 'module',
-		ecmaVersion: 2019
-	},
-	env: {
-		browser: true,
-		es2017: true,
-		node: true
-	}
-};
+  root: true,
+  parser: '@typescript-eslint/parser',
+  extends: ['eslint:recommended', 'plugin:@typescript-eslint/recommended', 'prettier'],
+  plugins: ['svelte3', '@typescript-eslint'],
+  ignorePatterns: ['*.cjs'],
+  overrides: [{ files: ['*.svelte'], processor: 'svelte3/svelte3' }],
+  settings: {
+    'svelte3/typescript': () => require('typescript')
+  },
+  rules: {
+    '@typescript-eslint/no-explicit-any': 'off'
+  },
+  parserOptions: {
+    sourceType: 'module',
+    ecmaVersion: 2019
+  },
+  env: {
+    browser: true,
+    es2017: true,
+    node: true
+  }
+}

package.json

@@ -1,6 +1,6 @@
 {
   "name": "svelte-modals",
-  "version": "1.0.4",
+  "version": "1.1.0-beta.1",
   "svelte": "index.js",
   "scripts": {
     "dev": "svelte-kit dev",
@@ -12,6 +12,7 @@
     "lint": "prettier --check --plugin-search-dir=. . && eslint --ignore-path .gitignore .",
     "format": "prettier --write --plugin-search-dir=. .",
     "release": "npm run package && npm publish ./package --access public",
+    "release:next": "npm run package && npm publish ./package --access public --tag next",
     "prepare": "ts-patch install -s"
   },
   "devDependencies": {

src/lib/Modals.svelte

@@ -1,5 +1,13 @@
 <script>
   import { modals, exitBeforeEnter, transitioning } from './store'
+
+  function isLazyModal(component) {
+    return typeof component.prototype === 'undefined'
+  }
+
+  async function getComponent(component) {
+    return component().then((res) => res.default)
+  }
 </script>
 
 {#if $modals.length > 0}
@@ -8,16 +16,36 @@
 
 <slot>
   {#each $modals as modal, i (i)}
-    <svelte:component
-      this={modal.component}
-      isOpen={i === $modals.length - 1 && !$transitioning}
-      on:introstart={() => {
-        $exitBeforeEnter = true
-      }}
-      on:outroend={() => {
-        $transitioning = false
-      }}
-      {...modal.props || {}}
-    />
+    <!-- lazy modal -->
+    {#if isLazyModal(modal.component)}
+      {#await getComponent(modal.component)}
+        <slot name="loading" />
+      {:then component}
+        <svelte:component
+          this={component}
+          isOpen={i === $modals.length - 1 && !$transitioning}
+          {...modal.props}
+          on:introstart={() => {
+            $exitBeforeEnter = true
+          }}
+          on:outroend={() => {
+            $transitioning = false
+          }}
+        />
+      {/await}
+    {:else}
+      <!-- normal modal -->
+      <svelte:component
+        this={modal.component}
+        isOpen={i === $modals.length - 1 && !$transitioning}
+        {...modal.props}
+        on:introstart={() => {
+          $exitBeforeEnter = true
+        }}
+        on:outroend={() => {
+          $transitioning = false
+        }}
+      />
+    {/if}
   {/each}
 </slot>

src/lib/store.ts

@@ -1,4 +1,4 @@
-import type { SvelteComponent, SvelteComponentTyped } from 'svelte'
+import type { SvelteComponentTyped } from 'svelte'
 
 import { get, writable } from 'svelte/store'
 
@@ -12,9 +12,12 @@ export const transitioning = writable(null)
 /**
  * A Svelte store containing the current modal stack
  */
-export const modals = writable<
-  Array<{ component: new (...args: any) => SvelteComponent; props?: unknown }>
->([])
+export const modals = writable<StoredModal[]>([])
+
+interface StoredModal {
+  component: SvelteModalComponent<any> | LazySvelteModalComponent<any>
+  props?: Record<string, unknown>
+}
 
 /**
  * A Svelte store describing how the current modal came to be active ("push" or "pop").
@@ -59,7 +62,7 @@ export function closeModal(): void {
  * Opens a new modal
  */
 export function openModal<T>(
-  component: new (...args: any) => SvelteComponentTyped<T>,
+  component: SvelteModalComponent<T> | Array<SvelteModalComponent<T>>,
   props?: Omit<T, 'isOpen'>,
   options?: {
     /**
@@ -80,12 +83,17 @@ export function openModal<T>(
   exitBeforeEnter.set(false)
 
   if (options?.replace) {
-    modals.update((prev) => [...prev.slice(0, prev.length - 1), { component, props }])
+    modals.update(
+      (prev) => [...prev.slice(0, prev.length - 1), { component, props }] as StoredModal[]
+    )
   } else {
-    modals.update((prev) => [...prev, { component, props }])
+    modals.update((prev) => [...prev, { component, props }] as StoredModal[])
   }
 }
 
 function pop(amount = 1) {
   modals.update((prev) => prev.slice(0, Math.max(0, prev.length - amount)))
 }
+
+export type SvelteModalComponent<T> = new (...args: any) => SvelteComponentTyped<T>
+export type LazySvelteModalComponent<T> = () => Promise<{ default: SvelteModalComponent<T> }>

src/routes/_components/Sidebar.svelte

@@ -22,6 +22,10 @@
       href: '/transitions',
       label: 'Transitions'
     },
+    {
+      href: '/lazy-loading',
+      label: 'Lazy Loading'
+    },
     {
       href: '/examples',
       label: 'Examples'

src/routes/api.md

@@ -41,6 +41,39 @@ Renders when any modals are open. The slot is empty by default.
 </style>
 ```
 
+#### `loading`
+
+Rendered when the current modal is being lazy loaded (see [Lazy Loading](/lazy-loading)).
+
+```svelte
+<script>
+  import { Modals, closeModal } from 'svelte-modals'
+  import Spinner from './Spinner.svelte'
+</script>
+
+<Modals>
+  <div
+    slot="backdrop"
+    class="backdrop"
+    on:click={closeModal}
+  />
+  <div slot="loading">
+    <Spinner />
+  </div>
+</Modals>
+
+<style>
+  .backdrop {
+    position: fixed;
+    top: 0;
+    bottom: 0;
+    right: 0;
+    left: 0;
+    background: rgba(0, 0, 0, 0.5);
+}
+</style>
+```
+
 <br />
 
 #### `default`

src/routes/examples/index.md

@@ -1,7 +1,9 @@
 # Examples
 
-[Basic](https://svelte.dev/repl/2f2d171a9ea7458191904cb2feb5a54c?version=3.38.2)
+[Basic](https://svelte.dev/repl/2f2d171a9ea7458191904cb2feb5a54c)
 
-[Transitions](https://svelte.dev/repl/5f57abd90c4d4c8b89dd3d632e27dc3b?version=3.38.2)
+[Transitions](https://svelte.dev/repl/5f57abd90c4d4c8b89dd3d632e27dc3b)
 
-[Random Transitions](https://svelte.dev/repl/2e52b3c0c49b479a8f7be24dedce670a?version=3.38.2)
+[Random Transitions](https://svelte.dev/repl/2e52b3c0c49b479a8f7be24dedce670a)
+
+[Async Modals](https://svelte.dev/repl/6c777499c64d412d82a86bd5351a5ca6)

src/routes/index.md

@@ -18,46 +18,12 @@ A simple, flexible, zero-dependency modal manager for Svelte.
 npm install svelte-modals
 ```
 
-### SvelteKit / Vite
-
-If you are using SvelteKit or Vite, you will need to add the following to your vite config.
-
-For SvelteKit, add this to your `svelte.config.js` file:
-
-```js
-const config = {
-  kit: {
-    // ...
-
-    // add this
-    vite: {
-      optimizeDeps: {
-        exclude: ['svelte-modals']
-      }
-    }
-  }
-}
-```
-
-For regular Vite projects, add this to your `vite.config.js`
-
-```js
-export default {
-  // ...
-
-  // add this
-  optimizeDeps: {
-    exclude: ['svelte-modals']
-  }
-}
-```
-
-_This works around a current bug in Vite that will cause modals not to open. See [this issue for more information](https://github.com/sveltejs/vite-plugin-svelte/issues/124)._
-
 ### Usage
 
 Add `Modals` somewhere in your app. This is where the modals will render.
 
+(If you're using SvelteKit, `__layout.svelte` would be appropriate)
+
 ```svelte
 <script>
   import { Modals, closeModal } from 'svelte-modals'
@@ -89,7 +55,7 @@ Create your Modal component
 <script>
   import { closeModal } from 'svelte-modals'
 
-  // provided by Modals
+  // provided by <Modals />
   export let isOpen
 
   export let title

src/routes/lazy-loading/index.md

@@ -0,0 +1,37 @@
+<script>
+  import { Modals, openModal, closeAllModals } from 'svelte-modals'
+
+  function handleAsync() {
+    openModal(() => import('../_AlertModal.svelte'), {
+        title: "Lazy Modal",
+        message: "This modal was loaded lazily"
+    })
+  }
+
+  function handleAsyncSlow() {
+    openModal(async () => {
+        await new Promise(resolve => setTimeout(resolve, 1000))
+        return import('../_AlertModal.svelte')
+    }, {
+        title: "Lazy Modal",
+        message: "This modal was loaded lazily"
+    })
+  }
+</script>
+
+# Lazy Loading
+
+`openModal` supports lazy loading of your modal components using dynamic imports.
+
+The backdrop will be shown while the component loading.
+
+```js
+import { openModal } from 'svelte-modals'
+
+openModal(() => import('./AlertModal.svelte'), {
+  title: 'Lazy Modal',
+  message: 'This modal was loaded lazily'
+})
+```
+
+<button class="mt-6" on:click={handleAsync}>Open Modal</button>