feat(runtime-core): add 'debug' composition api

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('<div>foo</div>')
+    expect(instance!.setupState).toEqual({
+      name: 'foo',
+    })
+  })
+})

packages/runtime-core/src/debug.ts

@@ -0,0 +1,26 @@
+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)
+ * @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 = __DEV__ ? (states: Record<string, any>) => {
+  const instance = getCurrentInstance()
+  if (instance) {
+    instance.setupState = reactive(Object.assign({}, states, instance.setupState))
+  }
+} : (states: Record<string, any>) => {
+  // empty
+}

packages/runtime-core/src/index.ts

@@ -261,6 +261,7 @@ export {
   AsyncComponentLoader
 } from './apiAsyncComponent'
 export { HMRRuntime } from './hmr'
+export { debug } from './debug'
 
 // Internal API ----------------------------------------------------------------