@wlydfe/pro-ui 0.2.20 → 0.2.21

package/packages/utils/src/ws.ts

@@ -0,0 +1,191 @@
+import qs from 'qs'
+
+/**
+ * setTimeout 类型
+ */
+type Timeout = ReturnType<typeof setTimeout>
+
+/**
+ * setInterval 类型
+ */
+type Interval = ReturnType<typeof setInterval>
+
+/**
+ * 允许null的泛型
+ */
+type Nullable<T> = T | null
+
+/**
+ * 默认重连次数
+ */
+const reconnectMaxCount = 3
+/**
+ * 默认心跳信息
+ */
+const message = 'ping'
+/**
+ * 默认心跳间隔
+ */
+const interval = 3000
+
+/**
+ * 默认延时时间
+ */
+const timeout = 1000
+
+type AutoReconnect = {
+  /**
+   *重连尝试次数 默认 3
+   */
+  reconnectMaxCount?: number
+}
+
+type Heartbeat = {
+  /**
+   * 心跳信息 默认`ping`
+   */
+  message: string
+  /**
+   * 心跳间隔时间 默认 `3000` 毫秒
+   */
+  interval: number
+}
+
+export interface WSOptions {
+  /**
+   * 是否自动重连 默认`true`
+   */
+  autoReconnect: boolean | AutoReconnect
+  /**
+   * 心跳 默认`false`
+   */
+  heartbeat: boolean | Heartbeat
+  /**
+   * url 携带的参数
+   */
+  query: Record<string, string>
+}
+
+class WS {
+  url: string
+  socket: WebSocket | null = null
+  reconnectCount = 0
+  delay: Nullable<Timeout> = null
+  timer: Nullable<Interval> = null
+  autoReconnect: WSOptions['autoReconnect']
+  heartbeat: WSOptions['heartbeat']
+  query: WSOptions['query']
+
+  constructor(url?: string, options?: WSOptions) {
+    const { autoReconnect = true, query = {}, heartbeat = false } = options || {}
+    this.autoReconnect = autoReconnect
+    this.heartbeat = heartbeat
+    this.query = query
+
+    this.url = `${url}` + qs.stringify({ ...this.query }, { addQueryPrefix: true })
+
+    // 开启连接
+    this.connect()
+  }
+
+  /**
+   * 连接
+   */
+  connect(): void {
+    this.close()
+    this.socket = new WebSocket(this.url)
+    this.onError()
+    this.onOpen()
+  }
+
+  /**
+   * 监听连接
+   */
+  onOpen(): void {
+    if (this.socket) {
+      this.socket.onopen = () => {
+        this.send('ping')
+        // 开启心跳
+        this.heartbeat && this.startHeartbeat()
+      }
+    }
+  }
+
+  /**
+   * 开启心跳
+   */
+  startHeartbeat(): void {
+    const msg = (this.heartbeat as Heartbeat)?.message || message
+    const int = (this.heartbeat as Heartbeat)?.interval || interval
+    this.timer = setInterval(() => {
+      this.send(msg)
+    }, int)
+  }
+
+  /**
+   * 监听错误
+   */
+  onError(): void {
+    if (this.socket) {
+      this.socket.onerror = () => {
+        const count = (this.autoReconnect as AutoReconnect)?.reconnectMaxCount || reconnectMaxCount
+        if (this.autoReconnect && this.reconnectCount < count) {
+          this.reconnectCount++
+          this.connect()
+        }
+      }
+    }
+  }
+
+  /**
+   * 关闭连接
+   */
+  close(): void {
+    this.socket && this.socket.close()
+    this.delay && clearTimeout(this.delay)
+    this.timer && clearInterval(this.timer)
+    this.socket = null
+  }
+
+  /**
+   *  监听消息
+   * @param callback
+   */
+  onMessage(callback: (...data: any[]) => any): void {
+    if (this.socket) {
+      this.socket.onmessage = data => {
+        try {
+          const res = JSON.parse(data.data)
+          callback(res)
+        } catch (err) {
+          callback(data)
+        }
+      }
+    }
+  }
+
+  /**
+   * 发送消息
+   * @param data
+   */
+  send(data: string | ArrayBufferLike | Blob | ArrayBufferView): void {
+    if (!this.socket) return
+    // 状态为 `1-开启状态` 直接发送
+    if (this.socket.readyState === this.socket.OPEN) {
+      this.socket.send(JSON.stringify(data))
+      // 状态为 `0-开启状态` 则延后调用
+    } else if (this.socket.readyState === this.socket.CONNECTING) {
+      this.delay = setTimeout(() => {
+        this.socket?.send(data)
+      }, timeout)
+      // 状态为 `2-关闭中 3-关闭状态` 则重新连接
+    } else {
+      this.connect()
+      this.delay = setTimeout(() => {
+        this.socket?.send(data)
+      }, timeout)
+    }
+  }
+}
+
+export { WS }

