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

[coderabbitai]

🎯 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:

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>((props) => {
  const containerRef = useSignal<HTMLDivElement>();

  // 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 <div ref={containerRef}></div>;
});

---

✅ 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:

// src/routes/index.tsx
import { component$ } from '@builder.io/qwik';
import { SocialShareButton } from '~/components/social-share-button-qwik';

export default component$(() => (
  <SocialShareButton
    url="https://your-website.com"
    title="Check this out!"
    description="An amazing website"
    theme="dark"
    buttonText="Share"
  />
));

---

✅ 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.

[aashnaachaudhary10]

Hi @kpj2006 , I sincerely apologize for the oversight. I got a bit ahead of myself and raised the PR (#75) before getting the issue officially assigned.

I have read the guidelines carefully now and will ensure I follow the proper 'Comment-Assign-Code' workflow for all future tasks. Could you please assign this to me retrospectively? I’ll be more mindful going forward. Thank you for the guidance!