@pyreon/elements 0.24.4 → 0.24.6

package/src/__tests__/internElementBundle.test.ts

@@ -1,102 +0,0 @@
-/**
- * Unit tests for internElementBundle() — the module-scope LRU cache that
- * gives same-shape Element layouts a stable object identity. Locks in the
- * bail conditions (functions, non-string objects) and the LRU semantics
- * so a future refactor can't silently break the styler classCache hit.
- */
-import { describe, expect, it } from 'vitest'
-import { internElementBundle } from '../helpers/internElementBundle'
-
-describe('internElementBundle', () => {
-  it('returns the same identity for the same primitive prop tuple', () => {
-    const a = internElementBundle({
-      block: false,
-      direction: 'inline',
-      alignX: 'left',
-      alignY: 'center',
-      equalCols: false,
-      extraStyles: undefined,
-    })
-    const b = internElementBundle({
-      block: false,
-      direction: 'inline',
-      alignX: 'left',
-      alignY: 'center',
-      equalCols: false,
-      extraStyles: undefined,
-    })
-    expect(a).toBe(b)
-  })
-
-  it('returns different identity when any primitive value differs', () => {
-    const a = internElementBundle({ block: false, direction: 'inline' })
-    const b = internElementBundle({ block: true, direction: 'inline' })
-    const c = internElementBundle({ block: false, direction: 'rows' })
-    expect(a).not.toBe(b)
-    expect(a).not.toBe(c)
-    expect(b).not.toBe(c)
-  })
-
-  it('handles different bundle shapes independently (parentFix vs childFix)', () => {
-    const parent = internElementBundle({
-      parentFix: true,
-      block: false,
-      extraStyles: undefined,
-    })
-    const child = internElementBundle({
-      childFix: true,
-      direction: 'inline',
-      alignX: 'left',
-      alignY: 'center',
-      equalCols: false,
-    })
-    expect(parent).not.toBe(child)
-    // Same shape repeats are interned
-    const parent2 = internElementBundle({
-      parentFix: true,
-      block: false,
-      extraStyles: undefined,
-    })
-    expect(parent).toBe(parent2)
-  })
-
-  it('bails (returns the input untouched) when a value is a function', () => {
-    const fn = () => 'red'
-    const a = internElementBundle({ block: false, extraStyles: fn })
-    const b = internElementBundle({ block: false, extraStyles: fn })
-    // Both calls bail — neither is cached, so identities differ.
-    expect(a).not.toBe(b)
-    // The returned object IS the input (untouched).
-    expect(a).toEqual({ block: false, extraStyles: fn })
-  })
-
-  it('bails when a value is a non-null object (CSSResult / nested object)', () => {
-    const cssResult = { strings: ['color: red'], values: [] }
-    const a = internElementBundle({ block: false, extraStyles: cssResult })
-    const b = internElementBundle({ block: false, extraStyles: cssResult })
-    expect(a).not.toBe(b)
-  })
-
-  it('treats string extraStyles as cacheable (the common pre-resolved CSS case)', () => {
-    const a = internElementBundle({ block: false, extraStyles: 'color: red' })
-    const b = internElementBundle({ block: false, extraStyles: 'color: red' })
-    expect(a).toBe(b)
-    const c = internElementBundle({ block: false, extraStyles: 'color: blue' })
-    expect(a).not.toBe(c)
-  })
-
-  it('null and undefined are distinct cache keys (JSON serializes them differently)', () => {
-    const aNull = internElementBundle({ extraStyles: null })
-    const aUndef = internElementBundle({ extraStyles: undefined })
-    expect(aNull).not.toBe(aUndef)
-  })
-
-  it('LRU touch on hit moves entry to most-recent position', () => {
-    // Hit the same bundle twice — second call should still return the same
-    // identity (LRU touch keeps it alive).
-    const key = `lru-touch-${Math.random()}`
-    const first = internElementBundle({ direction: key })
-    const second = internElementBundle({ direction: key })
-    expect(first).toBe(second)
-  })
-})

package/src/__tests__/iterator-function-children.test.tsx

