feat: add asLinkAttrs() helper

[angeloashmore]

Types of changes

• Chore (a non-breaking change which is related to package maintenance)
• Bug fix (a non-breaking change which fixes an issue)
• New feature (a non-breaking change which adds functionality)
• Breaking change (fix or feature that would cause existing functionality to change)

Description

This PR adds a new asLinkAttrs() helper. It complements the asLink() helper.

asLinkAttrs() accepts a Link field or a Prismic document and returns an object of link attributes.

const { href, target, rel } = asLinkAttrs(myLinkField);

The resulting href, target, and rel attributes can be passed to an <a> element or similar link components (e.g. Next.js' next/link component).

const App = () => {
  const attrs = asLinkAttrs(myLinkField);

  return <a {...attrs}>Click me!</a>;
};

rel attribute

The rel value resolves to a good default: if the href is external (i.e. starts with a protocol like https://), rel is "noreferrer".

The rel value can be configured using the rel option:

asLinkAttrs(myLinkField, {
  rel: ({ href, isExternal, target }) => (isExternal ? "nofollow" : undefined),
});

The value returned by the function is exactly what is returned for the rel value; the automatic noreferrer logic described above is omitted.

Note that browsers imply the "noopener" value when rel is "noreferrer" or target is _blank.

Link Resolver

A Link Resolver can be provided to compute a field or document's href.

asLinkAttrs(myLinkField, { linkResolver: (field) => `/${doc.uid}` });

Prefer using Route Resolver and reserving Link Resolver only for unusual cases.

Checklist:

• My change requires an update to the official documentation.
• All TSDoc comments are up-to-date and new ones have been added where necessary.
• All new and existing tests are passing.

🦭

[codecov-commenter]

Codecov Report

Merging #282 (1d9835d) into v7 (f0e768c) will increase coverage by 0.00%.
The diff coverage is 100.00%.

📣 This organization is not using Codecov’s GitHub App Integration. We recommend you install it so Codecov can continue to function properly for your repositories. Learn more

@@           Coverage Diff            @@
##               v7     #282    +/-   ##
========================================
  Coverage   99.96%   99.96%            
========================================
  Files          46       48     +2     
  Lines        5138     5281   +143     
  Branches      288      303    +15     
========================================
+ Hits         5136     5279   +143     
  Misses          2        2            

Impacted Files	Coverage Δ
src/helpers/asLink.ts	100.00% <100.00%> (ø)
src/helpers/asLinkAttrs.ts	100.00% <100.00%> (ø)
src/index.ts	100.00% <100.00%> (ø)
src/lib/isInternalURL.ts	100.00% <100.00%> (ø)

Help us with your feedback. Take ten seconds to tell us how you rate us. Have a feature suggestion? Share it here.

[lihbr]

Not sure about the rel value, any thought about having a similar asImageAttrs helper also? asImageWidthSrcSet and asImagePixelDensitySrcSet could also return alt value 🤔

[angeloashmore]

I updated the PR with a new rel handling strategy. It has new default behavior (return "noreferrer" only when the URL is external) and allows the value to be controlled using a new rel option.

See the updated PR body for details.

any thought about having a similar asImageAttrs helper also? asImageWidthSrcSet and asImagePixelDensitySrcSet could also return alt value 🤔

Makes sense to me! We will brainstorm a list of new helpers and implement them as time allows. In general, having these asAttr() helpers will make it easier to re-use logic across framework integrations, as well as allowing other developers to implement their own custom logic.

[lihbr]

LGTM!