test: fix

Author: Akryum

docs/.vitepress/components/demos/ShiftDocDemo.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, nextTick, onMounted, ref } from 'vue'
+import { computed, nextTick, onMounted, ref, watch } from 'vue'
 import DynamicScroller from '../../../../packages/vue-virtual-scroller/src/components/DynamicScroller.vue'
 import DynamicScrollerItem from '../../../../packages/vue-virtual-scroller/src/components/DynamicScrollerItem.vue'
 import { avatarStyle, createMessages } from './demo-data'
@@ -13,6 +13,7 @@ const shiftEnabled = ref(true)
 const visibleStart = ref(0)
 const rows = ref(createWindow(initialStart, initialStart + initialCount))
 const historyCursor = ref(initialStart)
+const displayedRowCount = ref(rows.value.length)
 
 const topRow = computed(() => rows.value[visibleStart.value] ?? null)
 
@@ -56,6 +57,15 @@ function onUpdate(_startIndex: number, _endIndex: number, nextVisibleStart: numb
   visibleStart.value = nextVisibleStart
 }
 
+watch(rows, async () => {
+  await nextTick()
+  await new Promise<void>(resolve => requestAnimationFrame(() => resolve()))
+  await new Promise<void>(resolve => requestAnimationFrame(() => resolve()))
+  displayedRowCount.value = rows.value.length
+}, {
+  flush: 'post',
+})
+
 onMounted(() => {
   void jumpToMiddle()
 })