@@ -1,120 +0,0 @@
-/** @jsxImportSource @pyreon/core */
-/**
- * Regression: `<Iterator>{items}</Iterator>` where the Pyreon compiler
- * wrapped `items` in `() => items` (the prop-inlining pass) used to
- * silently misrender — the `Array.isArray(children)` and Fragment-type
- * checks both fell through (a function is neither), and the fallthrough
- * `renderChild(function)` called `render(function, props)` which
- * interpreted the function as a COMPONENT FUNCTION. That accidentally
- * worked at the DOM level (the wrapped function's call returned the array
- * and mountChild rendered it), but the per-item metadata (`first`/`last`/
- * `position`/`index`/`odd`/`even`) was LOST because the iteration loop
- * was never reached.
- *
- * Fix: unwrap eagerly at component-body entry — `typeof children ===
- * 'function' ? children() : children`. Mirrors kinetic's `resolveChildren`
- * pattern (PR #731 + top-level Transition/Stagger parallel fix).
- *
- * Bisect-verified: reverting the `typeof rawChildren === 'function'`
- * unwrap fails this spec — per-item `first`/`last` props arrive as
- * `undefined` because the iteration loop was skipped.
- */
-import type { VNode, VNodeChild } from '@pyreon/core'
-import { h } from '@pyreon/core'
-import { mount } from '@pyreon/runtime-dom'
-import { afterEach, describe, expect, it } from 'vitest'
-import Iterator from '../helpers/Iterator/component'
-
-let containers: HTMLElement[] = []
-afterEach(() => {
-  for (const c of containers) c.remove()
-  containers = []
-})
-
-describe('<Iterator> — function-wrapped children', () => {
-  it('iterates function-wrapped children with per-item metadata via wrapProps', () => {
-    let firstFlagSet = false
-    let lastFlagSet = false
-    const positions: number[] = []
-
-    // ItemWrapper just renders <li>. The per-item metadata is captured
-    // via the `wrapProps` injector — Iterator calls it with the
-    // attached metadata `{first, last, position, index, odd, even}`.
-    // Counting positions/flags proves the iteration loop fired.
-    const ItemWrapper = (props: {
-      children?: VNodeChild
-      'data-first'?: string
-      'data-last'?: string
-      'data-position'?: number
-    }) => h('li', props as never, props.children as never)
-
-    const items: VNode[] = [
-      h('span', { 'data-id': 'item-a' }, 'A'),
-      h('span', { 'data-id': 'item-b' }, 'B'),
-      h('span', { 'data-id': 'item-c' }, 'C'),
-    ]
-
-    // Compiler-emitted shape: children is `() => items` (the prop-inlining
-    // wrap for stable references). Pre-fix: the function was treated as a
-    // component → iteration loop skipped → per-item metadata not attached.
-    const tree = h(Iterator, {
-      wrapComponent: ItemWrapper,
-      // wrapProps receives `(itemProps, extendedProps)` where
-      // extendedProps carries the per-item metadata. Captured here to
-      // prove the iteration loop fired (which the fallthrough wouldn't).
-      wrapProps: (_: object, ext: { first: boolean; last: boolean; position: number }) => {
-        positions.push(ext.position)
-        if (ext.first) firstFlagSet = true
-        if (ext.last) lastFlagSet = true
-        return {}
-      },
-      children: (() => items) as unknown as VNodeChild,
-    })
-
-    const container = document.createElement('div')
-    document.body.appendChild(container)
-    containers.push(container)
-
-    const dispose = mount(tree as VNode, container)
-
-    expect(
-      positions,
-      `wrapProps was called for positions=${JSON.stringify(positions)}; ` +
-        `expected [1,2,3] (per-item iteration loop must fire). ` +
-        `html=${container.innerHTML.slice(0, 400)}`,
-    ).toEqual([1, 2, 3])
-    expect(firstFlagSet, 'first=true metadata must reach wrapProps').toBe(true)
-    expect(lastFlagSet, 'last=true metadata must reach wrapProps').toBe(true)
-
-    expect(container.querySelector('[data-id="item-a"]')?.tagName).toBe('SPAN')
-    expect(container.querySelector('[data-id="item-b"]')?.tagName).toBe('SPAN')
-    expect(container.querySelector('[data-id="item-c"]')?.tagName).toBe('SPAN')
-
-    dispose()
-  })
-
-  it('static-array children control — was always working', () => {
-    let renderedItems = 0
-    const ItemWrapper = (props: { children?: VNodeChild; position?: number }) => {
-      renderedItems++
-      return h('li', { 'data-position': props.position }, props.children as never)
-    }
-
-    const tree = h(
-      Iterator,
-      { wrapComponent: ItemWrapper },
-      h('span', { 'data-id': 'static-a' }, 'A'),
-      h('span', { 'data-id': 'static-b' }, 'B'),
-    )
-
-    const container = document.createElement('div')
-    document.body.appendChild(container)
-    containers.push(container)
-    const dispose = mount(tree as VNode, container)
-
-    expect(renderedItems).toBe(2)
-    expect(container.querySelector('[data-id="static-a"]')?.tagName).toBe('SPAN')
-
-    dispose()
-  })
-})

