Svelte 5

.github/workflows/test.yml

@@ -50,6 +50,7 @@ jobs:
       - name: Test
         run: |
           yarn install --immutable
+          yarn sync
           yarn test
 
   lint:
@@ -71,4 +72,5 @@ jobs:
       - name: Lint
         run: |
           yarn install --immutable
+          yarn sync
           yarn lint:ci

package.json

@@ -39,9 +39,9 @@
   },
   "devDependencies": {
     "@eslint/js": "^9.13.0",
-    "@sveltejs/adapter-auto": "^3.2.5",
-    "@sveltejs/kit": "^2.7.2",
-    "@sveltejs/vite-plugin-svelte": "^3.1.2",
+    "@sveltejs/adapter-auto": "^3.3.1",
+    "@sveltejs/kit": "^2.7.4",
+    "@sveltejs/vite-plugin-svelte": "^4.0.0",
     "@testing-library/jest-dom": "^6.6.2",
     "@testing-library/svelte": "^5.2.4",
     "@types/eslint-config-prettier": "^6.11.3",
@@ -51,7 +51,7 @@
     "@typescript-eslint/eslint-plugin": "^8.10.0",
     "@typescript-eslint/parser": "^8.10.0",
     "@typescript-eslint/utils": "^8.10.0",
-    "@vitest/coverage-v8": "^2.1.3",
+    "@vitest/coverage-v8": "^2.1.4",
     "@vitest/eslint-plugin": "^1.1.7",
     "chokidar-cli": "^3.0.0",
     "eslint": "^9.13.0",
@@ -72,13 +72,13 @@
     "sassdoc-theme-herman": "^6.0.1",
     "stylelint": "^16.10.0",
     "stylelint-config-standard-scss": "^13.1.0",
-    "svelte": "^4.2.19",
+    "svelte": "^5.1.9",
     "svelte-check": "^4.0.5",
     "svelte-eslint-parser": "^0.43.0",
     "typescript": "^5.6.3",
     "typescript-eslint": "^8.10.0",
-    "vite": "^5.4.9",
-    "vitest": "^2.1.3"
+    "vite": "^5.4.10",
+    "vitest": "^2.1.4"
   },
   "packageManager": "[email protected]"
 }

src/lib/components/SpaceSelect.svelte

@@ -5,23 +5,22 @@
   import { bg, ColorSpace, fg, format } from '$lib/stores';
   import { getSpaceFromFormatId } from '$lib/utils';
 
-  let spaces: ColorSpace[] = [];
-
-  $: spaces = FORMATS.map((s) => {
+  let spaces: ColorSpace[] = FORMATS.map((s) => {
     if (s === 'hex') return { id: 'hex', name: 'Hex' } as ColorSpace;
     return ColorSpace.get(s);
   });
-  $: targetSpace = getSpaceFromFormatId($format);
 
   // Update color formats when space selection changes
-  $: {
+  // Use $effect.pre to change colors before the $format update is applied.
+  $effect.pre(() => {
+    let targetSpace = getSpaceFromFormatId($format);
     if ($bg.space.id !== targetSpace) {
       $bg = to($bg, targetSpace, { inGamut: true });
     }
     if ($fg.space.id !== targetSpace) {
       $fg = to($fg, targetSpace, { inGamut: true });
     }
-  }
+  });
 </script>
 
 <div data-field="color-format">

src/lib/components/colors/FormatGroup.svelte

@@ -8,9 +8,13 @@
 
   import ExternalLink from '../util/ExternalLink.svelte';
 
-  export let type: 'bg' | 'fg';
-  export let color: PlainColorObject;
-  export let formatGroup: FormatGroup;
+  interface Props {
+    type: 'bg' | 'fg';
+    color: PlainColorObject;
+    formatGroup: FormatGroup;
+  }
+
+  let { type, color, formatGroup }: Props = $props();
 
   function inGamutForSpace(color: PlainColorObject) {
     if (!formatGroup.gamutFormat) return true;
@@ -19,7 +23,7 @@
     );
     return inGamut(color, gamutSpace);
   }
-  $: isInGamut = inGamutForSpace(color);
+  let isInGamut = $derived(inGamutForSpace(color));
 </script>
 
 <div data-content="format-group">

src/lib/components/colors/Formats.svelte

@@ -8,9 +8,13 @@
     type FormatGroup as FormatGroupType,
   } from '$lib/constants';
 
