diff --git a/src/lib/components/Sidebar.svelte b/src/lib/components/Sidebar.svelte index 2893340..c2c11c7 100644 --- a/src/lib/components/Sidebar.svelte +++ b/src/lib/components/Sidebar.svelte @@ -80,7 +80,7 @@
  • Intl.
    • {#each routes as route, i} -
  • +
  • { 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 index 75e7553..77b282a 100644 --- 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}`))); @@ -63,8 +51,15 @@ > - {"("}{")"} - .{"("}{")"}{"\n"} + + {'('}{')'} + .{'('}{')'}{'\n'} new Date(dateTimeString).toLocaleString(locale))}`} + t="comment" + /> {#each Object.entries(datetimeFormatOptions) as [option, values]} @@ -75,7 +70,7 @@ {/if} {/each} @@ -83,4 +78,3 @@ {/each} - diff --git a/src/lib/components/pages/DurationFormat.svelte b/src/lib/components/pages/DurationFormat.svelte index 9ba583a..f27d5da 100644 --- 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 index 44ee40a..b496d13 100644 --- 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" - /> new Intl.ListFormat(locale).format(list.split(',')))} t="comment" /> {#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 index f0bcd04..c420f2d 100644 --- 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 index cfeb325..69fe692 100644 --- 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 @@ > -

    +

    new Intl.NumberFormat(locale, { style: 'unit', unit: selectedUnit }).format(number))} t="comment"/>     {#each options as [option, values]} diff --git a/src/lib/components/pages/NumberFormat.svelte b/src/lib/components/pages/NumberFormat.svelte index 363b7a8..3d56abb 100644 --- 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 @@ > -

    +

    new Intl.NumberFormat(locale).format(number))} t="comment"/>     {#each options as [option, values]} diff --git a/src/lib/components/pages/Playground/Playground.svelte b/src/lib/components/pages/Playground/Playground.svelte index 984c3b6..0c3f7aa 100644 --- a/src/lib/components/pages/Playground/Playground.svelte +++ b/src/lib/components/pages/Playground/Playground.svelte @@ -1,6 +1,5 @@ @@ -131,15 +101,7 @@
    - + diff --git a/src/lib/components/pages/Playground/PlaygroundInput.svelte b/src/lib/components/pages/Playground/PlaygroundInput.svelte index f5c0a40..4a20161 100644 --- 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 index d086320..3eb2612 100644 --- a/src/lib/components/pages/Playground/PlaygroundSecondaryFormatters.svelte +++ b/src/lib/components/pages/Playground/PlaygroundSecondaryFormatters.svelte @@ -24,9 +24,3 @@ {/each} {/if} - diff --git a/src/lib/components/pages/PluralRules.svelte b/src/lib/components/pages/PluralRules.svelte index 388459c..9275382 100644 --- a/src/lib/components/pages/PluralRules.svelte +++ b/src/lib/components/pages/PluralRules.svelte @@ -7,8 +7,8 @@ import type { OptionValues } from '$lib/types/OptionValues.types'; import type { BrowserSupportDataForMethod } from '$lib/types/BrowserSupport.types'; - 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; export let browserCompatData: BrowserSupportDataForMethod | null; @@ -19,21 +19,12 @@ const code = `new Intl.PluralRules("${locale}", ${JSON.stringify( Object.assign({}, options, { value: undefined }) )}).select(${options.value})`; - await copyToClipboard(code); - trackEvent("Copy Code", { - code, - }) + await copyCode(code); }; - const tryFormat = ( + const format = ( options: Intl.PluralRulesOptions | undefined = undefined, number: number - ) => { - try { - return new Intl.PluralRules(locale, options).select(number) - } catch (e) { - return 'Failed to use `Intl.PluralRules`. You are probably using an unsupported browser'; - } - }; + ) => tryFormat(() => new Intl.PluralRules(locale, options).select(number)) @@ -58,7 +49,7 @@ value: 1, type }} - output={tryFormat({ + output={format({ type }, 1)} /> @@ -68,7 +59,7 @@ value: 2, type }} - output={tryFormat({ + output={format({ type }, 2)} /> @@ -78,7 +69,7 @@ value: 20, type }} - output={tryFormat({ + output={format({ type }, 20)} /> @@ -92,7 +83,7 @@ type, localeMatcher: 'best fit' }} - output={tryFormat({ + output={format({ type, localeMatcher: 'best fit' }, 1)} @@ -104,7 +95,7 @@ type, localeMatcher: 'lookup' }} - output={tryFormat({ + output={format({ type, localeMatcher: 'lookup' }, 2)} diff --git a/src/lib/components/pages/RelativeTimeFormat.svelte b/src/lib/components/pages/RelativeTimeFormat.svelte index cffc79c..4afdc51 100644 --- a/src/lib/components/pages/RelativeTimeFormat.svelte +++ b/src/lib/components/pages/RelativeTimeFormat.svelte @@ -7,24 +7,27 @@ import Spacing from '$lib/components/ui/Spacing.svelte'; import { relativeTimeFormatUnits } from '$lib/format-options/relative-time-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; let onClick = async (options: OptionValues) => { const code = `new Intl.RelativeTimeFormat("${locale}", ${JSON.stringify( - Object.assign({}, options, { value: undefined }) - )}).format(${dayValue}, "${options.value}")` - await copyToClipboard(code); - trackEvent('Copy Code', { - code, - }); + Object.assign({}, options, { value: undefined }) + )}).format(${dayValue}, "${options.value}")`; + await copyCode(code); }; + const format = ( + options: Intl.RelativeTimeFormatOptions, + day: number, + value: Intl.RelativeTimeFormatUnit + ) => tryFormat(() => new Intl.RelativeTimeFormat(locale, options).format(day, value)); + let dayValue = 2; let style: Intl.RelativeTimeFormatStyle = 'long'; let numeric: 'always' | 'auto' = 'auto'; @@ -74,10 +77,14 @@ {/if} {/each} diff --git a/src/lib/components/pages/Segmenter.svelte b/src/lib/components/pages/Segmenter.svelte index 179d3eb..c08411e 100644 --- a/src/lib/components/pages/Segmenter.svelte +++ b/src/lib/components/pages/Segmenter.svelte @@ -9,9 +9,8 @@ import type { OptionValues } from '$lib/types/OptionValues.types'; import type { BrowserSupportDataForMethod } from '$lib/types/BrowserSupport.types'; - import { copyToClipboard } from '$lib/utils/copy-to-clipboard'; + import { copyCode } from '$lib/utils/copy-to-clipboard'; import { segmenterOptions } from '$lib/format-options/segmenter.options'; - import { trackEvent } from '$lib/utils/analytics'; import { tryFormat } from '$lib/utils/format-utils'; let sentence = 'This is a sentence.'; @@ -22,10 +21,7 @@ const code = `Array.from(new Intl.Segmenter("${locale}", ${JSON.stringify( options )}).segment("${sentence}"))`; - await copyToClipboard(code); - trackEvent('Copy Code', { - code - }); + await copyCode(code); }; const format = (options: OptionValues, input: string) => diff --git a/src/lib/components/ui/CopyButton.svelte b/src/lib/components/ui/CopyButton.svelte index 7be5f16..e8b3cc6 100644 --- a/src/lib/components/ui/CopyButton.svelte +++ b/src/lib/components/ui/CopyButton.svelte @@ -14,7 +14,7 @@ border-bottom-left-radius: 0.5rem; padding: var(--spacing-4); cursor: pointer; - color: var(--backround-color); + color: var(--white); position: absolute; z-index: 1; top: 0; diff --git a/src/lib/components/ui/icons/Settings.svelte b/src/lib/components/ui/icons/Settings.svelte new file mode 100644 index 0000000..6226368 --- /dev/null +++ b/src/lib/components/ui/icons/Settings.svelte @@ -0,0 +1,15 @@ + diff --git a/src/lib/playground/format.utils.ts b/src/lib/playground/format.utils.ts index a14fb45..de7391b 100644 --- a/src/lib/playground/format.utils.ts +++ b/src/lib/playground/format.utils.ts @@ -5,10 +5,48 @@ import type { PlaygroundOption, PlaygroundSchema } from "./playground.schema"; import { formatOptions } from "$lib/format-options"; import { durationValues } from "$lib/format-options/duration-format.options"; -import { optionIsActive } from "./schemas/validate"; +import { optionIsActive } from "./validate"; +import { clampValue, fallbackDisplayNames, tryFormat, print } from "$lib/utils/format-utils"; -export const print = (values: unknown) => { - return JSON.stringify(values, null, 2); +export const updateOptionOnSchema = ( + schema: PlaygroundSchema, + event: Event +) => { + const target = event.target as HTMLInputElement; + 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 = { + ...schema, + options: schemaOptions as unknown as PlaygroundOption[] + }; + 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]; + } + return newSchema; } export const schemaToFormatOptions = ( @@ -17,7 +55,7 @@ export const schemaToFormatOptions = ( const formatOptions: Partial = {}; for (const option of schema.options) { const value = option.value ?? option.defaultValue; - if(optionIsActive(option)) { + if (optionIsActive(option)) { formatOptions[option.name] = value === "" ? undefined : value; } } @@ -40,7 +78,6 @@ const prepareSchemaForOutput = ( const options = schemaToFormatOptions(schema); const hasOptions = Object.values(options).filter(v => v !== undefined).length > 0; return { - // Casting to something generic so every formatter can accept options options: options as Record, hasOptions, } @@ -48,7 +85,7 @@ const prepareSchemaForOutput = ( export const formatDurationFormatValues = ( inputValues: any[] -) => +) => Object.fromEntries( durationValues.map((duration, i) => [duration, Number(inputValues[0][i] ?? 0)]) ) @@ -70,7 +107,7 @@ export const schemaToPrimaryFormatterOutput = locale: string, ) => { const { options } = prepareSchemaForOutput(schema); - try { + return tryFormat(() => { if (schema.method === "Collator") { const formattedString = (schema.inputValues[0]).sort(new Intl.Collator( locale, @@ -78,20 +115,16 @@ export const schemaToPrimaryFormatterOutput = ).compare) return `${formattedString}` } - // Casting to specific formatter to circumvent type errors, the types are too dynamic - const primaryFormatter = schema.primaryFormatter as "formatToParts"; - //@ts-expect-error too complex type + //@ts-expect-error too complex type to handle correctly const formatted = (new Intl[schema.method]( locale, options - ) as Intl.DateTimeFormat)[primaryFormatter](...prepareInputValues(schema)) - if(schema.method === "Segmenter") { + ))[schema.primaryFormatter](...prepareInputValues(schema)) + if (schema.method === "Segmenter") { return `${print(Array.from(formatted))}` } return `${formatted}` - } catch (error) { - return `${(error as { message: string }).message}`; - } + }) } export const schemaToSecondaryFormattersOutput = ( @@ -100,21 +133,13 @@ export const schemaToSecondaryFormattersOutput = { const { options } = prepareSchemaForOutput(schema); return schema.secondaryFormatters?.map(formatter => { - try { - //@ts-expect-error too complex type - const output = (new Intl[schema.method]( + return { + name: formatter, + //@ts-expect-error too complex type to handle correcty + output: tryFormat(() => print((new Intl[schema.method]( locale, options - ) as Intl.DateTimeFormat)[(formatter as "formatToParts")](...prepareInputValues(schema)) - return { - name: formatter, - output: print(output) - } - } catch (error) { - return { - name: formatter, - output: `${(error as { message: string }).message}` - } + ))[formatter](...prepareInputValues(schema)))) } }) ?? []; } @@ -124,16 +149,14 @@ export const schemaToResolvedOptions = ( locale: string, ) => { const { options } = prepareSchemaForOutput(schema); - try { + return tryFormat(() => { //@ts-expect-error too complex type const intlObject = (new Intl[schema.method]( locale, options ) as Intl.PluralRules); return `${print(intlObject.resolvedOptions())}` - } catch (error) { - return `${(error as { message: string }).message}` - } + }) } export const schemaToCode = ( diff --git a/src/lib/playground/url.utils.ts b/src/lib/playground/url.utils.ts index 99ca3d3..f8676ec 100644 --- a/src/lib/playground/url.utils.ts +++ b/src/lib/playground/url.utils.ts @@ -1,7 +1,7 @@ import { browser } from '$app/environment'; import type { FormatMethodsKeys } from '$lib/format-methods'; import type { PlaygroundSchema } from './playground.schema'; -import { validateAndUpdateSchema } from './schemas/validate'; +import { validateAndUpdateSchema } from './validate'; export const getSchemaParam = () => browser ? new URLSearchParams(window.location.search).get('schema') : undefined; diff --git a/src/lib/playground/schemas/validate.ts b/src/lib/playground/validate.ts similarity index 98% rename from src/lib/playground/schemas/validate.ts rename to src/lib/playground/validate.ts index 0effb25..ba60353 100644 --- a/src/lib/playground/schemas/validate.ts +++ b/src/lib/playground/validate.ts @@ -1,7 +1,7 @@ /* eslint-disable @typescript-eslint/no-explicit-any */ import type { FormatMethodsKeys } from '$lib/format-methods'; import type { PlaygroundOption, PlaygroundSchema } from '$lib/playground/playground.schema'; -import { schemas } from '.'; +import { schemas } from './schemas'; export const optionIsActive = ( option: PlaygroundOption diff --git a/src/lib/routes.ts b/src/lib/routes.ts index 9fedef0..8cf6ed9 100644 --- a/src/lib/routes.ts +++ b/src/lib/routes.ts @@ -3,7 +3,6 @@ export type Route = { name: string; sublink?: boolean; ariaLabel?: string; - ariaHidden?: boolean; experimental?: boolean; }; diff --git a/src/lib/utils/copy-to-clipboard.ts b/src/lib/utils/copy-to-clipboard.ts index f3b16cd..7879bbc 100644 --- a/src/lib/utils/copy-to-clipboard.ts +++ b/src/lib/utils/copy-to-clipboard.ts @@ -1,3 +1,5 @@ +import { trackEvent } from "./analytics"; + export function copyToClipboard(textToCopy: string): Promise { if (navigator.clipboard && window.isSecureContext) { return navigator.clipboard.writeText(textToCopy); @@ -16,3 +18,10 @@ export function copyToClipboard(textToCopy: string): Promise { }); } } + +export const copyCode = async (code: string) => { + await copyToClipboard(code); + trackEvent('Copy Code', { + code + }); +} diff --git a/src/lib/utils/format-utils.ts b/src/lib/utils/format-utils.ts index f7a4a34..f1f9b6a 100644 --- a/src/lib/utils/format-utils.ts +++ b/src/lib/utils/format-utils.ts @@ -1,9 +1,10 @@ +import type { FormatMethodsKeys } from '$lib/format-methods'; import type { PlaygroundOption } from '$lib/playground/playground.schema'; export const defaultNumberRange = [1, 2, 3, 4, 5]; -export const clampValue = ( - option: PlaygroundOption<'NumberFormat'>, +export const clampValue = ( + option: PlaygroundOption, value: string | boolean | null | undefined ) => { if (option.valueType !== 'number') return value; @@ -15,6 +16,10 @@ export const clampValue = ( return option.min && parsed < option.min ? Math.max(option.min, clampedMax) : clampedMax; }; +export const print = (values: unknown) => { + return JSON.stringify(values, null, 2); +} + export const fallbackDisplayNames: Record = { language: 'en-US', region: 'US',