AOSSIE-Org / AOSSIE-Org/SocialShareButton

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

Đang mở
#47 2 bình luận 0 reaction 0 người được giao Xem trên GitHub
Ngôn ngữ chính
TypeScript
Star
25
Fork
64
Merge trung bình
2 ngày 11 giờ
Pull request đã merge (30 ngày)
1

Mô tả

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

Hướng dẫn đóng góp

Mở hướng dẫn đóng góp

Đánh giá

Issue này chưa được đánh giá.

Nhận issue mới trong hộp thư của bạn

Bản tóm tắt ngắn những issue GitHub phù hợp với người mới.