Issue #3502850: Remove most writable stores from the global scope

sveltejs/src/MediaQuery.svelte

 <!-- Media query component based on
  https://svelte.dev/repl/26eb44932920421da01e2e21539494cd?version=3.48.0 -->
 <script>
-  import { onMount } from 'svelte';
-  import { mediaQueryValues } from './stores';
+  import { onMount, getContext } from 'svelte';
 
   // eslint-disable-next-line import/no-mutable-exports,import/prefer-default-export
   export let query;
@@ -12,6 +11,8 @@
   let wasMounted = false;
   let matches = false;
 
+  const mediaQueryValues = getContext('mediaQueryValues');
+
   // eslint-disable-next-line no-shadow
   function addNewListener(query) {
     mql = window.matchMedia(query);

sveltejs/src/Pagination.svelte

 <script>
-  import { createEventDispatcher } from 'svelte';
+  import { createEventDispatcher, getContext } from 'svelte';
   import PagerItem from './PagerItem.svelte';
-  import { pageSize } from './stores';
 
   const dispatch = createEventDispatcher();
 
@@ -10,6 +9,7 @@
   }
 
   const { Drupal } = window;
+  const pageSize = getContext('pageSize');
 
   export let buttons = [-4, -3, -2, -1, 0, 1, 2, 3, 4];
   export let count;

sveltejs/src/ProcessQueueButton.svelte

 <script>
-  import { queueList, updated, clearQueue } from './stores';
-  import { processQueue } from './QueueProcessor';
+  import {
+    processQueue,
+    queueList,
+    updated,
+    clearQueue,
+  } from './QueueProcessor';
   import Loading from './Loading.svelte';
   import LoadingEllipsis from './Project/LoadingEllipsis.svelte';
 

sveltejs/src/Project/ActionButton.svelte

@@ -3,10 +3,15 @@
   import { openPopup, getCommandsPopupMessage } from '../popup';
   import ProjectButtonBase from './ProjectButtonBase.svelte';
   import ProjectStatusIndicator from './ProjectStatusIndicator.svelte';
-  import { addToQueue, queueList, removeFromQueue, updated } from '../stores';
   import ProjectIcon from './ProjectIcon.svelte';
   import LoadingEllipsis from './LoadingEllipsis.svelte';
-  import { processQueue } from '../QueueProcessor';
+  import {
+    processQueue,
+    addToQueue,
+    queueList,
+    removeFromQueue,
+    updated,
+  } from '../QueueProcessor';
 
   // eslint-disable-next-line import/no-mutable-exports,import/prefer-default-export
   export let project;

sveltejs/src/Project/Project.svelte

@@ -2,6 +2,7 @@
   // eslint-disable-next-line import/no-mutable-exports,import/prefer-default-export
   export let project;
   export let toggleView;
+  import { getContext } from 'svelte';
   import ProjectButtonBase from './ProjectButtonBase.svelte';
   import { openPopup } from '../popup';
   import DetailModal from '../DetailModal.svelte';
@@ -10,10 +11,11 @@
   import Categories from './Categories.svelte';
   import ProjectIcon from './ProjectIcon.svelte';
   import { numberFormatter } from '../util';
-  import { focusedElement, mediaQueryValues } from '../stores';
   import { FULL_MODULE_PATH } from '../constants';
 
   const { Drupal } = window;
+  const focusedElement = getContext('focusedElement');
+  const mediaQueryValues = getContext('mediaQueryValues');
 
   let mqMatches;
   $: isDesktop = mqMatches;

sveltejs/src/ProjectBrowser.svelte

@@ -6,14 +6,7 @@
   import Pagination from './Pagination.svelte';
   import Project from './Project/Project.svelte';
   import { numberFormatter } from './util';
