diff --git a/package.json b/package.json index 4222730e..0a988f63 100644 --- a/package.json +++ b/package.json @@ -23,7 +23,7 @@ "prettier": "prettier --write .", "prettier:ci": "prettier --check .", "lint:sass": "yarn lint:sass:ci --fix", - "lint:ci": "run-p prettier:ci sync check lint:js:ci lint:sass:ci tsc tsc:tests", + "lint:ci": "run-s prettier:ci sync check lint:js:ci lint:sass:ci tsc tsc:tests", "lint:sass:ci": "stylelint '**/*.scss'", "docs:json": "sass -p node src/sass/json.scss static/built/json.css", "docs:sass": "sass -p node src/sass/app.scss static/built/app.css", @@ -38,23 +38,23 @@ "colorjs.io": "^0.5.2" }, "devDependencies": { - "@eslint/js": "^9.13.0", - "@sveltejs/adapter-auto": "^3.2.5", - "@sveltejs/kit": "^2.7.2", - "@sveltejs/vite-plugin-svelte": "^3.1.2", - "@testing-library/jest-dom": "^6.6.2", + "@eslint/js": "^9.14.0", + "@sveltejs/adapter-auto": "^3.3.1", + "@sveltejs/kit": "^2.8.0", + "@sveltejs/vite-plugin-svelte": "^4.0.0", + "@testing-library/jest-dom": "^6.6.3", "@testing-library/svelte": "^5.2.4", "@types/eslint-config-prettier": "^6.11.3", "@types/eslint__js": "^8.42.3", - "@types/lodash": "^4.17.12", + "@types/lodash": "^4.17.13", "@types/node": "^20", - "@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", + "@typescript-eslint/eslint-plugin": "^8.13.0", + "@typescript-eslint/parser": "^8.13.0", + "@typescript-eslint/utils": "^8.13.0", + "@vitest/coverage-v8": "^2.1.4", "@vitest/eslint-plugin": "^1.1.7", "chokidar-cli": "^3.0.0", - "eslint": "^9.13.0", + "eslint": "^9.14.0", "eslint-config-prettier": "^9.1.0", "eslint-import-resolver-typescript": "^3.6.3", "eslint-plugin-import": "^2.31.0", @@ -67,18 +67,18 @@ "postcss": "^8.4.47", "prettier": "^3.3.3", "prettier-plugin-svelte": "^3.2.7", - "sass-embedded": "^1.80.3", + "sass-embedded": "^1.80.6", "sassdoc": "^2.7.4", "sassdoc-theme-herman": "^6.0.1", "stylelint": "^16.10.0", "stylelint-config-standard-scss": "^13.1.0", - "svelte": "^4.2.19", + "svelte": "^5.1.12", "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" + "typescript-eslint": "^8.13.0", + "vite": "^5.4.10", + "vitest": "^2.1.4" }, - "packageManager": "yarn@4.5.0" + "packageManager": "yarn@4.5.1" } diff --git a/src/lib/components/SpaceSelect.svelte b/src/lib/components/SpaceSelect.svelte index de147847..41fd50fd 100644 --- a/src/lib/components/SpaceSelect.svelte +++ b/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 }); } - } + });
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 28d3f12b..adb627e6 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..25a6810d 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 }, @@ -59,38 +67,36 @@
    -
    - {#each sliders as slider (slider.id)} -
    - - handleInput(e, slider.index)} - /> -
    - {/each} + {#each sliders as slider (slider.id)}
    - + handleInput(e)} + min={slider.range[0]} + max={slider.range[1]} + step={getStep(slider.range)} + style={`--stops: ${slider.gradient}`} + value={$color.coords[slider.index]} + oninput={(e) => handleInput(e, slider.index)} />
    -
    + {/each} +
    + + handleInput(e)} + /> +