diff --git a/README.md b/README.md index 8e8c7d4..ca837d2 100644 --- a/README.md +++ b/README.md @@ -1,4 +1,3 @@ - ![social](https://github.com/jesperorb/intl-explorer/assets/21122051/4e370c44-803f-491c-b176-0a952b56b0ee) # Intl Explorer diff --git a/playwright.config.ts b/playwright.config.ts index a0de40d..66720d6 100644 --- a/playwright.config.ts +++ b/playwright.config.ts @@ -4,7 +4,7 @@ const config: PlaywrightTestConfig = { testDir: "tests", use: { headless: true, - ignoreHTTPSErrors: true, + ignoreHTTPSErrors: true }, projects: [ { diff --git a/src/lib/components/pages/Playground/Playground.svelte b/src/lib/components/pages/Playground/Playground.svelte index 978af77..228aaa9 100644 --- a/src/lib/components/pages/Playground/Playground.svelte +++ b/src/lib/components/pages/Playground/Playground.svelte @@ -174,7 +174,7 @@

{m.output()}

-
+

{m.code()}

-
+
diff --git a/src/lib/components/ui/ComboBox.svelte b/src/lib/components/ui/ComboBox.svelte index 130e365..0992832 100644 --- a/src/lib/components/ui/ComboBox.svelte +++ b/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); diff --git a/src/lib/components/ui/LocalePicker.svelte b/src/lib/components/ui/LocalePicker.svelte index 719db19..36d0c94 100644 --- a/src/lib/components/ui/LocalePicker.svelte +++ b/src/lib/components/ui/LocalePicker.svelte @@ -25,7 +25,7 @@ ({ value: v, label: v }))} + defaultValue={$locales.map((v) => ({ value: v, label: v }))} {onSelect} {onDelete} options={languageByLocaleAsComboBoxOptions} diff --git a/src/lib/components/ui/Navigation.svelte b/src/lib/components/ui/Navigation.svelte index 9a2e594..bf69b44 100644 --- a/src/lib/components/ui/Navigation.svelte +++ b/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; } diff --git a/src/lib/components/ui/Radio.svelte b/src/lib/components/ui/Radio.svelte index 86996db..fc8e899 100644 --- a/src/lib/components/ui/Radio.svelte +++ b/src/lib/components/ui/Radio.svelte @@ -14,7 +14,6 @@ diff --git a/src/lib/components/ui/icons/Check.svelte b/src/lib/components/ui/icons/Check.svelte index 5916cb2..af0a155 100644 --- a/src/lib/components/ui/icons/Check.svelte +++ b/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" diff --git a/src/lib/constants.ts b/src/lib/constants.ts index 3dfab94..b7dbab0 100644 --- a/src/lib/constants.ts +++ b/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"]; \ No newline at end of file +export const tags = ["Inlt", "i18n", "Internationalization", "JavaScript", "TypeScript", "Svelte"]; diff --git a/src/lib/format-options/collator.options.ts b/src/lib/format-options/collator.options.ts index 4985c5a..5c52c8f 100644 --- a/src/lib/format-options/collator.options.ts +++ b/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 +export type CollatorOptions = CreateOptions; 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 -} +}; diff --git a/src/lib/format-options/datetime-format.options.ts b/src/lib/format-options/datetime-format.options.ts index 787807a..6771dcd 100644 --- a/src/lib/format-options/datetime-format.options.ts +++ b/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, diff --git a/src/lib/format-options/duration-format.options.ts b/src/lib/format-options/duration-format.options.ts index a01fb11..6ef9a6e 100644 --- a/src/lib/format-options/duration-format.options.ts +++ b/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", diff --git a/src/lib/format-options/list-format.options.ts b/src/lib/format-options/list-format.options.ts index cec91dc..5ee8988 100644 --- a/src/lib/format-options/list-format.options.ts +++ b/src/lib/format-options/list-format.options.ts @@ -7,4 +7,4 @@ export const listFormatOptions: ListFormatOptions = { type: [undefined, "conjunction", "disjunction", "unit"], style, localeMatcher -} +}; diff --git a/src/lib/format-options/number-format.options.ts b/src/lib/format-options/number-format.options.ts index 87525d0..2dc58c7 100644 --- a/src/lib/format-options/number-format.options.ts +++ b/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] -} +}; diff --git a/src/lib/format-options/relative-time-format.options.ts b/src/lib/format-options/relative-time-format.options.ts index 4dad5bd..520c96c 100644 --- a/src/lib/format-options/relative-time-format.options.ts +++ b/src/lib/format-options/relative-time-format.options.ts @@ -3,7 +3,7 @@ import type { CreateOptions } from "$types/common"; export type RelativeTimeFormatOptions = CreateOptions & { unit: Intl.RelativeTimeFormatUnit[]; -} +}; export const relativeTimeFormatUnits: Intl.RelativeTimeFormatUnit[] = [ "year", @@ -29,4 +29,4 @@ export const relativeTimeFormatOptions: RelativeTimeFormatOptions = { style, unit: relativeTimeFormatUnits, localeMatcher -} +}; diff --git a/src/lib/format-options/segmenter.options.ts b/src/lib/format-options/segmenter.options.ts index 551d91b..6ff4fba 100644 --- a/src/lib/format-options/segmenter.options.ts +++ b/src/lib/format-options/segmenter.options.ts @@ -6,4 +6,4 @@ export type SegmenterOptions = CreateOptions; export const segmenterOptions: SegmenterOptions = { granularity: ["word", "sentence", "grapheme", undefined], localeMatcher -} +}; diff --git a/src/lib/locale-data/calendars.ts b/src/lib/locale-data/calendars.ts index 4d02906..c986345 100644 --- a/src/lib/locale-data/calendars.ts +++ b/src/lib/locale-data/calendars.ts @@ -12,7 +12,7 @@ export const calendars = [ "japanese", "persian", "roc" -] +]; export const numberingSystems = [ "arab", diff --git a/src/lib/playground/format.utils.test.ts b/src/lib/playground/format.utils.test.ts index 7a50045..78be599 100644 --- a/src/lib/playground/format.utils.test.ts +++ b/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" + ); + }); +}); diff --git a/src/lib/playground/validate.test.ts b/src/lib/playground/validate.test.ts index dad1bd2..1435995 100644 --- a/src/lib/playground/validate.test.ts +++ b/src/lib/playground/validate.test.ts @@ -104,7 +104,7 @@ describe("validateAndUpdateSchema", () => { expect( validateAndUpdateSchema( numberFormatSchemaFactory({ - options: [styleOption, unitOption], + options: [styleOption, unitOption] }) ) ).toEqual( @@ -123,7 +123,7 @@ describe("validateAndUpdateSchema", () => { defaultValue: undefined, value: "degree", inputType: "select" - }), + }) ]) }) ); @@ -131,12 +131,12 @@ describe("validateAndUpdateSchema", () => { test("pass through option based on schema and set selected and value", () => { const option = numberFormatOptionFactory({ - name: "maximumFractionDigits", + name: "maximumFractionDigits" }); expect( validateAndUpdateSchema( numberFormatSchemaFactory({ - options: [option], + options: [option] }) ) ).toEqual( @@ -150,8 +150,8 @@ describe("validateAndUpdateSchema", () => { valueType: "number", inputType: "text", value: undefined, - selected: undefined, - }), + selected: undefined + }) ]) }) ); diff --git a/src/lib/store/settings.ts b/src/lib/store/settings.ts index 039c9ec..5220266 100644 --- a/src/lib/store/settings.ts +++ b/src/lib/store/settings.ts @@ -3,10 +3,7 @@ import { writable } from "svelte/store"; export type DarkMode = "dark" | "light"; -type HintKeys = "codeThemeHint" | - "themeHint" | - "showBrowserSupportHint" | - "accentColorHint"; +type HintKeys = "codeThemeHint" | "themeHint" | "showBrowserSupportHint" | "accentColorHint"; type Setting = { type: "radio" | "checkbox" | "color"; @@ -40,7 +37,7 @@ export const settingsConfiguration: SettingsConfiguration = { accentColor: { type: "color", values: ["275"], - hint: "accentColorHint", + hint: "accentColorHint" } }; @@ -55,7 +52,7 @@ const defaultSettings: Settings = { codeTheme: "dark", theme: "light", showBrowserSupport: true, - accentColor: "275", + accentColor: "275" }; export const settingsKeys = Object.keys(defaultSettings) as (keyof Settings)[]; @@ -86,8 +83,8 @@ settings.subscribe((value) => { } else if (value.codeTheme === "dark") { document.querySelector("html")?.removeAttribute("data-code-light-mode"); } - if(value.accentColor) { - document.documentElement.style.setProperty('--accent-hue', value.accentColor); + if (value.accentColor) { + document.documentElement.style.setProperty("--accent-hue", value.accentColor); } localStorage.setItem(settingsLocalStorageKey, JSON.stringify(value)); } diff --git a/src/lib/types/common.ts b/src/lib/types/common.ts index 648276f..5f4ad24 100644 --- a/src/lib/types/common.ts +++ b/src/lib/types/common.ts @@ -49,5 +49,5 @@ export type CreateOptions = { [key in Key]: Tuple; }; -export type StringOrUndefinedTuple = [string | undefined, string | undefined] -export type NumberOrUndefinedTuple = [number | undefined, number | undefined] +export type StringOrUndefinedTuple = [string | undefined, string | undefined]; +export type NumberOrUndefinedTuple = [number | undefined, number | undefined]; diff --git a/src/lib/utils/dom-utils.ts b/src/lib/utils/dom-utils.ts index 6d952d3..9b279e0 100644 --- a/src/lib/utils/dom-utils.ts +++ b/src/lib/utils/dom-utils.ts @@ -3,6 +3,6 @@ export const testIds = { openNavigation: "openNavigation", playground: { output: "playgroundOutput", - code: "playgroundCode", - } + code: "playgroundCode" + } } as const; diff --git a/src/lib/utils/factory.ts b/src/lib/utils/factory.ts index bb62bb1..862e83c 100644 --- a/src/lib/utils/factory.ts +++ b/src/lib/utils/factory.ts @@ -1,46 +1,54 @@ import type { PlaygroundOption, PlaygroundSchema } from "$lib/playground/playground.schema"; import type { Factory } from "$types/common"; -export const numberFormatOptionFactory: Factory> = (overrides = {}) => ({ - name: "minimumIntegerDigits", - valueType: "number", - inputType: "text", - defaultValue: undefined, +export const numberFormatOptionFactory: Factory> = ( + overrides = {} +) => ({ + name: "minimumIntegerDigits", + valueType: "number", + inputType: "text", + defaultValue: undefined, value: undefined, selected: undefined, - ...overrides, -}) + ...overrides +}); -export const dateTimeFormatOptionFactory: Factory> = (overrides = {}) => ({ - name: "hour", - valueType: "number", - inputType: "text", - defaultValue: undefined, +export const dateTimeFormatOptionFactory: Factory> = ( + overrides = {} +) => ({ + name: "hour", + valueType: "number", + inputType: "text", + defaultValue: undefined, value: undefined, selected: undefined, - ...overrides, -}) + ...overrides +}); -export const numberFormatSchemaFactory: Factory> = (overrides = {}) => ({ +export const numberFormatSchemaFactory: Factory> = ( + overrides = {} +) => ({ inputValues: [1091, 2000], - ...overrides, - method: "NumberFormat", + ...overrides, + method: "NumberFormat", primaryFormatter: "format", - inputValueType: "number", - invalidOptionCombos: {}, - options: overrides?.options?.map(numberFormatOptionFactory) ?? [], - secondaryFormatters: ["formatToParts", "formatRange", "formatRangeToParts"], -}) + inputValueType: "number", + invalidOptionCombos: {}, + options: overrides?.options?.map(numberFormatOptionFactory) ?? [], + secondaryFormatters: ["formatToParts", "formatRange", "formatRangeToParts"] +}); export const htmlInputElementFactory: Factory = (overrides = {}) => { return { ...overrides } as HTMLInputElement; -} +}; -export const eventFactory: Factory & { target: HTMLInputElement | null }> = (overrides = {}) => { +export const eventFactory: Factory & { target: HTMLInputElement | null }> = ( + overrides = {} +) => { return { ...overrides, - target: overrides.target ? htmlInputElementFactory(overrides.target) : null, + target: overrides.target ? htmlInputElementFactory(overrides.target) : null } as Omit & { target: HTMLInputElement | null }; -} +}; diff --git a/src/lib/utils/format-utils.test.ts b/src/lib/utils/format-utils.test.ts index d311aa6..0133e6b 100644 --- a/src/lib/utils/format-utils.test.ts +++ b/src/lib/utils/format-utils.test.ts @@ -1,5 +1,11 @@ import { describe, expect, test } from "vitest"; -import { camelCaseToWords, clampValue, formatLocaleForUrl, formatLocalesForPrint, tryFormat } from "./format-utils"; +import { + camelCaseToWords, + clampValue, + formatLocaleForUrl, + formatLocalesForPrint, + tryFormat +} from "./format-utils"; import { numberFormatOptionFactory } from "./factory"; describe("clampValue", () => { @@ -87,7 +93,7 @@ describe("formatLocalesForPrint", () => { }); test("format multiple locale", () => { - expect(formatLocalesForPrint(["sv", "en"])).toEqual("[\"sv\",\"en\"]"); + expect(formatLocalesForPrint(["sv", "en"])).toEqual('["sv","en"]'); }); test("format zero locale", () => { @@ -97,9 +103,9 @@ describe("formatLocalesForPrint", () => { describe("formatLocaleForUrl", () => { test("format locales", () => { - expect(formatLocaleForUrl(["sv"])).toEqual('?locale=sv'); + expect(formatLocaleForUrl(["sv"])).toEqual("?locale=sv"); }); test("format locales", () => { - expect(formatLocaleForUrl(["sv", "en"])).toEqual('?locale=sv,en'); + expect(formatLocaleForUrl(["sv", "en"])).toEqual("?locale=sv,en"); }); }); diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte index 9adb9ae..117bcbe 100644 --- a/src/routes/+layout.svelte +++ b/src/routes/+layout.svelte @@ -34,26 +34,20 @@ {routeId ?? title} - - - - - - - - - - - - - - + + + + + + + + + + + + + + {#if !dev}