feat(packages): add components

.github/workflows/release-package.yml

@@ -2,7 +2,7 @@ name: Publish Package
 
 on:
   push:
-    branches: [main]
+    branches: [test]
 
 jobs:
   publish-npm:
@@ -26,7 +26,9 @@ jobs:
       - name: Install dependencies
         run: pnpm install --frozen-lockfile
 
-      # run: pnpm run --filter \"./packages/**\" build
+      - name: Build
+        shell: bash
+        run: pnpm --filter "./packages/*" build
 
       - name: Publish 🚀
         shell: bash

.npmrc

@@ -13,4 +13,6 @@ public-hoist-pattern[]=core-js
 
 # 提升所有依赖到根 node_modules 目录下，相当于 public-hoist-pattern[]=*，与上面一种方式一般二选一使用
 # 极不推荐用这样的方式解决依赖问题，这样没有充分利用 pnpm 依赖访问安全性的优势，又走回了 npm / yarn 的老路。
-# shamefully-hoist=true
+# shamefully-hoist=true
+
+enable-pre-post-scripts=true

package.json

@@ -41,7 +41,7 @@
     "@ant-design/icons-vue": "~7.0.1",
     "@iconify/vue": "^4.1.1",
     "@tinymce/tinymce-vue": "^5.1.1",
-    "@vueuse/core": "~10.7.2",
+    "@vueuse/core": "~10.8.0",
     "ant-design-vue": "~4.1.2",
     "axios": "~1.6.7",
     "dayjs": "~1.11.10",
@@ -56,9 +56,9 @@
     "sortablejs": "~1.15.2",
     "tinymce": "^6.8.3",
     "vue": "~3.4.19",
-    "vue-echarts": "^6.6.8",
+    "vue-echarts": "^6.6.9",
     "vue-i18n": "9.9.1",
-    "vue-router": "~4.2.5",
+    "vue-router": "~4.3.0",
     "vue-types": "~5.1.1",
     "vue-virtual-scroller": "2.0.0-beta.8",
     "xlsx": "~0.18.5"
@@ -75,7 +75,7 @@
     "@typescript-eslint/eslint-plugin": "~7.0.2",
     "@typescript-eslint/parser": "~7.0.2",
     "@umijs/openapi": "^1.10.1",
-    "@vitejs/plugin-legacy": "~5.3.0",
+    "@vitejs/plugin-legacy": "~5.3.1",
     "@vitejs/plugin-vue": "~5.0.4",
     "@vitejs/plugin-vue-jsx": "~3.1.0",
     "@vue/tsconfig": "^0.5.1",
@@ -93,7 +93,7 @@
     "lightningcss": "^1.23.0",
     "lint-staged": "~15.2.2",
     "mockjs": "~1.1.0",
-    "msw": "^2.2.0",
+    "msw": "^2.2.1",
     "postcss": "~8.4.34",
     "postcss-html": "~1.6.0",
     "postcss-less": "~6.0.0",
@@ -109,10 +109,10 @@
     "stylelint-prettier": "^5.0.0",
     "terser": "~5.27.2",
     "ts-node": "^10.9.2",
-    "typescript": "~5.2.2",
+    "typescript": "~5.3.3",
     "unocss": "^0.58.5",
     "unplugin-vue-components": "~0.26.0",
-    "vite": "~5.0.12",
+    "vite": "~5.1.4",
     "vite-plugin-checker": "~0.6.4",
     "vite-plugin-mkcert": "^1.17.3",
     "vite-plugin-svg-icons": "~2.0.1",

packages/components/index.ts

@@ -1,2 +1,10 @@
+import 'uno.css';
+
+/**
+ * 此包供 playground 在线测试使用，不建议在生产环境中使用
+ */
+
 export * from '@/components/core/dynamic-table/';
 export * from '@/components/core/schema-form/';
+
+console.log('[@admin-pkg/components] load');

packages/components/package.json

@@ -1,25 +1,28 @@
 {
   "name": "@admin-pkg/components",
-  "version": "0.0.1",
+  "version": "0.0.2",
   "description": "",
+  "type": "module",
   "module": "./dist/index.es.js",
-  "main": "./dist/index.umd.js",
-  "types": "dist/index.d.ts",
-  "jsdelivr": "dist/index.umd.js",
-  "unpkg": "dist/index.umd.js",
+  "main": "../dist/index.es.js",
+  "types": "dist/types/index.es.d.ts",
+  "jsdelivr": "./dist/index.es.js",
+  "unpkg": "./dist/index.es.js",
   "files": [
     "dist"
   ],
   "exports": {
     ".": {
+      "types": "./dist/types/index.es.d.ts",
       "import": "./dist/index.es.js",
       "require": "./dist/index.umd.js"
     },
     "./*": "./*"
   },
   "scripts": {
     "dev": "vite",
-    "build": "rimraf dist && vite build"
+    "build": "rimraf dist && vite build",
+    "build:dts": "npx tsc -p tsconfig.dts.json"
   },
   "keywords": [
     "ant-design-vue",
@@ -42,7 +45,6 @@
     "access": "public",
     "registry": "https://registry.npmjs.org/"
   },
-  "dependencies": {},
   "devDependencies": {
     "vite": "^5.0.2"
   },

packages/components/tsconfig.dts.json

@@ -0,0 +1,19 @@
+{
+  "extends": "@vue/tsconfig/tsconfig.dom.json",
+  "compilerOptions": {
+    "allowJs": true,
+    "checkJs": false,
+    // Generate d.ts files
+    "declaration": true,
+    // only output d.ts files
+    "emitDeclarationOnly": true,
+    "declarationDir": "dist/types",
+    "strict": false,
+    "noEmit": false,
+    "target": "ESNext",
+    "module": "ESNext",
+    "moduleResolution": "Bundler",
+    "lib": ["ESNext", "DOM"]
+  },
+  "include": ["./dist/index.es.js"]
+}

packages/components/tsconfig.json

@@ -6,5 +6,5 @@
     }
   },
   "include": ["index.ts", "../../src/**/*.ts"],
