Comparison API

[godismyjudge95]

Description

I recently ran across an issue where I needed to see if a given url (not the current url) was within a given scope of routes. In this case, I wanted some special behavior to happen only when certain links were clicked.

Suggestion

I realized this could be accomplished if Ziggy provided an is() or isSame() api that allowed one to see if a given url matched the signature of a route name. For example:

route().url('https://example.com/task/1').is('tasks.show')

The key here is that the task ID or any other route params are not required to check if the route matches.
I don't think this would take too much extra work since there is already the route().current() api.

Alternatives

If I had the task ID or the other route params I could just do a simple comparison:

route('https://example.com/task/1') == route('tasks.show', task.id)

Or if I could somehow hijack Ziggy's api I could use the route().current() api to see if the url matches the route.
Unfortunately this isn't how Ziggy gets the location url (it gets it directly from the window):

ziggy/src/js/Router.js

Lines 109 to 117 in 23e5caa

	_location() {
	const { host = '', pathname = '', search = '' } = typeof window !== 'undefined' ? window.location : {};
	return {
	host: this._config.location?.host ?? host,
	pathname: this._config.location?.pathname ?? pathname,
	search: this._config.location?.search ?? search,
	};
	}

So that means this doesn't work:

Ziggy.url = 'https://example.test/tasks/1'
route().current('tasks.show')

---

Overall, I think this would be a good addition since many other functional apis have a similar comparison feature and it wouldn't be too difficult to implement (practically all that is needed is a url() method to set the this._config.location and an alias from is() to current()

Let me know what you think, I would be happy to submit a pull request for this.

[bakerkretzmar]

Actually what you're describing should already be possible—Ziggy uses the window by default but if you pass it a config that includes a location object it will use that instead, that's what lines 113-115 of the snippet you included are doing.

This was added in #432 to support server side rendering, but I think it'll work for you. Try something like this:

route(undefined, undefined, undefined, {
  ...Ziggy,
  location: {
    host: 'example.com',
    pathname: '/task/1',
  },
}).current('tasks.show');

You could wrap that in a helper or something if you need to do it often.

[godismyjudge95]

@bakerkretzmar Thanks! That works perfectly. However, I think it would still be nice to include a shortcut to this inside Ziggy.

[godismyjudge95]

Perhaps an alternative would be to do something like:

route().find('https://example.com/tasks/1') // returns ['tasks.show', 1]

Although I think finding a url's route match is more difficult than asking if the url matches a given route.

[bakerkretzmar]

Actually I think you can already do that too 😅

const r = route(undefined, undefined, undefined, {
  ...Ziggy,
  location: {
    host: 'example.com',
    pathname: '/task/1',
  },
});

r.current(); // 'tasks.show'
r.params; // { task: 1 }

I'm not sure how I feel about adding methods for this directly to Ziggy, seeing as it's already possible and could easily be wrapped in a custom helper function if you need to do it a lot. PRs always welcome of course, but just a heads up before you spend time on it that I don't think we would decide to add this right now.

[godismyjudge95]

@bakerkretzmar Oh sweet, thanks. Maybe these work arounds could be documented? Or maybe just reference this issue if someone wants to do this?