Skip to content

feat: add Solid.js wrapper component#80

Open
Muneerali199 wants to merge 2 commits intoAOSSIE-Org:mainfrom
Muneerali199:feat/solid-js-wrapper
Open

feat: add Solid.js wrapper component#80
Muneerali199 wants to merge 2 commits intoAOSSIE-Org:mainfrom
Muneerali199:feat/solid-js-wrapper

Conversation

@Muneerali199
Copy link
Copy Markdown
Contributor

@Muneerali199 Muneerali199 commented Mar 10, 2026

Description

This PR adds a Solid.js wrapper component for the SocialShareButton library. The wrapper includes SSR guards for SolidStart compatibility and follows the same lifecycle pattern as the existing React wrapper.

Related Issue

Closes #54

Screenshots/Video (if applicable)

N/A

Testing

N/A

Checklist

  • Code follows style guidelines
  • Self-review completed
  • Documentation updated
  • Tests added/updated

Summary by CodeRabbit

Release Notes

  • New Features
    • Added Solid.js wrapper component for social sharing functionality with automatic initialization and proper lifecycle management.

@coderabbitai
Copy link
Copy Markdown
Contributor

coderabbitai bot commented Mar 10, 2026

Warning

Rate limit exceeded

@Muneerali199 has exceeded the limit for the number of commits that can be reviewed per hour. Please wait 11 minutes and 41 seconds before requesting another review.

⌛ How to resolve this issue?

After the wait time has elapsed, a review can be triggered using the @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

We recommend that you space out your commits to avoid hitting the rate limit.

🚦 How do rate limits work?

CodeRabbit enforces hourly rate limits for each developer per organization.

Our paid plans have higher rate limits than the trial, open-source and free plans. In all cases, we re-allow further reviews after a brief timeout.

Please see our FAQ for further information.

ℹ️ Review info
⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: ASSERTIVE

Plan: Pro

Run ID: b0cf6212-5ece-4510-a577-52f0f3373a70

📥 Commits

Reviewing files that changed from the base of the PR and between 82d0ff1 and f21b561.

📒 Files selected for processing (3)
  • README.md
  • index.html
  • src/social-share-button-solid.jsx

Walkthrough

Introduces a new Solid.js wrapper component for SocialShareButton in src/social-share-button-solid.jsx. The component handles client-only initialization using onMount with an SSR guard, manages lifecycle with onCleanup for cleanup, and applies reactive prop updates via createEffect to forward changes to the external SocialShareButton instance.

Changes

Cohort / File(s) Summary
Solid.js Wrapper Component
src/social-share-button-solid.jsx
New Solid.js wrapper providing SSR-safe client-only initialization, reactive prop binding to external SocialShareButton via updateOptions(), and lifecycle management with component cleanup.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~12 minutes

Possibly related PRs

  • Social share button #1 — Appears to be the core React wrapper implementation that this Solid.js wrapper mirrors in structure and lifecycle patterns.

Suggested reviewers

  • Zahnentferner

Poem

🐰 A Solid foundation so fine,
With SSR guards keeping time,
No hydration woes, just clean updates,
Reactive props flowing through gates,
Frameworks aligned, the sharing takes flight! ✨

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name Status Explanation Resolution
Linked Issues check ⚠️ Warning While the wrapper component is implemented correctly, the PR does not complete several critical objectives: index.html lacks a Solid.js integration section with code snippets, copy-to-clipboard buttons are absent, and README is not updated to list Solid.js as a supported framework. Add a '⚡ Solid.js Integration' section to index.html with example code, copy-to-clipboard buttons, and update README to list Solid.js as a supported framework.
✅ Passed checks (4 passed)
Check name Status Explanation
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Title check ✅ Passed The title 'feat: add Solid.js wrapper component' is clear, concise, and directly describes the primary change introduced in this pull request.
Out of Scope Changes check ✅ Passed The single file added (src/social-share-button-solid.jsx) is directly aligned with the primary objective of creating a Solid.js wrapper component; no out-of-scope changes detected.
Docstring Coverage ✅ Passed Docstring coverage is 100.00% which is sufficient. The required threshold is 80.00%.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.

✨ Finishing Touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests
📝 Coding Plan
  • Generate coding plan for human review comments

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands and usage tips.

Copy link
Copy Markdown
Contributor

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 1

🧹 Nitpick comments (1)
src/social-share-button-solid.jsx (1)

38-55: Consider adding showButton prop and extracting options builder to reduce duplication.

  1. The base library supports a showButton option (defaults to true), which isn't exposed here—inconsistent with the comprehensive prop forwarding for other options.

  2. This options object is duplicated in createEffect (lines 85-101). Extract to a shared helper to maintain DRY.