-  export let type: 'bg' | 'fg';
-  export let color: PlainColorObject;
-  export let format: ColorFormatId;
+  interface Props {
+    type: 'bg' | 'fg';
+    color: PlainColorObject;
+    format: ColorFormatId;
+  }
+
+  let { type, color, format }: Props = $props();
 
   function otherFormatGroups(
     selectedFormat: ColorFormatId,
@@ -25,8 +29,8 @@
     return otherFormats;
   }
 
-  $: displayType = type === 'bg' ? 'Background' : 'Foreground';
-  $: otherFormats = otherFormatGroups(format);
+  let displayType = $derived(type === 'bg' ? 'Background' : 'Foreground');
+  let otherFormats = $derived(otherFormatGroups(format));
 </script>
 
 <div data-content="formats" data-column="tool">

src/lib/components/colors/Header.svelte

@@ -1,26 +1,32 @@
 <script lang="ts">
   import { type PlainColorObject, serialize, to } from 'colorjs.io/fn';
-  import type { Writable } from 'svelte/store';
+  import { type Writable } from 'svelte/store';
 
   import CopyButton from '$lib/components/util/CopyButton.svelte';
   import type { ColorFormatId } from '$lib/constants';
   import { getSpaceFromFormatId } from '$lib/utils';
 
-  export let type: 'bg' | 'fg';
-  export let color: Writable<PlainColorObject>;
-  export let format: ColorFormatId;
+  interface Props {
+    type: 'bg' | 'fg';
+    color: Writable<PlainColorObject>;
+    format: ColorFormatId;
+  }
+
+  let { type, color, format }: Props = $props();
 
-  $: targetSpace = getSpaceFromFormatId(format);
-  $: display = serialize($color, { inGamut: false, format });
-  $: displayType = type === 'bg' ? 'Background' : 'Foreground';
-  let editing = false;
-  let inputValue = '';
-  let hasError = false;
+  let targetSpace = $derived(getSpaceFromFormatId(format));
+  let display = $derived(serialize($color, { inGamut: false, format }));
+  let displayType = $derived(type === 'bg' ? 'Background' : 'Foreground');
+  let editing = $state(false);
+  let inputValue = $state('');
+  let hasError = $state(false);
 
   // When not editing, sync input value with color (e.g. when sliders change)
