add 'Open in StackBlitz' links to example code fences

contributing.md

@@ -36,7 +36,7 @@ Any new features should come with corresponding tests. If you fix a bug, please
 This repo has 3 required CI checks that have to pass for every PR before merging:
 
 - tests: run as [GitHub Action](https://github.com/janosh/svelte-multiselect/actions/workflows/test.yml) ([workflow code](https://github.com/janosh/svelte-multiselect/blob/main/.github/workflows/test.yml))
-- linting: handled by [pre-commit.ci](https://results.pre-commit.ci/repo/github/365228700)
+- linting: handled by [pre-commit.ci](https://results.pre-commit.ci/latest/github/janosh/svelte-multiselect/main)
 - docs: [continuous deployment](https://github.com/janosh/svelte-multiselect/blob/main/.github/workflows/gh-pages.yml) through GitHub Pages
 
 ## 🆕 New release

package.json

@@ -20,7 +20,7 @@
     "test": "vitest --run --coverage tests/unit/*.ts && playwright test tests/*.test.ts",
     "test:unit": "vitest tests/unit/*.ts",
     "test:e2e": "playwright test tests/*.test.ts",
-    "changelog": "npx auto-changelog -p --output changelog.md --unreleased-only --hide-credit --commit-limit false"
+    "changelog": "npx auto-changelog --package --output changelog.md --unreleased-only --hide-credit --commit-limit false"
   },
   "devDependencies": {
     "@iconify/svelte": "^3.0.1",

src/app.css

@@ -33,14 +33,21 @@ main {
   width: 100%;
   max-width: 50em;
 }
-button {
-  color: var(--text-color);
+button,
+a.btn {
+  color: white;
   cursor: pointer;
   border: none;
   border-radius: 3pt;
-  background: darkcyan;
+  background-color: darkcyan;
   padding: 2pt 4pt;
   font-size: 12pt;
+  line-height: initial;
+  transition: background-color 0.2s;
+}
+:is(button, a.btn):hover {
+  background-color: teal;
+  color: white;
 }
 a {
   color: var(--blue);

src/components/CollapseIcon.svelte

@@ -1,5 +1,5 @@
 <!-- https://icon-sets.iconify.design/bx/collapse-vertical -->
-<svg width="32" height="32" viewBox="0 0 24 24" fill="currentColor" {...$$props}>
+<svg width="32" height="32" viewBox="0 0 24 24" fill="currentColor" {...$$props} on:click>
   <path
     d="M12 7.59L7.05 2.64L5.64 4.05L12 10.41l6.36-6.36l-1.41-1.41L12 7.59zM5.64 19.95l1.41 1.41L12 16.41l4.95 4.95l1.41-1.41L12 13.59l-6.36 6.36z"
   />

src/components/ExampleCode.svelte

@@ -1,44 +1,53 @@
 <script lang="ts">
+  import { page } from '$app/stores'
+  import Icon from '@iconify/svelte'
   import { onMount } from 'svelte'
   import { name } from '../../package.json'
   import CopyButton from './CopyButton.svelte'
 
-  export let src: string // just here to avoid unknown prop warning
   export let meta: Record<string, string>
-  let node: HTMLElement
-
+  export let src: string // just here to avoid unknown prop warning
   src
-  $: ({ id } = meta)
+
+  let node: HTMLElement
 
   onMount(() => {
-    // replace $lib with 'name' in code
-    node.innerHTML = node.innerHTML.replace(/\$lib/g, name)
+    // replace $lib with package name in code
+    node.innerHTML = node.innerHTML.replaceAll(`$lib`, name)
   })
+  $: stackblitz_url = `https://stackblitz.com/github/janosh/svelte-multiselect?file=${encodeURIComponent(
+    `src/routes${$page.route.id}/+page.svx`
+  )}`
 </script>
 
-{#if id}
-  <div {id}>
-    <slot name="example" />
-  </div>
-{:else}
+<div id={meta.id}>
   <slot name="example" />
-{/if}
-
-<pre><aside>
-  <CopyButton content={node?.innerText} />
-</aside><code bind:this={node}><slot name="code" /></code></pre>
+  <div>
+    <aside>
+      <CopyButton content={node?.innerText} />
+      <a href={stackblitz_url} class="btn" target="_blank" rel="noreferrer">
+        <Icon icon="simple-icons:stackblitz" inline />
+        Open in StackBlitz
+      </a>
+    </aside>
+    <pre><code bind:this={node}><slot name="code" /></code></pre>
+  </div>
+</div>
 
 <style>
+  div {
+    position: relative;
+  }
   pre {
     margin-top: 2em;
     background-color: rgba(255, 255, 255, 0.05);
-    position: relative;
   }
   aside {
     position: absolute;
     top: 1em;
     right: 1em;
     display: flex;
-    gap: 1em;
+    gap: 1ex;
+    place-items: center;
   }
 </style>

src/routes/+layout.svelte

@@ -6,18 +6,18 @@
   import { _demo_routes } from './+layout'
 
   $: is_current = (path: string) => {
-    if (path === $page.url.pathname) return `page`
-    if (path !== `/` && $page.url.pathname.includes(path)) return `page`
+    if (path === $page.route.id) return `page`
+    if (path !== `/` && $page.route.id.includes(path)) return `page`
     return undefined
   }
 </script>
 
 <GitHubCorner href={repository} />
 
-{#if !$page.error && $page.url.pathname !== `/`}
+{#if !$page.error && $page.route.id !== `/`}
   <a href="." aria-label="Back to index page">&laquo; home</a>
 {/if}
-{#if _demo_routes.some((route) => $page.url.pathname.endsWith(route))}
+{#if _demo_routes.some((route) => $page.route.id.endsWith(route))}
   <h1>
     <img src="favicon.svg" alt="Svelte MultiSelect" height="50" width="50" />&ensp;Svelte
     MultiSelect Examples

src/routes/disabled/+page.svx

@@ -9,7 +9,7 @@
 </script>
 
 <MultiSelect
-  options={[{ label: `Svelte`, value: `Svelte`, preselected: true }]}
+  options={[{ label: `Svelte`, preselected: true }]}
   disabled
   disabledInputTitle="Super special disabled message"
   --sms-disabled-bg="darkred"

src/routes/kit-form-actions/+page.svx

@@ -2,8 +2,8 @@
   import hljs from 'highlight.js/lib/common'
   import 'highlight.js/styles/vs2015.css'
 
-  // const glob = import.meta.glob('./*', { eager: true, as: 'raw' })
-  // const server_code = glob['./+page.server.ts']
+  // const glob = import.meta.glob(`./*`, { eager: true, as: `raw` })
+  // const server_code = glob[`./+page.server.ts`]
 </script>
 
 ## Hook up Multiselect to SvelteKit form action incl. form validation

src/routes/persistent/+page.svx

@@ -2,8 +2,8 @@
   import hljs from 'highlight.js/lib/common'
   import 'highlight.js/styles/vs2015.css'
 
-  const glob = import.meta.glob('/src/stores.ts', { eager: true, as: 'raw' })
-  const store_code = glob['/src/stores.ts']
+  const glob = import.meta.glob(`/src/stores.ts`, { eager: true, as: `raw` })
+  const store_code = glob[`/src/stores.ts`]
 </script>
 
 ## Page-Reload Persistent MultiSelect

src/routes/slots/+page.svx

@@ -7,9 +7,9 @@
   import MultiSelect from '$lib'
   import { languages } from '$src/options'
   import LanguageSlot from '$src/components/LanguageSlot.svelte'
-  import MinusIcon from '$src/components/MinusIcon.svelte'
-  import ExpandIcon from '$src/components/ExpandIcon.svelte'
   import CollapseIcon from '$src/components/CollapseIcon.svelte'
+  import ExpandIcon from '$src/components/ExpandIcon.svelte'
+  import MinusIcon from '$src/components/MinusIcon.svelte'
 </script>
 
 <MultiSelect
@@ -38,16 +38,29 @@
   import MultiSelect from '$lib'
   import { languages } from '$src/options'
   import LanguageSlot from '$src/components/LanguageSlot.svelte'
+  import CollapseIcon from '$src/components/CollapseIcon.svelte'
+  import ExpandIcon from '$src/components/ExpandIcon.svelte'
+
+  // local variable used in CollapseIcon on:click callback to close dropdown
+  let open
 </script>
 
 <MultiSelect
   options={languages}
   maxSelect={5}
   placeholder="What languages do you know?"
   selected={['Python', 'TypeScript', 'Julia']}
+  bind:open
 >
   <LanguageSlot let:option {option} slot="selected" />
   <LanguageSlot let:option {option} slot="option" />
+  <svelte:fragment slot="expand-icon">
+    {#if open}
+      <CollapseIcon width="1em" on:click={() => (open = false)} />
+    {:else}
+      <ExpandIcon width="1em" />
+    {/if}
+  </svelte:fragment>
   <span slot="remove-icon">x</span>
 </MultiSelect>
 ```

tests/multiselect.test.ts

@@ -163,7 +163,9 @@ test.describe(`disabled multiselect`, async () => {
   })
 
   test(`renders no buttons`, async ({ page }) => {
-    expect(await page.$$(`#disabled-input-title button`)).toHaveLength(0)
+    expect(
+      await page.$$(`#disabled-input-title div.multiselect button`)
+    ).toHaveLength(0)
   })
 
   test(`renders disabled slot`, async ({ page }) => {