-
-
Notifications
You must be signed in to change notification settings - Fork 5.5k
fix(kit,nuxt): expose global types to vue compiler #33026
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
|
|
@nuxt/kit
nuxt
@nuxt/rspack-builder
@nuxt/schema
@nuxt/vite-builder
@nuxt/webpack-builder
commit: |
Walkthrough
Estimated code review effort🎯 4 (Complex) | ⏱️ ~60 minutes Tip 🔌 Remote MCP (Model Context Protocol) integration is now available!Pro plan users can now connect to remote MCP servers from the Integrations page. Connect with popular remote MCPs such as Notion and Linear to add more context to your reviews and chats. 📜 Recent review detailsConfiguration used: CodeRabbit UI 💡 Knowledge Base configuration:
You can enable these sources in your CodeRabbit configuration. 📒 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. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (2)
✨ Finishing Touches
🧪 Generate unit tests
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. CodeRabbit Commands (Invoked using PR/Issue comments)Type 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: 2
🧹 Nitpick comments (2)
packages/nuxt/src/components/templates.ts (1)
124-135: Minor: tighten LazyComponent generic constraint.
Constraining T to DefineComponent improves inference and prevents accidental widening when T is not a component type.-type LazyComponent<T> = (T & DefineComponent<HydrationStrategies, {}, {}, {}, {}, {}, {}, { hydrated: () => void }>) +type LazyComponent<T extends DefineComponent> = (T & DefineComponent<HydrationStrategies, {}, {}, {}, {}, {}, {}, { hydrated: () => void }>)packages/kit/test/templates.spec.ts (1)
8-42: Great end-to-end coverage for the reported regression; consider adding a multi-template and shared-context case.
- This test proves globalTypeFiles exposure for a single addTypeTemplate call. The common real-world case is multiple calls (from Nuxt core + modules) and shared-context templates.
You can extend the spec with an additional test to catch array-merging regressions and shared exposure:
describe('addTypeTemplate', () => { it('should add type templates to vue global files', async () => { @@ await nuxt.close() }) + + it('should merge multiple global type files and support shared context', async () => { + const repoRoot = await findWorkspaceDir() + const rootDir = resolve(repoRoot, 'node_modules/.fixture', randomUUID()) + await mkdir(rootDir, { recursive: true }) + await writeFile(resolve(rootDir, 'app.vue'), ` + <script setup lang="ts"> + defineProps<FooProps>() + defineProps<BarProps>() + </script> + <template><div /></template> + `) + const nuxt = await loadNuxt({ + cwd: rootDir, + overrides: { + modules: [ + () => addTypeTemplate({ + filename: 'foo.d.ts', + getContents: () => ` + declare global { type FooProps = { a?: number } } + export {}; + `, + }), + () => addTypeTemplate({ + filename: 'bar.d.ts', + getContents: () => ` + declare global { type BarProps = { b?: string } } + export {}; + `, + }, { shared: true }), + ], + }, + }) + await expect(buildNuxt(nuxt)).resolves.not.toThrow() + await nuxt.close() + }) })
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
💡 Knowledge Base configuration:
- MCP integration is disabled by default for public repositories
- Jira integration is disabled by default for public repositories
- Linear integration is disabled by default for public repositories
You can enable these sources in your CodeRabbit configuration.
📒 Files selected for processing (4)
packages/kit/src/template.ts(1 hunks)packages/kit/test/templates.spec.ts(1 hunks)packages/nuxt/src/components/module.ts(2 hunks)packages/nuxt/src/components/templates.ts(4 hunks)
🧰 Additional context used
📓 Path-based instructions (2)
**/*.{ts,tsx}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
Follow standard TypeScript conventions and best practices
Files:
packages/kit/test/templates.spec.tspackages/nuxt/src/components/module.tspackages/kit/src/template.tspackages/nuxt/src/components/templates.ts
**/*.{test,spec}.{ts,tsx,js,jsx}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
Write unit tests for core functionality using
vitest
Files:
packages/kit/test/templates.spec.ts
🧠 Learnings (4)
📓 Common learnings
Learnt from: CR
PR: nuxt/nuxt#0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-07-18T16:46:07.446Z
Learning: Applies to **/*.vue : Use `<script setup lang="ts">` and the composition API when creating Vue components
📚 Learning: 2025-07-18T16:46:07.446Z
Learnt from: CR
PR: nuxt/nuxt#0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-07-18T16:46:07.446Z
Learning: Applies to **/*.{test,spec}.{ts,tsx,js,jsx} : Write unit tests for core functionality using `vitest`
Applied to files:
packages/kit/test/templates.spec.ts
📚 Learning: 2025-07-18T16:46:07.446Z
Learnt from: CR
PR: nuxt/nuxt#0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-07-18T16:46:07.446Z
Learning: Applies to **/e2e/**/*.{ts,js} : Write end-to-end tests using Playwright and `nuxt/test-utils`
Applied to files:
packages/kit/test/templates.spec.ts
📚 Learning: 2024-11-05T15:22:54.759Z
Learnt from: GalacticHypernova
PR: nuxt/nuxt#26468
File: packages/nuxt/src/components/plugins/loader.ts:24-24
Timestamp: 2024-11-05T15:22:54.759Z
Learning: In `packages/nuxt/src/components/plugins/loader.ts`, the references to `resolve` and `distDir` are legacy code from before Nuxt used the new unplugin VFS and will be removed.
Applied to files:
packages/nuxt/src/components/module.tspackages/nuxt/src/components/templates.ts
🧬 Code graph analysis (2)
packages/kit/test/templates.spec.ts (1)
packages/kit/src/template.ts (1)
addTypeTemplate(71-113)
packages/nuxt/src/components/module.ts (2)
packages/kit/src/template.ts (1)
addTemplate(23-49)packages/nuxt/src/components/templates.ts (1)
componentsDeclarationTemplate(136-152)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (2)
- GitHub Check: build
- GitHub Check: code
🔇 Additional comments (6)
packages/nuxt/src/components/templates.ts (3)
4-4: Type-only import is correct and avoids runtime bundling.
Importing Nuxt types as type-only keeps the generated bundles clean.
154-174: Vue GlobalComponents augmentation looks good.
- Module augmentation is scoped and ends with export {} to keep it as a module.
- Mapping includes Lazy variants with LazyComponent.
135-153: Runtime export confirmed forcomponentNames
ThecomponentNamesTemplateinpackages/nuxt/src/components/templates.tsgeneratescomponent-names.mjswithexport const componentNames = [ /* … */ ]ensuring a runtime module exports
componentNames.The transform plugin in
packages/nuxt/src/components/plugins/transform.tsinjects this via Unimport’s virtual module#components, mappingname: 'componentNames', from: '#build/component-names', virtualImports: ['#components']so that any
import { componentNames } from '#components'is rewritten to pull from
component-names.mjs. No further changes are needed.packages/nuxt/src/components/module.ts (2)
9-9: Importing componentsDeclarationTemplate is consistent with the new two-template split.
Keeps declarations and Vue augmentation concerns separated.
131-133: Order of template registration is sensible; one note on references.
- components.d.ts is added via addTemplate (written to disk) and is resolved by the #components path mapping (set later in prepare:types), so it does not need an explicit reference entry.
- types/components.d.ts uses addTypeTemplate so it’s referenced and participates in TS global augmentation. LGTM.
If you want extra safety, add an assertion in a unit test that importing from '#components' resolves types (e.g. a small TS program that imports a known component symbol and checks its type).
packages/kit/src/template.ts (1)
80-95: Retaining prepare:types references preserves editor TS awareness.
Good that references are still pushed for nuxt/node/shared contexts; this maintains compatibility with tooling that relies on TS triple-slash references.
| const componentTypes = app.components.filter(c => !c.island).map((c) => { | ||
| const type = `typeof ${genDynamicImport(isAbsolute(c.filePath) | ||
| ? relative(buildDir, c.filePath).replace(NON_VUE_RE, '') | ||
| : c.filePath.replace(NON_VUE_RE, ''), { wrapper: false })}['${c.export}']` | ||
| const isServerOnly = c.mode === 'server' && c.filePath !== serverPlaceholderPath && !app.components.some(other => other.pascalName === c.pascalName && other.mode === 'client') | ||
| return [ | ||
| c.pascalName, | ||
| isServerOnly ? `IslandComponent<${type}>` : type, | ||
| ] |
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.
🛠️ Refactor suggestion
Potential mismatch when identifying the server placeholder and unconditional IslandComponent usage.
- Comparing c.filePath to serverPlaceholderPath by raw string can fail if one side has an added extension (e.g. .mjs) or differing normalisation, causing placeholders to be misclassified as “server-only”.
- IslandComponent<…> is selected even when experimental.componentIslands is disabled, but the IslandComponent alias is only emitted when the flag is on. This can yield unresolved type references in projects with .server components and islands disabled.
Apply this diff to robustly compare placeholder paths and only use IslandComponent when islands are enabled:
function resolveComponentTypes (nuxt: Nuxt, app: NuxtApp) {
const buildDir = nuxt.options.buildDir
const serverPlaceholderPath = resolve(distDir, 'app/components/server-placeholder')
const componentTypes = app.components.filter(c => !c.island).map((c) => {
const type = `typeof ${genDynamicImport(isAbsolute(c.filePath)
? relative(buildDir, c.filePath).replace(NON_VUE_RE, '')
: c.filePath.replace(NON_VUE_RE, ''), { wrapper: false })}['${c.export}']`
- const isServerOnly = c.mode === 'server' && c.filePath !== serverPlaceholderPath && !app.components.some(other => other.pascalName === c.pascalName && other.mode === 'client')
+ const stripExt = (p: string) => p.replace(/\.\w+$/, '')
+ const isServerOnly =
+ c.mode === 'server' &&
+ stripExt(c.filePath) !== stripExt(serverPlaceholderPath) &&
+ !app.components.some(other => other.pascalName === c.pascalName && other.mode === 'client')
return [
c.pascalName,
- isServerOnly ? `IslandComponent<${type}>` : type,
+ (nuxt.options.experimental.componentIslands && isServerOnly) ? `IslandComponent<${type}>` : type,
]
})
return componentTypes
}
CodSpeed Performance ReportMerging #33026 will not alter performanceComparing Summary
|
🔗 Linked issue
resolves #29757
📚 Description
This adds global type files registered with
addTypeTemplate(in shared/nuxt contexts) so that Vue is aware of them for the purpose of resolving component props.