Svelte 5 Compatibility (#399)

* Update devDependencies `svelte` to `5.0.0-next.158` and `@sveltejs/vite-plugin-svelte` to `4.0.0-next.3` * Move global styles to app.css * Add explicit <tbody> to work around Svelte 5 issue (svelte/issues#12090) * Work around "Cannot assign to constant" Svelte 5 error * Workaround some Svelte 5 typescript errors with props/types * Move createEventDispatcher() after `data` declaration which seems to make Svelte 5 compiler happier (but unable to reproduce in REPL) * Upgrade to latest svelte 5 (next.175) * Use `toggleOff` instead of `toggle` to fix Svelte 5 calling twice and opening dialog * Disable sveld until Svelte 5 is supported * Fix `Stores` type no longer available * Update svelte and vite plugin to latest next release * Fix all "Self-closing HTML tags for non-void elements are ambiguous" warnings * Fix "Object literal may only specify known properties, and 'children' does not exist in type ..." due to slot forwarding * Revert unneeded change * Revert Svelte 5 dependency update and re-enable sveld to allow compatibility changes to be merged to main without running docs on Svelte 5 (since there are still oustanding issues) * Improve Svelte 5 compatibility, especially with docs (enabling `svelte-check` to pass)
techniq · Jul 13, 2024 · d8cff0e · d8cff0e
1 parent ae73a84
commit d8cff0e
Show file tree

Hide file tree

Showing 21 changed files with 175 additions and 203 deletions.
diff --git a/.changeset/yellow-beers-grow.md b/.changeset/yellow-beers-grow.md
@@ -0,0 +1,5 @@
+---
+'svelte-ux': minor
+---
+
+Improve Svelte 5 compatibility, especially with docs (enabling `svelte-check` to pass)
diff --git a/packages/svelte-ux/src/docs/ViewSourceButton.svelte b/packages/svelte-ux/src/docs/ViewSourceButton.svelte
@@ -15,11 +15,11 @@
 </script>
 
 {#if source}
-  <Toggle let:on={open} let:toggle>
+  <Toggle let:on={open} let:toggle let:toggleOff>
     <Button {icon} on:click={toggle} variant="fill-light" color="primary" size="sm">{label}</Button>
     <Dialog
       {open}
-      on:close={toggle}
+      on:close={toggleOff}
       class="max-h-[98dvh] md:max-h-[90dvh] max-w-[98vw] md:max-w-[90vw] grid grid-rows-[auto,1fr,auto]"
     >
       <div class="grid grid-cols-[1fr,auto] gap-3 items-center p-4">

diff --git a/packages/svelte-ux/src/lib/components/Badge.svelte b/packages/svelte-ux/src/lib/components/Badge.svelte
@@ -2,7 +2,7 @@
   import { cls } from '../utils/styles.js';
   import { getComponentClasses } from './theme.js';
 
-  export let value: number = $$slots.value ? 1 : 0;
+  export let value = $$slots.value ? 1 : 0;
   export let small = false;
   export let circle = false;
   export let dot = false;

diff --git a/packages/svelte-ux/src/lib/components/BarStack.svelte b/packages/svelte-ux/src/lib/components/BarStack.svelte
@@ -5,10 +5,6 @@
   import { cls } from '../utils/styles.js';
   import { getComponentClasses } from './index.js';
 
-  const dispatch = createEventDispatcher<{
-    itemClick: (typeof data)[number];
-  }>();
-
   export let data: {
     label: string;
     value: number;
@@ -26,6 +22,10 @@
     item?: string;
   } = {};
   const settingsClasses = getComponentClasses('BarStack');
+
+  const dispatch = createEventDispatcher<{
+    itemClick: (typeof data)[number];
+  }>();
 </script>
 
 <div class={cls('BarStack', 'flex gap-px', settingsClasses.root, classes.root, $$props.class)}>

diff --git a/packages/svelte-ux/src/lib/components/SelectField.svelte b/packages/svelte-ux/src/lib/components/SelectField.svelte
@@ -561,17 +561,19 @@
             </slot>
           </svelte:fragment>
 
-          <slot name="empty" slot="empty" let:loading>
-            <div
-              class={cls(
-                'p-3 text-surface-content/5/50 italic text-sm',
-                settingsClasses.empty,
-                classes.empty
-              )}
-            >
-              {loading ? 'Loading...' : 'No options found'}
-            </div>
-          </slot>
+          <svelte:fragment slot="empty" let:loading>
+            <slot name="empty" {loading}>
+              <div
+                class={cls(
+                  'p-3 text-surface-content/5/50 italic text-sm',
+                  settingsClasses.empty,
+                  classes.empty
+                )}
+              >
+                {loading ? 'Loading...' : 'No options found'}
+              </div>
+            </slot>
+          </svelte:fragment>
         </SelectListOptions>
 
         <slot name="actions" {hide} />
@@ -618,17 +620,19 @@
           </slot>
         </svelte:fragment>
 
-        <slot name="empty" slot="empty" let:loading>
-          <div
-            class={cls(
-              'p-3 text-surface-content/5/50 italic text-sm',
-              settingsClasses.empty,
-              classes.empty
-            )}
-          >
-            {loading ? 'Loading...' : 'No options found'}
-          </div>
-        </slot>
+        <svelte:fragment slot="empty" let:loading>
+          <slot name="empty" {loading}>
+            <div
+              class={cls(
+                'p-3 text-surface-content/5/50 italic text-sm',
+                settingsClasses.empty,
+                classes.empty
+              )}
+            >
+              {loading ? 'Loading...' : 'No options found'}
+            </div>
+          </slot>
+        </svelte:fragment>
       </SelectListOptions>
     {/if}
   {/if}

diff --git a/packages/svelte-ux/src/lib/stores/debounceStore.ts b/packages/svelte-ux/src/lib/stores/debounceStore.ts
@@ -1,6 +1,6 @@
-import { derived, get, type Stores } from 'svelte/store';
+import { derived, get, type Readable } from 'svelte/store';
 
-function debounceStore<T extends Stores>(original: T, timeout = 300) {
+function debounceStore<T extends Readable<any>>(original: T, timeout = 300) {
   return derived(
     original,
     ($original, set) => {
@@ -10,7 +10,6 @@ function debounceStore<T extends Stores>(original: T, timeout = 300) {
         clearTimeout(timer);
       };
     },
-    // @ts-expect-error
     get(original)
   );
 }

diff --git a/packages/svelte-ux/src/routes/+layout.svelte b/packages/svelte-ux/src/routes/+layout.svelte
@@ -217,7 +217,7 @@
   <svelte:fragment slot="nav">
     <NavMenu />
     <!-- Spacer -->
-    <div class="h-4" />
+    <div class="h-4"></div>
   </svelte:fragment>
 
   <AppBar {title}>
@@ -302,7 +302,7 @@
             window.open(e.detail.value, '_blank');
           }}
         >
-          <span slot="selection" class="hidden" />
+          <span slot="selection" class="hidden"></span>
         </MenuButton>
       {/if}
     </div>
@@ -312,56 +312,3 @@
     <slot />
   </main>
 </AppLayout>
-
-<style lang="postcss">
-  :global(html) {
-    @apply bg-surface-200 accent-primary;
-    /* background-image:
-      radial-gradient(at 0% 0%, hsl(var(--color-secondary) / 0.33) 0px, transparent 50%),
-      radial-gradient(at 98% 1%, hsl(var(--color-primary) / 0.33) 0px, transparent 50%); */
-  }
-
-  :global(nav h1) {
-    @apply py-2 pl-4 mt-4 text-sm text-surface-content font-bold bg-surface-200 border-t border-b;
-  }
-
-  :global(nav h2) {
-    @apply pt-4 pb-2 pl-4 text-xs text-surface-content font-bold;
-  }
-
-  :global(main :is(h1, h2, h3):not(.prose *, .related *, .ApiDocs *)) {
-    scroll-margin-top: calc(var(--headerHeight) + 148px); /* app header + docs header */
-  }
-
-  :global(main h1:not(.prose *, .related *, .ApiDocs *)) {
-    @apply text-xl font-semibold mt-4 mb-2 border-b pb-1;
-  }
-
-  :global(main h2:not(.prose *, .related *, .ApiDocs *)) {
-    @apply text-lg font-semibold mt-4 mb-1;
-  }
-
-  :global(main h3:not(.prose *, .related *, .ApiDocs *)) {
-    @apply text-xs text-surface-content/50 mb-1;
-  }
-  :global(main :not(.prose) h2 + h3) {
-    @apply -mt-1;
-  }
-
-  :global(main small) {
-    @apply text-xs text-surface-content/50 inline-block;
-  }
-
-  :global(.TableOfContents small) {
-    @apply hidden;
-  }
-
-  /* Code/Preview backgrounds */
-  :global(pre[class*='language-']) {
-    @apply bg-surface-content;
-  }
-
-  :global(.dark pre[class*='language-']) {
-    @apply bg-surface-300;
-  }
-</style>
diff --git a/packages/svelte-ux/src/routes/app.css b/packages/svelte-ux/src/routes/app.css
@@ -1,3 +1,54 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
+html {
+  @apply bg-surface-200 accent-primary scroll-smooth;
+  /* background-image:
+      radial-gradient(at 0% 0%, hsl(var(--color-secondary) / 0.33) 0px, transparent 50%),
+      radial-gradient(at 98% 1%, hsl(var(--color-primary) / 0.33) 0px, transparent 50%); */
+}
+
+nav h1 {
+  @apply py-2 pl-4 mt-4 text-sm text-surface-content font-bold bg-surface-200 border-t border-b;
+}
+
+nav h2 {
+  @apply pt-4 pb-2 pl-4 text-xs text-surface-content font-bold;
+}
+
+main :is(h1, h2, h3):not(.prose *, .related *, .ApiDocs *) {
+  scroll-margin-top: calc(var(--headerHeight) + 148px); /* app header + docs header */
+}
+
+main h1:not(.prose *, .related *, .ApiDocs *) {
+  @apply text-xl font-semibold mt-4 mb-2 border-b pb-1;
+}
+
+main h2:not(.prose *, .related *, .ApiDocs *) {
+  @apply text-lg font-semibold mt-4 mb-1;
+}
+
+main h3:not(.prose *, .related *, .ApiDocs *) {
+  @apply text-xs text-surface-content/50 mb-1;
+}
+main :not(.prose) h2 + h3 {
+  @apply -mt-1;
+}
+
+main small {
+  @apply text-xs text-surface-content/50 inline-block;
+}
+
+.TableOfContents small {
+  @apply hidden;
+}
+
+/* Code/Preview backgrounds */
+pre[class*='language-'] {
+  @apply bg-surface-content;
+}
+
+.dark pre[class*='language-'] {
+  @apply bg-surface-300;
+}
diff --git a/packages/svelte-ux/src/routes/docs/actions/dataBackground/+page.svelte b/packages/svelte-ux/src/routes/docs/actions/dataBackground/+page.svelte
@@ -100,54 +100,58 @@
 
 <Preview>
   <table class="w-full border">
-    {#each sorted ? sort(values) : values as value}
-      <!-- re-mount if duration changes so action is updated -->
-      {#key duration}
-        <tr>
-          <td
-            class="text-right border tabular-nums"
-            use:dataBackground={{
-              value,
-              color: value > 0 ? 'hsl(140 80% 80%)' : 'hsl(0 80% 80%)',
-              domain,
-              inset,
-              baseline,
-              tweened: { duration },
-            }}
-          >
-            <TweenedValue {value} format="integer" options={{ duration }} />
-          </td>
-        </tr>
-      {/key}
-    {/each}
+    <tbody>
+      {#each sorted ? sort(values) : values as value}
+        <!-- re-mount if duration changes so action is updated -->
+        {#key duration}
+          <tr>
+            <td
+              class="text-right border tabular-nums"
+              use:dataBackground={{
+                value,
+                color: value > 0 ? 'hsl(140 80% 80%)' : 'hsl(0 80% 80%)',
+                domain,
+                inset,
+                baseline,
+                tweened: { duration },
+              }}
+            >
+              <TweenedValue {value} format="integer" options={{ duration }} />
+            </td>
+          </tr>
+        {/key}
+      {/each}
+    </tbody>
   </table>
 </Preview>
 
 <h2>Tailwind gradient</h2>
 
 <Preview>
   <table class="w-full border">
-    {#each sorted ? sort(values) : values as value}
-      <!-- re-mount if duration changes so action is updated -->
-      {#key duration}
-        <tr>
-          <td
-            class={cls(
-              'text-right border tabular-nums',
-              value > 0 ? 'from-success-300 to-success-500' : 'from-danger to-danger-300'
-            )}
-            use:dataBackground={{
-              value,
-              domain,
-              inset,
-              baseline,
-              tweened: { duration },
-            }}
-          >
-            <TweenedValue {value} format="integer" options={{ duration }} />
-          </td>
-        </tr>
-      {/key}
-    {/each}
+    <tbody>
+      {#each sorted ? sort(values) : values as value}
+        <!-- re-mount if duration changes so action is updated -->
+        {#key duration}
+          <tr>
+            <td
+              class={cls(
+                'text-right border tabular-nums',
+                value > 0 ? 'from-success-300 to-success-500' : 'from-danger to-danger-300'
+              )}
+              use:dataBackground={{
+                value,
+                domain,
+                inset,
+                baseline,
+                tweened: { duration },
+              }}
+            >
+              <TweenedValue {value} format="integer" options={{ duration }} />
+            </td>
+          </tr>
+        {/key}
+      {/each}
+    </tbody>
   </table>
 </Preview>
diff --git a/packages/svelte-ux/src/routes/docs/actions/input/+page.svelte b/packages/svelte-ux/src/routes/docs/actions/input/+page.svelte
@@ -33,7 +33,7 @@
 <h2>autoHeight <small>Automatically resize textarea based on content</small></h2>
 
 <Preview>
-  <textarea value="Example text" use:autoHeight class="border" />
+  <textarea value="Example text" use:autoHeight class="border"></textarea>
 </Preview>
 
 <h2>debounceEvent <small>Debounce any event (input, change, etc)</small></h2>