AOSSIE-Org / AOSSIE-Org/SocialShareButton
Enhancement: Add SvelteKit Integration — new wrapper component and demo page section
- 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
Đánh giá
Issue này chưa được đánh giá.