Skip to content
This repository was archived by the owner on Jul 19, 2025. It is now read-only.

feat(runtime-core): implement debug hook #183

Merged
merged 3 commits into from
Apr 21, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
45 changes: 45 additions & 0 deletions packages/runtime-vapor/__tests__/apiLifecycle.spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,8 @@ import {
getCurrentInstance,
inject,
nextTick,
onRenderTracked,
onRenderTriggered,
onUpdated,
provide,
ref,
Expand Down Expand Up @@ -112,4 +114,47 @@ describe('apiLifecycle', () => {
expect(handleUpdated).toHaveBeenCalledTimes(1)
expect(handleUpdatedChild).toHaveBeenCalledTimes(1)
})

test('onRenderTracked', async () => {
const onTrackedFn = vi.fn()
const count = ref(0)
const { host, render } = define({
setup() {
onRenderTracked(onTrackedFn)
return (() => {
const n0 = createTextNode()
renderEffect(() => {
setText(n0, count.value)
})
return n0
})()
},
})
render()
await nextTick()
expect(onTrackedFn).toBeCalled()
expect(host.innerHTML).toBe('0')
})
test('onRenderTrigger', async () => {
const onRenderTriggerFn = vi.fn()
const count = ref(0)
const { host, render } = define({
setup() {
onRenderTriggered(onRenderTriggerFn)
return (() => {
const n0 = createTextNode()
renderEffect(() => {
setText(n0, count.value)
})
return n0
})()
},
})
render()
count.value++
await nextTick()
expect(onRenderTriggerFn).toBeCalled()
expect(onRenderTriggerFn).toHaveBeenCalledOnce()
expect(host.innerHTML).toBe('1')
})
})
14 changes: 13 additions & 1 deletion packages/runtime-vapor/src/apiLifecycle.ts
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,11 @@ import {
setCurrentInstance,
} from './component'
import { warn } from './warning'
import { pauseTracking, resetTracking } from '@vue/reactivity'
import {
type DebuggerEvent,
pauseTracking,
resetTracking,
} from '@vue/reactivity'
import { ErrorTypeStrings, callWithAsyncErrorHandling } from './errorHandling'
import { toHandlerKey } from '@vue/shared'

Expand Down Expand Up @@ -77,6 +81,14 @@ export const onUpdated = createHook(VaporLifecycleHooks.UPDATED)
export const onBeforeUnmount = createHook(VaporLifecycleHooks.BEFORE_UNMOUNT)
export const onUnmounted = createHook(VaporLifecycleHooks.UNMOUNTED)

export type DebuggerHook = (e: DebuggerEvent) => void
export const onRenderTriggered = createHook<DebuggerHook>(
VaporLifecycleHooks.RENDER_TRIGGERED,
)
export const onRenderTracked = createHook<DebuggerHook>(
VaporLifecycleHooks.RENDER_TRACKED,
)

export type ErrorCapturedHook<TError = unknown> = (
err: TError,
instance: ComponentInternalInstance | null,
Expand Down
4 changes: 2 additions & 2 deletions packages/runtime-vapor/src/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -106,8 +106,8 @@ export {
onUnmounted,
// onActivated,
// onDeactivated,
// onRenderTracked,
// onRenderTriggered,
onRenderTracked,
onRenderTriggered,
onErrorCaptured,
// onServerPrefetch,
} from './apiLifecycle'
Expand Down
10 changes: 8 additions & 2 deletions packages/runtime-vapor/src/renderEffect.ts
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,6 @@ import { invokeDirectiveHook } from './directives'
export function renderEffect(cb: () => void) {
const instance = getCurrentInstance()
const scope = getCurrentScope()

let effect: ReactiveEffect

const job: SchedulerJob = () => {
Expand Down Expand Up @@ -77,7 +76,14 @@ export function renderEffect(cb: () => void) {
if (instance) job.id = instance.uid
queueJob(job)
}

if (__DEV__) {
effect.onTrack = instance?.rtc
? e => invokeArrayFns(instance.rtc!, e)
: void 0
effect.onTrigger = instance?.rtg
? e => invokeArrayFns(instance.rtg!, e)
: void 0
}
effect.run()
}

Expand Down
9 changes: 9 additions & 0 deletions playground/src/App.vue
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,8 @@ import {
getCurrentInstance,
onBeforeUpdate,
onUpdated,
onRenderTracked,
onRenderTriggered,
} from 'vue/vapor'

const instance = getCurrentInstance()!
Expand Down Expand Up @@ -36,6 +38,13 @@ onUpdated(() => {
console.log('updated')
})

onRenderTracked(e => {
console.log(`Render Tracked:`, e.target)
})
onRenderTriggered(e => {
console.log(`Render trigger:`, e.target)
})

const log = (arg: any) => {
console.log('callback in render effect')
return arg
Expand Down