cbvirtua 1.0.56 → 1.0.58

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cbvirtua",
-  "version": "1.0.56",
+  "version": "1.0.58",
   "description": "",
   "main": "index.js",
   "scripts": {

package//346/226/260/345/273/272 /346/226/207/346/234/254/346/226/207/346/241/243.txt"

@@ -97,4 +97,244 @@ input.ui-input, .ui-input > input, [is="ui-input"] {
     font-size: var(--ui-font, 14px);
     outline: none;
     color: var(--ui-dark, #4c5161);
-    transition: border-color var(--ui-animate-time, .2s), background-color var(--ui-animate-time, .2s);
+    transition: border-color var(--ui-animate-time, .2s), background-color var(--ui-animate-time, .2s);
+
+
+import mitt from 'mitt'
+
+// 当前文件名 需要同步修改
+const CURRENT_FILE_NAME = 'useMitt'
+
+// 基础配置
+const defineOptions = {
+  // 是否禁用
+  logDisabled: false,
+  // 是否展开
+  logExpanded: false,
+  // console.group样式
+  logStyle: 'color: #fff; background: #51a2e4; font-size: 12px; padding: 4px; border-radius: 4px'
+}
+
+// uuid
+let idCounter = 0;
+const uniqueId = (prefix) => {
+  return prefix.toString() + ++idCounter;
+}
+
+// 操作时间 HH:mm:ss:ms
+const formatTime = (date = new Date()) => {
+  const hours = date.getHours().toString().padStart(2, '0');
+  const minutes = date.getMinutes().toString().padStart(2, '0');
+  const seconds = date.getSeconds().toString().padStart(2, '0');
+  const milliseconds = date.getMilliseconds().toString();
+
+  return `${hours}:${minutes}:${seconds}:${milliseconds}`;
+}
+
+// 获取堆栈
+const getStackTrace = () => {
+  let stackStr = ''
+  let stackArr = []
+  // 通过Error获取
+  try {
+    throw new Error('');
+  }
+  // catch掉才不会被博睿监控到
+  catch (error) {
+    stackStr = error.stack || '';
+  }
+  // 字符串信息分割为数组 并去掉空格
+  stackArr = stackStr.split('\n').map((line) => line.trim());
+  return stackArr.splice(stackArr[0] === 'Error' ? 2 : 1);
+}
+
+// 在堆栈信息数组中 匹配触发事件的函数
+const matchFnCaller = (stackTrace = []) => {
+  // 文件在src下的 且排除本文件 没有匹配的返回第0项
+  return stackTrace.find(item => item.includes('src') && !item.includes(CURRENT_FILE_NAME)) || stackTrace[0]
+}
+
+
+// 事件信息map结构 key: eventName value: { count: 触发次数, describe： 事件描述 }
+const eventMap = new Map()
+
+// 监听事件 配置logger
+const handleOnEvent = (eventName, value, options) => {
+  const stackTrace = getStackTrace()
+
+  // 匹配事件源 去掉 at 字符
+  const source =  matchFnCaller(stackTrace).substring(3)
+  const describe = eventMap.get(eventName).describe
+  const count = eventMap.get(eventName).count
+
+  const g = options.logExpanded ? console.group : console.groupCollapsed
+  g(`%cmittId => ${options.id}`, options.logStyle)
+  console.log('eventName:', eventName)
+  console.log('eventValue:', value)
+  console.log('eventDescribe:', describe)
+  console.log('eventSource:', source)
+  console.log('count:', count)
+  console.log('time:', formatTime())
+  console.groupEnd()
+}
+
+// 记录事件信息
+const markEventMap = (type, describe) => {
+  if (eventMap.has(type)) {
+    let event = eventMap.get(type)
+    eventMap.set(type, {
+      count: ++event.count,
+      describe
+    })
+  } else {
+    eventMap.set(type, {
+      count: 1,
+      describe
+    })
+  }
+  console.log('eventMap', eventMap)
+}
+// emit事件 记录事件信息
+const handleEmitEvent = (emitter) => {
+  const originEmit = emitter.emit
+  emitter.emit = (type, e, describe = '') => {
+    markEventMap(type, describe)
+    originEmit(type, e)
+  }
+}
+
+// 增加emitAsync方法
+// https://github.com/developit/mitt/discussions/157
+const emitAsync = async function(type, e, describe) {
+  // 记录事件信息
+  markEventMap(type, describe)
+
+  let handlers = this.all.get(type)
+  if (handlers) {
+    for (const f of handlers) {
+      await f(e)
+    }
+  }
+  handlers = this.all.get('*')
+  if (handlers) {
+    for (const f of handlers) {
+      await f(type, e)
+    }
+  }
+}
+const mittAsync = (all) => {
+  const instance = mitt(all)
+  instance.emitAsync = emitAsync
+  return instance
+}
+
+export default function useMitt(customOption) {
+  // 配置项
+  const options = Object.assign({
+    id: uniqueId('mitt-')
+  }, defineOptions, customOption)
+
+  // 实例化mitt
+  const emitter = mittAsync()
+
+  if (!options.disabled) {
+    // 监听所有事件，配置logger
+    emitter.on('*', (eventName, value) => handleOnEvent(eventName, value, options))
+    // 劫持emit，记录信息
+    handleEmitEvent(emitter)
+  }
+ 
+  return emitter
+}
+
+import useMitt from '@/hooks/useMitt'
+
+const emitter = useMitt({id: 'listEmitter', logExpanded: true})
+const handleClick = () => {
+        emitter.emitAsync('showModal', 'data', '此函数是激活confirm modal')
+          .then(() => {
+            console.log('confirm')	// resolve后打印
+          })
+          .catch(() => {
+            console.log('cancel')	// reject后打印
+          })
+      }
+emitter.on('showModal', () => {
+        return new Promise((resolve, reject) => {
+          Modal.confirm({
+            title: '确认是否XXX',
+            onOk() {
+              resolve()
+            },
+            onCancel() {
+              reject()
+            }
+          })
+        })
+      })
+import useMitt from '@/hooks/useMitt'
+const emitter = useMitt({ id: 'contract-edit', logExpanded: true })
+const handleClick = () => {
+        emitter.emit('click', 'data', '这是一个点击事件')
+      }
+export default function mitt(all){
+  //使用Map存储注册的事件
+  all = all || new Map();
+
+
+  return {
+    all,
+    on(type, handler, priority = 0, listener) {
+      const handlers = all!.get(type) || [];
+      handlers.push({handler, priority});
+      handlers.sort((a, b) => b.priority - a.priority);
+      all!.set(type, handlers);
+      if (listener) {
+        listener({type, handler, priority});
+      }
+    },
+    
+    off(type, handler) {
+      const handlers = all!.get(type);
+      if (handlers) {
+        if (handler) {
+          const index =  handlers.findIndex(item => item.handler === handler);
+          handlers.splice(index > -1 ? index : 0, 1);
+        }
+        else {
+          all!.set(type, []);
+        }
+      }
+    },
+    
+    emit(type, evt, listener) {
+      if (listener) {
+        listener({type, evt});
+      }
+      let handlers = all!.get(type);
+      if (handlers) {
+        handlers.slice().map(async (handler) => {
+            await handler(evt);
+          });
+      }
+    }
+  };
+}
+
+
+function eventListener({type, handler, priority}) {
+  console.log(`事件 ${type} 已注册，处理函数为 ${handler}，优先级为 ${priority}`);
+}
+
+
+function eventTriggerListener({type, evt}) {
+  console.log(`事件 ${type} 已触发，事件对象为 ${evt}`);
+}
+
+
+const bus = mitt();
+
+
+bus.on('click', () => console.log('点击事件已触发'), 1, eventListener);
+bus.emit('click', {target: '按钮'}, eventTriggerListener);
+

package/README.md

@@ -1,270 +0,0 @@
-# vue-presetup
-
-> 仅适用于 Vue3
-
-vue-presetup 可以将指定的 Vue 组件进行提前加载，并在组件“准备好”后再进行下一步操作，
-
-如从当前路由 /foo 跳转至 /bar 时，可以先提前在 /foo 页面加载 /bar 对应的组件，随后再进行路由切换
-
-## 安装
-
-通过 npm 安装
-
-```shell
-npm install vue-presetup -S
-```
-
-通过 yarn 安装
-
-```shell
-yarn add vue-presetup -S
-```
-
-通过 pnpm 安装
-
-```shell
-pnpm install vue-presetup -S
-```
-
-## 基础使用示例
-
-有一个简单的使用示例，这个示例是摘自 [playground](./playground) 中的
-
-1. 有以下的路由配置
-
-   **router.ts**
-
-   ```ts
-   import { createRouter, createWebHashHistory } from 'vue-router'
-   import Foo from './views/Foo.vue'
-   import Bar from './views/Bar.vue'
-   
-   const router = createRouter({
-     history: createWebHashHistory(),
-     routes: [
-       {
-         path: '/',
-         redirect: '/foo'
-       },
-       {
-         path: '/foo',
-         component: Foo
-       },
-       {
-         path: '/bar',
-         component: Bar
-       }
-     ]
-   })
-   
-   export default router
-   ```
-
-2. 在 App.vue 使用路由并放置 vue-presetup 需要的载体
-
-   **App.vue**
-
-   ```vue
-   <script setup lang="ts">
-   import { PresetupView } from 'vue-presetup'
-   </script>
-   
-   <template>
-     <RouterView v-slot="{ Component }">
-       <PresetupView :active="Component"></PresetupView>
-     </RouterView>
-   </template>
-   ```
-
-3. 在可能被提前加载的 /bar 组件需要做一些反馈，来告知当前组件什么时候准备好（实际情况可能是首屏数据加载好了啥的）
-
-   **Bar.vue**
-
-   ```vue
-   <script lang="ts" setup>
-   import { ref } from 'vue'
-   import { useContext } from 'vue-presetup'
-   
-   const context = useContext()
-   
-   window.setTimeout(() => {
-       // 在 1500ms 后，这个组件准备好了！
-       context.resolve()
-   }, 1500)
-   </script>
-   
-   <template>
-     <div class="Bar">
-       <h1>Bar.vue</h1>
-     </div>
-   </template>
-   ```
-
-4. 接下来，就可以实现在 /foo 中提前加载 /bar 对应的组件
-
-   **Foo.bar**
-
-   ```vue
-   <script lang="ts" setup>
-   import { ref } from 'vue'
-   import { useSetupComponent } from 'vue-presetup'
-   import router from '../router'
-   import Bar from './Bar.vue'
-   
-   const { setupComponent } = useSetupComponent()
-   
-   const go = async () => {
-     // 等待组件加载完成
-     await setupComponent(Bar)
-     router.push('/bar')
-   }
-   </script>
-   
-   <template>
-     <div class="Foo">
-       <h1>Foo.vue</h1>
-       <button @click="go">Go</ElButton>
-     </div>
-   </template>
-   ```
-
-## 与 Transition、KeepAlive 一起使用
-
-编辑上述示例中 **App.vue**
-
-```vue
-<script> /* ... */ </script>
-<template>
-  <RouterView v-slot="{ Component }">
-    <PresetupView :active="Component" v-slot="{ Component: Component2 }">
-      <Transition name="fade" mode="out-in">
-        <KeepAlive include="foo">
-          <component :is="Component2"></component>
-        </KeepAlive>
-      </Transition>
-    </PresetupView>
-  </RouterView>
-</template>
-```
-
-## API
-
-### PresetupView
-
-Type: Component
-
-Props：
-
-+ `active`: 期望渲染的 VNode
-
-### useSetupComponent
-
-Type: Hook
-
-Return: { setupComponent }
-
-> 这是一个 Vue3 Hook，因此只能在 setup 函数中使用
-
-```vue
-<script setup lang="ts">
-import { useSetupComponent } from 'vue-presetup'
-import Bar from './Bar.vue'
-
-const { setupComponent } = useSetupComponent()
-
-const next = async () => {
-    await setupComponent(Bar, /* props */)
-}
-</script>
-```
-
-#### setupComponent
-
-Params:
-
- + Component
-
-   需要加载的组件对象，这个组件必须有 `name` 属性，否则会收到一个被 reject 的 Promise；
-
-   同一组件（相同的 `name` ，后同）可预加载的数量是有限的（一个），在后面预加载的组件会覆盖之前已加载过的同一组件。
-
- + props
-
-   传递给组件的参数，在 Vue 组件中是区分 Props 和 Attrs 的，因此在组件内部接收这个参数时候需要声明 Props，否则会给 Vue 理解为 Attrs，如下面这个示例，在 Comp.vue 中，p1,p2 在组件的 props 中，p3 是 attrs 中：
-
-   Comp.vue
-
-   ```vue
-   <script setup lang="ts">
-   const props = deineProps(['p1', 'p2'])
-   </script>
-   ```
-
-   Foo.vue
-
-   ```vue
-   <script setup lang="ts">
-   import { useSetupComponent } from 'vue-presetup'
-   import Comp from './Comp.vue'
-   
-   const { setupComponent } = useSetupComponent()
-   
-   const next = async () => {
-       await setupComponent(Comp, {
-           p1: 1,
-           p2: 2,
-           p3: 3
-       })
-   }
-   </script>
-   ```
-
-### useContext
-
-Type: Hook
-
-Return Context
-
-> 这是一个 Vue3 Hook，因此只能在 setup 函数中使用
-
-用在可能会被预加载的组件中，如基础使用示例的 Bar.vue
-
-#### Context
-
-```ts
-interface UseContextResult {
-  // 在当前组件“准备好”调用，以告知预加载完成。如当前组件不是通过预加载，此方法什么都不会发生。
-  resolve: Callback
-  // 在当前组件中预加载发生错误时候调用。如当前组件不是通过预加载，此方法什么都不会发生。
-  reject: Callback
-  // 获取在 setupComponent 中传递的参数。如当前组件不是通过预加载，此方法没有办法获取任何值，除非你提供了 defaultValue
-  get<R = unknown>(key: string): R | undefined
-  get<R = unknown>(key: string, defaultValue: R): R
-}
-```
-
-### removeComponent
-
-将一个已预加载的组件移除
-
-Params:
-
-+ `name`: 被移除组件的 name
-
-```vue
-<script setup lang="ts">
-import { useSetupComponent, removeComponent } from 'vue-presetup'
-import Bar from './Bar.vue'
-
-const { setupComponent } = useSetupComponent()
-
-const next = async () => {
-    await setupComponent(Bar, /* props */)
-    removeComponent(Bar.name)
-}
-</script>
-```
-
-## License
-
-[MIT](https://github.com/haiya6/vite-plugin-html-resolve-alias/blob/main/LICENSE)