<A> should support "mailto:" hrefs

[DaniGuardiola]

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]

but <a/> supports ))

[DaniGuardiola]

@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]

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

[DaniGuardiola]

@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]

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

[DaniGuardiola]

@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]

Thanks, this is helpful

[ryansolid]

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>.

[DaniGuardiola]

if you are using mailto: you probably know

That's my point, you don't always know. There is a very real and, I suspect, potentially common use case in rendering a blog post from markdown. I'm currently bailing from client-side routing in my blog posts because I don't wanna go through the trouble of implementing a component that conditionally renders <A> or <a> depending on the href value. It's something I'd expect the framework to handle for me, as Next.js does for example.

In other words, I think about <A> as an extended version of <a> that adds support for client-side navigation, but if it doesn't support <a> features like mailto: then I think "A" is a misnomer and it should simply be called <SolidLink> or something like that (like Next.js' <Link>), definitely not <A>.

That said I understand if there are some other developments that are worth waiting for before considering this.

[PsychoLlama]

I also ran into this with blob: URLs. Solved the same way: conditionally switch <a> vs <A>.

The reasoning makes sense in hindsight, but it's surprising behavior. It's not an <a> tag, it's a SPA link, and it serves a different purpose than the name implies.

Easy enough to work around, but took a bit of digging to figure out what was going wrong and whether Solid supported a prop or attribute (the same way rel appears to have special behavior).

Like if you are using mailto: you probably know.

I ran into this for a similar reason as Dani. A layer of indirection means the href isn't known ahead of time.

My design system uses a custom <Link> component for style consistency. The consumer of <Link> doesn't know it's an <A> tag, and the author of <Link> (me) doesn't know it's a blob:.

Small papercut. Docs or a differently named component would avoid it. I don't have a stake in the game since I've already patched over it, but hopefully the story is helpful.