refactor(all): wip

affects: @varlet/cli, @varlet/eslint-config, @varlet/stylelint-config, @varlet/ui

Author: haoziqaq

package.json

@@ -1,5 +1,4 @@
 {
-  "name": "varlet-monorepo",
   "private": true,
   "scripts": {
     "preinstall": "npx only-allow pnpm",
@@ -58,12 +57,18 @@
     ]
   },
   "devDependencies": {
+    "@varlet/cli": "workspace:*",
+    "@varlet/eslint-config": "workspace:*",
+    "@varlet/stylelint-config": "workspace:*",
+    "@varlet/icons": "workspace:*",
+    "stylelint": "^13.13.1",
+    "eslint": "^7.30.0",
+    "husky": "^7.0.1",
     "surge": "^0.23.0",
     "cz-lerna-changelog": "^2.0.3",
     "execa": "^5.0.0",
     "lerna": "^3.22.1",
-    "ora": "^5.4.0",
-    "vue": "3.2.16"
+    "ora": "^5.4.0"
   },
   "packageManager": "[email protected]"
 }

packages/varlet-cli/package.json

@@ -36,32 +36,27 @@
     "@babel/core": "^7.14.8",
     "@babel/preset-env": "^7.14.8",
     "@babel/preset-typescript": "^7.14.5",
+    "@babel/helper-plugin-utils": "^7.14.5",
     "@commitlint/cli": "^11.0.0",
     "@commitlint/config-conventional": "^11.0.0",
     "@release-it/conventional-changelog": "^3.3.0",
-    "@varlet/eslint-config": "workspace:*",
     "@varlet/icons": "workspace:*",
     "@varlet/markdown-vite-plugin": "workspace:*",
-    "@varlet/stylelint-config": "workspace:*",
     "@varlet/touch-emulator": "workspace:*",
     "@vitejs/plugin-vue": "1.9.2",
     "@vitejs/plugin-vue-jsx": "1.1.8",
-    "@vue/babel-plugin-jsx": "^1.0.7",
+    "@vue/babel-plugin-jsx": "1.0.7",
     "@vue/compiler-sfc": "3.2.22",
-    "@vue/test-utils": "^2.0.0-rc.6",
-    "babel-jest": "26.6.3",
     "chalk": "^4.1.0",
     "chokidar": "^3.5.2",
     "clipboard": "^2.0.6",
     "commander": "^8.3.0",
     "commitizen": "^4.2.2",
     "conventional-changelog-cli": "^2.1.1",
     "cz-conventional-changelog": "^3.3.0",
-    "eslint": "^7.30.0",
     "execa": "^5.0.0",
     "fs-extra": "^9.0.1",
     "hash-sum": "^2.0.0",
-    "husky": "^7.0.1",
     "inquirer": "^8.1.2",
     "jest": "^26.6.3",
     "less": "^3.12.2",
@@ -73,13 +68,12 @@
     "prettier": "^2.3.2",
     "release-it": "^14.11.5",
     "slash": "^3.0.0",
-    "stylelint": "^13.13.1",
-    "ts-jest": "^26.5.1",
     "typescript": "^4.4.4",
     "vite": "2.6.5",
     "vite-plugin-html": "^2.1.0",
-    "vue-jest": "^5.0.0-alpha.8",
-    "vue-router": "4.0.12"
+    "babel-jest": "26.6.3",
+    "ts-jest": "^26.5.1",
+    "vue-jest": "^5.0.0-alpha.8"
   },
   "devDependencies": {
     "@types/babel__core": "^7.1.12",
@@ -90,6 +84,11 @@
     "@types/lodash-es": "^4.17.5"
   },
   "peerDependencies": {
-    "vue": "3.2.16"
+    "@varlet/touch-emulator": "workspace:*",
+    "@vue/test-utils": "^2.0.0-rc.18",
+    "vue": "3.2.16",
+    "vue-router": "4.0.12",
+    "lodash-es": "^4.17.21",
+    "clipboard": "^2.0.6"
   }
 }