package/src/__tests__/native-markers.test.ts

@@ -1,13 +0,0 @@
-import { isNativeCompat } from '@pyreon/core'
-import { describe, expect, it } from 'vitest'
-import Overlay from '../Overlay/component'
-import OverlayContextProvider from '../Overlay/context'
-
-describe('native-compat markers — @pyreon/elements', () => {
-  it('Overlay is marked native', () => {
-    expect(isNativeCompat(Overlay)).toBe(true)
-  })
-  it('Overlay context Provider is marked native', () => {
-    expect(isNativeCompat(OverlayContextProvider)).toBe(true)
-  })
-})

package/src/__tests__/overlayContext.test.tsx

@@ -1,78 +0,0 @@
-import { popContext } from '@pyreon/core'
-import { afterEach, describe, expect, it, vi } from 'vitest'
-import OverlayContextProvider, { useOverlayContext } from '../Overlay/context'
-
-describe('Overlay context', () => {
-  it('useOverlayContext is a function', () => {
-    expect(typeof useOverlayContext).toBe('function')
-  })
-
-  it('returns the default context (empty object) when called outside a provider', () => {
-    const ctx = useOverlayContext()
-    expect(ctx).toEqual({})
-  })
-})
-
-describe('OverlayContextProvider component', () => {
-  afterEach(() => {
-    try {
-      popContext()
-    } catch {
-      // Ignore if no context was pushed
-    }
-  })
-
-  it('provides blocked/setBlocked/setUnblocked via context', () => {
-    const setBlocked = vi.fn()
-    const setUnblocked = vi.fn()
-
-    OverlayContextProvider({
-      blocked: true,
-      setBlocked,
-      setUnblocked,
-      children: 'child',
-    })
-
-    const ctx = useOverlayContext()
-    expect(ctx.blocked).toBe(true)
-    expect(ctx.setBlocked).toBe(setBlocked)
-    expect(ctx.setUnblocked).toBe(setUnblocked)
-  })
-
-  it('renders children (returns a value)', () => {
-    const result = OverlayContextProvider({
-      blocked: false,
-      setBlocked: vi.fn(),
-      setUnblocked: vi.fn(),
-      children: 'Hello overlay',
-    })
-
-    expect(result).toBeDefined()
-  })
-
-  it('provides blocked as false', () => {
-    OverlayContextProvider({
-      blocked: false,
-      setBlocked: vi.fn(),
-      setUnblocked: vi.fn(),
-      children: null,
-    })
-
-    const ctx = useOverlayContext()
-    expect(ctx.blocked).toBe(false)
-  })
-
-  it('provides blocked as a function when passed as a function', () => {
-    const blockedFn = () => true
-
-    OverlayContextProvider({
-      blocked: blockedFn,
-      setBlocked: vi.fn(),
-      setUnblocked: vi.fn(),
-      children: null,
-    })
-
-    const ctx = useOverlayContext()
-    expect(ctx.blocked).toBe(blockedFn)
-  })
-})

package/src/__tests__/perf-stress.browser.test.tsx

