Merge pull request #3 from a-luna/color-tools-2023_12_14

refactor(svelte-color-tools): ♻️ improve typing of custom events
a-luna · Dec 14, 2023 · dd47dd6 · dd47dd6
2 parents 445deba + 6e18d18
commit dd47dd6
Show file tree

Hide file tree

Showing 23 changed files with 108 additions and 105 deletions.
diff --git a/packages/svelte-color-tools/src/lib/components/ColorPicker/ColorLabel/CopyColorString.svelte b/packages/svelte-color-tools/src/lib/components/ColorPicker/ColorLabel/CopyColorString.svelte
@@ -10,8 +10,12 @@
 	export let currentColor = '';
 	let picker = getColorPickerStore(pickerId);
 	let currentLabelIndex = 0;
-	const editColorStringEventDispatcher = createEventDispatcher<{ editColorString: {} }>();
-	const copyColorStringEventDispatcher = createEventDispatcher<{ copyColorString: { currentColor: string } }>();
+
+	interface CopyColorStringEvent {
+		editColorString: null;
+		copyColorString: { currentColor: string };
+	}
+	const dispatch = createEventDispatcher<CopyColorStringEvent>();
 
 	export function setColorFormat(colorFormat: ColorFormat) {
 		currentLabelIndex = getColorFormatIndex(colorFormat);
@@ -57,7 +61,7 @@
 
 	function handleEditColorStringButton() {
 		if (editable) {
-			editColorStringEventDispatcher('editColorString');
+			dispatch('editColorString');
 		}
 	}
 </script>
@@ -69,7 +73,7 @@
 	class:cursor-pointer={editable}
 	class:cursor-not-allowed={!editable}
 	title="Copy {currentColorFormat} value"
-	on:click={() => copyColorStringEventDispatcher('copyColorString', { currentColor })}
+	on:click={() => dispatch('copyColorString', { currentColor })}
 >
 	<BasicIconRenderer icon={'copy'} width={'16px'} height={'16px'} />
 </button>

diff --git a/packages/svelte-color-tools/src/lib/components/ColorPicker/ColorLabel/EditColorString.svelte b/packages/svelte-color-tools/src/lib/components/ColorPicker/ColorLabel/EditColorString.svelte
@@ -4,18 +4,22 @@
 
 	export let value: string = '';
 	let textInput: HTMLInputElement;
-	const dispatchStringValueChanged = createEventDispatcher<{ stringValueChanged: { css: string } }>();
-	const dispatchKeepCurrentColor = createEventDispatcher<{ keepCurrentColor: {} }>();
+
+	interface EditColorStringevent {
+		stringValueChanged: { css: string };
+		keepCurrentColor: null;
+	}
+	const dispatch = createEventDispatcher<EditColorStringevent>();
 
 	function handleKeyPress(key: string) {
 		if (key === 'Enter') {
-			dispatchStringValueChanged('stringValueChanged', { css: textInput.value });
+			dispatch('stringValueChanged', { css: textInput.value });
 		}
 	}
 
 	function handleEscapeKeyPress(key: string) {
 		if (key === 'Escape') {
-			dispatchKeepCurrentColor('keepCurrentColor');
+			dispatch('keepCurrentColor');
 		}
 	}
 
@@ -29,7 +33,7 @@
 	id="keep-color-button"
 	data-testid="keep-color-button"
 	title="Cancel"
-	on:click={() => dispatchKeepCurrentColor('keepCurrentColor')}
+	on:click={() => dispatch('keepCurrentColor')}
 >
 	<BasicIconRenderer icon={'cancel'} />
 </div>
@@ -45,7 +49,7 @@
 	id="change-color-button"
 	data-testid="change-color-button"
 	title="Change color"
-	on:click={() => dispatchStringValueChanged('stringValueChanged', { css: textInput.value })}
+	on:click={() => dispatch('stringValueChanged', { css: textInput.value })}
 >
 	<BasicIconRenderer icon={'ok'} />
 </div>

diff --git a/packages/svelte-color-tools/src/lib/components/ColorPicker/ColorSwatch.svelte b/packages/svelte-color-tools/src/lib/components/ColorPicker/ColorSwatch.svelte
@@ -8,8 +8,12 @@
 
 	export let pickerId: string;
 	let picker = getColorPickerStore(pickerId);
-	const dispatchSwatchClicked = createEventDispatcher<{ swatchClicked: {} }>();
-	const dispatchIconClicked = createEventDispatcher<{ iconClicked: {} }>();
+
+	interface ColorSwatchEvent {
+		swatchClicked: null;
+		iconClicked: null;
+	}
+	const dispatch = createEventDispatcher<ColorSwatchEvent>();
 
 	$: swatchBorderColor =
 		$picker?.colorInGamut?.oklch.l > 20
@@ -44,15 +48,15 @@
 		class="swatch-overlay"
 		class:hidden={showBothSwatches}
 		style="{overlayColorSrgb} {swatchBorderStyles}"
-		on:click={() => dispatchSwatchClicked('swatchClicked')}
+		on:click={() => dispatch('swatchClicked')}
 	/>
 	<div class="swatch-p3" class:hidden={!showBothSwatches} style={swatchColor} />
 	<button
 		class="swatch-overlay-p3"
 		class:hidden={!showBothSwatches}
 		class:selected-color={selectedColorP3}
 		style="{overlayColorP3} {swatchTextStyles} {swatchBorderStyles} {selectedColorP3 ? selectedColorOutlineColor : ''}"
-		on:click={() => dispatchSwatchClicked('swatchClicked')}
+		on:click={() => dispatch('swatchClicked')}
 		>P3
 	</button>
 	<div class="swatch-srgb" class:hidden={!showBothSwatches} style={swatchColor} />
@@ -63,14 +67,14 @@
 		style="{overlayColorSrgb} {swatchTextStyles} {swatchBorderStyles} {selectedColorP3
 			? ''
 			: selectedColorOutlineColor}"