♻️ Proposed refactor
+  /**
+   * Builds the options object for SocialShareButton, applying defaults.
+   * `@returns` {Object} Options to pass to the SocialShareButton constructor or updateOptions
+   */
   const buildOptions = () => ({
     container,
     url: currentUrl(),
     title: currentTitle(),
     description: props.description ?? '',
     hashtags: props.hashtags ?? [],
     via: props.via ?? '',
     platforms: props.platforms ?? defaultPlatforms,
     theme: props.theme ?? 'dark',
     buttonText: props.buttonText ?? 'Share',
     customClass: props.customClass ?? '',
     buttonColor: props.buttonColor ?? '',
     buttonHoverColor: props.buttonHoverColor ?? '',
     onShare: props.onShare ?? null,
     onCopy: props.onCopy ?? null,
+    showButton: props.showButton ?? true,
     buttonStyle: props.buttonStyle ?? 'default',
     modalPosition: props.modalPosition ?? 'center',
   });

Then reuse in createEffect:

   createEffect(() => {
     if (shareButton) {
-      shareButton.updateOptions({
-        url: currentUrl(),
-        // ... duplicated options
-      });
+      const { container: _, ...updateOpts } = buildOptions();
+      shareButton.updateOptions(updateOpts);
     }
   });

Based on learnings: "Flag any newly added or modified function that lacks a descriptive comment explaining what it does."

🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.

In `@src/social-share-button-solid.jsx` around lines 38 - 55, Add support for the
library's showButton option and DRY the duplicated options creation by
extracting the options object builder into a single helper (e.g., replace the
inline buildOptions and the duplicate options in createEffect with a shared
function like buildShareOptions(container, props, currentUrl, currentTitle));
include showButton: props.showButton ?? true in that builder and update both the
original buildOptions usage and the createEffect to call the new helper; also
add a brief descriptive comment above the new helper explaining its purpose and
parameters so the new/modified function is documented.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.

Inline comments:
In `@src/social-share-button-solid.jsx`:
- Around line 68-77: The polling loop for loading window.SocialShareButton
(intervalId) can run indefinitely; modify the initialization in the component
(the setInterval block that constructs new
window.SocialShareButton(buildOptions())) to implement a max-retry or timeout:
add a retry counter or deadline, increment/check it each tick, and if exceeded
clearInterval(intervalId), avoid constructing shareButton, and optionally call a
fallback or log a warning/error; also ensure onCleanup still clears intervalId
in the cleanup path.

---

Nitpick comments:
In `@src/social-share-button-solid.jsx`:
- Around line 38-55: Add support for the library's showButton option and DRY the
duplicated options creation by extracting the options object builder into a
single helper (e.g., replace the inline buildOptions and the duplicate options
in createEffect with a shared function like buildShareOptions(container, props,
currentUrl, currentTitle)); include showButton: props.showButton ?? true in that
builder and update both the original buildOptions usage and the createEffect to
call the new helper; also add a brief descriptive comment above the new helper
explaining its purpose and parameters so the new/modified function is
documented.

ℹ️ Review info
⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 4070ee05-c2e5-40f9-a456-2610ca178947

📥 Commits

Reviewing files that changed from the base of the PR and between 769d952 and 82d0ff1.

📒 Files selected for processing (1)
  • src/social-share-button-solid.jsx

@kpj2006
Copy link
Copy Markdown
Contributor

kpj2006 commented Mar 10, 2026

@aashnaachaudhary10 create a short demo video that demonstrates how to integrate the Qwik / QwikCity framework with our social-share-button so that other developers can easily follow the setup.

Requirements:

Follow the integration guide added in your PR(or show if already present in README or docs section).

Show the setup inside the codebase( show what code you have added)

Demonstrate the button rendering on localhost.

Add the public video link to the README demo section.

Notes:

Use any repository from our org (except this repo) or an external repo (org repo preferred).

Duration <= 150 seconds.

Upload the video to Drive or any platform with public access (we’ll later upload it to AOSSIE YouTube).

Reference Demo (Next.js App Router):
https://youtu.be/cLJaT-8rEvQ?si=CLipA0Db4WL0EqKM

this Social-share-button is also a small part of potential idea for GSOC 2026 (https://github.com/AOSSIE-Org/Info/blob/main/GSoC-Ideas/2026/SEO.md) that's why we need tutorials for devs for demonstrating button's functionality.

this is i have wrote for @aashnaachaudhary10 , just change Qwik / QwikCity framework to your one (Solid.js framework)

@github-actions
Copy link
Copy Markdown

⚠️ This PR has merge conflicts.

Please resolve the merge conflicts before review.

Your PR will only be reviewed by a maintainer after all conflicts have been resolved.

📺 Watch this video to understand why conflicts occur and how to resolve them:
https://www.youtube.com/watch?v=Sqsz1-o7nXk

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

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

2 participants