refactor(架构调整): typescript类型修复与build toolchain处理

.changeset/config.json

@@ -1,11 +1,11 @@
 {
-  "$schema": "https://unpkg.com/@changesets/config@2.1.1/schema.json",
-  "changelog": "@changesets/cli/changelog",
-  "commit": false,
-  "fixed": [],
-  "linked": [],
-  "access": "restricted",
-  "baseBranch": "main",
-  "updateInternalDependencies": "patch",
-  "ignore": []
-}
+    "$schema": "https://unpkg.com/@changesets/config@2.1.1/schema.json",
+    "changelog": "@changesets/cli/changelog",
+    "commit": false,
+    "fixed": [],
+    "linked": [],
+    "access": "restricted",
+    "baseBranch": "main",
+    "updateInternalDependencies": "patch",
+    "ignore": []
+}

internal/build-constants/src/pkg.ts

@@ -1,5 +1,5 @@
-export const PKG_PREFIX = '@kankan'
+export const PKG_PREFIX = '@kankan-component'
 export const PKG_NAME = 'kankan-component'
 export const PKG_CAMELCASE_NAME = 'kankanComponent'
-export const PKG_CAMELCASE_LOCAL_NAME = 'KankanLocale'
+export const PKG_CAMELCASE_LOCAL_NAME = 'kankanComponentLocale'
 export const PKG_BRAND_NAME = 'Kankan Component'

internal/build/gulpfile.ts

