refactor: enhance type

Author: Simon he

README.md

@@ -11,16 +11,41 @@
 目前整理了<strong>100+</strong>的常用函数,还在持续更新中...,你的认可是对我最大的鼓励 :hearts:
 
 
-## 🔥 亮点
-- 纯js的工具函数,不依赖vue,react,angular
-- dom操作的api封装,如在vue中使用是不需要onMounted获取dom节点的,可以直接使用class或者id传入
-- 副作用函数,可以在函数执行的结果去stop,也会在页面销毁时被自动stop
-- api设计简单、实用
+## :100: 亮点
+- 纯js的工具函数,可使用在任何可执行js的环境
+- 大量减少`ref<HTMLElment>` 和 `onMounted`的使用，可以script标签直接调用
+- 所有的副作用函数都能返回一个stop函数，可以在任意地方停止事件的执行，并且在页面销毁时自动销毁事件
+- api设计简单、实用、类型友好
+
+## &#x270B; 例子
+```js
+import { addEventListener, animationFrameWrapper, insertElement, useMutationObserver } from 'simon-js-tool'
+// 监听container的变化, 你不在需要const container = ref<HTMLElement>
+useMutationObserver('#container', (mutationsList, observer) => {
+  console.log(mutationsList)
+})
+// requestAnimationFrame
+animationFrameWrapper((timestamp) => {
+  // 每针相隔1s执行
+  console.log('animationFrame', timestamp)
+}, 1000, true /* 只执行一次后被销毁 */)
+// 注册事件
+addEventListener('#container', 'click', () => {
+  console.log('click')
+})
+// 插入元素
+insertElement('#container', '.content')
+// 删除元素
+removeElement('.content')
+```
+```html
+<div id="container"></div>
+<div class="content">hello world</div>
+```
 
 ## :balloon: 更多
 - 导出函数 [exports-function](https://github.com/SimonHe1995/exportsFunction)
-- threejs [@simon_he/s-three](https://github.com/SimonHe1995/sThree)
-- Echarts [@simon_he/s-chart](https://github.com/SimonHe1995/sCharts)
+- threejs [@simon_he/s-three]Charts [@simon_he/s-chart](https://github.com/SimonHe1995/sCharts)
 - numsWheel [@simon_he/nums-wheel](https://github.com/SimonHe1995/numsWheel)
 - vAxios [@simon_he/v-axios](https://github.com/SimonHe1995/vAxios)
 

README_en.md

@@ -10,11 +10,37 @@
 
 At present, I have sorted out <strong>100+</strong> commonly used functions, and I am still updating..., and your recognition is the biggest encouragement to me :hearts:
 
-## 🔥 Highlights
-- Pure js tool functions, not dependent on vue, react, angular
-- API encapsulation for dom operations, such as those used in vue, does not require onMounted to obtain dom nodes, and can be passed in directly using class or id
-- Side effect functions, which can be destop as a result of function execution, are also automatically stopped when the page is destroyed
-- Api design is simple and practical
+## :100: Highlights
+- Pure JS utility functions, Can be used in any environment where JS can be executed
+- Greatly reduced the use of `ref<HTMLElment>` and `onMounted`, which can be called directly from the script tag
+- All side effect functions can return a stop function, which can stop the execution of the event anywhere, and automatically destroy the event when the page is destroyed
+- API design is simple, practical and type-friendly
+
+## &#x270B; Example
+```js
+import { addEventListener, animationFrameWrapper, insertElement, useMutationObserver } from 'simon-js-tool'
+// To listen for container changes, you don't need const container <HTMLElement>= ref
+useMutationObserver('#container', (mutationsList, observer) => {
+  console.log(mutationsList)
+})
+// requestAnimationFrame
+animationFrameWrapper((timestamp) => {
+  // Each needle is executed 1s apart
+  console.log('animationFrame', timestamp)
+}, 1000, true /* It is destroyed after only one execution */)
+// Register for events
+addEventListener('#container', 'click', () => {
+  console.log('click')
+})
+// Insert an element
+insertElement('#container', '.content')
+// Delete an element
+removeElement('.content')
+```
+```html
+<div id="container"></div>
+<div class="content">hello world</div>
+```
 
 ## :balloon: More
 - Export function [exports-function](https://github.com/SimonHe1995/exportsFunction)

src/Canvas.ts

@@ -1,6 +1,6 @@
 export class Canvas {
-  canvas: HTMLCanvasElement = document.createElement('canvas')
-  ctx: CanvasRenderingContext2D = this.canvas.getContext('2d')!
+  canvas = document.createElement('canvas')
+  ctx = this.canvas.getContext('2d')!
   constructor(width?: number, height?: number) {
     if (width)
       this.canvas.width = width

src/CreateSignatureCanvas.ts

@@ -21,29 +21,29 @@ export class CreateSignatureCanvas implements ISignature {
     this.ctx.lineCap = 'round'
     let offsetY = 0
     let offsetX = 0
-    this.stop.push(addEventListener(this.canvas, 'touchstart', (e: TouchEvent) => {
+    this.stop.push(addEventListener(this.canvas, 'touchstart', (e) => {
       offsetY = this.canvas.offsetTop
       offsetX = this.canvas.offsetLeft
       this.ctx.beginPath()
       this.ctx.moveTo(e.changedTouches[0].pageX + 2 - offsetX, e.changedTouches[0].pageY - offsetY)
     }, false))
     let down = false
-    this.stop.push(addEventListener(this.canvas, 'mousedown', (e: MouseEvent) => {
+    this.stop.push(addEventListener(this.canvas, 'mousedown', (e) => {
       offsetY = this.canvas.offsetTop
       offsetX = this.canvas.offsetLeft
       down = true
       this.ctx.beginPath()
       this.ctx.moveTo(e.pageX + 2 - offsetX, e.pageY - offsetY)
     }, false))
-    this.stop.push(addEventListener(this.canvas, 'mousemove', (e: MouseEvent) => {
+    this.stop.push(addEventListener(this.canvas, 'mousemove', (e) => {
       if (!down)
         return
       this.ctx.lineTo(e.pageX + 2 - offsetX, e.pageY - offsetY)
       this.ctx.stroke()
     }, false))
     this.stop.push(addEventListener(this.canvas, 'mouseup', () => down = false))
     this.stop.push(addEventListener(this.canvas, 'mouseout', () => down = false))
-    this.stop.push(addEventListener(this.canvas, 'touchmove', (e: TouchEvent) => {
+    this.stop.push(addEventListener(this.canvas, 'touchmove', (e) => {
       this.ctx.lineTo(e.changedTouches[0].pageX + 2 - offsetX, e.changedTouches[0].pageY - offsetY)
       this.ctx.stroke()
     }, false))

src/DotImageCanvas.ts

@@ -5,8 +5,8 @@ import { insertElement } from './insertElement'
 import { removeElement } from './removeElement'
 
 export class DotImageCanvas {
-  canvas: HTMLCanvasElement = document.createElement('canvas')
-  ctx: CanvasRenderingContext2D = this.canvas.getContext('2d')!
+  canvas = document.createElement('canvas')
+  ctx = this.canvas.getContext('2d')!
   points: Map<string, Record<string, any>> = new Map()
   originSrc = ''
   color = ''
@@ -62,7 +62,7 @@ export class DotImageCanvas {
     })
     return new Promise((resolve) => {
       img.onload = () => {
-        this.getCanvas(this.createDotImage(img as HTMLImageElement))
+        this.getCanvas(this.createDotImage(img))
         resolve(img)
       }
       img.onerror = () => {

src/DotTextCanvas.ts

@@ -3,8 +3,8 @@ import { idleCallbackWrapper } from './idleCallbackWrapper'
 import { insertElement } from './insertElement'
 import { removeElement } from './removeElement'
 export class DotTextCanvas {
-  canvas: HTMLCanvasElement = document.createElement('canvas')
-  ctx: CanvasRenderingContext2D = this.canvas.getContext('2d')!
+  canvas = document.createElement('canvas')
+  ctx = this.canvas.getContext('2d')!
   points: Map<string, Array<number[]>> = new Map()
   originText: string
   fontSize: number

src/addEventListener.ts

@@ -1,12 +1,13 @@
 import { mount } from './mount'
+import { unmount } from './unmount'
 
-export function addEventListener(target: Window | Document | Element | string, eventName: string, callback: (e: any) => void, useCapture?: boolean | AddEventListenerOptions, autoRemove?: boolean): (() => void) {
+export function addEventListener<T extends keyof WindowEventMap>(target: Window | Document | Element | string, eventName: T, callback: (e: WindowEventMap[T]) => void, useCapture?: boolean | AddEventListenerOptions, autoRemove?: boolean): (() => void) {
   let stopped = false
   let stop: () => void
   let animationStop: (() => void)
   if (eventName === 'DOMContentLoaded')
     stopped = true
-  function event(e: Event) {
+  function event(e: WindowEventMap[T]) {
     try {
       callback?.call?.(e.target, e)
     }
@@ -17,8 +18,7 @@ export function addEventListener(target: Window | Document | Element | string, e
     if (autoRemove)
       stop()
   }
-
-  window.onunload = () => stop?.()
+  unmount(() => stop?.())
 
   mount(target, (target) => {
     const originCall = (target as any)?.[eventName]
@@ -31,15 +31,15 @@ export function addEventListener(target: Window | Document | Element | string, e
       catch (error) {
         console.error(error)
       }
-      event(e)
+      event(e as WindowEventMap[T])
     }
     target.addEventListener(eventName, eventFunction, useCapture)
     stop = () => (target as Element).removeEventListener(eventName, eventFunction, useCapture)
     if (stopped)
       stop?.()
   })
   return () => {
-    if (!stop)
+    if (!stop)
       return stopped = true
     stop?.()
   }

src/copy.ts

@@ -1,7 +1,7 @@
 import { createElement } from './createElement'
 export function copy(s: string): boolean {
   try {
-    const textarea: any = createElement('textarea', {
+    const textarea = createElement('textarea', {
       readonly: 'readonly',
     }, s)
     document.body.appendChild(textarea)

src/createElement.ts

@@ -1,5 +1,5 @@
-export function createElement(tag: string, attributes?: Record<string, string>, innerHTML?: string) {
-  const el = document.createElement(tag)
+export function createElement<T extends keyof HTMLElementTagNameMap>(tag: T, attributes?: Record<string, string>, innerHTML?: string): HTMLElementTagNameMap[T] {
+  const el = document.createElement(tag) as HTMLElementTagNameMap[T]
   if (!attributes)
     return el
   for (const key in attributes)

src/diff.ts

@@ -7,7 +7,6 @@ export function diff(array1: any[], array2: any[], options: Options = { compare:
   const same = array1.filter(item => array2.includes(item))
   const diff = array1.filter(item => !array2.includes(item)).concat(array2.filter(item => !array1.includes(item)))
   const { compare, result } = options
-  console.log(diff)
   if (compare === 'same') {
     return result === 'value'
       ? same