example site and dep bump

schibrikov · Sep 28, 2022 · 1f8d00f · 1f8d00f
1 parent 3849f21
commit 1f8d00f
Show file tree

Hide file tree

Showing 56 changed files with 308 additions and 234 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -18,28 +18,29 @@
   "devDependencies": {
     "@rollup/plugin-alias": "^3.1.9",
     "@sveltejs/adapter-auto": "next",
-    "@sveltejs/kit": "1.0.0-next.405",
-    "autoprefixer": "^10.4.8",
+    "@sveltejs/kit": "1.0.0-next.504",
+    "autoprefixer": "^10.4.12",
     "cross-env": "^7.0.3",
     "find-in-files": "^0.5.0",
     "prettier": "~2.7.1",
-    "prettier-plugin-svelte": "^2.7.0",
-    "release-it": "^15.3.0",
-    "rollup": "^2.77.2",
+    "prettier-plugin-svelte": "^2.7.1",
+    "release-it": "^15.4.2",
+    "rollup": "^2.79.1",
     "rollup-plugin-cleaner": "^1.0.0",
     "rollup-plugin-css-only": "^3.1.0",
     "rollup-plugin-node-resolve": "^5.2.0",
     "rollup-plugin-postcss": "^4.0.2",
     "rollup-plugin-replace": "^2.2.0",
     "rollup-plugin-svelte": "^7.1.0",
     "sirv-cli": "^2.0.2",
-    "svelte": "^3.49.0",
+    "svelte": "^3.50.1",
+    "svelte-highlight": "^6.2.1",
     "svelte-preprocess": "^4.10.7",
     "svelte-tiny-virtual-list": "^2.0.5",
-    "svelte2tsx": "^0.5.13",
+    "svelte2tsx": "^0.5.19",
     "tape-modern": "^1.1.2",
-    "typescript": "^4.7.4",
-    "vite": "^3.0.4"
+    "typescript": "^4.8.4",
+    "vite": "^3.1.4"
   },
   "author": "Robert Balfré <rob.balfre@gmail.com> (https://github.com/rob-balfre)",
   "license": "ISC",
@@ -59,7 +60,7 @@
   },
   "type": "module",
   "dependencies": {
-    "@floating-ui/dom": "^1.0.1",
+    "@floating-ui/dom": "^1.0.2",
     "svelte-floating-ui": "^0.3.2"
   }
 }
diff --git a/src/routes/__layout.svelte → src/routes/+layout.svelte b/src/routes/__layout.svelte → src/routes/+layout.svelte
@@ -1,15 +1,21 @@
 <script>
     import { page } from '$app/stores';
 
-    const _props = import.meta.glob('./examples/props/*.svelte');
-    const _slots = import.meta.glob('./examples/slots/*.svelte');
-    const _events = import.meta.glob('./examples/events/*.svelte');
-    const _advanced = import.meta.glob('./examples/advanced/*.svelte');
-
-    $: props = buildLinks(_props);
-    $: slots = buildLinks(_slots);
-    $: events = buildLinks(_events);
-    $: advanced = buildLinks(_advanced);
+    import { Highlight } from 'svelte-highlight';
+    import typescript from 'svelte-highlight/languages/typescript';
+    import highlightStyles from 'svelte-highlight/styles/atom-one-dark';
+
+    const _props = import.meta.glob('./examples/props/*/*.svelte', { as: 'raw' });
+    const _slots = import.meta.glob('./examples/slots/*/*.svelte', { as: 'raw' });
+    const _events = import.meta.glob('./examples/events/*/*.svelte', { as: 'raw' });
+    const _advanced = import.meta.glob('./examples/advanced/*/*.svelte', { as: 'raw' });
+
+    $: setup = {
+        props: buildLinks(_props),
+        slots: buildLinks(_slots),
+        events: buildLinks(_events),
+        advanced: buildLinks(_advanced),
+    };
 
     function buildLinks(obj) {
         return Object.keys(obj).map((key) => {
@@ -18,44 +24,74 @@
             return {
                 href: `${sp[1]}/${sp[2]}/` + name,
                 name: name.replace(/-./g, (x) => x[1].toUpperCase()),
+                source: obj[key],
             };
         });
     }
+
+    $: handleExampleCode($page);
+
+    let source;
+    async function handleExampleCode(newPage) {
+        if (!newPage?.routeId) return;
+
+        if (newPage.routeId.includes('examples/')) {
+            const s = newPage.routeId.split('/');
+            const file = setup[s[1]].find((i) => i.href.includes(s[2]));
+            const raw = await file.source();
+            source = raw.replace('$lib/Select.svelte', 'svelte-select');
+        } else {
+            source = null;
+        }
+    }
+
 </script>
 