packages/varlet-cli/site/components/utils/elements.ts

@@ -1,6 +1,5 @@
 import { isNumber, isString, toNumber, kebabCase } from './shared'
 import type { StyleVars } from '../../utils'
-import { requestAnimationFrame } from '@varlet/ui/src/utils/elements'
 
 export function getLeft(element: HTMLElement): number {
   const { left } = element.getBoundingClientRect()

packages/varlet-eslint-config/package.json

@@ -26,8 +26,5 @@
     "eslint-plugin-import": "^2.22.1",
     "eslint-plugin-vue": "^7.1.0"
   },
-  "gitHead": "42554856ff028f6f411a35f468e0f763978270b0",
-  "peerDependencies": {
-    "eslint": ">=7.12.1"
-  }
+  "gitHead": "42554856ff028f6f411a35f468e0f763978270b0"
 }

packages/varlet-stylelint-config/package.json

@@ -20,8 +20,5 @@
     "stylelint-config-prettier": "^8.0.2",
     "stylelint-config-standard": "^20.0.0"
   },
-  "gitHead": "42554856ff028f6f411a35f468e0f763978270b0",
-  "peerDependencies": {
-    "stylelint": ">=13.7.2"
-  }
+  "gitHead": "42554856ff028f6f411a35f468e0f763978270b0"
 }

packages/varlet-ui/package.json

@@ -48,13 +48,22 @@
     "vue": "^3.2.0"
   },
   "gitHead": "ee9c3866bedad96c86365b0f9888a3a6bb781b1f",
-  "devDependencies": {
-    "@varlet/cli": "workspace:*"
-  },
   "dependencies": {
+    "@varlet/touch-emulator": "workspace:*",
+    "@varlet/icons": "workspace:*",
+    "lodash-es": "^4.17.21",
+    "clipboard": "^2.0.6",
+    "vue": "3.2.16",
+    "vue-router": "4.0.12",
     "dayjs": "^1.10.4",
     "decimal.js": "^10.2.1"
   },
