Skip to content

Commit

Permalink
feat: Ref重命名Track
Browse files Browse the repository at this point in the history
BREAKING CHANGE: Ref因与vue的Ref重名,故改名为Track
  • Loading branch information
agileago committed Dec 19, 2021
1 parent 2593174 commit 455739a
Show file tree
Hide file tree
Showing 18 changed files with 105 additions and 35 deletions.
8 changes: 4 additions & 4 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -36,12 +36,12 @@ pnpm add vue3-oop

### vite配置

因为esbuild不支持装饰器的metadata属性,所以需要安装 [vite-plugin-ts](https://github.com/CarterLi/vite/tree/main/packages/plugin-vue-jsx#readme) 插件使用原始ts编译
因为esbuild不支持装饰器的metadata属性,所以需要安装 [rollup-plugin-typescript2](https://github.com/ezolenko/rollup-plugin-typescript2) 插件使用原始ts编译

### 定义组件

```typescript jsx
import { Autobind, ComponentProps, Computed, Hook, Link, Ref, VueComponent } from 'vue3-oop'
import { Autobind, ComponentProps, Computed, Hook, Link, Track, VueComponent } from 'vue3-oop'
import { Directive, VNodeChild, watch } from 'vue'

const focusDirective: Directive = {
Expand Down Expand Up @@ -78,7 +78,7 @@ class Foo extends VueComponent<Foo_Props> {
}

// 组件自身状态
@Ref() count = 1
@Track() count = 1

// 计算属性
@Computed()
Expand Down Expand Up @@ -127,7 +127,7 @@ class Foo extends VueComponent<Foo_Props> {
```typescript
class CountService extends VueService {
@Ref() count = 1
@Track() count = 1
add() {
this.count++
}
Expand Down
6 changes: 3 additions & 3 deletions docs/guide/api.md
Original file line number Diff line number Diff line change
Expand Up @@ -12,14 +12,14 @@

# 装饰器

## Ref
## Track
- Type: 属性装饰器

声明变量为响应式

```tsx
class Foo extends VueComponent {
@Ref() count = 1
@Track() count = 1
}
```

Expand All @@ -30,7 +30,7 @@ class Foo extends VueComponent {

```tsx
class Foo extends VueComponent {
@Ref() count = 1
@Track() count = 1

@Computed()
get doubleCount() {
Expand Down
6 changes: 3 additions & 3 deletions docs/guide/component.md
Original file line number Diff line number Diff line change
Expand Up @@ -71,12 +71,12 @@ class Foo extends VueComponent {

## 响应式变量

响应式变量使用装饰器注解一下,主要有2个 `Ref``Computed`,此时忘记 `.value` 的事情,
响应式变量使用装饰器注解一下,主要有2个 `Track``Computed`,此时忘记 `.value` 的事情,
就是正常普通的变量定义,加上装饰器就是告诉框架当此变量变化的时候我要刷新视图

```tsx
class Foo extends VueComponent {
@Ref() count = 1
@Track() count = 1

@Computed()
get doubleCount() {
Expand Down Expand Up @@ -123,7 +123,7 @@ class Foo extends VueComponent {
watch(() => this.count, (n, o) => console.log('change', n, o))
}

@Ref() count = 1
@Track() count = 1

render() {
return <span onClick={() => this.count++}>{this.count}</span>
Expand Down
4 changes: 2 additions & 2 deletions docs/guide/di.md
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ import { Injectable } from 'injection-js'
// 定义服务 加上此装饰器表明我有需要其他服务,如果不需要,可以不加
@Injectable()
class CountService extends VueService {
@Ref() count = 1
@Track() count = 1

add() {
this.count++
Expand Down Expand Up @@ -46,7 +46,7 @@ import { VueComponent } from './component'
import { SkipSelf } from 'injection-js'

class CountService extends VueService {
@Ref() count = 1
@Track() count = 1

add() {
this.count++
Expand Down
4 changes: 2 additions & 2 deletions docs/guide/service.md
Original file line number Diff line number Diff line change
Expand Up @@ -38,8 +38,8 @@ class PositionService extends VueService {
onBeforeUnmount(() => window.removeEventListener('mousemove', this.change))
}

@Ref() x = 0
@Ref() y = 0
@Track() x = 0
@Track() y = 0

@Autobind()
private change(e: MouseEvent) {
Expand Down
2 changes: 1 addition & 1 deletion docs/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,7 @@ class Foo extends VueComponent<Foo_Props> {
}

// 组件自身状态
@Ref() count = 1
@Track() count = 1

// 计算属性
@Computed()
Expand Down
4 changes: 2 additions & 2 deletions example/count.service.ts
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import { Autobind, Ref, VueService } from '@/index'
import { Autobind, Track, VueService } from '@/index'

export class CountService extends VueService {
@Ref() count = 0
@Track() count = 1

@Autobind()
add() {
Expand Down
6 changes: 3 additions & 3 deletions example/example.tsx
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { Autobind, Ref, VueComponent, VueService } from 'vue3-oop'
import { Autobind, Track, VueComponent, VueService } from 'vue3-oop'
import { onBeforeUnmount } from 'vue'

class PositionService extends VueService {
Expand All @@ -8,8 +8,8 @@ class PositionService extends VueService {
onBeforeUnmount(() => window.removeEventListener('mousemove', this.change))
}

@Ref() x = 0
@Ref() y = 0
@Track() x = 0
@Track() y = 0

@Autobind()
private change(e: MouseEvent) {
Expand Down
16 changes: 15 additions & 1 deletion example/main.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -3,10 +3,11 @@ import { Component, VueComponent } from 'vue3-oop'
import { createApp } from 'vue'
import './theme/app.css'
import { CountService } from './count.service'
import { SizeService } from './size.service'

@Component()
class Home extends VueComponent {
constructor(private countService: CountService) {
constructor(private countService: CountService, private sizeService: SizeService) {
super()
}

Expand All @@ -16,6 +17,19 @@ class Home extends VueComponent {
<h2>count: {this.countService.count}</h2>
<button onClick={() => this.countService.add()}>+</button>
<button onClick={() => this.countService.remove()}>-</button>
<p>
矩形大小: 宽度: {this.sizeService.x} 长度: {this.sizeService.y}
</p>
<div
ref={this.sizeService.target}
style={{
width: '100px',
height: '100px',
resize: 'both',
border: '1px solid #ccc',
overflow: 'scroll',
}}
></div>
</div>
)
}
Expand Down
6 changes: 3 additions & 3 deletions example/module/auth/login.view.tsx
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import { Component, VueComponent } from '@/index'
import { UserService } from './user.service'
import { Button, Col, Form, Input, Row } from 'ant-design-vue'
import { Ref } from '@/decorators/ref'
import { Track } from '@/decorators/track'
import { CatchLoading } from '../../common/decorators/catch.decorator'
import { Autobind } from '@/helper'
import { CountService } from '../../count.service'
Expand All @@ -19,8 +19,8 @@ export default class LoginView extends VueComponent {
) {
super()
}
@Ref() loading = false
@Ref() model = {
@Track() loading = false
@Track() model = {
name: '',
pwd: '',
}
Expand Down
4 changes: 2 additions & 2 deletions example/module/auth/user.service.ts
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { Hook, Ref, VueService } from '@/index'
import { Hook, Track, VueService } from '@/index'
import { Inject, Injectable } from 'injection-js'
import { RouterService } from '../../router/router.service'
import { AxiosInstance } from 'axios'
Expand All @@ -11,7 +11,7 @@ export class UserService extends VueService {
this.guardHttp()
this.guardRouter()
}
@Ref() token = ''
@Track() token = ''

private _requestGuard: number

Expand Down
36 changes: 36 additions & 0 deletions example/size.service.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,36 @@
import { Hook, Track, VueService } from 'vue3-oop'
import { ref, watchEffect } from 'vue'
import { debounce } from 'lodash-es'

export class SizeService extends VueService {
constructor() {
super()
watchEffect((onInvalidate) => {
const target = this.target.value
target && this.observer.observe(target)
onInvalidate(() => target && this.observer.unobserve(target))
})
}
target = ref<HTMLDivElement>()
private observer = new ResizeObserver((entries) => {
const entry = entries[0]
if (!entry) {
this.x = 0
this.y = 0
} else {
this.debounceSet(entry.target.clientWidth, entry.target.clientHeight)
}
})
@Track() x = 0
@Track() y = 0

debounceSet = debounce((x: number, y: number) => {
this.x = x
this.y = y
})

@Hook('BeforeUnmount')
private unmount() {
this.observer.disconnect()
}
}
2 changes: 2 additions & 0 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -54,6 +54,7 @@
"@abraham/reflection": "^0.8.0",
"@commitlint/cli": "^15.0.0",
"@rollup/plugin-typescript": "^8.3.0",
"@types/lodash-es": "^4.17.5",
"@types/markdown-it": "^12.2.3",
"@types/prettier": "^2.4.2",
"@types/swagger-schema-official": "^2.0.22",
Expand All @@ -73,6 +74,7 @@
"eslint-plugin-prettier": "^4.0.0",
"injection-js": "^2.4.0",
"lint-staged": "^12.1.2",
"lodash-es": "^4.17.21",
"markdown-it-codetabs": "^1.2.0",
"npm-run-all": "^4.1.5",
"prettier": "^2.5.1",
Expand Down
10 changes: 10 additions & 0 deletions pnpm-lock.yaml

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

16 changes: 12 additions & 4 deletions src/decorators/ref.ts → src/decorators/track.ts
Original file line number Diff line number Diff line change
Expand Up @@ -2,8 +2,9 @@ import { ref } from 'vue'
import { Hanlder } from '../type'
import { getProtoMetadata } from '../helper'

const MetadataKey = Symbol('Ref')
export function Ref(): PropertyDecorator {
const MetadataKey = Symbol('Track')

export function Track(): PropertyDecorator {
return function (target: any, key: string | symbol) {
let list: (string | symbol)[] = Reflect.getMetadata(MetadataKey, target) || []
list = list.slice()
Expand Down Expand Up @@ -31,7 +32,14 @@ function handler(targetThis: Record<any, any>) {
}
}

export const RefHandler: Hanlder = {
key: 'Ref',
export const TrackHandler: Hanlder = {
key: 'Track',
handler,
}

/**
* @deprecated 因与vue的ref冲突,故改名为 Track
*/
export function Ref() {
return Track()
}
4 changes: 2 additions & 2 deletions src/extends/component.ts
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import { ComponentPublicInstance, getCurrentInstance, InjectionKey, provide, VNodeChild, VNodeProps } from 'vue'
import { getEmitsFromProps, useCtx, useProps } from '../helper'
import { Hanlder, VueComponentStaticContructor, WithSlotTypes, WithVModel, WithVSlots } from '../type'
import { RefHandler } from '../decorators/ref'
import { TrackHandler } from '../decorators/track'
import { ComputedHandler } from '../decorators/computed'
import { HookHandler } from '../decorators/hook'
import { LinkHandler } from '../decorators/link'
Expand All @@ -19,7 +19,7 @@ export abstract class VueComponent<T extends {} = {}> {
/** 热更新使用 */
static __hmrId?: string
/** 装饰器处理 */
static handler: Hanlder[] = [RefHandler, ComputedHandler, LinkHandler, HookHandler]
static handler: Hanlder[] = [TrackHandler, ComputedHandler, LinkHandler, HookHandler]
/** 是否自定义解析组件 */
static resolveComponent = resolveComponent
static __vccOpts__value?: any
Expand Down
4 changes: 2 additions & 2 deletions src/extends/service.ts
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { RefHandler } from '../decorators/ref'
import { TrackHandler } from '../decorators/track'
import { ComputedHandler } from '../decorators/computed'
import { HookHandler } from '../decorators/hook'
import { provide } from 'vue'
Expand All @@ -8,7 +8,7 @@ import { LinkHandler } from '../decorators/link'
export const ProviderKey = 'ProviderKey' as const

export abstract class VueService {
static handler: Hanlder[] = [RefHandler, ComputedHandler, LinkHandler, HookHandler]
static handler: Hanlder[] = [TrackHandler, ComputedHandler, LinkHandler, HookHandler]
public constructor() {
const ThisConstructor = this.constructor as VueComponentStaticContructor
if (ThisConstructor.ProviderKey) provide(ThisConstructor.ProviderKey, this)
Expand Down
2 changes: 1 addition & 1 deletion src/index.ts
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
export { VueComponent, GlobalStoreKey } from './extends/component'
export { VueService, ProviderKey } from './extends/service'
export { Ref } from './decorators/ref'
export { Ref, Track } from './decorators/track'
export { Computed } from './decorators/computed'
export { Link } from './decorators/link'
export { Hook } from './decorators/hook'
Expand Down

0 comments on commit 455739a

Please sign in to comment.