feat:monorepo #342
feat:monorepo #342
Conversation
❌ Deploy Preview for antd-design-x-vue failed. Why did it fail? →
|
|
Important Review skippedDraft detected. Please check the settings in the CodeRabbit UI or the You can disable this status message by setting the WalkthroughThis update restructures the project into a monorepo, introducing multiple package directories and workspace management with pnpm. New package manifests, TypeScript configurations, and build scripts are added for individual packages and internal utilities. Configuration files and import paths are updated to align with the new multi-package structure. Changes
Sequence Diagram(s)sequenceDiagram
participant Dev as Developer
participant Monorepo as Monorepo Root
participant Docs as Docs Package
participant Core as ant-design-x-vue Package
participant Components as Components Package
participant Utils as Build Utils
Dev->>Monorepo: Run pnpm install / scripts
Monorepo->>Docs: Forward workspace commands (dev/build/preview)
Monorepo->>Core: Forward workspace build/test/lint commands
Monorepo->>Components: Forward workspace test/lint commands
Monorepo->>Utils: Build internal utilities with unbuild
Core->>Components: Re-export components via index.ts
Docs->>Utils: Import build-utils via package
Possibly related PRs
Suggested labels
Suggested reviewers
Poem
✨ 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 (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 9
🧹 Nitpick comments (8)
.gitignore (1)
15-15: Inconsistent header capitalization
The header# local env filesuses lowercase "l", whereas other section headers use Title Case. Consider renaming it to# Local Env Filesfor consistency.tsconfig.json (1)
21-21: Consider including all package directories for comprehensive type checking.The include path only covers
packages/components/**/*but excludes other packages likepackages/ant-design-x-vue. Consider whether other package directories should be included for complete type coverage.If
packages/ant-design-x-vueshould also be type-checked, update the include path:- "include": ["packages/components/**/*", "docs/**/*", "internal/**/*"], + "include": ["packages/**/*", "docs/**/*", "internal/**/*"],docs/package.json (1)
2-5: Consider version consistency and complete metadata.The version
1.0.0seems high for an initial monorepo setup, especially compared to the components package at0.0.1. Also consider filling in the description for better package identification.Consider updating:
- "version": "1.0.0", - "description": "", - "main": "", + "version": "0.1.0", + "description": "Documentation site for ant-design-x-vue",Remove the empty
mainfield since it's not needed for a documentation package.tsconfig.build.json (1)
23-28: Consider including Vue files in build
Currently only.tsfiles under subfolders are included. To enable type-checking in.vuecomponents, you may want to add"packages/components/**/*.vue"to theincludearray.docs/tsconfig.json (1)
25-27: Broaden or tighten include patterns as needed
You’re including all files under*/*,**/*, and.vitepress/**/*. If you only need TS/Vue code, consider restricting patterns to.ts,.mts, and.vueextensions to speed up editor tooling.packages/ant-design-x-vue/package.json (3)
2-6: Add repository URL metadata
To ensure consumers and tools can locate the source, include theurl(and optionallydirectory) in therepositoryfield:"repository": { - "type": "git" + "type": "git", + "url": "https://github.com/wzc520pyfm/ant-design-x-vue.git", + "directory": "packages/ant-design-x-vue" },Also applies to: 15-17
24-31: Consider a simpler CSS export path
Exporting the CSS under./style.cssmakes imports more ergonomic:"exports": { ".": { "types": "./dist/typings/index.d.ts", "import": "./dist/index.mjs", "require": "./dist/index.umd.js" }, - "./dist/style.css": "./dist/style.css" + "./style.css": "./dist/style.css" }
39-46: No direct tests for this package
Thetestscript only invokes component tests. Ifant-design-x-vuehas its own logic, consider adding tests here or clarifying that it’s purely a re-export layer.Let me know if you’d like sample test scaffolding for this package.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (1)
pnpm-lock.yamlis excluded by!**/pnpm-lock.yaml
📒 Files selected for processing (18)
.gitignore(1 hunks)docs/.vitepress/config.mts(1 hunks)docs/.vitepress/plugins/demo.ts(1 hunks)docs/.vitepress/plugins/markdown-transform.ts(1 hunks)docs/package.json(1 hunks)docs/tsconfig.json(1 hunks)internal/build-utils/build.config.ts(1 hunks)internal/build-utils/package.json(1 hunks)package.json(2 hunks)packages/ant-design-x-vue/package.json(1 hunks)packages/ant-design-x-vue/src/index.ts(1 hunks)packages/ant-design-x-vue/vite.config.mts(2 hunks)packages/components/package.json(1 hunks)play/package.json(2 hunks)play/vite.config.ts(1 hunks)pnpm-workspace.yaml(1 hunks)tsconfig.build.json(2 hunks)tsconfig.json(1 hunks)
🔇 Additional comments (26)
pnpm-workspace.yaml (1)
2-5: Workspace Patterns Updated
New workspace entries added fordocs,internal/*, andpackages/*to align with the monorepo structure defined in the rootpackage.json.internal/build-utils/build.config.ts (1)
1-10: Build Configuration Setup
ThedefineBuildConfigcorrectly sets up the entry point, cleans the output directory, emits type declarations, and includes CJS output—matching the package manifest’smain,module, andtypesfields..gitignore (1)
8-10: Ignore pnpm debug logs
Added.pnpm-debug.log*under the "Package Manager" section to prevent pnpm debug logs from cluttering the repository.docs/.vitepress/plugins/demo.ts (1)
3-3: Use build-utils package import
Switched thedocRootimport to@ant-design-x-vue/build-utilsinstead of a relative path, reflecting the new monorepo packaging of internal utilities.docs/.vitepress/plugins/markdown-transform.ts (1)
5-5: Use build-utils package import
Updated thedocRootimport source to@ant-design-x-vue/build-utils, ensuring consistency across all VitePress plugins after modularization.docs/.vitepress/config.mts (1)
21-24: Correctly removes local alias for monorepo structure.Commenting out the local alias mapping aligns with the monorepo restructuring where
ant-design-x-vueshould now be resolved through workspace dependencies rather than direct file paths.packages/ant-design-x-vue/src/index.ts (1)
1-1: Well-structured package aggregation pattern.The re-export statement correctly implements the barrel pattern, allowing the main package to serve as an aggregation layer for the components sub-package in the monorepo structure.
packages/ant-design-x-vue/vite.config.mts (2)
3-5: Import reordering improves code organization.The reordered imports follow a logical grouping pattern with Node.js modules, then third-party packages, and finally Vite utilities.
28-28: Property key simplification is appropriate.The change from quoted to unquoted property key is valid and slightly cleaner while maintaining the same functionality.
play/package.json (2)
2-2: Correct scoped package naming for monorepo.The package name follows proper npm scoping conventions for organization-owned packages in a monorepo structure.
13-14: Proper workspace dependency configuration.The trailing comma and workspace dependency reference (
workspace:*) correctly implement pnpm workspace patterns, allowing automatic resolution to the local package version.play/vite.config.ts (1)
7-16: LGTM! Clean configuration aligns with monorepo structure.The removal of local aliases is appropriate for the monorepo setup, where packages should be resolved through workspace dependencies rather than direct file path aliases.
docs/package.json (1)
14-20: LGTM! Proper workspace dependency configuration.The workspace dependencies are correctly configured using
workspace:*, which is the recommended approach for pnpm workspaces. The separation of build utilities as devDependencies and the main package as dependencies is appropriate.tsconfig.build.json (3)
8-8: Declaration output path updated appropriately
ThedeclarationDirnow targetspackages/ant-design-x-vue/dist/typings, aligning with the monorepo layout.
29-29: Exclude tests under new structure
Excludingpackages/components/**/__tests__/**/*looks correct for this layout.
17-17:✅ Verification successful
Verify path alias for components
The alias"@ant-design-x-vue/components": ["./packages/components"]should resolve to your source entry (oftensrc/index.ts). Ensure that a root-level entry file exists underpackages/components.Run this to check for an index file:
🏁 Script executed:
#!/bin/bash fd index.ts packages/componentsLength of output: 1537
Confirmed: alias resolves correctly
The path alias"@ant-design-x-vue/components": ["./packages/components"]points topackages/components/index.ts, so it already targets the proper entry file. No changes needed.internal/build-utils/package.json (3)
2-6: Metadata (name, version, private, description) is boilerplate for the new internal package.
11-17: Exports mapping looks good
Theexportsfield correctly defines ESM, CJS, and typings entry points for@ant-design-x-vue/build-utils.
24-27: Dev dependency onunbuildis appropriate for this package.docs/tsconfig.json (1)
2-14: Docs TypeScript settings are solid
The compiler options target ESNext with proper module resolution, JSX preservation, and strict settings for the docs environment.packages/ant-design-x-vue/package.json (2)
69-76: Package dependencies are correct
Dependencies on fast-color, emotion, classnames, csstype, and stylis match the component requirements.
119-122: Peer dependencies look good
Requiringant-design-vue >=4.0.0andvue >=3.3.0is appropriate.package.json (4)
2-3: Monorepo root identity
Renaming toant-design-x-vue-monorepoand marking itprivatecorrectly designates this as a workspace root.
4-9: Workspace globs cover all packages
Includingpackages/*,play,docs, andinternal/*is correct for your layout.
11-18: Root scripts orchestrate correctly
Build, docs, play, release, and stub commands align with pnpm workspace CLI.Also applies to: 20-21
85-85: Setting a version on a private root is harmless but optional.
| "paths": { | ||
| "ant-design-x-vue": ["src/index.ts"], | ||
| "ant-design-x-vue/*": ["src/*"], | ||
| "ant-design-x-vue": ["packages/ant-design-x-vue"], | ||
| "@ant-design-x-vue/*": ["packages/*"], | ||
| } |
There was a problem hiding this comment.
💡 Verification agent
🧩 Analysis chain
Verify path alias consistency.
The path mappings look correct for a monorepo setup, but ensure the ant-design-x-vue alias pointing to packages/ant-design-x-vue is consistent with the actual package structure.
🏁 Script executed:
#!/bin/bash
# Description: Verify the packages directory structure matches the TypeScript path aliases
# Check if the referenced package directories exist
if [ -d "packages/ant-design-x-vue" ]; then
echo "✓ packages/ant-design-x-vue exists"
ls -la packages/ant-design-x-vue/
else
echo "✗ packages/ant-design-x-vue directory not found"
fi
if [ -d "packages/components" ]; then
echo "✓ packages/components exists"
ls -la packages/components/
else
echo "✗ packages/components directory not found"
fi
# Check for any other packages that might need to be included
echo "All packages in packages/ directory:"
ls -la packages/ 2>/dev/null || echo "packages/ directory not found"Length of output: 2458
🏁 Script executed:
#!/bin/bash
# Show include patterns in tsconfig.json around line 21
rg -n '"include"' -C3 tsconfig.jsonLength of output: 203
Add the ant-design-x-vue package to your tsconfig “include” paths
Your aliases correctly point at packages/ant-design-x-vue and packages/*, but the root tsconfig only includes packages/components/**/*. As a result TypeScript will ignore all files under packages/ant-design-x-vue.
Please update the include section in tsconfig.json to cover that package. For example:
"include": [
- "packages/components/**/*",
+ "packages/components/**/*",
+ "packages/ant-design-x-vue/**/*",
"docs/**/*",
"internal/**/*"
],Alternatively, if you prefer one glob for every package, you could use:
"include": [
- "packages/components/**/*",
+ "packages/*/**/*",
"docs/**/*",
"internal/**/*"
],This will ensure your ant-design-x-vue package source is included in the TypeScript build.
📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| "paths": { | |
| "ant-design-x-vue": ["src/index.ts"], | |
| "ant-design-x-vue/*": ["src/*"], | |
| "ant-design-x-vue": ["packages/ant-design-x-vue"], | |
| "@ant-design-x-vue/*": ["packages/*"], | |
| } | |
| "include": [ | |
| "packages/components/**/*", | |
| "packages/ant-design-x-vue/**/*", | |
| "docs/**/*", | |
| "internal/**/*" | |
| ], |
🤖 Prompt for AI Agents
In tsconfig.json around lines 13 to 16, the path aliases correctly map to the
packages, but the "include" section does not cover the "ant-design-x-vue"
package, causing TypeScript to ignore its files. Update the "include" array in
tsconfig.json to add "packages/ant-design-x-vue/**/*" or replace the current
include pattern with a broader one like "packages/*/**/*" to ensure all package
sources, including "ant-design-x-vue", are included in the TypeScript build.
| "main": "index.ts", | ||
| "module": "index.ts", |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Consider pointing main/module to built JavaScript files.
The main and module fields typically point to compiled JavaScript files, not TypeScript source files. This may cause issues for consumers who don't have TypeScript compilation set up.
Consider updating to point to built files:
- "main": "index.ts",
- "module": "index.ts",
+ "main": "dist/index.js",
+ "module": "dist/index.esm.js",And add a build script:
"scripts": {
+ "build": "rollup -c",
"test": "vitest",📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| "main": "index.ts", | |
| "module": "index.ts", | |
| // packages/components/package.json | |
| "main": "dist/index.js", | |
| "module": "dist/index.esm.js", | |
| "scripts": { | |
| "build": "rollup -c", | |
| "test": "vitest", | |
| // …other scripts | |
| }, | |
| // …rest of the manifest |
🤖 Prompt for AI Agents
In packages/components/package.json at lines 5 to 6, the "main" and "module"
fields currently point to TypeScript source files ("index.ts"), which can cause
issues for consumers without TypeScript compilation. Update these fields to
point to the compiled JavaScript output files, typically something like
"dist/index.js" or the appropriate build output path. Additionally, add a build
script in the "scripts" section to compile the TypeScript files into JavaScript
before publishing or using the package.
| "scripts": { | ||
| "test": "vitest", | ||
| "test:cov": "vitest --coverage", | ||
| "typecheck": "vue-tsc --noEmit", | ||
| "lint": "eslint \"{src,test}/**/*.{js,jsx,ts,tsx,vue}\"" | ||
| }, |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Add missing devDependencies for script tools.
The scripts reference tools like vitest, vue-tsc, and eslint but these are not declared as devDependencies. This may cause issues when running scripts.
Add the missing devDependencies:
"peerDependencies": {
"vue": "^3.2.0"
+ },
+ "devDependencies": {
+ "vitest": "^1.0.0",
+ "vue-tsc": "^1.8.0",
+ "eslint": "^8.0.0"
}Committable suggestion skipped: line range outside the PR's diff.
🤖 Prompt for AI Agents
In packages/components/package.json around lines 7 to 12, the scripts use tools
like vitest, vue-tsc, and eslint, but these are not listed as devDependencies.
Add these tools as devDependencies with appropriate versions to ensure they are
installed and available when running the scripts.
| "scripts": { | ||
| "stub": "unbuild --stub" | ||
| }, |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Add a build script
Right now only a stub command is defined. You’ll want a build script to invoke unbuild for generating the actual bundles.
"scripts": {
- "stub": "unbuild --stub"
+ "build": "unbuild"
+ "stub": "unbuild --stub"
}Committable suggestion skipped: line range outside the PR's diff.
🤖 Prompt for AI Agents
In internal/build-utils/package.json around lines 21 to 23, there is only a
"stub" script defined under "scripts". Add a new "build" script that runs the
"unbuild" command without the "--stub" flag to generate the actual bundles. This
will allow proper building of the package when running the build script.
| "paths": { | ||
| "ant-design-x-vue": ["../packages/ant-design-x-vue/src"], | ||
| "~/*": ["./.vitepress/vitepress/*"] | ||
| }, |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Path alias for ~ appears incorrect
Mapping ~/* to ./.vitepress/vitepress/* likely doesn’t match your plugin directory (.vitepress/plugins). Update it to:
"paths": {
"ant-design-x-vue": ["../packages/ant-design-x-vue/src"],
- "~/*": ["./.vitepress/vitepress/*"]
+ "~/*": ["./.vitepress/*"]
}🤖 Prompt for AI Agents
In docs/tsconfig.json around lines 16 to 19, the path alias for `~/*` is
incorrectly mapped to `./.vitepress/vitepress/*`. Update this alias to point to
the correct plugin directory by changing the path to `./.vitepress/plugins/*` to
ensure proper resolution of imports from the plugins folder.
| "devDependencies": { | ||
| "@ant-design-x-vue/components": "workspace:*", | ||
| "@ant-design/icons-vue": "^7.0.1", | ||
| "@commitlint/cli": "^17.1.2", | ||
| "@commitlint/config-conventional": "^17.1.0", | ||
| "@eslint/js": "^9.11.1", | ||
| "@stackblitz/sdk": "^1.11.0", | ||
| "@types/markdown-it": "^14.1.2", | ||
| "@types/node": "^22.10.2", | ||
| "@types/stylis": "^4.2.7", | ||
| "@typescript-eslint/eslint-plugin": "^8.7.0", | ||
| "@typescript-eslint/parser": "^8.7.0", | ||
| "@vitejs/plugin-vue": "^5.1.4", | ||
| "@vitejs/plugin-vue-jsx": "^4.0.1", | ||
| "@vitest/coverage-v8": "^2.1.1", | ||
| "@vue/shared": "^3.5.13", | ||
| "@vue/test-utils": "^2.4.6", | ||
| "@vueuse/core": "^12.2.0", | ||
| "ant-design-vue": "^4.2.6", | ||
| "changelogen": "^0.5.7", | ||
| "eslint": "^8.57.1", | ||
| "eslint-plugin-vue": "^9.17.0", | ||
| "fast-glob": "^3.3.2", | ||
| "happy-dom": "^15.7.4", | ||
| "husky": "^8.0.1", | ||
| "less": "^4.2.0", | ||
| "lint-staged": "^13.0.3", | ||
| "markdown-it": "^14.1.0", | ||
| "markdown-it-container": "^4.0.0", | ||
| "npm-run-all": "^4.1.5", | ||
| "prettier": "^2.7.1", | ||
| "prettier-plugin-organize-imports": "^3.0.0", | ||
| "prettier-plugin-packagejson": "^2.2.18", | ||
| "stylelint": "^14.9.1", | ||
| "typescript": "~5.5.4", | ||
| "unplugin-vue-macros": "^2.13.6", | ||
| "vite": "^5.4.8", | ||
| "vite-plugin-inspect": "^0.8.9", | ||
| "vitest": "^2.1.1", | ||
| "vue": "^3.5.10", | ||
| "vue-tsc": "^2.1.6" | ||
| }, |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Prune unnecessary devDependencies
You’ve included workspace-level tools (markdown-it, husky, lint-staged, etc.) that belong at the repo root or in the docs package. Keep only this package’s build/test/lint deps (vite, vue, typescript, vitest, eslint).
🤖 Prompt for AI Agents
In packages/ant-design-x-vue/package.json from lines 77 to 118, remove
devDependencies that are workspace-level tools or belong to the repo root or
docs package, such as markdown-it, husky, lint-staged, and similar. Keep only
dependencies directly related to this package's build, test, and lint processes
like vite, vue, typescript, vitest, and eslint to avoid unnecessary bloat and
maintain clear dependency boundaries.
package.json
Outdated
| "peerDependencies": { | ||
| "ant-design-vue": ">=4.0.0", | ||
| "vue": ">=3.3.0" | ||
| }, |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Root peerDependencies are unnecessary
Since the root is private and not published, you can remove the peerDependencies block here.
🤖 Prompt for AI Agents
In package.json around lines 77 to 80, the peerDependencies block is unnecessary
because the root package is private and not published. Remove the entire
peerDependencies section from the file to clean up the configuration.
package.json
Outdated
| "packageManager": "pnpm@9.6.0", | ||
| "publishConfig": { | ||
| "access": "public" |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Prune publishConfig at root
publishConfig applies to published packages; you can remove it from the private monorepo root.
🤖 Prompt for AI Agents
In package.json around lines 81 to 83, the publishConfig field is set at the
root of a private monorepo, which is unnecessary. Remove the entire
publishConfig section from the root package.json to avoid misconfiguration, as
publishConfig should only be present in packages that are published.
package.json
Outdated
| "dependencies": { | ||
| "@ant-design/fast-color": "^2.0.6", | ||
| "@emotion/hash": "^0.9.2", | ||
| "@emotion/unitless": "^0.10.0", | ||
| "classnames": "^2.5.1", | ||
| "csstype": "^3.1.3", | ||
| "stylis": "^4.3.4" | ||
| }, |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Remove duplicated dependencies at root
These libraries belong in packages/ant-design-x-vue. The root should only list workspace-wide dev tools.
-"dependencies": {
- "@ant-design/fast-color": "^2.0.6",
- "@emotion/hash": "^0.9.2",
- "@emotion/unitless": "^0.10.0",
- "classnames": "^2.5.1",
- "csstype": "^3.1.3",
- "stylis": "^4.3.4"
-},
+/* remove root dependencies; declare per-package */Committable suggestion skipped: line range outside the PR's diff.
🤖 Prompt for AI Agents
In package.json lines 28 to 35, the dependencies listed are duplicated and
should not be at the root level. Remove these dependencies from the root
package.json and ensure they are only declared in the packages/ant-design-x-vue
package.json. The root package.json should only include workspace-wide dev
tools, not package-specific dependencies.
❌ Deploy Preview for antd-design-x-vue failed. Why did it fail? →
|
2 participants
The branch needs to be perfected.
Summary by CodeRabbit
New Features
Chores
.gitignorefor better clarity and maintainability.