readability

Author: cacieprins

packages/driver/cypress/e2e/memory/virtual-scroll-stress.cy.js

@@ -37,8 +37,8 @@ describe('Virtual Scrolling Stress Tests', {
     it('should load basic virtual list without crashing', () => {
       cy.get('button').contains('Load Basic List').click()
 
-      cy.get('#basicList .item')
-      .should('have.length.greaterThan', 0)
+      cy.get('#basicList .item', { log: false })
+      .should('have.length.greaterThan', 0, { log: false })
     })
 
     it('should handle normal scrolling without crashing', () => {

packages/driver/src/dom/visibility/fastIsHidden.ts

@@ -1,109 +1,13 @@
 import $elements from '../elements'
-
-import { unwrap, wrap, isJquery } from '../jquery'
+import { unwrap, isJquery } from '../jquery'
 const { isOption, isOptgroup, isBody, isHTML } = $elements
+import { VisibilityTests, VisibilityResultKind } from './visibility-tests/VisibilityTest'
 
-const DEBUG = false
-
-function debug (...args: any[]) {
-  if (DEBUG) {
-    // eslint-disable-next-line no-console
-    console.log('DEBUG:', ...args)
-  }
+interface VisibilityOptions {
+  checkOpacity: boolean
 }
 
-function memoize<T> (fn: (...args: any[]) => T): (...args: any[]) => T {
-  const cache = new Map<any, { result: T, timestamp: number }>()
-
-  return (...args: any[]) => {
-    const key = args
-
-    const cached = cache.get(key)
-
-    if (cached && cached.timestamp > Date.now() - 100) {
-      return cached.result
-    }
-
-    const result = fn(...args)
-
-    cache.set(key, { result, timestamp: Date.now() })
-
-    return result
-  }
-}
-
-const getBoundingClientRect = memoize((el: HTMLElement) => el.getBoundingClientRect())
-
-function subDivideRect ({ x, y, width, height }: DOMRect): DOMRect[] {
-  return [
-    DOMRect.fromRect({
-      x,
-      y,
-      width: width / 2,
-      height: height / 2,
-    }),
-    DOMRect.fromRect({
-      x: x + width / 2,
-      y,
-      width: width / 2,
-      height: height / 2,
-    }),
-    DOMRect.fromRect({
-      x,
-      y: y + height / 2,
-      width: width / 2,
-      height: height / 2,
-    }),
-    DOMRect.fromRect({
-      x: x + width / 2,
-      y: y + height / 2,
-      width: width / 2,
-      height: height / 2,
-    }),
-  ].filter((rect: DOMRect) => rect.width > 1 && rect.height > 1)
-}
-
-const visibleAtPoint = memoize(function (el: HTMLElement, x: number, y: number): boolean {
-  const elAtPoint = el.ownerDocument.elementFromPoint(x, y)
-
-  debug('visibleAtPoint', el, elAtPoint)
-
-  return Boolean(elAtPoint) && (elAtPoint === el || el.contains(elAtPoint))
-})
-
-function visibleToUser (el: HTMLElement, rect: DOMRect, maxDepth: number = 2, currentDepth: number = 0): boolean {
-  if (currentDepth >= maxDepth) {
-    return false
-  }
-
-  const { x, y, width, height } = rect
-
-  const samples = [
-    [x, y],
-    [x + width, y],
-    [x, y + height],
-    [x + width, y + height],
-    [x + width / 2, y + height / 2],
-  ]
-
-  if (samples.some(([x, y]) => visibleAtPoint(el, x, y))) {
-    debug('some samples are visible')
-
-    return true
-  }
-
-  const subRects = subDivideRect(rect)
-
-  debug('subRects', subRects)
-
-  return subRects.some((subRect: DOMRect) => {
-    return visibleToUser(el, subRect, maxDepth, currentDepth + 1)
-  })
-}
-
-export function fastIsHidden (subject: JQuery<HTMLElement> | HTMLElement, options: { checkOpacity: boolean } = { checkOpacity: true }): boolean {
-  debug('fastIsHidden', subject)
-
+export function fastIsHidden (subject: JQuery<HTMLElement> | HTMLElement, options: VisibilityOptions = { checkOpacity: true }): boolean {
   if (isBody(subject) || isHTML(subject)) {
     return false
   }
@@ -126,25 +30,17 @@ export function fastIsHidden (subject: JQuery<HTMLElement> | HTMLElement, option
     const select = subject.closest('select')
 
     if (select) {
-      return fastIsHidden(wrap(select), options)
+      return fastIsHidden(select, options)
     }
   }
 
-  if (!subject.checkVisibility({
-    contentVisibilityAuto: true,
-    opacityProperty: options.checkOpacity,
-    visibilityProperty: true,
-  })) {
-    return true
-  }
+  for (const test of VisibilityTests) {
+    const result = test(subject, options)
 
-  const boundingRect = getBoundingClientRect(subject)
-
-  if (visibleToUser(subject, boundingRect)) {
-    debug('visibleToUser', subject, boundingRect)
-
-    return false
+    if (result) {
+      return result.kind === VisibilityResultKind.HIDDEN
+    }
   }
 
-  return true
+  return false
 }

packages/driver/src/dom/visibility/visibility-tests/VisibilityTest.ts

@@ -0,0 +1,25 @@
+import { dimensions } from './dimensions'
+import { domVisibility } from './domVisibility'
+import { pointSampling } from './pointSampling'
+
+export const VisibilityResultKind = Object.freeze({
+  VISIBLE: 'visible',
+  HIDDEN: 'hidden',
+})
+
+type VisibilityTestResultKind = typeof VisibilityResultKind[keyof typeof VisibilityResultKind]
+
+export interface VisibilityTestResult {
+  kind: VisibilityTestResultKind
+  reason: string
+}
+
+export interface VisibilityTest {
+  (el: HTMLElement): VisibilityTestResult | undefined
+}
+
+export const VisibilityTests: VisibilityTest[] = [
+  dimensions,
+  domVisibility,
+  pointSampling,
+]

packages/driver/src/dom/visibility/visibility-tests/dimensions.ts

@@ -0,0 +1,8 @@
+import { getBoundingClientRect } from './getBoundingClientRect'
+import { VisibilityResultKind, VisibilityTestResult } from './VisibilityTest'
+
+export function dimensions (subject: HTMLElement, options: VisibilityOptions): VisibilityTestResult | undefined {
+  const boundingRect = getBoundingClientRect(subject)
+
+  return boundingRect.width === 0 || boundingRect.height === 0 ? VisibilityResultKind.HIDDEN : undefined
+}

packages/driver/src/dom/visibility/visibility-tests/domVisibility.ts

@@ -0,0 +1,9 @@
+import { VisibilityResultKind } from './VisibilityTest'
+
+export function domVisibility (subject: HTMLElement, options: VisibilityOptions): VisibilityTestResult | undefined {
+  return subject.checkVisibility({
+    contentVisibilityAuto: true,
+    opacityProperty: options.checkOpacity,
+    visibilityProperty: true,
+  }) ? VisibilityResultKind.VISIBLE : undefined
+}

packages/driver/src/dom/visibility/visibility-tests/getBoundingClientRect.ts

@@ -0,0 +1,5 @@
+import { memoize } from './memoize'
+
+export const getBoundingClientRect = memoize(
+  (el: HTMLElement) => el.getBoundingClientRect(),
+)

packages/driver/src/dom/visibility/visibility-tests/memoize.ts

@@ -0,0 +1,44 @@
+interface MemoizeOptions<
+  IndexFn extends (...args: any[]) => any,
+  Key = IndexFn extends (...args: any[]) => infer I ? I : never
+> {
+  ttl?: number
+  key?: (...args: Parameters<T>) => Key
+}
+
+export function memoize<T extends (...args: any[]) => any> (
+  fn: T,
+  options?: MemoizeOptions<T>): T {
+  const ttl = options?.ttl ?? 100
+  const keyFn = options?.key ?? ((args: Parameters<T>) => args[0])
+
+  const cache = new Map<ReturnType<typeof keyFn>, { result: ReturnType<T>, timestamp: number }>()
+
+  let sweepTimeout: NodeJS.Timeout | undefined
+
+  const sweep = () => {
+    sweepTimeout = undefined
+    cache.forEach((value, key) => {
+      if (value.timestamp < Date.now() - ttl) {
+        cache.delete(key)
+      }
+    })
+  }
+
+  return (...args: any[]) => {
+    sweepTimeout = sweepTimeout || setTimeout(sweep, ttl)
+
+    const key = keyFn(args)
+    const cached = cache.get(key)
+
+    if (cached && cached.timestamp > Date.now() - ttl) {
+      return cached.result
+    }
+
+    const result = fn(...args)
+
+    cache.set(key, { result, timestamp: Date.now() })
+
+    return result
+  }
+}

packages/driver/src/dom/visibility/visibility-tests/pointSampling.ts

@@ -0,0 +1,67 @@
+import { getBoundingClientRect } from './getBoundingClientRect'
+import { memoize } from './memoize'
+import { VisibilityResultKind } from './VisibilityTest'
+
+const MAX_DEPTH = 2
+const MIN_SIZE = 1
+
+const SUBDIVIDE_PATTERN = [
+  [0, 0],
+  [1, 0],
+  [0, 1],
+  [1, 1],
+] as const
+
+const SAMPLE_POINTS = [
+  ...SUBDIVIDE_PATTERN,
+  [0.5, 0.5],
+] as const
+
+export function pointSampling (subject: HTMLElement, options: VisibilityOptions): VisibilityTestResult | undefined {
+  const boundingRect = getBoundingClientRect(subject)
+
+  return sampleDomRectPoints(subject, boundingRect) ? VisibilityResultKind.VISIBLE : undefined
+}
+
+function sampleDomRectPoints (el: HTMLElement, rect: DOMRect, currentDepth: number = 0): boolean {
+  if (currentDepth >= MAX_DEPTH) {
+    return false
+  }
+
+  const { x, y, width, height } = rect
+
+  const samples = SAMPLE_POINTS.map(([pX, pY]) => [x + pX * width, y + pY * height])
+
+  if (samples.some(([x, y]) => visibleAtPoint(el, x, y))) {
+    return true
+  }
+
+  const subRects = subDivideRect(rect)
+
+  debug('subRects', subRects)
+
+  return subRects.some((subRect: DOMRect) => {
+    return visibleToUser(el, subRect, maxDepth, currentDepth + 1)
+  })
+}
+
+function subDivideRect ({ x, y, width, height }: DOMRect): DOMRect[] {
+  return SUBDIVIDE_PATTERN.map(([dX, dY]) => {
+    const validDim = width / 2 > MIN_SIZE && height / 2 > MIN_SIZE
+
+    return validDim ? DOMRect.fromRect({
+      x: x + dX * (width / 2),
+      y: y + dY * (height / 2),
+      width: width / 2,
+      height: height / 2,
+    }) : undefined
+  }).filter(Boolean)
+}
+
+const visibleAtPoint = memoize(function (el: HTMLElement, x: number, y: number): boolean {
+  const elAtPoint = el.ownerDocument.elementFromPoint(x, y)
+
+  debug('visibleAtPoint', el, elAtPoint)
+
+  return Boolean(elAtPoint) && (elAtPoint === el || el.contains(elAtPoint))
+})

packages/driver/src/dom/visibility/visibleToUser.ts

@@ -0,0 +1,64 @@
+import { memoize } from '@packages/driver/src/dom/visibility/memoize'
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest'
+
+describe('memoize', () => {
+  let fn: vi.Mock
+
+  beforeEach(() => {
+    vi.useFakeTimers()
+    fn = vi.fn().mockReturnValue('output')
+  })
+
+  afterEach(() => {
+    vi.clearAllTimers()
+    vi.useRealTimers()
+    vi.restoreAllMocks()
+  })
+
+  it('should memoize the result of the function', () => {
+    const memoizedFn = memoize(fn, { ttl: 1000 })
+    const result = memoizedFn('input')
+
+    expect(fn).toHaveBeenCalledWith('input')
+    expect(result).toBe('output')
+  })
+
+  it('should return the cached result if the function is called with the same arguments', () => {
+    const memoizedFn = memoize(fn, { ttl: 1000 })
+    const result1 = memoizedFn(1)
+    const result2 = memoizedFn(1)
+
+    expect(fn).toHaveBeenCalledWith(1)
+    expect(fn).toHaveBeenCalledOnce()
+    expect(result1).toBe('output')
+    expect(result2).toBe('output')
+  })
+
+  it('should sweep the cache after the ttl', () => {
+    const memoizedFn = memoize(fn, { ttl: 1000 })
+    const result1 = memoizedFn('input')
+
+    expect(fn).toHaveBeenCalledWith('input')
+    expect(fn).toHaveBeenCalledTimes(1)
+    expect(result1).toBe('output')
+
+    vi.advanceTimersByTime(1000)
+
+    const result3 = memoizedFn('input')
+
+    expect(fn).toHaveBeenCalledWith('input')
+    expect(fn).toHaveBeenCalledTimes(2)
+    expect(result3).toBe('output')
+  })
+
+  it('supports complex arguments with a custom key function', () => {
+    const memoizedFn = memoize(fn, { ttl: 1000, key: (args) => JSON.stringify(args) })
+    const result1 = memoizedFn({ a: 'input-1', b: 'input-2' })
+    const result2 = memoizedFn({ a: 'input-1', b: 'input-2' })
+
+    expect(fn).toHaveBeenCalledWith({ a: 'input-1', b: 'input-2' })
+    expect(fn).toHaveBeenCalledTimes(1)
+    expect(result1).toBe('output')
+    expect(result2).toBe('output')
+  })
+})