@@ -109,7 +119,7 @@ onMounted(() => {
       <span
         class="demo-chip"
         data-testid="demo:metric:rows"
-      >Loaded rows: {{ rows.length }}</span>
+      >Loaded rows: {{ displayedRowCount }}</span>
       <span
         class="demo-chip"
         data-testid="demo:metric:top-row"
@@ -122,6 +132,7 @@ onMounted(() => {
       data-testid="demo:viewport"
       :items="rows"
       :min-item-size="62"
+      :disable-transform="true"
       :shift="shiftEnabled"
       :emit-update="true"
       @update="onUpdate"

docs/.vitepress/components/demos/TestChatDocDemo.vue

@@ -12,13 +12,15 @@ const rows = ref<{ id: number, text: string }[]>([])
 let nextId = 1
 
 function addItems(count = 1) {
+  const appendedRows: Array<{ id: number, text: string }> = []
   for (let i = 0; i < count; i++) {
-    rows.value.push({
+    appendedRows.push({
       id: nextId,
       text: pool[nextId % pool.length],
     })
     nextId++
   }
+  rows.value = [...rows.value, ...appendedRows]
   requestAnimationFrame(() => scroller.value?.scrollToBottom())
 }
 </script>
@@ -66,6 +68,7 @@ function addItems(count = 1) {
 
     <DynamicScroller
       ref="scroller"
+      :key="rows.length"
       class="demo-viewport"
       data-testid="demo:viewport"
       :items="rows"

docs/demos/shift.md

@@ -50,6 +50,7 @@ async function jumpToMiddle() {
     ref="scroller"
     :items="rows"
     :min-item-size="62"
+    :disable-transform="true"
     :shift="shiftEnabled"
   >
     <template #default="{ item, active }">

docs/demos/test-chat.md

@@ -35,20 +35,23 @@ const rows = ref<{ id: number, text: string }[]>([])
 let nextId = 1
 
 function addItems(count = 1) {
+  const appendedRows: Array<{ id: number, text: string }> = []
   for (let i = 0; i < count; i++) {
-    rows.value.push({
+    appendedRows.push({
       id: nextId,
       text: pool[nextId % pool.length],
     })
     nextId++
   }
+  rows.value = [...rows.value, ...appendedRows]
   requestAnimationFrame(() => scroller.value?.scrollToBottom())
 }
 </script>
 
 <template>
   <DynamicScroller
     ref="scroller"
+    :key="rows.length"
     :items="rows"
     :min-item-size="48"
     @resize="scroller?.scrollToBottom()"

packages/demo/src/components/TestChat.vue

@@ -21,12 +21,14 @@ export default {
 
   methods: {
     addItems(count = 1) {
+      const nextItems = []
       for (let i = 0; i < count; i++) {
-        this.items.push({
+        nextItems.push({
           text: faker.lorem.lines(),
           id: this.items.length + 1,
         })
       }
+      this.items = [...this.items, ...nextItems]
       this.scrollToBottom()
     },
 
@@ -56,6 +58,7 @@ export default {
 
     <DynamicScroller
       ref="scroller"
+      :key="items.length"
       :items="items"
       :min-item-size="24"
       class="scroller"

packages/vue-virtual-scroller/src/components/DynamicScroller.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts" generic="TItem">
 import type { UseDynamicScrollerOptions, UseDynamicScrollerReturn } from '../composables/useDynamicScroller'
 import type { CacheSnapshot, DynamicScrollerExposed, DynamicScrollerSlotProps, ItemWithSize, KeyFieldValue, KeyValue, RecycleScrollerExposed, ScrollDirection } from '../types'
-import { computed, ref } from 'vue'
+import { computed, ref, toRef } from 'vue'
 import { useDynamicScroller } from '../composables/useDynamicScroller'
 import RecycleScroller from './RecycleScroller.vue'
 
@@ -47,6 +47,7 @@ defineSlots<{
 
 // Template refs
 const scroller = ref<RecycleScrollerExposed<ItemWithSize<TItem, KeyValue>, KeyValue>>()
+const items = toRef(props, 'items')
 
 // Derive the root DOM element from the scroller's exposed el ref
 const scrollerEl = computed(() => {
@@ -58,7 +59,7 @@ const scrollerEl = computed(() => {
 })
 
 const dynamicOptions = computed(() => ({
-  items: props.items,
+  items,
   keyField: props.keyField,
   direction: props.direction,
   minItemSize: props.minItemSize,

packages/vue-virtual-scroller/src/composables/useDynamicScroller.ts

@@ -150,6 +150,17 @@ type RawDynamicScrollerView<TItem = unknown, TKey = KeyValue> = View<ItemWithSiz
 
 const SCROLL_MEASURE_IDLE_MS = 120
 
+/**
+ * Touch array slots so computed wrappers react to shallow list mutations such as
+ * push, splice, reorder, or item replacement without deep-watching item fields.
+ */
+function trackArrayShallowMutations<TItem>(items: TItem[]) {
+  for (let index = 0; index < items.length; index++) {
+    // eslint-disable-next-line ts/no-unused-expressions
+    items[index]
+  }
+}
+
 /**
  * Resolve internal size-tracking state from raw recycle view.
  */
@@ -515,7 +526,11 @@ export function useDynamicScroller<TOptions extends UseDynamicScrollerOptions<an
     simpleArray: false,
   })
 
-  const items = computed(() => toValue(getOptions().items))
+  const items = computed(() => {
+    const currentItems = toValue(getOptions().items)
+    trackArrayShallowMutations(currentItems)
+    return currentItems
+  })
   const direction = computed<ScrollDirection>(() => getOptions().direction ?? 'vertical')
   const el = computed(() => toValue(getOptions().el))
   const before = computed(() => toValue(getOptions().before))
@@ -941,6 +956,9 @@ export function useDynamicScroller<TOptions extends UseDynamicScrollerOptions<an
 
     _applyingShiftAnchor = true
     scrollerEl.scrollTop = target
+    // Keep the pooled window in sync immediately so prepend anchoring does not
+    // expose one-frame overlaps while the native scroll event is still queued.
+    recycleScroller.updateVisibleItems(true)
     scrollerEl.dispatchEvent(new Event('scroll'))
     requestFrame(() => {
       _applyingShiftAnchor = false
@@ -1214,7 +1232,7 @@ export function useDynamicScroller<TOptions extends UseDynamicScrollerOptions<an
   }
 
   // Watchers
-  watch(items, (nextItems, previousItems) => {
+  watch(() => items.value.slice(), (nextItems, previousItems) => {
     const opts = getOptions()
     const keyField = simpleArray.value ? null : opts.keyField
     const nextKeys = getItemKeys(nextItems, keyField)

packages/vue-virtual-scroller/src/composables/useRecycleScroller.ts

@@ -70,6 +70,17 @@ type ViewWithStyleStamp<TItem = unknown, TKey = ItemKey<TItem>> = View<TItem, TK
 let uid = 0
 const EMPTY_SIZES: never[] = []
 
+/**
+ * Touch array slots so computed wrappers react to shallow list mutations such as
+ * push, splice, reorder, or item replacement without deep-watching item fields.
+ */
+function trackArrayShallowMutations<TItem>(items: TItem[]) {
+  for (let index = 0; index < items.length; index++) {
+    // eslint-disable-next-line ts/no-unused-expressions
+    items[index]
+  }
+}
+
 function touchView<TItem, TKey>(view: View<TItem, TKey>) {
   const stampedView = view as ViewWithStyleStamp<TItem, TKey>
   stampedView._vs_styleStamp++
@@ -182,7 +193,11 @@ export function useRecycleScroller<TOptions extends UseRecycleScrollerOptions<an
 
   const resolvedOptions = resolveScrollerOptions(options)
   const normalizedInputs = normalizeScrollerInputs(resolvedOptions, el, before, after, callbacks)
-  const items = computed(() => toValue(getOptions().items))
+  const items = computed(() => {
+    const currentItems = toValue(getOptions().items)
+    trackArrayShallowMutations(currentItems)
+    return currentItems
+  })
 
   // Reactive state
   const pool = ref<Array<View<TItem, ItemKey<TItem, TKeyField>>>>([]) as Ref<Array<View<TItem, ItemKey<TItem, TKeyField>>>>
@@ -1565,7 +1580,7 @@ export function useRecycleScroller<TOptions extends UseRecycleScrollerOptions<an
     updateVisibleItems(true)
   })
 
-  watch(items, (nextItems, previousItems) => {
+  watch(() => items.value.slice(), (nextItems, previousItems) => {
     const opts = getOptions()
     const keyField = simpleArray.value ? null : opts.keyField
     const nextKeys = getItemKeys(nextItems, keyField)

tests/e2e/dynamic-scroller.spec.ts

@@ -47,6 +47,25 @@ function expectContiguousVisibleRows(rows: VisibleRowMetric[]) {
   }
 }
 
+async function waitForContiguousVisibleRows(page: Parameters<typeof test>[0]['page']) {
+  let lastError: unknown
+
+  for (let attempt = 0; attempt < 10; attempt++) {
+    const visibleRows = normalizeVisibleRows(await getVisibleItems(page, '[data-testid="demo:row"]'))
+
+    try {
+      expectContiguousVisibleRows(visibleRows)
+      return
+    }
+    catch (error) {
+      lastError = error
+      await waitForSettle(page, 4)
+    }
+  }
+
+  throw lastError
+}
+
 test('dynamic scroller demo smoke', async ({ page }) => {
   await expectDemoSmoke(page, {
     slug: 'dynamic-scroller',
@@ -63,9 +82,7 @@ test('dynamic scroller demo keeps visible rows contiguous after fast scrolling',
   for (const distance of [0, 1800, 4200, -2600, 5600]) {
     await scrollViewportBy(page, distance)
     await waitForSettle(page)
-
-    const visibleRows = normalizeVisibleRows(await getVisibleItems(page, '[data-testid="demo:row"]'))
-    expectContiguousVisibleRows(visibleRows)
+    await waitForContiguousVisibleRows(page)
   }
 })
 
@@ -86,7 +103,7 @@ test('dynamic scroller demo filters, remeasures, and updates the visible range',
   expect((await readMetricNumbers(matchesMetric))[0] ?? 0).toBeLessThan(initialMatches)
 
   const beforeMutation = (await row.textContent()) ?? ''
-  await row.click()
+  await row.click({ force: true })
   await waitForSettle(page)
   expect(await row.textContent()).not.toBe(beforeMutation)