refactor(ui): use new useClipboard with async by MatteoGabriele · Pull Request #2675 · npmx-dev/npmx.dev

MatteoGabriele · 2026-05-04T05:41:23Z

The fix for #2151 has been incorporated into vueuse, and with the release of v14.3.0, we can now remove the additional code and rely on the version included in the library.

see vueuse/vueuse#5368

vercel · 2026-05-04T05:41:29Z

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
docs.npmx.dev	Ready	Preview, Comment	May 4, 2026 5:43am
npmx.dev	Ready	Preview, Comment	May 4, 2026 5:43am

1 Skipped Deployment

Project	Deployment	Actions	Updated (UTC)
npmx-lunaria	Ignored		May 4, 2026 5:43am

coderabbitai · 2026-05-04T05:41:35Z

📝 Walkthrough

Walkthrough

The PR replaces a custom useClipboardAsync composable with Vue Use's standard useClipboard, updating the README copy feature in the package page to use explicit pending state. The underlying @vueuse/core dependency is bumped to 14.3.0 to support this change.

Changes

Clipboard API Migration

Layer / File(s)	Summary
Dependency Update `package.json`	`@vueuse/core` upgraded from `14.2.1` to `14.3.0`.
Composable Removal `app/composables/useClipboardAsync.ts`	Custom `useClipboardAsync` composable is removed entirely.
Page Migration `app/pages/package/[[org]]/[name].vue`	README "copy as Markdown" logic switched from `useClipboardAsync` to `useClipboard`, introducing `copyReadmePending` state and conditional loader UI feedback during clipboard operations.

Possibly Related PRs

fix: resolve readme copy functionality in Safari #2554: Directly reversed—that PR introduced useClipboardAsync and wired it into the page, whereas this PR removes it in favour of the standard composable.

Suggested Reviewers

knowler
graphieros

🚥 Pre-merge checks | ✅ 4

✅ Passed checks (4 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title accurately describes the main change: removing a custom composable and refactoring to use the updated useClipboard from vueuse.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Description check	✅ Passed	The pull request description clearly relates to the changeset, explaining the removal of useClipboardAsync and migration to vueuse's built-in implementation.

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

✨ Finishing Touches

🧪 Generate unit tests (beta)

Create PR with unit tests

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

❤️ Share

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

socket-security · 2026-05-04T05:42:36Z

Review the following changes in direct dependencies. Learn more about Socket for GitHub.

Diff	Package	Supply Chain Security	Vulnerability	Quality	Maintenance	License
	@vueuse/core@14.3.0

View full report

github-actions · 2026-05-04T05:43:25Z

📊 Dependency Size Changes

Warning

This PR adds 1.3 MB of new dependencies, which exceeds the threshold of 200 kB.

📦 Package	📏 Size
@vueuse/[email protected]	890.3 kB
@vueuse/[email protected]	220.4 kB
@vueuse/[email protected]	165.6 kB

Total size change: 1.3 MB

codecov · 2026-05-04T05:43:57Z

Codecov Report

❌ Patch coverage is 0% with 6 lines in your changes missing coverage. Please review.
✅ All tests successful. No failed tests found.

Files with missing lines	Patch %	Lines
app/pages/package/[[org]]/[name].vue	0.00%	5 Missing and 1 partial ⚠️

📢 Thoughts on this report? Let us know!

coderabbitai

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents

Verify each finding against the current code and only fix it if needed.

Inline comments:
In `@app/pages/package/`[[org]]/[name].vue:
- Around line 119-124: The copyReadme helper currently calls copy with an empty
string when fetchReadmeMarkdown fails; change copyReadme so it awaits
fetchReadmeMarkdown, checks readmeMarkdownData.value?.markdown and if it's falsy
returns early (or surfaces an error/toast) instead of calling copy with ''—use
fetchReadmeMarkdown(), inspect readmeMarkdownData (or its Markdown field) and
only call copy(async () => ...) when markdown is non-empty, otherwise bail out
or raise a user-visible error.

🪄 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: CHILL

Plan: Pro

Run ID: 81213369-668c-43bc-b6d3-2faddd6afa3e

📥 Commits

Reviewing files that changed from the base of the PR and between c26421f and 13fb947.

⛔ Files ignored due to path filters (1)

pnpm-lock.yaml is excluded by !**/pnpm-lock.yaml

📒 Files selected for processing (3)

app/composables/useClipboardAsync.ts
app/pages/package/[[org]]/[name].vue
package.json

💤 Files with no reviewable changes (1)

app/composables/useClipboardAsync.ts

coderabbitai · 2026-05-04T05:46:52Z

+function copyReadme() {
+  copy(async () => {
    await fetchReadmeMarkdown()
    return readmeMarkdownData.value?.markdown ?? ''
-  },
-  {
-    copiedDuring: 2000,
-  },
-)
+  })
+}