+<svelte:head>
+    {@html highlightStyles}
+</svelte:head>
+
 <div class="container">
     <nav>
+        <ul>
+            <li><a <a class:active={$page.routeId === 'examples'} href="/">Home</a></li>
+        </ul>
+        
         <h2>Props</h2>
         <ul>
-            {#each props as { href, name }}
+            {#each setup.props as { href, name }}
                 <li><a class:active={$page.routeId === href} href={`/${href}`}>{name}</a></li>
             {/each}
         </ul>
 
         <h2>Slots</h2>
         <ul>
-            {#each slots as { href, name }}
+            {#each setup.slots as { href, name }}
                 <li><a class:active={$page.routeId === href} href={`/${href}`}>{name}</a></li>
             {/each}
         </ul>
 
         <h2>Events</h2>
         <ul>
-            {#each events as { href, name }}
+            {#each setup.events as { href, name }}
                 <li><a class:active={$page.routeId === href} href={`/${href}`}>{name}</a></li>
             {/each}
         </ul>
 
         <h2>Advanced</h2>
         <ul>
-            {#each advanced as { href, name }}
+            {#each setup.advanced as { href, name }}
                 <li><a class:active={$page.routeId === href} href={`/${href}`}>{name}</a></li>
             {/each}
         </ul>
     </nav>
 
     <div class="content">
         <slot />
+
+        {#if source}
+            <Highlight language={typescript} code={source} />
+        {/if}
     </div>
 </div>
 
@@ -70,7 +106,6 @@
         font-size: 16px;
         padding: 10px;
         border-bottom: 1px solid #f3f1fd;
-
     }
 
     nav {

diff --git a/src/routes/+page.js b/src/routes/+page.js
@@ -0,0 +1,5 @@
+import { redirect } from '@sveltejs/kit';
+
+export async function load() {
+    throw redirect(301, "/examples");
+}
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
diff --git a/src/routes/examples/+page.svelte b/src/routes/examples/+page.svelte
@@ -0,0 +1,20 @@
+<div align="center">
+    <img
+        src="https://raw.githubusercontent.com/rob-balfre/svelte-select/feature/v5/svelte-select.png"
+        alt="Svelte Select"
+        width="150" />
+    <h1>Svelte Select Examples</h1>
+
+    <div>
+        <a href="https://npmjs.org/package/svelte-select">
+            <img src="https://badgen.now.sh/npm/v/svelte-select" alt="version" />
+        </a>
+        <a href="https://npmjs.org/package/svelte-select">
+            <img src="https://badgen.now.sh/npm/dm/svelte-select" alt="downloads" />
+        </a>
+
+        <a href="https://github.com/rob-balfre/svelte-select">
+            <img src="https://badgen.net/badge/icon/github?icon=github&label" alt="downloads" />
+        </a>
+    </div>
+</div>
diff --git a/...les/advanced/multi-item-checkboxes.svelte → ...vanced/multi-item-checkboxes/+page.svelte b/...les/advanced/multi-item-checkboxes.svelte → ...vanced/multi-item-checkboxes/+page.svelte
diff --git a/...tes/examples/advanced/virtual-list.svelte → ...amples/advanced/virtual-list/+page.svelte b/...tes/examples/advanced/virtual-list.svelte → ...amples/advanced/virtual-list/+page.svelte
diff --git a/src/routes/examples/events/blur.svelte → src/routes/examples/events/blur/+page.svelte b/src/routes/examples/events/blur.svelte → src/routes/examples/events/blur/+page.svelte
diff --git a/src/routes/examples/events/change.svelte → ...outes/examples/events/change/+page.svelte b/src/routes/examples/events/change.svelte → ...outes/examples/events/change/+page.svelte
diff --git a/src/routes/examples/events/clear.svelte → ...routes/examples/events/clear/+page.svelte b/src/routes/examples/events/clear.svelte → ...routes/examples/events/clear/+page.svelte
diff --git a/src/routes/examples/events/error.svelte → ...routes/examples/events/error/+page.svelte b/src/routes/examples/events/error.svelte → ...routes/examples/events/error/+page.svelte
diff --git a/src/routes/examples/events/filter.svelte → ...outes/examples/events/filter/+page.svelte b/src/routes/examples/events/filter.svelte → ...outes/examples/events/filter/+page.svelte
diff --git a/src/routes/examples/events/focus.svelte → ...routes/examples/events/focus/+page.svelte b/src/routes/examples/events/focus.svelte → ...routes/examples/events/focus/+page.svelte
diff --git a/src/routes/examples/events/loaded.svelte → ...outes/examples/events/loaded/+page.svelte b/src/routes/examples/events/loaded.svelte → ...outes/examples/events/loaded/+page.svelte
diff --git a/src/routes/examples/events/select.svelte → ...outes/examples/events/select/+page.svelte b/src/routes/examples/events/select.svelte → ...outes/examples/events/select/+page.svelte
diff --git a/src/routes/examples/index.svelte b/src/routes/examples/index.svelte
diff --git a/src/routes/examples/props/class.svelte → src/routes/examples/props/class/+page.svelte b/src/routes/examples/props/class.svelte → src/routes/examples/props/class/+page.svelte
diff --git a/src/routes/examples/props/clearable.svelte → ...tes/examples/props/clearable/+page.svelte b/src/routes/examples/props/clearable.svelte → ...tes/examples/props/clearable/+page.svelte
diff --git a/...es/examples/props/container-styles.svelte → ...mples/props/container-styles/+page.svelte b/...es/examples/props/container-styles.svelte → ...mples/props/container-styles/+page.svelte
diff --git a/...outes/examples/props/debounce-wait.svelte → ...examples/props/debounce-wait/+page.svelte b/...outes/examples/props/debounce-wait.svelte → ...examples/props/debounce-wait/+page.svelte
diff --git a/src/routes/examples/props/disabled.svelte → ...utes/examples/props/disabled/+page.svelte b/src/routes/examples/props/disabled.svelte → ...utes/examples/props/disabled/+page.svelte
diff --git a/src/routes/examples/props/filter-text.svelte → ...s/examples/props/filter-text/+page.svelte b/src/routes/examples/props/filter-text.svelte → ...s/examples/props/filter-text/+page.svelte
diff --git a/...tes/examples/props/floating-config.svelte → ...amples/props/floating-config/+page.svelte b/...tes/examples/props/floating-config.svelte → ...amples/props/floating-config/+page.svelte
@@ -14,8 +14,6 @@
     let topConfig = {
         placement: 'top-start',
     };
-
-    
 </script>
 
 <div class="container">

diff --git a/src/routes/examples/props/focused.svelte → ...outes/examples/props/focused/+page.svelte b/src/routes/examples/props/focused.svelte → ...outes/examples/props/focused/+page.svelte
diff --git a/...ples/props/group-header-selectable.svelte → ...rops/group-header-selectable/+page.svelte b/...ples/props/group-header-selectable.svelte → ...rops/group-header-selectable/+page.svelte
diff --git a/...es/examples/props/hide-empty-state.svelte → ...mples/props/hide-empty-state/+page.svelte b/...es/examples/props/hide-empty-state.svelte → ...mples/props/hide-empty-state/+page.svelte
diff --git a/src/routes/examples/props/id.svelte → src/routes/examples/props/id/+page.svelte b/src/routes/examples/props/id.svelte → src/routes/examples/props/id/+page.svelte
diff --git a/...es/examples/props/input-attributes.svelte → ...mples/props/input-attributes/+page.svelte b/...es/examples/props/input-attributes.svelte → ...mples/props/input-attributes/+page.svelte
diff --git a/src/routes/examples/props/item-id.svelte → ...outes/examples/props/item-id/+page.svelte b/src/routes/examples/props/item-id.svelte → ...outes/examples/props/item-id/+page.svelte
diff --git a/src/routes/examples/props/items.svelte → src/routes/examples/props/items/+page.svelte b/src/routes/examples/props/items.svelte → src/routes/examples/props/items/+page.svelte
diff --git a/src/routes/examples/props/just-value.svelte → ...es/examples/props/just-value/+page.svelte b/src/routes/examples/props/just-value.svelte → ...es/examples/props/just-value/+page.svelte
diff --git a/src/routes/examples/props/label.svelte → src/routes/examples/props/label/+page.svelte b/src/routes/examples/props/label.svelte → src/routes/examples/props/label/+page.svelte
diff --git a/...tes/examples/props/list-auto-width.svelte → ...amples/props/list-auto-width/+page.svelte b/...tes/examples/props/list-auto-width.svelte → ...amples/props/list-auto-width/+page.svelte
diff --git a/src/routes/examples/props/list-offset.svelte → ...s/examples/props/list-offset/+page.svelte b/src/routes/examples/props/list-offset.svelte → ...s/examples/props/list-offset/+page.svelte
diff --git a/src/routes/examples/props/list-open.svelte → ...tes/examples/props/list-open/+page.svelte b/src/routes/examples/props/list-open.svelte → ...tes/examples/props/list-open/+page.svelte
diff --git a/src/routes/examples/props/loading.svelte → ...outes/examples/props/loading/+page.svelte b/src/routes/examples/props/loading.svelte → ...outes/examples/props/loading/+page.svelte
diff --git a/src/routes/examples/props/multiple.svelte → ...utes/examples/props/multiple/+page.svelte b/src/routes/examples/props/multiple.svelte → ...utes/examples/props/multiple/+page.svelte
diff --git a/src/routes/examples/props/name.svelte → src/routes/examples/props/name/+page.svelte b/src/routes/examples/props/name.svelte → src/routes/examples/props/name/+page.svelte
diff --git a/...ples/props/placeholder-always-show.svelte → ...rops/placeholder-always-show/+page.svelte b/...ples/props/placeholder-always-show.svelte → ...rops/placeholder-always-show/+page.svelte
diff --git a/src/routes/examples/props/placeholder.svelte → ...s/examples/props/placeholder/+page.svelte b/src/routes/examples/props/placeholder.svelte → ...s/examples/props/placeholder/+page.svelte
diff --git a/src/routes/examples/props/searchable.svelte → ...es/examples/props/searchable/+page.svelte b/src/routes/examples/props/searchable.svelte → ...es/examples/props/searchable/+page.svelte
diff --git a/...routes/examples/props/show-chevron.svelte → .../examples/props/show-chevron/+page.svelte b/...routes/examples/props/show-chevron.svelte → .../examples/props/show-chevron/+page.svelte
diff --git a/src/routes/examples/props/value.svelte → src/routes/examples/props/value/+page.svelte b/src/routes/examples/props/value.svelte → src/routes/examples/props/value/+page.svelte
diff --git a/...routes/examples/slots/chevron-icon.svelte → .../examples/slots/chevron-icon/+page.svelte b/...routes/examples/slots/chevron-icon.svelte → .../examples/slots/chevron-icon/+page.svelte
diff --git a/src/routes/examples/slots/clear-icon.svelte → ...es/examples/slots/clear-icon/+page.svelte b/src/routes/examples/slots/clear-icon.svelte → ...es/examples/slots/clear-icon/+page.svelte
diff --git a/src/routes/examples/slots/empty.svelte → src/routes/examples/slots/empty/+page.svelte b/src/routes/examples/slots/empty.svelte → src/routes/examples/slots/empty/+page.svelte
diff --git a/src/routes/examples/slots/item.svelte → src/routes/examples/slots/item/+page.svelte b/src/routes/examples/slots/item.svelte → src/routes/examples/slots/item/+page.svelte
diff --git a/src/routes/examples/slots/list.svelte → src/routes/examples/slots/list/+page.svelte b/src/routes/examples/slots/list.svelte → src/routes/examples/slots/list/+page.svelte
diff --git a/...routes/examples/slots/loading-icon.svelte → .../examples/slots/loading-icon/+page.svelte b/...routes/examples/slots/loading-icon.svelte → .../examples/slots/loading-icon/+page.svelte
diff --git a/...es/examples/slots/multi-clear-icon.svelte → ...mples/slots/multi-clear-icon/+page.svelte b/...es/examples/slots/multi-clear-icon.svelte → ...mples/slots/multi-clear-icon/+page.svelte
diff --git a/src/routes/examples/slots/prepend.svelte → ...outes/examples/slots/prepend/+page.svelte b/src/routes/examples/slots/prepend.svelte → ...outes/examples/slots/prepend/+page.svelte
diff --git a/src/routes/examples/slots/selection.svelte → ...tes/examples/slots/selection/+page.svelte b/src/routes/examples/slots/selection.svelte → ...tes/examples/slots/selection/+page.svelte
diff --git a/src/routes/index.svelte b/src/routes/index.svelte
diff --git a/test/src/ItemSlotTest.svelte b/test/src/ItemSlotTest.svelte
@@ -2,7 +2,6 @@
     import Select from '../../src/lib/Select.svelte';
 
     let items = ['one', 'two'];
-    
 </script>
 
 <Select bind:items listOpen>

diff --git a/vite.config.js b/vite.config.js
@@ -2,7 +2,10 @@ import { sveltekit } from '@sveltejs/kit/vite';
 
 /** @type {import('vite').UserConfig} */
 const config = {
-	plugins: [sveltekit()]
+    plugins: [sveltekit()],
+    optimizeDeps: {
+        include: ['highlight.js', 'highlight.js/lib/core'],
+    },
 };
 
 export default config;