AOSSIE-Org / AOSSIE-Org/SocialShareButton

Enhancement: Add Qwik / QwikCity Integration — new wrapper component and demo page section

Đang mở
#57 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. 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.**

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.