chore: refactor and cleanup

jesperorb · Mar 24, 2024 · b4e08f0 · b4e08f0
1 parent 6dbafb1
commit b4e08f0
Show file tree

Hide file tree

Showing 22 changed files with 168 additions and 198 deletions.
diff --git a/src/lib/components/Sidebar.svelte b/src/lib/components/Sidebar.svelte
@@ -80,7 +80,7 @@
 			</li>
 			<li class="menu-heading">Intl.</li>
 			{#each routes as route, i}
-				<li aria-hidden={route.ariaHidden} class="route" class:last-item={i === routes.length - 1}>
+				<li class="route" class:last-item={i === routes.length - 1}>
 					<a
 						aria-label={route.ariaLabel}
 						class:sublink={route.sublink}

diff --git a/src/lib/components/pages/Collator.svelte b/src/lib/components/pages/Collator.svelte
@@ -9,8 +9,7 @@
 	import type { BrowserSupportDataForMethod } from '$lib/types/BrowserSupport.types';
 	import type { OptionValues } from '$lib/types/OptionValues.types';
 	import { collatorFormatOptions } from '$lib/format-options/collator.options';
-	import { copyToClipboard } from '$lib/utils/copy-to-clipboard';
-	import { trackEvent } from '$lib/utils/analytics';
+	import { copyCode } from '$lib/utils/copy-to-clipboard';
 	import { tryFormat } from '$lib/utils/format-utils';
 
 	export let locale: string;
@@ -20,10 +19,7 @@
 
 	let onClick = async (options: OptionValues) => {
 		const code = `[].sort(new Intl.Collator("${locale}", ${JSON.stringify(options)}).compare)`;
-		await copyToClipboard(code);
-		trackEvent('Copy Code', {
-			code
-		});
+		await copyCode(code);
 	};
 	const format = (options: Intl.CollatorOptions, list: string) =>
 		tryFormat(() => list.split(',').sort(new Intl.Collator(locale, options).compare).join(','));

diff --git a/src/lib/components/pages/DateTimeFormat.svelte b/src/lib/components/pages/DateTimeFormat.svelte
@@ -12,10 +12,10 @@
 		datetimeFormatOptions,
 		getDateTimeFormatOptions
 	} from '$lib/format-options/datetime-format.options';
-	import { copyToClipboard } from '$lib/utils/copy-to-clipboard';
+	import { copyCode } from '$lib/utils/copy-to-clipboard';
 	import type { OptionValues } from '$lib/types/OptionValues.types';
 	import type { BrowserSupportDataForMethod } from '$lib/types/BrowserSupport.types';
-	import { trackEvent } from '$lib/utils/analytics';
+	import { tryFormat } from '$lib/utils/format-utils';
 
 	export let locale: string;
 	export let browserCompatData: BrowserSupportDataForMethod | null;
