Merge branch 'main' into support-location-hash

CHANGELOG.md

@@ -2,6 +2,10 @@
 
 ## [Unreleased]
 
+## [0.5.4] - 2024-02-27
+### Changed
+- feat(atomWithHash): initial value from hash #31
+
 ## [0.5.3] - 2024-02-18
 ### Changed
 - feat(atomWithLocation): override replace for specific navigations #28

__tests__/atomWithHash_spec.tsx

@@ -1,4 +1,4 @@
-import React, { StrictMode, useMemo } from 'react';
+import React, { StrictMode, useEffect, useMemo, useState } from 'react';
 import { fireEvent, render, screen, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { useAtom } from 'jotai/react';
@@ -186,6 +186,37 @@ describe('atomWithHash', () => {
     await user.type(screen.getByLabelText('b'), '1');
     await waitFor(() => expect(paramBMockFn).toBeCalledTimes(4));
   });
+
+  it('sets initial value from hash', async () => {
+    window.location.hash = '#count=2';
+    const countAtom = atomWithHash('count', 0);
+
+    const Counter = () => {
+      const [count] = useAtom(countAtom);
+      const [countWasZero, setCountWasZero] = useState(false);
+
+      useEffect(() => {
+        if (count === 0) {
+          setCountWasZero(true);
+        }
+      }, [count]);
+      return (
+        <>
+          <div>count: {count}</div>
+          <div>count was zero: {countWasZero.toString()}</div>
+        </>
+      );
+    };
+
+    const { findByText } = render(
+      <StrictMode>
+        <Counter />
+      </StrictMode>,
+    );
+
+    await findByText('count: 2');
+    await findByText('count was zero: false');
+  });
 });
 
 describe('atomWithHash without window', () => {

package.json

@@ -1,7 +1,7 @@
 {
   "name": "jotai-location",
   "description": "👻🔗",
-  "version": "0.5.3",
+  "version": "0.5.4",
   "author": "Daishi Kato",
   "repository": {
     "type": "git",

src/atomWithHash.ts

@@ -26,6 +26,7 @@ export function atomWithHash<Value>(
   },
 ): WritableAtom<Value, [SetStateActionWithReset<Value>], void> {
   const serialize = options?.serialize || JSON.stringify;
+
   const deserialize = options?.deserialize || safeJSONParse(initialValue);
   const subscribe =
     options?.subscribe ||
@@ -51,15 +52,20 @@ export function atomWithHash<Value>(
   if (typeof setHashOption === 'function') {
     setHash = setHashOption;
   }
-  const strAtom = atom<string | null>(null);
+  const isLocationAvailable =
+    typeof window !== 'undefined' && !!window.location;
+
+  const strAtom = atom(
+    isLocationAvailable
+      ? new URLSearchParams(window.location.hash.slice(1)).get(key)
+      : null,
+  );
   strAtom.onMount = (setAtom) => {
-    if (typeof window === 'undefined' || !window.location) {
+    if (!isLocationAvailable) {
       return undefined;
     }
     const callback = () => {
-      const searchParams = new URLSearchParams(window.location.hash.slice(1));
-      const str = searchParams.get(key);
-      setAtom(str);
+      setAtom(new URLSearchParams(window.location.hash.slice(1)).get(key));
     };
     const unsubscribe = subscribe(callback);
     callback();