chore: update tests

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

@@ -10,6 +10,7 @@ import {
   setDynamicProps,
   setText,
   template,
+  withVaporCtx,
 } from '../src'
 import { nextTick, reactive, ref, watchEffect } from '@vue/runtime-dom'
 import { makeRender } from './_utils'
@@ -113,11 +114,11 @@ describe('api: setup context', () => {
       inheritAttrs: false,
       setup(_: any, { attrs }: any) {
         const n0 = createComponent(Wrapper, null, {
-          default: () => {
+          default: withVaporCtx(() => {
             const n0 = template('<div>')() as HTMLDivElement
             renderEffect(() => setDynamicProps(n0, [attrs]))
             return n0
-          },
+          }),
         })
         return n0
       },

packages/runtime-vapor/__tests__/componentAttrs.spec.ts

@@ -10,6 +10,7 @@ import {
   setProp,
   setStyle,
   template,
+  withVaporCtx,
 } from '../src'
 import { makeRender } from './_utils'
 import { stringifyStyle } from '@vue/shared'
@@ -286,10 +287,10 @@ describe('attribute fallthrough', () => {
           () => 'button',
           null,
           {
-            default: () => {
+            default: withVaporCtx(() => {
               const n0 = createSlot('default', null)
               return n0
-            },
+            }),
           },
           true,
         )

packages/runtime-vapor/__tests__/componentSlots.spec.ts

@@ -177,7 +177,7 @@ describe('component: slots', () => {
 
       const { host } = define(() => {
         return createComponent(Comp, null, {
-          header: () => template('header')(),
+          header: withVaporCtx(() => template('header')()),
         })
       }).render()
 
@@ -224,7 +224,7 @@ describe('component: slots', () => {
       )
       define(() =>
         createComponent(Comp, null, {
-          default: _props => ((props = _props), []),
+          default: withVaporCtx((_props: any) => ((props = _props), [])),
         }),
       ).render()
 
@@ -252,7 +252,7 @@ describe('component: slots', () => {
       )
       define(() =>
         createComponent(Comp, null, {
-          default: _props => ((props = _props), []),
+          default: withVaporCtx((_props: any) => ((props = _props), [])),
         }),
       ).render()
 
@@ -285,13 +285,13 @@ describe('component: slots', () => {
           $: [
             () => ({
               name: 'header',
-              fn: (props: any) => {
+              fn: withVaporCtx((props: any) => {
                 const el = template('<h1></h1>')()
                 renderEffect(() => {
                   setElementText(el, props.title)
                 })
                 return el
-              },
+              }),
             }),
           ],
         })
@@ -320,8 +320,8 @@ describe('component: slots', () => {
 
       const { host } = define(() => {
         return createComponent(Comp, null, {
-          header: () => template('header')(),
-          footer: () => template('footer')(),
+          header: withVaporCtx(() => template('header')()),
+          footer: withVaporCtx(() => template('footer')()),
         })
       }).render()
 
@@ -368,8 +368,14 @@ describe('component: slots', () => {
           $: [
             () =>
               flag1.value
-                ? { name: 'one', fn: () => template('one content')() }
-                : { name: 'two', fn: () => template('two content')() },
+                ? {
+                    name: 'one',
+                    fn: withVaporCtx(() => template('one content')()),
+                  }
+                : {
+                    name: 'two',
+                    fn: withVaporCtx(() => template('two content')()),
+                  },
           ],
         })
       }).render()
@@ -413,8 +419,8 @@ describe('component: slots', () => {
           Child,
           {},
           {
-            one: () => template('one content')(),
-            two: () => template('two content')(),
+            one: withVaporCtx(() => template('one content')()),
+            two: withVaporCtx(() => template('two content')()),
           },
         )
       }).render()
@@ -461,14 +467,14 @@ describe('component: slots', () => {
       const { html } = define({
         setup() {
           return createComponent(Child, null, {
-            default: () => {
+            default: withVaporCtx(() => {
               return createIf(
                 () => toggle.value,
                 () => {
                   return document.createTextNode('content')
                 },
               )
-            },
+            }),
           })
         },
       }).render()
@@ -498,14 +504,14 @@ describe('component: slots', () => {
       const { html } = define({
         setup() {
           return createComponent(Child, null, {
-            default: () => {
+            default: withVaporCtx(() => {
               return createIf(
                 () => toggle.value,
                 () => {
                   return document.createTextNode('content')
                 },
               )
-            },
+            }),
           })
         },
       }).render()
@@ -539,9 +545,9 @@ describe('component: slots', () => {
               (toggle.value
                 ? {
                     name: val.value,
-                    fn: () => {
+                    fn: withVaporCtx(() => {
                       return template('<h1></h1>')()
-                    },
+                    }),
                   }
                 : void 0) as DynamicSlot,
           ],
@@ -567,9 +573,9 @@ describe('component: slots', () => {
       const { html } = define({
         setup() {
           return createComponent(Child, null, {
-            default: () => {
+            default: withVaporCtx(() => {
               return template('<!--comment-->')()
-            },
+            }),
           })
         },
       }).render()
@@ -591,14 +597,14 @@ describe('component: slots', () => {
       const { html } = define({
         setup() {
           return createComponent(Child, null, {
-            default: () => {
+            default: withVaporCtx(() => {
               return createIf(
                 () => toggle.value,
                 () => {
                   return document.createTextNode('content')
                 },
               )
-            },
+            }),
           })
         },
       }).render()
@@ -629,7 +635,7 @@ describe('component: slots', () => {
       const { html } = define({
         setup() {
           return createComponent(Child, null, {
-            default: () => {
+            default: withVaporCtx(() => {
               return createIf(
                 () => outerShow.value,
                 () => {
@@ -641,7 +647,7 @@ describe('component: slots', () => {
                   )
                 },
               )
-            },
+            }),
           })
         },
       }).render()
@@ -686,7 +692,7 @@ describe('component: slots', () => {
       const { html } = define({
         setup() {
           return createComponent(Child, null, {
-            default: () => {
+            default: withVaporCtx(() => {
               const n2 = createFor(
                 () => items.value,
                 for_item0 => {
@@ -699,7 +705,7 @@ describe('component: slots', () => {
                 },
               )
               return n2
-            },
+            }),
           })
         },
       }).render()
@@ -732,7 +738,7 @@ describe('component: slots', () => {
       const { html } = define({
         setup() {
           return createComponent(Child, null, {
-            default: () => {
+            default: withVaporCtx(() => {
               const n2 = createFor(
                 () => items.value,
                 for_item0 => {
@@ -745,7 +751,7 @@ describe('component: slots', () => {
                 },
               )
               return n2
-            },
+            }),
           })
         },
       }).render()
@@ -800,11 +806,11 @@ describe('component: slots', () => {
             Parent,
             null,
             {
-              foo: () => {
+              foo: withVaporCtx(() => {
                 const n0 = template(' ')() as any
                 renderEffect(() => setText(n0, foo.value))
                 return n0
-              },
+              }),
             },
             true,
           )
@@ -845,16 +851,16 @@ describe('component: slots', () => {
             Parent,
             null,
             {
-              foo: () => {
+              foo: withVaporCtx(() => {
                 const n0 = template(' ')() as any
                 renderEffect(() => setText(n0, foo.value))
                 return n0
-              },
-              default: () => {
+              }),
+              default: withVaporCtx(() => {
                 const n3 = template(' ')() as any
                 renderEffect(() => setText(n3, foo.value))
                 return n3
-              },
+              }),
             },
             true,
           )
@@ -893,7 +899,7 @@ describe('component: slots', () => {
       const { html } = define({
         setup() {
           return createComponent(Parent, null, {
-            default: () => template('<!-- <div>App</div> -->')(),
+            default: withVaporCtx(() => template('<!-- <div>App</div> -->')()),
           })
         },
       }).render()
@@ -933,7 +939,7 @@ describe('component: slots', () => {
       const { html } = define({
         setup() {
           return createComponent(Parent, null, {
-            default: () => template('<!-- <div>App</div> -->')(),
+            default: withVaporCtx(() => template('<!-- <div>App</div> -->')()),
           })
         },
       }).render()
@@ -999,6 +1005,36 @@ describe('component: slots', () => {
       expect(html()).toBe('child fallback<!--for--><!--slot--><!--slot-->')
     })
 
+    test('consecutive slots with insertion state', async () => {
+      const { component: Child } = define({
+        setup() {
+          const n2 = template('<div><div>baz</div></div>', true)() as any
+          setInsertionState(n2, 0)
+          createSlot('default', null)
+          setInsertionState(n2, 0)
+          createSlot('foo', null)
+          return n2
+        },
+      })
+
+      const { html } = define({
+        setup() {
+          return createComponent(Child, null, {
+            default: withVaporCtx(() => template('default')()),
+            foo: withVaporCtx(() => template('foo')()),
+          })
+        },
+      }).render()
+
+      expect(html()).toBe(
+        `<div>` +
+          `default<!--slot-->` +
+          `foo<!--slot-->` +
+          `<div>baz</div>` +
+          `</div>`,
+      )
+    })
+
     describe('vdom interop', () => {
       const createVaporSlot = (fallbackText = 'fallback') => {
         return defineVaporComponent({
@@ -1862,35 +1898,5 @@ describe('component: slots', () => {
         expect(root.innerHTML).toBe('<span>bar</span>')
       })
     })
-
-    test('consecutive slots with insertion state', async () => {
-      const { component: Child } = define({
-        setup() {
-          const n2 = template('<div><div>baz</div></div>', true)() as any
-          setInsertionState(n2, 0)
-          createSlot('default', null)
-          setInsertionState(n2, 0)
-          createSlot('foo', null)
-          return n2
-        },
-      })
-
-      const { html } = define({
-        setup() {
-          return createComponent(Child, null, {
-            default: () => template('default')(),
-            foo: () => template('foo')(),
-          })
-        },
-      }).render()
-
-      expect(html()).toBe(
-        `<div>` +
-          `default<!--slot-->` +
-          `foo<!--slot-->` +
-          `<div>baz</div>` +
-          `</div>`,
-      )
-    })
   })
 })

packages/runtime-vapor/__tests__/customElement.spec.ts

@@ -32,6 +32,7 @@ import {
   setValue,
   template,
   txt,
+  withVaporCtx,
 } from '../src'
 
 declare var __VUE_HMR_RUNTIME__: HMRRuntime
@@ -1404,10 +1405,11 @@ describe('defineVaporCustomElement', () => {
       const App = {
         setup() {
           return createPlainElement('my-parent', null, {
-            default: () =>
+            default: withVaporCtx(() =>
               createPlainElement('my-child', null, {
-                default: () => template('<span>default</span>')(),
+                default: withVaporCtx(() => template('<span>default</span>')()),
               }),
+            ),
           })
         },
       }
@@ -1436,7 +1438,7 @@ describe('defineVaporCustomElement', () => {
               VaporTeleport,
               { to: () => target },
               {
-                default: () => createSlot('default'),
+                default: withVaporCtx(() => createSlot('default')),
               },
             )
           },
@@ -1457,10 +1459,11 @@ describe('defineVaporCustomElement', () => {
       const App = {
         setup() {
           return createPlainElement('my-el-teleport-parent', null, {
-            default: () =>
+            default: withVaporCtx(() =>
               createPlainElement('my-el-teleport-child', null, {
-                default: () => template('<span>default</span>')(),
+                default: withVaporCtx(() => template('<span>default</span>')()),
               }),
+            ),
           })
         },
       }
@@ -1482,14 +1485,14 @@ describe('defineVaporCustomElement', () => {
                 VaporTeleport,
                 { to: () => target1 },
                 {
-                  default: () => createSlot('header'),
+                  default: withVaporCtx(() => createSlot('header')),
                 },
               ),
               createComponent(
                 VaporTeleport,
                 { to: () => target2 },
                 {
-                  default: () => createSlot('body'),
+                  default: withVaporCtx(() => createSlot('body')),
                 },
               ),
             ]
@@ -1502,10 +1505,10 @@ describe('defineVaporCustomElement', () => {
       const App = {
         setup() {
           return createPlainElement('my-el-two-teleport-child', null, {
-            default: () => [
+            default: withVaporCtx(() => [
               template('<div slot="header">header</div>')(),
               template('<span slot="body">body</span>')(),
-            ],
+            ]),
           })
         },
       }
@@ -1533,14 +1536,14 @@ describe('defineVaporCustomElement', () => {
                 // with disabled: true
                 { to: () => target1, disabled: () => true },
                 {
-                  default: () => createSlot('header'),
+                  default: withVaporCtx(() => createSlot('header')),
                 },
               ),
               createComponent(
                 VaporTeleport,
                 { to: () => target2 },
                 {
-                  default: () => createSlot('body'),
+                  default: withVaporCtx(() => createSlot('body')),
                 },
               ),
             ]
@@ -1553,10 +1556,10 @@ describe('defineVaporCustomElement', () => {
       const App = {
         setup() {
           return createPlainElement('my-el-two-teleport-child-0', null, {
-            default: () => [
+            default: withVaporCtx(() => [
               template('<div slot="header">header</div>')(),
               template('<span slot="body">body</span>')(),
-            ],
+            ]),
           })
         },
       }
@@ -1588,7 +1591,7 @@ describe('defineVaporCustomElement', () => {
       const ChildWrapper = {
         setup() {
           return createPlainElement('my-el-child-shadow-false', null, {
-            default: () => template('child')(),
+            default: withVaporCtx(() => template('child')()),
           })
         },
       }
@@ -1624,7 +1627,7 @@ describe('defineVaporCustomElement', () => {
             'my-el-parent-shadow-false',
             { isShown: () => props.isShown },
             {
-              default: () => createSlot('default'),
+              default: withVaporCtx(() => createSlot('default')),
             },
           )
         },
@@ -1637,7 +1640,7 @@ describe('defineVaporCustomElement', () => {
             ParentWrapper,
             { isShown: () => isShown.value },
             {
-              default: () => createComponent(ChildWrapper),
+              default: withVaporCtx(() => createComponent(ChildWrapper)),
             },
           )
         },

packages/runtime-vapor/__tests__/dom/templateRef.spec.ts

@@ -12,6 +12,7 @@ import {
   insert,
   renderEffect,
   template,
+  withVaporCtx,
 } from '../../src'
 import { compile, makeRender, runtimeDom, runtimeVapor } from '../_utils'
 import {
@@ -612,11 +613,11 @@ describe('api: template ref', () => {
       render() {
         const setRef = createTemplateRefSetter()
         const n0 = createComponent(Child, null, {
-          default: () => {
+          default: withVaporCtx(() => {
             n = document.createElement('div')
             setRef(n, 'foo')
             return n
-          },
+          }),
         })
         return n0
       },
@@ -640,11 +641,11 @@ describe('api: template ref', () => {
       setup() {
         const setRef = createTemplateRefSetter()
         const n0 = createComponent(Child, null, {
-          default: () => {
+          default: withVaporCtx(() => {
             n = document.createElement('div')
             setRef(n, r)
             return n
-          },
+          }),
         })
         return n0
       },
@@ -669,11 +670,11 @@ describe('api: template ref', () => {
         r = useTemplateRef('foo')
         const setRef = createTemplateRefSetter()
         const n0 = createComponent(Child, null, {
-          default: () => {
+          default: withVaporCtx(() => {
             n = document.createElement('div')
             setRef(n, 'foo')
             return n
-          },
+          }),
         })
         return n0
       },