feat(ui): composed profile components (release)#9144
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
🦋 Changeset detectedLatest commit: 3464ff9 The changes in this PR will be included in the next version bump. This PR includes changesets to release 23 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 |
📝 WalkthroughWalkthroughThe change introduces experimental composable Estimated code review effort: 5 (Critical) | ~120 minutes 🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
Comment |
@clerk/astro
@clerk/backend
@clerk/chrome-extension
@clerk/clerk-js
@clerk/electron
@clerk/electron-passkeys
@clerk/eslint-plugin
@clerk/expo
@clerk/expo-google-signin
@clerk/expo-passkeys
@clerk/express
@clerk/fastify
@clerk/hono
@clerk/localizations
@clerk/nextjs
@clerk/nuxt
@clerk/react
@clerk/react-router
@clerk/shared
@clerk/tanstack-react-start
@clerk/testing
@clerk/ui
@clerk/upgrade
@clerk/vue
commit: |
b90f4c7 to
c325d8f
Compare
64314fc to
a28f465
Compare
API Changes Report
Summary
@clerk/uiCurrent version: 1.25.6 Subpath
|
|
!snapshot |
|
Hey @alexcarpenter - the snapshot version command generated the following package versions:
Tip: Use the snippet copy button below to quickly install the required packages. npm i @clerk/astro@3.4.19-snapshot.v20260716135136 --save-exact
npm i @clerk/backend@3.11.7-snapshot.v20260716135136 --save-exact
npm i @clerk/chrome-extension@3.1.54-snapshot.v20260716135136 --save-exact
npm i @clerk/clerk-js@6.25.5-snapshot.v20260716135136 --save-exact
npm i @clerk/electron@0.0.15-snapshot.v20260716135136 --save-exact
npm i @clerk/electron-passkeys@0.0.4-snapshot.v20260716135136 --save-exact
npm i @clerk/eslint-plugin@0.2.1-snapshot.v20260716135136 --save-exact
npm i @clerk/expo@3.7.7-snapshot.v20260716135136 --save-exact
npm i @clerk/expo-passkeys@1.2.6-snapshot.v20260716135136 --save-exact
npm i @clerk/express@2.1.43-snapshot.v20260716135136 --save-exact
npm i @clerk/fastify@3.1.53-snapshot.v20260716135136 --save-exact
npm i @clerk/headless@0.0.13-snapshot.v20260716135136 --save-exact
npm i @clerk/hono@0.1.53-snapshot.v20260716135136 --save-exact
npm i @clerk/localizations@4.13.5-snapshot.v20260716135136 --save-exact
npm i @clerk/msw@0.0.49-snapshot.v20260716135136 --save-exact
npm i @clerk/nextjs@7.5.20-snapshot.v20260716135136 --save-exact
npm i @clerk/nuxt@2.6.19-snapshot.v20260716135136 --save-exact
npm i @clerk/react@6.12.5-snapshot.v20260716135136 --save-exact
npm i @clerk/react-router@3.5.12-snapshot.v20260716135136 --save-exact
npm i @clerk/shared@4.25.5-snapshot.v20260716135136 --save-exact
npm i @clerk/swingset@0.0.20-snapshot.v20260716135136 --save-exact
npm i @clerk/tanstack-react-start@1.4.20-snapshot.v20260716135136 --save-exact
npm i @clerk/testing@2.2.10-snapshot.v20260716135136 --save-exact
npm i @clerk/ui@1.26.0-snapshot.v20260716135136 --save-exact
npm i @clerk/upgrade@2.0.5-snapshot.v20260716135136 --save-exact
npm i @clerk/vue@2.4.17-snapshot.v20260716135136 --save-exact |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 3
🧹 Nitpick comments (5)
packages/ui/src/composed/OrganizationProfile/OrganizationProfileProvider.tsx (1)
31-55: 🚀 Performance & Scalability | 🔵 Trivial | ⚡ Quick winMemoize the context value to avoid needless consumer re-renders.
orgProfileCtxValue(including a brand-newcustomPages: []array) is recreated on every render and passed straight intoOrganizationProfileContext.Provider. Any consumer relying on referential identity (e.g. auseEffect/useMemodependency oncustomPagesor the context object itself) will re-run needlessly on every re-render of this provider.♻️ Suggested fix
- const orgProfileCtxValue = { - componentName: 'OrganizationProfile' as const, - mode: 'mounted' as const, - routing: 'hash' as const, - path: undefined, - afterLeaveOrganizationUrl, - apiKeysProps, - customPages: [], - }; + const orgProfileCtxValue = useMemo( + () => ({ + componentName: 'OrganizationProfile' as const, + mode: 'mounted' as const, + routing: 'hash' as const, + path: undefined, + afterLeaveOrganizationUrl, + apiKeysProps, + customPages: [], + }), + [afterLeaveOrganizationUrl, apiKeysProps], + );As per coding guidelines,
**/*.{tsx,jsx}should "Minimize re-renders in React components" and "Use proper useMemo for expensive computations in React components."🤖 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 `@packages/ui/src/composed/OrganizationProfile/OrganizationProfileProvider.tsx` around lines 31 - 55, Memoize orgProfileCtxValue in OrganizationProfileProvider so its object identity remains stable across renders, including the customPages array. Use React’s memoization hook with dependencies covering afterLeaveOrganizationUrl and apiKeysProps, while keeping the existing context fields and provider behavior unchanged.Source: Coding guidelines
packages/ui/src/experimental/index.ts (1)
10-10: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick winReplace the chained wildcard barrels with deliberate public exports.
The intermediate and published barrels together expose future symbols and collisions through
@clerk/ui/experimental.
packages/ui/src/experimental/index.ts#L10-L10: explicitly export the supported experimental components from their leaf modules.packages/ui/src/composed/index.ts#L1-L2: remove the intermediate wildcard aggregation or replace it with an explicit internal export list.As per coding guidelines, “Avoid barrel files (
index.tsre-exports) as they can cause circular dependencies.”🤖 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 `@packages/ui/src/experimental/index.ts` at line 10, Replace the wildcard export in packages/ui/src/experimental/index.ts at line 10 with explicit exports of the supported experimental components from their leaf modules. In packages/ui/src/composed/index.ts at lines 1-2, remove the wildcard aggregation or replace it with an explicit internal export list so future symbols and collisions are not exposed.Source: Coding guidelines
integration/tests/composed-components.test.ts (1)
31-45: 🎯 Functional Correctness | 🔵 Trivial | ⚡ Quick winAdd an integration fixture without a local
'use client'boundary.This page becomes a Client Component, so it cannot verify the advertised ability to import and render these exports directly from a React Server Component. Add a minimal server page that imports the experimental components and asserts they render.
As per coding guidelines, include tests for all new features.
🤖 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 `@integration/tests/composed-components.test.ts` around lines 31 - 45, Update the composedUserProfilePage fixture to remove the local 'use client' directive and keep it as a minimal React Server Component that imports and renders the experimental UserProfile exports. Ensure the integration test asserts successful rendering from this server page, covering the direct server-component import path for all newly supported components.Source: Coding guidelines
packages/ui/src/elements/ProfileCard/ProfilePagePanel.tsx (1)
18-18: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick winAdd explicit return types to exported components.
packages/ui/src/elements/ProfileCard/ProfilePagePanel.tsx#L18-L18: annotate the component return type.packages/ui/src/components/ConfigureSSO/ConfigureSSO.tsx#L46-L46: annotate the newly exported component return type.packages/ui/src/elements/ProfileCard/ProfileCardPage.tsx#L26-L26: annotate the exported component return type.As per coding guidelines, exported TypeScript APIs require explicit return types; based on learnings, this repository enforces that for exported functions.
🤖 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 `@packages/ui/src/elements/ProfileCard/ProfilePagePanel.tsx` at line 18, Add explicit return type annotations to the exported components ProfilePagePanel, ConfigureSSO, and ProfileCardPage. Update each component declaration at packages/ui/src/elements/ProfileCard/ProfilePagePanel.tsx:18-18, packages/ui/src/components/ConfigureSSO/ConfigureSSO.tsx:46-46, and packages/ui/src/elements/ProfileCard/ProfileCardPage.tsx:26-26, using the appropriate React component return type while preserving their existing behavior.Sources: Coding guidelines, Learnings
packages/ui/src/composed/UserProfile/UserProfileProvider.tsx (1)
29-37: 🚀 Performance & Scalability | 🔵 Trivial | ⚡ Quick winMemoize the context value to avoid re-rendering the whole composed subtree.
userProfileCtxValueis a new object every render, so all descendants consumingUserProfileContextre-render on everyUserProfileProviderrender regardless of whether any field changed.ProfileProviderShellalready memoizes its comparable derived values (router,options), so this is inconsistent with the pattern elsewhere in the layer.As per coding guidelines, "**/*.{jsx,tsx}": "Use proper useMemo for expensive computations in React components" and "Minimize re-renders in React components."
♻️ Proposed fix
+import { useMemo } from 'react'; ... - const userProfileCtxValue = { - componentName: 'UserProfile' as const, - mode: 'mounted' as const, - routing: 'hash' as const, - path: undefined, - additionalOAuthScopes, - apiKeysProps, - customPages: [], - }; + const userProfileCtxValue = useMemo( + () => ({ + componentName: 'UserProfile' as const, + mode: 'mounted' as const, + routing: 'hash' as const, + path: undefined, + additionalOAuthScopes, + apiKeysProps, + customPages: [], + }), + [additionalOAuthScopes, apiKeysProps], + );🤖 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 `@packages/ui/src/composed/UserProfile/UserProfileProvider.tsx` around lines 29 - 37, Memoize the userProfileCtxValue object in UserProfileProvider with React.useMemo, using all values included in the context object—especially additionalOAuthScopes and apiKeysProps—as dependencies; preserve the existing constant fields and empty customPages value.Source: Coding guidelines
🤖 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 `@integration/tests/composed-components.test.ts`:
- Around line 127-130: Update the afterAll cleanup blocks around fake users,
organizations, and related temporary entities to use try/finally so each entity
deletion is attempted safely and app.teardown() always runs independently of API
cleanup failures. Preserve the existing cleanup targets and ordering where
possible while ensuring failures in assertions or deletion do not prevent
subsequent cleanup.
In `@packages/ui/src/composed/__tests__/action-animation.test.tsx`:
- Around line 16-26: Replace any-based animation helper types with
Parameters<Element['animate']> call tuples and Keyframe/Keyframe[] types in
findAddAnimationCall and the corresponding helpers in
packages/ui/src/composed/__tests__/action-animation.test.tsx (lines 16-26) and
packages/ui/src/composed/__tests__/auto-animate-strictmode.test.tsx (lines
28-48). In packages/ui/src/composed/__tests__/auto-animate-strictmode.test.tsx
(lines 62-68), replace the as any mock result with an Animation-typed fixture or
narrow Partial<Animation> cast.
In `@packages/ui/src/styledSystem/createEmotionCache.ts`:
- Around line 3-4: Update the Emotion insert override in createEmotionCache so
its assigned function inherits cache.insert’s parameter types instead of
declaring an explicit any; keep sheet typed as Emotion’s StyleSheet and remove
the now-unused SerializedStyles import.
---
Nitpick comments:
In `@integration/tests/composed-components.test.ts`:
- Around line 31-45: Update the composedUserProfilePage fixture to remove the
local 'use client' directive and keep it as a minimal React Server Component
that imports and renders the experimental UserProfile exports. Ensure the
integration test asserts successful rendering from this server page, covering
the direct server-component import path for all newly supported components.
In
`@packages/ui/src/composed/OrganizationProfile/OrganizationProfileProvider.tsx`:
- Around line 31-55: Memoize orgProfileCtxValue in OrganizationProfileProvider
so its object identity remains stable across renders, including the customPages
array. Use React’s memoization hook with dependencies covering
afterLeaveOrganizationUrl and apiKeysProps, while keeping the existing context
fields and provider behavior unchanged.
In `@packages/ui/src/composed/UserProfile/UserProfileProvider.tsx`:
- Around line 29-37: Memoize the userProfileCtxValue object in
UserProfileProvider with React.useMemo, using all values included in the context
object—especially additionalOAuthScopes and apiKeysProps—as dependencies;
preserve the existing constant fields and empty customPages value.
In `@packages/ui/src/elements/ProfileCard/ProfilePagePanel.tsx`:
- Line 18: Add explicit return type annotations to the exported components
ProfilePagePanel, ConfigureSSO, and ProfileCardPage. Update each component
declaration at packages/ui/src/elements/ProfileCard/ProfilePagePanel.tsx:18-18,
packages/ui/src/components/ConfigureSSO/ConfigureSSO.tsx:46-46, and
packages/ui/src/elements/ProfileCard/ProfileCardPage.tsx:26-26, using the
appropriate React component return type while preserving their existing
behavior.
In `@packages/ui/src/experimental/index.ts`:
- Line 10: Replace the wildcard export in packages/ui/src/experimental/index.ts
at line 10 with explicit exports of the supported experimental components from
their leaf modules. In packages/ui/src/composed/index.ts at lines 1-2, remove
the wildcard aggregation or replace it with an explicit internal export list so
future symbols and collisions are not exposed.
🪄 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: Repository YAML (base), Organization UI (inherited)
Review profile: CHILL
Plan: Pro Plus
Run ID: 4b6a5164-137f-461f-85b0-6ad847013b23
⛔ Files ignored due to path filters (1)
packages/ui/src/experimental/__tests__/__snapshots__/flat-exports.test.ts.snapis excluded by!**/*.snap
📒 Files selected for processing (85)
.changeset/profile-section-components.md.changeset/shared-moduleManager-registry.mdintegration/tests/composed-components.test.tspackages/clerk-js/src/core/clerk.tspackages/react/src/__tests__/isomorphicClerk.test.tspackages/react/src/isomorphicClerk.tspackages/shared/src/types/clerk.tspackages/ui/package.jsonpackages/ui/src/components/ConfigureSSO/ConfigureSSO.tsxpackages/ui/src/components/OrganizationProfile/OrganizationBillingPage.tsxpackages/ui/src/components/OrganizationProfile/OrganizationGeneralPage.tsxpackages/ui/src/components/OrganizationProfile/OrganizationMembers.tsxpackages/ui/src/components/UserProfile/APIKeysPage.tsxpackages/ui/src/components/UserProfile/AccountPage.tsxpackages/ui/src/components/UserProfile/AccountSections.tsxpackages/ui/src/components/UserProfile/BillingPage.tsxpackages/ui/src/components/UserProfile/SecurityPage.tsxpackages/ui/src/components/UserProfile/SecuritySections.tsxpackages/ui/src/components/UserProfile/Web3Form.tsxpackages/ui/src/components/UserProfile/__tests__/AccountSections.test.tsxpackages/ui/src/components/UserProfile/__tests__/SecuritySections.test.tsxpackages/ui/src/components/UserProfile/__tests__/Web3Section.test.tsxpackages/ui/src/composed/APIKeysSection.tsxpackages/ui/src/composed/BillingSection.tsxpackages/ui/src/composed/OrganizationProfile/APIKeys.tsxpackages/ui/src/composed/OrganizationProfile/Billing.tsxpackages/ui/src/composed/OrganizationProfile/General.tsxpackages/ui/src/composed/OrganizationProfile/GeneralDeleteOrganization.tsxpackages/ui/src/composed/OrganizationProfile/GeneralLeaveOrganization.tsxpackages/ui/src/composed/OrganizationProfile/GeneralOrganizationProfile.tsxpackages/ui/src/composed/OrganizationProfile/GeneralVerifiedDomains.tsxpackages/ui/src/composed/OrganizationProfile/Members.tsxpackages/ui/src/composed/OrganizationProfile/OrganizationProfileProvider.tsxpackages/ui/src/composed/OrganizationProfile/Security.tsxpackages/ui/src/composed/OrganizationProfile/index.tsxpackages/ui/src/composed/PageContext.tsxpackages/ui/src/composed/ProfileProviderShell.tsxpackages/ui/src/composed/UserProfile/APIKeys.tsxpackages/ui/src/composed/UserProfile/Account.tsxpackages/ui/src/composed/UserProfile/AccountConnectedAccounts.tsxpackages/ui/src/composed/UserProfile/AccountEmails.tsxpackages/ui/src/composed/UserProfile/AccountEnterpriseAccounts.tsxpackages/ui/src/composed/UserProfile/AccountPhone.tsxpackages/ui/src/composed/UserProfile/AccountProfile.tsxpackages/ui/src/composed/UserProfile/AccountUsername.tsxpackages/ui/src/composed/UserProfile/AccountWeb3.tsxpackages/ui/src/composed/UserProfile/Billing.tsxpackages/ui/src/composed/UserProfile/Security.tsxpackages/ui/src/composed/UserProfile/SecurityActiveDevices.tsxpackages/ui/src/composed/UserProfile/SecurityDelete.tsxpackages/ui/src/composed/UserProfile/SecurityMfa.tsxpackages/ui/src/composed/UserProfile/SecurityPasskeys.tsxpackages/ui/src/composed/UserProfile/SecurityPassword.tsxpackages/ui/src/composed/UserProfile/UserProfileProvider.tsxpackages/ui/src/composed/UserProfile/index.tsxpackages/ui/src/composed/__tests__/OrganizationProfile.test.tsxpackages/ui/src/composed/__tests__/OrganizationProfileSections.test.tsxpackages/ui/src/composed/__tests__/UserProfile.test.tsxpackages/ui/src/composed/__tests__/UserProfileSections.test.tsxpackages/ui/src/composed/__tests__/action-animation.test.tsxpackages/ui/src/composed/__tests__/auto-animate-strictmode.test.tsxpackages/ui/src/composed/__tests__/composed-provider-wiring.test.tsxpackages/ui/src/composed/__tests__/hotload-vs-bundle-risks.test.tsxpackages/ui/src/composed/__tests__/stub-limitations.test.tspackages/ui/src/composed/__tests__/style-cache-sharing.test.tsxpackages/ui/src/composed/createSection.tsxpackages/ui/src/composed/index.tspackages/ui/src/composed/stubRouter.tspackages/ui/src/composed/useBillingRouter.tspackages/ui/src/composed/useRequirePage.tspackages/ui/src/customizables/elementDescriptors.tspackages/ui/src/elements/Animated.tsxpackages/ui/src/elements/AppearanceOverrides.tsxpackages/ui/src/elements/ProfileCard/ProfileCardPage.tsxpackages/ui/src/elements/ProfileCard/ProfilePagePanel.tsxpackages/ui/src/elements/ProfileCard/__tests__/ProfilePagePanel.test.tsxpackages/ui/src/elements/ProfileCard/index.tspackages/ui/src/experimental/__tests__/flat-exports.test.tspackages/ui/src/experimental/index.tspackages/ui/src/hooks/useSafeState.tspackages/ui/src/internal/appearance.tspackages/ui/src/internal/styleCacheStore.tspackages/ui/src/styledSystem/StyleCacheProvider.tsxpackages/ui/src/styledSystem/createEmotionCache.tspackages/ui/tsdown.config.mts
🔗 Linked repositories identified
CodeRabbit considers these linked repositories for cross-repo context during reviews:
clerk/clerk_go(manual)clerk/dashboard(manual)clerk/accounts(manual)clerk/backoffice(manual)clerk/clerk(manual)clerk/clerk-docs(manual)clerk/cloudflare-workers(manual)
| test.afterAll(async () => { | ||
| await fakeUser.deleteIfExists(); | ||
| await app.teardown(); | ||
| }); |
There was a problem hiding this comment.
🩺 Stability & Availability | 🟡 Minor | ⚡ Quick win
Make E2E cleanup failure-safe.
Failed assertions can leak delFakeUser or delOrg, while failed entity cleanup can skip app.teardown(). Use try/finally for temporary entities and guarantee application teardown independently of API cleanup failures.
As per coding guidelines, implement proper test isolation and cleanup.
Also applies to: 219-243, 357-362, 404-438
🤖 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 `@integration/tests/composed-components.test.ts` around lines 127 - 130, Update
the afterAll cleanup blocks around fake users, organizations, and related
temporary entities to use try/finally so each entity deletion is attempted
safely and app.teardown() always runs independently of API cleanup failures.
Preserve the existing cleanup targets and ordering where possible while ensuring
failures in assertions or deletion do not prevent subsequent cleanup.
Source: Coding guidelines
| function findAddAnimationCall(calls: any[]) { | ||
| return calls.find(call => { | ||
| const keyframes = call[0]; | ||
| if (!Array.isArray(keyframes)) { | ||
| return false; | ||
| } | ||
| return keyframes.some( | ||
| (kf: any) => kf.opacity === 0 && typeof kf.transform === 'string' && kf.transform.includes('scale'), | ||
| ); | ||
| }); | ||
| } |
There was a problem hiding this comment.
📐 Maintainability & Code Quality | 🟡 Minor | ⚡ Quick win
🧩 Analysis chain
🏁 Script executed:
#!/bin/bash
set -euo pipefail
printf '\n== action-animation.test.tsx ==\n'
sed -n '1,220p' packages/ui/src/composed/__tests__/action-animation.test.tsx
printf '\n== auto-animate-strictmode.test.tsx ==\n'
sed -n '1,240p' packages/ui/src/composed/__tests__/auto-animate-strictmode.test.tsx
printf '\n== search for Animation typing patterns ==\n'
rg -n "Parameters<.*animate|Keyframe|Animation\s*\{|mockImplementation\(\s*\(\)\s*=>\s*\(\{.*finished" packages/ui/src -g '*.{ts,tsx}'Repository: clerk/javascript
Length of output: 7864
🏁 Script executed:
#!/bin/bash
set -euo pipefail
sed -n '1,220p' packages/ui/src/composed/__tests__/action-animation.test.tsx
printf '\n---\n'
sed -n '1,240p' packages/ui/src/composed/__tests__/auto-animate-strictmode.test.tsx
printf '\n---\n'
rg -n "Parameters<.*animate|Keyframe|Animation\\b|mockImplementation\\(\\s*\\(\\)\\s*=>\\s*\\(\\{.*finished" packages/ui/src -g '*.{ts,tsx}'Repository: clerk/javascript
Length of output: 11158
🏁 Script executed:
#!/bin/bash
set -euo pipefail
printf 'tsconfig files:\n'
fd -a "tsconfig*.json" .
printf '\npackage files mentioning lib/dom:\n'
rg -n '"lib"|dom' packages/ui/tsconfig*.json tsconfig*.json package.json -g 'tsconfig*.json' -g 'package.json' || trueRepository: clerk/javascript
Length of output: 3656
Type these animation test helpers instead of using any
packages/ui/src/composed/__tests__/action-animation.test.tsx#L16-L26andpackages/ui/src/composed/__tests__/auto-animate-strictmode.test.tsx#L28-L48: type the call tuples asParameters<Element['animate']>and the keyframes asKeyframe[]/Keyframeso the assertions stay aligned with the DOM API.packages/ui/src/composed/__tests__/auto-animate-strictmode.test.tsx#L62-L68: replace theas anymock result with anAnimation-typed fixture or a narrowPartial<Animation>cast.
📍 Affects 2 files
packages/ui/src/composed/__tests__/action-animation.test.tsx#L16-L26(this comment)packages/ui/src/composed/__tests__/auto-animate-strictmode.test.tsx#L28-L48packages/ui/src/composed/__tests__/auto-animate-strictmode.test.tsx#L62-L68
🤖 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 `@packages/ui/src/composed/__tests__/action-animation.test.tsx` around lines 16
- 26, Replace any-based animation helper types with
Parameters<Element['animate']> call tuples and Keyframe/Keyframe[] types in
findAddAnimationCall and the corresponding helpers in
packages/ui/src/composed/__tests__/action-animation.test.tsx (lines 16-26) and
packages/ui/src/composed/__tests__/auto-animate-strictmode.test.tsx (lines
28-48). In packages/ui/src/composed/__tests__/auto-animate-strictmode.test.tsx
(lines 62-68), replace the as any mock result with an Animation-typed fixture or
narrow Partial<Animation> cast.
Source: Coding guidelines
| // eslint-disable-next-line no-restricted-imports | ||
| import type { SerializedStyles } from '@emotion/react'; |
There was a problem hiding this comment.
📐 Maintainability & Code Quality | 🟡 Minor | ⚡ Quick win
🧩 Analysis chain
🏁 Script executed:
#!/bin/bash
set -euo pipefail
printf '--- file outline ---\n'
ast-grep outline packages/ui/src/styledSystem/createEmotionCache.ts --view expanded || true
printf '\n--- file contents ---\n'
cat -n packages/ui/src/styledSystem/createEmotionCache.tsRepository: clerk/javascript
Length of output: 245
🏁 Script executed:
#!/bin/bash
set -euo pipefail
python3 - <<'PY'
from pathlib import Path
p = Path('packages/ui/src/styledSystem/createEmotionCache.ts')
print(p.read_text())
PYRepository: clerk/javascript
Length of output: 1826
🏁 Script executed:
#!/bin/bash
set -euo pipefail
rg -n "cache\.insert|type Cache|insert\(" packages/ui/src packages/ui/src/styledSystem -g '*.ts' -g '*.tsx' || trueRepository: clerk/javascript
Length of output: 1235
🏁 Script executed:
#!/bin/bash
set -euo pipefail
rg -n '"`@emotion/cache`"|`@emotion/cache`' package.json packages -g 'package.json' -g 'pnpm-lock.yaml' -g 'yarn.lock' -g 'package-lock.json' || trueRepository: clerk/javascript
Length of output: 216
🏁 Script executed:
#!/bin/bash
set -euo pipefail
cat -n package.json | sed -n '1,220p'Repository: clerk/javascript
Length of output: 11839
🏁 Script executed:
#!/bin/bash
set -euo pipefail
cat -n packages/ui/package.json | sed -n '1,220p'Repository: clerk/javascript
Length of output: 6230
🌐 Web query:
@emotion/cache EmotionCache insert sheet type SerializedStyles Sheet TypeScript
💡 Result:
In Emotion, the EmotionCache interface and its associated methods govern how styles are processed and injected into the DOM. The core mechanism for style insertion involves the insert method within the EmotionCache instance [1][2]. EmotionCache Interface The EmotionCache is created using the createCache function and includes the following primary properties and methods: - insert: (selector: string, serialized: SerializedStyles, sheet: StyleSheet, shouldCache: boolean) => string | void [1][2] - sheet: An instance of StyleSheet, which handles the actual interaction with the DOM (appending/prepending style tags) [1][3]. - key: A string used as a prefix for class names and the data-emotion attribute [4][5]. - inserted: A record tracking which styles have already been processed to avoid redundant injections [1][2]. The insert Method The insert method is responsible for taking serialized styles and managing their placement [1]. - Parameters: - selector: The CSS selector for the styles (e.g., a class name selector) [1]. - serialized: An object of type SerializedStyles, which contains the name and the actual CSS rules [1][6]. - sheet: The StyleSheet instance where the rule should be added [1]. - shouldCache: A boolean indicating whether the result should be recorded in the cache's inserted object [1]. SerializedStyles Type The SerializedStyles type typically consists of at least a name (a unique hash of the styles) and the styles themselves (the CSS string) [1][6]. It is often generated by Emotion's internal serialization utilities when you use css or styled components [6][7]. StyleSheet The StyleSheet class (from @emotion/sheet) is the low-level manager for style tags [3]. It provides methods such as: - insert(rule: string): Injects a single CSS rule into the stylesheet [3]. - flush: Removes all styles managed by the sheet [3]. - hydrate(nodes: Node[]): Used for server-side rendering (SSR) to attach the cache to existing style tags [1][3]. In typical usage, you do not call insert manually; instead, Emotion handles this automatically when your components render. If you need custom behavior—such as changing where styles are injected—you configure the cache via createCache using options like container, insertionPoint, or prepend [4][5][3].
Citations:
- 1: https://github.com/emotion-js/emotion/blob/b882bcba/packages/cache/src/index.ts
- 2:
EmotionCachetype mismatch emotion-js/emotion#3216 - 3: https://github.com/emotion-js/emotion/blob/main/packages/sheet/README.md
- 4: https://emotion.sh/docs/@emotion/cache
- 5: https://github.com/emotion-js/emotion/blob/main/packages/cache/README.md
- 6: https://github.com/emotion-js/emotion/blob/main/packages/utils/src/index.ts
- 7: https://github.com/emotion-js/emotion/blob/b882bcba/packages/css/src/create-instance.ts
Remove the explicit any from the Emotion insert override. Let the assignment inherit cache.insert’s parameter types; sheet stays typed as Emotion’s StyleSheet, and the SerializedStyles import becomes unnecessary.
🤖 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 `@packages/ui/src/styledSystem/createEmotionCache.ts` around lines 3 - 4,
Update the Emotion insert override in createEmotionCache so its assigned
function inherits cache.insert’s parameter types instead of declaring an
explicit any; keep sheet typed as Emotion’s StyleSheet and remove the now-unused
SerializedStyles import.
Source: Coding guidelines
1 participant
Integration branch for the composed profile components feature.
The 7-PR review stack merges into this branch bottom-up; this PR merges the assembled feature into
mainas a single unit. Nothing lands inmainuntil this merges.Rebased onto latest
main, so the final integration is conflict-free. The stack table (added to every PR below) tracks progress.Stack
Reviewed as a stack. The 7 PRs merge bottom-up into release branch #9144, which integrates into
mainas a single unit.main(integration)@clerk/ui/experimental(public API)