Merge pull request #36 from mattjennings/svelte-5

Svelte 5

.gitignore

@@ -1,7 +1,9 @@
 .DS_Store
 node_modules
 /.svelte-kit
+/dist
+/dist-docs
 /package
-
+.astro/
 .vercel
 .vercel_build_output

.prettierrc

@@ -1,7 +1,10 @@
 {
-	"useTabs": false,
-	"singleQuote": true,
-	"trailingComma": "none",
-	"printWidth": 100,
-	"semi": false
+  "useTabs": false,
+  "singleQuote": true,
+  "trailingComma": "none",
+  "printWidth": 100,
+  "semi": false,
+  "plugins": ["prettier-plugin-svelte"],
+  "pluginSearchDirs": ["."],
+  "overrides": [{ "files": "*.svelte", "options": { "parser": "svelte" } }]
 }

README.md

@@ -18,11 +18,7 @@ Add `Modals` somewhere in your app. This is where the modals will render.
 </script>
 
 <Modals>
-  <div
-    slot="backdrop"
-    class="backdrop"
-    on:click={closeModal}
-  />
+  <div slot="backdrop" class="backdrop" on:click={closeModal} />
 </Modals>
 
 <style>
@@ -32,7 +28,7 @@ Add `Modals` somewhere in your app. This is where the modals will render.
     bottom: 0;
     right: 0;
     left: 0;
-    background: rgba(0,0,0,0.50)
+    background: rgba(0, 0, 0, 0.5);
   }
 </style>
 ```
@@ -110,7 +106,7 @@ Open it
 
 ```html
 <script>
-  import { openModal } from 'svelte-modals'
+  import { openModal } from 'svelte-modals/legacy'
   import Modal from './Modal.svelte'
 
   function handleClick() {

astro.config.mjs

@@ -0,0 +1,70 @@
+// @ts-check
+import { defineConfig } from 'astro/config'
+import starlight from '@astrojs/starlight'
+import liveCode from 'astro-live-code'
+
+import svelte from '@astrojs/svelte'
+
+// https://astro.build/config
+export default defineConfig({
+  srcDir: 'docs',
+  outDir: 'dist-docs',
+  vite: {
+    resolve: {
+      alias: {
+        'svelte-modals/legacy': '/src/lib/legacy.svelte.ts',
+        'svelte-modals': '/src/lib/index.ts',
+        $lib: '/docs/lib'
+      },
+      dedupe: ['svelte-modals']
+    }
+  },
+  integrations: [
+    starlight({
+      title: 'Svelte Modals',
+      social: {
+        github: 'https://github.com/mattjennings/svelte-modals'
+      },
+      sidebar: [
+        {
+          label: 'Overview',
+          items: [
+            { label: 'Getting Started', slug: 'overview/getting-started' },
+            { label: 'How it works', slug: 'overview/how-it-works' }
+          ]
+        },
+        {
+          label: 'Modal Components',
+          items: [
+            { label: 'Props', slug: 'modal-components/props' },
+            { label: 'Transitions', slug: 'modal-components/transitions' },
+            { label: 'Snippets', slug: 'modal-components/snippets' },
+            { label: 'Lazy loading', slug: 'modal-components/lazy-loading' },
+            { label: 'Preventing close', slug: 'modal-components/preventing-close' }
+          ]
+        },
+        {
+          label: 'API',
+          items: [
+            { label: 'modals', slug: 'api/modals' },
+            { label: '<Modals />', slug: 'api/modals-component' }
+          ]
+        },
+        {
+          label: 'Migrations',
+          items: [{ label: 'v2', slug: 'migrations/v2' }]
+        }
+      ],
+      customCss: ['./docs/styles.css']
+    }),
+    svelte({
+      preprocess: []
+    }),
+    liveCode({
+      layout: '/docs/lib/layouts/code/Code.astro',
+      defaultProps: {
+        'client:load': true
+      }
+    })
+  ]
+})