AOSSIE-Org / AOSSIE-Org/SocialShareButton

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

Offen
#54 1 Kommentar 0 Reaktionen 0 zugewiesene Personen Auf GitHub ansehen
planned
Vorherrschende Sprache
TypeScript
Sterne
25
Forks
64
Ø Merge
2 T. 11 Std.
Gemergte PRs (30 T.)
1

Beschreibung

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

Beitragsleitfaden

Beitragsleitfaden öffnen

Bewertung

Dieses Issue wurde noch nicht bewertet.

Neue Issues direkt in Ihr Postfach

Eine kurze Übersicht über anfängerfreundliche GitHub-Issues.