Uh oh!
There was an error while loading. Please reload this page.
feat(ui): add composed profile shell, providers infra and stub router - #9133
Conversation
|
Important Review skippedAuto reviews are disabled on base/target branches other than the default branch. Please check the settings in the CodeRabbit UI or the ⚙️ Run configurationConfiguration used: Repository YAML (base), Repository UI (inherited) Review profile: CHILL Plan: Pro Plus Run ID: You can disable this status message by setting the Use the checkbox below for a quick retry:
Comment |
The latest updates on your projects. Learn more about Vercel for GitHub.
|
6ff5709 to
cb7fd8aCompare411027c to
9c65deeComparecb7fd8a to
13f68a7Compare9c65dee to
e791dc6Compare13f68a7 to
669a561Compare669a561 to
8e09a06Comparee791dc6 to
5cb97b6Compare| } | ||
| } | ||
| export function useBillingRouter(): { router: RouteContextValue; route: BillingRoute } { |
There was a problem hiding this comment.
is this a pattern we're going to need elsewhere? We have the VirtualRouter component already, which could potentially be usable here in some fashion, but that one is sort of geared towards modal routing so might not slot in as cleanly.
Food for thought, don't think we need to adjust now but I expect to see this pattern emerge more than once.
There was a problem hiding this comment.
Agreed it'''ll recur. Not reusing VirtualRouter: that'''s BaseRouter matching, but composed is leaf-only (stubRouter throws on /matches). Typed in-memory state is the intended shape here. Added a comment noting why. Extract when a 2nd composed router shows up.
| export function useRequirePage(componentName: string): boolean { | ||
| const page = useContext(PageContext); | ||
| if (!page) { | ||
| if (typeof __DEV__ === 'undefined' || __DEV__) { |
There was a problem hiding this comment.
this would only throw when the package is being developed, not in Clerk dev mode. I think this is intentional, but calling it out regardless
There was a problem hiding this comment.
Good catch — was dead for consumers (__DEV__ baked false in published @clerk/ui). Now gated on isDevelopmentSDK(clerk), same as createCustomPages: throws in consumer dev, null in prod. Throw tests mark the fixture as a dev SDK.
| const store = new WeakMap<object, EmotionCache>(); | ||
| // their own. The cache is stored with the nonce/cssLayerName it was built from so a | ||
| // later change to either rebuilds it (matching the AIO StyleCacheProvider) instead | ||
| // of pinning whatever the first-mounted root happened to see. |
There was a problem hiding this comment.
not sure if this is really needed. I would recommend that the comment is trimmed down to more clearly explain why this construct exists, or removed.
| // Match the portal path's normalization (Components.tsx:209) so a cssLayerName | ||
| // nested inside appearance.theme gets hoisted to top-level for @layer wrapping. |
There was a problem hiding this comment.
this reference file / line no. will get out of date quickly
There was a problem hiding this comment.
Dropped the file:line ref.
| // SAFETY: __internal_environment is a real getter on the clerk-js Clerk class | ||
| // but not on the shared LoadedClerk interface. Narrowing to an optional field | ||
| // (not `any`) keeps the access typed and forces callers to handle `undefined`. |
There was a problem hiding this comment.
| // SAFETY: __internal_environment is a real getter on the clerk-js Clerk class | |
| // but not on the shared LoadedClerk interface. Narrowing to an optional field | |
| // (not `any`) keeps the access typed and forces callers to handle `undefined`. |
There was a problem hiding this comment.
Compressed to one line (kept a terse why for the cast) + dropped the duplicate type-def comment above it.
5cb97b6 to
70d924cCompareae62010 to
3e7ace2Compare… on nonce/layer Consolidate the duplicated environment + module-manager reads from the composed providers into resolveComposedClerkRuntime, dropping the `as any` casts for narrow structural types and warning once on version skew instead of a silent blank render. Store the shared emotion cache with the nonce/cssLayerName it was built from so a later change rebuilds it (matching the AIO StyleCacheProvider).
Collapse the multi-line SAFETY/why blocks in ProfileProviderShell and styleCacheStore to terse single lines, drop the brittle Components.tsx:209 file/line reference, and note why composed billing uses a typed in-memory router instead of VirtualRouter/BaseRouter.
__DEV__ is baked to false in the published @clerk/ui, so useRequirePage's misuse error never reached consumers. Gate it on isDevelopmentSDK(clerk) — the same helper createCustomPages uses — so it throws in the consumer's dev SDK and degrades to a null render in production.
3e7ace2 to
5f47096CompareUh oh!
There was an error while loading. Please reload this page.
Stack 4/7. New (unexported) infra for the composed profile API:
ProfileProviderShell,stubRouter,useBillingRouter,useRequirePage,PageContext,createSection, plus the sharedAPIKeysSection/BillingSectionused by both User and Org composed dirs.Nothing is exported from the package yet.
Changesets live only on the release PR #9144; this PR carries none.
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)