Uh oh!
There was an error while loading. Please reload this page.
feat(astro,vue,nuxt): Introduce APIKeys component - #7225
Conversation
🦋 Changeset detectedLatest commit: 919cc6a The changes in this PR will be included in the next version bump. This PR includes changesets to release 3 packages
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
The latest updates on your projects. Learn more about Vercel for GitHub.
|
WalkthroughThis pull request introduces a new APIKeys UI component across the Clerk ecosystem. The component is implemented in Vue and re-exported through Astro and Nuxt packages with corresponding type registrations and mount configurations integrated into each framework's component system. Changes
Estimated code review effort🎯 2 (Simple) | ⏱️ ~12 minutes
Poem
Pre-merge checks and finishing touches✅ Passed checks (3 passed)
✨ Finishing touches
🧪 Generate unit tests (beta)
Comment |
cc9caf2 to
c27f090Comparec27f090 to
dfba175Compare@clerk/agent-toolkit@clerk/astro@clerk/backend@clerk/chrome-extension@clerk/clerk-js@clerk/dev-cli@clerk/elements@clerk/clerk-expo@clerk/expo-passkeys@clerk/express@clerk/fastify@clerk/localizations@clerk/nextjs@clerk/nuxt@clerk/clerk-react@clerk/react-router@clerk/remix@clerk/shared@clerk/tanstack-react-start@clerk/testing@clerk/themes@clerk/types@clerk/upgrade@clerk/vuecommit: |
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (1)
packages/vue/src/components/index.ts (1)
1-13: Consider alphabetical ordering for component exports.The component exports don't follow a strict alphabetical order. While the current approach works, alphabetically ordering these exports (lines 1-8, 12-13) would improve maintainability and make it easier to locate components.
If alphabetical, APIKeys would appear at or near the top of the list.
📜 Review details
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
Disabled knowledge base sources:
- Linear integration is disabled by default for public repositories
You can enable these sources in your CodeRabbit configuration.
📒 Files selected for processing (9)
.changeset/gentle-hats-hope.md(1 hunks)packages/astro/src/astro-components/index.ts(1 hunks)packages/astro/src/astro-components/interactive/APIKeys.astro(1 hunks)packages/astro/src/internal/mount-clerk-astro-js-components.ts(1 hunks)packages/astro/src/types.ts(1 hunks)packages/nuxt/src/module.ts(1 hunks)packages/nuxt/src/runtime/components/index.ts(1 hunks)packages/vue/src/components/index.ts(1 hunks)packages/vue/src/components/ui-components/APIKeys.vue(1 hunks)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (27)
- GitHub Check: Integration Tests (quickstart, chrome, 15)
- GitHub Check: Integration Tests (nextjs, chrome, 15)
- GitHub Check: Integration Tests (nextjs, chrome, 16)
- GitHub Check: Integration Tests (quickstart, chrome, 16)
- GitHub Check: Integration Tests (nextjs, chrome, 15, RQ)
- GitHub Check: Integration Tests (nextjs, chrome, 14)
- GitHub Check: Integration Tests (tanstack-react-start, chrome)
- GitHub Check: Integration Tests (billing, chrome, RQ)
- GitHub Check: Integration Tests (handshake:staging, chrome)
- GitHub Check: Integration Tests (custom, chrome)
- GitHub Check: Integration Tests (react-router, chrome)
- GitHub Check: Integration Tests (nuxt, chrome)
- GitHub Check: Integration Tests (billing, chrome)
- GitHub Check: Integration Tests (machine, chrome)
- GitHub Check: Integration Tests (astro, chrome)
- GitHub Check: Integration Tests (handshake, chrome)
- GitHub Check: Integration Tests (expo-web, chrome)
- GitHub Check: Integration Tests (vue, chrome)
- GitHub Check: Integration Tests (sessions:staging, chrome)
- GitHub Check: Integration Tests (elements, chrome)
- GitHub Check: Integration Tests (sessions, chrome)
- GitHub Check: Integration Tests (localhost, chrome)
- GitHub Check: Integration Tests (express, chrome)
- GitHub Check: Integration Tests (ap-flows, chrome)
- GitHub Check: Integration Tests (generic, chrome)
- GitHub Check: Publish with pkg-pr-new
- GitHub Check: semgrep-cloud-platform/scan
🔇 Additional comments (9)
.changeset/gentle-hats-hope.md (1)
1-7: LGTM! Changeset properly documents the new feature.The changeset correctly identifies all affected packages with appropriate minor version bumps for the new APIKeys component.
packages/astro/src/astro-components/index.ts (1)
34-34: LGTM! Export follows the established pattern.The APIKeys export is properly placed in the UI Components section and follows the same pattern as other component exports.
packages/nuxt/src/module.ts (1)
172-173: LGTM! Component registration follows the established pattern.The APIKeys component is properly added to the auto-registration array with an appropriate section comment. The type constraint ensures the component is actually exported from
@clerk/vue.packages/astro/src/types.ts (1)
75-76: LGTM! Type extension is correct and consistent.The addition of
'api-keys'to theInternalUIComponentIdunion type is necessary for type safety and matches the component ID used throughout the integration.packages/vue/src/components/ui-components/APIKeys.vue (1)
1-17: LGTM! Component follows the established ClerkHostRenderer pattern.The Vue component correctly:
- Uses the
ClerkHostRendererwrapper component- Binds the appropriate mount/unmount methods
- Passes through props with proper typing
The type cast to
anyon line 14 is acceptable given that__unstable__updatePropsis marked as an unstable API and likely not part of the public type definitions.packages/nuxt/src/runtime/components/index.ts (1)
33-33: Export addition verified — no issues found.The verification confirms that
APIKeysis properly exported from@clerk/vueon line 8 ofpackages/vue/src/components/index.ts. The export pattern is consistent and correct.packages/astro/src/astro-components/interactive/APIKeys.astro (1)
1-11: LGTM! Component implementation follows the established pattern.The Astro component wrapper is correctly structured:
- Properly imports and types the props from
@clerk/shared/types- Uses InternalUIComponentRenderer with the correct component ID
- Spreads props as expected
packages/astro/src/internal/mount-clerk-astro-js-components.ts (1)
23-23: LGTM! Pattern is consistent with existing mount mappings.The
mountAPIKeysmethod is confirmed to exist on the Clerk type inpackages/shared/src/types/clerk.ts:586with the correct signaturemountAPIKeys: (targetNode: HTMLDivElement, props?: APIKeysProps) => void;. The addition follows the established pattern, and thesatisfiesconstraint ensures type safety. No issues found.packages/vue/src/components/index.ts (1)
8-8: APIKeys export is correctly implemented across all frameworks.Verification confirms:
- ✓
./ui-components/APIKeys.vueexists and is properly implemented using Vue 3 composition API- ✓ Component is exported in the Vue package (line 8)
- ✓ Component is integrated into Astro (packages/astro/src/astro-components/index.ts:34)
- ✓ Component is integrated into Nuxt (packages/nuxt/src/runtime/components/index.ts:33)
No issues found.
Description
This PR creates the Astro, Vue and Nuxt versions of the React
<APIKeys />AIO componentChecklist
pnpm testruns as expected.pnpm buildruns as expected.Type of change
Summary by CodeRabbit