From d9ba1a960ddf5a58ccf865fcefb5642172a94c0d Mon Sep 17 00:00:00 2001 From: Bichi Kim Date: Wed, 9 Feb 2022 14:11:20 +0900 Subject: [PATCH 1/7] feat(runtime-core): add 'debug' composition api --- packages/runtime-core/src/debug.ts | 27 +++++++++++++++++++++++++++ 1 file changed, 27 insertions(+) create mode 100644 packages/runtime-core/src/debug.ts diff --git a/packages/runtime-core/src/debug.ts b/packages/runtime-core/src/debug.ts new file mode 100644 index 000000000..6480dc333 --- /dev/null +++ b/packages/runtime-core/src/debug.ts @@ -0,0 +1,27 @@ +import {reactive} from '@vue/reactivity' +import {getCurrentInstance} from './component' + +/** + * this debug function is helper for watching states in the vue devtool (it runs only in dev mode) + * @example + * const Component = defineComponent({ + * setup() { + * const name = ref('foo') + * debug({ + * // watch states in the vue devtool + * name, + * }) + * return h('div', name.value) + * }, + * }) + * @param states any states you want to see in the vue devtool + */ +export const debug = (states: Record) => { + if (!__DEV__) { + return + } + const instance = getCurrentInstance() + if (instance) { + instance.setupState = reactive(Object.assign({}, states, instance.setupState)) + } +} From e82c76dc2aa0704ef6b46aece646602721241d71 Mon Sep 17 00:00:00 2001 From: Bichi Kim Date: Wed, 9 Feb 2022 14:19:59 +0900 Subject: [PATCH 2/7] fix: add the debug in index.ts file --- packages/runtime-core/src/index.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/runtime-core/src/index.ts b/packages/runtime-core/src/index.ts index ad4817d91..d8cec66dc 100644 --- a/packages/runtime-core/src/index.ts +++ b/packages/runtime-core/src/index.ts @@ -261,6 +261,7 @@ export { AsyncComponentLoader } from './apiAsyncComponent' export { HMRRuntime } from './hmr' +export { debug } from './debug' // Internal API ---------------------------------------------------------------- From 848b9d9e763c9078ebf8aa3c0a49befa69b0819f Mon Sep 17 00:00:00 2001 From: Bichi Kim Date: Wed, 9 Feb 2022 14:26:06 +0900 Subject: [PATCH 3/7] fix: debug comment --- packages/runtime-core/src/debug.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/runtime-core/src/debug.ts b/packages/runtime-core/src/debug.ts index 6480dc333..4d30c6f0d 100644 --- a/packages/runtime-core/src/debug.ts +++ b/packages/runtime-core/src/debug.ts @@ -2,7 +2,7 @@ import {reactive} from '@vue/reactivity' import {getCurrentInstance} from './component' /** - * this debug function is helper for watching states in the vue devtool (it runs only in dev mode) + * this debug function is a helper for watching states in the vue devtool (it runs only in dev mode) * @example * const Component = defineComponent({ * setup() { From c7b600a3f892d11eb58d6ae865eb63738032b635 Mon Sep 17 00:00:00 2001 From: Bichi Kim Date: Wed, 9 Feb 2022 14:30:45 +0900 Subject: [PATCH 4/7] fix: for function size --- packages/runtime-core/src/debug.ts | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) diff --git a/packages/runtime-core/src/debug.ts b/packages/runtime-core/src/debug.ts index 4d30c6f0d..781d0f186 100644 --- a/packages/runtime-core/src/debug.ts +++ b/packages/runtime-core/src/debug.ts @@ -16,12 +16,11 @@ import {getCurrentInstance} from './component' * }) * @param states any states you want to see in the vue devtool */ -export const debug = (states: Record) => { - if (!__DEV__) { - return - } +export const debug = __DEV__ ? (states: Record) => { const instance = getCurrentInstance() if (instance) { instance.setupState = reactive(Object.assign({}, states, instance.setupState)) } +} : (states: Record) => { + // empty } From dac1767278975398dc00cd272d93a1d613700197 Mon Sep 17 00:00:00 2001 From: Bichi Kim Date: Sun, 20 Feb 2022 01:02:27 +0900 Subject: [PATCH 5/7] add debug testing --- packages/runtime-core/__tests__/debug.spec.ts | 34 +++++++++++++++++++ 1 file changed, 34 insertions(+) create mode 100644 packages/runtime-core/__tests__/debug.spec.ts diff --git a/packages/runtime-core/__tests__/debug.spec.ts b/packages/runtime-core/__tests__/debug.spec.ts new file mode 100644 index 000000000..f378b70c3 --- /dev/null +++ b/packages/runtime-core/__tests__/debug.spec.ts @@ -0,0 +1,34 @@ +import {debug} from '../src/debug' +import { + h, + render, + defineComponent, + ref, getCurrentInstance, ComponentInternalInstance, nodeOps, + serializeInner as inner +} from '@vue/runtime-test' + +describe('debug', () => { + test('watching states', () => { + const root = nodeOps.createElement('div') + let instance: ComponentInternalInstance + const Comp = defineComponent({ + setup() { + const name = ref('foo') + debug({ + name, + }) + return () => ( + h('div', name.value) + ) + }, + mounted() { + instance = getCurrentInstance()! + }, + }) + render(h(Comp), root) + expect(inner(root)).toBe('
foo
') + expect(instance!.setupState).toEqual({ + name: 'foo', + }) + }) +}) From 190e76c3e65bcd016b121f3a11d877ba83e29d49 Mon Sep 17 00:00:00 2001 From: bichikim Date: Thu, 10 Mar 2022 23:10:33 +0900 Subject: [PATCH 6/7] add a test case for calling the debug function multiple times --- packages/runtime-core/__tests__/debug.spec.ts | 32 +++++++++++++++++++ packages/runtime-core/src/debug.ts | 2 +- 2 files changed, 33 insertions(+), 1 deletion(-) diff --git a/packages/runtime-core/__tests__/debug.spec.ts b/packages/runtime-core/__tests__/debug.spec.ts index f378b70c3..bb98d0cc1 100644 --- a/packages/runtime-core/__tests__/debug.spec.ts +++ b/packages/runtime-core/__tests__/debug.spec.ts @@ -31,4 +31,36 @@ describe('debug', () => { name: 'foo', }) }) + test('watching states with calling the debug function multiple times', () => { + const root = nodeOps.createElement('div') + let instance: ComponentInternalInstance + const Comp = defineComponent({ + setup() { + const name = ref('foo') + const age = ref(100) + debug({ + name, + }) + debug({ + age, + name, + }) + debug({ + name, + }) + return () => ( + h('div', name.value) + ) + }, + mounted() { + instance = getCurrentInstance()! + }, + }) + render(h(Comp), root) + expect(inner(root)).toBe('
foo
') + expect(instance!.setupState).toEqual({ + name: 'foo', + age: 100, + }) + }) }) diff --git a/packages/runtime-core/src/debug.ts b/packages/runtime-core/src/debug.ts index 781d0f186..7e476ed51 100644 --- a/packages/runtime-core/src/debug.ts +++ b/packages/runtime-core/src/debug.ts @@ -6,7 +6,7 @@ import {getCurrentInstance} from './component' * @example * const Component = defineComponent({ * setup() { - * const name = ref('foo') + * const name = ref('foo') * debug({ * // watch states in the vue devtool * name, From a57715890965e3c563a99c4c01df8c3376566b3d Mon Sep 17 00:00:00 2001 From: "autofix-ci[bot]" <114827586+autofix-ci[bot]@users.noreply.github.com> Date: Thu, 24 Oct 2024 06:24:09 +0000 Subject: [PATCH 7/7] [autofix.ci] apply automated fixes --- packages/runtime-core/__tests__/debug.spec.ts | 21 ++++++++-------- packages/runtime-core/src/debug.ts | 24 +++++++++++-------- 2 files changed, 24 insertions(+), 21 deletions(-) diff --git a/packages/runtime-core/__tests__/debug.spec.ts b/packages/runtime-core/__tests__/debug.spec.ts index bb98d0cc1..3a4c4b56d 100644 --- a/packages/runtime-core/__tests__/debug.spec.ts +++ b/packages/runtime-core/__tests__/debug.spec.ts @@ -1,10 +1,13 @@ -import {debug} from '../src/debug' +import { debug } from '../src/debug' import { - h, - render, + type ComponentInternalInstance, defineComponent, - ref, getCurrentInstance, ComponentInternalInstance, nodeOps, - serializeInner as inner + getCurrentInstance, + h, + serializeInner as inner, + nodeOps, + ref, + render, } from '@vue/runtime-test' describe('debug', () => { @@ -17,9 +20,7 @@ describe('debug', () => { debug({ name, }) - return () => ( - h('div', name.value) - ) + return () => h('div', name.value) }, mounted() { instance = getCurrentInstance()! @@ -48,9 +49,7 @@ describe('debug', () => { debug({ name, }) - return () => ( - h('div', name.value) - ) + return () => h('div', name.value) }, mounted() { instance = getCurrentInstance()! diff --git a/packages/runtime-core/src/debug.ts b/packages/runtime-core/src/debug.ts index 7e476ed51..8ce522694 100644 --- a/packages/runtime-core/src/debug.ts +++ b/packages/runtime-core/src/debug.ts @@ -1,5 +1,5 @@ -import {reactive} from '@vue/reactivity' -import {getCurrentInstance} from './component' +import { reactive } from '@vue/reactivity' +import { getCurrentInstance } from './component' /** * this debug function is a helper for watching states in the vue devtool (it runs only in dev mode) @@ -16,11 +16,15 @@ import {getCurrentInstance} from './component' * }) * @param states any states you want to see in the vue devtool */ -export const debug = __DEV__ ? (states: Record) => { - const instance = getCurrentInstance() - if (instance) { - instance.setupState = reactive(Object.assign({}, states, instance.setupState)) - } -} : (states: Record) => { - // empty -} +export const debug = __DEV__ + ? (states: Record) => { + const instance = getCurrentInstance() + if (instance) { + instance.setupState = reactive( + Object.assign({}, states, instance.setupState), + ) + } + } + : (states: Record) => { + // empty + }