feat: add Alpine.js integration#154
Conversation
Signed-off-by: hiranya25 <hiranyapatil10@gmail.com>
github-actions
Bot
added
planned
ℹ️ Recent review info⚙️ Run configurationConfiguration used: Path: .coderabbit.yaml Review profile: ASSERTIVE Plan: Pro Run ID: 📒 Files selected for processing (3)
WalkthroughAdds Alpine.js support wording across the README, demo page, landing page feature card, and package keywords. It also adds an Alpine.js Quick Start section in the README and a matching demo section in ChangesAlpine.js Integration Documentation
Estimated code review effort: 1 (Trivial) | ~5 minutes Possibly related PRs
Suggested labels: Suggested reviewers: Poem
🚥 Pre-merge checks | ✅ 4✅ Passed checks (4 passed)
✨ 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 |
github-actions
Bot
added
frontend
|
@kpj2006 Note for Maintainers: I think the Dependency & License Review check failed because the Dependency Graph feature is not enabled on this repository's security settings (Error: Dependency review is not supported on this repository). This is a repository configuration issue, not an issue with the code in this PR. |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 3
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@index.html`:
- Around line 604-605: The `x-destroy` directive used on the div element is not
supported in Alpine.js v3 and the cleanup code for shareBtn will never execute.
Replace the `x-destroy` attribute with Alpine.js v3's official lifecycle
approach by either creating a custom init function with Alpine.data that
properly handles the destroy() method for shareBtn, or register a custom Alpine
directive that properly implements cleanup using Alpine's onCleanup or destroy
hooks. Remove the unsupported `x-destroy="shareBtn && shareBtn.destroy()"`
attribute and ensure the shareBtn cleanup logic is moved to the appropriate
Alpine.js v3 lifecycle method.
- Around line 589-591: The CDN URLs for the stylesheet and script tags
referencing social-share-button package are incorrect and should use the AOSSIE
package GitHub CDN URLs instead as documented in the project's README. Replace
the href attribute in the link tag and src attributes in both script tags (lines
589-591 in index.html) with the correct GitHub CDN URLs from the README's "Via
CDN (Recommended)" section. Additionally, update the same incorrect CDN URLs in
the README documentation (lines 499-503) to maintain consistency across the
project documentation.
In `@README.md`:
- Around line 516-525: The documentation example uses the unsupported x-destroy
directive instead of Alpine's standard lifecycle pattern. Replace the current
x-init and x-destroy directives with an x-data object that includes a shareBtn
property initialized to null, an init() method containing the SocialShareButton
instantiation logic, and a destroy() method containing the cleanup logic that
calls shareBtn.destroy(). Alpine will automatically invoke the destroy() method
when the component is removed from the DOM.
🪄 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: c607fdad-5daf-4cef-8eca-3e9956970078
📒 Files selected for processing (4)
README.mdindex.htmllanding-page/src/components/Features.tsxpackage.json
Signed-off-by: hiranya25 <hiranyapatil10@gmail.com>
|
@kpj2006 could you please look into this why this [Dependency Review / Dependency & License Review is failing. |
|
@kpj2006 Please check and let me know about this issue! |
|
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: |
|
@kpj2006 Could you please review this pr |
There was a problem hiding this comment.
Actionable comments posted: 2
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
README.md (1)
492-506: 🗄️ Data Integrity & Integration | 🟡 Minor | ⚡ Quick winAlign the CDN version across the docs
README.md still uses
v1.0.3for the SocialShareButton CDN assets, while other integration examples inindex.htmlpinv1.0.4. Pick one version and make the snippets consistent.🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@README.md` around lines 492 - 506, README.md’s SocialShareButton CDN snippet is out of sync with the rest of the docs: it still points to v1.0.3 while the integration example uses v1.0.4. Update the version in the README snippet to match the chosen canonical CDN version, keeping the <link> and <script> references in the same version as the other examples so the documentation is consistent.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@index.html`:
- Around line 512-516: The CDN version pins in index.html are inconsistent
between the main examples and the Alpine snippet, so update the
SocialShareButton asset URLs to use the same release tag throughout. Check the
link and script references in the documented examples and align them to a single
version so copy-pasted snippets all point to the same SocialShareButton release.
In `@README.md`:
- Around line 604-605: There is a stray leftover dash immediately after the
Discord entry in the platform-message list. Remove the dangling standalone "-"
from the README content around that list so the section reads cleanly and only
contains the intended bullets.
---
Outside diff comments:
In `@README.md`:
- Around line 492-506: README.md’s SocialShareButton CDN snippet is out of sync
with the rest of the docs: it still points to v1.0.3 while the integration
example uses v1.0.4. Update the version in the README snippet to match the
chosen canonical CDN version, keeping the <link> and <script> references in the
same version as the other examples so the documentation is consistent.
🪄 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: 52b0ecdc-e58f-4390-88a6-a49434802624
📒 Files selected for processing (3)
README.mdindex.htmlpackage.json
There was a problem hiding this comment.
Caution
Inline review comments failed to post. This is likely due to GitHub's internal server error or limits when posting large numbers of comments. If you are seeing this consistently it is likely a permissions issue. Please check "Moderation" -> "Code review limits" under your organization settings.
Actionable comments posted: 2
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
README.md (1)
492-506: 🗄️ Data Integrity & Integration | 🟡 Minor | ⚡ Quick winAlign the CDN version across the docs
README.md still uses
v1.0.3for the SocialShareButton CDN assets, while other integration examples inindex.htmlpinv1.0.4. Pick one version and make the snippets consistent.🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@README.md` around lines 492 - 506, README.md’s SocialShareButton CDN snippet is out of sync with the rest of the docs: it still points to v1.0.3 while the integration example uses v1.0.4. Update the version in the README snippet to match the chosen canonical CDN version, keeping the <link> and <script> references in the same version as the other examples so the documentation is consistent.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@index.html`:
- Around line 512-516: The CDN version pins in index.html are inconsistent
between the main examples and the Alpine snippet, so update the
SocialShareButton asset URLs to use the same release tag throughout. Check the
link and script references in the documented examples and align them to a single
version so copy-pasted snippets all point to the same SocialShareButton release.
In `@README.md`:
- Around line 604-605: There is a stray leftover dash immediately after the
Discord entry in the platform-message list. Remove the dangling standalone "-"
from the README content around that list so the section reads cleanly and only
contains the intended bullets.
---
Outside diff comments:
In `@README.md`:
- Around line 492-506: README.md’s SocialShareButton CDN snippet is out of sync
with the rest of the docs: it still points to v1.0.3 while the integration
example uses v1.0.4. Update the version in the README snippet to match the
chosen canonical CDN version, keeping the <link> and <script> references in the
same version as the other examples so the documentation is consistent.
🪄 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: 52b0ecdc-e58f-4390-88a6-a49434802624
📒 Files selected for processing (3)
README.mdindex.htmlpackage.json
🛑 Comments failed to post (2)
index.html (1)
512-516: 🎯 Functional Correctness | 🟡 Minor | ⚡ Quick win
🧩 Analysis chain
🏁 Script executed:
#!/bin/bash # Inspect the exact HTML around the flagged line for unescaped characters sed -n '505,525p' index.htmlRepository: AOSSIE-Org/SocialShareButton
Length of output: 1122
🏁 Script executed:
#!/bin/bash set -euo pipefail echo '--- lines around 660-670 ---' sed -n '656,672p' index.html echo '--- all SocialShareButton version references ---' rg -n "SocialShareButton@v1\.0\.[34]" index.html echo '--- nearby HTML entities around the Qwik snippet ---' sed -n '516,522p' index.htmlRepository: AOSSIE-Org/SocialShareButton
Length of output: 2600
🏁 Script executed:
#!/bin/bash set -euo pipefail echo '--- version references in repo ---' rg -n "v1\.0\.[34]" . echo '--- package/version metadata candidates ---' git ls-files | rg '(^|/)(package\.json|package-lock\.json|pnpm-lock\.yaml|yarn\.lock|README\.md|index\.html)$' echo '--- git tags matching v1.0 ---' git tag -l 'v1.0.*'Repository: AOSSIE-Org/SocialShareButton
Length of output: 4041
Keep the CDN version pins aligned.
index.htmlmixesv1.0.4in the main examples withv1.0.3in the Alpine snippet, so copy-pasted docs point to different releases.🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@index.html` around lines 512 - 516, The CDN version pins in index.html are inconsistent between the main examples and the Alpine snippet, so update the SocialShareButton asset URLs to use the same release tag throughout. Check the link and script references in the documented examples and align them to a single version so copy-pasted snippets all point to the same SocialShareButton release.Source: Linters/SAST tools
README.md (1)
604-605: 📐 Maintainability & Code Quality | 🟡 Minor | ⚡ Quick win
Stray leftover character after the Discord bullet.
A dangling
-on its own line appears right after the platform-message list, which looks like an editing artifact rather than intentional content.Proposed fix
- **Discord:** `title` + `description` + `hashtags` + link -🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@README.md` around lines 604 - 605, There is a stray leftover dash immediately after the Discord entry in the platform-message list. Remove the dangling standalone "-" from the README content around that list so the section reads cleanly and only contains the intended bullets.
1 participant
Addressed Issues:
Fixes #49
Screenshots/Recordings:
N/A - No visual changes to the button itself, but added an Alpine.js demo section to
index.html.Additional Notes:
This PR introduces the official integration guide and demo for Alpine.js. Since Alpine.js shares the same zero-dependency, no-build-step philosophy as SocialShareButton, it perfectly aligns with the project.
Key changes include:
index.htmlfeaturing copy-to-clipboard code snippets showing how to initialize viax-dataandx-init.README.mdQuick Start Guide with a collapsible Alpine.js details block.package.json(keywords),landing-page/src/components/Features.tsx, andindex.htmlto include Alpine.js alongside React, Vue, Angular, etc.Checklist
Summary by CodeRabbit
Release Notes
New Features
Documentation