jotaijs / jotai-location Goto Github PK

Summary

If I go back to the first screen with no hash, hashchange event will not fire.
So, the atom value is not initialized.

I think we can use popstate instead of hashchange.
The popstate will fire even if the hash does not change, but I think it is okay because setAtom compares the previous data with the next data.

Please let me know if there is something I am not thinking of.

Link to reproduction

Here is the codesandbox.

Check List

Please do not ask questions in issues.

• I understand this is not a question.

Please include a minimal reproduction.

• I've added a link to a typescript playground or codesandbox with a minimal reproduction.

I'm making use of atomWithHash to allow one page to transmit "state" to another.

For example, my products page: /order/products might have an initial state of []

Consider this getting passed to a form page e.g./order/checkout, which needs to differentiate page content based on the products that were selected.

If I pass from products to checkout, everything is fine, as atomWithHash has been initialized already, and the user has gone through a predictable flow. The atom products is populated (my products array)

One case I can think of, is that if the user lands on the checkout page without having selected any products, I should redirect them to the product selection page (/order/products in this example). This behaviour should be true even if the user lands directly on the checkout page, it's an edge case the UI needs to account for. If you have not selected any products, I should redirect you to the selection page.

But if I load the page (even with a hash e.g. /order/checkout#products=MY_CORRECT_HASH) the initial value is [], it takes a re-render to populate the actual value - This means I cannot differentiate between the state between initialized value vs a user not having selected any products.

Any advice on how to approach this problem?

Hey, thanks for the hard work you have been putting into this new component,
I was wondering if you ever thought about adding type safety to atomWithLocation and/or serialization
We currently use Jotai and Jotai-location on our production app (NextJS), and it's sometimes a bit confusing to remember all the query keys if it needs to be shared across multiple components.

We were wondering if it would be possible for the feature to have something like this:

type LocationQuery = {
  search?: string;
  take?: number;
  skip?: number;
}

export const locAtom = atomWithLocation<LocationQuery>({
  // seralize ?
  // deserialize ?
  // initalValue ?
});

It might be out of the scope of this library but it just makes the DX much better.
Thanks again!

P.S
some resources:
https://github.com/pbeshai/use-query-params
https://github.com/amannn/next-query-params

I'm learning AtomWithHashOptions. Does this type make sense? If so, please add it at the next opportunity.

export type AtomWithHashOptions<Value> = {
    /**
     * A function to serialize the value before storing it in the URL hash.
     * The serialized string will be decoded by the `deserialize` function.
     * Default: `JSON.stringify`
     */
    serialize?: (val: Value) => string;
    /**
     * A function to deserialize the value retrieved from the URL hash.
     * The deserialized value will be used as the initial value of the atom.
     * If the deserialized value is `NO_STORAGE_VALUE`, the atom will be initialized with the `initialValue`.
     * Default: `(str) => NO_STORAGE_VALUE`
     */
    deserialize?: (str: string | null) => Value | typeof NO_STORAGE_VALUE;
    /**
     * A boolean flag that indicates whether to use `window.history.replaceState` instead of `window.location.hash`.
     * When this flag is set to `true`, the URL hash will be replaced instead of being added to the browser history.
     * Note: This flag is deprecated in favor of using `setHash` with `"replaceState"`.
     * Default: `false`
     * @deprecated Use `setHash` with 'replaceState' instead
     */
    replaceState?: boolean;
    /**
     * A function that will be called when the URL hash changes.
     * The callback should update the atom value with the new hash value.
     * Default: `(callback) => { window.addEventListener("hashchange", callback); return () => window.removeEventListener("hashchange", callback); }`
     * @returns A function that can be called to unsubscribe from the changes.
     */
    subscribe?: (callback: () => void) => () => void;
    /**
     * A function to set the URL hash.
     * By default, it sets the hash using `window.location.hash`.
     * When `replaceState` is set to true, it uses `window.history.replaceState` instead.
     * If a function is provided, it will be used instead.
     * The searchParams argument is the stringified version of the atom value.
     * Default: `"default"`
     * Options:
     * - `"default"`: Sets the hash using `window.location.hash`.
     * - `"replaceState"`: Sets the hash using `window.history.replaceState`.
     * - `(searchParams: string) => void`: A custom function that will be used to set the hash.
     */
    setHash?: "default" | "replaceState" | ((searchParams: string) => void);
};

If options.deserialize is not provided, JSON.parse will fail on a string value. This is probably not intended?

const deserialize = options?.deserialize || JSON.parse;