Exploration of useUrlParams()

What we would like:

const UrlCounter = component$(() => {
  const params = useUrlParams({ count: 0 });
  
  return (
    <button onClick$={() => params.count++}>
      {params.count}
    </button>
  );
});

so the above should result in something like http://localhost/?count=123

useUrlParams() implementation

function useUrlParams<T>(initial: T): T {
  const params = useStore({count: 123});
  useWatch$((track) => {
    track(params);
    // put code to update `location.search`
  });
  useClientEffect$(() => {
    // code to listen to the `location.search` change
  }, {run: 'load'})
}

The above is the basic idea. However, the above has an issue, that it will always return a new instance of the params, where as we should have a way to return the same instance no matter how many times it is invoked.

New API proposal:

Obvious, but wrong

For that reason we should have a way to scope the useStore()

  const params = useStore({count: 123}, {scope: 'container'});

The proposal is to add additional parameter to the useStore which will ensure that the value it returns is scoped to the container. This in effect makes the params a singleton within the application.

The above is not ideal, because the same issue applies to all of the use method.

useWith()

function useUrlParams<T>(initial: T): T {
  useWith('container', () => {
    const params = useStore({count: 123});
    useWatch$((track) => {
      track(params);
      // put code to update `location.search`
    });
    useClientEffect$(() => {
      // code to listen to the `location.search` change
    }, {run: 'load'})    
  });
}

Having useWith would allow to re-scope the location of the binding code. Namely to a different element or to the container.

New API for listening on location changes