-  import {
-    page,
-    focusedElement,
-    searchString,
-    pageSize,
-    updated,
-    queueList,
-  } from './stores';
+  import { updated, queueList } from './QueueProcessor';
   import MediaQuery from './MediaQuery.svelte';
   import {
     BASE_URL,
@@ -43,6 +36,19 @@
   const sort = writable(sortBy);
   setContext('sort', sort);
 
+  const page = writable(0);
+  const pageSize = writable(12);
+  setContext('pageSize', pageSize);
+
+  const focusedElement = writable('');
+  setContext('focusedElement', focusedElement);
+
+  const searchString = writable('');
+  setContext('searchString', searchString);
+
+  const mediaQueryValues = writable(new Map());
+  setContext('mediaQueryValues', mediaQueryValues);
+
   let rowsCount = 0;
   let data;
   let rows = [];

sveltejs/src/ProjectGrid.svelte

 <script context="module">
   import Search from './Search/Search.svelte';
   import Loading from './Loading.svelte';
-  import { pageSize, mediaQueryValues } from './stores';
   import ProcessQueueButton from './ProcessQueueButton.svelte';
 
   export { Search };
 </script>
 
 <script>
-  import { setContext } from 'svelte';
+  import { setContext, getContext } from 'svelte';
   import { PACKAGE_MANAGER } from './constants';
 
   const { Drupal } = window;
+  const pageSize = getContext('pageSize');
+  const mediaQueryValues = getContext('mediaQueryValues');
 
   export let loading = false;
   export let page = 0;

sveltejs/src/QueueProcessor.js

-import { get } from 'svelte/store';
+import { get, writable } from 'svelte/store';
 import { openPopup } from './popup';
 import { BASE_URL, CURRENT_PATH } from './constants';
-import { queueList, clearQueue } from './stores';
+
+export const updated = writable(0);
+
+// Store for the queue list.
+export const queueList = writable([]);
+
+export function addToQueue(project) {
+  queueList.update((currentList) => {
+    if (!currentList.includes(project)) {
+      currentList.push(project);
+    }
+    return currentList;
+  });
+}
+
+export function removeFromQueue(projectId) {
+  queueList.update((currentList) => {
+    currentList = currentList.filter(
+      (item) => item.id !== projectId,
+    );
+    return currentList;
+  });
+}
+
+export function clearQueue() {
+  queueList.update((currentList) => {
+    currentList = [];
+    return currentList;
+  });
+}
 
 export const handleError = async (errorResponse) => {
   // The error can take on many shapes, so it should be normalized.

sveltejs/src/Search/Search.svelte

@@ -4,7 +4,6 @@
   import BooleanFilter from './BooleanFilter.svelte';
   import MultipleChoiceFilter from '../MultipleChoiceFilter.svelte';
   import SearchSort from './SearchSort.svelte';
-  import { searchString } from '../stores';
   import { FULL_MODULE_PATH, DARK_COLOR_SCHEME } from '../constants';
 
   const { Drupal } = window;
@@ -12,6 +11,7 @@
   const stateContext = getContext('state');
   const sort = getContext('sort');
   const filters = getContext('filters');
+  const searchString = getContext('searchString');
 
   export let refreshLiveRegion;
   export const filter = (row, text) =>

sveltejs/src/stores.js

-// eslint-disable-next-line import/no-extraneous-dependencies
-import { writable } from 'svelte/store';
-
-// Store the page the user is on.
-const storedPage = 0;
-export const page = writable(storedPage);
-
-// Store the element that was last focused.
-const storedFocus = '';
-export const focusedElement = writable(storedFocus);
-
-// Store the search string.
-const storedSearchString = '';
-export const searchString = writable(storedSearchString);
-
-// Store the selected page size.
-const storedPageSize = 12;
-export const pageSize = writable(storedPageSize);
-
-// Store the value of media queries.
-export const mediaQueryValues = writable(new Map());
-
-export const updated = writable(0);
-
-// Store for the queue list.
-export const queueList = writable([]);
-
-export function addToQueue(project) {
-  queueList.update((currentList) => {
-    if (!currentList.includes(project)) {
-      currentList.push(project);
-    }
-    return currentList;
-  });
-}
-
-export function removeFromQueue(projectId) {
-  queueList.update((currentList) => {
-    currentList = currentList.filter(
-      (item) => item.id !== projectId,
-    );
-    return currentList;
-  });
-}
-
-export function clearQueue() {
-  queueList.update((currentList) => {
-    currentList = [];
-    return currentList;
-  });
-}