fix: handle slot in v-clicks (#1191)

Author: twitwi

cypress/e2e/examples/basic.spec.ts

@@ -220,4 +220,37 @@ context('Basic', () => {
     cy.get('.cy-depth > ul > .slidev-vclick-target:not(.slidev-vclick-hidden)')
       .should('have.text', 'A B CDEF GHIJKL')
   })
+
+  it('slot in v-clicks', () => {
+    goPage(12)
+
+    cy
+      .url()
+      .should('eq', 'http://localhost:3030/12')
+
+    cy.get('body')
+      .type('{RightArrow}{RightArrow}{RightArrow}{RightArrow}{RightArrow}{RightArrow}')
+      .url()
+      .should('eq', 'http://localhost:3030/12?clicks=6') // we should still be on page 12
+
+    cy.get('body')
+      .type('{RightArrow}')
+      .url()
+      .should('eq', 'http://localhost:3030/13')
+
+    cy.get('.cy-wrapdecorate > ul > .slidev-vclick-target.slidev-vclick-hidden')
+      .should('have.text', 'AEFZ')
+
+    cy.get('body')
+      .type('{RightArrow}{RightArrow}{RightArrow}')
+
+    cy.get('.cy-wrapdecorate > ul > .slidev-vclick-target:not(.slidev-vclick-hidden)')
+      .should('have.text', 'AEF')
+
+    cy.get('body')
+      .type('{RightArrow}')
+
+    cy.get('.cy-wrapdecorate > ul > .slidev-vclick-target:not(.slidev-vclick-hidden)')
+      .should('have.text', 'AEFZ')
+  })
 })

cypress/fixtures/basic/components/DecorateWithLi.vue

@@ -0,0 +1,5 @@
+<template>
+  <li>Step b</li>
+  <slot />
+  <li>Step y</li>
+</template>

cypress/fixtures/basic/components/WrapInClicks.vue

@@ -0,0 +1,7 @@
+<template>
+  <div style="border: 1px solid blue">
+    <v-clicks>
+      <slot />
+    </v-clicks>
+  </div>
+</template>

cypress/fixtures/basic/components/WrapInClicksDecorate.vue

@@ -0,0 +1,9 @@
+<template>
+  <v-clicks>
+    <ul style="border: 1px solid red">
+      <li>A</li>
+      <slot />
+      <li>Z</li>
+    </ul>
+  </v-clicks>
+</template>

cypress/fixtures/basic/components/WrapInComponentInClicks.vue

@@ -0,0 +1,11 @@
+<template>
+  <v-clicks>
+    <ol style="border: 1px solid green">
+      <li>Point a</li>
+      <decorate-with-li>
+        <slot />
+      </decorate-with-li>
+      <li>Point z</li>
+    </ol>
+  </v-clicks>
+</template>

cypress/fixtures/basic/slides.md

@@ -141,3 +141,40 @@ Left
 
 </v-clicks>
 </div>
+
+---
+
+# Page 12
+
+<v-clicks>
+  <ul><li>A</li><li>B</li></ul>
+</v-clicks>
+
+<wrap-in-clicks>
+  <ul><li>A</li><li>B</li></ul>
+</wrap-in-clicks>
+
+<wrap-in-clicks>
+
+- A
+- B
+
+</wrap-in-clicks>
+
+---
+
+# Page 13
+
+<div class="cy-wrapdecorate">
+<wrap-in-clicks-decorate>
+  <li>E</li>
+  <li>F</li>
+</wrap-in-clicks-decorate>
+
+(the next is kept for a future patch but not animating the nesting)
+
+<wrap-in-component-in-clicks>
+  <li>step i</li>
+  <li>step j</li>
+</wrap-in-component-in-clicks>
+</div>

packages/client/builtin/VClicks.ts

@@ -50,16 +50,25 @@ export default defineComponent({
       ]])
     }
 
+    const openAllTopLevelSlots = <T extends VNodeArrayChildren | VNode[]>(children: T): T => {
+      return children.flatMap((i) => {
+        if (isVNode(i) && typeof i.type === 'symbol' && Array.isArray(i.children))
+          return openAllTopLevelSlots(i.children)
+        else
+          return [i]
+      }) as T
+    }
+
     let defaults = this.$slots.default?.()
 
     if (!defaults)
       return
 
-    defaults = toArray(defaults)
+    defaults = openAllTopLevelSlots(toArray(defaults))
 
     const mapSubList = (children: VNodeArrayChildren, depth = 1): [VNodeArrayChildren, number] => {
       let idx = 0
-      const vNodes = children.map((i) => {
+      const vNodes = openAllTopLevelSlots(children).map((i) => {
         if (!isVNode(i))
           return i
         if (listTags.includes(i.type as string) && Array.isArray(i.children)) {
@@ -76,7 +85,7 @@ export default defineComponent({
     let globalIdx = 0
     const mapChildren = (children: VNodeArrayChildren, depth = 1): [VNodeArrayChildren, number] => {
       let idx = 0
-      const vNodes = children.map((i) => {
+      const vNodes = openAllTopLevelSlots(children).map((i) => {
         if (!isVNode(i) || i.type === Comment)
           return i
         const directive = idx % this.every === 0 ? click : after