+  "devDependencies": {
+    "@varlet/cli": "workspace:*",
+    "@vue/test-utils": "^2.0.0-rc.18",
+    "@vue/compiler-sfc": "3.2.16",
+    "@vue/runtime-core": "3.2.16"
+  },
   "browserslist": [
     "Chrome >= 51",
     "iOS >= 10"

packages/varlet-ui/src/button/__tests__/__snapshots__/index.spec.js.snap

@@ -15,43 +15,55 @@ exports[`test button disabled 1`] = `
 `;
 
 exports[`test button example 1`] = `
-"<div class=\\"app-type\\">主题色按钮</div><button class=\\"var-button var--box var-button--normal var--inline-flex var-button--default var-elevation--2\\">
+"<div class=\\"app-type\\">主题色按钮</div>
+<button class=\\"var-button var--box var-button--normal var--inline-flex var-button--default var-elevation--2\\">
   <!--v-if-->
   <div class=\\"var-button__content\\">默认按钮</div>
-</button><button class=\\"var-button var--box var-button--normal var--inline-flex var-button--primary var-elevation--2\\">
+</button>
+<button class=\\"var-button var--box var-button--normal var--inline-flex var-button--primary var-elevation--2\\">
   <!--v-if-->
   <div class=\\"var-button__content\\">主要按钮</div>
-</button><button class=\\"var-button var--box var-button--normal var--inline-flex var-button--info var-elevation--2\\">
+</button>
+<button class=\\"var-button var--box var-button--normal var--inline-flex var-button--info var-elevation--2\\">
   <!--v-if-->
   <div class=\\"var-button__content\\">信息按钮</div>
-</button><button class=\\"var-button var--box var-button--normal var--inline-flex var-button--success var-elevation--2\\">
+</button>
+<button class=\\"var-button var--box var-button--normal var--inline-flex var-button--success var-elevation--2\\">
   <!--v-if-->
   <div class=\\"var-button__content\\">成功按钮</div>
-</button><button class=\\"var-button var--box var-button--normal var--inline-flex var-button--warning var-elevation--2\\">
+</button>
+<button class=\\"var-button var--box var-button--normal var--inline-flex var-button--warning var-elevation--2\\">
   <!--v-if-->
   <div class=\\"var-button__content\\">警告按钮</div>
-</button><button class=\\"var-button var--box var-button--normal var--inline-flex var-button--danger var-elevation--2\\">
+</button>
+<button class=\\"var-button var--box var-button--normal var--inline-flex var-button--danger var-elevation--2\\">
   <!--v-if-->
   <div class=\\"var-button__content\\">危险按钮</div>
 </button>
-<div class=\\"app-type\\">文字按钮</div><button class=\\"var-button var--box var-button--normal var--inline-flex var-button--text-primary var-button--text var-button--outline\\">
+<div class=\\"app-type\\">文字按钮</div>
+<button class=\\"var-button var--box var-button--normal var--inline-flex var-button--text-primary var-button--text var-button--outline\\">
   <!--v-if-->
   <div class=\\"var-button__content\\">外边框按钮</div>
-</button><button class=\\"var-button var--box var-button--normal var--inline-flex var-button--text-primary var-button--text\\">
+</button>
+<button class=\\"var-button var--box var-button--normal var--inline-flex var-button--text-primary var-button--text\\">
   <!--v-if-->
   <div class=\\"var-button__content\\">纯文字按钮</div>
 </button>
-<div class=\\"app-type\\">禁用状态</div><button class=\\"var-button var--box var-button--normal var--inline-flex var-button--disabled var-button--default var-elevation--2\\" disabled=\\"\\">
+<div class=\\"app-type\\">禁用状态</div>
+<button class=\\"var-button var--box var-button--normal var--inline-flex var-button--disabled var-button--default var-elevation--2\\" disabled=\\"\\">
   <!--v-if-->
   <div class=\\"var-button__content\\">禁用状态</div>
-</button><button class=\\"var-button var--box var-button--normal var--inline-flex var-button--disabled var-button--text-default var-button--text var-button--text-disabled var-button--outline\\" disabled=\\"\\">
+</button>
+<button class=\\"var-button var--box var-button--normal var--inline-flex var-button--disabled var-button--text-default var-button--text var-button--text-disabled var-button--outline\\" disabled=\\"\\">
   <!--v-if-->
   <div class=\\"var-button__content\\">禁用状态</div>
-</button><button class=\\"var-button var--box var-button--normal var--inline-flex var-button--disabled var-button--text-default var-button--text var-button--text-disabled\\" disabled=\\"\\">
+</button>
+<button class=\\"var-button var--box var-button--normal var--inline-flex var-button--disabled var-button--text-default var-button--text var-button--text-disabled\\" disabled=\\"\\">
   <!--v-if-->
   <div class=\\"var-button__content\\">禁用状态</div>
 </button>
-<div class=\\"app-type\\">加载状态</div><button class=\\"var-button var--box var-button--normal var--inline-flex var-button--primary var-elevation--2\\">
+<div class=\\"app-type\\">加载状态</div>
+<button class=\\"var-button var--box var-button--normal var--inline-flex var-button--primary var-elevation--2\\">
   <div class=\\"var-loading var-button__loading\\">
     <!--v-if-->
     <div class=\\"var--box var-loading__body\\">
@@ -64,7 +76,8 @@ exports[`test button example 1`] = `
     </div>
   </div>
   <div class=\\"var-button__content var-button--hidden\\">加载状态</div>
-</button><button class=\\"var-button var--box var-button--normal var--inline-flex var-button--info var-elevation--2\\">
+</button>
+<button class=\\"var-button var--box var-button--normal var--inline-flex var-button--info var-elevation--2\\">
   <div class=\\"var-loading var-button__loading\\">
     <!--v-if-->
     <div class=\\"var--box var-loading__body\\">
@@ -86,7 +99,8 @@ exports[`test button example 1`] = `
     </div>
   </div>
   <div class=\\"var-button__content var-button--hidden\\">加载状态</div>
-</button><button class=\\"var-button var--box var-button--normal var--inline-flex var-button--success var-elevation--2\\">
+</button>
+<button class=\\"var-button var--box var-button--normal var--inline-flex var-button--success var-elevation--2\\">
   <div class=\\"var-loading var-button__loading\\">
     <!--v-if-->
     <div class=\\"var--box var-loading__body\\">
@@ -103,7 +117,8 @@ exports[`test button example 1`] = `
     </div>
   </div>
   <div class=\\"var-button__content var-button--hidden\\">加载状态</div>
-</button><button class=\\"var-button var--box var-button--normal var--inline-flex var-button--danger var-elevation--2\\">
+</button>
+<button class=\\"var-button var--box var-button--normal var--inline-flex var-button--danger var-elevation--2\\">
   <div class=\\"var-loading var-button__loading\\">
     <!--v-if-->
     <div class=\\"var--box var-loading__body\\">
@@ -121,7 +136,8 @@ exports[`test button example 1`] = `
     </div>
   </div>
   <div class=\\"var-button__content var-button--hidden\\">加载状态</div>
-</button><button class=\\"var-button var--box var-button--normal var--inline-flex var-button--warning var-elevation--2\\">
+</button>
+<button class=\\"var-button var--box var-button--normal var--inline-flex var-button--warning var-elevation--2\\">
   <div class=\\"var-loading var-button__loading\\">
     <!--v-if-->
     <div class=\\"var--box var-loading__body\\">
@@ -141,50 +157,64 @@ exports[`test button example 1`] = `
   </div>
   <div class=\\"var-button__content var-button--hidden\\">加载状态</div>
 </button>
-<div class=\\"app-type\\">按钮尺寸</div><button class=\\"var-button var--box var-button--normal var--inline-flex var-button--primary var-elevation--2\\">
+<div class=\\"app-type\\">按钮尺寸</div>
+<button class=\\"var-button var--box var-button--normal var--inline-flex var-button--primary var-elevation--2\\">
   <!--v-if-->
   <div class=\\"var-button__content\\">常规按钮</div>
-</button><button class=\\"var-button var--box var-button--small var--inline-flex var-button--success var-elevation--2\\">
+</button>
+<button class=\\"var-button var--box var-button--small var--inline-flex var-button--success var-elevation--2\\">
   <!--v-if-->
   <div class=\\"var-button__content\\">小型按钮</div>
-</button><button class=\\"var-button var--box var-button--mini var--inline-flex var-button--warning var-elevation--2\\">
+</button>
+<button class=\\"var-button var--box var-button--mini var--inline-flex var-button--warning var-elevation--2\\">
   <!--v-if-->
   <div class=\\"var-button__content\\">迷你按钮</div>
-</button><button class=\\"var-button var--box var-button--large var--inline-flex var-button--danger var-elevation--2\\">
+</button>
+<button class=\\"var-button var--box var-button--large var--inline-flex var-button--danger var-elevation--2\\">
   <!--v-if-->
   <div class=\\"var-button__content\\">大型按钮</div>
 </button>
-<div class=\\"app-type\\">块级按钮</div><button class=\\"var-button var--box var-button--normal var--flex var-button--block var-button--primary var-elevation--2\\">
+<div class=\\"app-type\\">块级按钮</div>
+<button class=\\"var-button var--box var-button--normal var--flex var-button--block var-button--primary var-elevation--2\\">
   <!--v-if-->
   <div class=\\"var-button__content\\">块级按钮</div>
 </button>
-<div class=\\"app-type\\">自定义颜色</div><button class=\\"var-button var--box var-button--normal var--inline-flex var-button--default var-elevation--2\\" style=\\"color: rgb(238, 238, 238); background: rgb(105, 219, 170);\\">
+<div class=\\"app-type\\">自定义颜色</div>
+<button class=\\"var-button var--box var-button--normal var--inline-flex var-button--default var-elevation--2\\" style=\\"color: rgb(238, 238, 238); background: rgb(105, 219, 170);\\">
   <!--v-if-->
   <div class=\\"var-button__content\\">背景/文字</div>
-</button><button class=\\"var-button var--box var-button--normal var--inline-flex var-button--default var-elevation--2\\" style=\\"color: rgb(255, 255, 255);\\">
+</button>
+<button class=\\"var-button var--box var-button--normal var--inline-flex var-button--default var-elevation--2\\" style=\\"color: rgb(255, 255, 255);\\">
   <!--v-if-->
   <div class=\\"var-button__content\\">使用渐变</div>
 </button>
-<div class=\\"app-type\\">圆形按钮</div><button class=\\"var-button var--box var-button--normal var--inline-flex var-button--primary var-elevation--2 var-button--round\\">
+<div class=\\"app-type\\">圆形按钮</div>
+<button class=\\"var-button var--box var-button--normal var--inline-flex var-button--primary var-elevation--2 var-button--round\\">
   <!--v-if-->
   <div class=\\"var-button__content\\"><i class=\\"var-icon var-icon--set var-icon-plus\\" style=\\"transition: transform 0ms;\\"></i></div>
-</button><button class=\\"var-button var--box var-button--normal var--inline-flex var-button--info var-elevation--2 var-button--round\\">
+</button>
+<button class=\\"var-button var--box var-button--normal var--inline-flex var-button--info var-elevation--2 var-button--round\\">
   <!--v-if-->
   <div class=\\"var-button__content\\"><i class=\\"var-icon var-icon--set var-icon-information\\" style=\\"transition: transform 0ms;\\"></i></div>
-</button><button class=\\"var-button var--box var-button--normal var--inline-flex var-button--success var-elevation--2 var-button--round\\">
+</button>
+<button class=\\"var-button var--box var-button--normal var--inline-flex var-button--success var-elevation--2 var-button--round\\">
   <!--v-if-->
   <div class=\\"var-button__content\\"><i class=\\"var-icon var-icon--set var-icon-check\\" style=\\"transition: transform 0ms;\\"></i></div>
-</button><button class=\\"var-button var--box var-button--normal var--inline-flex var-button--warning var-elevation--2 var-button--round\\">
+</button>
+<button class=\\"var-button var--box var-button--normal var--inline-flex var-button--warning var-elevation--2 var-button--round\\">
   <!--v-if-->
   <div class=\\"var-button__content\\"><i class=\\"var-icon var-icon--set var-icon-warning\\" style=\\"transition: transform 0ms;\\"></i></div>
-</button><button class=\\"var-button var--box var-button--normal var--inline-flex var-button--danger var-elevation--2 var-button--round\\">
+</button>
+<button class=\\"var-button var--box var-button--normal var--inline-flex var-button--danger var-elevation--2 var-button--round\\">
   <!--v-if-->
   <div class=\\"var-button__content\\"><i class=\\"var-icon var-icon--set var-icon-window-close\\" style=\\"transition: transform 0ms;\\"></i></div>
 </button>
-<div class=\\"app-type\\">注册事件</div><button class=\\"var-button var--box var-button--normal var--inline-flex var-button--success var-elevation--2\\">
+<div class=\\"app-type\\">注册事件</div>
+<button class=\\"var-button var--box var-button--normal var--inline-flex var-button--success var-elevation--2\\">
   <!--v-if-->
   <div class=\\"var-button__content\\">点击</div>
-</button><button class=\\"var-button var--box var-button--normal var--inline-flex var-button--success var-elevation--2\\">
+</button>
+<button class=\\"var-button var--box var-button--normal var--inline-flex var-button--success var-elevation--2\\">
   <!--v-if-->
   <div class=\\"var-button__content\\">触摸</div>
 </button>"