feat: add multiple locales

messages/en.json

@@ -1,6 +1,8 @@
 {
   "$schema": "https://inlang.com/schema/inlang-message-format",
   "about": "About",
+  "addLocale": "Add locale",
+  "addLocaleButton": "Add",
   "alternativeUseHeading": "Alternativ use",
   "alternativeUseIngress": "{method} can also be used from",
   "amount": "Amount",
@@ -27,6 +29,8 @@
   "currency": "Currency",
   "dark": "Dark",
   "date": "Date",
+  "editLocale": "Edit locale",
+  "editLocaleButton": "Edit",
   "equals": "equals",
   "fullSupport": "Full support",
   "input": "Input",
@@ -35,6 +39,7 @@
   "light": "Light",
   "list": "List",
   "locale": "Locale",
+  "localeHint": "'Add' to add selected locale. 'Edit' to add custom locale not in list",
   "menu": "Menu",
   "meta": "Meta",
   "method": "Method",
@@ -44,10 +49,12 @@
   "options": "Options",
   "output": "Output",
   "partialSupport": "Partial support",
+  "remove": "Remove {value}",
   "resolvedOptions": "Resolved Options",
   "secondaryFormatters": "Secondary Formatters",
   "seeAlso": "See also",
   "selectCurrency": "Select a currency",
+  "selectLocaleButton": "Select",
   "selectUnit": "Select a unit",
   "settingsButton": "Settings",
   "settingsHeading": "Settings",

messages/sv.json

@@ -5,6 +5,8 @@
   "alternativeUseIngress": "{method} kan också användas från",
   "amount": "Summa",
   "and": "och",
+  "addLocale": "Lägg till språk",
+  "addLocaleButton": "Lägg till",
   "availableInBrowser": "Tillgänglig i {browserName} från version {versionAdded}",
   "blurbPart1": "är ett verktyg för att experimentera med",
   "blurbPart2": "APIet är tillgängligt under namnet",
@@ -27,6 +29,8 @@
   "currency": "Valuta",
   "dark": "Mörkt",
   "date": "Datum",
+  "editLocale": "Redigera språk",
+  "editLocaleButton": "Redigera",
   "equals": "är lika med",
   "fullSupport": "Fullt stöd",
   "input": "Indata",
@@ -35,6 +39,7 @@
   "light": "Ljust",
   "list": "Lista",
   "locale": "Språk",
+  "localeHint": "'Lägg till' för att lägga till språk. 'Redigera' för att lägga till språk som inte finns i listan",
   "menu": "Meny",
   "meta": "Meta",
   "method": "Metod",
@@ -44,10 +49,12 @@
   "options": "Alternativ",
   "output": "Utdata",
   "partialSupport": "Delvist stöd",
+  "remove": "Ta bort {value}",
   "resolvedOptions": "Alternativ som används",
   "secondaryFormatters": "Sekundära formatterare",
   "seeAlso": "Se också",
   "selectCurrency": "Välj valuta",
+  "selectLocaleButton": "Välj",
   "selectUnit": "Välj enhet",
   "settingsButton": "Inställningar",
   "settingsHeading": "Inställningar",

src/lib/components/pages/Collator.svelte

@@ -10,21 +10,21 @@
 	import type { OptionValues } from '$lib/types/OptionValues.types';
 	import { collatorFormatOptions } from '$lib/format-options/collator.options';
 	import { copyCode } from '$lib/utils/copy-to-clipboard';
-	import { tryFormat } from '$lib/utils/format-utils';
+	import { formatLocalesForPrint, tryFormat } from '$lib/utils/format-utils';
 	import { getMessages } from '$lib/i18n/util';
+	import { locales } from '$lib/store/locales';
 
-	export let locale: string;
 	export let browserCompatData: BrowserSupportDataForMethod | null;
 
 	const m = getMessages();
 
 	let list = 'Z,a,z,ä,1,=,à';
 
 	let onClick = async (options: OptionValues) => {
-		const code = `[].sort(new Intl.Collator("${locale}", ${JSON.stringify(options)}).compare)`;
+		const code = `[].sort(new Intl.Collator(${formatLocalesForPrint($locales)}, ${JSON.stringify(options)}).compare)`;
 		await copyCode(code);
 	};
-	const format = (options: Intl.CollatorOptions, list: string, language: string) =>
+	const format = (options: Intl.CollatorOptions, list: string, language: string[]) =>
 		tryFormat(() => list.split(',').sort(new Intl.Collator(language, options).compare).join(','));
 </script>
 
@@ -44,7 +44,7 @@
 									[option]: value
 								},
 								list,
-								locale,
+								$locales,
 							)}
 						/>
 					{/if}

src/lib/components/pages/DateTimeFormat.svelte

@@ -7,6 +7,7 @@
 	import CodeBlock from '$lib/components/ui/CodeBlock.svelte';
 	import Spacing from '$lib/components/ui/Spacing.svelte';
 	import PageLayout from '$lib/components/pages/PageLayout.svelte';
