AOSSIE-Org / AOSSIE-Org/SocialShareButton
Enhancement: Add Qwik / QwikCity Integration — new wrapper component and demo page section
- Dominant language
- TypeScript
- Stars
- 25
- Forks
- 64
- Avg merge
- 2d 11h
- Merged PRs (30d)
- 1
Description
## 🎯 Direction
SocialShareButton is a **lightweight, zero-dependency, framework-agnostic** social sharing component. Qwik is a resumability-based framework that defers JavaScript execution until user interaction — it is the most performance-forward framework available and aligns directly with this library's zero-dependency ethos. Since QwikCity is SSR-first, the wrapper **must use `useVisibleTask$`** (Qwik's client-only lifecycle hook) and guard all browser APIs.
📹 **See the button in action**: https://youtu.be/cLJaT-8rEvQ?si=CLipA0Db4WL0EqKM
---
## 📁 Files to Create / Modify
### ✅ New File: `src/social-share-button-qwik.tsx`
A Qwik component wrapping the core vanilla JS library:
```tsx
import { component$, useVisibleTask$, useSignal, type QRL } from '@builder.io/qwik';
interface Props {
url?: string;
title?: string;
description?: string;
hashtags?: string[];
via?: string;
platforms?: string[];
theme?: string;
buttonText?: string;
customClass?: string;
onShare?: QRL<() => void>;
onCopy?: QRL<() => void>;
buttonStyle?: string;
modalPosition?: string;
}
export const SocialShareButton = component$((props) => {
const containerRef = useSignal();
// useVisibleTask$ runs only on the client — the correct SSR-safe hook in Qwik
useVisibleTask$(({ cleanup }) => {
if (typeof window !== 'undefined' && window.SocialShareButton && containerRef.value) {
const shareButton = new (window as any).SocialShareButton({
container: containerRef.value,
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 || '',
buttonStyle: props.buttonStyle || 'default',
modalPosition: props.modalPosition || 'center'
});
cleanup(() => shareButton.destroy());
}
});
return
;});
```
---
### ✅ Existing File: `index.html` — Add Qwik Integration Section
Add a new section with:
- Section heading: `⚡ Qwik / QwikCity Integration`
- Step 1: Include CSS and JS via CDN in `src/root.tsx`
- Step 2: Import and use the component in a QwikCity route
Example code snippet to display:
```tsx
// src/routes/index.tsx
import { component$ } from '@builder.io/qwik';
import { SocialShareButton } from '~/components/social-share-button-qwik';
export default component$(() => (
));
```
---
## ✅ Acceptance Criteria
- [ ] `src/social-share-button-qwik.tsx` created using `useVisibleTask$` (Qwik's client-only hook)
- [ ] `cleanup()` callback calls `destroy()` to prevent memory leaks
- [ ] No browser APIs accessed outside `useVisibleTask$`
- [ ] `index.html` updated with a Qwik section containing install + usage code snippets
- [ ] Copy-to-clipboard button present on new code blocks in `index.html`
- [ ] README updated to list Qwik 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.**
Contributor guide
Assessment
This issue has not been assessed yet.