-  $: if (!editing) {
-    inputValue = display;
-  }
+  $effect(() => {
+    if (!editing) {
+      inputValue = display;
+    }
+  });
 
   const handleFocus = () => {
     editing = true;
@@ -71,7 +77,7 @@
   data-column="tool"
   data-needs-changes={hasError}
 >
-  <div class="swatch {type}" />
+  <div class="swatch {type}"></div>
   <label for="{type}-color" data-label>
     {displayType} Color
   </label>
@@ -81,10 +87,10 @@
     type="text"
     data-input="color"
     value={inputValue}
-    on:focus={handleFocus}
-    on:blur={handleBlur}
-    on:input={handleInput}
-    on:keydown={handleKeydown}
+    onfocus={handleFocus}
+    onblur={handleBlur}
+    oninput={handleInput}
+    onkeydown={handleKeydown}
   />
   <CopyButton text={display} size="medium" />
   {#if hasError}

src/lib/components/colors/Output.svelte

@@ -6,16 +6,22 @@
   import type { ColorFormatId } from '$lib/constants';
   import { getSpaceFromFormatId } from '$lib/utils';
 
-  export let type: 'bg' | 'fg';
-  export let color: PlainColorObject;
-  export let format: ColorFormatId;
+  interface Props {
+    type: 'bg' | 'fg';
+    color: PlainColorObject;
+    format: ColorFormatId;
+  }
+
+  let { type, color, format }: Props = $props();
 
-  $: targetSpace = getSpaceFromFormatId(format);
-  $: targetColor = to(color, targetSpace);
-  $: targetColorValue = serialize(targetColor, {
-    format,
-    inGamut: false,
-  });
+  let targetSpace = $derived(getSpaceFromFormatId(format));
+  let targetColor = $derived(to(color, targetSpace));
+  let targetColorValue = $derived(
+    serialize(targetColor, {
+      format,
+      inGamut: false,
+    }),
+  );
 </script>
 
 <ul data-group="output {type}">

src/lib/components/colors/Sliders.svelte

@@ -6,31 +6,39 @@
   import { ColorSpace } from '$lib/stores';
   import { getSpaceFromFormatId, sliderGradient } from '$lib/utils';
 
-  export let type: 'bg' | 'fg';
-  export let color: Writable<PlainColorObject>;
-  export let format: ColorFormatId;
+  interface Props {
+    type: 'bg' | 'fg';
+    color: Writable<PlainColorObject>;
+    format: ColorFormatId;
+  }
+
+  let { type, color, format }: Props = $props();
 
-  $: targetSpace = getSpaceFromFormatId(format);
-  $: spaceObject = ColorSpace.get(targetSpace);
-  $: sliders = SLIDERS[format].map((id) => {
-    const coord = spaceObject.coords[id];
-    const range = coord?.range ?? coord?.refRange ?? [0, 1];
-    const gradient = sliderGradient($color, id, range);
-    return {
-      id,
-      name: coord?.name ?? '',
-      range,
-      index: Number(
-        ColorSpace.resolveCoord({
-          space: spaceObject,
-          coordId: id,
-        }).index,
-      ),
-      gradient,
-    };
-  });
+  let targetSpace = $derived(getSpaceFromFormatId(format));
+  let spaceObject = $derived(ColorSpace.get(targetSpace));
+  let sliders = $derived(
+    SLIDERS[format].map((id) => {
+      const coord = spaceObject.coords[id];
+      const range = coord?.range ?? coord?.refRange ?? [0, 1];
+      const gradient = sliderGradient($color, id, range);
+      return {
+        id,
+        name: coord?.name ?? '',
+        range,
+        index: Number(
+          ColorSpace.resolveCoord({
+            space: spaceObject,
+            coordId: id,
+          }).index,
+        ),
+        gradient,
+      };
+    }),
+  );
 
-  $: alphaGradient = sliderGradient($color, 'alpha', [0, $color.alpha]);
+  let alphaGradient = $derived(
+    sliderGradient($color, 'alpha', [0, $color.alpha]),
+  );
 
   const handleInput = (
     e: Event & { currentTarget: EventTarget & HTMLInputElement },
@@ -72,7 +80,7 @@
           step={getStep(slider.range)}
           style={`--stops: ${slider.gradient}`}
           value={$color.coords[slider.index]}
-          on:input={(e) => handleInput(e, slider.index)}
+          oninput={(e) => handleInput(e, slider.index)}
         />
       </div>
     {/each}
@@ -87,7 +95,7 @@
         step={getStep([0, 1])}
         style={`--stops: ${alphaGradient}`}
         value={$color.alpha}
-        on:input={(e) => handleInput(e)}
+        oninput={(e) => handleInput(e)}
       />
     </div>
   </form>

src/lib/components/colors/SupportWarning.svelte

@@ -6,18 +6,24 @@
   import { ColorSpace } from '$lib/stores';
   import { getSpaceFromFormatId } from '$lib/utils';
 
-  export let format: ColorFormatId;
+  interface Props {
+    format: ColorFormatId;
+  }
+
+  let { format }: Props = $props();
 
-  $: targetSpace = getSpaceFromFormatId(format);
-  $: spaceObject = ColorSpace.get(targetSpace);
-  $: fallbackColor = display(
-    {
-      space: spaceObject,
-      coords: spaceObject.white,
-    },
-    { inGamut: false },
-  ).color;
-  $: isSupported = fallbackColor.space.id === targetSpace;
+  let targetSpace = $derived(getSpaceFromFormatId(format));
+  let spaceObject = $derived(ColorSpace.get(targetSpace));
+  let fallbackColor = $derived(
+    display(
+      {
+        space: spaceObject,
+        coords: spaceObject.white,
+      },
+      { inGamut: false },
+    ).color,
+  );
+  let isSupported = $derived(fallbackColor.space.id === targetSpace);
 </script>
 
 {#if !isSupported}

src/lib/components/colors/index.svelte

@@ -10,13 +10,13 @@
 
 <SupportWarning format={$format} />
 
-<form data-form="contrast-checker" data-layout="color-form">
+<div data-form="contrast-checker" data-layout="color-form">
   <Header type="bg" color={bg} format={$format} />
   <Sliders type="bg" color={bg} format={$format} />
 
   <Header type="fg" color={fg} format={$format} />
   <Sliders type="fg" color={fg} format={$format} />
-</form>
+</div>
 
 <div data-layout="split">
   <Formats type="bg" color={$bg} format={$format} />

src/lib/components/ratio/ColorIssues.svelte

@@ -3,9 +3,13 @@
 
   import ExternalLink from '$lib/components/util/ExternalLink.svelte';
 
-  export let pass: boolean;
+  interface Props {
+    pass: boolean;
+  }
+
+  let { pass }: Props = $props();
 
-  let startOpen = false;
+  let startOpen = $state(false);
   onMount(() => {
     startOpen = window.matchMedia('(min-width: 80em)').matches;
   });