@@ -33,7 +33,7 @@ export default series(
     parallel(
         runTask('buildModules'),
         runTask('buildFullBundle'),
-        // runTask('generateTypesDefinitions'),
+        runTask('generateTypesDefinitions'),
         runTask('buildHelper'),
         series(
             withTaskName('buildThemeChalk', () => run('pnpm run -C packages/theme-chalk build')),

internal/metadata/src/components.ts

@@ -9,10 +9,21 @@ const pathOutput = path.resolve(__dirname, '..', 'dist')
 async function main() {
     await ensureDir(pathOutput)
 
-    const components = await glob('*', {
-        cwd: path.resolve(projRoot, 'packages/components'),
+    const basicComponents = await glob('*', {
+        cwd: path.resolve(projRoot, 'packages/components/basic'),
         onlyDirectories: true,
     })
+
+    const advanceComponents = await glob('*', {
+        cwd: path.resolve(projRoot, 'packages/components/advance'),
+        onlyDirectories: true,
+    })
+
+    const editorComponents = await glob('*', {
+        cwd: path.resolve(projRoot, 'packages/components/editor'),
+        onlyDirectories: true,
+    })
+    const components = basicComponents.concat(advanceComponents).concat(editorComponents)
     consola.log('components', components)
 
     await writeJson(path.resolve(pathOutput, 'components.json'), components)

package.json

@@ -10,7 +10,8 @@
         "clean": "pnpm run -r clean",
         "test": "vitest",
         "test:coverage": "vitest --coverage",
-        "lint": "eslint --ext js,ts,tsx,vue . --fix",
+        "lint": "eslint . --ext .vue,.js,.ts,.jsx,.tsx,.md,.json --max-warnings 0 --cache",
+        "lint:fix": "pnpm run lint --fix",
         "commit": "git cz",
         "preinstall": "npx only-allow pnpm",
         "changeset": "changeset",
@@ -22,8 +23,9 @@
         "build:theme": "pnpm run -C packages/theme-chalk build",
         "prepare": "husky install",
         "postinstall": "pnpm stub && concurrently  \"pnpm run -C internal/metadata dev\"",
-        "typecheck": "run-p typecheck:web",
-        "typecheck:web": "vue-tsc -p tsconfig.web.json --composite false --noEmit"
+        "typecheck": "run-p typecheck:web  typecheck:node",
+        "typecheck:web": "vue-tsc -p tsconfig.web.json --composite false --noEmit",
+        "typecheck:node": "tsc -p tsconfig.node.json --noEmit"
     },
     "peerDependencies": {
         "vue": "^3.2.0"
@@ -48,6 +50,7 @@
         "@pnpm/find-workspace-packages": "^4.0.16",
         "@pnpm/logger": "^4.0.0",
         "@pnpm/types": "^8.4.0",
+        "@types/fs-extra": "^9.0.13",
         "@types/gulp": "^4.0.9",
         "@types/jsdom": "^16.2.14",
         "@types/node": "*",

packages/components/advance/tag/style/css.ts

@@ -0,0 +1,2 @@
+// import '@kankan-components/theme-chalk/src/tag.scss'
+import '@kankan-components/theme-chalk/ui-tag.css'

packages/components/advance/tag/style/index.ts

@@ -0,0 +1,2 @@
+// import '@kankan-components/theme-chalk/src/tag.scss'
+// import '@element-plus/theme-chalk/src/alert.scss'

packages/components/basic/icon/style/index.ts

@@ -0,0 +1 @@
+// import '@kankan-components/theme-chalk/src/tag.scss'

packages/components/package.json

@@ -1,39 +1,14 @@
 {
     "name": "@kankan-components/components",
-    "version": "1.0.0",
-    "author": {
-        "name": "gemercheung",
-        "email": "gemercheung@gmail.com",
-        "url": "http://gemer.xyz/"
-    },
-    "files": [
-        "dist"
-    ],
+    "version": "0.0.1",
+    "description": "all components are settled here",
     "main": "index.ts",
     "module": "index.ts",
     "unpkg": "index.js",
-    "types": "index.d.ts",
-    "scripts": {
-        "build": "pnpm run clean && pnpm run compile",
-        "clean": "rimraf -rf ./dist",
-        "compile": "rollup -c",
-        "prepublishOnly": "pnpm run build"
-    },
+    "jsdelivr": "index.js",
     "peerDependencies": {
-        "@kankan-components/utils": "workspace:^1.0.0",
         "vue": "^3.2.0"
     },
-    "dependencies": {
-        "vue-cropper": "^1.0.5"
-    },
-    "devDependencies": {
-        "@kankan-components/utils": "workspace:^1.0.0",
-        "@rollup/plugin-typescript": "~8.3.4",
-        "rimraf": "~3.0.2",
-        "rollup": "~2.77.3",
-        "rollup-plugin-terser": "^7.0.2",
-        "tslib": "^2.4.0",
-        "typescript": "~4.7.4"
-    },
+    "types": "index.d.ts",
     "sideEffects": false
 }

packages/kankan-components/make-installer.ts

@@ -1,11 +1,10 @@
 import { provideGlobalConfig } from '@kankan-components/hooks'
-// import { INSTALLED_KEY } from '@kankan-components/constants'
+import { INSTALLED_KEY } from '@kankan-components/constants'
 import { version } from './version'
+
 import type { App, Plugin } from '@vue/runtime-core'
 import type { ConfigProviderContext } from '@kankan-components/tokens'
 
-const INSTALLED_KEY = Symbol('INSTALLED_KEY')
-
 export const makeInstaller = (components: Plugin[] = []) => {
     const install = (app: App, options?: ConfigProviderContext) => {
         if (app[INSTALLED_KEY]) return

packages/theme-chalk/gulpfile.ts

@@ -38,22 +38,22 @@ function buildThemeChalk() {
         .pipe(dest(distFolder))
 }
 
-/**
- * Build dark Css Vars
- * @returns
- */
-function buildDarkCssVars() {
-    const sass = gulpSass(dartSass)
-    return src(path.resolve(__dirname, 'src/dark/css-vars.scss'))
-        .pipe(sass.sync())
-        .pipe(autoprefixer({ cascade: false }))
-        .pipe(
-            cleanCSS({}, details => {
-                consola.success(`${chalk.cyan(details.name)}: ${chalk.yellow(details.stats.originalSize / 1000)} KB -> ${chalk.green(details.stats.minifiedSize / 1000)} KB`)
-            })
-        )
-        .pipe(dest(`${distFolder}/dark`))
-}
+// /**
+//  * Build dark Css Vars
+//  * @returns
+//  */
+// function buildDarkCssVars() {
+//     const sass = gulpSass(dartSass)
+//     return src(path.resolve(__dirname, 'src/dark/css-vars.scss'))
+//         .pipe(sass.sync())
+//         .pipe(autoprefixer({ cascade: false }))
+//         .pipe(
+//             cleanCSS({}, details => {
+//                 consola.success(`${chalk.cyan(details.name)}: ${chalk.yellow(details.stats.originalSize / 1000)} KB -> ${chalk.green(details.stats.minifiedSize / 1000)} KB`)
+//             })
+//         )
+//         .pipe(dest(`${distFolder}/dark`))
+// }
 
 /**
  * copy from packages/theme-chalk/dist to dist/element-plus/theme-chalk

packages/theme-chalk/src/index.scss

@@ -0,0 +1 @@
+@use './tag.scss';

packages/utils/dom/parent.ts

@@ -5,9 +5,9 @@ import { computed, onMounted, ref } from 'vue'
  * @returns [heightRef, VMRef, readyRef]
  */
 
-export const getVMDomWH = (attr: string) => {
+export const getVMDomWH = (attr: string): any[] => {
     const origin = ref<number>(0)
-    const domRef = ref<ElRef>(null)
+    const domRef = ref<HTMLElement | null>(null)
     const ready = ref(false)
     const referWH = () => {
         origin.value = 0
@@ -80,7 +80,7 @@ export const getScrollParent = (node: HTMLElement): HTMLElement | null => {
  * @param {*} target
  */
 export const getScrollParents = (origin: any, target: HTMLElement) => {
-    const parents = []
+    const parents: HTMLElement[] = []
     let temporary = origin
     while (temporary && temporary !== target && temporary !== document.documentElement && target.contains(temporary)) {
         const scrollParent = getScrollParent(temporary)

packages/utils/normal.ts

@@ -8,7 +8,7 @@ export const randomId = (e = 6): string => {
     return n
 }
 
-export function omit(obj, ...props) {
+export function omit(obj: any, ...props: any[]) {
     const result = { ...obj }
     props.forEach(prop => {
         delete result[prop]
@@ -23,14 +23,14 @@ export function omit(obj, ...props) {
  * @param {*} isIncludeSelf 是否要包含自身宽高
  * @returns 位置信息 {x, y}
  */
-export const getPostionByTarget = (origin, target, isIncludeSelf = false) => {
+export const getPostionByTarget = (origin: HTMLElement, target: Node, isIncludeSelf = false) => {
     const pos = { x: 0, y: 0, width: origin.offsetWidth, height: origin.offsetHeight }
 
-    let temporary = origin
+    let temporary: HTMLElement = origin
     while (temporary && temporary !== target && temporary !== document.documentElement && target.contains(temporary)) {
         pos.x += temporary.offsetLeft + temporary.clientLeft
         pos.y += temporary.offsetTop + temporary.clientTop
-        temporary = temporary.offsetParent
+        temporary = temporary.offsetParent as HTMLElement
     }
 
     if (isIncludeSelf) {

playground/src/pages/tag.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { onMounted, inject, ref } from 'vue'
 import { UITag } from '@kankan-components/components'
+import '@kankan-components/theme-chalk/dist/ui-tag.css'
 const __sdk: any = inject('__sdk')
 
 const tags = ref<any>([])

pnpm-lock.yaml

@@ -17,6 +17,7 @@ importers:
       '@pnpm/find-workspace-packages': ^4.0.16
       '@pnpm/logger': ^4.0.0
       '@pnpm/types': ^8.4.0
+      '@types/fs-extra': ^9.0.13
       '@types/gulp': ^4.0.9
       '@types/jsdom': ^16.2.14
       '@types/node': '*'
@@ -71,6 +72,7 @@ importers:
       '@pnpm/find-workspace-packages': 4.0.43_vp7a5l77f5ejdshrmfsgf4kfnm
       '@pnpm/logger': 4.0.0
       '@pnpm/types': 8.7.0
+      '@types/fs-extra': 9.0.13
       '@types/gulp': 4.0.9
       '@types/jsdom': 16.2.15
       '@types/node': 18.7.18
@@ -151,7 +153,7 @@ importers:
       '@vueuse/core': 9.3.0_vue@3.2.39
       axios: 0.27.2
       clipboard-copy: 4.0.1
-      element-plus: 2.2.18_vue@3.2.39
+      element-plus: 2.2.28_vue@3.2.39
       markdown-it: 13.0.1
       normalize.css: 8.0.1
       nprogress: 0.2.0
@@ -319,45 +321,18 @@ importers:
 
   packages/components:
     specifiers:
-      '@kankan-components/utils': workspace:^1.0.0
-      '@rollup/plugin-typescript': ~8.3.4
-      rimraf: ~3.0.2
-      rollup: ~2.77.3
-      rollup-plugin-terser: ^7.0.2
-      tslib: ^2.4.0
-      typescript: ~4.7.4
       vue: ^3.2.0
-      vue-cropper: ^1.0.5
     dependencies:
       vue: 3.2.39
-      vue-cropper: 1.0.5
-    devDependencies:
-      '@kankan-components/utils': link:../utils
-      '@rollup/plugin-typescript': 8.3.4_z6zeof5eklcd4ck5cj6ien7gzy
-      rimraf: 3.0.2
-      rollup: 2.77.3
-      rollup-plugin-terser: 7.0.2_rollup@2.77.3
-      tslib: 2.4.0
-      typescript: 4.7.4
+
+  packages/constants:
+    specifiers: {}
 
   packages/directives:
     specifiers:
-      '@rollup/plugin-typescript': ~8.3.4
-      rimraf: ~3.0.2
-      rollup: ~2.77.3
-      rollup-plugin-terser: ^7.0.2
-      tslib: ^2.4.0
-      typescript: ~4.7.4
       vue: ^3.2.0
     dependencies:
       vue: 3.2.39
-    devDependencies:
-      '@rollup/plugin-typescript': 8.3.4_z6zeof5eklcd4ck5cj6ien7gzy
-      rimraf: 3.0.2
-      rollup: 2.77.3
-      rollup-plugin-terser: 7.0.2_rollup@2.77.3
-      tslib: 2.4.0
-      typescript: 4.7.4
 
   packages/hooks:
     specifiers:
@@ -3998,36 +3973,6 @@ packages:
       rollup: 2.78.1
     dev: true
 
-  /@rollup/plugin-typescript/8.3.4_z6zeof5eklcd4ck5cj6ien7gzy:
-    resolution: {integrity: sha512-wt7JnYE9antX6BOXtsxGoeVSu4dZfw0dU3xykfOQ4hC3EddxRbVG/K0xiY1Wup7QOHJcjLYXWAn0Kx9Z1SBHHg==}
-    engines: {node: '>=8.0.0'}
-    peerDependencies:
-      rollup: ^2.14.0
-      tslib: '*'
-      typescript: '>=3.7.0'
-    peerDependenciesMeta:
-      tslib:
-        optional: true
-    dependencies:
-      '@rollup/pluginutils': 3.1.0_rollup@2.77.3
-      resolve: 1.22.1
-      rollup: 2.77.3
-      tslib: 2.4.0
-      typescript: 4.7.4
-    dev: true
-
-  /@rollup/pluginutils/3.1.0_rollup@2.77.3:
-    resolution: {integrity: sha512-GksZ6pr6TpIjHm8h9lSQ8pi8BE9VeubNT0OMJ3B5uZJ8pz73NPiqOtCog/x2/QzM1ENChPKxMDhiQuRHsqc+lg==}
-    engines: {node: '>= 8.0.0'}
-    peerDependencies:
-      rollup: ^1.20.0||^2.0.0
-    dependencies:
-      '@types/estree': 0.0.39
-      estree-walker: 1.0.1
-      picomatch: 2.3.1
-      rollup: 2.77.3
-    dev: true
-
   /@rollup/pluginutils/3.1.0_rollup@2.78.1:
     resolution: {integrity: sha512-GksZ6pr6TpIjHm8h9lSQ8pi8BE9VeubNT0OMJ3B5uZJ8pz73NPiqOtCog/x2/QzM1ENChPKxMDhiQuRHsqc+lg==}
     engines: {node: '>= 8.0.0'}
@@ -4186,6 +4131,12 @@ packages:
     resolution: {integrity: sha512-Q5Vn3yjTDyCMV50TB6VRIbQNxSE4OmZR86VSbGaNpfUolm0iePBB4KdEEHmxoY5sT2+2DIvXW0rvMDP2nHZ4Mg==}
     dev: true
 
+  /@types/fs-extra/9.0.13:
+    resolution: {integrity: sha512-nEnwB++1u5lVDM2UI4c1+5R+FYaKfaAzS4OococimjVm3nQw3TuzH5UNsocrcTBbhnerblyHj4A49qXbIiZdpA==}
+    dependencies:
+      '@types/node': 18.7.18
+    dev: true
+
   /@types/glob-stream/6.1.1:
     resolution: {integrity: sha512-AGOUTsTdbPkRS0qDeyeS+6KypmfVpbT5j23SN8UPG63qjKXNKjXn6V9wZUr8Fin0m9l8oGYaPK8b2WUMF8xI1A==}
     dependencies:
@@ -7281,8 +7232,8 @@ packages:
   /electron-to-chromium/1.4.256:
     resolution: {integrity: sha512-x+JnqyluoJv8I0U9gVe+Sk2st8vF0CzMt78SXxuoWCooLLY2k5VerIBdpvG7ql6GKI4dzNnPjmqgDJ76EdaAKw==}
 
-  /element-plus/2.2.18_vue@3.2.39:
-    resolution: {integrity: sha512-2pK2zmVOwP14eFl3rGoR+3BWJwDyO+DZCvzjQ8L6qjUR+hVKwFhgxIcSkKJatbcHFw5Xui6UyN20jV+gQP7mLg==}
+  /element-plus/2.2.28_vue@3.2.39:
+    resolution: {integrity: sha512-BsxF7iEaBydmRfw1Tt++EO9jRBjbtJr7ZRIrnEwz4J3Cwa1IzHCNCcx3ZwcYTlJq9CYFxv94JnbNr1EbkTou3A==}
     peerDependencies:
       vue: ^3.2.0
     dependencies:
@@ -13054,18 +13005,6 @@ packages:
     transitivePeerDependencies:
       - supports-color
 
-  /rollup-plugin-terser/7.0.2_rollup@2.77.3:
-    resolution: {integrity: sha512-w3iIaU4OxcF52UUXiZNsNeuXIMDvFrr+ZXK6bFZ0Q60qyVfq4uLptoS4bbq3paG3x216eQllFZX7zt6TIImguQ==}
-    peerDependencies:
-      rollup: ^2.0.0
-    dependencies:
-      '@babel/code-frame': 7.18.6
-      jest-worker: 26.6.2
-      rollup: 2.77.3
-      serialize-javascript: 4.0.0
-      terser: 5.15.0
-    dev: true
-
   /rollup-plugin-terser/7.0.2_rollup@2.78.1:
     resolution: {integrity: sha512-w3iIaU4OxcF52UUXiZNsNeuXIMDvFrr+ZXK6bFZ0Q60qyVfq4uLptoS4bbq3paG3x216eQllFZX7zt6TIImguQ==}
     peerDependencies:
@@ -15209,10 +15148,6 @@ packages:
       - terser
     dev: true
 
-  /vue-cropper/1.0.5:
-    resolution: {integrity: sha512-D4XXdqWmMWRLOIV9LIh7/mkH6OBOMQDFbRjwntkxmAtxOtwpC9U5ZZ6lSXw5F5cbd4g8znDjk6MuCwIL+fZSrA==}
-    dev: false
-
   /vue-demi/0.13.11_vue@3.2.39:
     resolution: {integrity: sha512-IR8HoEEGM65YY3ZJYAjMlKygDQn25D5ajNFNoKh9RSDMQtlzCxtfQjdQgv9jjK+m3377SsJXY8ysq8kLCZL25A==}
     engines: {node: '>=12'}

tsconfig.node.json

@@ -6,13 +6,6 @@
         "types": ["node"],
         "skipLibCheck": true
     },
-    "include": [
-        // "internal/**/*",
-        // "internal/**/*.json",
-        // "scripts/**/*",
-        // "packages/theme-chalk/*",
-        // "packages/element-plus/version.ts",
-        // "packages/element-plus/package.json"
-    ],
+    "include": ["internal/**/*", "internal/**/*.json", "scripts/**/*", "packages/theme-chalk/*", "packages/kankan-components/version.ts", "packages/kankan-components/package.json"],
     "exclude": ["**/__tests__/**", "**/tests/**", "**/dist"]
 }

typings/env.d.ts

@@ -1,5 +1,5 @@
 import type { vShow } from 'vue'
-const INSTALLED_KEY = Symbol('INSTALLED_KEY')
+import type { INSTALLED_KEY } from '@element-plus/constants'
 declare global {
     const process: {
         env: {