AOSSIE-Org / AOSSIE-Org/SocialShareButton
Enhancement: Add Solid.js 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. 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
Đánh giá
Issue này chưa được đánh giá.