javascript icon indicating copy to clipboard operation
javascript copied to clipboard

feat(ui): Simplify chunk config, optimize modal initialization

Open brkalow opened this issue 2 months ago • 4 comments

Description

  • Remove chunk config to prevent sign up chunk from being loaded when it isn't needed
  • Optimize initialization of modals to reduce unnecessary invocations

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

  • Chores
    • Integrated diagnostic build tooling to enhance development workflows and troubleshooting capabilities
    • Refactored internal component rendering architecture for improved code maintainability
    • Optimized build configuration and development server settings for better developer experience

✏️ Tip: You can customize this high-level summary in your review settings.

brkalow avatar Dec 13 '25 06:12 brkalow

🦋 Changeset detected

Latest commit: cf8053e626e211c74d8f001ad29db92dce9a48dc

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

This PR includes changesets to release 0 packages

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

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

changeset-bot[bot] avatar Dec 13 '25 06:12 changeset-bot[bot]

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

Project Deployment Review Updated (UTC)
clerk-js-sandbox Ready Ready Preview, Comment Dec 13, 2025 6:50am

vercel[bot] avatar Dec 13 '25 06:12 vercel[bot]

[!IMPORTANT]

Review skipped

Review was skipped due to path filters

:no_entry: Files ignored due to path filters (1)
  • pnpm-lock.yaml is excluded by !**/pnpm-lock.yaml

CodeRabbit blocks several paths by default. You can override this behavior by explicitly including those paths in the path filters. For example, including **/dist/** will override the default block on the dist directory, by removing the pattern from both the lists.

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Walkthrough

Adding RsDoctor build diagnostics integration to the rspack configuration with a conditional build:rsdoctor command. Refactoring rspack.config.js to be asynchronous with plugin integration and enhanced dev server configuration. Inlining modal component rendering in Components.tsx to eliminate intermediate mounted variables.

Changes

Cohort / File(s) Summary
Build Configuration & Dependencies
packages/ui/package.json, packages/ui/rspack.config.js
Added build:rsdoctor command and @rsdoctor/rspack-plugin dev dependency. Refactored rspack config to async, conditionally integrating RsDoctor plugin based on RSDOCTOR env var. Removed SignUp cache group, tightened common chunking test. Enhanced dev server with error/warning overlay and runtimeErrors flag.
Changeset
.changeset/chatty-papers-obey.md
Added formatting lines (dashes) to changeset entry.
Component Refactoring
packages/ui/src/Components.tsx
Inlined modal component rendering directly within JSX, removing separate mountedXModal variable declarations for SignIn, SignUp, UserProfile, UserVerification, OrganizationProfile, CreateOrganization, Waitlist, BlankCaptcha, and GoogleOneTap modals.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

  • packages/ui/rspack.config.js: Requires careful review of async conversion logic, conditional RsDoctor plugin loading, and dev server overlay configuration changes
  • packages/ui/src/Components.tsx: Verify modal rendering refactoring maintains functional equivalence and proper event handler binding across all 9 modal components
  • packages/ui/package.json: Confirm new dependency version and build command syntax

Poem

🐰 A builder's tale in configs bright,
RsDoctor shines—diagnostics in sight!
Modals now dance where they're meant to be,
Inlined and swift, a refactor spree! 🚀

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 accurately describes the main changes: simplifying chunk configuration and optimizing modal initialization, which aligns with the PR objectives and file-level changes.
Docstring Coverage ✅ Passed No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

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

coderabbitai[bot] avatar Dec 13 '25 06:12 coderabbitai[bot]

Open in StackBlitz

@clerk/agent-toolkit

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

commit: cf8053e

pkg-pr-new[bot] avatar Dec 13 '25 06:12 pkg-pr-new[bot]

The code looks fine. What is the specific UI flow case we are solving for?

jacekradko avatar Dec 19 '25 16:12 jacekradko