refactor: 格式化代码

Author: agileago

eslint.config.js

@@ -24,5 +24,7 @@ export default defineConfig({
     '@typescript-eslint/no-explicit-any': 'off',
     '@typescript-eslint/no-floating-promises': 'off',
     'require-await': 'warn',
+    '@typescript-eslint/no-useless-constructor': 'warn',
+    '@typescript-eslint/no-unsafe-function-type': 'warn',
   },
 })

playground/package.json

@@ -19,6 +19,7 @@
     "vite": "^6.2.4",
     "typescript": "^5.8.2",
     "vite-plugin-tsconfig-paths": "^1.4.1",
-    "@vue3-oop/plugin-vue-jsx": "^1.4.6"
+    "@vue3-oop/plugin-vue-jsx": "^1.4.6",
+    "@vue/runtime-dom": "^3.5.13"
   }
 }

playground/src/common/directive/index.ts

@@ -6,7 +6,7 @@ import type { App, Directive } from 'vue'
 const dirs = import.meta.glob('./**/*.directive.ts', { eager: true })
 
 export function setupDirective(app: App) {
-  Reflect.ownKeys(dirs).forEach((k) => {
+  Reflect.ownKeys(dirs).forEach(k => {
     const module: any = dirs[k as string]
     if (!module?.default) return
     const dir = module.default as Directive & { name: string }

playground/src/main.tsx

@@ -44,17 +44,14 @@ class App extends VueComponent {
               VUE 示例
             </h2>
             <Menu theme={'dark'} mode={'inline'}>
-              {routes.map((r) => {
+              {routes.map(r => {
                 return (
                   <Menu.SubMenu title={r.meta?.title} key={r.path}>
                     {'children' in r &&
-                      r.children?.map((i) => {
+                      r.children?.map(i => {
                         return (
                           <Menu.Item key={i.path}>
-                            <RouterLink
-                              to={i.path}
-                              style={{ display: 'block' }}
-                            >
+                            <RouterLink to={i.path} style={{ display: 'block' }}>
                               {i.meta?.title}
                             </RouterLink>
                           </Menu.Item>

playground/src/module/basic/hello-world/a.comp.tsx

@@ -1,13 +1,4 @@
-import {
-  Autobind,
-  Component,
-  type ComponentProps,
-  Computed,
-  Hook,
-  Mut,
-  VueComponent,
-  VueService,
-} from 'vue3-oop'
+import { Autobind, Component, type ComponentProps, Computed, Hook, Mut, VueComponent, VueService } from 'vue3-oop'
 import type { VNodeChild } from 'vue'
 import { Injectable } from 'injection-js'
 

playground/src/module/basic/hello-world/hello-world.view.tsx

@@ -1,7 +1,6 @@
 import { Hook, injectService, Link, Mut, VueComponent } from 'vue3-oop'
 import { Button, Card, Input } from 'ant-design-vue'
-import { withModifiers } from 'vue'
-import { RouterService } from '../../../router/router.service'
+import { RouterService } from '@/router/router.service'
 
 export class Base extends VueComponent {
   @Mut() count = 1
@@ -14,13 +13,16 @@ function Foo() {
   return <div v-focus>aaaaaaa</div>
 }
 
+declare module '@vue/runtime-dom' {
+  interface HTMLAttributes {
+    onClickOnce?: () => void
+    'v-focus'?: any
+  }
+}
+
 export class Child1 extends Base {
   render() {
-    return (
-      <div onClick={withModifiers(() => this.count++, ['once'])}>
-        {super.render()}
-      </div>
-    )
+    return <div onClickOnce={() => this.count++}>{super.render()}</div>
   }
 }
 
@@ -39,7 +41,7 @@ export default class HelloWorldView extends VueComponent {
   @Mut() count = 1
 
   async init() {
-    await new Promise((r) => setTimeout(r, 5000))
+    await new Promise(r => setTimeout(r, 5000))
   }
 
   router = injectService(RouterService)!
@@ -59,10 +61,7 @@ export default class HelloWorldView extends VueComponent {
         <Button type={'primary'} onClick={() => this.count++} ref={'abc'}>
           +
         </Button>
-        <Input
-          v-model:value={this.count}
-          style={{ width: '100px', textAlign: 'center' }}
-        ></Input>
+        <Input v-model:value={this.count} style={{ width: '100px', textAlign: 'center' }}></Input>
         <Button type={'primary'} onClick={() => this.count--}>
           -
         </Button>

playground/src/module/basic/hoc/hoc.view.tsx

@@ -1,11 +1,4 @@
-import {
-  type ComponentProps,
-  Hook,
-  Link,
-  Mut,
-  useForwardRef,
-  VueComponent,
-} from 'vue3-oop'
+import { type ComponentProps, Hook, Link, Mut, useForwardRef, VueComponent } from 'vue3-oop'
 import { nextTick } from 'vue'
 import { Card } from 'ant-design-vue'
 
@@ -25,7 +18,7 @@ class Origin extends VueComponent<OriginProps> {
     return (
       <div>
         <h2 onClick={() => this.count++}>{this.count}</h2>
-        {props.data?.map((k) => <li key={k}>{k}</li>) || <div>nodata</div>}
+        {props.data?.map(k => <li key={k}>{k}</li>) || <div>nodata</div>}
       </div>
     )
   }
@@ -43,7 +36,7 @@ class OriginWithData extends Origin {
 // 自带请求数据的组件
 function WithDataOrigin<T extends { new (...args: any[]): any }>(
   Comp: T,
-  request: (...args: any[]) => Promise<number[]>
+  request: (...args: any[]) => Promise<number[]>,
 ): T {
   class CompWithData extends VueComponent {
     // 处理属性
@@ -64,14 +57,7 @@ function WithDataOrigin<T extends { new (...args: any[]): any }>(
 
     render() {
       if (!this.data) return <div>loading....</div>
-      return (
-        <Comp
-          ref={this.forwardRef}
-          {...this.context.attrs}
-          data={this.data}
-          v-slots={this.context.slots}
-        ></Comp>
-      )
+      return <Comp ref={this.forwardRef} {...this.context.attrs} data={this.data} v-slots={this.context.slots}></Comp>
     }
   }
 
@@ -81,7 +67,7 @@ function WithDataOrigin<T extends { new (...args: any[]): any }>(
 // 自带请求数据的组件
 function WithDataOriginExtends<T extends { new (...args: any[]): any }>(
   Comp: T,
-  request: (...args: any[]) => Promise<number[]>
+  request: (...args: any[]) => Promise<number[]>,
 ): T {
   class CompWithData extends Comp {
     @Mut() data?: number[]
@@ -103,9 +89,9 @@ function WithDataOriginExtends<T extends { new (...args: any[]): any }>(
 const OriginData = WithDataOriginExtends(
   Origin,
   () =>
-    new Promise((resolve) => {
+    new Promise(resolve => {
       setTimeout(() => resolve([1, 2, 3]), 3000)
-    })
+    }),
 )
 
 export default class HocView extends VueComponent {

pnpm-lock.yaml

@@ -16,11 +16,7 @@ export interface ComputedDecorator {
 }
 
 function handler(targetThis: Record<any, any>) {
-  const list = getProtoMetadata<EagerType>(
-    targetThis,
-    Computed.MetadataKey,
-    true,
-  )
+  const list = getProtoMetadata<EagerType>(targetThis, Computed.MetadataKey, true)
   if (!list || !list.length) return
   for (const item of list) {
     const desc = item.desc

src/decorators/computed.ts

@@ -37,10 +37,7 @@ export interface HookDecorator {
 }
 
 function handler(targetThis: any) {
-  const list = getProtoMetadata<(Lifecycle | Lifecycle[])[]>(
-    targetThis,
-    Hook.MetadataKey,
-  )
+  const list = getProtoMetadata<(Lifecycle | Lifecycle[])[]>(targetThis, Hook.MetadataKey)
   if (!list?.length) return
   for (const item of list) {
     let vueFn: any

src/decorators/hook.ts

@@ -9,10 +9,7 @@ export interface LinkDecorator {
 }
 
 function handler(targetThis: Record<any, any>) {
-  const list = getProtoMetadata<string | undefined>(
-    targetThis,
-    Link.MetadataKey,
-  )
+  const list = getProtoMetadata<string | undefined>(targetThis, Link.MetadataKey)
   if (!list || !list.length) return
   for (const item of list) {
     const { key, options } = item

src/decorators/link.ts

@@ -8,16 +8,10 @@ export const Mut: MutDecorator = createDecorator<MutOptions>('Mut')
 type MutOptions = void | true | Parameters<typeof customRef>[0]
 type RefFactory = Parameters<typeof customRef>[0]
 export interface MutDecorator {
-  (): PropertyDecorator
   /**
-   * @param shallow 是否是浅层响应式
+   * @param shallowOrRefFactory
    */
-  (shallow: true): PropertyDecorator
-  /**
-   * 自定义ref 的实现
-   * @param refFactory
-   */
-  (refFactory: RefFactory): PropertyDecorator
+  (shallowOrRefFactory?: true | RefFactory): PropertyDecorator
   MetadataKey: string | symbol
 }
 
@@ -30,11 +24,7 @@ function handler(targetThis: Record<string | symbol, any>) {
   }
 }
 
-export function defMut(
-  targetThis: Record<string | symbol, any>,
-  key: string | symbol,
-  options: any,
-) {
+export function defMut(targetThis: Record<string | symbol, any>, key: string | symbol, options: any) {
   let keyVal: Ref
   if (options === true) {
     keyVal = shallowRef()

src/decorators/mut.ts

@@ -15,11 +15,10 @@ export function createDecorator<T = void>(name: string, allowRepeat = false) {
   const MetadataKey = createSymbol(metaName)
   const decoratorFn: DecoratorFn<T> = function (options: T) {
     return function (target: any, key: string | symbol) {
-      let list: MetadataStore<T | T[]>[] =
-        Reflect.getMetadata(MetadataKey, target) || []
+      let list: MetadataStore<T | T[]>[] = Reflect.getMetadata(MetadataKey, target) || []
       // 处理继承
       list = list.slice()
-      const hasIndex = list.findIndex((k) => k.key === key)
+      const hasIndex = list.findIndex(k => k.key === key)
       if (hasIndex === -1) {
         list.push({ key, options: allowRepeat ? [options] : options })
       } else {
@@ -43,23 +42,16 @@ export function createDecorator<T = void>(name: string, allowRepeat = false) {
   })
   return decoratorFn
 }
-export function getProtoMetadata<T = void>(
-  target: any,
-  key: symbol | string,
-  withDesc = false,
-): MetadataStore<T>[] {
+export function getProtoMetadata<T = void>(target: any, key: symbol | string, withDesc = false): MetadataStore<T>[] {
   const proto = Object.getPrototypeOf(target)
   if (!proto) return []
   const res: MetadataStore<any>[] = Reflect.getMetadata(key, proto) || []
   if (withDesc) {
-    res.forEach((k) => (k.desc = getDeepOwnDescriptor(proto, k.key)))
+    res.forEach(k => (k.desc = getDeepOwnDescriptor(proto, k.key)))
   }
   return res
 }
-export function getDeepOwnDescriptor(
-  proto: any,
-  key: string | symbol,
-): PropertyDescriptor | null {
+export function getDeepOwnDescriptor(proto: any, key: string | symbol): PropertyDescriptor | null {
   if (!proto) return null
   const desc = Object.getOwnPropertyDescriptor(proto, key)
   if (desc) return desc