@svelte-put/preprocess-external-link

Svelte preprocessor for adding attributes to anchor tags that point to external domains.

svelte-put

This package is part of the @svelte-put family. For contributing guideline and more, refer to its readme.

Usage & Documentation

See the dedicated documentation page here.

Quick Start

Given this svelte.config.js...

// svelte.config.js
import externalLink from '@svelte-put/preprocess-external-link';

/** @type {import('@sveltejs/kit').Config} */
const config = {
  preprocess: [
    externalLink(['your-domain.com', 'your-other-domain.com']),
    // other preprocessors
  ],
};
export default config;

..the following input markup...

<!-- input.svelte -->
<script>
  let href = 'https://developer.mozilla.org';
</script>

<!-- links that are treated as internal -->
<a href="/internal-path">Internal Path</a>
<a href="https//your-domain.com/some-path">Internal Path</a>
<a href="https//your-other-domain.com/some-path">Internal Path</a>

<!-- links that are treated as external -->
<a href="https://svelte.dev/">Svelte</a>
<a {href} data-external>Svelte</a>

...will output

<!-- output.html -->

<!-- links that are treated as internal -->
<a href="/internal-path">Internal Path</a>
<a href="https//your-domain.com/some-path">Internal Path</a>
<a href="https//your-other-domain.com/some-path">Internal Path</a>

<!-- links that are treated as external -->
<a href="https://svelte.dev/" target="_blank" rel="noreferrer noopener">Svelte</a>
<a {href} data-external target="_blank" rel="noreferrer noopener">Svelte</a>

Changelog