Refactor local storage

Author: devongovett

packages/dev/s2-docs/src/BundlerSwitcher.tsx

@@ -1,9 +1,10 @@
 'use client';
 
 import {Key} from 'react-aria-components';
-import React, {Children, ReactElement, ReactNode, useEffect, useMemo, useState} from 'react';
+import React, {Children, ReactElement, ReactNode, useMemo} from 'react';
 import {SegmentedControl, SegmentedControlItem} from '@react-spectrum/s2';
 import {style} from '@react-spectrum/s2/style' with {type: 'macro'};
+import {useLocalStorage} from './useLocalStorage';
 
 type SwitcherKey = string;
 
@@ -42,7 +43,6 @@ export function BundlerSwitcherItem(_props: BundlerSwitcherItemProps) {
 }
 
 export function BundlerSwitcher({children}: BundlerSwitcherProps) {
-  const storageKey = 'bundler';
   let items = useMemo(() => {
     let arr = Children.toArray(children) as ReactElement<BundlerSwitcherItemProps>[];
     return arr
@@ -54,36 +54,14 @@ export function BundlerSwitcher({children}: BundlerSwitcherProps) {
       }));
   }, [children]);
 
-  let initial = useMemo(() => {
-    let stored: string | null = null;
-    if (storageKey && typeof window !== 'undefined') {
-      stored = localStorage.getItem(storageKey);
-    }
-    let storedValid = items.find(it => it.id === stored)?.id;
-    if (storedValid) {return storedValid;}
-    return items[0]?.id;
-  }, [items, storageKey]);
-
-  let [selected, setSelected] = useState<SwitcherKey | undefined>(initial);
-
-  useEffect(() => {
-    // Update selected if items change and current is no longer valid
-    if (selected && !items.find(it => it.id === selected)) {
-      setSelected(items[0]?.id);
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [items]);
+  let [bundler, setBundler] = useLocalStorage('bundler', items[0]?.id);
+  let active = items.find(it => it.id === bundler) ?? items[0];
 
   let onSelectionChange = (key: Key) => {
     let value = String(key) as SwitcherKey;
-    setSelected(value);
-    if (storageKey && typeof window !== 'undefined') {
-      localStorage.setItem(storageKey, value);
-    }
+    setBundler(value);
   };
 
-  let active = items.find(it => it.id === selected) ?? items[0];
-
   return (
     <div className={container}>
       <div className={style({overflowX: 'auto', width: 'auto', flexGrow: 1})}>

packages/dev/s2-docs/src/ExampleSwitcher.tsx

@@ -5,6 +5,7 @@ import {createContext, useState} from 'react';
 import {Key} from 'react-aria-components';
 import {style} from '@react-spectrum/s2/style' with {type: 'macro'};
 import {useLayoutEffect} from '@react-aria/utils';
+import {useLocalStorage} from './useLocalStorage';
 
 const exampleStyle = style({
   backgroundColor: 'layer-1',
@@ -59,66 +60,35 @@ const themePicker = style({
 
 export const ExampleSwitcherContext = createContext<Key | null>(null);
 
-const DEFAULT_EXAMPLES = ['Vanilla CSS', 'Tailwind'] as Key[];
+const DEFAULT_EXAMPLES = ['Vanilla CSS', 'Tailwind'];
 
 export function ExampleSwitcher({type = 'style', examples = DEFAULT_EXAMPLES, children}) {
-  let [selected, setSelected] = useState<Key>(examples[0]);
-  let [theme, setTheme] = useState('indigo');
+  let [selected, setSelected] = useLocalStorage(type, examples[0]);
+  let [theme, setTheme] = useLocalStorage('theme', 'indigo');
+  let [value, setValue] = useState(examples[0]);
 
-  useLayoutEffect(() => {
-    if (!type) {
-      return;
-    }
-
-    let search = new URLSearchParams(location.search);
-    let exampleType = search.get(type) ?? localStorage.getItem(type);
-    if (exampleType && examples.includes(exampleType)) {
-      setSelected(exampleType);
-    }
-
-    let theme = localStorage.getItem('theme');
-    if (theme) {
-      setTheme(theme);
-    }
-
-    let controller = new AbortController();
-    window.addEventListener('storage', e => {
-      if (e.key === type && e.newValue && examples.includes(e.newValue)) {
-        setSelected(e.newValue);
-      }
+  if (!examples.includes(selected)) {
+    selected = examples[0];
+  }
 
-      if (e.key === 'theme' && e.newValue) {
-        setTheme(e.newValue);
-      }
-    }, {signal: controller.signal});
-    return () => controller.abort();
-  }, [type, examples]);
+  if (!type) {
+    selected = value;
+  }
 
   useLayoutEffect(() => {
     document.documentElement.style.setProperty('--tint', `var(--${theme})`);
   }, [theme]);
 
-  let onSelectionChange = key => {
-    setSelected(key);
-    
+  let onSelectionChange = (key: Key) => {
     if (type) {
-      localStorage.setItem(type, key);
-      window.dispatchEvent(new StorageEvent('storage', {
-        key: type,
-        oldValue: String(selected),
-        newValue: String(key)
-      }));
+      setSelected(String(key));
+    } else {
+      setValue(String(key));
     }
   };
 
-  let onThemeChange = key => {
-    setTheme(key);
-    localStorage.setItem('theme', key);
-    window.dispatchEvent(new StorageEvent('storage', {
-      key: 'theme',
-      oldValue: String(theme),
-      newValue: String(key)
-    }));
+  let onThemeChange = (key: Key | null) => {
+    setTheme(String(key));
   };
 
   return (

packages/dev/s2-docs/src/InstallCommand.tsx

@@ -4,8 +4,9 @@ import {CopyButton} from './CopyButton';
 import {iconStyle, style} from '@react-spectrum/s2/style' with {type: 'macro'};
 import {Key} from 'react-aria-components';
 import Prompt from '@react-spectrum/s2/icons/Prompt';
-import React, {useEffect, useMemo, useState} from 'react';
+import React, {useMemo} from 'react';
 import {SegmentedControl, SegmentedControlItem} from '@react-spectrum/s2';
+import {useLocalStorage} from './useLocalStorage';
 
 const container = style({
   backgroundColor: 'layer-1',
@@ -56,22 +57,11 @@ export interface InstallCommandProps {
 }
 
 export function InstallCommand({pkg, flags, label, isCommand}: InstallCommandProps) {
-  let [manager, setManager] = useState<PkgManager>('yarn');
-
-  useEffect(() => {
-    if (isCommand) {
-      return;
-    }
-    let stored = localStorage.getItem('packageManager');
-    if (stored === 'npm' || stored === 'pnpm' || stored === 'yarn') {
-      setManager(stored);
-    }
-  }, [isCommand]);
+  let [manager, setManager] = useLocalStorage('packageManager', 'npm');
 
   let onSelectionChange = (key: Key) => {
     let value = String(key) as PkgManager;
     setManager(value);
-    localStorage.setItem('packageManager', value);
   };
 
   let command = useMemo(() => {
@@ -102,8 +92,8 @@ export function InstallCommand({pkg, flags, label, isCommand}: InstallCommandPro
     <div className={container} data-example-switcher>
       {!isCommand && (
         <SegmentedControl selectedKey={manager} onSelectionChange={onSelectionChange} styles={switcher}>
-          <SegmentedControlItem id="yarn">yarn</SegmentedControlItem>
           <SegmentedControlItem id="npm">npm</SegmentedControlItem>
+          <SegmentedControlItem id="yarn">yarn</SegmentedControlItem>
           <SegmentedControlItem id="pnpm">pnpm</SegmentedControlItem>
         </SegmentedControl>
       )}

packages/dev/s2-docs/src/ShadcnCommand.tsx

@@ -3,27 +3,20 @@ import CopyButton from './CopyButton';
 import {iconStyle, style} from '@react-spectrum/s2/style' with {type: 'macro'};
 import {Key, SegmentedControl, SegmentedControlItem} from '@react-spectrum/s2';
 import Prompt from '@react-spectrum/s2/icons/Prompt';
-import {RefObject, useEffect, useState} from 'react';
+import {RefObject} from 'react';
+import {useLocalStorage} from './useLocalStorage';
 
 export function ShadcnCommand({registryUrl, preRef}: {registryUrl: string, preRef?: RefObject<HTMLPreElement | null>}) {
-  let [packageManager, setPackageManager] = useState<Key>('npm');
+  let [packageManager, setPackageManager] = useLocalStorage('packageManager', 'npm');
   let command = packageManager;
   if (packageManager === 'npm') {
     command = 'npx';
   } else if (packageManager === 'pnpm') {
     command = 'pnpm dlx';
   }
 
-  useEffect(() => {
-    let value = localStorage.getItem('packageManager');
-    if (value) {
-      setPackageManager(value);
-    }
-  }, []);
-
   let onSelectionChange = (value: Key) => {
-    setPackageManager(value);
-    localStorage.setItem('packageManager', String(value));
+    setPackageManager(String(value));
   };
 
   let cmd = `${command} shadcn@latest add ${process.env.REGISTRY_URL || 'http://localhost:8081'}/${registryUrl}`;

packages/dev/s2-docs/src/StarterKits.tsx

@@ -16,7 +16,7 @@ const preview = style({
 
 export function StarterKits() {
   return (
-    <section className={style({display: 'flex', columnGap: 16, flexWrap: 'wrap'})}>
+    <section className={style({display: 'flex', gap: 16, flexWrap: 'wrap'})}>
       <div className={style({display: 'flex', flexDirection: 'column', gap: 8})}>
         <Card href={`../react-aria-starter.${gitHash}.zip`}>
           <div className={style({display: 'flex', alignItems: 'center'})}>

packages/dev/s2-docs/src/Step.tsx

@@ -24,20 +24,6 @@ export function Step({children}) {
         listStyleType: 'none',
         position: 'relative'
       })}>
-      {/* <div
-        className={style({
-          display: {
-            default: 'block',
-            ':is(:last-child > *)': 'none'
-          },
-          position: 'absolute',
-          top: 'calc(1lh + 16px)',
-          left: 'calc(-1lh / 2 - 8px)',
-          bottom: -24,
-          width: 2,
-          borderRadius: 'full',
-          backgroundColor: 'gray-400'
-        })} /> */}
       {children}
     </li>
   );

packages/dev/s2-docs/src/useLocalStorage.ts

@@ -0,0 +1,71 @@
+import {useState, useSyncExternalStore} from 'react';
+
+export function useLocalStorage(key: string, defaultValue: string): [string, (value: string) => void] {
+  let [store] = useState(() => new Store(key, defaultValue));
+  let value = useSyncExternalStore(store.subscribe, store.getSnapshot, store.getServerSnapshot);
+  return [value, store.setValue];
+}
+
+class Store {
+  key: string;
+  defaultValue: string;
+  subscriptions: Set<() => void>;
+
+  constructor(key: string, defaultValue: string) {
+    this.key = key;
+    this.defaultValue = defaultValue;
+    this.subscriptions = new Set();
+  }
+
+  subscribe = (fn: () => void) => {
+    if (!this.key) {
+      return () => {};
+    }
+
+    let onStorage = (e: StorageEvent) => {
+      if (e.key === this.key) {
+        fn();
+      }
+    };
+
+    window.addEventListener('storage', onStorage);
+    return () => {
+      window.removeEventListener('storage', onStorage);
+    };
+  };
+
+  getSnapshot = () => {
+    if (!this.key) {
+      return this.defaultValue;
+    }
+    
+    let search = new URLSearchParams(location.search);
+    return search.get(this.key) ?? localStorage.getItem(this.key) ?? this.defaultValue;
+  };
+
+  getServerSnapshot = () => {
+    return this.defaultValue;
+  };
+
+  setValue = (value: string) => {
+    if (!this.key) {
+      return;
+    }
+
+    let oldValue = this.getSnapshot();
+    localStorage.setItem(this.key, value);
+
+    let search = new URLSearchParams(location.search);
+    if (search.has(this.key)) {
+      search.set(this.key, value);
+      let url = new URL('?' + search.toString(), location.href);
+      history.replaceState(null, '', url.toString());
+    }
+
+    window.dispatchEvent(new StorageEvent('storage', {
+      key: this.key,
+      oldValue,
+      newValue: value
+    }));
+  };
+}