package/packages/utils/tsconfig.json

@@ -0,0 +1,19 @@
+{
+  "compilerOptions": {
+    "target": "es2015",
+    "lib": ["dom", "esnext"],
+    "removeComments": false,
+    "module": "CommonJS",
+    "declaration": true,
+    "sourceMap": true,
+    "strict": true,
+    "noImplicitAny": false,
+    "baseUrl": ".",
+    "outDir": "./dist",
+    "esModuleInterop": true,
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "skipLibCheck": true
+  },
+  "include": ["src/**/*.ts"]
+}

package/pnpm-workspace.yaml

@@ -0,0 +1,3 @@
+packages:
+  - packages/*
+  - docs

package/scripts/build/all.ts

@@ -0,0 +1,150 @@
+import { resolve, basename } from 'path'
+import vuePlugin from '@vitejs/plugin-vue'
+import postcss from 'rollup-plugin-postcss'
+import autoprefixer from 'autoprefixer'
+import fs from 'fs'
+import cssnano from 'cssnano'
+import { rollup, Plugin } from 'rollup'
+import consola from 'consola'
+import { nodeResolve } from '@rollup/plugin-node-resolve'
+import commonjs from '@rollup/plugin-commonjs'
+import esbuild, { minify as minifyPlugin } from 'rollup-plugin-esbuild'
+import glob from 'fast-glob'
+import { camelCase, upperFirst } from 'lodash'
+import { pcOutput, pcRoot, projPackage, localesRoot } from '../utils/paths'
+import {
+  writeBundles,
+  formatBundleFilename,
+  PKG_CAMEL_CASE_NAME,
+  PKG_NAME,
+  PKG_CAMEL_CASE_LOCAL_NAME,
+  target
+} from '../utils'
+import { external } from '../utils/main'
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore
+import banner2 from 'rollup-plugin-banner2'
+import { PlusProComponentsAlias, PlusProComponentsClearConsole } from '../utils/plugin'
+
+const pkg = JSON.parse(fs.readFileSync(projPackage, 'utf-8'))
+
+const banner = `/*! ${PKG_NAME} v${pkg.version} */\n`
+
+const buildAll = async (minify?: boolean) => {
+  const plugins = [
+    PlusProComponentsClearConsole(),
+    PlusProComponentsAlias(),
+    vuePlugin({ isProduction: true }) as Plugin,
+    nodeResolve({
+      extensions: ['.mjs', '.js', '.json', '.ts']
+    }),
+    commonjs(),
+    banner2(() => banner),
+    esbuild({
+      sourceMap: false,
+      target: target,
+      loaders: {
+        '.vue': 'ts'
+      }
+    })
+  ]
+
+  if (minify) {
+    plugins.push(
+      minifyPlugin({
+        target: target,
+        sourceMap: false
+      })
+    )
+    plugins.push(
+      postcss({
+        extract: true,
+        plugins: [autoprefixer(), cssnano()]
+      })
+    )
+  } else {
+    plugins.push(
+      postcss({
+        extract: true,
+        plugins: [autoprefixer()]
+      })
+    )
+  }
+
+  const bundle = await rollup({
+    input: resolve(pcRoot, 'index.ts'),
+    plugins,
+    external: external,
+    treeshake: true
+  })
+
+  await writeBundles(bundle, [
+    {
+      format: 'umd',
+      file: resolve(pcOutput, formatBundleFilename('index', minify, 'js')),
+      exports: 'named',
+      name: PKG_CAMEL_CASE_NAME,
+      globals: {
+        vue: 'Vue',
+        'element-plus': 'ElementPlus'
+      },
+      sourcemap: false
+    },
+    {
+      format: 'esm',
+      file: resolve(pcOutput, formatBundleFilename('index', minify, 'mjs')),
+      sourcemap: false
+    }
+  ])
+  const msg = minify
+    ? 'Successfully build compressed umd and esm!'
+    : 'Successfully build into umd and esm!'
+  consola.success(msg)
+}
+
+async function buildLocale(minify: boolean) {
+  const files = await glob(`**/*.ts`, {
+    cwd: resolve(localesRoot, 'lang'),
+    absolute: true
+  })
+  return Promise.all(
+    files.map(async file => {
+      const filename = basename(file, '.ts')
+      const name = upperFirst(camelCase(filename))
+
+      const bundle = await rollup({
+        input: file,
+        plugins: [
+          esbuild({
+            minify,
+            sourceMap: false,
+            target
+          })
+        ]
+      })
+      await writeBundles(bundle, [
+        {
+          format: 'umd',
+          file: resolve(pcOutput, 'locale', formatBundleFilename(filename, minify, 'js')),
+          exports: 'default',
+          name: `${PKG_CAMEL_CASE_LOCAL_NAME}${name}`,
+          sourcemap: false,
+          banner
+        },
+        {
+          format: 'esm',
+          file: resolve(pcOutput, 'locale', formatBundleFilename(filename, minify, 'mjs')),
+          sourcemap: false,
+          banner
+        }
+      ])
+    })
+  ).then(() => {
+    const msg = minify ? 'Successfully build compressed locale!' : 'Successfully build into locale!'
+    consola.success(msg)
+  })
+}
+
+const task = [buildAll(false), buildAll(true), buildLocale(false), buildLocale(true)]
+
+export default task

package/scripts/build/build.config.ts

@@ -0,0 +1,10 @@
+import { defineBuildConfig } from 'unbuild'
+
+export default defineBuildConfig({
+  entries: ['index'],
+  clean: true,
+  declaration: true,
+  rollup: {
+    emitCJS: true
+  }
+})

package/scripts/build/index.ts

@@ -0,0 +1,62 @@
+import { resolve } from 'path'
+import { copyFile, readFile, writeFile } from 'fs/promises'
+import consola from 'consola'
+import { buildOutput, pcOutput, projRoot, pcPackage } from '../utils/paths'
+import { copy } from 'fs-extra'
+import all from './all'
+import modules from './modules'
+
+const copyFiles = () =>
+  Promise.all([
+    copyFile(pcPackage, resolve(pcOutput, 'package.json')),
+    copyFile(resolve(projRoot, 'README.md'), resolve(pcOutput, 'README.md')),
+    copyFile(resolve(projRoot, 'global.d.ts'), resolve(pcOutput, 'global.d.ts'))
+  ])
+
+const copyDts = async () => {
+  const src = resolve(buildOutput, 'types')
+
+  /**
+   * copy es dts
+   */
+  const targetES = resolve(pcOutput, 'es')
+  await copy(src, targetES)
+
+  /**
+   * copy lib dts
+   */
+  const targetLib = resolve(pcOutput, 'lib')
+  await copy(src, targetLib)
+
+  /**
+   * copy lang dts
+   */
+  const lang = resolve(src, 'locale', 'lang')
+  const targetLocale = resolve(pcOutput, 'locale')
+  await copy(lang, targetLocale)
+}
+
+const updateVersion = async () => {
+  const pcOutputPkg = resolve(pcOutput, 'package.json')
+  const mainPackageInfo = await readFile(pcOutputPkg, 'utf-8')
+  const packageInfo = await readFile(resolve(projRoot, 'package.json'), 'utf-8')
+  const mainPkg = JSON.parse(mainPackageInfo)
+  const pkg = JSON.parse(packageInfo)
+  mainPkg.version = pkg.version
+  await writeFile(pcOutputPkg, JSON.stringify(mainPkg, null, 2) + '\n')
+}
+
+const task = [...all, ...modules]
+
+Promise.all(task)
+  .then(async () => {
+    await copyDts()
+    consola.success('Successfully copied definition file!')
+    await copyFiles()
+    consola.success('Successfully copied package.json and README.md and global.d.ts!')
+    await updateVersion()
+    consola.success('Successfully updated version!')
+  })
+  .catch(err => {
+    console.log(err)
+  })

