From f5a96a8f3ce7087da40129fedf9704344f329e1a Mon Sep 17 00:00:00 2001 From: James Stuckey Weber Date: Wed, 23 Oct 2024 14:36:37 +0000 Subject: [PATCH 1/9] Migrate, and get working --- eslint.config.js | 1 + package.json | 12 +- src/lib/components/SpaceSelect.svelte | 17 +- src/lib/components/colors/FormatGroup.svelte | 12 +- src/lib/components/colors/Formats.svelte | 14 +- src/lib/components/colors/Header.svelte | 42 +-- src/lib/components/colors/Output.svelte | 24 +- src/lib/components/colors/Sliders.svelte | 58 +++-- .../components/colors/SupportWarning.svelte | 28 +- src/lib/components/colors/index.svelte | 4 +- src/lib/components/ratio/ColorIssues.svelte | 8 +- src/lib/components/ratio/Result.svelte | 12 +- src/lib/components/ratio/index.svelte | 6 +- src/lib/components/util/CopyButton.svelte | 12 +- src/lib/components/util/ExternalLink.svelte | 16 +- src/lib/components/util/Icon.svelte | 18 +- src/lib/icons/Check.svelte | 11 +- src/lib/icons/Clipboard.svelte | 15 +- src/lib/icons/Copy.svelte | 11 +- src/lib/icons/GitHub.svelte | 11 +- src/lib/icons/LinkedIn.svelte | 11 +- src/lib/icons/Logo.svelte | 15 +- src/lib/icons/Mastodon.svelte | 11 +- src/lib/icons/NewTab.svelte | 11 +- src/lib/icons/OddBird.svelte | 15 +- src/lib/icons/Twitter.svelte | 11 +- src/lib/icons/Warning.svelte | 11 +- src/routes/+layout.svelte | 11 +- src/routes/+page.svelte | 4 +- yarn.lock | 240 ++++++++++-------- 30 files changed, 422 insertions(+), 250 deletions(-) diff --git a/eslint.config.js b/eslint.config.js index 44938c9b..408588e5 100644 --- a/eslint.config.js +++ b/eslint.config.js @@ -30,6 +30,7 @@ export default [ 'static/built/*', 'static/styleguide/*', 'yarn.lock', + 'vite.config.ts.timestamp*', ], }, js.configs.recommended, diff --git a/package.json b/package.json index 2eed9522..602f6848 100644 --- a/package.json +++ b/package.json @@ -39,9 +39,9 @@ }, "devDependencies": { "@eslint/js": "^9.12.0", - "@sveltejs/adapter-auto": "^3.2.5", - "@sveltejs/kit": "^2.7.0", - "@sveltejs/vite-plugin-svelte": "^3.1.2", + "@sveltejs/adapter-auto": "^3.3.0", + "@sveltejs/kit": "^2.7.2", + "@sveltejs/vite-plugin-svelte": "^4.0.0", "@testing-library/jest-dom": "^6.5.0", "@testing-library/svelte": "^5.2.3", "@types/eslint-config-prettier": "^6.11.3", @@ -59,7 +59,7 @@ "eslint-import-resolver-typescript": "^3.6.3", "eslint-plugin-import": "^2.31.0", "eslint-plugin-simple-import-sort": "^12.1.1", - "eslint-plugin-svelte": "^2.44.1", + "eslint-plugin-svelte": "^2.45.1", "jsdom": "^25.0.1", "lodash": "^4.17.21", "mockdate": "^3.0.5", @@ -72,9 +72,9 @@ "sassdoc-theme-herman": "^6.0.1", "stylelint": "^16.10.0", "stylelint-config-standard-scss": "^13.1.0", - "svelte": "^4.2.19", + "svelte": "^5.0.5", "svelte-check": "^4.0.5", - "svelte-eslint-parser": "^0.41.1", + "svelte-eslint-parser": "^0.43.0", "typescript": "^5.6.3", "typescript-eslint": "^8.8.0", "vite": "^5.4.8", diff --git a/src/lib/components/SpaceSelect.svelte b/src/lib/components/SpaceSelect.svelte index de147847..80ab2f54 100644 --- a/src/lib/components/SpaceSelect.svelte +++ b/src/lib/components/SpaceSelect.svelte @@ -1,27 +1,30 @@
diff --git a/src/lib/components/colors/FormatGroup.svelte b/src/lib/components/colors/FormatGroup.svelte index ccbee973..7cbca4f2 100644 --- a/src/lib/components/colors/FormatGroup.svelte +++ b/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));
diff --git a/src/lib/components/colors/Formats.svelte b/src/lib/components/colors/Formats.svelte index b63ba975..263e9e92 100644 --- a/src/lib/components/colors/Formats.svelte +++ b/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));
diff --git a/src/lib/components/colors/Header.svelte b/src/lib/components/colors/Header.svelte index 11b96c5f..ba542eaf 100644 --- a/src/lib/components/colors/Header.svelte +++ b/src/lib/components/colors/Header.svelte @@ -1,26 +1,32 @@
    diff --git a/src/lib/components/colors/Sliders.svelte b/src/lib/components/colors/Sliders.svelte index a467c7c0..d5b64bc5 100644 --- a/src/lib/components/colors/Sliders.svelte +++ b/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; - export let format: ColorFormatId; + interface Props { + type: 'bg' | 'fg'; + color: Writable; + 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)} />
{/each} @@ -87,7 +95,7 @@ step={getStep([0, 1])} style={`--stops: ${alphaGradient}`} value={$color.alpha} - on:input={(e) => handleInput(e)} + oninput={(e) => handleInput(e)} />
diff --git a/src/lib/components/colors/SupportWarning.svelte b/src/lib/components/colors/SupportWarning.svelte index a2a5363c..f0af3776 100644 --- a/src/lib/components/colors/SupportWarning.svelte +++ b/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); {#if !isSupported} diff --git a/src/lib/components/colors/index.svelte b/src/lib/components/colors/index.svelte index ee82c135..5a836e4f 100644 --- a/src/lib/components/colors/index.svelte +++ b/src/lib/components/colors/index.svelte @@ -10,13 +10,13 @@ -
+
- +
diff --git a/src/lib/components/ratio/ColorIssues.svelte b/src/lib/components/ratio/ColorIssues.svelte index 39af8e77..f83f1e32 100644 --- a/src/lib/components/ratio/ColorIssues.svelte +++ b/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; }); diff --git a/src/lib/components/ratio/Result.svelte b/src/lib/components/ratio/Result.svelte index 60297684..7675d2a3 100644 --- a/src/lib/components/ratio/Result.svelte +++ b/src/lib/components/ratio/Result.svelte @@ -2,11 +2,15 @@ import Icon from '$lib/components/util/Icon.svelte'; import { RATIOS } from '$lib/constants'; - export let level: 'AA' | 'AAA'; - export let type: 'Normal' | 'Large'; - export let ratio: number; + interface Props { + level: 'AA' | 'AAA'; + type: 'Normal' | 'Large'; + ratio: number; + } + + let { level, type, ratio }: Props = $props(); - $: pass = ratio >= RATIOS[level][type]; + let pass = $derived(ratio >= RATIOS[level][type]);
diff --git a/src/lib/components/ratio/index.svelte b/src/lib/components/ratio/index.svelte index f0162277..7275d7ec 100644 --- a/src/lib/components/ratio/index.svelte +++ b/src/lib/components/ratio/index.svelte @@ -7,9 +7,9 @@ import { RATIOS } from '$lib/constants'; import { bg, fg } from '$lib/stores'; - $: ratio = contrast($bg, $fg, 'WCAG21'); - $: displayRatio = Math.round((ratio + Number.EPSILON) * 100) / 100; - $: pass = ratio >= RATIOS.AA.Normal; + let ratio = $derived(contrast($bg, $fg, 'WCAG21')); + let displayRatio = $derived(Math.round((ratio + Number.EPSILON) * 100) / 100); + let pass = $derived(ratio >= RATIOS.AA.Normal);