use from 'svelte-multiselect' imports in examples

instead of flashing onMount $lib -> svelte-multiselect replace
janosh · Feb 17, 2024 · 7239d60 · 7239d60
1 parent 63768e8
commit 7239d60
Show file tree

Hide file tree

Showing 15 changed files with 27 additions and 26 deletions.
diff --git a/package.json b/package.json
@@ -47,6 +47,7 @@
     "rehype-autolink-headings": "^7.1.0",
     "rehype-slug": "^6.0.0",
     "svelte-check": "^3.6.3",
+    "svelte-multiselect": "^10.2.0",
     "svelte-preprocess": "^5.1.3",
     "svelte-toc": "^0.5.6",
     "svelte-zoo": "^0.4.9",

diff --git a/src/routes/(demos)/allow-user-options/+page.svx b/src/routes/(demos)/allow-user-options/+page.svx
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import MultiSelect from '$lib'
+  import MultiSelect from 'svelte-multiselect'
   import { foods, languages } from '$site/options'
   import { LanguageSlot } from '$site'
 
@@ -12,7 +12,7 @@
 
 ```svelte example stackblitz id="foods"
 <script>
-  import MultiSelect from '$lib'
+  import MultiSelect from 'svelte-multiselect'
   import { foods } from '$site/options'
   import { Toggle } from 'svelte-zoo'
 
@@ -41,7 +41,7 @@
 
 ```svelte example stackblitz id="languages"
 <script>
-  import MultiSelect from '$lib'
+  import MultiSelect from 'svelte-multiselect'
   import { languages } from '$site/options'
   import { LanguageSlot } from '$site'
 
@@ -67,7 +67,7 @@ You can start with no options and let users populate MultiSelect from scratch. I
 
 ```svelte example stackblitz id="no-default-options"
 <script>
-  import MultiSelect from '$lib'
+  import MultiSelect from 'svelte-multiselect'
 
   let selected = []
 </script>

diff --git a/src/routes/(demos)/css-classes/+page.svx b/src/routes/(demos)/css-classes/+page.svx
@@ -2,7 +2,7 @@
 
 ```svelte example stackblitz id="foods"
 <script>
-  import MultiSelect from '$lib'
+  import MultiSelect from 'svelte-multiselect'
 
   const options = [...Array(7).keys()].map((idx) => `Option ${idx + 1}`)
 </script>

diff --git a/src/routes/(demos)/disabled/+page.svx b/src/routes/(demos)/disabled/+page.svx
@@ -5,7 +5,7 @@
 
 ```svelte example stackblitz id="disabled-input-title"
 <script>
-  import MultiSelect from '$lib'
+  import MultiSelect from 'svelte-multiselect'
 </script>
 
 <MultiSelect

diff --git a/src/routes/(demos)/duplicates/+page.md b/src/routes/(demos)/duplicates/+page.md
@@ -4,7 +4,7 @@
 
 ```svelte example stackblitz id="disabled-input-title"
 <script>
-  import MultiSelect from '$lib'
+  import MultiSelect from 'svelte-multiselect'
   import { Toggle } from 'svelte-zoo'
 
   let duplicates = true

diff --git a/src/routes/(demos)/form/+page.svx b/src/routes/(demos)/form/+page.svx
@@ -6,7 +6,7 @@ This example shows the JavaScript way of handling MultiSelect fields in form sub
 
 ```svelte example stackblitz
 <script lang="ts">
-  import MultiSelect from '$lib'
+  import MultiSelect from 'svelte-multiselect'
   import { ColorSlot } from '$site'
   import { colors } from '$site/options'
 

diff --git a/src/routes/(demos)/kit-form-actions/+page.svx b/src/routes/(demos)/kit-form-actions/+page.svx
@@ -14,7 +14,7 @@ HTML.
 
 ```svelte example stackblitz
 <script lang="ts">