-		on:click={() => dispatchSwatchClicked('swatchClicked')}
+		on:click={() => dispatch('swatchClicked')}
 		>sRGB
 	</button>
 	<button
 		class="icon"
 		title={'Open X11 Color Palettes'}
 		style="width: var(--x11-color-palettes-icon-size); height: var(--x11-color-palettes-icon-size);"
-		on:click|stopPropagation={() => dispatchIconClicked('iconClicked')}
+		on:click|stopPropagation={() => dispatch('iconClicked')}
 	>
 		<BasicIconRenderer icon={'colorswatches'} />
 	</button>

diff --git a/packages/svelte-color-tools/src/lib/components/ColorPicker/X11Palettes/X11Color.svelte b/packages/svelte-color-tools/src/lib/components/ColorPicker/X11Palettes/X11Color.svelte
@@ -4,18 +4,14 @@
 	import { createEventDispatcher } from 'svelte';
 
 	export let color: CssColorForColorSpace;
-	const dispatchColorSelected = createEventDispatcher<{ colorSelected: { hex: string } }>();
+	const dispatch = createEventDispatcher<{ colorSelected: { hex: string } }>();
 
 	$: buttonToolTip = `${color.name} (${color.hex}, hue: ${color.hsl.h})`;
 </script>
 
 <div class="color-wrapper x11-color named-color">
 	<div class="color-wrapper-top">
-		<button
-			type="button"
-			title={buttonToolTip}
-			on:click={() => dispatchColorSelected('colorSelected', { hex: color.hex })}
-		>
+		<button type="button" title={buttonToolTip} on:click={() => dispatch('colorSelected', { hex: color.hex })}>
 			<ColorSwatch {color} />
 		</button>
 	</div>

diff --git a/packages/svelte-color-tools/src/lib/components/ColorPicker/X11Palettes/X11ColorSwatch.svelte b/packages/svelte-color-tools/src/lib/components/ColorPicker/X11Palettes/X11ColorSwatch.svelte
@@ -9,7 +9,7 @@
 	export let tooltip: string;
 	let buttonComponent: HTMLButtonElement;
 
-	const x11PaletteSelectedEventDispatcher = createEventDispatcher<{ x11PaletteSelected: { paletteId: string } }>();
+	const dispatch = createEventDispatcher<{ x11PaletteSelected: { paletteId: string } }>();
 
 	$: active = paletteId === activePaletteId;
 	$: style = `--button-background-color: var(--${color}-bg-color); --button-background-color-hover: var(--${color}-hover-bg-color); --button-background-color-active: var(--${color}-fg-color); --button-color: var(--${color}-fg-color); --button-color-hover: var(--${color}-fg-color); --button-color-active: var(--${color}-fg-color);`;
@@ -26,7 +26,7 @@
 	title={tooltip}
 	{disabled}
 	{style}
