AOSSIE-Org / AOSSIE-Org/SocialShareButton

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

オープン
#57 コメント 1 件 リアクション 0 件 担当者 0 名 GitHub で見る
planned
主要言語
TypeScript
スター
25
フォーク
64
平均マージ
2日 11時間
マージ済み PR(30日)
1

説明

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

コントリビューションガイド

コントリビューションガイドを開く

評価

この issue はまだ評価されていません。

新しい issue をメールで受け取る

初心者向けの GitHub issue を短くまとめたダイジェスト。