feat(remix): add SSR-safe Remix wrapper component and demo section#110
feat(remix): add SSR-safe Remix wrapper component and demo section#110Muneerali199 wants to merge 3 commits intoAOSSIE-Org:mainfrom
Conversation
WalkthroughAdds Remix support: a new SSR-safe React wrapper component, updates demo page and README with Remix integration instructions, and applies formatting/analytics option changes across several source and doc files. Changes
Sequence Diagram(s)sequenceDiagram
participant React as React Component
participant EffectMount as Mount useEffect
participant Window as Browser (window)
participant Widget as SocialShareButton (vanilla)
participant EffectUpdate as Update useEffect
participant DOM as Container DOM
React->>EffectMount: mounts
EffectMount->>Window: check typeof window !== 'undefined'
Window-->>EffectMount: available
EffectMount->>Widget: new SocialShareButton({container: DOM, ...props})
Widget->>DOM: attach UI
React->>EffectUpdate: props change
EffectUpdate->>Widget: updateOptions(newProps)
Widget->>DOM: update UI
React->>EffectMount: unmounts
EffectMount->>Widget: destroy()
Widget->>DOM: cleanup
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes Possibly related PRs
Suggested labels
Suggested reviewers
Poem
🚥 Pre-merge checks | ✅ 3 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (3 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. Important Merge conflicts detected (Beta)
✨ Finishing Touches🧪 Generate unit tests (beta)
📝 Coding Plan
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. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 6
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
index.html (1)
424-426:⚠️ Potential issue | 🟡 MinorRemove nested
<code>tags — invalid HTML.There are two
<code>opening tags here but only one closing tag, resulting in malformed HTML. The outer<code>tag should be removed.Proposed fix
<code> -<code>import SocialShareButton from 'social-share-button'; +import SocialShareButton from 'social-share-button';🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@index.html` around lines 424 - 426, The HTML has nested/duplicate <code> tags around the import statement causing malformed markup; remove the extra opening <code> so there is only a single matching <code>...</code> pair surrounding "import SocialShareButton from 'social-share-button';" (i.e., delete the outer/extra <code> tag to ensure tags are balanced).
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@index.html`:
- Around line 474-475: The second copy button element (button with class
"copy-btn" and aria-label "Copy code") is missing an explicit type attribute;
update that button to include type="button" so it doesn't default to submit in
forms and to match the other copy button's behavior.
- Around line 453-454: The copy button currently lacks a type attribute so it
defaults to type="submit" and can unintentionally submit forms; update the
<button class="copy-btn"> element (selector: copy-btn) to include type="button"
so clicking it won't trigger form submission and retains existing aria-label and
behavior.
- Line 459: The HTML contains an unescaped '>' inside a code fragment for the
line "export const links: LinksFunction = () => [", which breaks markup
validity; update the code block so the greater-than character in the type
annotation is escaped as > (i.e., render "LinksFunction" or escape any
literal '>' in the snippet), locating the snippet where "export const links" and
"LinksFunction" appear and replace the raw '>' with ">" so the HTML is valid
while preserving the displayed code.
In `@README.md`:
- Around line 711-756: The Remix integration <details> block is currently placed
under Troubleshooting instead of the Quick Start Guide; move the entire Remix
<details> block (the content that includes the app/root.tsx links example, the
CDN <script> snippet, and the social-share-button-remix.jsx usage example) into
the Quick Start Guide where the other framework sections (Create React App,
Next.js, Vite/Vue/Angular) live so ordering is consistent; after moving, verify
the surrounding headings and any table-of-contents entries reflect the new
placement and update them if necessary.
In `@src/social-share-button-remix.jsx`:
- Around line 81-98: The updateOptions call in the useEffect uses raw props and
can pass empty strings for url/title; compute fallback values (e.g., currentUrl
= url || window.location.href and currentTitle = title || document.title)
outside the effect (like in the React wrapper) and then pass currentUrl and
currentTitle into shareButtonRef.current.updateOptions instead of url and title
so the same fallbacks used during initialization are applied on prop updates.
- Around line 30-44: The Remix SocialShareButton component is missing analytics
props present in the React wrapper; update the SocialShareButton function
signature to accept analytics, onAnalytics, analyticsPlugins, componentId, and
debug (in addition to existing props like url, title, etc.), thread them through
to wherever props are forwarded (e.g., the internal share button/rendering
component or props spread) so the core library receives them, and ensure default
values (e.g., analytics = null, onAnalytics = null, analyticsPlugins = [],
componentId = undefined, debug = false) are provided and passed along
consistently from the SocialShareButton export.
---
Outside diff comments:
In `@index.html`:
- Around line 424-426: The HTML has nested/duplicate <code> tags around the
import statement causing malformed markup; remove the extra opening <code> so
there is only a single matching <code>...</code> pair surrounding "import
SocialShareButton from 'social-share-button';" (i.e., delete the outer/extra
<code> tag to ensure tags are balanced).
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Path: .coderabbit.yaml
Review profile: ASSERTIVE
Plan: Pro
Run ID: bb916036-2e95-40ad-ad38-f25d2b8f9c36
📒 Files selected for processing (3)
README.mdindex.htmlsrc/social-share-button-remix.jsx
There was a problem hiding this comment.
Actionable comments posted: 6
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In @.github/copilot/integrate-social-share-button.prompt.md:
- Around line 69-72: The CDN link in the <link
href="https://cdn.jsdelivr.net/gh/AOSSIE-Org/SocialShareButton@v1.0.3/src/social-share-button.css"
/> reference pins to `@v1.0.3` which predates the new wrapper/API guidance; update
the version token (e.g., bump to the new release tag or use `@latest/unpinned`)
and apply the same change to any matching JS CDN URLs and repeated examples in
.github/copilot/integrate-social-share-button.prompt.md so all occurrences of
SocialShareButton@v1.0.3 (and the social-share-button.css/js references)
consistently point to the correct release.
In `@index.html`:
- Line 425: Update the import so the React snippet references the actual npm
package used by this repo: replace the import source 'social-share-button' with
'social-share-button-aossie' where SocialShareButton is imported (the import
line that reads "import SocialShareButton from 'social-share-button'"); ensure
any related examples/docs consistently use the 'social-share-button-aossie'
package name.
- Around line 447-448: The Remix docs instruct users to copy
src/social-share-button-remix.jsx but the file isn't published or linked; update
the Remix section to provide a direct raw GitHub URL to the wrapper (e.g., raw
content link for src/social-share-button-remix.jsx), replace the broken npm CDN
CSS URL
(https://cdn.jsdelivr.net/npm/social-share-button/dist/social-share-button.css)
with the working GitHub CDN URL used elsewhere in the docs, and add a short note
telling users to download/copy the wrapper from that raw GitHub URL rather than
assuming it exists in older npm releases; search for the Remix block referencing
src/social-share-button-remix.jsx and the CSS URL strings to make these edits.
In `@README.md`:
- Around line 453-454: Update the README step that says "Copy
`src/social-share-button-remix.jsx`" to include an explicit source URL and a
short note that the file is not yet in a release; specifically reference the
filename `social-share-button-remix.jsx` and add the raw GitHub repository URL
(https://raw.githubusercontent.com/AOSSIE-Org/SocialShareButton/main/src/social-share-button-remix.jsx)
as the acquisition link plus a one-line advisory like "Until the next release
tag includes this file, download it from the repository source URL above."
In `@src/social-share-button-remix.jsx`:
- Line 44: Update the Remix wrapper so its analytics default matches core/React
by changing the prop default from analytics = false to analytics = true in the
SocialShareButtonRemix component (or the function signature where "analytics" is
declared), ensuring emitted events remain enabled by default like the other
wrappers.
In `@src/social-share-button.js`:
- Around line 733-735: Replace the empty catch blocks in the _emit() function
with calls to the centralized debug helper: catch (err) {
this._debugWarn("analytics delivery failed in _emit()", err); } — do this for
all occurrences mentioned (the current empty catch and the other two similar
blocks) so errors are non-fatal but logged under debug using the
_debugWarn(message, err) pattern and keep the original control flow.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Path: .coderabbit.yaml
Review profile: ASSERTIVE
Plan: Pro
Run ID: 6057afba-eabd-4d32-be00-4e86a2cd9bba
📒 Files selected for processing (11)
.github/copilot/integrate-analytics.prompt.md.github/copilot/integrate-social-share-button.prompt.mdREADME.mddocs/client-guide.mdeslint.config.jsindex.htmlsrc/social-share-analytics.jssrc/social-share-button-react.jsxsrc/social-share-button-remix.jsxsrc/social-share-button.csssrc/social-share-button.js
| <link | ||
| rel="stylesheet" | ||
| href="https://cdn.jsdelivr.net/gh/AOSSIE-Org/SocialShareButton@v1.0.3/src/social-share-button.css" | ||
| /> |
There was a problem hiding this comment.
Update CDN version references to match newly documented capabilities.
Line 71 still pins to @v1.0.3. This PR adds new wrapper/API guidance, so users can follow the prompt but load an older CDN snapshot missing those additions.
🔧 Suggested adjustment
- href="https://cdn.jsdelivr.net/gh/AOSSIE-Org/SocialShareButton@v1.0.3/src/social-share-button.css"
+ href="https://cdn.jsdelivr.net/gh/AOSSIE-Org/SocialShareButton@main/src/social-share-button.css"Apply the same versioning strategy consistently to the JS URL and all repeated CDN examples, or update to a new release tag once published.
Based on learnings: new wrapper files added in a PR are not part of any CDN release until the next version tag is cut, so references to predating tags should be avoided for new integration guidance.
📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| <link | |
| rel="stylesheet" | |
| href="https://cdn.jsdelivr.net/gh/AOSSIE-Org/SocialShareButton@v1.0.3/src/social-share-button.css" | |
| /> | |
| <link | |
| rel="stylesheet" | |
| href="https://cdn.jsdelivr.net/gh/AOSSIE-Org/SocialShareButton@main/src/social-share-button.css" | |
| /> |
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In @.github/copilot/integrate-social-share-button.prompt.md around lines 69 -
72, The CDN link in the <link
href="https://cdn.jsdelivr.net/gh/AOSSIE-Org/SocialShareButton@v1.0.3/src/social-share-button.css"
/> reference pins to `@v1.0.3` which predates the new wrapper/API guidance; update
the version token (e.g., bump to the new release tag or use `@latest/unpinned`)
and apply the same change to any matching JS CDN URLs and repeated examples in
.github/copilot/integrate-social-share-button.prompt.md so all occurrences of
SocialShareButton@v1.0.3 (and the social-share-button.css/js references)
consistently point to the correct release.
| <span class="copy-status" aria-live="polite" style="position:absolute; left:-9999px;"></span> | ||
| <code> | ||
| <code>import SocialShareButton from 'social-share-button'; | ||
| import SocialShareButton from 'social-share-button'; |
There was a problem hiding this comment.
🧩 Analysis chain
🏁 Script executed:
#!/bin/bash
set -euo pipefail
for pkg in social-share-button social-share-button-aossie; do
echo "=== $pkg ==="
curl -s "https://registry.npmjs.org/${pkg}" | jq -r '.name, ."dist-tags".latest'
echo
doneRepository: AOSSIE-Org/SocialShareButton
Length of output: 195
🏁 Script executed:
#!/bin/bash
# Check the repository's package.json for the npm package name
cat package.json | head -30Repository: AOSSIE-Org/SocialShareButton
Length of output: 962
🏁 Script executed:
#!/bin/bash
# Read index.html around line 425 to understand the context
sed -n '420,430p' index.htmlRepository: AOSSIE-Org/SocialShareButton
Length of output: 437
🏁 Script executed:
#!/bin/bash
# Check README or documentation for any references to the npm package name
grep -n "social-share-button" README.md | head -20Repository: AOSSIE-Org/SocialShareButton
Length of output: 1988
Use the correct npm package name in the React snippet.
Line 425 imports from 'social-share-button', but this repository's npm package is social-share-button-aossie. This can make users install the wrong library.
💡 Proposed doc fix
-import SocialShareButton from 'social-share-button';
+import SocialShareButton from 'social-share-button-aossie';📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| import SocialShareButton from 'social-share-button'; | |
| import SocialShareButton from 'social-share-button-aossie'; |
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@index.html` at line 425, Update the import so the React snippet references
the actual npm package used by this repo: replace the import source
'social-share-button' with 'social-share-button-aossie' where SocialShareButton
is imported (the import line that reads "import SocialShareButton from
'social-share-button'"); ensure any related examples/docs consistently use the
'social-share-button-aossie' package name.
| Copy <code style="background:rgba(0,0,0,0.3);padding:2px 6px;border-radius:4px;">src/social-share-button-remix.jsx</code> | ||
| into your project and follow the steps below. |
There was a problem hiding this comment.
🧩 Analysis chain
🏁 Script executed:
#!/bin/bash
set -euo pipefail
urls=(
"https://cdn.jsdelivr.net/npm/social-share-button/dist/social-share-button.css"
"https://cdn.jsdelivr.net/npm/social-share-button/dist/social-share-button.js"
"https://cdn.jsdelivr.net/gh/AOSSIE-Org/SocialShareButton@v1.0.3/src/social-share-button.css"
"https://cdn.jsdelivr.net/gh/AOSSIE-Org/SocialShareButton@v1.0.3/src/social-share-button.js"
"https://cdn.jsdelivr.net/gh/AOSSIE-Org/SocialShareButton@v1.0.3/src/social-share-button-remix.jsx"
"https://raw.githubusercontent.com/AOSSIE-Org/SocialShareButton/main/src/social-share-button-remix.jsx"
)
for u in "${urls[@]}"; do
printf "%s -> " "$u"
curl -s -o /dev/null -w "%{http_code}\n" "$u"
doneRepository: AOSSIE-Org/SocialShareButton
Length of output: 651
🏁 Script executed:
# First, let's check the index.html content at the specified lines
head -n 475 index.html | tail -n 50 | cat -nRepository: AOSSIE-Org/SocialShareButton
Length of output: 2433
🏁 Script executed:
# Also check if the remix wrapper file exists and where
find . -name "*remix*" -type fRepository: AOSSIE-Org/SocialShareButton
Length of output: 107
🏁 Script executed:
# List git tags to understand versioning
git tag --list | head -20Repository: AOSSIE-Org/SocialShareButton
Length of output: 54
🏁 Script executed:
# Check package.json for version info
cat package.json | jq '.version, .name'Repository: AOSSIE-Org/SocialShareButton
Length of output: 108
🏁 Script executed:
# Check recent commits related to remix
git log --oneline --all -20 | head -20Repository: AOSSIE-Org/SocialShareButton
Length of output: 1327
🏁 Script executed:
# Check when remix.jsx was added
git log --oneline --all -- src/social-share-button-remix.jsx | head -5Repository: AOSSIE-Org/SocialShareButton
Length of output: 144
🏁 Script executed:
# Try to check what's in npm registry
npm view social-share-button versions --json 2>/dev/null | jq '.' | tail -20Repository: AOSSIE-Org/SocialShareButton
Length of output: 206
🏁 Script executed:
# Let's check the actual commit that added remix.jsx
git log --format="%h %ai %s" --all -- src/social-share-button-remix.jsxRepository: AOSSIE-Org/SocialShareButton
Length of output: 170
🏁 Script executed:
# Check if remix.jsx is in HEAD/main
git show HEAD:src/social-share-button-remix.jsx | head -20Repository: AOSSIE-Org/SocialShareButton
Length of output: 877
🏁 Script executed:
# Check git branches to see where remix.jsx exists
git branch -a --contains src/social-share-button-remix.jsx 2>/dev/null || echo "File search failed"Repository: AOSSIE-Org/SocialShareButton
Length of output: 90
🏁 Script executed:
# Verify the exact CDN URL format used elsewhere in index.html
grep -n "cdn.jsdelivr" index.htmlRepository: AOSSIE-Org/SocialShareButton
Length of output: 293
🏁 Script executed:
# Check all git tags to see if any include remix.jsx
git tag -l --contains HEAD | head -5Repository: AOSSIE-Org/SocialShareButton
Length of output: 54
🏁 Script executed:
# Check if remix exists on any recent branch
git ls-remote origin | grep -E 'refs/(heads|tags)' | head -10Repository: AOSSIE-Org/SocialShareButton
Length of output: 326
🏁 Script executed:
# Try to find working raw.githubusercontent URL patterns in the repo docs
grep -r "raw.githubusercontent\|github.com/.*blob" . --include="*.html" --include="*.md" 2>/dev/null | head -5Repository: AOSSIE-Org/SocialShareButton
Length of output: 339
🏁 Script executed:
# Check dist/ or build artifacts for remix
find ./dist -name "*remix*" 2>/dev/null || echo "No dist artifacts found"Repository: AOSSIE-Org/SocialShareButton
Length of output: 95
🏁 Script executed:
# Verify main branch has remix.jsx by checking the actual branch
git show main:src/social-share-button-remix.jsx | head -10Repository: AOSSIE-Org/SocialShareButton
Length of output: 153
🏁 Script executed:
# Check the exact state: does remix.jsx appear in main branch?
git log main -- src/social-share-button-remix.jsxRepository: AOSSIE-Org/SocialShareButton
Length of output: 54
🏁 Script executed:
# Double-check what files are actually available at v1.0.3
git ls-tree -r --name-only v1.0.3 | grep remixRepository: AOSSIE-Org/SocialShareButton
Length of output: 109
🏁 Script executed:
# Check git status to see if remix.jsx is uncommitted
git status src/social-share-button-remix.jsxRepository: AOSSIE-Org/SocialShareButton
Length of output: 137
🏁 Script executed:
# Check all branches to find where remix.jsx actually is
for branch in $(git branch -a | grep -v HEAD); do
if git show "$branch:src/social-share-button-remix.jsx" &>/dev/null; then
echo "Found in: $branch"
fi
doneRepository: AOSSIE-Org/SocialShareButton
Length of output: 54
🏁 Script executed:
# Verify current branch and its state
git branch -v && echo "---" && git status --short | head -10Repository: AOSSIE-Org/SocialShareButton
Length of output: 378
🏁 Script executed:
# Check the actual HEAD commit
git log -1 --format="%H %ai %s"Repository: AOSSIE-Org/SocialShareButton
Length of output: 203
🏁 Script executed:
# Check what the actual main branch has
git show main:src/ 2>/dev/null | grep -i remix || echo "No remix in main"Repository: AOSSIE-Org/SocialShareButton
Length of output: 88
🏁 Script executed:
# Determine the context: is this a PR adding remix for the first time?
git log --oneline main..HEAD 2>/dev/null | head -10 || echo "No commits"Repository: AOSSIE-Org/SocialShareButton
Length of output: 144
🏁 Script executed:
# Check if there's a commit history showing when remix was added
git log --all --oneline -- src/social-share-button-remix.jsxRepository: AOSSIE-Org/SocialShareButton
Length of output: 144
🏁 Script executed:
# Compare main vs current state
git diff main HEAD -- src/social-share-button-remix.jsx | head -20Repository: AOSSIE-Org/SocialShareButton
Length of output: 907
🏁 Script executed:
# Verify the learnings context by checking if there are other wrapper examples documented
grep -n "social-share-button.*\.jsx\|social-share-button.*\.tsx" index.html | head -10Repository: AOSSIE-Org/SocialShareButton
Length of output: 205
Remix integration docs are missing a working acquisition URL for the new wrapper file.
The Remix section (line 447) instructs to "Copy src/social-share-button-remix.jsx" but provides no link to the source. The wrapper file does not exist in the main branch or in published npm releases, so users cannot follow this instruction.
Additionally, line 462 references https://cdn.jsdelivr.net/npm/social-share-button/dist/social-share-button.css, which returns 404. The CSS is available via GitHub CDN but not the npm CDN.
Update the Remix section to:
- Link directly to the wrapper source file on GitHub (e.g., raw content URL pointing to the current branch)
- Use consistent CDN URLs (GitHub CDN pattern like other framework examples, or npm if the build artifacts exist there)
- Clarify that users should download/copy the wrapper from the provided URL, not assume it's in older releases
Also applies to: lines 462–469
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@index.html` around lines 447 - 448, The Remix docs instruct users to copy
src/social-share-button-remix.jsx but the file isn't published or linked; update
the Remix section to provide a direct raw GitHub URL to the wrapper (e.g., raw
content link for src/social-share-button-remix.jsx), replace the broken npm CDN
CSS URL
(https://cdn.jsdelivr.net/npm/social-share-button/dist/social-share-button.css)
with the working GitHub CDN URL used elsewhere in the docs, and add a short note
telling users to download/copy the wrapper from that raw GitHub URL rather than
assuming it exists in older npm releases; search for the Remix block referencing
src/social-share-button-remix.jsx and the CSS URL strings to make these edits.
| ### Step 2: Copy `src/social-share-button-remix.jsx` into your project and use it in a route | ||
|
|
There was a problem hiding this comment.
🧩 Analysis chain
🏁 Script executed:
#!/bin/bash
set -euo pipefail
latest_tag=$(curl -s "https://api.github.com/repos/AOSSIE-Org/SocialShareButton/tags?per_page=1" | jq -r '.[0].name')
echo "Latest tag: ${latest_tag}"
for ref in "v1.0.3" "${latest_tag}" "main"; do
url="https://raw.githubusercontent.com/AOSSIE-Org/SocialShareButton/${ref}/src/social-share-button-remix.jsx"
printf "%s -> " "$url"
curl -s -o /dev/null -w "%{http_code}\n" "$url"
doneRepository: AOSSIE-Org/SocialShareButton
Length of output: 421
🏁 Script executed:
# Check if the Remix wrapper file exists anywhere in the repo
find . -name "*remix*" -type f 2>/dev/null | head -20Repository: AOSSIE-Org/SocialShareButton
Length of output: 107
🏁 Script executed:
# Check README.md line count and read the actual content around lines 453-454
wc -l README.md && echo "---" && sed -n '450,480p' README.mdRepository: AOSSIE-Org/SocialShareButton
Length of output: 917
🏁 Script executed:
# Check if there are other wrapper files documented in README
rg "social-share-button.*\.jsx" README.md -A 2 -B 2Repository: AOSSIE-Org/SocialShareButton
Length of output: 328
🏁 Script executed:
# Check what other wrapper/build files exist in src/
ls -la src/ | grep -E "\.(js|jsx|ts|tsx)$"Repository: AOSSIE-Org/SocialShareButton
Length of output: 384
🏁 Script executed:
# Verify the raw GitHub URL is actually accessible now
curl -s -I "https://raw.githubusercontent.com/AOSSIE-Org/SocialShareButton/main/src/social-share-button-remix.jsx" | head -5Repository: AOSSIE-Org/SocialShareButton
Length of output: 265
🏁 Script executed:
# Check if the Remix file is newly added (not yet in main)
git log --oneline src/social-share-button-remix.jsx 2>/dev/null || echo "File not in main branch history"Repository: AOSSIE-Org/SocialShareButton
Length of output: 144
🏁 Script executed:
# Check git status of the file
git status src/social-share-button-remix.jsxRepository: AOSSIE-Org/SocialShareButton
Length of output: 137
🏁 Script executed:
# Look at React wrapper documentation in README for comparison
rg -A 15 "React Wrapper Component" README.mdRepository: AOSSIE-Org/SocialShareButton
Length of output: 491
Add explicit acquisition instructions for the new social-share-button-remix.jsx wrapper.
Line 453 instructs users to "Copy src/social-share-button-remix.jsx" but provides no direct source link or download path. Users need a concrete way to obtain this file.
Suggested fix
### Step 2: Copy `src/social-share-button-remix.jsx` into your project and use it in a route
+
+Download from:
+```
+https://raw.githubusercontent.com/AOSSIE-Org/SocialShareButton/main/src/social-share-button-remix.jsx
+```
+
+> Until the next release tag includes this file, use the repository source URL above.This aligns with the library's pattern: new wrapper files are not included in versioned releases, so acquisition instructions must be explicit and point to the repository source.
📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| ### Step 2: Copy `src/social-share-button-remix.jsx` into your project and use it in a route | |
| ### Step 2: Copy `src/social-share-button-remix.jsx` into your project and use it in a route | |
| Download from: |
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@README.md` around lines 453 - 454, Update the README step that says "Copy
`src/social-share-button-remix.jsx`" to include an explicit source URL and a
short note that the file is not yet in a release; specifically reference the
filename `social-share-button-remix.jsx` and add the raw GitHub repository URL
(https://raw.githubusercontent.com/AOSSIE-Org/SocialShareButton/main/src/social-share-button-remix.jsx)
as the acquisition link plus a one-line advisory like "Until the next release
tag includes this file, download it from the repository source URL above."
| onCopy = null, | ||
| buttonStyle = 'default', | ||
| modalPosition = 'center', | ||
| analytics = false, |
There was a problem hiding this comment.
Align the Remix wrapper analytics default with the core/React defaults.
Line 44 sets analytics = false, which disables all event emission by default only in Remix. Core and React wrappers default this to enabled.
🔧 Proposed fix
- analytics = false,
+ analytics = true,🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@src/social-share-button-remix.jsx` at line 44, Update the Remix wrapper so
its analytics default matches core/React by changing the prop default from
analytics = false to analytics = true in the SocialShareButtonRemix component
(or the function signature where "analytics" is declared), ensuring emitted
events remain enabled by default like the other wrappers.
| } catch (_) { | ||
| // ignore | ||
| } |
There was a problem hiding this comment.
Don’t silently swallow analytics delivery errors in _emit().
These catch blocks hide integration failures completely. Keep analytics non-fatal, but emit debug-gated warnings via a single helper.
🔧 Proposed fix
+ _debugWarn(message, err) {
+ if (!this.options.debug) return;
+ // eslint-disable-next-line no-console
+ console.warn(`[SocialShareButton Analytics] ${message}`, err);
+ }
// Path 1 — DOM CustomEvent (framework-agnostic, CDN-friendly)
if (typeof window !== 'undefined' && typeof CustomEvent !== 'undefined') {
try {
const domEvent = new CustomEvent('social-share', {
bubbles: true,
cancelable: false,
composed: true,
detail: payload,
});
const el = this._getContainer();
(el || document).dispatchEvent(domEvent);
- } catch (_) {
- // ignore
+ } catch (err) {
+ this._debugWarn('CustomEvent dispatch failed.', err);
}
}
if (typeof this.options.onAnalytics === 'function') {
try {
this.options.onAnalytics(payload);
- } catch (_) {
- // ignore
+ } catch (err) {
+ this._debugWarn('onAnalytics callback failed.', err);
}
}
if (Array.isArray(this.options.analyticsPlugins)) {
for (const plugin of this.options.analyticsPlugins) {
if (plugin && typeof plugin.track === 'function') {
try {
plugin.track(payload);
- } catch (_) {
- // ignore
+ } catch (err) {
+ this._debugWarn('analytics plugin track() failed.', err);
}
}
}
}Based on learnings: empty catch blocks in _emit() should be replaced with debug-conditional warnings, and a centralized _debugWarn(message, err) helper is the approved pattern.
Also applies to: 742-744, 753-755
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@src/social-share-button.js` around lines 733 - 735, Replace the empty catch
blocks in the _emit() function with calls to the centralized debug helper: catch
(err) { this._debugWarn("analytics delivery failed in _emit()", err); } — do
this for all occurrences mentioned (the current empty catch and the other two
similar blocks) so errors are non-fatal but logged under debug using the
_debugWarn(message, err) pattern and keep the original control flow.
|
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: |
1 participant
Summary
Closes #55
Adds Remix framework support for SocialShareButton.
Changes
src/social-share-button-remix.jsx— New Remix-compatible React component that:window.SocialShareButtoninsideuseEffectwith antypeof window !== 'undefined'SSR guard (Remix always server-renders; no'use client'directive exists)destroy()on unmount to prevent memory leaksupdateOptions()in a second effect whenever props change, keeping the button in sync with route navigation without re-mountingindex.html— New🎸 Remix Integrationdemo section with two copy-to-clipboard code blocks (step 1: load CSS/JS inapp/root.tsx; step 2: use the component in a route)README.md— New<details>block listing Remix as a supported framework with full copy-paste snippetScreenshots / Recordings
Checklist
AI Usage Disclosure
GitHub Copilot / OpenCode assisted with code generation and formatting. All logic was reviewed and validated manually.
Summary by CodeRabbit
New Features
Documentation
Bug Fixes / UX