refactor: replace ant-design-vue with @ant-design-vue/ui

Author: tangjinzhou

apps/playground/assets/tailwind.css

@@ -1,8 +1,6 @@
-@import '@ant-design-vue/tailwind-config';
-
+@import 'tailwindcss' source(none);
 @source '../index.html';
 @source '../src/**/*.{vue,ts}';
-@source '../../../node_modules/ant-design-vue/dist/lib.mjs';
 * {
   scrollbar-width: thin;
   scrollbar-color: var(--color-base-300) transparent;

apps/playground/package.json

@@ -13,7 +13,7 @@
   "dependencies": {
     "@floating-ui/vue": "^1.1.5",
     "@heroicons/vue": "^2.1.5",
-    "ant-design-vue": "*",
+    "@ant-design-vue/ui": "*",
     "@simonwep/pickr": "^1.9.1",
     "@trpc/client": "^11.0.0",
     "@trpc/server": "^11.0.0",
@@ -27,7 +27,6 @@
   "devDependencies": {
     "@ant-design-vue/eslint-config": "*",
     "@ant-design-vue/prettier-config": "*",
-    "@ant-design-vue/tailwind-config": "*",
     "@ant-design-vue/typescript-config": "*",
     "@ant-design-vue/vite-config": "*",
     "@tailwindcss/vite": "^4.1.3",

apps/playground/src/main.ts

@@ -3,7 +3,9 @@ import { createApp } from 'vue'
 import { createRouter, createWebHistory } from 'vue-router'
 import App from './App.vue'
 import routes from './routes'
-import antd from 'ant-design-vue'
+import antd from '@ant-design-vue/ui'
+import '@ant-design-vue/ui/tailwind.css'
+import '@ant-design-vue/ui/style.css'
 
 const router = createRouter({
   history: createWebHistory(),

apps/playground/src/typings/global.d.ts

@@ -1,7 +1,7 @@
 /* eslint-disable @typescript-eslint/consistent-type-imports */
 declare module 'vue' {
   export interface GlobalComponents {
-    AButton: typeof import('ant-design-vue').Button
+    AButton: typeof import('@ant-design-vue/ui').Button
   }
 }
 export {}

apps/playground/tsconfig.json

@@ -5,8 +5,7 @@
   "compilerOptions": {
     "paths": {
       "@/*": ["./src/*"],
-      "~/*": ["./assets/*"],
-      "ant-design-vue": ["./../../packages/ui/src/index.ts"]
+      "~/*": ["./assets/*"]
     }
   }
 }

apps/playground/vite.config.ts

@@ -15,7 +15,6 @@ export default defineConfig({
     alias: {
       '@': resolve(__dirname, './src'),
       '~': resolve(__dirname, './assets'),
-      'ant-design-vue': resolve(__dirname, '../../packages/ui/src/index.ts'),
     },
   },
 })

packages/ui/package.json

@@ -1,6 +1,6 @@
 {
-  "name": "ant-design-vue",
-  "version": "5.0.0-alpha.1",
+  "name": "@ant-design-vue/ui",
+  "version": "1.0.0-alpha.1",
   "title": "Ant Design Vue",
   "description": "An enterprise-class UI design language and Vue-based implementation",
   "keywords": [
@@ -27,12 +27,20 @@
   "type": "module",
   "exports": {
     ".": {
-      "import": "./dist/index.esm.js",
-      "require": "./dist/index.umd.js"
+      "types": "./dist/types/index.d.ts",
+      "import": "./dist/lib.mjs",
+      "require": "./dist/lib.cjs",
+      "default": "./dist/lib.mjs"
     },
     "./style.css": {
-      "import": "./dist/index.css",
-      "require": "./dist/index.css"
+      "import": "./dist/lib.css",
+      "require": "./dist/lib.css",
+      "default": "./dist/lib.css"
+    },
+    "./tailwind.css": {
+      "import": "./dist/tailwind.css",
+      "require": "./dist/tailwind.css",
+      "default": "./dist/tailwind.css"
     }
   },
   "repository": {
@@ -43,9 +51,9 @@
     "url": "https://github.com/ant-design-vue/table/issues"
   },
   "license": "MIT",
-  "main": "./dist/index.umd.js",
-  "module": "./dist/index.esm.js",
-  "types": "./dist/src/index.d.ts",
+  "main": "./dist/lib.cjs",
+  "module": "./dist/lib.mjs",
+  "types": "./dist/types/index.d.ts",
   "files": [
     "dist",
     "src/style",
@@ -69,7 +77,6 @@
   "devDependencies": {
     "@ant-design-vue/eslint-config": "*",
     "@ant-design-vue/prettier-config": "*",
-    "@ant-design-vue/tailwind-config": "*",
     "@ant-design-vue/typescript-config": "*",
     "@ant-design-vue/vite-config": "*",
     "@tailwindcss/vite": "^4.1.3",

packages/ui/src/index.ts

@@ -1,3 +1,4 @@
+import './style/index.css'
 import { App } from 'vue'
 
 import * as components from './components'

packages/ui/vite.config.ts

@@ -11,13 +11,19 @@ export default extendsConfig(vue(__dirname), {
   },
   plugins: [tailwindcss()],
   build: {
-    lib: {
-      name: 'antd',
-      entry: {
-        lib: resolve(__dirname, 'src/index.ts'),
+    cssCodeSplit: true,
+    rollupOptions: {
+      output: {
+        // inlineDynamicImports: false,
+        manualChunks(id) {
+          if (id.includes('tailwind.css')) {
+            return 'tailwind'
+          }
+          if (id.includes('.css')) {
+            return 'lib'
+          }
+        },
       },
-      formats: ['umd'],
-      fileName: (format, entryName) => `${entryName}.${format}.js`,
     },
   },
 })