-  import MultiSelect from '$lib'
+  import MultiSelect from 'svelte-multiselect'
   import { ColorSlot } from '$site'
   import { colors } from '$site/options'
   import { repository } from '$root/package.json'

diff --git a/src/routes/(demos)/min-max-select/+page.svx b/src/routes/(demos)/min-max-select/+page.svx
@@ -10,7 +10,7 @@
 
 ```svelte example stackblitz id="languages"
 <script lang="ts">
-  import MultiSelect from '$lib'
+  import MultiSelect from 'svelte-multiselect'
   import { languages } from '$site/options'
   import { LanguageSlot } from '$site'
 </script>
@@ -41,7 +41,7 @@ When setting an integer value for `maxSelect` Multiselect will
 
 ```svelte example stackblitz
 <script lang="ts">
-  import MultiSelect from '$lib'
+  import MultiSelect from 'svelte-multiselect'
 
   function handle_submit(event: SubmitEvent) {
     const form_data = new FormData(event.target)
@@ -61,7 +61,7 @@ Of course, you can combine `maxSelect={n}` and `required={m}` where `n>=m`.
 
 ```svelte example stackblitz
 <script lang="ts">
-  import MultiSelect from '$lib'
+  import MultiSelect from 'svelte-multiselect'
 
   function handle_submit(event: SubmitEvent) {
     const form_data = new FormData(event.target)
@@ -84,7 +84,7 @@ Of course, you can combine `maxSelect={n}` and `required={m}` where `n>=m`.
 ```svelte example stackblitz
 <script>
   // for https://github.com/janosh/svelte-multiselect/issues/249
-  import MultiSelect from '$lib'
+  import MultiSelect from 'svelte-multiselect'
   import { onMount } from 'svelte'
 
   const red_pill = `🔴  &ensp; Red Pill (<a href="https://wikipedia.org/wiki/Red_pill_and_blue_pill">what?</a>)`

diff --git a/src/routes/(demos)/parse-labels-as-html/+page.svx b/src/routes/(demos)/parse-labels-as-html/+page.svx
@@ -4,7 +4,7 @@ When `parseLabelsAsHtml={true}`, MultiSelect renders HTML in option labels.
 
 ```svelte example stackblitz
 <script>
-  import MultiSelect from '$lib'
+  import MultiSelect from 'svelte-multiselect'
 
   const red_pill = `🔴  &ensp; Red Pill (<a href="https://wikipedia.org/wiki/Red_pill_and_blue_pill">what?</a>)`
   const blue_pill = `🔵  &ensp; Blue Pill &nbsp; <img height="35px" style="vertical-align: middle;" src="https://upload.wikimedia.org/wikipedia/en/a/ab/Morpheus.jpg" />`

diff --git a/src/routes/(demos)/persistent/+page.svx b/src/routes/(demos)/persistent/+page.svx
@@ -12,7 +12,7 @@
 
 ```svelte example stackblitz id="languages"
 <script>
-  import MultiSelect from '$lib'
+  import MultiSelect from 'svelte-multiselect'
   import { languages } from '$site/options'
   import { LanguageSlot } from '$site'
   import { language_store } from '$site/stores'

diff --git a/src/routes/(demos)/slots/+page.svx b/src/routes/(demos)/slots/+page.svx
@@ -8,7 +8,7 @@
 
 ```svelte example stackblitz id="languages-1"
 <script>
-  import MultiSelect from '$lib'
+  import MultiSelect from 'svelte-multiselect'
   import { languages } from '$site/options'
   import { LanguageSlot, MinusIcon } from '$site'
   import { Icon } from 'svelte-zoo'
@@ -33,7 +33,7 @@
 
 ```svelte example stackblitz id="languages-2"
 <script>
-  import MultiSelect from '$lib'
+  import MultiSelect from 'svelte-multiselect'
   import { languages } from '$site/options'
   import { LanguageSlot } from '$site'
   import { Icon } from 'svelte-zoo'
@@ -69,7 +69,7 @@
 
 ```svelte example stackblitz id="languages-2"
 <script>
-  import MultiSelect from '$lib'
+  import MultiSelect from 'svelte-multiselect'
   import { languages } from '$site/options'
   import { LanguageSlot } from '$site'
   import { Icon } from 'svelte-zoo'

diff --git a/src/routes/(demos)/sort-selected/+page.svx b/src/routes/(demos)/sort-selected/+page.svx
@@ -8,7 +8,7 @@
 
 ```svelte example stackblitz id="default-sort"
 <script>
-  import MultiSelect from '$lib'
+  import MultiSelect from 'svelte-multiselect'
   import { frontend_libs } from '$site/options'
 </script>
 

diff --git a/src/routes/(demos)/ui/+page.svx b/src/routes/(demos)/ui/+page.svx
@@ -5,7 +5,7 @@
 
 ```svelte example stackblitz id="foods"
 <script>
-  import MultiSelect from '$lib'
+  import MultiSelect from 'svelte-multiselect'
   import { foods } from '$site/options'
 
   function random_color() {

diff --git a/src/site/Examples.svx b/src/site/Examples.svx
@@ -4,7 +4,7 @@
 
 ```svelte example collapsible repl="https://svelte.dev/repl/e3b88f59f62b498d943ecf7756ab75d7" stackblitz="src/site/Examples.svx"
 <script lang="ts">
-  import MultiSelect from '$lib'
+  import MultiSelect from 'svelte-multiselect'
   import { languages } from '$site/options'
   import LanguageSlot from './LanguageSlot.svelte'
 
@@ -29,7 +29,7 @@
 
 ```svelte example collapsible repl="https://svelte.dev/repl/79e22e1905c94456aa21564b4d5f8759" stackblitz="src/site/Examples.svx"
 <script lang="ts">
-  import MultiSelect from '$lib'
+  import MultiSelect from 'svelte-multiselect'
   import { ml_libs } from '$site/options'
 
   let value: { label: string, disabled: boolean, preselected: boolean }
@@ -64,7 +64,7 @@
 
 ```svelte example collapsible repl="https://svelte.dev/repl/516279bd62ec424986115263c2cdc169" stackblitz="src/site/Examples.svx"
 <script lang="ts">
-  import MultiSelect from '$lib'
+  import MultiSelect from 'svelte-multiselect'
   import { frontend_libs } from '$site/options'
   import RepoSlot from './RepoSlot.svelte'
   import { Confetti } from 'svelte-zoo'
@@ -105,7 +105,7 @@
 
 ```svelte example collapsible repl="https://svelte.dev/repl/3a217c39932047a09f61d6425b04a7c3" stackblitz="src/site/Examples.svx"
 <script lang="ts">
-  import MultiSelect from '$lib'
+  import MultiSelect from 'svelte-multiselect'
   import { colors } from '$site/options'
   import ColorSlot from './ColorSlot.svelte'
 
@@ -143,7 +143,7 @@
 
 ```svelte example collapsible repl="https://svelte.dev/repl/4ff40862436e4bfbb2bd55d234352bb1" stackblitz="src/site/Examples.svx"
 <script lang="ts">
-  import MultiSelect from '$lib'
+  import MultiSelect from 'svelte-multiselect'
   import { countries } from '$site/options'
 
   let selected: string[]

diff --git a/svelte.config.js b/svelte.config.js
@@ -27,7 +27,6 @@ const { default: pkg } = await import(`./package.json`, {
 })
 const defaults = {
   Wrapper: `svelte-zoo/CodeExample.svelte`,
-  pkg: pkg.name,
   repo: pkg.repository,
   hideStyle: true,
 }
@@ -48,6 +47,7 @@ export default {
     alias: {
       $root: `.`,
       $site: `./src/site`,
+      $lib: `svelte-multiselect`,
     },
 
     prerender: {