⚠️ Potential issue | 🟡 Minor | ⚡ Quick win

Don't copy an empty README on fetch failure.

The helper currently falls back to '' when the markdown ref is empty, so a failed fetch can still look like a successful copy. Return early or surface an error instead of treating missing markdown as valid content.

🛠 Suggested fix

async function copyReadme() { copy(async () => { await fetchReadmeMarkdown() - return readmeMarkdownData.value?.markdown ?? '' + const markdown = readmeMarkdownData.value?.markdown + if (!markdown) throw new Error('README Markdown is unavailable') + return markdown }) }

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed. In `@app/pages/package/`[[org]]/[name].vue around lines 119 - 124, The copyReadme helper currently calls copy with an empty string when fetchReadmeMarkdown fails; change copyReadme so it awaits fetchReadmeMarkdown, checks readmeMarkdownData.value?.markdown and if it's falsy returns early (or surfaces an error/toast) instead of calling copy with ''—use fetchReadmeMarkdown(), inspect readmeMarkdownData (or its Markdown field) and only call copy(async () => ...) when markdown is non-empty, otherwise bail out or raise a user-visible error.

graphieros

Works on my Safari 🌿

ghostdevv

assuming the code rabbit comment is valid, we can fix it here or create an issue? otherwise LGTM

MatteoGabriele · 2026-05-04T16:43:36Z

assuming the code rabbit comment is valid, we can fix it here or create an issue? otherwise LGTM

@ghostdevv the copying action "never fails", even if it does.
We might need a different UX for failure. 🤔 I suppose we could add a small "x" icon when it fails, but I'd like to check with some a11y people what the best strategy is for that too.
If it's fine with you, I would prefer to create a separate PR so we can get this out of the way faster.

shuuji3

Works as expected on Firefox/Google Chrome on Linux/macOS/Android ✨ 🧹

refactor(ui): use new useClipboard with async

13fb947

vercel Bot deployed to Preview – docs.npmx.dev May 4, 2026 05:42 View deployment

vercel Bot deployed to Preview – npmx.dev May 4, 2026 05:43 View deployment

coderabbitai Bot reviewed May 4, 2026

View reviewed changes

graphieros approved these changes May 4, 2026

View reviewed changes

ghostdevv approved these changes May 4, 2026

View reviewed changes

shuuji3 approved these changes May 4, 2026

View reviewed changes

Uh oh!

Conversation

MatteoGabriele commented May 4, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

vercel Bot commented May 4, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

coderabbitai Bot commented May 4, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Walkthrough

Changes

Possibly Related PRs

Suggested Reviewers

Uh oh!

socket-security Bot commented May 4, 2026

Uh oh!

github-actions Bot commented May 4, 2026

📊 Dependency Size Changes

Uh oh!

codecov Bot commented May 4, 2026

Codecov Report

Uh oh!

coderabbitai Bot left a comment

Choose a reason for hiding this comment

Uh oh!

coderabbitai Bot May 4, 2026

Choose a reason for hiding this comment

Uh oh!

graphieros left a comment

Choose a reason for hiding this comment

Uh oh!

ghostdevv left a comment

Choose a reason for hiding this comment

Uh oh!

MatteoGabriele commented May 4, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

shuuji3 left a comment

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

MatteoGabriele commented May 4, 2026 •

edited

Loading

vercel Bot commented May 4, 2026 •

edited

Loading

coderabbitai Bot commented May 4, 2026 •

edited

Loading

MatteoGabriele commented May 4, 2026 •

edited

Loading