-  "exclude": ["node_modules", "test", "dist"]
+  "exclude": ["node_modules", "test", "dist", "**/src/views/**"]
 }

packages/components/vite.config.ts

@@ -1,27 +1,35 @@
 import { resolve } from 'node:path';
-import { defineConfig } from 'vite';
+import { exec } from 'node:child_process';
+import { defineConfig, type Plugin } from 'vite';
 import vue from '@vitejs/plugin-vue';
 import vueJsx from '@vitejs/plugin-vue-jsx';
 import Components from 'unplugin-vue-components/vite';
 import { AntDesignVueResolver } from 'unplugin-vue-components/resolvers';
 import Unocss from 'unocss/vite';
 
+const sourceDir = resolve(__dirname, '../../src');
+
 // https://vitejs.dev/config/
 export default defineConfig({
   publicDir: false,
   resolve: {
     alias: [
       {
         find: '@',
-        replacement: resolve(__dirname, '../../src'),
+        replacement: sourceDir,
       },
     ],
   },
+  esbuild: {
+    drop: ['debugger'],
+    pure: ['console.log'],
+  },
   // 打包配置
   build: {
+    target: 'esnext',
     lib: {
       entry: resolve(__dirname, './index.ts'), // 设置入口文件
-      formats: ['es', 'umd'],
+      formats: ['es'],
       name: 'components', // 起个名字，安装、引入用
       fileName: (format) => `index.${format}.js`, // 打包后的文件名
     },
@@ -31,49 +39,77 @@ export default defineConfig({
       // into your library
       external: ['vue', 'ant-design-vue'],
       output: {
-        // Provide global variables to use in the UMD build
-        // for externalized deps
-        globals: {
-          vue: 'Vue',
-          'ant-design-vue': 'AntDesignVue',
+        // minifyInternalExports: false,
+        //   // Provide global variables to use in the UMD build
+        //   // for externalized deps
+        //   globals: {
+        //     vue: 'Vue',
+        //     'ant-design-vue': 'AntDesignVue',
+        //   },
+        // manualChunks: {
+        //   library: ['lodash-es', 'vue-i18n'],
+        // },
+        manualChunks(id) {
+          if (id.includes('/src/locales/helper.ts')) {
+            console.log('id: ', id);
+            return 'vendor';
+          } else if (id.includes('ant-design-vue')) {
+            return 'vendor';
+          }
         },
       },
     },
   },
-
   plugins: [
     vue(),
     vueJsx(),
     Unocss(),
+    myPlugin(),
     Components({
       dts: false,
-      types: [
-        {
-          from: '@/components/basic/button/',
-          names: ['AButton'],
-        },
-        {
-          from: 'vue-router',
-          names: ['RouterLink', 'RouterView'],
-        },
-      ],
+      dirs: ['../../src/components'],
       resolvers: [
         AntDesignVueResolver({
           importStyle: false, // css in js
           exclude: ['Button'],
         }),
+        (componentName) => {
+          // where `componentName` is always CapitalCase
+          if (componentName === 'AButton') {
+            return { name: componentName, from: resolve(sourceDir, 'components/basic/button/') };
+          }
+        },
       ],
     }),
   ],
-  css: {
-    preprocessorOptions: {
-      less: {
-        javascriptEnabled: true,
-        modifyVars: {},
-        additionalData: `
-          @import '@/styles/variables.less'; 
-        `,
-      },
-    },
-  },
 });
+
+function myPlugin(): Plugin {
+  const file = resolve(sourceDir, './permission');
+
+  return {
+    name: '@admin-pkg/components:transform-file',
+
+    // transform(src, id) {
+    //   if (id.includes(file)) {
+    //     console.log('transform id: ', id);
+    //     return {
+    //       code: `export const hasPermission = () => true`,
+    //       map: null,
+    //     };
+    //   }
+    // },
+    closeBundle() {
+      // 根据 js 生成 .d.ts
+      exec('npm run build:dts', (err) => {
+        console.error(err);
+      });
+    },
+    load(id) {
+      if (id.includes(file)) {
+        console.log('load id: ', id);
+        return `export const hasPermission = () => true`;
+      }
+    },
+  };
+}