AOSSIE-Org / AOSSIE-Org/SocialShareButton

Enhancement: Add Solid.js Integration — new wrapper component and demo page section

Đang mở
#54 1 bình luận 0 reaction 0 người được giao Xem trên GitHub
planned
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. Solid.js is a highly performant reactive framework with no virtual DOM and minimal runtime overhead — it shares the same philosophy as this library. Since Solid supports SSR (via SolidStart), the wrapper **must guard all browser APIs** with `typeof window !== 'undefined'` checks and only mount on the client using `onMount`.

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

---

## 📁 Files to Create / Modify

### ✅ New File: `src/social-share-button-solid.jsx`

A Solid.js component wrapping the core vanilla JS library, following the same lifecycle pattern as `src/social-share-button-react.jsx`:

```jsx
import { onMount, onCleanup, createEffect } from 'solid-js';

export default function SocialShareButton(props) {
let container;
let shareButton;

onMount(() => {
// SSR guard — SolidStart pre-renders on the server
if (typeof window !== 'undefined' && window.SocialShareButton) {
shareButton = new window.SocialShareButton({
container,
url: props.url || window.location.href,
title: props.title || document.title,
description: props.description || '',
hashtags: props.hashtags || [],
via: props.via || '',
platforms: props.platforms || ['whatsapp','facebook','twitter','linkedin','telegram','reddit'],
theme: props.theme || 'dark',
buttonText: props.buttonText || 'Share',
customClass: props.customClass || '',
onShare: props.onShare || null,
onCopy: props.onCopy || null,
buttonStyle: props.buttonStyle || 'default',
modalPosition: props.modalPosition || 'center'
});
}
});

createEffect(() => {
if (shareButton) {
shareButton.updateOptions({
url: props.url,
title: props.title,
description: props.description,
hashtags: props.hashtags,
via: props.via,
platforms: props.platforms,
theme: props.theme,
buttonText: props.buttonText,
customClass: props.customClass,
onShare: props.onShare,
onCopy: props.onCopy,
buttonStyle: props.buttonStyle,
modalPosition: props.modalPosition
});
}
});

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

return

;
}
```

---

### ✅ Existing File: `index.html` — Add Solid.js Integration Section

Mirror the existing React Integration section. Add a new section with:
- Section heading: `⚡ Solid.js Integration`
- Step 1: Include CSS and JS via CDN (same as Quick Start)
- Step 2: Import and use the `SocialShareButton` component in a Solid.js page

Example code snippet to display:

```jsx
// App.jsx
import SocialShareButton from './social-share-button-solid';

export default function App() {
return (

);
}
```

---

## ✅ Acceptance Criteria

- [ ] `src/social-share-button-solid.jsx` created following the React wrapper pattern
- [ ] SSR guard (`typeof window !== 'undefined'`) present inside `onMount`
- [ ] `onCleanup` calls `destroy()` to prevent memory leaks
- [ ] `createEffect` calls `updateOptions()` on prop changes
- [ ] `index.html` updated with a Solid.js section containing install + usage code snippets
- [ ] Copy-to-clipboard button present on new code blocks in `index.html`
- [ ] README updated to list Solid.js as a supported framework

---

> ⚠️ **Planned — Not Final**
> This issue represents a planned enhancement and is **not guaranteed to be implemented**. It may be dropped if it does not align with the repository's direction. **Before opening a pull request, please discuss with the maintainers in this issue thread.**

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.