Update svelteSortOrder

Author: zerodevx

.prettierrc

@@ -4,6 +4,6 @@
   "singleQuote": true,
   "trailingComma": "none",
   "proseWrap": "always",
-  "svelteSortOrder": "options-scripts-styles-markup",
+  "svelteSortOrder": "options-scripts-markup-styles",
   "svelteIndentScriptAndStyle": false
 }

docs/App.svelte

@@ -2,7 +2,6 @@
 /*eslint no-useless-escape: "off"*/
 import { tick } from 'svelte'
 import { SvelteToast, toast } from '../src'
-//import Prism from './Prism.svelte'
 import DummyComponent from './Dummy.svelte'
 import camelCase from 'camelcase'
 import Prism from 'prismjs'
@@ -338,6 +337,36 @@ let formatted
 $: formatted = Prism.highlight(code, Prism.languages.javascript, 'javascript')
 </script>
 
+<div class="container">
+  <div class="w-full h-64 px-2 mt-4 mb-8">
+    <pre
+      class="w-full h-full bg-gray-700 text-gray-200 font-mono shadow rounded-sm overflow-scroll p-4"><code
+        class="language-javascript">{@html formatted}</code
+      ></pre>
+  </div>
+  <div class="flex flex-row flex-wrap items-center justify-center">
+    {#each buttons as btn}
+      <button
+        class:selected={selected === btn.name}
+        on:click={() => {
+          handleClick(btn)
+        }}
+        data-btn={camelCase(btn.name)}
+      >
+        {btn.name}
+      </button>
+    {/each}
+  </div>
+</div>
+
+<div class="top">
+  <SvelteToast options={{ initial: 0, intro: { y: -64 } }} target="new" />
+</div>
+
+<div class:colors class:bottom>
+  <SvelteToast {options} />
+</div>
+
 <style>
 :global(.custom) {
   --toastBackground: #4299e1;
@@ -372,33 +401,3 @@ $: formatted = Prism.highlight(code, Prism.languages.javascript, 'javascript')
   }
 }
 </style>
-
-<div class="container">
-  <div class="w-full h-64 px-2 mt-4 mb-8">
-    <pre
-      class="w-full h-full bg-gray-700 text-gray-200 font-mono shadow rounded-sm overflow-scroll p-4"><code
-        class="language-javascript">{@html formatted}</code
-      ></pre>
-  </div>
-  <div class="flex flex-row flex-wrap items-center justify-center">
-    {#each buttons as btn}
-      <button
-        class:selected={selected === btn.name}
-        on:click={() => {
-          handleClick(btn)
-        }}
-        data-btn={camelCase(btn.name)}
-      >
-        {btn.name}
-      </button>
-    {/each}
-  </div>
-</div>
-
-<div class="top">
-  <SvelteToast options={{ initial: 0, intro: { y: -64 } }} target="new" />
-</div>
-
-<div class:colors class:bottom>
-  <SvelteToast {options} />
-</div>

src/SvelteToast.svelte

@@ -15,6 +15,20 @@ $: items = $toast.filter((i) => i.target === target)
 const getCss = (theme) => Object.keys(theme).reduce((a, c) => `${a}${c}:${theme[c]};`, '')
 </script>
 
+<ul class="_toastContainer">
+  {#each items as item (item.id)}
+    <li
+      class={item.classes.join(' ')}
+      in:fly={item.intro}
+      out:fade
+      animate:flip={{ duration: 200 }}
+      style={getCss(item.theme)}
+    >
+      <ToastItem {item} />
+    </li>
+  {/each}
+</ul>
+
 <style>
 ._toastContainer {
   top: var(--toastContainerTop, 1.5rem);
@@ -29,17 +43,3 @@ const getCss = (theme) => Object.keys(theme).reduce((a, c) => `${a}${c}:${theme[
   z-index: var(--toastContainerZIndex, 9999);
 }
 </style>
-
-<ul class="_toastContainer">
-  {#each items as item (item.id)}
-    <li
-      class={item.classes.join(' ')}
-      in:fly={item.intro}
-      out:fade
-      animate:flip={{ duration: 200 }}
-      style={getCss(item.theme)}
-    >
-      <ToastItem {item} />
-    </li>
-  {/each}
-</ul>

src/ToastItem.svelte

@@ -60,6 +60,20 @@ onDestroy(() => {
 })
 </script>
 
+<div class="_toastItem" class:pe={item.pausable} on:mouseenter={pause} on:mouseleave={resume}>
+  <div role="status" class="_toastMsg" class:pe={item.component}>
+    {#if item.component}
+      <svelte:component this={item.component.src} {...getProps()} />
+    {:else}
+      {@html item.msg}
+    {/if}
+  </div>
+  {#if item.dismissable}
+    <div class="_toastBtn pe" role="button" tabindex="-1" on:click={close}>✕</div>
+  {/if}
+  <progress class="_toastBar" value={$progress} />
+</div>
+
 <style>
 ._toastItem {
   width: var(--toastWidth, 16rem);
@@ -129,17 +143,3 @@ onDestroy(() => {
   background: var(--toastProgressBackground, var(--toastBarBackground, rgba(33, 150, 243, 0.75)));
 }
 </style>
-
-<div class="_toastItem" class:pe={item.pausable} on:mouseenter={pause} on:mouseleave={resume}>
-  <div role="status" class="_toastMsg" class:pe={item.component}>
-    {#if item.component}
-      <svelte:component this={item.component.src} {...getProps()} />
-    {:else}
-      {@html item.msg}
-    {/if}
-  </div>
-  {#if item.dismissable}
-    <div class="_toastBtn pe" role="button" tabindex="-1" on:click={close}>✕</div>
-  {/if}
-  <progress class="_toastBar" value={$progress} />
-</div>