useUrl

[huseeiin]

Describe The Problem To Be Solved

on the server getRequestEvent() has Request.url but its not a convenient URL object, and on the client we have location which is not exactly the same as URL

Suggest A Solution

import { getRequestEvent, isServer } from "solid-js/web";

function useUrl() {
  return new URL(isServer ? getRequestEvent()!.request.url : location.href);
}

should this be added? just a suggestion!

[atk]

How about making it reactive in the client (on history change event)?

[huseeiin]

How about making it reactive in the client (on history change event)?

awesome idea!

[atk]

But in a composable way, so keep useUrl and add createUrl.

[huseeiin]

But in a composable way, so keep useUrl and add createUrl.

But in a composable way, so keep useUrl and add createUrl.

function useUrl() {
  const [currentUrl, setCurrentUrl] = createSignal(
    new URL(isServer ? getRequestEvent()!.request.url : location.href)
  );

  createEffect(() => {
    const handleLocationChange = () => {
      setCurrentUrl(new URL(location.href));
    };

    addEventListener("popstate", handleLocationChange);
    addEventListener("hashchange", handleLocationChange);

    return () => {
      removeEventListener("popstate", handleLocationChange);
      removeEventListener("hashchange", handleLocationChange);
    };
  });

  return currentUrl;
}

updated code with help from claude. you can add anything else you want.

[atk]

Claude still treats Solid as if it was React. Instead of returning the unsubscriber, you need to wrap it in onCleanup.

[huseeiin]

Claude still treats Solid as if it was React. Instead of returning the unsubscriber, you need to wrap it in onCleanup.

createEffect(() => {
  const handleLocationChange = () => {
    setCurrentUrl(new URL(location.href));
  };

  addEventListener("popstate", handleLocationChange);
  addEventListener("hashchange", handleLocationChange);

  onCleanup(() => {
    removeEventListener("popstate", handleLocationChange);
    removeEventListener("hashchange", handleLocationChange);
  });
});

is this correct?

[huseeiin]

we don't need an effect here, should i just change it to an onMount?

[atk]

Since there are no reactive properties inside the effect, it is actually the same, but onMount is shorter, so go for it.

[huseeiin]

Since there are no reactive properties inside the effect, it is actually the same, but onMount is shorter, so go for it.

ok can you create createUrl? i don't know what is that, and i see you use createHydratableSingletonRoot instead of normal createSignal what else do i need to make this a real primitive?

[atk]

createHydratableSignal is only meant for signals that are supposed to have different initial values on the server and on the client during hydration. Since our signal should basically have the same initial value, it is not necessary here.

In addition, we should use a equals function in the signal to avoid triggering updates when the URL itself is the same, only wrapped in a new object.

function useUrl() {
  return new URL(isServer ? getRequestEvent()!.request.url : location.href);
}

function createUrl() {
  const [currentUrl, setCurrentUrl] = createSignal(
    useUrl(),
    { equals: (a, b) => a.toString() === b.toString() }
  );

  onMount(() => {
    const handleLocationChange = () => {
      setCurrentUrl(new URL(location.href));
    };

    addEventListener("popstate", handleLocationChange);
    addEventListener("hashchange", handleLocationChange);

    onCleanup(() => {
      removeEventListener("popstate", handleLocationChange);
      removeEventListener("hashchange", handleLocationChange);
    });
  });

  return currentUrl;
}

[huseeiin]

createHydratableSignal is only meant for signals that are supposed to have different initial values on the server and on the client during hydration. Since our signal should basically have the same initial value, it is not necessary here.

In addition, we should use a equals function in the signal to avoid triggering updates when the URL itself is the same, only wrapped in a new object.

function useUrl() {
return new URL(isServer ? getRequestEvent()!.request.url : location.href);
}

function createUrl() {
const [currentUrl, setCurrentUrl] = createSignal(
useUrl(),
{ equals: (a, b) => a.toString() === b.toString() }
);

onMount(() => {
const handleLocationChange = () => {
setCurrentUrl(new URL(location.href));
};

addEventListener("popstate", handleLocationChange);
addEventListener("hashchange", handleLocationChange);

onCleanup(() => {
  removeEventListener("popstate", handleLocationChange);
  removeEventListener("hashchange", handleLocationChange);
});

});

return currentUrl;
}

sounds awesome! is that all?

[huseeiin]

small detail: should we call it createUrl/useUrl or createURL/useURL 🤔