Move format function definitions onto settings to avoid calling getSettings after component initialization (#191)

* move format functions onto settings object

* update uses of formatting functions to fit new settings paradigm

* start transferring to store-based locale settings

* checkpoint

* update templates, add back custom date formatting

* upadte format samples

* update number tests

* clean up custom variant a bit, improve format function type definition

* remove date and number subformatters

* fixes

* fix missing style

* better label

* allow setting locale to one not explicitly supported

* fix a few old format calls

* add function type possibility to column format

Author: dimfeld

packages/svelte-ux/src/lib/components/DateButton.svelte

@@ -6,8 +6,8 @@
   import { DateToken, getDateFuncsByPeriodType, PeriodType } from '../utils/date';
   import type { SelectedDate } from '../utils/date';
   import { cls } from '../utils/styles';
+  import { getSettings } from './settings';
   import { getComponentClasses } from './theme';
-  import { format as format_ux } from '../utils';
 
   const dispatch = createEventDispatcher();
 
@@ -19,6 +19,7 @@
   export let fade: boolean = false;
   export let format = getCustomFormat(periodType);
 
+  const { format: format_ux } = getSettings();
   const settingsClasses = getComponentClasses('DateButton');
 
   function getCustomFormat(periodType: PeriodType) {
@@ -102,6 +103,6 @@
       dispatch('dateChange', date);
     }}
   >
-    {format_ux(date, periodType, { custom: format })}
+    {$format_ux(date, periodType, { custom: format })}
   </Button>
 </div>

packages/svelte-ux/src/lib/components/DateField.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import { createEventDispatcher } from 'svelte';
   import { parse as parseDate } from 'date-fns';
-  import { PeriodType, format as format_ux } from '../utils';
+  import { PeriodType } from '../utils';
   import { getSettings } from './settings';
 
   import Field from './Field.svelte';
@@ -10,8 +10,10 @@
   import DatePickerField from './DatePickerField.svelte';
   import { getComponentClasses } from './theme';
 
+  const { format: format_ux } = getSettings();
+
   export let value: Date | null = null;
-  export let format = getSettings().formats?.dates?.baseParsing ?? 'MM/dd/yyyy';
+  export let format = $format_ux.settings.formats.dates.baseParsing ?? 'MM/dd/yyyy';
   export let mask = format.toLowerCase();
   export let replace = 'dmyh';
   export let picker = false;
@@ -63,7 +65,7 @@
   let:id
 >
   <Input
-    value={value ? format_ux(value, PeriodType.Day, { custom: format }) : inputValue}
+    value={value ? $format_ux(value, PeriodType.Day, { custom: format }) : inputValue}
     {mask}
     {replace}
     {id}

packages/svelte-ux/src/lib/components/DatePickerField.svelte

@@ -9,8 +9,7 @@
   import { DateToken, getDateFuncsByPeriodType, PeriodType } from '../utils/date';
   import DateSelect from './DateSelect.svelte';
   import { getComponentClasses } from './theme';
-  import { format } from '../utils';
-  import { getDictionary } from './settings';
+  import { getSettings } from './settings';
 
   const dispatch = createEventDispatcher();
 
@@ -33,6 +32,8 @@
   export let center = false;
 
   const settingsClasses = getComponentClasses('DatePickerField');
+  const { format } = getSettings();
+  $: dictionary = $format.settings.dictionary;
 
   let open: boolean = false;
 
@@ -64,7 +65,7 @@
   <Button icon={mdiCalendar} on:click={() => (open = true)} {...$$restProps} />
 {:else}
   <Field
-    label={label ?? format(value, PeriodType.Day, { custom: secondaryFormat })}
+    label={label ?? $format(value, PeriodType.Day, { custom: secondaryFormat })}
     {icon}
     {error}
     {hint}
@@ -98,7 +99,7 @@
       on:click={() => (open = true)}
       {id}
     >
-      {format(value, PeriodType.Day, { custom: primaryFormat })}
+      {$format(value, PeriodType.Day, { custom: primaryFormat })}
     </button>
 
     <div slot="append">
