Skip to content

Conversation

tmilewski
Copy link
Member

@tmilewski tmilewski commented Oct 16, 2025

Description

  • Re-exports from @clerk/vue for Nuxt.
  • Wraps and exports <UserAvatar /> for Astro.

Checklist

  • pnpm test runs as expected.
  • pnpm build runs as expected.
  • (If applicable) JSDoc comments have been added or updated for any package exports
  • (If applicable) Documentation has been updated

Type of change

  • 🐛 Bug fix
  • 🌟 New feature
  • 🔨 Breaking change
  • 📖 Refactoring / dependency upgrade / documentation
  • other:

Summary by CodeRabbit

  • New Features
    • UserAvatar component is now available in both Astro and Nuxt packages as a UI option for displaying user avatars.
  • Documentation
    • Changeset entries added documenting the new minor releases and UserAvatar addition.
  • Chores
    • Internal registration and component ID support updated so the new avatar component is mountable and discoverable at runtime.

@tmilewski tmilewski self-assigned this Oct 16, 2025
Copy link

changeset-bot bot commented Oct 16, 2025

🦋 Changeset detected

Latest commit: eaf4054

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 2 packages
Name Type
@clerk/astro Minor
@clerk/nuxt Minor

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

Copy link

vercel bot commented Oct 16, 2025

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

1 Skipped Deployment
Project Deployment Preview Comments Updated (UTC)
clerk-js-sandbox Skipped Skipped Oct 16, 2025 7:05pm

Copy link
Contributor

coderabbitai bot commented Oct 16, 2025

Walkthrough

Adds a new UserAvatar UI component: an Astro component file, an export in Astro and Nuxt barrels, a new InternalUIComponentId value, and a mount mapping entry; changesets were added for @clerk/astro and @clerk/nuxt.

Changes

Cohort / File(s) Summary
Changesets
.changeset/chilly-monkeys-learn.md, .changeset/fancy-hats-attend.md
New changeset entries recording minor releases for @clerk/astro and @clerk/nuxt that announce the UserAvatar addition.
Astro Component
packages/astro/src/astro-components/interactive/UserAvatar.astro
New Astro component that composes InternalUIComponentRenderer, forwarding props and setting component id to user-avatar.
Astro Exports
packages/astro/src/astro-components/index.ts
Adds export { default as UserAvatar } from './interactive/UserAvatar.astro'; to UI component exports.
Astro Types
packages/astro/src/types.ts
Adds 'user-avatar' to the InternalUIComponentId union.
Astro Mount Mapping
packages/astro/src/internal/mount-clerk-astro-js-components.ts
Adds mapping entry 'user-avatar': 'mountUserAvatar' to the component mount dispatch table.
Nuxt Exports
packages/nuxt/src/runtime/components/index.ts
Adds UserAvatar to the Nuxt runtime public component exports.

Sequence Diagram(s)

sequenceDiagram
  autonumber
  participant Page as Page/Astro
  participant UserAvatar as UserAvatar.astro
  participant Renderer as InternalUIComponentRenderer
  participant MountTable as mountAllClerkAstroJSComponents
  participant MountFn as mountUserAvatar

  Note over Page,UserAvatar: New component added and exported
  Page->>UserAvatar: render with props
  UserAvatar->>Renderer: render component="user-avatar" + props
  Renderer->>MountTable: lookup handler for "user-avatar"
  MountTable->>MountFn: invoke mountUserAvatar (mount logic)
  MountFn-->>Renderer: mounted DOM/behavior
  Renderer-->>Page: rendered avatar UI
Loading

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Poem

🐇 A tiny avatar hops on stage,
Across Astro files and Nuxt's page,
Exports aligned, types sing along,
Mounted, rendered — short and strong,
Rabbit cheers: "A perfect little badge!" 🎨

Pre-merge checks and finishing touches

✅ Passed checks (3 passed)
Check name Status Explanation
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Title Check ✅ Passed The title succinctly captures the addition of the UserAvatar component by re-exporting it for both Nuxt and Astro, directly reflecting the main purpose of the pull request. It names the relevant frameworks and clearly identifies the feature change without extraneous information.
Docstring Coverage ✅ Passed No functions found in the changes. Docstring coverage check skipped.
✨ Finishing touches
  • 📝 Generate docstrings
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Post copyable unit tests in a comment
  • Commit unit tests in branch tom/reexport-user-avatar

📜 Recent 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.

📥 Commits

Reviewing files that changed from the base of the PR and between 6a56304 and eaf4054.

📒 Files selected for processing (1)
  • packages/astro/src/internal/mount-clerk-astro-js-components.ts (1 hunks)
🧰 Additional context used
📓 Path-based instructions (6)
**/*.{js,jsx,ts,tsx}

📄 CodeRabbit inference engine (.cursor/rules/development.mdc)

**/*.{js,jsx,ts,tsx}: All code must pass ESLint checks with the project's configuration
Follow established naming conventions (PascalCase for components, camelCase for variables)
Maintain comprehensive JSDoc comments for public APIs
Use dynamic imports for optional features
All public APIs must be documented with JSDoc
Provide meaningful error messages to developers
Include error recovery suggestions where applicable
Log errors appropriately for debugging
Lazy load components and features when possible
Implement proper caching strategies
Use efficient data structures and algorithms
Profile and optimize critical paths
Validate all inputs and sanitize outputs
Implement proper logging with different levels

Files:

  • packages/astro/src/internal/mount-clerk-astro-js-components.ts
**/*.{js,jsx,ts,tsx,json,css,scss,md,yaml,yml}

📄 CodeRabbit inference engine (.cursor/rules/development.mdc)

Use Prettier for consistent code formatting

Files:

  • packages/astro/src/internal/mount-clerk-astro-js-components.ts
packages/**/*.{ts,tsx}

