feat(unplugin): add support for prose components#6198
Conversation
|
Note Reviews pausedIt looks like this branch is under active development. To avoid overwhelming you with review comments due to an influx of new commits, CodeRabbit has automatically paused this review. You can configure this behavior by changing the Use the following commands to manage reviews:
Use the checkboxes below for quick actions:
📝 WalkthroughWalkthroughThis change introduces a new Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes 🚥 Pre-merge checks | ✅ 2 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches
🧪 Generate unit tests (beta)
📝 Coding Plan
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. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 4
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@docs/content/docs/1.getting-started/2.installation/2.vue.md`:
- Around line 807-809: The note currently tells users they can import components
from `@nuxt/ui/components` when auto-import is disabled but omits the manual
import path required for Prose* components; update the prose to mention both
import locations by adding that Prose components must be imported from
`@nuxt/ui/components/prose` (in addition to `@nuxt/ui/components`) so the
manual-import instructions cover `Prose*` components as well.
In `@package.json`:
- Around line 34-41: The build config is missing source entry points for the new
runtime component exports; update the entries array in build.config.ts to
include './src/runtime/components' and './src/runtime/components/prose' so the
build will emit dist/runtime/components/index.js and
dist/runtime/components/prose/index.js; locate the entries array (entries) in
build.config.ts and add those two string paths to it alongside the existing
entries.
In `@src/module.ts`:
- Line 164: The optional flag currently sets optional: !userUiOptions.prose &&
!userUiOptions.mdc && !userUiOptions.content which wrongly makes `@nuxtjs/mdc`
required when prose is true; modify the expression that computes the optional
property so it no longer includes userUiOptions.prose (keep only
userUiOptions.mdc and userUiOptions.content), i.e., change the condition that
assigns optional to exclude prose while leaving prose handling elsewhere intact
(refer to the optional assignment and the userUiOptions.prose /
userUiOptions.mdc / userUiOptions.content symbols).
In `@src/plugins/components.ts`:
- Around line 67-77: The current resolution uses filteredSources in fixed order
so filename-based lookups can pick defaultComponents before prose-specific
sources; update the resolution logic that looks up by filename (the "resolve by
filename" block that iterates filteredSources around where filteredSources is
defined/used) to prioritize a source whose scope matches the importer: detect
the importer's scope (e.g., contains "/components/prose" or matches the
createComponentSource label like 'Prose') and, when resolving overlapping names
(e.g., Accordion.vue, Tabs.vue), prefer sources created by createComponentSource
for that scope (reorder or filter filteredSources per-importer before lookup),
applying the same change to the other similar lookup sites noted (the other
filename-resolution blocks around the 103–107 area).
🪄 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: Organization UI
Review profile: CHILL
Plan: Pro
Run ID: 0f60fb38-bc82-4979-9d9f-f8ae21f3a317
📒 Files selected for processing (10)
docs/content/docs/1.getting-started/2.installation/1.nuxt.mddocs/content/docs/1.getting-started/2.installation/2.vue.mdpackage.jsonsrc/module.tssrc/plugins/components.tssrc/runtime/components/index.tssrc/runtime/components/prose/index.tssrc/templates.tssrc/unplugin.tssrc/utils/defaults.ts
|
With this PR we could also mark #6137 as resolved via workaround? Instead of relying on |
commit: |
Update the CLI to automatically add new components to the barrel index.ts files and add the step to the contributing guide checklist.
benjamincanac
changed the title
prose option and component barrel exportsprose option and direct component imports
benjamincanac
changed the title
prose option and direct component importsprose option
benjamincanac
changed the title
prose optionprose option
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@cli/commands/make/component.mjs`:
- Around line 80-81: Remove the padded blank line immediately before the closing
block brace in the make component command so the block end is not separated by
an extra empty line; edit the closing '}' in cli/commands/make/component.mjs to
have no blank line above it (i.e., collapse the empty line so the prior
statement is directly followed by the '}') to satisfy `@stylistic/padded-blocks`
and allow pnpm run lint to pass.
🪄 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: Organization UI
Review profile: CHILL
Plan: Pro
Run ID: 14ecf2ff-8136-45a0-8aef-f2f4de267e23
📒 Files selected for processing (3)
cli/commands/make/component.mjsdocs/content/docs/1.getting-started/2.installation/2.vue.mdsrc/module.ts
🚧 Files skipped from review as they are similar to previous changes (1)
- docs/content/docs/1.getting-started/2.installation/2.vue.md
There was a problem hiding this comment.
🧹 Nitpick comments (1)
src/plugins/plugins.ts (1)
51-54: Use full relative paths and genSafeVariableName for prose component imports to prevent collisions.Line 52 currently extracts only the basename, which would cause duplicate names if the prose directory structure changes (e.g., adding a root-level
Caution.vuewhencallout/Caution.vueexists). Additionally, it doesn't validate generated names as safe JavaScript identifiers.Refactor to use the full relative path (similar to how plugins are handled on lines 57 and 62) and apply
genSafeVariableNamefor import identifiers:Suggested refactor
- const proseImports = proseComponents.map((p) => { - const name = `Prose${p.split('/').pop()?.replace(/\.vue$/, '')}` - return { name, path: p } - }) + const proseImports = proseComponents.map((p) => { + const rel = p + .replace(join(runtimeDir, 'components/prose') + '/', '') + .replace(/\.vue$/, '') + + const componentName = `Prose${rel + .split('/') + .map(part => part.charAt(0).toUpperCase() + part.slice(1)) + .join('')}` + + const importName = genSafeVariableName(componentName) + return { componentName, importName, path: p } + }) ... - ${proseImports.map(c => `import ${c.name} from "${c.path}"`).join('\n')} + ${proseImports.map(c => `import ${c.importName} from "${c.path}"`).join('\n')} ... -${proseImports.map(c => ` app.component('${c.name}', ${c.name})`).join('\n')} +${proseImports.map(c => ` app.component('${c.componentName}', ${c.importName})`).join('\n')}🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/plugins/plugins.ts` around lines 51 - 54, proseImports currently builds identifiers from only the basename which risks collisions and may produce invalid JS identifiers; update the mapping that creates proseImports (where proseComponents is used) to use the full relative path for path (like how plugins are handled) and generate the import name via genSafeVariableName instead of `Prose${...}` so import identifiers are safe and unique; locate the mapping that returns { name, path } for prose components and replace the basename logic with a full-path based name created by calling genSafeVariableName on a unique string (e.g., the relative path) while keeping path set to the full relative path.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Nitpick comments:
In `@src/plugins/plugins.ts`:
- Around line 51-54: proseImports currently builds identifiers from only the
basename which risks collisions and may produce invalid JS identifiers; update
the mapping that creates proseImports (where proseComponents is used) to use the
full relative path for path (like how plugins are handled) and generate the
import name via genSafeVariableName instead of `Prose${...}` so import
identifiers are safe and unique; locate the mapping that returns { name, path }
for prose components and replace the basename logic with a full-path based name
created by calling genSafeVariableName on a unique string (e.g., the relative
path) while keeping path set to the full relative path.
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
Run ID: 917a1d01-87a6-45f4-a291-f1642b4491ff
📒 Files selected for processing (1)
src/plugins/plugins.ts
benjamincanac
changed the title
prose option2 participants
🔗 Linked issue
❓ Type of change
📚 Description
This PR adds a
proseoption to enable prose component auto-imports, theme generation, and global component registration in Vite (previously Nuxt-only, gated behind @nuxtjs/mdc or @nuxt/content module detection).📝 Checklist