chore: format

README.md

@@ -1,4 +1,3 @@
-
 ![social](https://github.com/jesperorb/intl-explorer/assets/21122051/4e370c44-803f-491c-b176-0a952b56b0ee)
 
 # Intl Explorer

playwright.config.ts

@@ -4,7 +4,7 @@ const config: PlaywrightTestConfig = {
 	testDir: "tests",
 	use: {
 		headless: true,
-		ignoreHTTPSErrors: true,
+		ignoreHTTPSErrors: true
 	},
 	projects: [
 		{

src/lib/components/pages/Playground/Playground.svelte

@@ -174,7 +174,7 @@
 				<div class="output-inner">
 					<h2>{m.output()}</h2>
 					<Spacing size={2} />
-					<div data-testid="{testIds.playground.output}">
+					<div data-testid={testIds.playground.output}>
 						<Highlight
 							language={typescript}
 							code={schemaToPrimaryFormatterOutput(schema, $locales)}
@@ -183,7 +183,7 @@
 					<Spacing />
 					<h2>{m.code()}</h2>
 					<Spacing size={2} />
-					<div class="highlight" data-testid="{testIds.playground.code}">
+					<div class="highlight" data-testid={testIds.playground.code}>
 						<Highlight language={typescript} code={schemaToCode(schema, $locales)} />
 					</div>
 					<Spacing size={2} />

src/lib/components/ui/ComboBox.svelte

@@ -34,7 +34,7 @@
 		forceVisible: true,
 		multiple: true,
 		closeOnEscape: true,
-		defaultSelected: defaultValue?.map(v => ({ value: v })),
+		defaultSelected: defaultValue?.map((v) => ({ value: v })),
 		closeOnOutsideClick: true,
 		onSelectedChange: (args) => {
 			onSelect(args.next?.map((v) => v.value) as Option[] | undefined);
@@ -55,9 +55,9 @@
 	};
 
 	const internalDelete = (itemToDelete: string) => {
-		selected.update(value => value?.filter(v => v.value.value !== itemToDelete))
+		selected.update((value) => value?.filter((v) => v.value.value !== itemToDelete));
 		onDelete(itemToDelete);
-	} 
+	};
 
 	$: output = getOutput(options, $inputValue, $touchedInput);
 </script>

src/lib/components/ui/LocalePicker.svelte

@@ -25,7 +25,7 @@
 <ComboBox
 	labelText={m.locale()}
 	placeholder={m.localePlaceHolder()}
-	defaultValue={$locales.map(v => ({ value: v, label: v }))}
+	defaultValue={$locales.map((v) => ({ value: v, label: v }))}
 	{onSelect}
 	{onDelete}
 	options={languageByLocaleAsComboBoxOptions}

src/lib/components/ui/Navigation.svelte

@@ -175,7 +175,7 @@
 		z-index: 1;
 		overflow-x: hidden;
 		transition: transform 0.3s;
-		box-shadow: 1px 1px 8px 2px rgba(0,0,0,0.1);
+		box-shadow: 1px 1px 8px 2px rgba(0, 0, 0, 0.1);
 		border-top-right-radius: 4px;
 		border-bottom-right-radius: 4px;
 	}

src/lib/components/ui/Radio.svelte

@@ -14,7 +14,6 @@
 </label>
 
 <style>
-
 	label {
 		cursor: pointer;
 		display: flex;
@@ -71,7 +70,7 @@
 
 	input[type="radio"]:focus-visible {
 		background-color: var(--accent-2);
-		outline: 2px solid  var(--focus-color);
+		outline: 2px solid var(--focus-color);
 	}
 	@media (prefers-reduced-motion: reduce) {
 		input[type="radio"] {

src/lib/components/ui/SettingsDialog.svelte

@@ -44,8 +44,8 @@
 	const onValueChange = (value: number[]) => {
 		settings.update((s) => ({
 			...s,
-			accentColor: value[0].toString(),
-		}))
+			accentColor: value[0].toString()
+		}));
 	};
 
 	const getHint = (key: keyof Settings) => {
@@ -77,9 +77,9 @@
 	};
 
 	const getDefaultValueForSlider = (key: keyof Settings) => {
-		if($settings[key]) return $settings[key] as unknown as number;
+		if ($settings[key]) return $settings[key] as unknown as number;
 		return settingsConfiguration[key].values[0] as unknown as number;
-	}
+	};
 
 	const formatLanguages = () => {
 		return availableLanguageTags.map((tag) => [tag, formatTag(tag)]);
@@ -114,7 +114,13 @@
 					/>
 				{/if}
 				{#if settingsConfiguration[key].type === "color"}
-					<Slider min={0} max={360} defaultValue={getDefaultValueForSlider(key)} step={5} {onValueChange} />
+					<Slider
+						min={0}
+						max={360}
+						defaultValue={getDefaultValueForSlider(key)}
+						step={5}
+						{onValueChange}
+					/>
 				{/if}
 				{#if settingsConfiguration[key].hint}
 					<Spacing size={2} />

src/lib/components/ui/Slider.svelte

@@ -1,74 +1,71 @@
 <script lang="ts">
-  import { createSlider, melt } from '@melt-ui/svelte';
-	import type { ChangeFn } from '@melt-ui/svelte/internal/helpers';
-	import Button from './Button.svelte';
-	import Spacing from './Spacing.svelte';
+	import { createSlider, melt } from "@melt-ui/svelte";
+	import type { ChangeFn } from "@melt-ui/svelte/internal/helpers";
+	import Button from "./Button.svelte";
+	import Spacing from "./Spacing.svelte";
 
-  export let defaultValue: number | undefined = undefined;
-  export let min: number | undefined = undefined;
-  export let max: number | undefined = undefined;
-  export let step: number | undefined = undefined;
-  export let onValueChange: ((value: number[]) => void) | undefined = undefined;
+	export let defaultValue: number | undefined = undefined;
+	export let min: number | undefined = undefined;
+	export let max: number | undefined = undefined;
+	export let step: number | undefined = undefined;
+	export let onValueChange: ((value: number[]) => void) | undefined = undefined;
 
-  const internalValueChange: ChangeFn<number[]> = (value) => {
-    if(onValueChange) {
-      onValueChange(value.next);
-    }
-    return value.next;
-  }
+	const internalValueChange: ChangeFn<number[]> = (value) => {
+		if (onValueChange) {
+			onValueChange(value.next);
+		}
+		return value.next;
+	};
 
-  const {
-    elements: { root, range, thumbs },
-  } = createSlider({
-    defaultValue: defaultValue ? [defaultValue] : undefined,
-    min,
-    max,
-    step: step ?? 1,
-    onValueChange: internalValueChange,
-  });
+	const {
+		elements: { root, range, thumbs }
+	} = createSlider({
+		defaultValue: defaultValue ? [defaultValue] : undefined,
+		min,
+		max,
+		step: step ?? 1,
+		onValueChange: internalValueChange
+	});
 </script>
 
 <span use:melt={$root} class="slider">
-  <span class="range">
-    <span use:melt={$range} />
-  </span>
-  <span
-    use:melt={$thumbs[0]}
-    class="thumb"
-  />
+	<span class="range">
+		<span use:melt={$range} />
+	</span>
+	<span use:melt={$thumbs[0]} class="thumb" />
 </span>
 
 <style>
-  .slider {
-    position: relative;
-    display: flex;
-    align-items: center;
-    height: var(--spacing-6);
-    width: 100%;
-  }
+	.slider {
+		position: relative;
+		display: flex;
+		align-items: center;
+		height: var(--spacing-6);
+		width: 100%;
+	}
 
-  .range {
-    height: var(--spacing-2);
-    width: 100%;
-    background: var(--text-color);
-    border-radius: var(--spacing-1);
-  }
+	.range {
+		height: var(--spacing-2);
+		width: 100%;
+		background: var(--text-color);
+		border-radius: var(--spacing-1);
+	}
 
-  .range > span {
-    height: var(--spacing-2);
-    background: var(--text-color);
-    border-radius: var(--spacing-1);
-  }
+	.range > span {
+		height: var(--spacing-2);
+		background: var(--text-color);
+		border-radius: var(--spacing-1);
+	}
 
-  .thumb {
-    height: var(--spacing-6);
-    width: var(--spacing-6);
-    border-radius: 50%;
-    background: var(--background-color);
-    border: 1px solid var(--border-color);
-    cursor: pointer;
-  }
-  .thumb:focus {
-    outline: 2px solid var(--focus-color);
-  }
+	.thumb {
+		height: var(--spacing-6);
+		width: var(--spacing-6);
+		border-radius: 50%;
+		background: var(--background-color);
+		border: 1px solid var(--border-color);
+		cursor: pointer;
+	}
+	.thumb:focus {
+		outline: 2px solid var(--focus-color);
+	}
 </style>

src/lib/components/ui/icons/Check.svelte

@@ -4,7 +4,7 @@
 	height="16"
 	viewBox="0 0 24 24"
 	fill="none"
-  aria-hidden="true"
+	aria-hidden="true"
 	stroke="currentColor"
 	stroke-width="2"
 	stroke-linecap="round"

src/lib/constants.ts

@@ -1,5 +1,6 @@
-export const description = "Intl Explorer is an interactive tool for experimenting and trying out the ECMAScript Internationalization API.";
+export const description =
+	"Intl Explorer is an interactive tool for experimenting and trying out the ECMAScript Internationalization API.";
 export const title = "Intl Explorer";
 export const imageUrl = "static/social.png";
 export const author = "Jesper Orb";
-export const tags = ["Inlt", "i18n", "Internationalization", "JavaScript", "TypeScript", "Svelte"];
+export const tags = ["Inlt", "i18n", "Internationalization", "JavaScript", "TypeScript", "Svelte"];

src/lib/format-options/collator.options.ts

@@ -1,7 +1,7 @@
 import { localeMatcher } from "$lib/format-options/common.options";
 import type { CreateOptions } from "$types/common";
 
-export type CollatorOptions = CreateOptions<Intl.CollatorOptions>
+export type CollatorOptions = CreateOptions<Intl.CollatorOptions>;
 
 export const collatorFormatOptions: CollatorOptions = {
 	usage: ["sort", "search", undefined],
@@ -10,4 +10,4 @@ export const collatorFormatOptions: CollatorOptions = {
 	sensitivity: ["base", "accent", "case", "variant", undefined],
 	ignorePunctuation: [true, false, undefined],
 	localeMatcher
-}
+};

src/lib/format-options/datetime-format.options.ts

@@ -33,7 +33,7 @@ export const datetimeFormatOptions: DateTimeFormatOptions = {
 	],
 	formatMatcher: ["best fit", "basic", undefined],
 	localeMatcher
-}
+};
 
 export const getDateTimeFormatOptions = (
 	option: AllFormatOptionsKeys["DateTimeFormat"] | string,

src/lib/format-options/duration-format.options.ts

@@ -18,7 +18,7 @@ export const durationFormatOptions: DurationFormatOptions = {
 	nanoseconds: style,
 	fractionalDigits: [...defaultNumberRange, undefined] as NumberOrUndefinedTuple,
 	localeMatcher
-}
+};
 
 export const durationValues: (keyof Intl.Duration)[] = [
 	"years",

src/lib/format-options/list-format.options.ts

@@ -7,4 +7,4 @@ export const listFormatOptions: ListFormatOptions = {
 	type: [undefined, "conjunction", "disjunction", "unit"],
 	style,
 	localeMatcher
-}
+};

src/lib/format-options/number-format.options.ts

@@ -27,17 +27,17 @@ export const numberFormatOptionsCommon = {
 	roundingPriority,
 	trailingZeroDisplay,
 	localeMatcher
-}
+};
 
 export const numberFormatOptionsCurrency: NumberFormatOptions = {
 	currencySign: ["standard", "accounting", undefined],
 	currencyDisplay: ["code", "symbol", "narrowSymbol", "name", undefined],
-	currency: Object.keys(currencies) as [string | undefined, string | undefined],
-}
+	currency: Object.keys(currencies) as [string | undefined, string | undefined]
+};
 
 export const numberFormatOptionsUnit: NumberFormatOptions = {
 	unit: units as [string | undefined, string | undefined],
 	unitDisplay: style,
 	compactDisplay: ["short", "long", undefined],
 	notation: ["standard", "scientific", "engineering", "compact", undefined]
-}
+};

