createComponent,
createSlot,
createTextNode,
- defineComponent,
+ defineVaporComponent,
delegate,
delegateEvents,
insert,
- nextTick,
- reactive,
- ref,
renderEffect,
setDynamicProps,
- setInheritAttrs,
template,
- watchEffect,
} from '../src'
+import { nextTick, reactive, ref, watchEffect } from '@vue/runtime-dom'
import { makeRender } from './_utils'
const define = makeRender()
-describe.todo('api: setup context', () => {
+describe('api: setup context', () => {
it('should expose return values to template render context', () => {
const { html } = define({
setup() {
const count = ref(0)
let dummy
- const Child = defineComponent({
+ const Child = defineVaporComponent({
props: { count: Number },
setup(props) {
watchEffect(() => {
it('context.attrs', async () => {
const toggle = ref(true)
- const Child = defineComponent({
+ const Child = defineVaporComponent({
inheritAttrs: false,
setup(props, { attrs }) {
const el = document.createElement('div')
const { html } = define({
render: () =>
- createComponent(Child, () =>
- toggle.value ? { id: 'foo' } : { class: 'baz' },
- ),
+ createComponent(Child, {
+ $: [() => (toggle.value ? { id: 'foo' } : { class: 'baz' })],
+ }),
}).render()
expect(html()).toMatch(`<div id="foo"></div>`)
it('context.attrs in child component slots', async () => {
const toggle = ref(true)
- const Wrapper = defineComponent({
+ const Wrapper = defineVaporComponent({
setup(_) {
const n0 = createSlot('default')
- setInheritAttrs(true)
return n0
},
})
- const Child = defineComponent({
+ const Child = defineVaporComponent({
inheritAttrs: false,
setup(_: any, { attrs }: any) {
const n0 = createComponent(Wrapper, null, {
const { html } = define({
render: () =>
- createComponent(Child, () =>
- toggle.value ? { id: 'foo' } : { class: 'baz' },
- ),
+ createComponent(Child, {
+ $: [() => (toggle.value ? { id: 'foo' } : { class: 'baz' })],
+ }),
}).render()
expect(html()).toMatch(`<div id="foo"></div>`)
it('context.slots', async () => {
const id = ref('foo')
- const Child = defineComponent({
+ const Child = defineVaporComponent({
render() {
return [createSlot('foo'), createSlot('bar')]
},
const { html } = define({
render() {
- return createComponent(Child, null, [
- () => ({
- name: 'foo',
- fn: () => createTextNode(() => [id.value]),
- }),
- () => ({
- name: 'bar',
- fn: () => createTextNode(['bar']),
- }),
- ])
+ return createComponent(Child, null, {
+ $: [
+ () => ({
+ name: 'foo',
+ fn: () => createTextNode(() => [id.value]),
+ }),
+ () => ({
+ name: 'bar',
+ fn: () => createTextNode(['bar']),
+ }),
+ ],
+ })
},
}).render()
delegateEvents('click')
- const Child = defineComponent({
+ const Child = defineVaporComponent({
props: {
count: { type: Number, default: 1 },
},