apiSetup.spec.ts — vue Source File

Architecture documentation for apiSetup.spec.ts, a typescript file in the vue codebase. 4 imports, 0 dependents.

File typescript VueCore Instance 4 imports 1 functions

Entity Profile

VueCore→ Instance→ apiSetup.spec.ts — vue Source File

Dependency Diagram

graph LR
  a25a2d49_318c_622b_ba32_392c579afc02["apiSetup.spec.ts"]
  d970b406_3424_b00e_55dd_82e98ab5aac2["v3"]
  a25a2d49_318c_622b_ba32_392c579afc02 --> d970b406_3424_b00e_55dd_82e98ab5aac2
  6d8f8976_7066_720b_0d45_45fe42921eaf["util"]
  a25a2d49_318c_622b_ba32_392c579afc02 --> 6d8f8976_7066_720b_0d45_45fe42921eaf
  1a5e86bd_1a43_1523_b480_a1b1a98c87ad["effect"]
  a25a2d49_318c_622b_ba32_392c579afc02 --> 1a5e86bd_1a43_1523_b480_a1b1a98c87ad
  db9e7bef_009d_3918_6e7d_543a36a38d75["vue"]
  a25a2d49_318c_622b_ba32_392c579afc02 --> db9e7bef_009d_3918_6e7d_543a36a38d75
  style a25a2d49_318c_622b_ba32_392c579afc02 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

import { h, ref, reactive, isReactive, toRef, isRef } from 'v3'
import { nextTick } from 'core/util'
import { effect } from 'v3/reactivity/effect'
import Vue from 'vue'

function renderToString(comp: any) {
  const vm = new Vue(comp).$mount()
  return vm.$el.outerHTML
}

describe('api: setup context', () => {
  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 h('div', `${this.ref} ${this.object.msg} ${this.value}`)
      }
    }
    expect(renderToString(Comp)).toMatch(`<div>foo bar baz</div>`)
  })

  it('should support returning render function', () => {
    const Comp = {
      setup() {
        return () => {
          return h('div', 'hello')
        }
      }
    }
    expect(renderToString(Comp)).toMatch(`<div>hello</div>`)
  })

  it('props', async () => {
    const count = ref(0)
    let dummy

    const Parent = {
      render: () => h(Child, { props: { count: count.value } })
    }

    const Child = {
      props: { count: Number },
      setup(props) {
        effect(() => {
          dummy = props.count
        })
        return () => h('div', props.count)
      }
    }

    const vm = new Vue(Parent).$mount()
// ... (277 more lines)