Updated Social Share button Integration Prompt - #213
Conversation
github-actions
Bot
added
no-issue-linked
|
Warning Review limit reached
Next review available in: 49 minutes You've used all free OSS reviews for now. Wait for the free limit to reset to keep reviewing this public repository. How can I continue?After more reviews become available, a review can be triggered using the To avoid repeated limits, reduce automatic review volume by pausing incremental auto-reviews earlier, using label-based review opt-in, excluding WIP or generated PR titles, or requesting reviews manually when the PR is ready. If your team needs uninterrupted high-volume reviews, an organization admin can enable usage-based reviews. How do review limits work?CodeRabbit enforces per-developer PR review limits for each organization. Most developers receive the normal plan review availability. For paid Pro and Pro+ PR reviews, CodeRabbit uses adaptive limits for sustained high-volume activity. When a developer's recent PR review activity reaches the 95th percentile or higher among CodeRabbit users, additional reviews become available more gradually as earlier reviews age out of the rolling window. Please refer docs for additional details. Review details⚙️ Run configurationConfiguration used: Path: .coderabbit.yaml Review profile: ASSERTIVE Plan: Pro Plus Run ID: 📒 Files selected for processing (1)
WalkthroughThe Copilot integration prompt now detects frontend frameworks and package managers, defines setup requirements, and provides framework-specific npm, ESM, and CDN examples for SocialShareButton. ChangesIntegration prompt
Estimated code review effort: 2 (Simple) | ~10 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 |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 10
🤖 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 @.github/copilot/integrate-social-share-button.prompt.md:
- Line 10: Update the Markdown formatting in the prompt document by adding blank
lines before and after every affected heading and fenced code block, including
the locations listed in the review comment, so markdownlint-cli2 no longer
reports MD022 or MD031.
- Around line 4-5: Update the social-share-button integration prompt so the user
only provides the button placement: detect the project’s package manager to
choose the installation method automatically and apply a default button style
without requesting npm/CDN or style selections. Keep this contract consistent in
the corresponding sections around the installation and placement steps.
- Around line 97-123: Update the useEffect initialization flow so its single
cleanup function both clears any active CDN polling timer and destroys the
current instanceRef instance, including one created by init after polling
completes. Preserve the existing initialization and dependency behavior while
ensuring cleanup handles both immediately available and asynchronously loaded
SocialShareButton globals.
- Around line 36-37: Replace the invalid
`@aossie-org/social-share-button/src/social-share-button.css` reference by first
exposing a supported CSS export in the package, then update the mandatory CSS
Import rule and every npm-based React, Vue, Angular, and vanilla example to use
that published export; leave CDN examples unchanged.
- Around line 214-232: Update ShareButtonComponent to implement Angular’s
OnChanges lifecycle and handle changes to buttonStyle, url, and title after
initialization. In ngOnChanges, update the existing SocialShareButton instance
through its updateOptions API when available, or reinitialize it while
preserving the existing container setup and cleanup behavior.
- Around line 83-87: Add the Next.js Script import to both the App Router
app/layout.tsx snippet and the Pages Router pages/_app.tsx snippet before their
respective <Script> usages, using the standard next/script module import and
leaving the other template instructions unchanged.
- Around line 240-248: Update the “npm Method (Vite/Webpack)” example to move
the SocialShareButton and stylesheet imports into a source module such as
src/main.js, and have the HTML template load that module instead of importing
packages from the inline script. Preserve the existing container initialization
and buttonStyle configuration.
- Around line 204-208: Update the example around the share-button.component.ts
import so it does not rely on the package without TypeScript declarations:
either convert the example to a supported JavaScript wrapper or ensure
`@aossie-org/social-share-button` publishes valid .d.ts declarations before
retaining the TypeScript component. Preserve the example’s intended integration
behavior and do not leave strict Angular users with a missing-declaration error.
- Around line 49-56: Separate the Preact guidance from the generic React/Next.js
section around the ShareButton example. Keep the React imports and JSX example
under React/Next.js, and add a distinct Preact setup showing the required
Preact-compatible imports or configuration/aliases so it works without implicit
React compatibility.
- Around line 197-198: Update the CDN Method guidance to guard
`window.SocialShareButton` before instantiation in `onMounted`, and add an
`onUnmounted` cleanup that disposes the initialized share-button instance when
available. Keep the existing container configuration and ensure cleanup handles
the unavailable or uninitialized case safely.
🪄 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 Plus
Run ID: 79b58653-e8f4-4120-8d7f-82db1a9038a1
📒 Files selected for processing (1)
.github/copilot/integrate-social-share-button.prompt.md
|
Markdown Formatting:
Framework-Specific Improvements:
Safer Lifecycle Cleanup:
Token Optimization:
Standardized CSS Import Paths:
Angular Dynamic Prop Updates (OnChanges):
Deterministic Specific-to-Generic Framework Matching:
Expanded Bun Lockfile Detection:
Corrected Preact Alias Direction:
|
There was a problem hiding this comment.
Actionable comments posted: 3
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (2)
.github/copilot/integrate-social-share-button.prompt.md (2)
106-124: 🩺 Stability & Availability | 🟠 Major | ⚡ Quick winBound CDN readiness polling.
If the CDN script never loads, each mounted wrapper keeps a 100 ms interval until unmount. This creates an avoidable timer leak and scales with the number of mounted buttons. Use a script-load callback or stop polling after a defined timeout or attempt limit.
Also applies to: 181-199
🤖 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 @.github/copilot/integrate-social-share-button.prompt.md around lines 106 - 124, Update the SocialShareButton initialization flow around init and the interval-based CDN readiness polling so it cannot run indefinitely when the script never loads. Prefer a script-load callback, or enforce a defined timeout or maximum attempt count before clearing the timer; preserve initialization when the CDN becomes ready and existing cleanup on unmount.
221-226: 🎯 Functional Correctness | 🟠 Major | ⚡ Quick winTrack Qwik inputs before initializing the widget.
useVisibleTask$does not re-run whenstyle,url, ortitlechange unless they are tracked. Calltrackfor these props, destroy the previous widget instance in cleanup, and create a new instance with the updated inputs.🤖 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 @.github/copilot/integrate-social-share-button.prompt.md around lines 221 - 226, Update the useVisibleTask$ callback to accept track, explicitly track style, url, and title before constructing the widget, and use those tracked values for initialization. Ensure cleanup destroys the current SocialShareButton instance so the task recreates it with updated inputs.
🤖 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 @.github/copilot/integrate-social-share-button.prompt.md:
- Around line 20-26: Update the technology detection instructions near the
package.json scan to require deterministic, specific-to-generic framework
matching: identify Next.js before React and Preact before React, while
preserving the directive to use only the detected framework’s guide. Ensure
projects containing both specific and generic dependencies select the specific
framework template.
- Line 137: Update the guidance near “Import hooks from preact/hooks” to remove
or correct the parenthetical alias direction: bundlers should alias react and
react-dom to preact/compat, not preact/compat to react. Preserve the direct
preact/hooks import guidance.
- Around line 23-26: Update the package-manager detection instructions in “Lock
File & Tech Detection” to recognize bun.lock alongside bun.lockb and classify
either as Bun. Preserve the existing detection for npm, pnpm, and yarn, and
ensure Bun projects proceed to the Bun technology guide.
---
Outside diff comments:
In @.github/copilot/integrate-social-share-button.prompt.md:
- Around line 106-124: Update the SocialShareButton initialization flow around
init and the interval-based CDN readiness polling so it cannot run indefinitely
when the script never loads. Prefer a script-load callback, or enforce a defined
timeout or maximum attempt count before clearing the timer; preserve
initialization when the CDN becomes ready and existing cleanup on unmount.
- Around line 221-226: Update the useVisibleTask$ callback to accept track,
explicitly track style, url, and title before constructing the widget, and use
those tracked values for initialization. Ensure cleanup destroys the current
SocialShareButton instance so the task recreates it with updated inputs.
🪄 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 Plus
Run ID: 3cfec4b4-75de-45d8-a52e-9547155b3275
📒 Files selected for processing (1)
.github/copilot/integrate-social-share-button.prompt.md
|
@CodeRabbit what changes i made Remove the invalid npm CSS subpath. docs/Roadmap.md, Lines [48-53], states that @aossie-org/social-share-button/src/social-share-button.css is not a valid published path. The mandatory rule and the React, Vue, Angular, and vanilla examples repeat it. Publish a supported CSS export, then use that path in every npm example. |
|
Tip For best results, initiate chat on the files or code changes. 🧩 Analysis chain🏁 Script executed: #!/bin/bash
set -euo pipefail
printf '%s\n' '--- CSS path occurrences ---'
rg -n -C 2 '`@aossie-org/social-share-button/`(src/social-share-button\.css|css)' \
.github/copilot/integrate-social-share-button.prompt.md docs/Roadmap.md || true
printf '%s\n' '--- Prompt npm-install and CSS-import context ---'
rg -n -C 5 '(npm install|from "`@aossie-org/social-share-button/css`"|`@aossie-org/social-share-button/css`)' \
.github/copilot/integrate-social-share-button.prompt.md || true
printf '%s\n' '--- Remaining invalid CSS subpath references in repository ---'
rg -n -C 2 '`@aossie-org/social-share-button/src/social-share-button`\.css' \
-g '!node_modules/**' -g '!dist/**' . || trueLength of output: 13042 🏁 Script executed: #!/bin/bash
set -euo pipefail
printf '%s\n' '--- Package manifests ---'
fd -a '^package\.json$' . -E node_modules -E dist -x sh -c '
echo "### $1"
jq "{name, version, main, module, style, files, exports}" "$1"
' sh {} 2>/dev/null || true
printf '%s\n' '--- CSS artifacts and export-related declarations ---'
rg -n -C 3 '"\./css"|social-share-button\.css|exports|files' \
-g 'package.json' -g '!node_modules/**' -g '!dist/**' . || true
printf '%s\n' '--- README CSS import context ---'
sed -n '655,675p' README.mdLength of output: 2238
The root To resolve the finding:
The finding remains open until the package export exists. You are interacting with an AI system. |
|
@CodeRabbit what about Separate the Preact setup from the generic React/Next.js examples. Grouping Preact with React/Next.js implies this code works without changes, but it imports hooks from react and uses React JSX. A plain Preact setup cannot use it unless compatibility aliases are configured; show the Preact-specific imports/config or split the guides. |
|
Tip For best results, initiate chat on the files or code changes. 🧩 Analysis chain🏁 Script executed: #!/bin/bash
set -euo pipefail
file=".github/copilot/integrate-social-share-button.prompt.md"
printf '%s\n' '--- Framework headings ---'
rg -n '^(#{1,4})\s+.*(React|Next\.js|Preact)' "$file" || true
printf '%s\n' '--- Preact section and nearby framework boundaries ---'
start=$(rg -n '^(#{1,4})\s+.*Preact' "$file" | head -n1 | cut -d: -f1 || true)
if [ -n "$start" ]; then
end=$((start + 150))
sed -n "${start},${end}p" "$file"
fi
printf '%s\n' '--- Imports, hooks, and alias guidance ---'
rg -n -C 3 '(from ["'\'']react["'\'']|from ["'\'']preact|preact/hooks|preact/compat|className|class=)' "$file" || trueLength of output: 8686
The Preact guide is separate from the React / Next.js guide. It imports hooks from A plain Preact setup can use the Preact examples without React compatibility aliases. I am withdrawing this finding. ✏️ Learnings added
You are interacting with an AI system. |
|
@CodeRabbit Destroy the instance created after CDN polling. When the global is initially unavailable, the cleanup at Line [119] only clears the timer. If polling later creates an instance, unmount does not execute the destruction logic at Line [122]. Return one cleanup function that clears the timer and destroys the current instance...explain this issue and how its fixed now |
|
Tip For best results, initiate chat on the files or code changes. 🧩 Analysis chain🏁 Script executed: #!/bin/bash
set -euo pipefail
file=".github/copilot/integrate-social-share-button.prompt.md"
printf '%s\n' '--- Prompt outline ---'
ast-grep outline "$file" --items all 2>/dev/null || true
printf '%s\n' '--- CDN polling and cleanup contexts ---'
rg -n -C 12 '(setInterval|clearInterval|destroy\(|useEffect|SocialShareButton)' "$file" || trueLength of output: 15133
Previously, the effect returned a cleanup function that only cleared the polling timer in that case. The polling callback could later create The current CDN example fixes this at Line 144: return () => { if (timer) clearInterval(timer); shareInstanceRef.current?.destroy?.(); };This is one cleanup function for both cases:
The cleanup is now reliable whether the CDN global is available immediately or becomes available later. You are interacting with an AI system. |
|
@CodeRabbit explain Import Script before using it in the Next.js snippets. Next.js App Router and Pages Router examples reference <Script>, but the prompt does not show import Script from "next/script";. Add import Script from "next/script" to the app/layout.tsx and pages/_app.tsx snippets so copied code does not fail with an unresolved identifier. and tell me whats fixed |
|
Tip For best results, initiate chat on the files or code changes. 🧩 Analysis chain🏁 Script executed: #!/bin/bash
set -euo pipefail
file=".github/copilot/integrate-social-share-button.prompt.md"
printf '%s\n' '--- Next.js section headings ---'
rg -n '^(#{1,4})\s+.*(Next\.js|App Router|Pages Router)' "$file" || true
printf '%s\n' '--- next/script imports and Script component contexts ---'
rg -n -C 10 'import Script from ["'"'"']next/script["'"'"'];|<Script\b|app/layout\.tsx|pages/_app\.tsx' "$file" || trueLength of output: 1618
Before the correction, the Next.js snippets used The prompt now gives the required import for both router types: import Script from "next/script";The corrected instructions are:
This ensures that 🐇🔎 You are interacting with an AI system. |
|
@CodeRabbit Complete the Vue CDN lifecycle guidance. The CDN section tells the model to instantiate window.SocialShareButton in onMounted, but it omits Vue lifecycle handling. Add cleanup in onUnmounted and guard initialization when window.SocialShareButton is not available.explain the issue and how it fixed |
|
Tip For best results, initiate chat on the files or code changes. 🧩 Analysis chain🏁 Script executed: #!/bin/bash
set -euo pipefail
file=".github/copilot/integrate-social-share-button.prompt.md"
printf '%s\n' '--- Vue section headings ---'
rg -n '^(#{1,4})\s+.*Vue' "$file" || true
printf '%s\n' '--- Vue CDN lifecycle references ---'
rg -n -C 12 '(onMounted|onUnmounted|window\.SocialShareButton|shareInstance|CDN)' "$file" || trueLength of output: 12425
The Vue 3 section includes cleanup only for the npm method: onUnmounted(() => shareInstance?.destroy?.());However, the Vue 3 section has no CDN Method example. Therefore, it does not instruct the model to do either required action for CDN use:
Without the guard, Vue can attempt Without The Vue CDN example should use this lifecycle pattern: <script setup>
import { ref, onMounted, onUnmounted } from "vue";
const shareContainerRef = ref(null);
let shareInstance = null;
onMounted(() => {
if (!window.SocialShareButton || !shareContainerRef.value) return;
shareInstance = new window.SocialShareButton({
container: shareContainerRef.value,
buttonStyle: "default",
});
});
onUnmounted(() => {
shareInstance?.destroy?.();
});
</script>
✏️ Learnings added
You are interacting with an AI system. |
|
@CodeRabbit The package metadata and roadmap document state that @aossie-org/social-share-button has no .d.ts files. A user copy-pasting this TypeScript component into a strict Angular project can hit a missing-declaration error. Move this example to a supported JavaScript wrapper or publish package declarations before replacing it...explain and how its fixed now |
|
Tip For best results, initiate chat on the files or code changes. 🧩 Analysis chain🏁 Script executed: #!/bin/bash
set -euo pipefail
prompt=".github/copilot/integrate-social-share-button.prompt.md"
printf '%s\n' '--- Angular prompt section ---'
start="$(rg -n '^#{3,4} .*Angular' "$prompt" | head -n 1 | cut -d: -f1 || true)"
if [ -n "$start" ]; then
sed -n "${start},$((start + 130))p" "$prompt"
fi
printf '%s\n' '--- Type declaration and Angular import evidence ---'
rg -n -C 3 '(`@ts-ignore`|`@aossie-org/social-share-button`|\.d\.ts|declaration)' \
"$prompt" package.json docs/Roadmap.md 2>/dev/null || true
printf '%s\n' '--- Published/type-related package metadata ---'
jq '{name, version, types, typings, files, main, module, exports}' package.jsonLength of output: 21290
A strict Angular TypeScript project can report a missing-declaration diagnostic for: import SocialShareButton from '`@aossie-org/social-share-button`';The prompt now fixes the copied-example compile error by adding this line directly before that import: // `@ts-ignore`
import SocialShareButton from '`@aossie-org/social-share-button`';The prompt applies this change in both Angular examples:
This is a compatibility workaround. It does not provide type safety, API autocomplete, or typed constructor options. Publishing 🐇🔍 ✏️ Learnings added
You are interacting with an AI system. |
|
@CodeRabbit Move the npm package imports out of the inline HTML script. This snippet is labeled Vite/Webpack, but a bare package specifier inside a <script type="module"> requires bundler entry/module support and will not run reliably as plain inline HTML. Put these imports in a source module such as src/main.js, then load that file from the template...explain this and how its fixed |
|
Tip For best results, initiate chat on the files or code changes. 🧩 Analysis chain🏁 Script executed: #!/bin/bash
set -euo pipefail
file=".github/copilot/integrate-social-share-button.prompt.md"
printf '%s\n' '--- Vanilla section ---'
start="$(rg -n '^#{3,4} .*Vanilla HTML' "$file" | head -n 1 | cut -d: -f1 || true)"
if [ -n "$start" ]; then
sed -n "${start},$((start + 100))p" "$file"
fi
printf '%s\n' '--- npm imports and template module scripts ---'
rg -n -C 4 'src/main\.js|<script type="module"|from ["'\'']`@aossie-org/social-share-button`["'\'']' "$file" || trueLength of output: 5833
Previously, an inline HTML module contained this import: import SocialShareButton from "`@aossie-org/social-share-button`";A browser cannot resolve this bare npm package specifier by itself. Vite or Webpack must process the import from an application entry module. Otherwise, copied code in plain HTML can fail to load the package. The prompt now separates the two responsibilities:
Vite or Webpack can resolve and bundle these imports when it processes One detail remains implicit. The HTML template must load the existing entry module, for example in Vite: <script type="module" src="/src/main.js"></script>An existing Vite project usually already has this entry-script tag. The prompt should state this condition explicitly. This makes the example complete for users who add the integration to a template without an existing module entry reference. ✏️ Learnings added
You are interacting with an AI system. |
|
@CodeRabbit A Next.js project can contain both next and react. If the agent matches React first, it can skip the Next.js guide and generate the wrong template setup. Detect specific frameworks before generic ones, such as next before react and preact before react. explain and tell me how it fixed |
|
Tip For best results, initiate chat on the files or code changes. 🧩 Analysis chain🏁 Script executed: #!/bin/bash
set -euo pipefail
file=".github/copilot/integrate-social-share-button.prompt.md"
printf '%s\n' '--- Framework detection workflow ---'
rg -n -C 5 '(Inspect Repo|Identify Frontend|specific-to-generic|Next\.js before React|Preact before React|dependencies)' "$file" || true
printf '%s\n' '--- Technology guide headings ---'
rg -n '^(#{2,4})\s+.*(React|Next\.js|Preact)' "$file" || trueLength of output: 1330
A Next.js project normally lists both The same risk exists for Preact projects that use React-compatible dependencies. If the workflow checks for The prompt now states this requirement at Line 20:
This order makes framework selection deterministic:
This prevents the agent from generating an incompatible template for projects that declare both a specific framework and 🐇🔎 ✏️ Learnings added
You are interacting with an AI system. |
There was a problem hiding this comment.
Actionable comments posted: 5
🤖 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 @.github/copilot/integrate-social-share-button.prompt.md:
- Around line 343-344: Move the SocialShareButton stylesheet out of
component-level styleUrls in the affected component definitions and register it
through Angular’s global stylesheet configuration so the body-appended modal
receives styling. Apply the same change to both occurrences referenced by the
review, and avoid relying on emulated component encapsulation.
- Line 43: Update the npm integration guidance around each required default
import so it matches a verified package entry point: either publish and verify
an ESM entry exporting SocialShareButton as the default, or replace the examples
with the package’s supported runtime integration. Do not mandate import
SocialShareButton from "`@aossie-org/social-share-button`" until the package
metadata and distributed source expose that default export.
- Around line 25-26: Update the package-manager detection instructions near the
lockfile checks to first read packageManager from the selected frontend app’s
package.json, then resolve lockfiles within that workspace rather than unrelated
repository directories. Define monorepo precedence and stop detection when
packageManager and lockfile signals conflict; preserve Bun classification for
bun.lock and bun.lockb before directing the agent to the matching Technology
Guide.
- Around line 405-423: Update ngOnChanges so a buttonStyle change destroys and
recreates the SocialShareButton instance instead of calling updateOptions.
Continue using updateOptions for changes to options it supports in place, while
preserving the existing container, URL, title, and buttonStyle values during
reinitialization.
- Line 241: Expand the Preact CDN instructions to require a complete
preact/hooks lifecycle implementation in the existing component: retain the
widget instance, poll or otherwise wait for the CDN global before
initialization, clean up any polling timer, and call destroy() on unmount. Keep
the CDN asset placement requirements and ensure the guide is self-contained
without relying on other examples.
🪄 Autofix
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 Plus
Run ID: f9628874-9463-4539-bd24-610c50d38f2a
📒 Files selected for processing (1)
.github/copilot/integrate-social-share-button.prompt.md
| - Check `package-lock.json`, `pnpm-lock.yaml`, `yarn.lock`, or `bun.lock`/`bun.lockb` for package manager (`npm`|`pnpm`|`yarn`|`bun`, classifying `bun.lock` or `bun.lockb` as Bun). | ||
| - **CRITICAL DIRECTIVE**: Skip directly to the detected framework in **Technology Guides** below. Ignore all other guides. |
There was a problem hiding this comment.
🎯 Functional Correctness | 🟠 Major | ⚡ Quick win
Define package-manager precedence for monorepos.
Line [21] scopes the target to a frontend app, but Line [25] does not scope lockfile lookup to that workspace or resolve conflicting lockfiles. A root or backend lockfile can select the wrong install command. Read packageManager from the selected package.json, then resolve the workspace lockfile and stop when signals conflict.
🤖 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 @.github/copilot/integrate-social-share-button.prompt.md around lines 25 -
26, Update the package-manager detection instructions near the lockfile checks
to first read packageManager from the selected frontend app’s package.json, then
resolve lockfiles within that workspace rather than unrelated repository
directories. Define monorepo precedence and stop detection when packageManager
and lockfile signals conflict; preserve Bun classification for bun.lock and
bun.lockb before directing the agent to the matching Technology Guide.
| - 🛑 **No New Files in Existing Projects (CRITICAL DIRECTIVE)**: | ||
| - **Default Mode (Existing Projects)**: Do **NOT** create a new file (e.g., `ShareButton.jsx`, `ShareButton.tsx`). Inject imports, lifecycle hooks (`useEffect`, `onMounted`, etc.), and container element (`<div ref={...}></div>` or `<div id="..."></div>`) directly into the developer's existing component (e.g., `Header`, `Navbar`, `Footer`, `Article`, `page.tsx`). | ||
| - **Exception Mode (New Projects or Explicit User Request)**: ONLY create a separate dedicated component file (e.g., `ShareButton.jsx`, `ShareButton.vue`) when initializing a new project from scratch OR if the user explicitly asks for a dedicated wrapper file. | ||
| - **ESM Import**: MUST use default import `import SocialShareButton from "@aossie-org/social-share-button";` (Do NOT use named `{ SocialShareButton }`). |
There was a problem hiding this comment.
🎯 Functional Correctness | 🟠 Major | 🏗️ Heavy lift
Publish a default ESM entry before mandating this import.
The prompt requires a default ESM import in every npm example. The current package metadata points to src/social-share-button.js, which has no export default; it conditionally assigns module.exports and window.SocialShareButton instead. ESM bundlers can reject these examples because the requested default export is missing. Publish a verified ESM entry or use the supported runtime integration. (raw.githubusercontent.com)
Verification script
#!/usr/bin/env bash
set -euo pipefail
meta="$(mktemp)"
trap 'rm -f "$meta"' EXIT
curl -fsSL 'https://registry.npmjs.org/%40aossie-org%2Fsocial-share-button' > "$meta"
version="$(jq -r '."dist-tags".latest' "$meta")"
tarball="$(jq -r --arg v "$version" '.versions[$v].dist.tarball' "$meta")"
curl -fsSL "$tarball" | tar -xzOf - package/package.json | jq '{type, main, exports, files}'
curl -fsSL "$tarball" | tar -xzOf - package/src/social-share-button.js \
| rg -n 'export default|module\.exports|window\.SocialShareButton'Also applies to: 65-65, 98-98, 184-184, 215-215, 261-261, 290-290, 333-333, 380-380, 448-448
🤖 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 @.github/copilot/integrate-social-share-button.prompt.md at line 43, Update
the npm integration guidance around each required default import so it matches a
verified package entry point: either publish and verify an ESM entry exporting
SocialShareButton as the default, or replace the examples with the package’s
supported runtime integration. Do not mandate import SocialShareButton from
"`@aossie-org/social-share-button`" until the package metadata and distributed
source expose that default export.
| #### CDN Method | ||
|
|
||
| ### CDN — Qwik | ||
| Add CDN `<link>` to `<head>` and `<script>` to `<body>` in `index.html`. Inline initialization logic into existing component using `preact/hooks`. |
There was a problem hiding this comment.
🩺 Stability & Availability | 🟠 Major | ⚡ Quick win
Make the Preact CDN guide self-contained.
This section only instructs the agent to add CDN assets and inline initialization. It does not require instance retention, delayed-global polling, timer cleanup, or destroy() on unmount. Because Line [26] says to ignore other guides, the agent cannot rely on the React CDN example for these requirements. Add a complete preact/hooks lifecycle example.
🤖 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 @.github/copilot/integrate-social-share-button.prompt.md at line 241, Expand
the Preact CDN instructions to require a complete preact/hooks lifecycle
implementation in the existing component: retain the widget instance, poll or
otherwise wait for the CDN global before initialization, clean up any polling
timer, and call destroy() on unmount. Keep the CDN asset placement requirements
and ensure the guide is self-contained without relying on other examples.
| styleUrls: ["../../node_modules/@aossie-org/social-share-button/css"], | ||
| }) |
There was a problem hiding this comment.
🗄️ Data Integrity & Integration | 🟠 Major | ⚡ Quick win
Load SocialShareButton CSS globally in Angular.
styleUrls attaches CSS to the component. Angular's default emulated encapsulation scopes component styles, while SocialShareButton appends its modal to document.body. The modal can therefore remain unstyled even if the path resolves. Import the stylesheet through the global stylesheet configuration, or explicitly document the trade-offs of ViewEncapsulation.None. (v18.angular.dev)
Verification script
#!/usr/bin/env bash
set -euo pipefail
curl -fsSL \
'https://raw.githubusercontent.com/AOSSIE-Org/SocialShareButton/master/src/social-share-button.js' \
| rg -n 'document\.body\.appendChild|this\.modal'Also applies to: 385-386
🤖 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 @.github/copilot/integrate-social-share-button.prompt.md around lines 343 -
344, Move the SocialShareButton stylesheet out of component-level styleUrls in
the affected component definitions and register it through Angular’s global
stylesheet configuration so the body-appended modal receives styling. Apply the
same change to both occurrences referenced by the review, and avoid relying on
emulated component encapsulation.
| ngOnChanges(changes: SimpleChanges): void { | ||
| if (this.instance) { | ||
| if (this.instance.updateOptions) { | ||
| this.instance.updateOptions({ | ||
| buttonStyle: this.buttonStyle, | ||
| url: this.url, | ||
| title: this.title, | ||
| }); | ||
| } else { | ||
| this.instance.destroy?.(); | ||
| if (this.container?.nativeElement) { | ||
| this.instance = new SocialShareButton({ | ||
| container: this.container.nativeElement, | ||
| buttonStyle: this.buttonStyle, | ||
| url: this.url, | ||
| title: this.title, | ||
| }); | ||
| } | ||
| } |
There was a problem hiding this comment.
🎯 Functional Correctness | 🟠 Major | ⚡ Quick win
Recreate the Angular instance when buttonStyle changes.
The ngOnChanges branch calls updateOptions whenever that method exists. The package implementation merges options and refreshes URL and color state, but it does not rebuild the rendered button or update its style class. A changed buttonStyle input therefore leaves the old style visible. Reinitialize for buttonStyle changes and use updateOptions only for options that the API updates in place. (raw.githubusercontent.com)
Verification script
#!/usr/bin/env bash
set -euo pipefail
curl -fsSL \
'https://raw.githubusercontent.com/AOSSIE-Org/SocialShareButton/master/src/social-share-button.js' \
| sed -n '580,605p'🤖 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 @.github/copilot/integrate-social-share-button.prompt.md around lines 405 -
423, Update ngOnChanges so a buttonStyle change destroys and recreates the
SocialShareButton instance instead of calling updateOptions. Continue using
updateOptions for changes to options it supports in place, while preserving the
existing container, URL, title, and buttonStyle values during reinitialization.
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 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 @.github/copilot/integrate-social-share-button.prompt.md:
- Line 39: Update the examples in the social share button prompt to use the
selected buttonStyle value from Step 4 instead of hardcoding "default". Apply
this consistently to every referenced example so generated code reflects the
user’s chosen style.
🪄 Autofix
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 Plus
Run ID: 2e94e4dc-2fc7-4d52-8df0-5a9709933c03
📒 Files selected for processing (1)
.github/copilot/integrate-social-share-button.prompt.md
1 participant
Additional Notes:
Changed integrate-social-share-button.prompt.md
Checklist
We encourage contributors to use AI tools responsibly when creating Pull Requests. While AI can be a valuable aid, it is essential to ensure that your contributions meet the task requirements, build successfully, include relevant tests, and pass all linters. Submissions that do not meet these standards may be closed without warning to maintain the quality and integrity of the project. Please take the time to understand the changes you are proposing and their impact. AI slop is strongly discouraged and may lead to banning and blocking. Do not spam our repos with AI slop.
Summary by CodeRabbit