@@ -1,119 +0,0 @@
-/**
- * Wall-clock stress benchmark for the Element + Wrapper + Styled stack.
- *
- * Runs in real Chromium. Goal: surface a measurable wall-clock delta that
- * synthetic counter probes (happy-dom + mountChild) miss. Specifically
- * targets the path where Pyreon's 9ms benchmark numbers come from — the
- * mount-pipeline + styler-resolve composition.
- *
- * Each test mounts N components, disposes, and reports median wall-clock
- * across 5 measured iterations after warmup. Variance ≤ 15% on stable runs.
- */
-import { h, type VNodeChild } from '@pyreon/core'
-import { mount } from '@pyreon/runtime-dom'
-import { flush, mountInBrowser } from '@pyreon/test-utils/browser'
-import { describe, expect, it } from 'vitest'
-import Element from '../Element/component'
-
-interface Bench {
-  median: number
-  min: number
-  max: number
-  runs: number[]
-}
-
-async function benchmark(N: number, mountFn: (root: Element, i: number) => () => void): Promise<Bench> {
-  const { container, unmount: cleanup } = mountInBrowser(h('div', { id: 'bench-root' }))
-  const root = container.querySelector('#bench-root')!
-
-  // Warmup — primes the styler sheet cache + GC any dead objects from prior runs.
-  for (let w = 0; w < 50; w++) {
-    const dispose = mountFn(root, w)
-    dispose()
-  }
-  await flush()
-
-  const runs: number[] = []
-  for (let r = 0; r < 5; r++) {
-    const t0 = performance.now()
-    const disposers: Array<() => void> = []
-    for (let i = 0; i < N; i++) disposers.push(mountFn(root, i))
-    for (const d of disposers) d()
-    runs.push(performance.now() - t0)
-    await flush()
-  }
-  cleanup()
-
-  const sorted = [...runs].sort((a, b) => a - b)
-  const median = sorted[2] as number
-  const min = sorted[0] as number
-  const max = sorted[4] as number
-  return { median, min, max, runs }
-}
-
-describe('Element + stack stress benchmark', () => {
-  it('500 bare Element mounts (mount + dispose, batched)', async () => {
-    const bench = await benchmark(500, (root, i) => mount(h(Element, null, `item-${i}`), root))
-    // oxlint-disable-next-line no-console
-    console.log(
-      `[stress] 500 bare Element: median=${bench.median.toFixed(2)}ms, runs=[${bench.runs.map((r) => r.toFixed(1)).join(', ')}]`,
-    )
-    expect(bench.median).toBeLessThan(200)
-  })
-
-  it('500 Element with css prop (exercises extendCss path)', async () => {
-    const bench = await benchmark(500, (root, i) =>
-      mount(
-        h(Element, { css: { color: 'red', padding: 8 } as unknown as Record<string, unknown> }, `item-${i}`),
-        root,
-      ),
-    )
-    // oxlint-disable-next-line no-console
-    console.log(
-      `[stress] 500 Element + css: median=${bench.median.toFixed(2)}ms, runs=[${bench.runs.map((r) => r.toFixed(1)).join(', ')}]`,
-    )
-    expect(bench.median).toBeLessThan(500)
-  })
-
-  it('depth-10 Element nesting × 50 mounts', async () => {
-    const buildDepth = (n: number, label: string): VNodeChild => {
-      if (n === 0) return label
-      return h(Element, null, buildDepth(n - 1, label))
-    }
-    const bench = await benchmark(50, (root, i) =>
-      mount(buildDepth(10, `leaf-${i}`) as unknown as Parameters<typeof mount>[0], root),
-    )
-    // oxlint-disable-next-line no-console
-    console.log(
-      `[stress] 50 depth-10: median=${bench.median.toFixed(2)}ms, runs=[${bench.runs.map((r) => r.toFixed(1)).join(', ')}]`,
-    )
-    expect(bench.median).toBeLessThan(500)
-  })
-
-  // Larger workload — clearer signal-to-noise. Mount + dispose 5000 elements.
-  it('5000 Element mounts — large workload, clearer wall-clock signal', async () => {
-    const bench = await benchmark(5000, (root, i) => mount(h(Element, null, `item-${i}`), root))
-    // oxlint-disable-next-line no-console
-    console.log(
-      `[stress] 5000 bare Element: median=${bench.median.toFixed(2)}ms, runs=[${bench.runs.map((r) => r.toFixed(1)).join(', ')}]`,
-    )
-    expect(bench.median).toBeLessThan(2000)
-  })
-
-  // One-shot single-tree mount: reflects real-app cold-mount cost.
-  it('single one-shot mount of a 500-Element tree', async () => {
-    const bench = await benchmark(1, (root) => {
-      const tree = h(
-        'div',
-        null,
-        ...Array.from({ length: 500 }, (_, i) => h(Element, null, `child-${i}`)),
-      )
-      return mount(tree, root)
-    })
-    // oxlint-disable-next-line no-console
-    console.log(
-      `[stress] 500-child tree mount: median=${bench.median.toFixed(2)}ms, runs=[${bench.runs.map((r) => r.toFixed(1)).join(', ')}]`,
-    )
-    expect(bench.median).toBeLessThan(1000)
-  })
-})

