Move showDrawer store to settings() (context) instead of module s…

…ingleton (#293)

* Move `showDrawer` store to `settings()` (context) instead of module singleton

* Prettier format

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

@@ -1,12 +1,12 @@
 <script lang="ts">
  import { mdiMenu } from '@mdi/js';
 
- import { showDrawer } from './AppLayout.svelte';
  import Breadcrumb from './Breadcrumb.svelte';
  import Button from './Button.svelte';
  import { browser } from '../utils/env.js';
  import { cls } from '../utils/styles.js';
  import { getComponentClasses } from './theme.js';
+ import { getSettings } from './index.js';
 
  export let title: string | number | Array<string | number> = '';
  export let menuIcon: string | null = mdiMenu;
@@ -18,6 +18,7 @@
  */
  export let head = true;
 
+ const { showDrawer } = getSettings();
  const settingsClasses = getComponentClasses('AppBar');
 
  $: titleString = Array.isArray(title) ? title.filter((x) => x).join(' › ') : title.toString();

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

@@ -1,15 +1,11 @@
-<script context="module">
- import { writable } from 'svelte/store';
- import { browser } from '../utils/env.js';
- export const showDrawer = writable(browser ? window.innerWidth >= breakpoints.md : true);
-</script>
-
 <script lang="ts">
  import Backdrop from './Backdrop.svelte';
 
- import { breakpoints, mdScreen } from '../stores/matchMedia.js';
+ import { mdScreen } from '../stores/matchMedia.js';
  import { cls } from '../utils/styles.js';
  import { getComponentClasses } from './theme.js';
+ import { browser } from '../utils/env.js';
+ import { getSettings } from './index.js';
 
  export let navWidth = 240;
  export let headerHeight = 64;
@@ -30,6 +26,8 @@
  } = {};
  const settingsClasses = getComponentClasses('AppLayout');
 
+ const { showDrawer } = getSettings();
+
  $: temporaryDrawer = browser ? !$mdScreen : false;
 </script>
 

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

@@ -6,8 +6,8 @@
  import { scrollIntoView } from '../actions/scroll.js';
  import { cls } from '../utils/styles.js';
  import { getComponentClasses } from './theme.js';
- import { showDrawer } from './AppLayout.svelte';
  import { mdScreen } from '../stores/matchMedia.js';
+ import { getSettings } from './index.js';
 
  export let currentUrl: URL;
  export let path: string;
@@ -21,6 +21,8 @@
  } = {};
  const settingsClasses = getComponentClasses('NavItem');
 
+ const { showDrawer } = getSettings();
+
  $: isPathActive = path ? isActive(currentUrl, path) : false;
 </script>
 

packages/svelte-ux/src/lib/components/settings.ts

@@ -1,4 +1,6 @@
 import { getContext, setContext } from 'svelte';
+import { writable, derived, type Readable, type Writable } from 'svelte/store';
+
 import {
  type ComponentName,
  type ComponentSettings,
@@ -14,9 +16,10 @@ import {
  type LocaleSettings,
  type LocaleStore,
  type LocaleSettingsInput,
-} from '../utils/locale.js';
+} from '$lib/utils/locale.js';
 import { buildFormatters, type FormatFunctions } from '../utils/format.js';
-import { type Readable, derived } from 'svelte/store';
+import { breakpoints } from '../stores/matchMedia.js';
+import { browser } from '../utils/env.js';
 
 export interface DefaultProps {
  labelPlacement: LabelPlacement;
@@ -55,6 +58,7 @@ export interface Settings extends Omit<SettingsInput, 'formats' | 'dictionary'>
  /** Formatting functions and information */
  format: Readable<FormatFunctions>;
  currentTheme: ThemeStore;
+ showDrawer: Writable<boolean>;
 
  componentSettingsCache: Partial<Record<ComponentName, ResolvedComponentSettings<ComponentName>>>;
 }
@@ -92,19 +96,25 @@ function createLocaleStores(settings: SettingsInput) {
  };
 }
 
+function createShowDrawer() {
+ return writable(browser ? window.innerWidth >= breakpoints.md : true);
+}
+
 export function settings(settings: SettingsInput = {}): Settings {
- let lightThemes = settings.themes ? settings.themes.light ?? [] : ['light'];
- let darkThemes = settings.themes ? settings.themes.dark ?? [] : ['dark'];
+ const lightThemes = settings.themes ? settings.themes.light ?? [] : ['light'];
+ const darkThemes = settings.themes ? settings.themes.dark ?? [] : ['dark'];
 
- let currentTheme =
+ const currentTheme =
  // In some cases, `settings` is called again from inside a component. Don't create a new theme store in this case.
  settings.currentTheme ??
  createThemeStore({
  light: lightThemes,
  dark: darkThemes,
  });
 
- let localeStores = createLocaleStores(settings);
+ const localeStores = createLocaleStores(settings);
+
+ const showDrawer = createShowDrawer();
 
  return setContext<Settings>(settingsKey, {
  ...settings,
@@ -114,6 +124,7 @@ export function settings(settings: SettingsInput = {}): Settings {
  },
  currentTheme,
  componentSettingsCache: {},
+ showDrawer,
  ...localeStores,
  });
 }
@@ -124,6 +135,7 @@ function getFallbackSettings() {
  FALLBACK_SETTINGS = FALLBACK_SETTINGS ?? {
  currentTheme: createThemeStore({ light: ['light'], dark: ['dark'] }),
  componentSettingsCache: {},
+ showDrawer: createShowDrawer(),
  ...createLocaleStores({}),
  };
  return FALLBACK_SETTINGS;