-
-
Notifications
You must be signed in to change notification settings - Fork 5.3k
feat(nuxt): scan named exports with addComponentExports
#27155
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Conversation
|
@danielroe Hi can you review this PR This PR eliminates adding Nuxt module step in shadcn-vue Nuxt installation docs (shadcn-nuxt and manual tab) Related issue in |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Sorry for the long delay in feedback on this.
I'm worried it would make component names less predictable (though up to be convinced otherwise). What about, to start with, a 'addComponentExports' kit utility that would take a file path/npm package that would then be scanned for named exports, which then get added automatically?
WalkthroughThe changes introduce a new utility function, 📜 Recent review detailsConfiguration used: CodeRabbit UI 📒 Files selected for processing (2)
✅ Files skipped from review due to trivial changes (1)
🚧 Files skipped from review as they are similar to previous changes (1)
⏰ Context from checks skipped due to timeout of 90000ms (3)
🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
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 (
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Actionable comments posted: 0
🧹 Nitpick comments (1)
packages/nuxt/src/components/scan.ts (1)
102-146
: Good encapsulation of component creation logic.The asynchronous
getComponents
function neatly centralises export handling, name resolution, and duplicate checks for each export. This approach should ensure robust scanning for multiple named exports across different file types.Consider extracting this logic into a separate module for maintainability, especially as the codebase grows and more scanning features are added.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (3)
packages/nuxt/src/components/scan.ts
(3 hunks)packages/nuxt/test/components-fixture/components/Named.ts
(1 hunks)packages/nuxt/test/scan-components.test.ts
(4 hunks)
🧰 Additional context used
🧬 Code Graph Analysis (1)
packages/nuxt/src/components/scan.ts (4)
packages/schema/src/index.ts (1)
Component
(3-3)packages/nuxt/src/core/utils/index.ts (2)
resolveComponentNameSegments
(1-1)QUOTE_RE
(18-18)packages/nuxt/src/core/utils/names.ts (1)
resolveComponentNameSegments
(20-45)packages/nuxt/src/utils.ts (1)
logger
(13-13)
🔇 Additional comments (4)
packages/nuxt/test/components-fixture/components/Named.ts (1)
1-13
: Looks good overall.This new file properly demonstrates both a default and a named export using
defineComponent
. No issues spotted with the syntax or logic.packages/nuxt/src/components/scan.ts (2)
84-91
: Ensure consistent file naming logic.When handling the file extension and constructing
fileName
, the code now consistently extractsfileExt
usingextname
. Ensure this logic remains in sync with the newly supported.ts
,.js
,.tsx
, and.jsx
files, and that it gracefully handles edge cases (e.g., files lacking an extension).
168-177
: Multi-export scanning looks solid.Using
resolveModuleExportNames
for.ts
,.js
,.tsx
,.jsx
files is a clean approach for scanning multiple named exports. Automatically creating a component definition for each export is both convenient and user-friendly.packages/nuxt/test/scan-components.test.ts (1)
52-55
: Test coverage updates are excellent.Including
.ts
in theextensions
and updating thepattern
ensures that TypeScript files are properly scanned. Adding two new components to theexpectedComponents
array verifies both the named and default exports fromNamed.ts
.Also applies to: 67-70, 81-86, 135-160
@nuxt/kit
nuxt
@nuxt/rspack-builder
@nuxt/schema
@nuxt/vite-builder
@nuxt/webpack-builder
commit: |
CodSpeed Performance ReportMerging #27155 will not alter performanceComparing Summary
|
addComponentExports
oops, missed my suggestion. refactoring... |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Actionable comments posted: 0
🧹 Nitpick comments (3)
packages/kit/test/components.spec.ts (1)
39-75
: Inline snapshot validation is thorough, but consider negative testing.The inline snapshot coverage is a strong validation step for verifying registered components and key properties. It could be beneficial to add tests for edge cases, such as when no default export or named exports are present.
packages/kit/src/components.ts (2)
24-40
: NewaddComponentExports
function is clear and well-structured.Registering named exports as components with optional prefix correctly integrates with
components:dirs
. This is an elegant solution, but consider error handling ifresolveModuleExportNames
yields an empty array.
50-76
: Priority conflict logic is well-implemented, but watch for partial overrides.The code warns when overriding components with equal priority, which preserves transparency. If partial overrides ever arise in edge cases, more nuanced handling might be needed.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (2)
packages/kit/package.json
is excluded by!**/package.json
pnpm-lock.yaml
is excluded by!**/pnpm-lock.yaml
,!pnpm-lock.yaml
📒 Files selected for processing (6)
packages/kit/src/components.ts
(3 hunks)packages/kit/src/index.ts
(1 hunks)packages/kit/test/components.spec.ts
(1 hunks)packages/nuxt/src/app/components/nuxt-error-boundary.ts
(2 hunks)test/basic.test.ts
(1 hunks)test/fixtures/basic/pages/error/error-boundary.vue
(1 hunks)
✅ Files skipped from review due to trivial changes (1)
- packages/kit/src/index.ts
🧰 Additional context used
🧬 Code Graph Analysis (2)
test/basic.test.ts (1)
test/utils.ts (2)
renderPage
(11-50)expectNoClientErrors
(52-64)
packages/kit/src/components.ts (2)
packages/kit/src/index.ts (6)
addComponentExports
(19-19)AddComponentOptions
(20-20)useNuxt
(21-21)resolvePath
(28-28)addComponent
(19-19)logger
(32-32)test/fixtures/basic/nuxt.config.ts (1)
components
(237-243)
⏰ Context from checks skipped due to timeout of 90000ms (3)
- GitHub Check: codeql (javascript-typescript)
- GitHub Check: build
- GitHub Check: code
🔇 Additional comments (13)
test/basic.test.ts (1)
1245-1251
: Great addition of test coverage for error boundaries!This test verifies that the
NuxtErrorBoundary
component correctly catches errors and renders fallback content without producing client-side errors. It's an essential test for ensuring error handling reliability, particularly during component failures at runtime.test/fixtures/basic/pages/error/error-boundary.vue (2)
1-12
: LGTM! Well-structured test fixture for error boundary testing.This template correctly uses
NuxtErrorBoundary
with both the default and error slots, creating a proper test case for error handling.
14-24
: Well-implemented broken component for testing.The
MyBrokenComponent
is appropriately designed to trigger an error during theonMounted
lifecycle hook, which is a realistic failure scenario for testing the error boundary functionality.packages/nuxt/src/app/components/nuxt-error-boundary.ts (2)
3-3
: Appropriate import for deferred error handling.Adding the
onNuxtReady
import supports the new deferred error handling during hydration.
17-36
: Excellent refactoring of error handling logic.This refactoring significantly improves error handling during hydration:
- Moving
useNuxtApp()
inside the client-only block is more appropriate- The
handleError
helper function effectively encapsulates error emission logic- Different handling paths for hydration vs non-hydration states ensures errors don't disrupt the hydration process
- Deferring error handling until the app is ready during hydration is a more robust approach
This change makes the error boundary more reliable, especially during the critical hydration phase.
packages/kit/test/components.spec.ts (4)
1-4
: Imports look good!These foundational imports set up Vitest, Hookable, schema typing, and path utilities. They align well with project conventions.
6-17
: Mock hooks and Nuxt instance are properly configured.Defining
mockHooks
andmockNuxt
ensures that tests run in isolation and correctly simulate Nuxt’s environment. This approach is both neat and maintainable.
19-23
: Effective mocking of context references.Mocking
tryUseNuxt
anduseNuxt
here allows for complete control over the Nuxt instance without side effects. This is a solid approach to isolating the tests from the actual Nuxt runtime.
25-38
: Concise test logic setup.The new test suite for
addComponentExports
is clear, with a properly prepared resolver and hook calls. This structure ensures readiness for subsequent test steps and fosters clarity of the tested functionality.packages/kit/src/components.ts (4)
3-3
: Importing from ‘mlly’ is correct.Reliable resolution of export names ensures robust detection of named exports, aligning with the new scanning feature.
7-7
: ImportingresolvePath
is well-chosen.Leveraging
resolvePath
is a consistent approach which mirrors existing path resolution patterns within the Nuxt ecosystem.
45-47
:addComponent
remains simple and complements the new batch registration logic.Delegating logic to
normalizeComponent
andaddComponents
ensures code reuse and maintainability.
78-100
:normalizeComponent
is consistent and uses defaults effectively.The function ensures each component is assigned well-defined properties. The default mode detection from filename patterns is neatly handled.
Merged this as a separate utility due to the potential performance overhead but I'd be very open to reconsidering when we have a |
Co-authored-by: Daniel Roe <daniel@roe.dev>
Co-authored-by: Daniel Roe <daniel@roe.dev>
🔗 Linked issue
fix #25340
📚 Description
Hey 👋
This PR allows to have auto-imports for named components in ts/js/tsx/jsx files when using addComponentDir or with
components/**