chore(types,clerk-react,astro,vue): Share Protect component prop type between SDKs #6197
Conversation
🦋 Changeset detectedLatest commit: 527a9b4 The changes in this PR will be included in the next version bump. This PR includes changesets to release 22 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 Git ↗︎
|
📝 Walkthrough## Walkthrough
This change extracts the internal `ProtectProps` type from multiple SDK packages (`@clerk/astro`, `@clerk/clerk-react`, `@clerk/types`, and `@clerk/vue`) and centralizes it in a shared module within `@clerk/types`. The local definitions of `ProtectProps` in each SDK are removed and replaced with imports from the shared types package. The new shared `ProtectProps` type enforces mutual exclusivity among its authorization-related properties. No changes are made to public or exported entity signatures beyond the internal refactoring of type definitions.
## Possibly related PRs
- clerk/javascript#6188: This PR introduces new `feature` and `plan` variants to the `ProtectProps` type and updates the `<Protect>` component to support these new props. It is related as it extends the type that is now being centralized in the current PR.
## Suggested reviewers
- panteliselef
- anagstef📜 Recent review detailsConfiguration used: CodeRabbit UI 📒 Files selected for processing (1)
🚧 Files skipped from review as they are similar to previous changes (1)
⏰ Context from checks skipped due to timeout of 90000ms (5)
🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
@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/vue
commit: |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (6)
.changeset/wet-foxes-attend.md(1 hunks)packages/astro/src/types.ts(1 hunks)packages/react/src/components/controlComponents.tsx(2 hunks)packages/types/src/index.ts(1 hunks)packages/types/src/protect.ts(1 hunks)packages/vue/src/components/controlComponents.ts(2 hunks)
🧰 Additional context used
📓 Path-based instructions (6)
`**/*.{js,ts,tsx,jsx}`: All code must pass ESLint checks with the project's configuration. Use Prettier for consistent code formatting.
**/*.{js,ts,tsx,jsx}: All code must pass ESLint checks with the project's configuration.
Use Prettier for consistent code formatting.
📄 Source: CodeRabbit Inference Engine (.cursor/rules/development.mdc)
List of files the instruction was applied to:
packages/types/src/index.tspackages/vue/src/components/controlComponents.tspackages/astro/src/types.tspackages/react/src/components/controlComponents.tsxpackages/types/src/protect.ts
`**/*.{ts,tsx}`: Maintain comprehensive JSDoc comments for public APIs.
**/*.{ts,tsx}: Maintain comprehensive JSDoc comments for public APIs.
📄 Source: CodeRabbit Inference Engine (.cursor/rules/development.mdc)
List of files the instruction was applied to:
packages/types/src/index.tspackages/vue/src/components/controlComponents.tspackages/astro/src/types.tspackages/react/src/components/controlComponents.tsxpackages/types/src/protect.ts
`packages/**`: All publishable packages under the @clerk namespace must be located in the packages/ directory.
packages/**: All publishable packages under the @clerk namespace must be located in the packages/ directory.
📄 Source: CodeRabbit Inference Engine (.cursor/rules/global.mdc)
List of files the instruction was applied to:
packages/types/src/index.tspackages/vue/src/components/controlComponents.tspackages/astro/src/types.tspackages/react/src/components/controlComponents.tsxpackages/types/src/protect.ts
`**/index.ts`: Use index.ts files for clean imports but avoid deep barrel exports.
**/index.ts: Use index.ts files for clean imports but avoid deep barrel exports.
📄 Source: CodeRabbit Inference Engine (.cursor/rules/react.mdc)
List of files the instruction was applied to:
packages/types/src/index.ts
`**/*.ts`: Always define explicit return types for functions, especially public ...
**/*.ts: Always define explicit return types for functions, especially public APIs.
Use proper type annotations for variables and parameters where inference isn't clear.
Avoidanytype; preferunknownwhen type is uncertain, then narrow with type guards.
Useinterfacefor object shapes that might be extended; usetypefor unions, primitives, and computed types.
Preferreadonlyproperties for immutable data structures.
Useprivatefor internal implementation details,protectedfor inheritance, andpublicexplicitly for clarity in public APIs.
Prefer composition and interfaces over deep inheritance chains; use mixins for shared behavior.
Use ES6 imports/exports consistently; avoid barrel files (index.ts re-exports) to prevent circular dependencies.
Use type-only imports (import type { ... }) where possible.
Useas constfor literal types and thesatisfiesoperator for type checking without widening.
Enable--incrementaland--tsBuildInfoFilefor faster builds.
Use ESLint with @typescript-eslint/recommended rules and Prettier for formatting.
Use lint-staged and Husky for pre-commit checks.
Use type-coverage to measure type safety.
📄 Source: CodeRabbit Inference Engine (.cursor/rules/typescript.mdc)
List of files the instruction was applied to:
packages/types/src/index.tspackages/vue/src/components/controlComponents.tspackages/astro/src/types.tspackages/types/src/protect.ts
`**/*.{jsx,tsx}`: Always use functional components with hooks instead of class c...
**/*.{jsx,tsx}: Always use functional components with hooks instead of class components.
Follow PascalCase naming for components; the filename and component name should match.
Limit component size to 150-200 lines; extract logic into custom hooks.
Export components as named exports for better tree-shaking.
One component per file with matching filename and component name.
Co-locate related files (component, test, stories) in the same directory.
📄 Source: CodeRabbit Inference Engine (.cursor/rules/react.mdc)
List of files the instruction was applied to:
packages/react/src/components/controlComponents.tsx
🧬 Code Graph Analysis (2)
packages/vue/src/components/controlComponents.ts (4)
packages/types/src/protect.ts (1)
ProtectProps(5-47)packages/react/src/components/controlComponents.tsx (1)
ProtectProps(72-76)packages/astro/src/react/controlComponents.tsx (1)
ProtectProps(72-74)packages/types/src/session.ts (1)
PendingSessionOptions(34-40)
packages/types/src/protect.ts (3)
packages/types/src/organizationMembership.ts (2)
OrganizationCustomRoleKey(77-81)OrganizationCustomPermissionKey(64-68)packages/types/src/session.ts (1)
CheckAuthorizationWithCustomPermissions(50-51)packages/types/src/utils.ts (1)
Autocomplete(100-100)
⏰ Context from checks skipped due to timeout of 90000ms (23)
- GitHub Check: Integration Tests (nextjs, chrome, 15)
- GitHub Check: Integration Tests (nextjs, chrome, 13)
- GitHub Check: Integration Tests (astro, chrome)
- GitHub Check: Integration Tests (react-router, chrome)
- GitHub Check: Integration Tests (nuxt, chrome)
- GitHub Check: Integration Tests (localhost, chrome)
- GitHub Check: Integration Tests (nextjs, chrome, 14)
- GitHub Check: Integration Tests (expo-web, chrome)
- GitHub Check: Integration Tests (billing, chrome)
- GitHub Check: Integration Tests (tanstack-react-router, chrome)
- GitHub Check: Integration Tests (vue, chrome)
- GitHub Check: Integration Tests (ap-flows, chrome)
- GitHub Check: Integration Tests (tanstack-react-start, chrome)
- GitHub Check: Integration Tests (sessions, chrome)
- GitHub Check: Integration Tests (elements, chrome)
- GitHub Check: Integration Tests (generic, chrome)
- GitHub Check: Integration Tests (quickstart, chrome)
- GitHub Check: Integration Tests (express, chrome)
- GitHub Check: Unit Tests (18, --filter=@clerk/astro --filter=@clerk/backend --filter=@clerk/express --filter=@c...
- GitHub Check: Unit Tests (22, **)
- GitHub Check: Publish with pkg-pr-new
- GitHub Check: Static analysis
- GitHub Check: Analyze (javascript-typescript)
🔇 Additional comments (10)
packages/types/src/index.ts (1)
40-40: LGTM - Clean addition of shared type export.The export statement follows the established alphabetical ordering pattern and correctly exposes the new shared ProtectProps type.
.changeset/wet-foxes-attend.md (1)
1-9: LGTM - Well-documented changeset.The changeset appropriately uses patch level for all affected packages and clearly describes the internal refactoring without breaking changes.
packages/vue/src/components/controlComponents.ts (2)
5-5: LGTM - Proper import with alias to avoid naming conflicts.The type-only import with alias follows TypeScript best practices and integrates cleanly with the shared types.
107-107: LGTM - Correct type definition for Vue's slot-based architecture.The intersection with
PendingSessionOptionsis appropriate, and the absence of afallbackprop is correct since Vue uses slots for fallback content (as seen in the component implementation).packages/astro/src/types.ts (2)
6-6: LGTM - Clean import of shared ProtectProps type.Direct import of the shared type eliminates duplication and maintains consistency across SDKs.
48-48: LGTM - Appropriate re-export of shared type.Re-exporting the ProtectProps type maintains the public API while leveraging the shared type definition.
packages/react/src/components/controlComponents.tsx (2)
2-2: LGTM - Proper type-only import with alias.The import statement correctly brings in the shared ProtectProps type with an alias to avoid naming conflicts, following TypeScript best practices.
72-76: LGTM - Correct React-specific type extension.The intersection type properly extends the shared
_ProtectPropswith React-specific requirements:PropsWithChildrenfor children support,fallbackfor React's prop-based fallback pattern, andPendingSessionOptionsfor authentication state handling.packages/types/src/protect.ts (2)
1-3: LGTM: Clean type-only importsThe imports follow TypeScript best practices by using type-only imports and importing from the appropriate modules within the types package.
31-31: Consistent template literal type usage looks goodThe feature and plan properties correctly use the
Autocompleteutility type with template literal types to enforce theuser:ororg:prefix pattern while maintaining autocomplete functionality.Also applies to: 39-39
wobsoriano
changed the title
Description
Checklist
pnpm testruns as expected.pnpm buildruns as expected.Type of change
Summary by CodeRabbit