+	import HighlightLocale from '$lib/components/ui/Highlight/HighlightLocale.svelte';
 
 	import {
 		datetimeFormatOptions,
@@ -15,10 +16,10 @@
 	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 { tryFormat } from '$lib/utils/format-utils';
+	import { formatLocalesForPrint, tryFormat } from '$lib/utils/format-utils';
 	import { getMessages } from '$lib/i18n/util';
+	import { locales } from '$lib/store/locales';
 
-	export let locale: string;
 	export let browserCompatData: BrowserSupportDataForMethod | null;
 
 	const m = getMessages();
@@ -30,13 +31,13 @@
 	};
 
 	let onClick = async (options: OptionValues) => {
-		const code = `new Intl.DateTimeFormat("${locale}", ${JSON.stringify(
+		const code = `new Intl.DateTimeFormat(${formatLocalesForPrint($locales)}, ${JSON.stringify(
 			options
 		)}).format(new Date("${dateTimeString}"))`;
 		await copyCode(code);
 	};
 
-	const format = (options: Intl.DateTimeFormatOptions, dateTime: string, language: string) =>
+	const format = (options: Intl.DateTimeFormatOptions, dateTime: string, language: string[]) =>
 		tryFormat(() => new Intl.DateTimeFormat(language, options).format(new Date(`${dateTime}`)));
 </script>
 
@@ -55,11 +56,8 @@
 	<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={`${tryFormat(() => new Date(dateTimeString).toLocaleString(locale))}`}
+		.<Token v="toLocaleString" t="function" />{'('}<HighlightLocale locales={$locales} />{')'}{'\n'}<Token v="// " ariaHidden noTrim t="comment" /><Token
+			v={`${tryFormat(() => new Date(dateTimeString).toLocaleString($locales))}`}
 			t="comment"
 		/>
 	</CodeBlock>
@@ -72,7 +70,7 @@
 						<Highlight
 							{onClick}
 							values={{ [option]: value }}
-							output={format(getDateTimeFormatOptions(option, value), dateTimeString, locale)}
+							output={format(getDateTimeFormatOptions(option, value), dateTimeString, $locales)}
 						/>
 					{/if}
 				{/each}

src/lib/components/pages/DisplayNames.svelte

@@ -6,8 +6,6 @@
 	import Spacing from '$lib/components/ui/Spacing.svelte';
 	import PageLayout from '$lib/components/pages/PageLayout.svelte';
 
-	export let locale: string;
-
 	let code = 'US';
 	let language = 'en-US';
 	let script = 'Latn';
@@ -23,23 +21,20 @@
 			<Input id="region" label="region" bind:value={code} />
 			<Spacing size={2} />
 			<DisplayNamesHighlight
-				bind:locale
 				bind:value={code}
 				options={{
 					style: 'long',
 					type: 'region'
 				}}
 			/>
 			<DisplayNamesHighlight
-				bind:locale
 				bind:value={code}
 				options={{
 					style: 'short',
 					type: 'region'
 				}}
 			/>
 			<DisplayNamesHighlight
-				bind:locale
 				bind:value={code}
 				options={{
 					style: 'narrow',
@@ -52,15 +47,13 @@
 			<Input id="language" label="language" bind:value={language} />
 			<Spacing size={2} />
 			<DisplayNamesHighlight
-				bind:locale
 				bind:value={language}
 				options={{
 					languageDisplay: 'dialect',
 					type: 'language'
 				}}
 			/>
 			<DisplayNamesHighlight
-				bind:locale
 				bind:value={language}
 				options={{
 					languageDisplay: 'standard',
@@ -73,7 +66,6 @@
 			<Input id="currency" label="currency" bind:value={currency} />
 			<Spacing size={2} />
 			<DisplayNamesHighlight
-				bind:locale
 				bind:value={currency}
 				options={{
 					type: 'currency'
@@ -85,7 +77,6 @@
 			<Input id="script" label="script" bind:value={script} />
 			<Spacing size={2} />
 			<DisplayNamesHighlight
-				bind:locale
 				bind:value={script}
 				options={{
 					type: 'script'
@@ -97,7 +88,6 @@
 			<Input id="calendar" label="calendar" bind:value={calendar} />
 			<Spacing size={2} />
 			<DisplayNamesHighlight
-				bind:locale
 				bind:value={calendar}
 				options={{
 					type: 'calendar'
@@ -109,23 +99,20 @@
 			<Input id="dateTimeField" label="dateTimeField" bind:value={dateTimeField} />
 			<Spacing size={2} />
 			<DisplayNamesHighlight
-				bind:locale
 				bind:value={dateTimeField}
 				options={{
 					style: 'short',
 					type: 'dateTimeField'
 				}}
 			/>
 			<DisplayNamesHighlight
-				bind:locale
 				bind:value={dateTimeField}
 				options={{
 					style: 'long',
 					type: 'dateTimeField'
 				}}
 			/>
 			<DisplayNamesHighlight
-				bind:locale
 				bind:value={dateTimeField}
 				options={{
 					style: 'narrow',

src/lib/components/pages/DurationFormat.svelte

@@ -10,9 +10,9 @@
 	import type { OptionValues } from '$lib/types/OptionValues.types';
 	import type { BrowserSupportDataForMethod } from '$lib/types/BrowserSupport.types';
 	import { durationFormatOptions } from '$lib/format-options/duration-format.options';
-	import { clampValue, tryFormat } from '$lib/utils/format-utils';
+	import { clampValue, formatLocalesForPrint, tryFormat } from '$lib/utils/format-utils';
+	import { locales } from '$lib/store/locales';
 
-	export let locale: string;
 	export let browserCompatData: BrowserSupportDataForMethod | null;
 
 	let duration: Record<string, string | number> = {
@@ -29,14 +29,14 @@
 	};
 
 	let onClick = async (options: OptionValues) => {
-		const code = `new Intl.DurationFormat("${locale}", ${JSON.stringify(options)}).format(${JSON.stringify(duration)})`;
+		const code = `new Intl.DurationFormat(${formatLocalesForPrint($locales)}, ${JSON.stringify(options)}).format(${JSON.stringify(duration)})`;
 		await copyCode(code);
 	};
 
 	const format = (
 		options: Intl.DurationFormatOptions,
 		dur: Record<string, number | string>,
-		language: string,
+		language: string[],
 	) => tryFormat(() => new Intl.DurationFormat(language, options).format(dur))
 
 	const onInput = (event: Event) => {
@@ -68,7 +68,7 @@
 						<Highlight
 							{onClick}
 							values={{ [option]: value }}
-							output={format({ [option]: value }, duration, locale)}
+							output={format({ [option]: value }, duration, $locales)}
 						/>
 					{/if}
 				{/each}

src/lib/components/pages/ListFormat.svelte

@@ -12,10 +12,11 @@
 	import CodeBlock from '$lib/components/ui/CodeBlock.svelte';
 	import Spacing from '$lib/components/ui/Spacing.svelte';
 	import PageLayout from './PageLayout.svelte';
-	import { tryFormat } from '$lib/utils/format-utils';
+	import { formatLocalesForPrint, tryFormat } from '$lib/utils/format-utils';
 	import { getMessages } from '$lib/i18n/util';
+	import { locales } from '$lib/store/locales';
+	import HighlightLocale from '../ui/Highlight/HighlightLocale.svelte';
 
-	export let locale: string;
 	export let browserCompatData: BrowserSupportDataForMethod | null;
 
 	const m = getMessages();
@@ -26,13 +27,13 @@
 	let list = 'Miso,Sesam,Mami';
 
 	let onClick = async (options: OptionValues) => {
-		const code = `new Intl.ListFormat("${locale}", ${JSON.stringify(options)}).format([])`;
+		const code = `new Intl.ListFormat(${formatLocalesForPrint($locales)}, ${JSON.stringify(options)}).format([])`;
 		await copyCode(code);
 	};
 
 	const style = listFormatOptions.style ?? [];
 
-	const format = (options: Intl.ListFormatOptions, list: string, language: string) =>
+	const format = (options: Intl.ListFormatOptions, list: string, language: string[]) =>
 		tryFormat(() => new Intl.ListFormat(language, options).format(toArray(list)));
 </script>
 
@@ -58,12 +59,12 @@
 				/>{/if}{/each}<Token v="]" /><br />{'\t'}<Token v="." /><Token
 			v="toLocaleString"
 			t="function"
-		/><Token v="(" /><Token t="string" v={`"${locale}"`} /><Token v=")" /> <br /><Token
+		/><Token v="(" /><HighlightLocale locales={$locales} /><Token v=")" /> <br /><Token
 			v="// "
 			ariaHidden
 			noTrim
 			t="comment"
-		/><Token v={tryFormat(() => new Intl.ListFormat(locale).format(list.split(',')))} t="comment" /></CodeBlock
+		/><Token v={tryFormat(() => new Intl.ListFormat($locales).format(list.split(',')))} t="comment" /></CodeBlock
 	>
 	<Grid slot="output">
 		{#each Object.entries(listFormatOptions) as [option, values]}
@@ -79,7 +80,7 @@
 									[option]: value
 								},
 								list,
-								locale
+								$locales
 							)}
 						/>
 					{/if}
@@ -101,7 +102,7 @@
 								style: toStyle(value)
 							},
 							list,
-							locale
+							$locales
 						)}
 					/>
 				{/if}
@@ -122,7 +123,7 @@
 								style: toStyle(value)
 							},
 							list,
-							locale
+							$locales
 						)}
 					/>
 				{/if}
@@ -143,7 +144,7 @@
 								style: toStyle(value)
 							},
 							list,
-							locale
+							$locales
 						)}
 					/>
 				{/if}