📄 CodeRabbit inference engine (.cursor/rules/development.mdc)

TypeScript is required for all packages

Files:

  • packages/astro/src/internal/mount-clerk-astro-js-components.ts
packages/**/*.{ts,tsx,d.ts}

📄 CodeRabbit inference engine (.cursor/rules/development.mdc)

Packages should export TypeScript types alongside runtime code

Files:

  • packages/astro/src/internal/mount-clerk-astro-js-components.ts
**/*.{ts,tsx}

📄 CodeRabbit inference engine (.cursor/rules/development.mdc)

Use proper TypeScript error types

**/*.{ts,tsx}: Always define explicit return types for functions, especially public APIs
Use proper type annotations for variables and parameters where inference isn't clear
Avoid any type - prefer unknown when type is uncertain, then narrow with type guards
Use interface for object shapes that might be extended
Use type for unions, primitives, and computed types
Prefer readonly properties for immutable data structures
Use private for internal implementation details
Use protected for inheritance hierarchies
Use public explicitly for clarity in public APIs
Prefer readonly for properties that shouldn't change after construction
Prefer composition and interfaces over deep inheritance chains
Use mixins for shared behavior across unrelated classes
Implement dependency injection for loose coupling
Let TypeScript infer when types are obvious
Use const assertions for literal types: as const
Use satisfies operator for type checking without widening
Use mapped types for transforming object types
Use conditional types for type-level logic
Leverage template literal types for string manipulation
Use ES6 imports/exports consistently
Use default exports sparingly, prefer named exports
Use type-only imports: import type { ... } from ...
No any types without justification
Proper error handling with typed errors
Consistent use of readonly for immutable data
Proper generic constraints
No unused type parameters
Proper use of utility types instead of manual type construction
Type-only imports where possible
Proper tree-shaking friendly exports
No circular dependencies
Efficient type computations (avoid deep recursion)

Files:

  • packages/astro/src/internal/mount-clerk-astro-js-components.ts
**/*.{js,ts,tsx,jsx}

📄 CodeRabbit inference engine (.cursor/rules/monorepo.mdc)

Support multiple Clerk environment variables (CLERK_, NEXT_PUBLIC_CLERK_, etc.) for configuration.

Files:

  • packages/astro/src/internal/mount-clerk-astro-js-components.ts
⏰ 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). (3)
  • GitHub Check: Analyze (javascript-typescript)
  • GitHub Check: semgrep-cloud-platform/scan
  • GitHub Check: semgrep-cloud-platform/scan
🔇 Additional comments (1)
packages/astro/src/internal/mount-clerk-astro-js-components.ts (1)

15-15: Approve new ‘user-avatar’ mount mapping: placement is alphabetical and type-safe—InternalUIComponentId includes ‘user-avatar’ and Clerk exposes mountUserAvatar.


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

@tmilewski tmilewski changed the title chore: Re-export UserAvatar for Nuxt and Astro feat(nuxt,vue): Re-export UserAvatar for Nuxt and Astro Oct 16, 2025
coderabbitai[bot]

This comment was marked as resolved.

Copy link

pkg-pr-new bot commented Oct 16, 2025

Open in StackBlitz

@clerk/agent-toolkit

npm i https://pkg.pr.new/@clerk/agent-toolkit@7009

@clerk/astro

npm i https://pkg.pr.new/@clerk/astro@7009

@clerk/backend

npm i https://pkg.pr.new/@clerk/backend@7009

@clerk/chrome-extension

npm i https://pkg.pr.new/@clerk/chrome-extension@7009

@clerk/clerk-js

npm i https://pkg.pr.new/@clerk/clerk-js@7009

@clerk/dev-cli

npm i https://pkg.pr.new/@clerk/dev-cli@7009

@clerk/elements

npm i https://pkg.pr.new/@clerk/elements@7009

@clerk/clerk-expo

npm i https://pkg.pr.new/@clerk/clerk-expo@7009

@clerk/expo-passkeys

npm i https://pkg.pr.new/@clerk/expo-passkeys@7009

@clerk/express

npm i https://pkg.pr.new/@clerk/express@7009

@clerk/fastify

npm i https://pkg.pr.new/@clerk/fastify@7009

@clerk/localizations

npm i https://pkg.pr.new/@clerk/localizations@7009

@clerk/nextjs

npm i https://pkg.pr.new/@clerk/nextjs@7009

@clerk/nuxt

npm i https://pkg.pr.new/@clerk/nuxt@7009

@clerk/clerk-react

npm i https://pkg.pr.new/@clerk/clerk-react@7009

@clerk/react-router

npm i https://pkg.pr.new/@clerk/react-router@7009

@clerk/remix

npm i https://pkg.pr.new/@clerk/remix@7009

@clerk/shared

npm i https://pkg.pr.new/@clerk/shared@7009

@clerk/tanstack-react-start

npm i https://pkg.pr.new/@clerk/tanstack-react-start@7009

@clerk/testing

npm i https://pkg.pr.new/@clerk/testing@7009

@clerk/themes

npm i https://pkg.pr.new/@clerk/themes@7009

@clerk/types

npm i https://pkg.pr.new/@clerk/types@7009

@clerk/upgrade

npm i https://pkg.pr.new/@clerk/upgrade@7009

@clerk/vue

npm i https://pkg.pr.new/@clerk/vue@7009

commit: eaf4054

@tmilewski tmilewski merged commit f61927b into main Oct 17, 2025
41 checks passed
@tmilewski tmilewski deleted the tom/reexport-user-avatar branch October 17, 2025 13:58
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants