feat: add SvelteKit wrapper and documentation#123
feat: add SvelteKit wrapper and documentation#123Divine-P-77777 wants to merge 3 commits intoAOSSIE-Org:mainfrom
Conversation
WalkthroughAdds SvelteKit integration: a new Svelte wrapper component ( Changes
Sequence Diagram(s)sequenceDiagram
participant SvelteKit as SvelteKit App
participant Comp as SocialShare Svelte Component
participant WindowLib as window.SocialShareButton
participant DOM as Container (DOM)
SvelteKit->>Comp: Render component (client)
Comp->>WindowLib: typeof window !== 'undefined' check
alt library present
Comp->>WindowLib: new SocialShareButton({container: DOM, options...})
WindowLib-->>Comp: instance created
end
Note right of Comp: Reactive prop changes (route nav / prop updates)
Comp->>WindowLib: instance.updateOptions(newOptions)
SvelteKit->>Comp: Component destroyed (route change/unmount)
Comp->>WindowLib: instance.destroy()
WindowLib-->>Comp: cleaned up
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes Possibly related PRs
Suggested labels
Suggested reviewers
Poem
🚥 Pre-merge checks | ✅ 4✅ Passed checks (4 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
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: 5
🤖 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 506-519: The docs show conflicting workflows: Step 1 uses CDN in
app.html while Step 2 imports the Svelte wrapper via npm path
(social-share-button-aossie/src/social-share-button-svelte.svelte) and
SocialShareButton, causing confusion; update the documentation to present two
clear, exclusive options: 1) npm workflow—replace the CDN step with a single
instruction to run npm install social-share-button-aossie and show importing
SocialShareButton from the package path in +page.svelte, or 2) CDN-only
workflow—keep the app.html CDN includes and remove the npm import, instead
document how to obtain or include the Svelte wrapper (download link or
alternative global wrapper usage) and show how to reference the globally loaded
library in +page.svelte; ensure references to SocialShareButton and
social-share-button-aossie are consistent with the chosen workflow.
- Around line 489-494: Update the CDN version tag referenced in the <link> and
<script> tags in index.html (and any matching references in README.md) to the
release tag that includes the new wrapper files instead of the currently
referenced `@v1.0.3/`@v1.0.4; then open package.json and add
"social-share-button-svelte.svelte" and "social-share-button-preact.jsx" to the
"files" array so those wrapper files are published to npm. Ensure you update
both index.html and README.md locations where the CDN URL appears and modify the
package.json "files" array to include the exact filenames above.
In `@README.md`:
- Around line 494-505: Update the CDN version in the HTML snippet so it points
to the next release that contains the new Svelte wrapper file (replace the
`@v1.0.3` in the href and src URLs for social-share-button.css and
social-share-button.js with the upcoming release tag that includes
social-share-button-svelte.svelte, e.g., `@v1.0.4`); also mirror the same version
bump in the other occurrence mentioned (index.html) to ensure the CDN serves the
new wrapper file.
- Around line 509-521: The README example imports
'social-share-button-aossie/src/social-share-button-svelte.svelte' which
requires installing the npm package; update the docs near the Svelte example to
either add an "Install via npm" step instructing the user to run npm install
social-share-button-aossie before importing SocialShareButton, or explicitly
document a CDN-only alternative (e.g., instructions to download/copy the
social-share-button-svelte.svelte file and adjust the import) so the import of
SocialShareButton is valid.
In `@src/social-share-button-svelte.svelte`:
- Around line 31-56: The onMount SSR guard currently skips initialization when
window.SocialShareButton is missing, leading to silent failure; update the
onMount block (where onMount, window.SocialShareButton, and shareButton are
referenced) to detect that case and emit a visible warning: log a console.warn
(or dispatch a custom "init-failed" event) explaining the CDN/library failed to
load and include helpful context (componentId, url, and debug flag) so consumers
can surface or log the failure for debugging; keep the current branch that
creates new window.SocialShareButton unchanged.
🪄 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: c5d96a25-8627-4e52-9ee3-84026c9b8382
📒 Files selected for processing (3)
README.mdindex.htmlsrc/social-share-button-svelte.svelte
… add console.warn for missing CDN, update npm workflow in docs
There was a problem hiding this comment.
Actionable comments posted: 2
♻️ Duplicate comments (2)
README.md (1)
504-510:⚠️ Potential issue | 🟠 MajorAlign README SvelteKit CDN links with the wrapper’s first released tag.
The README SvelteKit snippet still references
@v1.0.3; this should be updated to the release that actually shipssocial-share-button-svelte.svelte(and kept in sync withindex.html).Based on learnings: "new wrapper files ... are not part of any CDN release until the next version tag is cut."
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@README.md` around lines 504 - 510, Update the two CDN links in the README (the CSS href and the JS script tag that currently reference `@v1.0.3`) to the release tag that actually contains the new wrapper file social-share-button-svelte.svelte so they match the version used in index.html; locate the strings "https://cdn.jsdelivr.net/gh/AOSSIE-Org/SocialShareButton@v1.0.3/src/social-share-button.css" and "https://cdn.jsdelivr.net/gh/AOSSIE-Org/SocialShareButton@v1.0.3/src/social-share-button.js" and replace `@v1.0.3` with the correct release tag, ensuring both README and index.html use the identical tag.index.html (1)
492-494:⚠️ Potential issue | 🟠 MajorUpdate SvelteKit CDN docs to the first release that includes this wrapper.
The SvelteKit section still points to
@v1.0.3. That tag predates this wrapper addition, so these instructions can be inconsistent at release time.🔧 Suggested doc 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@v1.0.4/src/social-share-button.css" ... - src="https://cdn.jsdelivr.net/gh/AOSSIE-Org/SocialShareButton@v1.0.3/src/social-share-button.js" + src="https://cdn.jsdelivr.net/gh/AOSSIE-Org/SocialShareButton@v1.0.4/src/social-share-button.js"#!/bin/bash # Verify whether tag v1.0.3 contains the Svelte wrapper file. git tag -l "v1.0.3" git cat-file -e v1.0.3:src/social-share-button-svelte.svelte && echo "present" || echo "missing" rg -n "SocialShareButton@v1\\.0\\.3" index.html README.mdBased on learnings: "new wrapper files ... are not part of any CDN release until the next version tag is cut."
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@index.html` around lines 492 - 494, The docs point the SvelteKit CDN examples to the old tag "@v1.0.3" which predates the Svelte wrapper, causing broken/inconsistent instructions; update the CDN version to the first release that contains the wrapper (the tag that includes src/social-share-button-svelte.svelte) in the href and script references (look for the lines that include social-share-button.css and social-share-button.js) so the SvelteKit section references a tag that actually ships the wrapper file.
🤖 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-svelte.svelte`:
- Around line 7-26: Add full parity for the core options by exposing the missing
Svelte props: declare export let buttonColor, export let buttonHoverColor, and
export let showButton (with sensible defaults, e.g., '' for colors and true for
showButton) alongside the existing exported props (url, title, description,
hashtags, via, platforms, theme, buttonText, customClass, onShare, onCopy,
buttonStyle, modalPosition, analytics, onAnalytics, analyticsPlugins,
componentId, debug). Then propagate these new props into the component where the
core options are consumed (the same places that use theme/buttonStyle/etc.) so
the underlying core API or class receives
buttonColor/buttonHoverColor/showButton; ensure any reactive bindings, CSS
classes, or conditional rendering that depend on showButton are updated
accordingly and that debug/analytics still reflect these props.
- Around line 35-38: The console.warn inside the if (!window.SocialShareButton)
block is always emitted; gate it by the exported debug prop so warnings only
appear when debug is true. Update the conditional in the component that checks
window.SocialShareButton to wrap the console.warn call with if (debug) (keep the
existing return behavior unchanged). Reference: the exported prop debug (default
false) and the runtime check if (!window.SocialShareButton).
---
Duplicate comments:
In `@index.html`:
- Around line 492-494: The docs point the SvelteKit CDN examples to the old tag
"@v1.0.3" which predates the Svelte wrapper, causing broken/inconsistent
instructions; update the CDN version to the first release that contains the
wrapper (the tag that includes src/social-share-button-svelte.svelte) in the
href and script references (look for the lines that include
social-share-button.css and social-share-button.js) so the SvelteKit section
references a tag that actually ships the wrapper file.
In `@README.md`:
- Around line 504-510: Update the two CDN links in the README (the CSS href and
the JS script tag that currently reference `@v1.0.3`) to the release tag that
actually contains the new wrapper file social-share-button-svelte.svelte so they
match the version used in index.html; locate the strings
"https://cdn.jsdelivr.net/gh/AOSSIE-Org/SocialShareButton@v1.0.3/src/social-share-button.css"
and
"https://cdn.jsdelivr.net/gh/AOSSIE-Org/SocialShareButton@v1.0.3/src/social-share-button.js"
and replace `@v1.0.3` with the correct release tag, ensuring both README and
index.html use the identical tag.
🪄 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: a61edfa6-6c94-442a-ab9b-394ee7588988
📒 Files selected for processing (4)
README.mdindex.htmlpackage.jsonsrc/social-share-button-svelte.svelte
|
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: |
github-actions
bot
added
configuration
documentation
There was a problem hiding this comment.
♻️ Duplicate comments (2)
README.md (1)
505-510:⚠️ Potential issue | 🟠 MajorCDN version in SvelteKit docs still points to a pre-wrapper release.
At Line 505 and Line 510, the snippet still references
@v1.0.3. That tag predates this new Svelte wrapper addition, so users may follow docs that cannot provide the expected integration artifacts. Please update to the next release tag that includes this PR’s wrapper changes.Based on learnings: "In AOSSIE-Org/SocialShareButton, new wrapper files (e.g., src/social-share-button-preact.jsx) added in a PR are not part of any CDN release until the next version tag is cut. When reviewing PRs that add new wrapper/source files, flag any README or index.html CDN URLs that reference a version predating the new file, and check that acquisition instructions (CDN URL, npm, or download link) are provided for the new file itself."
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@README.md` around lines 505 - 510, Update the CDN version tag used for the SvelteKit example so it points to the release that includes the new Svelte wrapper instead of the pre-wrapper v1.0.3; specifically change both references to the CDN URLs that load src/social-share-button.css and src/social-share-button.js to the next release tag containing the wrapper (replace "@v1.0.3" with the correct release tag that includes the new wrapper files), and verify both the CSS and JS URLs load the wrapper-aware artifacts.index.html (1)
492-494:⚠️ Potential issue | 🟠 MajorSvelteKit demo snippet references a CDN tag that likely excludes this wrapper.
Line 492 and Line 494 still use
@v1.0.3. Since the Svelte wrapper is introduced in this PR, the docs should point to the release tag that actually contains it; otherwise the integration path in this section is misleading/broken for users.Based on learnings: "In AOSSIE-Org/SocialShareButton, new wrapper files (e.g., src/social-share-button-preact.jsx) added in a PR are not part of any CDN release until the next version tag is cut. When reviewing PRs that add new wrapper/source files, flag any README or index.html CDN URLs that reference a version predating the new file, and check that acquisition instructions (CDN URL, npm, or download link) are provided for the new file itself."
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@index.html` around lines 492 - 494, The CDN links in index.html (the href to social-share-button.css and the script src social-share-button.js) point to `@v1.0.3` which predates the new Svelte wrapper; update these URLs to a release tag that includes the new wrapper (or temporarily point them to the branch/main build that contains the new files) so the demo references the version that actually includes the Svelte wrapper — change the version segment in the two URLs (the `@v1.0.3` portion) to the correct release tag or branch name that contains the new wrapper files.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Duplicate comments:
In `@index.html`:
- Around line 492-494: The CDN links in index.html (the href to
social-share-button.css and the script src social-share-button.js) point to
`@v1.0.3` which predates the new Svelte wrapper; update these URLs to a release
tag that includes the new wrapper (or temporarily point them to the branch/main
build that contains the new files) so the demo references the version that
actually includes the Svelte wrapper — change the version segment in the two
URLs (the `@v1.0.3` portion) to the correct release tag or branch name that
contains the new wrapper files.
In `@README.md`:
- Around line 505-510: Update the CDN version tag used for the SvelteKit example
so it points to the release that includes the new Svelte wrapper instead of the
pre-wrapper v1.0.3; specifically change both references to the CDN URLs that
load src/social-share-button.css and src/social-share-button.js to the next
release tag containing the wrapper (replace "@v1.0.3" with the correct release
tag that includes the new wrapper files), and verify both the CSS and JS URLs
load the wrapper-aware artifacts.
ℹ️ Review info
⚙️ Run configuration
Configuration used: Path: .coderabbit.yaml
Review profile: ASSERTIVE
Plan: Pro
Run ID: 5ac6e5d7-b980-4ef5-b618-7d202f3e501c
📒 Files selected for processing (3)
README.mdindex.htmlpackage.json
1 participant
🚀 Description
This PR adds SvelteKit support to the
SocialShareButtonby introducing a Svelte wrapper component that follows the same architecture as the existing React wrapper.The goal was to make the integration feel natural in SvelteKit while keeping feature parity with other frameworks.
🔗 Related Issue
Fixes #47
🛠️ What’s Included
✨ New
src/social-share-button-svelte.svelteA Svelte wrapper component built on top of the existing vanilla JS core.
✏️ Updated
index.htmlAdded a SvelteKit integration section with CDN setup and usage example.
README.md⚙️ Implementation Details
Uses
onMountto initialize the core library andonDestroyto clean up usingdestroy()(prevents memory leaks)Added SSR safety using:
so it works correctly in SvelteKit’s server-side rendering
Added a reactive
$:block to callupdateOptions()whenever props change→ ensures the shared URL stays updated during client-side navigation
Included:
for compatibility with both Svelte 4 and Svelte 5
All props (including analytics-related ones) are aligned with the React wrapper for consistency
🧪 Testing
Tested locally using a fresh SvelteKit setup:
Created a new project:
Added CDN links in
src/app.htmlImported the component in
+page.svelteVerified:
Navigated between routes:
Unmounted the component:
📸 Screenshots / Recordings
2026-03-22.01-09-49.mp4
✅ Checklist
README.md,index.html)🤝 Notes
This implementation was written by studying the existing
social-share-button-react.jsxwrapper and adapting it to Svelte’s lifecycle (onMount,onDestroy,$:reactivity).Everything was tested manually in a local SvelteKit project to ensure it behaves correctly.
Summary by CodeRabbit