Svelte 5 docs (#436)

techniq · web-flow · commit ebe86d0a2071 · 2024-10-19T21:22:51.000-04:00
* Update `svelte` and `vite-plugin-svelte` to latest next (svelte 5) * Disable sveld until Svelte 5 compatible * Work around action timing change in Svelte 5 by updating example to specific explicit `target: document.body`. Resolves #437 * Update `svelte` and `vite-plugin-svelte` to latest next (`.201` and `.5` respectively) * Update dependencies to latest * fix(TextField): Type error * fix(TableOfContents): Fix ssr support * fix(SelectField): Fix ssr support by no longer nesting `<button>` instances * Update to official Svelte 5 * Ignore warning * docs: Remove API docs until can be extracted in Svelte 5 compatible way (sveld update, etc) * Require official Svelte 5 (instead of `next` version). Still supports Svelte 3/4 * Add missing changesets * fix(AppLayout): Fix SSR drawer layout on mobile. Resolves #22 * refactor: Use 'esm-env' for browser/dev conditionals
diff --git a/.changeset/chatty-gorillas-develop.md b/.changeset/chatty-gorillas-develop.md
@@ -0,0 +1,5 @@
+---
+'svelte-ux': patch
+---
+
+fix(TableOfContents): Fix ssr support
diff --git a/.changeset/fast-dancers-invite.md b/.changeset/fast-dancers-invite.md
@@ -0,0 +1,5 @@
+---
+'svelte-ux': patch
+---
+
+fix(AppLayout): Fix SSR drawer layout on mobile. Resolves #22
diff --git a/.changeset/metal-garlics-sin.md b/.changeset/metal-garlics-sin.md
@@ -0,0 +1,5 @@
+---
+'svelte-ux': patch
+---
+
+fix(SelectField): Fix Svelte 5 SSR compatibility
diff --git a/package.json b/package.json
@@ -17,9 +17,9 @@
   },
   "devDependencies": {
     "@changesets/cli": "2.27.9",
-    "@svitejs/changesets-changelog-github-compact": "^1.1.0",
+    "@svitejs/changesets-changelog-github-compact": "^1.2.0",
     "rimraf": "6.0.1",
-    "wrangler": "^3.80.1"
+    "wrangler": "^3.81.0"
   },
   "packageManager": "pnpm@9.12.0"
 }
diff --git a/packages/create-svelte-ux/package.json b/packages/create-svelte-ux/package.json
@@ -22,7 +22,7 @@
     "commander": "^12.1.0"
   },
   "devDependencies": {
-    "@types/node": "^22.7.5",
+    "@types/node": "^22.7.7",
     "prettier": "^3.3.3"
   },
   "files": [
diff --git a/packages/svelte-ux/package.json b/packages/svelte-ux/package.json
@@ -22,34 +22,34 @@
     "@changesets/cli": "^2.27.9",
     "@fortawesome/free-solid-svg-icons": "^6.6.0",
     "@skeletonlabs/tw-plugin": "^0.4.0",
-    "@sveltejs/adapter-cloudflare": "^4.7.2",
-    "@sveltejs/kit": "^2.6.3",
+    "@sveltejs/adapter-cloudflare": "^4.7.3",
+    "@sveltejs/kit": "^2.7.2",
     "@sveltejs/package": "^2.3.5",
-    "@sveltejs/vite-plugin-svelte": "^3.1.2",
+    "@sveltejs/vite-plugin-svelte": "4.0.0",
     "@tailwindcss/typography": "^0.5.15",
     "@types/culori": "^2.1.1",
     "@types/d3-array": "^3.2.1",
     "@types/d3-scale": "^4.0.8",
     "@types/lodash-es": "^4.17.12",
     "@types/prismjs": "^1.26.4",
-    "@vitest/coverage-v8": "^2.1.2",
+    "@vitest/coverage-v8": "^2.1.3",
     "autoprefixer": "^10.4.20",
-    "daisyui": "^4.12.12",
-    "marked": "^14.1.2",
+    "daisyui": "^4.12.13",
+    "marked": "^14.1.3",
     "mdsvex": "^0.12.3",
-    "posthog-js": "^1.167.0",
+    "posthog-js": "^1.174.2",
     "prettier": "^3.3.3",
     "prettier-plugin-svelte": "^3.2.7",
     "rehype-slug": "^6.0.0",
-    "svelte": "^4.2.19",
-    "svelte-check": "^4.0.4",
-    "svelte2tsx": "^0.7.21",
-    "tailwindcss": "^3.4.13",
-    "tslib": "^2.7.0",
-    "typescript": "^5.6.2",
+    "svelte": "5.0.2",
+    "svelte-check": "^4.0.5",
+    "svelte2tsx": "^0.7.22",
+    "tailwindcss": "^3.4.14",
+    "tslib": "^2.8.0",
+    "typescript": "^5.6.3",
     "unist-util-visit": "^5.0.0",
-    "vite": "^5.4.8",
-    "vitest": "^2.1.2"
+    "vite": "^5.4.9",
+    "vitest": "^2.1.3"
   },
   "type": "module",
   "dependencies": {
@@ -61,17 +61,18 @@
     "d3-array": "^3.2.4",
     "d3-scale": "^4.0.2",
     "date-fns": "^4.1.0",
+    "esm-env": "^1.0.0",
     "immer": "^10.1.1",
     "lodash-es": "^4.17.21",
     "prism-svelte": "^0.5.0",
     "prism-themes": "^1.9.0",
     "prismjs": "^1.29.0",
     "sveld": "^0.20.2",
-    "tailwind-merge": "^2.5.3",
+    "tailwind-merge": "^2.5.4",
     "zod": "^3.23.8"
   },
   "peerDependencies": {
-    "svelte": "^3.56.0 || ^4.0.0 || ^5.0.0-next.120"
+    "svelte": "^3.56.0 || ^4.0.0 || ^5.0.0"
   },
   "main": "./dist/index.js",
   "exports": {
diff --git a/packages/svelte-ux/src/lib/components/AppBar.svelte b/packages/svelte-ux/src/lib/components/AppBar.svelte
@@ -1,9 +1,9 @@
 <script lang="ts">
+  import { BROWSER } from 'esm-env';
   import { mdiMenu } from '@mdi/js';
 
   import Breadcrumb from './Breadcrumb.svelte';
   import Button from './Button.svelte';
-  import { browser } from '../utils/env.js';
   import { cls } from '../utils/styles.js';
   import { getComponentClasses } from './theme.js';
   import { getSettings } from './index.js';
@@ -23,7 +23,7 @@
 
   $: titleString = Array.isArray(title) ? title.filter((x) => x).join(' › ') : title.toString();
 
-  $: if (browser && head) {
+  $: if (BROWSER && head) {
     // Appears to be needed for some reactive updates
     document.title = titleString;
   }
diff --git a/packages/svelte-ux/src/lib/components/AppLayout.svelte b/packages/svelte-ux/src/lib/components/AppLayout.svelte
@@ -1,10 +1,10 @@
 <script lang="ts">
+  import { BROWSER } from 'esm-env';
   import Backdrop from './Backdrop.svelte';
 
   import { mdScreen } from '../stores/matchMedia.js';
   import { cls } from '../utils/styles.js';
   import { getComponentClasses } from './theme.js';
-  import { browser } from '../utils/env.js';
   import { getSettings } from './index.js';
 
   export let navWidth = 240;
@@ -21,7 +21,7 @@
 
   const settingsClasses = getComponentClasses('AppLayout');
   const { showDrawer } = getSettings();
-  $: temporaryDrawer = browser ? !$mdScreen : false;
+  $: temporaryDrawer = BROWSER ? !$mdScreen : false;
 </script>
 
 <div
@@ -52,6 +52,7 @@
   <aside
     class={cls(
       'fixed top-0 h-[calc(100%-var(--headerHeight))] w-[var(--drawerWidth)] transition-all duration-500 overflow-hidden',
+      !BROWSER && 'max-md:hidden', // hide drawer during SSR on <md viewports (which is same result once hydrated)
       temporaryDrawer
         ? 'fixed h-full z-50 elevation-10'
         : headerPosition === 'full'
diff --git a/packages/svelte-ux/src/lib/components/SelectField.svelte b/packages/svelte-ux/src/lib/components/SelectField.svelte
@@ -163,7 +163,7 @@
   // Elements
   let inputEl: HTMLInputElement | null = null;
   let menuOptionsEl: HTMLDivElement;
-  let selectFieldEl: HTMLButtonElement;
+  let selectFieldEl: HTMLDivElement;
 
   function nextOptionIndex(currentIndex: number) {
     // Find next non-disabled option
@@ -412,8 +412,9 @@
   }
 </script>
 
-<button
-  type="button"
+<!-- svelte-ignore a11y_no_static_element_interactions -->
+<!-- svelte-ignore a11y_click_events_have_key_events -->
+<div
   aria-haspopup={!inlineOptions ? 'listbox' : undefined}
   class={cls(
     'SelectField block w-full cursor-default text-left',
@@ -652,4 +653,4 @@
       </SelectListOptions>
     {/if}
   {/if}
-</button>
+</div>
diff --git a/packages/svelte-ux/src/lib/components/TableOfContents.svelte b/packages/svelte-ux/src/lib/components/TableOfContents.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
   import { createEventDispatcher, onDestroy, onMount } from 'svelte';
   import { mdiCircleSmall } from '@mdi/js';
+  import { BROWSER } from 'esm-env';
 
   import { buildTree, type TreeNode } from '../utils/array.js';
   import { cls } from '../utils/styles.js';
@@ -9,7 +10,7 @@
   import { getComponentClasses } from './theme.js';
 
   export let element = 'main';
-  export let scrollContainer = window;
+  export let scrollContainer = BROWSER ? window : null;
   export let scrollOffset = 0;
   export let maxDepth = 6;
   export let icon = mdiCircleSmall;
@@ -52,13 +53,13 @@
     });
     nodes = buildTree(headings);
 
-    scrollContainer.addEventListener('scroll', onScroll, { passive: true });
+    scrollContainer?.addEventListener('scroll', onScroll, { passive: true });
     // set first heading until scrolled
     activeHeadingId = headings[0]?.id;
   });
 
   onDestroy(() => {
-    scrollContainer.removeEventListener('scroll', onScroll);
+    scrollContainer?.removeEventListener('scroll', onScroll);
   });
 </script>
 
diff --git a/packages/svelte-ux/src/lib/components/TextField.svelte b/packages/svelte-ux/src/lib/components/TextField.svelte
@@ -44,7 +44,7 @@
   export let placeholder: string | undefined = undefined;
   export let error: string | string[] | boolean | undefined = '';
   export let hint = '';
-  export let autocomplete = 'off'; // https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete
+  export let autocomplete: HTMLTextAreaElement['autocomplete'] = 'off'; // https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete
   export let multiline = false;
   export let required = false;
   export let disabled = false;
diff --git a/packages/svelte-ux/src/lib/components/settings.ts b/packages/svelte-ux/src/lib/components/settings.ts
@@ -1,5 +1,6 @@
 import { getContext, setContext } from 'svelte';
 import { writable, derived, type Readable, type Writable } from 'svelte/store';
+import { BROWSER } from 'esm-env';
 
 import {
   type ComponentName,
@@ -19,7 +20,6 @@ import {
 } from '$lib/utils/locale.js';
 import { buildFormatters, type FormatFunctions } from '../utils/format.js';
 import { breakpoints } from '../stores/matchMedia.js';
-import { browser } from '../utils/env.js';
 
 export interface DefaultProps {
   labelPlacement: LabelPlacement;
@@ -97,7 +97,7 @@ function createLocaleStores(settings: SettingsInput) {
 }
 
 function createShowDrawer() {
-  return writable(browser ? window.innerWidth >= breakpoints.md : true);
+  return writable(BROWSER ? window.innerWidth >= breakpoints.md : true);
 }
 
 export function settings(settings: SettingsInput = {}): Settings {
diff --git a/packages/svelte-ux/src/lib/stores/localStore.ts b/packages/svelte-ux/src/lib/stores/localStore.ts
@@ -1,10 +1,10 @@
 import { writable } from 'svelte/store';
 import { isFunction } from 'lodash-es';
+import { BROWSER } from 'esm-env';
 
 import { parse, stringify } from '../utils/json.js';
 import { expireObject } from '../utils/object.js';
 import type { Expiry } from '../utils/object.js';
-import { browser } from '../utils/env.js';
 
 type LocalStoreOptions<Value> = {
   expiry?: Expiry | ((previousExpiry: Expiry | undefined | null) => Expiry);
@@ -18,7 +18,7 @@ function localStore<Value>(key: string, initialValue: Value, options?: LocalStor
   if (options?.override != null) {
     value = options?.override;
   } else {
-    const storedValue = browser ? localStorage.getItem(key) : null;
+    const storedValue = BROWSER ? localStorage.getItem(key) : null;
     if (storedValue !== null) {
       const decodedValue = parse(storedValue);
       if (options?.expiry) {
@@ -34,7 +34,7 @@ function localStore<Value>(key: string, initialValue: Value, options?: LocalStor
 
   const store = writable<Value>(value);
 
-  if (browser) {
+  if (BROWSER) {
     store.subscribe((val) => {
       if (options?.expiry) {
         // Remove all expired expiry
diff --git a/packages/svelte-ux/src/lib/stores/matchMedia.ts b/packages/svelte-ux/src/lib/stores/matchMedia.ts
@@ -1,8 +1,8 @@
 import { readable, writable } from 'svelte/store';
-import { browser } from '../utils/env.js';
+import { BROWSER } from 'esm-env';
 
 export function matchMedia(queryString: string) {
-  if (browser) {
+  if (BROWSER) {
     const query = window.matchMedia(queryString);
     return readable(query.matches, (set) => {
       const listener = (e: MediaQueryListEvent | MediaQueryList) => set(e.matches);
diff --git a/packages/svelte-ux/src/lib/stores/themeStore.ts b/packages/svelte-ux/src/lib/stores/themeStore.ts
@@ -1,5 +1,5 @@
 import { writable, type Readable } from 'svelte/store';
-import { browser } from '../utils/env.js';
+import { BROWSER } from 'esm-env';
 
 /** Information about the currently chosen theme. */
 export class CurrentTheme {
@@ -35,7 +35,7 @@ export interface ThemeStoreOptions {
 export function createThemeStore(options: ThemeStoreOptions): ThemeStore {
   let store = writable<CurrentTheme>(new CurrentTheme(null, false));
 
-  if (!browser) {
+  if (!BROWSER) {
     // Stub out most of the store when running SSR.
     return {
       subscribe: store.subscribe,
diff --git a/packages/svelte-ux/src/lib/utils/logger.ts b/packages/svelte-ux/src/lib/utils/logger.ts
@@ -1,4 +1,4 @@
-import { browser } from './env.js';
+import { BROWSER } from 'esm-env';
 
 const logLevels = ['TRACE', 'DEBUG', 'INFO', 'WARN', 'ERROR'] as const;
 type LogLevel = (typeof logLevels)[number];
@@ -40,7 +40,7 @@ export class Logger {
 
   log(level: LogLevel, ...message: any) {
     // TODO: Consider checking `env` for SSR support?
-    const enabledLoggers = browser
+    const enabledLoggers = BROWSER
       ? (localStorage
           .getItem('logger')
           ?.split(',')
diff --git a/packages/svelte-ux/src/routes/+layout.svelte b/packages/svelte-ux/src/routes/+layout.svelte
@@ -19,11 +19,11 @@
     createLocaleSettings,
     entries,
   } from 'svelte-ux';
+  import { DEV } from 'esm-env';
 
   import NavMenu from './_NavMenu.svelte';
   import LanguageSelect from '$lib/components/LanguageSelect.svelte';
 
-  import { dev } from '$app/environment';
   import { afterNavigate, goto } from '$app/navigation';
   import { page } from '$app/stores';
 
@@ -164,7 +164,7 @@
     }, 0);
 
     // Posthog analytics
-    if (!dev) {
+    if (!DEV) {
       const unsubscribePage = page.subscribe(($page) => {
         if (currentPath && currentPath !== $page.url.pathname) {
           // Page navigated away
diff --git a/packages/svelte-ux/src/routes/+layout.ts b/packages/svelte-ux/src/routes/+layout.ts
@@ -1,13 +1,12 @@
 import posthog from 'posthog-js';
-
-import { browser, dev } from '$app/environment';
+import { BROWSER, DEV } from 'esm-env';
 
 // Disable server-side rendering until AppLayout shift is fixed (issue #22)
 export const ssr = false;
 
 export const load = async ({ data }) => {
   // Setup Posthog
-  if (browser && !dev) {
+  if (BROWSER && !DEV) {
     // @ts-expect-error: `posthog.init()` is valid - https://posthog.com/docs/product-analytics/installation
     posthog.init('phc_F78mUWQpKPpsXS1mamJFzDWM8bivZrwIx4Nm1cI8BSb', {
       api_host: 'https://app.posthog.com',
diff --git a/packages/svelte-ux/src/routes/docs/+layout.svelte b/packages/svelte-ux/src/routes/docs/+layout.svelte
@@ -253,10 +253,11 @@
         </div>
       {/if}
 
-      {#if api}
+      <!-- TODO: Re-enable once Svelte 5 compatibility replacement for sveld is add (issue #435) -->
+      <!-- {#if api}
         <h1>API</h1>
         <ApiDocs {api} />
-      {/if}
+      {/if} -->
     </div>
 
     {#if showTableOfContents && $xlScreen}
diff --git a/packages/svelte-ux/src/routes/docs/actions/portal/+page.svelte b/packages/svelte-ux/src/routes/docs/actions/portal/+page.svelte
@@ -17,7 +17,8 @@
   <div class="relative">
     <Toggle let:on={enabled} let:toggleOn let:toggleOff>
       <Button on:click={toggleOn} class="border mt-4">Move to body</Button>
-      <div use:portal={enabled} class="portal-content">
+      <!-- Explicit "target: document.body" only needed because ".PortalTarget" exists other examples -->
+      <div use:portal={{ enabled, target: document.body }} class="portal-content">
         <div>Portal content</div>
         {#if enabled}
           <Button on:click={toggleOff} class="border mt-4">Move back to parent</Button>
diff --git a/packages/svelte-ux/vite.config.js b/packages/svelte-ux/vite.config.js
@@ -3,7 +3,7 @@ import { sveltekit } from '@sveltejs/kit/vite';
 import { sveld } from './src/lib/plugins/vite.js';
 
 export default defineConfig({
-  plugins: [sveltekit(), sveld()],
+  plugins: [sveltekit() /*, sveld()*/],
   test: {
     include: ['src/**/*.{test,spec}.{js,ts}'],
     deps: {
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml

-Original file line number
+Diff line change
@@ @@ -0,0 +1,5 @@ @@
 +---
 +'svelte-ux': patch
 +---
++
 +fix(TableOfContents): Fix ssr support