@@ -138,10 +139,10 @@
       transition:slide
     >
       <div class="text-sm opacity-50">
-        {format(currentValue, PeriodType.Day, { custom: secondaryFormat })}
+        {$format(currentValue, PeriodType.Day, { custom: secondaryFormat })}
       </div>
       <div class="text-3xl">
-        {format(currentValue, PeriodType.Day, { custom: primaryFormat })}
+        {$format(currentValue, PeriodType.Day, { custom: primaryFormat })}
       </div>
     </div>
   {/if}
@@ -163,13 +164,13 @@
         dispatch('change', value);
       }}
       variant="fill"
-      color="primary">{getDictionary().Ok}</Button
+      color="primary">{dictionary.Ok}</Button
     >
     <Button
       on:click={() => {
         open = false;
         currentValue = value;
-      }}>{getDictionary().Cancel}</Button
+      }}>{dictionary.Cancel}</Button
     >
   </div>
 </Dialog>

packages/svelte-ux/src/lib/components/DateRange.svelte

@@ -7,10 +7,7 @@
     getDateFuncsByPeriodType,
     hasDayOfWeek,
     replaceDayOfWeek,
-    getPeriodTypeName,
-    getDayOfWeekName,
   } from '../utils/date';
-  import { format } from '../utils';
   import { getDateRangePresets } from '../utils/dateRange';
   import type { DateRange } from '../utils/dateRange';
   import { cls } from '../utils/styles';
@@ -22,7 +19,7 @@
   import ToggleOption from './ToggleOption.svelte';
   import { getComponentClasses } from './theme';
   import { mdScreen } from '$lib/stores/matchMedia';
-  import { getSettings } from '.';
+  import { getSettings } from './settings';
 
   export let selected: DateRange | null = { from: null, to: null, periodType: null };
 
@@ -40,16 +37,18 @@
   export let getPeriodTypePresets = getDateRangePresets;
 
   const settingsClasses = getComponentClasses('DateRange');
+  const { format } = getSettings();
 
   let selectedPeriodType = selected?.periodType ?? periodTypes[0];
   let selectedPreset: string | null = null;
-  let selectedDayOfWeek: DayOfWeek = getSettings().formats?.dates?.weekStartsOn ?? DayOfWeek.Sunday;
+  let selectedDayOfWeek: DayOfWeek =
+    $format.settings.formats.dates.weekStartsOn ?? DayOfWeek.Sunday;
   let activeDate: 'from' | 'to' = 'from';
 
   $: periodTypeOptions = periodTypes.map((pt) => {
     const value = adjustPeriodType(pt);
     return {
-      label: getPeriodTypeName(adjustPeriodType(pt)),
+      label: $format.getPeriodTypeName(adjustPeriodType(pt)),
       value,
     };
   });
