test: test for setup()

packages/runtime-core/__tests__/apiSetupContext.spec.ts

@@ -1,5 +1,174 @@
+import { ref, reactive } from '@vue/reactivity'
+import {
+  renderToString,
+  h,
+  nodeOps,
+  render,
+  serializeInner,
+  nextTick,
+  watch,
+  createComponent,
+  triggerEvent,
+  TestElement
+} from '@vue/runtime-test'
+
 // reference: https://vue-composition-api-rfc.netlify.com/api.html#setup
 
 describe('api: setup context', () => {
-  test.todo('should work')
+  it('should expose return values to template render context', () => {
+    const Comp = {
+      setup() {
+        return {
+          // ref should auto-unwrap
+          ref: ref('foo'),
+          // object exposed as-is
+          object: reactive({ msg: 'bar' }),
+          // primitive value exposed as-is
+          value: 'baz'
+        }
+      },
+      render() {
+        return `${this.ref} ${this.object.msg} ${this.value}`
+      }
+    }
+    expect(renderToString(h(Comp))).toMatch(`foo bar baz`)
+  })
+
+  it('should support returning render function', () => {
+    const Comp = {
+      setup() {
+        return () => {
+          return h('div', 'hello')
+        }
+      }
+    }
+    expect(renderToString(h(Comp))).toMatch(`hello`)
+  })
+
+  it('props', async () => {
+    const count = ref(0)
+    let dummy
+
+    const Parent = {
+      render: () => h(Child, { count: count.value })
+    }
+
+    const Child = createComponent({
+      setup(props: { count: number }) {
+        watch(() => {
+          dummy = props.count
+        })
+        return () => h('div', props.count)
+      }
+    })
+
+    const root = nodeOps.createElement('div')
+    render(h(Parent), root)
+    expect(serializeInner(root)).toMatch(`<div>0</div>`)
+    expect(dummy).toBe(0)
+
+    // props should be reactive
+    count.value++
+    await nextTick()
+    expect(serializeInner(root)).toMatch(`<div>1</div>`)
+    expect(dummy).toBe(1)
+  })
+
+  it('context.attrs', async () => {
+    const toggle = ref(true)
+
+    const Parent = {
+      render: () => h(Child, toggle.value ? { id: 'foo' } : { class: 'baz' })
+    }
+
+    const Child = {
+      // explicit empty props declaration
+      // puts everything received in attrs
+      props: {},
+      setup(props: any, { attrs }: any) {
+        return () => h('div', attrs)
+      }
+    }
+
+    const root = nodeOps.createElement('div')
+    render(h(Parent), root)
+    expect(serializeInner(root)).toMatch(`<div id="foo"></div>`)
+
+    // should update even though it's not reactive
+    toggle.value = false
+    await nextTick()
+    expect(serializeInner(root)).toMatch(`<div class="baz"></div>`)
+  })
+
+  it('context.slots', async () => {
+    const id = ref('foo')
+
+    const Parent = {
+      render: () =>
+        h(Child, null, {
+          foo: () => id.value,
+          bar: () => 'bar'
+        })
+    }
+
+    const Child = {
+      setup(props: any, { slots }: any) {
+        return () => h('div', [...slots.foo(), ...slots.bar()])
+      }
+    }
+
+    const root = nodeOps.createElement('div')
+    render(h(Parent), root)
+    expect(serializeInner(root)).toMatch(`<div>foobar</div>`)
+
+    // should update even though it's not reactive
+    id.value = 'baz'
+    await nextTick()
+    expect(serializeInner(root)).toMatch(`<div>bazbar</div>`)
+  })
+
+  it('context.emit', async () => {
+    const count = ref(0)
+    const spy = jest.fn()
+
+    const Parent = {
+      render: () =>
+        h(Child, {
+          count: count.value,
+          onInc: (newVal: number) => {
+            spy()
+            count.value = newVal
+          }
+        })
+    }
+
+    const Child = createComponent({
+      props: {
+        count: {
+          type: Number,
+          default: 1
+        }
+      },
+      setup(props, { emit }) {
+        return () =>
+          h(
+            'div',
+            {
+              onClick: () => emit('inc', props.count + 1)
+            },
+            props.count
+          )
+      }
+    })
+
+    const root = nodeOps.createElement('div')
+    render(h(Parent), root)
+    expect(serializeInner(root)).toMatch(`<div>0</div>`)
+
+    // emit should trigger parent handler
+    triggerEvent(root.children[0] as TestElement, 'click')
+    expect(spy).toHaveBeenCalled()
+    await nextTick()
+    expect(serializeInner(root)).toMatch(`<div>1</div>`)
+  })
 })

packages/runtime-core/src/component.ts

@@ -92,8 +92,6 @@ interface SetupContext {
   attrs: Data
   slots: Slots
   refs: Data
-  parent: ComponentInstance | null
-  root: ComponentInstance
   emit: ((event: string, ...args: unknown[]) => void)
 }
 
@@ -288,9 +286,7 @@ function createSetupContext(instance: ComponentInstance): SetupContext {
     attrs: new Proxy(instance, SetupProxyHandlers.attrs),
     slots: new Proxy(instance, SetupProxyHandlers.slots),
     refs: new Proxy(instance, SetupProxyHandlers.refs),
-    emit: instance.emit,
-    parent: instance.parent,
-    root: instance.root
+    emit: instance.emit
   } as any
   return __DEV__ ? Object.freeze(context) : context
 }
@@ -305,9 +301,7 @@ export function renderComponentRoot(instance: ComponentInstance): VNode {
     slots,
     attrs,
     refs,
-    emit,
-    parent,
-    root
+    emit
   } = instance
   if (vnode.shapeFlag & ShapeFlags.STATEFUL_COMPONENT) {
     return normalizeVNode(
@@ -322,9 +316,7 @@ export function renderComponentRoot(instance: ComponentInstance): VNode {
             attrs,
             slots,
             refs,
-            emit,
-            parent,
-            root
+            emit
           })
         : render(props, null as any)
     )
@@ -387,5 +379,6 @@ function hasPropsChanged(prevProps: Data, nextProps: Data): boolean {
       return true
     }
   }
+  console.log(111)
   return false
 }

packages/runtime-core/src/componentProps.ts

@@ -184,7 +184,7 @@ export function resolveProps(
 
   instance.props = __DEV__ ? readonly(props) : props
   instance.attrs = options
-    ? __DEV__
+    ? __DEV__ && attrs != null
       ? readonly(attrs)
       : attrs
     : instance.props