src/lib/format-options/relative-time-format.options.ts

@@ -3,7 +3,7 @@ import type { CreateOptions } from "$types/common";
 
 export type RelativeTimeFormatOptions = CreateOptions<Intl.RelativeTimeFormatOptions> & {
 	unit: Intl.RelativeTimeFormatUnit[];
-}
+};
 
 export const relativeTimeFormatUnits: Intl.RelativeTimeFormatUnit[] = [
 	"year",
@@ -29,4 +29,4 @@ export const relativeTimeFormatOptions: RelativeTimeFormatOptions = {
 	style,
 	unit: relativeTimeFormatUnits,
 	localeMatcher
-}
+};

src/lib/format-options/segmenter.options.ts

@@ -6,4 +6,4 @@ export type SegmenterOptions = CreateOptions<Intl.SegmenterOptions>;
 export const segmenterOptions: SegmenterOptions = {
 	granularity: ["word", "sentence", "grapheme", undefined],
 	localeMatcher
-}
+};

src/lib/locale-data/calendars.ts

@@ -12,7 +12,7 @@ export const calendars = [
 	"japanese",
 	"persian",
 	"roc"
-]
+];
 
 export const numberingSystems = [
 	"arab",

src/lib/playground/format.utils.test.ts

@@ -276,6 +276,8 @@ describe("schemaToPrimaryFormatterOutput", () => {
 
 describe("schemaToCode", () => {
 	test("format default", () => {
-		expect(schemaToCode(numberFormatSchemaFactory(), [])).toEqual("new Intl.NumberFormat(undefined).format(1091)\n");
-	})
-})
+		expect(schemaToCode(numberFormatSchemaFactory(), [])).toEqual(
+			"new Intl.NumberFormat(undefined).format(1091)\n"
+		);
+	});
+});