-	on:click={() => x11PaletteSelectedEventDispatcher('x11PaletteSelected', { paletteId })}
+	on:click={() => dispatch('x11PaletteSelected', { paletteId })}
 />
 
 <style lang="postcss">

diff --git a/packages/svelte-color-tools/src/lib/components/ColorPicker/X11Palettes/X11Palettes.svelte b/packages/svelte-color-tools/src/lib/components/ColorPicker/X11Palettes/X11Palettes.svelte
@@ -12,7 +12,7 @@
 
 	let carouselElement: HTMLDivElement;
 	let carouselItemSize: number;
-	const hideX11PalettesEventDispatcher = createEventDispatcher<{ hideX11Palettes: {} }>();
+	const dispatch = createEventDispatcher<{ hideX11Palettes: null }>();
 	const handleX11PaletteSelected = (e: CustomEvent<{ paletteId: string }>) =>
 		scrollToSelectedPalette(e.detail.paletteId);
 
@@ -50,7 +50,7 @@
 
 	async function handleKeydown(event: KeyboardEvent) {
 		if (event.key === 'Escape') {
-			hideX11PalettesEventDispatcher('hideX11Palettes');
+			dispatch('hideX11Palettes');
 		}
 		if (event.key === 'ArrowLeft') {
 			scrollToPreviousPalette();
@@ -77,7 +77,7 @@
 			aria-label="Close"
 			title="Close X11 Color Palettes"
 			style="color: var(--{paletteColor}-fg-color)"
-			on:click={() => hideX11PalettesEventDispatcher('hideX11Palettes')}
+			on:click={() => dispatch('hideX11Palettes')}
 		>
 			<BasicIconRenderer icon={'close'} />
 		</button>

diff --git a/packages/svelte-color-tools/src/lib/components/ComponentEditor/ComponentEditor.svelte b/packages/svelte-color-tools/src/lib/components/ComponentEditor/ComponentEditor.svelte
@@ -37,7 +37,7 @@
 	let editThemeSettingsModal: EditThemeSettingsModal;
 	let componentColor: ComponentColor = 'black';
 	let contentViewer: ContentViewer;
-	const dispatchUiColorChanged = createEventDispatcher<{ uiColorChanged: { uiColor: ComponentColor } }>();
+	const dispatch = createEventDispatcher<{ uiColorChanged: { uiColor: ComponentColor } }>();
 
 	// # NEW IDEAS
 	// New high-level data structure: ThemeSet
@@ -175,11 +175,11 @@
 		$themeEditor.userTheme = userTheme;
 		themeInitialized = true;
 		contentViewer.changeComponentPrefix(userTheme.usesPrefix, userTheme.themePrefix);
-		dispatchUiColorChanged('uiColorChanged', { uiColor: userTheme.uiColor });
+		dispatch('uiColorChanged', { uiColor: userTheme.uiColor });
 	}
 
-	function handleUiColorChanged(e: CustomEvent<{}>) {
-		dispatchUiColorChanged('uiColorChanged', { uiColor: $themeEditor.userTheme.uiColor });
+	function handleUiColorChanged(e: CustomEvent<null>) {
+		dispatch('uiColorChanged', { uiColor: $themeEditor.userTheme.uiColor });
 	}
 
 	function newUserTheme() {
@@ -202,7 +202,7 @@
 		$themeEditor.selectedPaletteId = '';
 		$themeEditor.userTheme = defaultUserThemeImported;
 		themeInitialized = false;
-		dispatchUiColorChanged('uiColorChanged', { uiColor: $themeEditor.userTheme.uiColor });
+		dispatch('uiColorChanged', { uiColor: $themeEditor.userTheme.uiColor });
 	}
 
 	function handleSetColorPicker(e: CustomEvent<{ color: CssColor }>) {
@@ -256,8 +256,8 @@
 						on:editThemeSettings={() => editThemeSettingsModal.toggleModal()}
 						on:saveUserTheme={() => downloadUserThemeJson($themeEditor.userTheme)}
 						on:closeUserTheme={() => closeUserTheme()}
-						on:createPalette={() => themeEditor.createNewPalette()}
-						on:deletePalette={(e) => themeEditor.deletePalette(e.detail)}
+						on:createPalette={themeEditor.createNewPalette}
+						on:deletePalette={themeEditor.deletePalette}
 						on:paletteSelected={handlePaletteSelected}
 						on:colorSelected={(e) => themeEditor.changeSelectedColor(e.detail)}
 						on:deleteColor={(e) => themeEditor.deleteColorFromPalette(e.detail)}

diff --git a/...s/src/lib/components/ComponentEditor/ContentViewer/ComponentSection/BgColorOptions.svelte b/...s/src/lib/components/ComponentEditor/ContentViewer/ComponentSection/BgColorOptions.svelte
@@ -9,9 +9,7 @@
 	export let options: SelectListOption[] = [];
 	export let menuId: string = '';
 	let selectedOption: SelectListOption;
-	const selectedOptionChangedDispatcher = createEventDispatcher<{
-		selectedOptionChanged: { selected: string | number };
-	}>();
+	const dispatch = createEventDispatcher<{ selectedOptionChanged: { selected: string | number } }>();
 
 	export function handleSelectedOptionChanged(e: CustomEvent<{ optionNumber: number }>) {
 		const { optionNumber } = e.detail;
@@ -20,7 +18,7 @@
 			selectedOption = options.find((menuOption) => menuOption.optionNumber == optionNumber) ?? selectedOption;
 			selectedOption.active = true;
 			if (typeof selectedOption.value === 'string') {
-				selectedOptionChangedDispatcher('selectedOptionChanged', { selected: selectedOption.value });
+				dispatch('selectedOptionChanged', { selected: selectedOption.value });
 			}
 		}
 	}

diff --git a/...rc/lib/components/ComponentEditor/ContentViewer/CssSection/CssControls/CssControls.svelte b/...rc/lib/components/ComponentEditor/ContentViewer/CssSection/CssControls/CssControls.svelte
@@ -6,21 +6,25 @@
 	export let totalSelected: number;
 	export let allCustomPropsSelected: boolean;
 	export let anyCustomPropsSelected: boolean;
-	const selectAllCustomPropertiesDispatcher = createEventDispatcher<{ selectAllCustomProperties: {} }>();
-	const deselectAllCustomPropertiesDispatcher = createEventDispatcher<{ deselectAllCustomProperties: {} }>();
+
+	interface CssControlsEvent {
+		selectAllCustomProperties: null;
+		deselectAllCustomProperties: null;
+	}
+	const dispatch = createEventDispatcher<CssControlsEvent>();
 </script>
 
 <div class="css-controls">
 	<div class="button-list">
 		<SelectAllCustomPropsButton
 			disabled={allCustomPropsSelected}
 			wrapperWidth={'100px'}
-			on:click={() => selectAllCustomPropertiesDispatcher('selectAllCustomProperties')}
+			on:click={() => dispatch('selectAllCustomProperties')}
 		/>
 		<SelectNoneCustomPropsButton
 			disabled={!anyCustomPropsSelected}
 			wrapperWidth={'112px'}
-			on:click={() => deselectAllCustomPropertiesDispatcher('deselectAllCustomProperties')}
+			on:click={() => dispatch('deselectAllCustomProperties')}
 		/>
 	</div>
 	<span class="total-selected"><strong>{totalSelected}</strong> custom properties selected</span>

diff --git a/.../src/lib/components/ComponentEditor/ContentViewer/CssSection/CssFilters/CssFilters.svelte b/.../src/lib/components/ComponentEditor/ContentViewer/CssSection/CssFilters/CssFilters.svelte
@@ -3,42 +3,31 @@
 	import RuleSelectorList from '$lib/components/ComponentEditor/ContentViewer/CssSection/CssFilters/RuleSelectorList.svelte';
 	import UseThemePrefixCheckbox from '$lib/components/ComponentEditor/ContentViewer/CssSection/CssFilters/UseThemePrefixCheckbox.svelte';
 	import { getAppContext } from '$lib/stores';
-	import { InputTextBox, type ComponentColor } from '@a-luna/shared-ui';
+	import { InputTextBox } from '@a-luna/shared-ui';
 	import { createEventDispatcher } from 'svelte';
 
 	export let allSelectors: string[];
 	export let useThemePrefix = false;
 	export let ignoreTailwinds = false;
 	export let selector = '';
-	export let componentColor: ComponentColor;
 	export let prefix: string;
 	export let themeInitialized: boolean;
-	const dispatchIgnoreTailwindsChanged = createEventDispatcher<{
+
+	interface CssFiltersEvent {
 		ignoreTailwindsChanged: { ignore: boolean };
-	}>();
-	const dispatchUseThemePrefixChanged = createEventDispatcher<{
 		useThemePrefixChanged: { usePrefix: boolean };
-	}>();
-	const dispatchComponentPrefixChanged = createEventDispatcher<{ componentPrefixChanged: { newPrefix: string } }>();
+		componentPrefixChanged: { newPrefix: string };
+	}
+	const dispatch = createEventDispatcher<CssFiltersEvent>();
 	let { themeEditor } = getAppContext();
 
 	$: themePrefixExists = Boolean($themeEditor?.userTheme?.usesPrefix && $themeEditor?.userTheme?.themePrefix);
 	$: themePrefixInputTextBoxDisabled = !themeInitialized || (themeInitialized && useThemePrefix && themePrefixExists);
-	$: if (ignoreTailwinds || !ignoreTailwinds) {
-		dispatchIgnoreTailwindsChanged('ignoreTailwindsChanged', { ignore: ignoreTailwinds });
-	}
-	$: if (!themeInitialized) {
-		prefix = '';
-	}
-	$: if (useThemePrefix || !useThemePrefix) {
-		dispatchUseThemePrefixChanged('useThemePrefixChanged', { usePrefix: useThemePrefix });
-	}
-	$: if (useThemePrefix && themePrefixExists) {
-		prefix = $themeEditor?.userTheme?.themePrefix;
-	}
-	$: if (prefix) {
-		dispatchComponentPrefixChanged('componentPrefixChanged', { newPrefix: prefix });
-	}
+	$: if (ignoreTailwinds || !ignoreTailwinds) dispatch('ignoreTailwindsChanged', { ignore: ignoreTailwinds });
+	$: if (!themeInitialized) prefix = '';
+	$: if (useThemePrefix || !useThemePrefix) dispatch('useThemePrefixChanged', { usePrefix: useThemePrefix });
+	$: if (useThemePrefix && themePrefixExists) prefix = $themeEditor?.userTheme?.themePrefix;
+	$: if (prefix) dispatch('componentPrefixChanged', { newPrefix: prefix });
 
 	export function handleUserThemeUpdated(usesPrefix: boolean) {
 		useThemePrefix = usesPrefix;
@@ -53,10 +42,10 @@
 		id={'theme-prefix-textbox'}
 		style="grid-column: 1 / span 1; grid-row: 2 / span 1;"
 	/>
-	<UseThemePrefixCheckbox {componentColor} bind:checked={useThemePrefix} disabled={!themeInitialized} />
+	<UseThemePrefixCheckbox bind:checked={useThemePrefix} disabled={!themeInitialized} />
 	<span class="selector-label label">CSS Rule Selector:</span>
 	<RuleSelectorList {allSelectors} bind:value={selector} on:cssRuleSelectorChanged />
-	<IgnoreTailwindsCheckbox {componentColor} bind:checked={ignoreTailwinds} />
+	<IgnoreTailwindsCheckbox bind:checked={ignoreTailwinds} />
 </div>
 
 <style lang="postcss">

diff --git a/...onents/ComponentEditor/ContentViewer/CssSection/CssFilters/IgnoreTailwindsCheckbox.svelte b/...onents/ComponentEditor/ContentViewer/CssSection/CssFilters/IgnoreTailwindsCheckbox.svelte
@@ -1,8 +1,7 @@
 <script lang="ts">
-	import { Checkbox, type ComponentColor } from '@a-luna/shared-ui';
+	import { Checkbox } from '@a-luna/shared-ui';
 
 	export let checked: boolean;
-	export let componentColor: ComponentColor;
 	const style = `grid-column: 4 / span 1; grid-row: 2 / span 1;`;
 </script>
 

diff --git a/...ponents/ComponentEditor/ContentViewer/CssSection/CssFilters/UseThemePrefixCheckbox.svelte b/...ponents/ComponentEditor/ContentViewer/CssSection/CssFilters/UseThemePrefixCheckbox.svelte
@@ -1,8 +1,7 @@
 <script lang="ts">
-	import { Checkbox, type ComponentColor } from '@a-luna/shared-ui';
+	import { Checkbox } from '@a-luna/shared-ui';
 
 	export let checked: boolean;
-	export let componentColor: ComponentColor;
 	export let disabled: boolean;
 	const style = `grid-column: 2 / span 1; grid-row: 2 / span 1;`;
 </script>