Enhancement: Add SvelteKit Integration — new wrapper component and demo page section

[coderabbitai]

🎯 Direction

SocialShareButton is a lightweight, zero-dependency, framework-agnostic social sharing component. The goal of this issue is to extend first-class support to SvelteKit, which shares the same philosophy: minimal runtime overhead, compiles to pure JS. Since SvelteKit supports SSR (Server-Side Rendering), the wrapper must guard all browser APIs with typeof window !== 'undefined' checks.

📹 See the button in action: https://youtu.be/cLJaT-8rEvQ?si=CLipA0Db4WL0EqKM

---

📁 Files to Create / Modify

✅ New File: src/social-share-button-svelte.svelte

A Svelte component that wraps the core vanilla JS library, following the same pattern as src/social-share-button-react.jsx:

<script>
  import { onMount, onDestroy } from 'svelte';

  export let url = '';
  export let title = '';
  export let description = '';
  export let hashtags = [];
  export let via = '';
  export let platforms = ['whatsapp', 'facebook', 'twitter', 'linkedin', 'telegram', 'reddit'];
  export let theme = 'dark';
  export let buttonText = 'Share';
  export let customClass = '';
  export let onShare = null;
  export let onCopy = null;
  export let buttonStyle = 'default';
  export let modalPosition = 'center';

  let container;
  let shareButton;

  onMount(() => {
    // SSR guard — SvelteKit pre-renders on the server
    if (typeof window !== 'undefined' && window.SocialShareButton) {
      shareButton = new window.SocialShareButton({
        container,
        url: url || window.location.href,
        title: title || document.title,
        description,
        hashtags,
        via,
        platforms,
        theme,
        buttonText,
        customClass,
        onShare,
        onCopy,
        buttonStyle,
        modalPosition
      });
    }
  });

  onDestroy(() => {
    if (shareButton) {
      shareButton.destroy();
      shareButton = null;
    }
  });

  // Reactive update when props change (e.g. SvelteKit route transitions)
  $: if (shareButton) {
    shareButton.updateOptions({
      url, title, description, hashtags, via,
      platforms, theme, buttonText, customClass,
      onShare, onCopy, buttonStyle, modalPosition
    });
  }
</script>

<div bind:this={container}></div>

---

✅ Existing File: index.html — Add SvelteKit Integration Section

Mirror the existing ⚛️ React Integration section. Add a new section block with:

• Section heading: 🟠 SvelteKit Integration
• Step 1: Include CSS and JS via CDN (same as Quick Start)
• Step 2: Import and use the SocialShareButton.svelte component
• Step 3: Show usage inside a +page.svelte file with props

Example code snippet to display in the demo section:

<!-- +page.svelte -->
<script>
  import SocialShareButton from 'social-share-button-svelte';
<\/script>

<SocialShareButton
  url="https://your-website.com"
  title="Check this out!"
  description="An amazing website"
  theme="dark"
  buttonText="Share"
/>

---

✅ Acceptance Criteria

• src/social-share-button-svelte.svelte created following the React wrapper pattern
• SSR guard (typeof window !== 'undefined') present on all browser API usages
• onMount used for initialization, onDestroy calls destroy() to prevent memory leaks
• Reactive statement ($:) calls updateOptions() on prop changes
• index.html updated with a SvelteKit section containing install + usage code snippets
• Copy-to-clipboard button present on new code blocks in index.html
• README updated to list SvelteKit as a supported framework

[Muneerali199]

Hi maintainers,

I have implemented the SvelteKit/Svelte integration as requested in this issue.

What was created:

• Added src/social-share-button-svelte.svelte component
• Includes SSR guard (typeof window !== 'undefined')
• Supports all SocialShareButton options as props
• Proper cleanup in onDestroy

PR Link:

• PR feat: add Astro, Svelte, and Nuxt.js wrapper components #109: feat: add Astro, Svelte, and Nuxt.js wrapper components #109

Please review!

[Divine-P-77777]

Hi @kpj2006 , I’ve opened a PR for SvelteKit support. Could you please take a look when you get time?
#123

Also, I wasn’t able to send the PR link in the Social Share Button Discord channel.