AOSSIE-Org / AOSSIE-Org/SocialShareButton

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

Open
#47 2 comments 0 reactions 0 assignees View on GitHub
Dominant language
TypeScript
Stars
25
Forks
64
Avg merge
2d 11h
Merged PRs (30d)
1

Description

## 🎯 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`:

```svelte

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
});
}


```

---

### ✅ 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:

```svelte

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

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.