package/scripts/build/modules.ts

@@ -0,0 +1,143 @@
+import { resolve } from 'path'
+import consola from 'consola'
+import { rollup, Plugin } from 'rollup'
+import { nodeResolve } from '@rollup/plugin-node-resolve'
+import commonjs from '@rollup/plugin-commonjs'
+import esbuild from 'rollup-plugin-esbuild'
+import glob from 'fast-glob'
+import vuePlugin from '@vitejs/plugin-vue'
+import postcss from 'rollup-plugin-postcss'
+import autoprefixer from 'autoprefixer'
+import dts from 'vite-plugin-dts'
+import cssnano from 'cssnano'
+import type { OutputOptions, ModuleFormat } from 'rollup'
+import { pcOutput, pcRoot, pkgRoot, TSCONFIG_PATH, DTS_OUT_DIR } from '../utils/paths'
+import { target, writeBundlesFunction, pathRewriter, cssResolver } from '../utils'
+import { externalModules, excludeFiles } from '../utils/main'
+import {
+  PlusProComponentsAlias,
+  PlusProComponentsExternal,
+  PlusProComponentsClearConsole
+} from '../utils/plugin'
+
+const buildConfig = {
+  esm: {
+    module: 'ESNext',
+    format: 'esm',
+    ext: 'mjs',
+    output: {
+      name: 'es',
+      path: resolve(pcOutput, 'es')
+    }
+  },
+  cjs: {
+    module: 'CommonJS',
+    format: 'cjs',
+    ext: 'js',
+    output: {
+      name: 'lib',
+      path: resolve(pcOutput, 'lib')
+    }
+  }
+}
+const buildConfigEntries = Object.entries(buildConfig)
+
+const buildModules = async () => {
+  const input = excludeFiles(
+    await glob('**/*.{js,ts,vue}', {
+      cwd: pkgRoot,
+      absolute: true,
+      onlyFiles: true
+    })
+  )
+
+  const getBundle = async (options: OutputOptions) => {
+    const plugins = [
+      PlusProComponentsClearConsole(),
+      PlusProComponentsExternal(options),
+      PlusProComponentsAlias(),
+      vuePlugin({ isProduction: true }) as Plugin,
+      nodeResolve({
+        extensions: ['.mjs', '.js', '.json', '.ts']
+      }),
+      commonjs(),
+      esbuild({
+        sourceMap: false,
+        target: target,
+        loaders: {
+          '.vue': 'ts'
+        }
+      }),
+      postcss({
+        namedExports: true,
+        extract: true,
+        plugins: [autoprefixer(), cssnano()]
+      })
+    ]
+
+    const config = {
+      input,
+      external: externalModules,
+      plugins:
+        options.format === 'esm'
+          ? [
+              ...plugins,
+              dts({
+                entryRoot: pkgRoot,
+                tsconfigPath: TSCONFIG_PATH,
+                outDir: DTS_OUT_DIR,
+                staticImport: true,
+                insertTypesEntry: false,
+                cleanVueFileName: false,
+                copyDtsFiles: false,
+                strictOutput: true,
+                exclude: [
+                  resolve(pkgRoot, 'eslint-config'),
+                  resolve(pkgRoot, 'utils'),
+                  resolve(pkgRoot, 'resolver'),
+                  resolve(pkgRoot, 'theme-chalk'),
+                  resolve(pkgRoot, 'play')
+                ],
+                resolvers: [cssResolver],
+                beforeWriteFile: (filePath: string, content: string) => {
+                  let tempPath = filePath
+                  let code = pathRewriter(content)
+                  // packages/plus-pro-components
+                  if (filePath.includes('dist/types/plus-pro-components')) {
+                    tempPath = filePath.replace('dist/types/plus-pro-components', 'dist/types')
+                  }
+                  // */style/index   */style/css
+                  if (filePath.includes('style/index') || filePath.includes('style/css')) {
+                    code = JSON.parse(content)
+                  }
+                  return {
+                    filePath: tempPath,
+                    content: code
+                  }
+                }
+              })
+            ]
+          : plugins,
+      treeshake: false
+    }
+    return await rollup(config)
+  }
+
+  await writeBundlesFunction(
+    getBundle,
+    buildConfigEntries.map(([module, config]): OutputOptions => {
+      return {
+        format: config.format as ModuleFormat,
+        dir: config.output.path,
+        exports: module === 'cjs' ? 'named' : undefined,
+        preserveModules: true,
+        preserveModulesRoot: pcRoot,
+        sourcemap: false,
+        entryFileNames: `[name].${config.ext}`
+      }
+    })
+  )
+  consola.success('Successfully build into modules!')
+}
+
+export default [buildModules()]

package/scripts/build/package.json

@@ -0,0 +1,14 @@
+{
+  "name": "@wlydfe/pro-ui-build",
+  "version": "0.0.1",
+  "private": true,
+  "type": "module",
+  "description": "Build Toolchain for plus-pro-components",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "scripts": {
+    "build": "node .",
+    "stub": "npx unbuild --stub"
+  }
+}