package/src/__tests__/positioning.test.ts

@@ -1,90 +0,0 @@
-import { afterEach, describe, expect, it } from 'vitest'
-import {
-  adjustForAncestor,
-  calcDropdownHorizontal,
-  calcDropdownVertical,
-  calcModalPos,
-} from '../Overlay/positioning'
-
-const rect = (top: number, left: number, width: number, height: number): DOMRect => ({
-  top,
-  left,
-  right: left + width,
-  bottom: top + height,
-  width,
-  height,
-  x: left,
-  y: top,
-  toJSON: () => ({ top, left, width, height }),
-})
-
-describe('positioning helpers — browser path (happy-dom)', () => {
-  it('calcDropdownVertical: fits below → positions under the trigger', () => {
-    const trigger = rect(100, 200, 80, 30) // top=100
-    const content = rect(0, 0, 60, 40)
-    const result = calcDropdownVertical(content, trigger, 'bottom', 'left', 0, 4)
-    expect(result.resolvedAlignY).toBe('bottom')
-    expect(result.pos.top).toBe(trigger.bottom + 4)
-  })
-
-  it('calcDropdownHorizontal: flips to right when left does not fit', () => {
-    const trigger = rect(100, 10, 80, 30) // near left edge
-    const content = rect(0, 0, 120, 40) // wider than trigger.left
-    const result = calcDropdownHorizontal(content, trigger, 'left', 'top', 0, 0)
-    expect(result.resolvedAlignX).toBe('right')
-  })
-
-  it('calcModalPos: centers horizontally and vertically', () => {
-    const content = rect(0, 0, 400, 300)
-    const pos = calcModalPos(content, 'center', 'center', 0, 0)
-    expect(typeof pos.left).toBe('number')
-    expect(typeof pos.top).toBe('number')
-  })
-
-  it('adjustForAncestor: subtracts ancestor offset from absolute positions', () => {
-    const adjusted = adjustForAncestor({ top: 100, left: 200 }, { top: 30, left: 50 })
-    expect(adjusted.top).toBe(70)
-    expect(adjusted.left).toBe(150)
-  })
-
-  it('adjustForAncestor: returns input unchanged when ancestor is origin', () => {
-    const input = { top: 10, left: 20 }
-    expect(adjustForAncestor(input, { top: 0, left: 0 })).toBe(input)
-  })
-})
-
-// SSR-fallback path: the positioning helpers are only reachable via mounted
-// event handlers in production, so `typeof window === 'undefined'` never
-// fires in browser tests. We force the fallback by stubbing `globalThis.window`
-// to `undefined` for the duration of a single test. happy-dom resets on
-// teardown; we restore the original window afterwards.
-describe('positioning helpers — SSR fallback (window undefined)', () => {
-  const realWindow = globalThis.window
-  const realWindowDesc = Object.getOwnPropertyDescriptor(globalThis, 'window')
-
-  afterEach(() => {
-    if (realWindowDesc) Object.defineProperty(globalThis, 'window', realWindowDesc)
-    else (globalThis as { window?: unknown }).window = realWindow
-  })
-
-  it('calcDropdownVertical returns alignment-preserving empty fallback', () => {
-    Object.defineProperty(globalThis, 'window', { value: undefined, configurable: true, writable: true })
-    const result = calcDropdownVertical(rect(0, 0, 60, 40), rect(100, 200, 80, 30), 'bottom', 'left', 0, 0)
-    expect(result.pos).toEqual({})
-    expect(result.resolvedAlignX).toBe('left')
-    expect(result.resolvedAlignY).toBe('bottom')
-  })
-
-  it('calcDropdownHorizontal returns alignment-preserving empty fallback', () => {
-    Object.defineProperty(globalThis, 'window', { value: undefined, configurable: true, writable: true })
-    const result = calcDropdownHorizontal(rect(0, 0, 60, 40), rect(100, 200, 80, 30), 'right', 'top', 0, 0)
-    expect(result.pos).toEqual({})
-    expect(result.resolvedAlignX).toBe('right')
-    expect(result.resolvedAlignY).toBe('top')
-  })
-
-  it('calcModalPos returns empty object', () => {
-    Object.defineProperty(globalThis, 'window', { value: undefined, configurable: true, writable: true })
-    expect(calcModalPos(rect(0, 0, 400, 300), 'center', 'center', 0, 0)).toEqual({})
-  })
-})