@@ -28,25 +28,13 @@
 
 	let onClick = async (options: OptionValues) => {
 		const code = `new Intl.DateTimeFormat("${locale}", ${JSON.stringify(
-				options
-			)}).format(new Date("${dateTimeString}"))`;
-		await copyToClipboard(code);
-		trackEvent("Copy Code", {
-			code
-		})
+			options
+		)}).format(new Date("${dateTimeString}"))`;
+		await copyCode(code);
 	};
 
-	const tryFormat = (
-		options: Intl.DateTimeFormatOptions | undefined = undefined,
-		dateTime: string
-	) => {
-		try {
-			return new Intl.DateTimeFormat(locale, options)
-				.format(new Date(`${dateTime}`))
-		} catch (e) {
-			return 'Failed to use `Intl.DateTimeFormat`. You are probably using an unsupported browser';
-		}
-	};
+	const format = (options: Intl.DateTimeFormatOptions | undefined = undefined, dateTime: string) =>
+		tryFormat(() => new Intl.DateTimeFormat(locale, options).format(new Date(`${dateTime}`)));
 </script>
 
 <PageLayout>
@@ -63,8 +51,15 @@
 		>
 	</div>
 	<CodeBlock slot="alternativeCode">
-		<Token v="new" t="punctuation" /> <Token v="Date" t="class" />{"("}<Token v="{`"${dateTimeString}"`}" t="string" />{")"}
-		 .<Token v="toLocaleString" t="function" />{"("}<Token v="{`"${locale}"`}" t="string" />{")"}{"\n"}<Token v="// " ariaHidden noTrim t="comment"/><Token v={`${new Date(dateTimeString).toLocaleString(locale)}`} t="comment" />
+		<Token v="new" t="punctuation" />
+		<Token v="Date" t="class" />{'('}<Token v={`"${dateTimeString}"`} t="string" />{')'}
+		.<Token v="toLocaleString" t="function" />{'('}<Token
+			v={`"${locale}"`}
+			t="string"
+		/>{')'}{'\n'}<Token v="// " ariaHidden noTrim t="comment" /><Token
+			v={`${tryFormat(() => new Date(dateTimeString).toLocaleString(locale))}`}
+			t="comment"
+		/>
 	</CodeBlock>
 	<Grid slot="output">
 		{#each Object.entries(datetimeFormatOptions) as [option, values]}
@@ -75,12 +70,11 @@
 						<Highlight
 							{onClick}
 							values={{ [option]: value }}
-							output={tryFormat(getDateTimeFormatOptions(option, value), dateTimeString)}
+							output={format(getDateTimeFormatOptions(option, value), dateTimeString)}
 						/>
 					{/if}
 				{/each}
 			</OptionSection>
 		{/each}
 	</Grid>
 </PageLayout>
-
diff --git a/src/lib/components/pages/DurationFormat.svelte b/src/lib/components/pages/DurationFormat.svelte
@@ -6,10 +6,9 @@
 	import Input from '$lib/components/ui/Input.svelte';
 	import PageLayout from '$lib/components/pages/PageLayout.svelte';
 
-	import { copyToClipboard } from '$lib/utils/copy-to-clipboard';
+	import { copyCode } from '$lib/utils/copy-to-clipboard';
 	import type { OptionValues } from '$lib/types/OptionValues.types';
 	import type { BrowserSupportDataForMethod } from '$lib/types/BrowserSupport.types';
-	import { trackEvent } from '$lib/utils/analytics';
 	import { durationFormatOptions } from '$lib/format-options/duration-format.options';
 	import { clampValue, tryFormat } from '$lib/utils/format-utils';
 
@@ -31,10 +30,7 @@
 
 	let onClick = async (options: OptionValues) => {
 		const code = `new Intl.DurationFormat("${locale}", ${JSON.stringify(options)}).format(${JSON.stringify(duration)})`;
-		await copyToClipboard(code);
-		trackEvent('Copy Code', {
-			code,
-		});
+		await copyCode(code);
 	};
 
 	const format = (

diff --git a/src/lib/components/pages/ListFormat.svelte b/src/lib/components/pages/ListFormat.svelte
@@ -5,13 +5,12 @@
 	import Input from '$lib/components/ui/Input.svelte';
 
 	import { listFormatOptions } from '$lib/format-options/list-format.options';
-	import { copyToClipboard } from '$lib/utils/copy-to-clipboard';
+	import { copyCode } from '$lib/utils/copy-to-clipboard';
 	import type { OptionValues } from '$lib/types/OptionValues.types';
 	import type { BrowserSupportDataForMethod } from '$lib/types/BrowserSupport.types';
 	import Token from '$lib/components/ui/Highlight/Token.svelte';
 	import CodeBlock from '$lib/components/ui/CodeBlock.svelte';
 	import Spacing from '$lib/components/ui/Spacing.svelte';
-	import { trackEvent } from '$lib/utils/analytics';
 	import PageLayout from './PageLayout.svelte';
 	import { tryFormat } from '$lib/utils/format-utils';
 
@@ -25,10 +24,7 @@
 
 	let onClick = async (options: OptionValues) => {
 		const code = `new Intl.ListFormat("${locale}", ${JSON.stringify(options)}).format([])`;
-		await copyToClipboard(code);
-		trackEvent('Copy Code', {
-			code
-		});
+		await copyCode(code);
 	};
 
 	const style = listFormatOptions.style ?? [];
@@ -65,7 +61,7 @@
 			ariaHidden
 			noTrim
 			t="comment"
-		/><Token v={new Intl.ListFormat(locale).format(list.split(','))} t="comment" /></CodeBlock
+		/><Token v={tryFormat(() => new Intl.ListFormat(locale).format(list.split(',')))} t="comment" /></CodeBlock
 	>
 	<Grid slot="output">
 		{#each Object.entries(listFormatOptions) as [option, values]}

diff --git a/src/lib/components/pages/NumberFormat.Currency.svelte b/src/lib/components/pages/NumberFormat.Currency.svelte
@@ -14,10 +14,9 @@
 		numberFormatOptionsCommon,
 		numberFormatOptionsCurrency
 	} from '$lib/format-options/number-format.options';
-	import { copyToClipboard } from '$lib/utils/copy-to-clipboard';
+	import { copyCode } from '$lib/utils/copy-to-clipboard';
 	import type { OptionValues } from '$lib/types/OptionValues.types';
 	import type { BrowserSupportDataForMethod } from '$lib/types/BrowserSupport.types';
-	import { trackEvent } from '$lib/utils/analytics';
 	import { tryFormat } from '$lib/utils/format-utils';
 
 	export let locale: string;
@@ -32,10 +31,7 @@
 
 	let onClick = async (options: OptionValues) => {
 		const code = `new Intl.NumberFormat("${locale}", ${JSON.stringify(options)}).format(${number})`;
-		await copyToClipboard(code);
-		trackEvent('Copy Code', {
-			code
-		});
+		await copyCode(code);
 	};
 
 	const format = (options: Intl.NumberFormatOptions | undefined = undefined, number: number) =>

diff --git a/src/lib/components/pages/NumberFormat.Unit.svelte b/src/lib/components/pages/NumberFormat.Unit.svelte
@@ -13,11 +13,10 @@
 		numberFormatOptionsCommon,
 		numberFormatOptionsUnit
 	} from '$lib/format-options/number-format.options';
-	import { copyToClipboard } from '$lib/utils/copy-to-clipboard';
+	import { copyCode } from '$lib/utils/copy-to-clipboard';
 	import { unitsAsEntries } from '$lib/locale-data/units';
 	import type { OptionValues } from '$lib/types/OptionValues.types';
 	import type { BrowserSupportDataForMethod } from '$lib/types/BrowserSupport.types';
-	import { trackEvent } from '$lib/utils/analytics';
 	import { tryFormat } from '$lib/utils/format-utils';
 
 	export let locale: string;
@@ -32,10 +31,7 @@
 
 	let onClick = async (options: OptionValues) => {
 		const code = `new Intl.NumberFormat("${locale}", ${JSON.stringify(options)}).format(${number})`;
-		await copyToClipboard(code);
-		trackEvent("Copy Code", {
-			code,
-		})
+		await copyCode(code);
 	};
 
 	const format = (
@@ -68,7 +64,7 @@
 			></strong
 		>
 	</div>
-	<CodeBlock slot="alternativeCode"><Token noTrim v="const " t="punctuation" /><Token noTrim v="number = " /><Token t="number" v="{`${number}`}" /><br /><Token v="number" /><Token v=".toLocaleString" t="function"/><Token v="(" /><Token v="{`"${locale}"`}"  t="string" /><Token v=")" /><br/><Token v="// " ariaHidden noTrim t="comment"/><Token v={new Intl.NumberFormat(locale, { style: 'unit', unit: selectedUnit }).format(number)} t="comment"/></CodeBlock>
+	<CodeBlock slot="alternativeCode"><Token noTrim v="const " t="punctuation" /><Token noTrim v="number = " /><Token t="number" v="{`${number}`}" /><br /><Token v="number" /><Token v=".toLocaleString" t="function"/><Token v="(" /><Token v="{`"${locale}"`}"  t="string" /><Token v=")" /><br/><Token v="// " ariaHidden noTrim t="comment"/><Token v={tryFormat(() => new Intl.NumberFormat(locale, { style: 'unit', unit: selectedUnit }).format(number))} t="comment"/></CodeBlock>
 	<Grid slot="output">
 		{#each options as [option, values]}
 			<OptionSection header={option} support={browserCompatData?.optionsSupport?.[option]}>

diff --git a/src/lib/components/pages/NumberFormat.svelte b/src/lib/components/pages/NumberFormat.svelte
@@ -12,10 +12,9 @@
 		numberFormatOptionsCommon,
 		numberFormatOptionsUnit
 	} from '$lib/format-options/number-format.options';
-	import { copyToClipboard } from '$lib/utils/copy-to-clipboard';
+	import { copyCode } from '$lib/utils/copy-to-clipboard';
 	import type { OptionValues } from '$lib/types/OptionValues.types';
 	import type { BrowserSupportDataForMethod } from '$lib/types/BrowserSupport.types';
-	import { trackEvent } from '$lib/utils/analytics';
 	import { tryFormat } from '$lib/utils/format-utils';
 
 
@@ -30,10 +29,7 @@
 
 	let onClick = async (options: OptionValues) => {
 		const code = `new Intl.NumberFormat("${locale}", ${JSON.stringify(options)}).format(${number})`;
-		await copyToClipboard(code);
-		trackEvent("Copy Code", {
-			code,
-		})
+		await copyCode(code);
 	};
 	const format = (
 		options: Intl.NumberFormatOptions | undefined = undefined,
@@ -54,7 +50,7 @@
 			></strong
 		>
 	</div>
-	<CodeBlock slot="alternativeCode"><Token noTrim v="const " t="punctuation" /><Token noTrim v="number = " /><Token t="number" v="{`${number}`}" /><br /><Token v="number" /><Token v=".toLocaleString" t="function"/><Token v="(" /><Token v="{`"${locale}"`}"  t="string" /><Token v=")" /><br/><Token v="// " ariaHidden noTrim t="comment"/><Token v={new Intl.NumberFormat(locale).format(number)} t="comment"/></CodeBlock>
+	<CodeBlock slot="alternativeCode"><Token noTrim v="const " t="punctuation" /><Token noTrim v="number = " /><Token t="number" v="{`${number}`}" /><br /><Token v="number" /><Token v=".toLocaleString" t="function"/><Token v="(" /><Token v="{`"${locale}"`}"  t="string" /><Token v=")" /><br/><Token v="// " ariaHidden noTrim t="comment"/><Token v={tryFormat(() => new Intl.NumberFormat(locale).format(number))} t="comment"/></CodeBlock>
 	<Grid slot="output">
 		{#each options as [option, values]}
 			<OptionSection header={option} support={browserCompatData?.optionsSupport?.[option]}>

diff --git a/src/lib/components/pages/Playground/Playground.svelte b/src/lib/components/pages/Playground/Playground.svelte
@@ -1,6 +1,5 @@
 <script lang="ts">
-	import type { PlaygroundOption, PlaygroundSchema } from '$lib/playground/playground.schema';
-	import type { FormatMethodsKeys } from '$lib/format-methods';
+	import type { PlaygroundSchema } from '$lib/playground/playground.schema';
 	import type { BrowserSupportDataForMethod } from '$lib/types/BrowserSupport.types';
 
 	import Highlight from 'svelte-highlight';
@@ -19,12 +18,12 @@
 		schemaToCode,
 		schemaToPrimaryFormatterOutput,
 		schemaToResolvedOptions,
-		schemaToSecondaryFormattersOutput
+		schemaToSecondaryFormattersOutput,
+		updateOptionOnSchema
 	} from '$lib/playground/format.utils';
 	import { createSchemaUrl, getSchemaParam, parseSchemaFromURL } from '$lib/playground/url.utils';
-	import { validateAndUpdateSchema } from '$lib/playground/schemas/validate';
-	import { copyToClipboard } from '$lib/utils/copy-to-clipboard';
-	import { clampValue, fallbackDisplayNames } from '$lib/utils/format-utils';
+	import { validateAndUpdateSchema } from '$lib/playground/validate';
+	import { copyCode, copyToClipboard } from '$lib/utils/copy-to-clipboard';
 	import { schemas, type SchemaKeys } from '$lib/playground/schemas';
 	import { onMount } from 'svelte';
 	import { numberFormatSchema } from '$lib/playground/schemas/numberFormat.schema';
@@ -48,42 +47,8 @@
 	});
 
 	const onChangeOption = (event: Event) => {
-		const target = event.target as HTMLInputElement;
 		if (!schema) return;
-		const isRadioEvent = target.type === 'radio';
-		const isCheckBox = target.type === 'checkbox';
-		const optionName = target.name.replace("_active", "");
-		const optionValue = isRadioEvent
-			? target.attributes.getNamedItem('group')?.nodeValue
-			: target.value;
-		const radioValue = optionValue === 'true' ? true : optionValue === 'false' ? false : undefined;
-		const value = isRadioEvent ? radioValue : optionValue;
-		const schemaOptions = schema.options.map((option) =>
-			option.name === optionName && !isCheckBox
-				? {
-						...option,
-						value: clampValue(option, value)
-					}
-				: {
-						...option,
-						selected: option.name === optionName ? target.checked : option.selected
-					}
-		);
-		const newSchema: PlaygroundSchema<'NumberFormat'> = {
-			...schema,
-			options: schemaOptions as unknown as PlaygroundOption<'NumberFormat'>[]
-		};
-		const isRelativeTimeUnit =
-			(schema.method as FormatMethodsKeys) === 'RelativeTimeFormat' && optionName === 'unit';
-		const isDisplayNamesType =
-			(schema.method as FormatMethodsKeys) === 'DisplayNames' && optionName === 'type';
-		if (isRelativeTimeUnit) {
-			newSchema.inputValues[1] = optionValue;
-		}
-		if (isDisplayNamesType) {
-			newSchema.inputValues[0] = fallbackDisplayNames[value as unknown as Intl.DisplayNamesType];
-		}
-		schema = validateAndUpdateSchema(newSchema);
+		schema = validateAndUpdateSchema(updateOptionOnSchema(schema, event));
 	};
 
 	const onInput = (event: Event) => {
@@ -118,9 +83,14 @@
 	const copy = async () => {
 		if (!schema) return;
 		const code = schemaToCode(schema, locale);
-		await copyToClipboard(code);
-		trackEvent('Copy Code', {
-			code
+		await copyCode(code);
+	};
+
+	const copySchema = async () => {
+		if (!schema) return;
+		await copyToClipboard(createSchemaUrl(schema));
+		trackEvent('Copy Schema', {
+			method: schema.method
 		});
 	};
 </script>
@@ -131,15 +101,7 @@
 			<Header header="Playground" link={schema.method} />
 			<Grid>
 				<BrowserSupport bind:data={browserSupportData} />
-				<Button
-					onClick={() => {
-						if (!schema) return;
-						copyToClipboard(createSchemaUrl(schema));
-						trackEvent('Copy Schema', {
-							method: schema.method
-						});
-					}}>Copy Schema URL <CopyToClipboard /></Button
-				>
+				<Button onClick={copySchema}>Copy Schema URL <CopyToClipboard /></Button>
 			</Grid>
 			<Spacing />
 			<PlaygroundInput bind:locale {schema} {onChangeSchema} {onChangeDate} {onInput} />

diff --git a/src/lib/components/pages/Playground/PlaygroundInput.svelte b/src/lib/components/pages/Playground/PlaygroundInput.svelte
@@ -10,7 +10,6 @@
 
 	import { formatMethods } from '$lib/format-methods';
 	import { languageByLocaleAsComboBoxOptions } from '$lib/locale-data/locales';
-	import Spacing from '$lib/components/ui/Spacing.svelte';
 	import Card from '$lib/components/ui/Card.svelte';
 
 	export let schema: PlaygroundSchema<'NumberFormat'>;

diff --git a/src/lib/components/pages/Playground/PlaygroundSecondaryFormatters.svelte b/src/lib/components/pages/Playground/PlaygroundSecondaryFormatters.svelte
@@ -24,9 +24,3 @@
 	{/each}
 {/if}
 
-<style>
-	h2 {
-		font-size: 1.25rem;
-		display: inline-block;
-	}
-</style>