search

solidjs / solid-router

A universal router for Solid inspired by Ember and React Router
MIT License
1.15k stars 147 forks source link

<A> should support "mailto:" hrefs #266

Closed DaniGuardiola closed 1 year ago

DaniGuardiola commented 1 year ago

I'm using this component to render links in some MDX content, which is convenient since it works out of the box for any kind of links, internal or external. However, it doesn't seem to handle mailto href values appropriately, forcing me to create a custom wrapper. I think it should probably be supported out of the box, along with "tel" and other similar patterns.

russelgal commented 1 year ago

but <a/> supports ))

DaniGuardiola commented 1 year ago

@russelgal I'm not sure what you mean. I use Solid Start's <A> because I want to be able to link to other pages in my blog posts, and for those links to work client-side without causing a full refresh.

russelgal commented 1 year ago

<A/> for internal links <a/> for href="tel:|mailto:" etc

DaniGuardiola commented 1 year ago

@russelgal I understand the current behavior, and that's what I'm doing as my workaround. This is a proposal to improve <A /> by adding support for that type of href value.

Btw, I just realized there's a similar problem with anchor links (e.g. #section-name) that's forced me to build a similar workaround for them. So I'd add that to the proposal.

boehs commented 1 year ago

Again, <A/> is specifically for links that trigger CSR. I don't see what's wrong with that?

DaniGuardiola commented 1 year ago

@boehs it's not wrong. I'm just proposing that other types of href values are supported, just like external values already are.

I'm not sure if it's accidental or intentional, but right now you can use <A /> for URLs that are not internal (such as a twitter profile) and it works just fine. In fact, that makes a few situations much easier to implement, like rendering some links in a header from data that contains a mix of internal and external URLs. That's in fact what I do in my new blog: dio.la (code: https://github.com/DaniGuardiola/dio.la/blob/d7e018f3e84eff06be896bba23f9e839f840aaca/src/root.tsx#L35-L59)

This property of <A /> means that I don't need to be manually checking every URL to determine if it's internal or external to conditionally render <A /> or <a />, which is a great feature IMO.

As I explained, this same pattern could extend to other href value types like mailto: to gain the same benefits.

It's just a proposal, so I 100% understand if there are arguments against it, but please do try to understand what I'm asking for here :P

boehs commented 1 year ago

Thanks, this is helpful

ryansolid commented 1 year ago

Adding more bails out on seems unnecessary. Like if you are using mailto: you probably know. But I will move this to discussions. Because of developments around partial hydration patterns I am still very much thinking about the impact of <A> vs <a>.