@@ -174,7 +173,7 @@
       <ToggleOption value="from" class="flex-1">
         <div class="text-xs text-surface-content/50">Start</div>
         {#if selected?.from}
-          <div class="font-medium">{format(selected.from, PeriodType.Day)}</div>
+          <div class="font-medium">{$format(selected.from, PeriodType.Day)}</div>
         {:else}
           <div class="italic">Empty</div>
         {/if}
@@ -196,7 +195,7 @@
       <ToggleOption value="to" class="flex-1">
         <div class="text-xs text-surface-content/50">End</div>
         {#if selected?.to}
-          <div class="font-medium">{format(selected.to, PeriodType.Day)}</div>
+          <div class="font-medium">{$format(selected.to, PeriodType.Day)}</div>
         {:else}
           <div class="italic">Empty</div>
         {/if}
@@ -288,12 +287,7 @@
             classes={{ root: 'bg-surface-100', option: 'px-0' }}
           >
             {#each [DayOfWeek.Sunday, DayOfWeek.Monday, DayOfWeek.Tuesday, DayOfWeek.Wednesday, DayOfWeek.Thursday, DayOfWeek.Friday, DayOfWeek.Saturday] as day}
-              <ToggleOption value={day}
-                >{getDayOfWeekName(
-                  day,
-                  getSettings().formats?.dates?.locales ?? 'en'
-                )}</ToggleOption
-              >
+              <ToggleOption value={day}>{$format.getDayOfWeekName(day)}</ToggleOption>
             {/each}
           </ToggleGroup>
         </div>

packages/svelte-ux/src/lib/components/DateRangeDisplay.svelte

@@ -1,11 +1,12 @@
 <script lang="ts">
   import { PeriodType, getDateFuncsByPeriodType, type FormatDateOptions } from '../utils/date';
   import type { DateRange } from '../utils/dateRange';
-
-  import { format as format_ux } from '../utils';
+  import { getSettings } from './settings';
 
   export let value: DateRange | null | undefined;
 
+  const { format: format_ux } = getSettings();
+
   let showToValue = false;
   $: if (value?.to) {
     if (value?.from && value?.periodType) {
@@ -66,12 +67,12 @@
 </script>
 
 {#if value?.from}
-  {format_ux(value.from, getPeriodType(value), { variant: 'long' })}
+  {$format_ux(value.from, getPeriodType(value), { variant: 'long' })}
 {:else}
   <div>&nbsp;</div>
 {/if}
 
 {#if value?.to && showToValue}
   <span> - </span>
-  {format_ux(value.to, getPeriodType(value), { variant: 'long' })}
+  {$format_ux(value.to, getPeriodType(value), { variant: 'long' })}
 {/if}

packages/svelte-ux/src/lib/components/DateRangeField.svelte

@@ -11,8 +11,10 @@
   import { PeriodType, getDateFuncsByPeriodType, getPeriodTypeName } from '../utils/date';
   import { getDateRangePresets, type DateRange as DateRangeType } from '../utils/dateRange';
   import { cls } from '../utils/styles';
+  import { getSettings } from './settings';
 
   const dispatch = createEventDispatcher();
+  const settings = getSettings();
 
   const _defaultValue: DateRangeType = {
     from: null,
@@ -58,7 +60,7 @@
 </script>
 
 <Field
-  label={label ?? (value.periodType ? getPeriodTypeName(value.periodType) : '')}
+  label={label ?? (value.periodType ? getPeriodTypeName(settings, value.periodType) : '')}
   {icon}
   {error}
   {hint}
@@ -151,7 +153,7 @@
 >
   <div class="flex flex-col justify-center bg-primary text-primary-content px-6 h-24">
     <div class="text-sm opacity-50">
-      {currentValue.periodType ? getPeriodTypeName(currentValue.periodType) : ''}&nbsp;
+      {currentValue.periodType ? getPeriodTypeName(settings, currentValue.periodType) : ''}&nbsp;
     </div>
     <div class="text-xl sm:text-2xl">
       <DateRangeDisplay value={currentValue} />

packages/svelte-ux/src/lib/components/Month.svelte

@@ -15,7 +15,6 @@
 
   import { getMonthDaysByWeek, PeriodType } from '../utils/date';
   import type { SelectedDate } from '../utils/date';
-  import { format } from '../utils';
   import { hasKeyOf } from '../types/typeGuards';
 
   import Button from './Button.svelte';
@@ -33,8 +32,11 @@
       startOfMonthFunc(selected.from)) ||
     startOfMonthFunc(new Date());
 
+  const { format } = getSettings();
+  $: dateFormat = $format.settings.formats.dates;
+
   $: endOfMonth = endOfMonthFunc(startOfMonth);
-  $: monthDaysByWeek = getMonthDaysByWeek(startOfMonth, getSettings().formats?.dates?.weekStartsOn);
+  $: monthDaysByWeek = getMonthDaysByWeek(startOfMonth, dateFormat.weekStartsOn);
 
   /**
    * Hide controls and date.  Useful to control externally
@@ -92,7 +94,7 @@
     />
 
     <div class="flex flex-1 items-center justify-center">
-      <span>{format(startOfMonth, PeriodType.MonthYear)}</span>
+      <span>{$format(startOfMonth, PeriodType.MonthYear)}</span>
     </div>
 
     <Button
@@ -107,7 +109,7 @@
   {#each monthDaysByWeek[0] ?? [] as day (day.getDate())}
     <div class="flex-1 text-center">
       <span class="text-xs text-surface-content/50">
-        {format(day, PeriodType.Day, { custom: 'eee' })}
+        {$format(day, PeriodType.Day, { custom: 'eee' })}
       </span>
     </div>
   {/each}

packages/svelte-ux/src/lib/components/Pagination.svelte

@@ -3,7 +3,6 @@
 
   import type paginationStore from '../stores/paginationStore';
   import { cls } from '../utils/styles';
-  import { format as formatValue } from '../utils/format';
   import type { StoresValues } from '../types/typeHelpers';
 
   import Button from './Button.svelte';
@@ -13,6 +12,7 @@
   import Toggle from './Toggle.svelte';
   import Tooltip from './Tooltip.svelte';
   import { getComponentClasses } from './theme';
+  import { getSettings } from './settings';
 
   type Pagination = ReturnType<typeof paginationStore>;
 
@@ -39,6 +39,7 @@
     pagination?: string;
     perPage?: string;
   } = {};
+  const { format: formatValue } = getSettings();
   const settingsClasses = getComponentClasses('Pagination');
 </script>
 
@@ -128,7 +129,7 @@
                     selected={$pagination.perPage === option}
                     on:click={() => pagination.setPerPage(option)}
                   >
-                    {formatValue(option, 'integer')}
+                    {$formatValue(option, 'integer')}
                   </MenuItem>
                 {/each}
               </Menu>

packages/svelte-ux/src/lib/components/SpringValue.svelte

@@ -1,23 +1,25 @@
 <script lang="ts">
   import { spring } from 'svelte/motion';
-  import { format as formatUtil, type FormatType } from '../utils/format';
+  import type { FormatType } from '../utils/format';
+  import { getSettings } from './settings';
 
   type T = $$Generic;
   type SpringOptions = Parameters<typeof spring<T>>[1];
 
   export let value: T | 0;
-  export let format: FormatType = undefined;
+  export let format: FormatType | undefined = undefined;
   export let options: SpringOptions = undefined;
   export let disabled = false;
 
+  const { format: formatUtil } = getSettings();
   const springValue = spring(value, options);
   $: $springValue = value ?? 0;
   $: displayValue = disabled || value == null ? value : $springValue;
 </script>
 
 <slot value={displayValue}>
   {#if format}
-    {formatUtil(displayValue, format)}
+    {$formatUtil(displayValue, format)}
   {:else}
     {displayValue}
   {/if}

packages/svelte-ux/src/lib/components/Table.svelte

@@ -5,16 +5,11 @@
   import type { ColumnDef } from '../types/table';
   import { cls } from '../utils/styles';
 
-  import {
-    getCellValue,
-    getCellContent,
-    getCellHeader,
-    getHeaders,
-    getRowColumns,
-  } from '../utils/table';
+  import { getCellValue, getCellHeader, getHeaders, getRowColumns } from '../utils/table';
 
   import TableOrderIcon from './TableOrderIcon.svelte';
   import { getComponentClasses } from './theme';
+  import { getSettings } from './settings';
 
   const dispatch = createEventDispatcher();
 
@@ -70,6 +65,20 @@
       },
     };
   });
+
+  const { format } = getSettings();
+  $: getCellContent = (column: ColumnDef, rowData: any, rowIndex: number) => {
+    let value = getCellValue(column, rowData, rowIndex);
+    if (column.format) {
+      if (typeof column.format === 'function') {
+        return column.format(value, rowData, rowIndex);
+      } else {
+        return $format(value, column.format);
+      }
+    } else {
+      return value;
+    }
+  };
 </script>
 
 <!-- svelte-ignore a11y-click-events-have-key-events -->