@pyreon/rocketstyle 0.24.4 → 0.24.6

package/src/__tests__/e2e-styler.test.ts

@@ -1,299 +0,0 @@
-/**
- * End-to-end test: rocketstyle theme computation pipeline.
- *
- * Tests that rocketstyle components correctly compute theme values
- * through the full chain: base theme → dimension themes → transform modifiers.
- *
- * Unlike the React version which tested CSS injection in the DOM,
- * this Pyreon version tests the computed $rocketstyle output directly.
- */
-import { ThemeCapture, getComputedTheme, initTestConfig, withThemeContext } from '@pyreon/test-utils'
-import rocketstyle from '../init'
-
-let cleanup: () => void
-beforeAll(() => {
-  cleanup = initTestConfig()
-})
-afterAll(() => cleanup())
-
-describe('e2e: rocketstyle theme computation', () => {
-  it('base theme values are passed through', () => {
-    const Comp: any = rocketstyle()({
-      name: 'BaseComp',
-      component: ThemeCapture,
-    }).theme({
-      backgroundColor: '#0070f3',
-      color: '#fff',
-    })
-
-    const theme = getComputedTheme(Comp)
-    expect(theme.backgroundColor).toBe('#0070f3')
-    expect(theme.color).toBe('#fff')
-  })
-
-  it('state dimension overrides base theme values', () => {
-    const Comp: any = rocketstyle()({
-      name: 'StateComp',
-      component: ThemeCapture,
-    })
-      .theme({
-        backgroundColor: '#0070f3',
-        color: '#fff',
-      })
-      .states({
-        danger: {
-          backgroundColor: '#dc3545',
-          color: '#fff',
-        },
-      })
-
-    const theme = getComputedTheme(Comp, { state: 'danger' })
-    expect(theme.backgroundColor).toBe('#dc3545')
-    expect(theme.color).toBe('#fff')
-  })
-
-  it('modifier transform derives styles from accumulated state theme', () => {
-    const Comp: any = rocketstyle()({
-      name: 'ModifierComp',
-      component: ThemeCapture,
-    })
-      .theme({
-        backgroundColor: '#0070f3',
-        color: '#fff',
-      })
-      .states({
-        danger: {
-          backgroundColor: '#dc3545',
-          color: '#fff',
-        },
-      })
-      .modifiers({
-        outlined: (accTheme: any) => ({
-          color: accTheme.backgroundColor,
-          backgroundColor: 'transparent',
-        }),
-      })
-
-    // danger state + outlined modifier
-    const theme = getComputedTheme(Comp, {
-      state: 'danger',
-      modifier: 'outlined',
-    })
-    // outlined should flip: color becomes the danger backgroundColor
-    expect(theme.color).toBe('#dc3545')
-    expect(theme.backgroundColor).toBe('transparent')
-  })
-
-  it('modifier without active state uses base theme only', () => {
-    const Comp: any = rocketstyle()({
-      name: 'ModifierBaseComp',
-      component: ThemeCapture,
-    })
-      .theme({
-        backgroundColor: '#0070f3',
-        color: '#fff',
-      })
-      .modifiers({
-        outlined: (accTheme: any) => ({
-          color: accTheme.backgroundColor,
-          backgroundColor: 'transparent',
-        }),
-      })
-
-    // just outlined modifier, no state — derive from base theme
-    const theme = getComputedTheme(Comp, { modifier: 'outlined' })
-    expect(theme.color).toBe('#0070f3')
-    expect(theme.backgroundColor).toBe('transparent')
-  })
-
-  it('variant dimension values are applied correctly', () => {
-    const Comp: any = rocketstyle()({
-      name: 'VariantComp',
-      component: ThemeCapture,
-    })
-      .theme({
-        backgroundColor: '#FFFFFF',
-        borderRadius: 8,
-      })
-      .variants({
-        box: {
-          height: 64,
-          padding: 8,
-          backgroundColor: 'transparent',
-        },
-        circle: {
-          width: 72,
-          height: 72,
-          padding: 4,
-          backgroundColor: '#F0F0F0',
-          borderRadius: 180,
-        },
-      })
-
-    const theme = getComputedTheme(Comp, { variant: 'circle' })
-    expect(theme.width).toBe(72)
-    expect(theme.height).toBe(72)
-    expect(theme.backgroundColor).toBe('#F0F0F0')
-    expect(theme.borderRadius).toBe(180)
-  })
-
-  it('variant box values override base theme', () => {
-    const Comp: any = rocketstyle()({
-      name: 'VariantBoxComp',
-      component: ThemeCapture,
-    })
-      .theme({
-        backgroundColor: '#FFFFFF',
-        borderRadius: 8,
-      })
-      .variants({
-        box: {
-          height: 64,
-          padding: 8,
-          backgroundColor: 'transparent',
-        },
-      })
-
-    const theme = getComputedTheme(Comp, { variant: 'box' })
-    expect(theme.backgroundColor).toBe('transparent')
-    expect(theme.borderRadius).toBe(8) // inherited from base
-    expect(theme.height).toBe(64)
-    expect(theme.padding).toBe(8)
-  })
-
-  it('size dimension values are applied', () => {
-    const Comp: any = rocketstyle()({
-      name: 'SizeComp',
-      component: ThemeCapture,
-    })
-      .theme({ fontSize: 14 })
-      .sizes({
-        small: { fontSize: 12, padding: 4 },
-        large: { fontSize: 18, padding: 8 },
-      })
-
-    const theme = getComputedTheme(Comp, { size: 'large' })
-    expect(theme.fontSize).toBe(18)
-    expect(theme.padding).toBe(8)
-  })
-
-  it('multiple dimensions combine', () => {
-    const Comp: any = rocketstyle()({
-      name: 'MultiDimComp',
-      component: ThemeCapture,
-    })
-      .theme({ color: 'black' })
-      .states({ primary: { color: 'blue' } })
-      .sizes({ large: { fontSize: 18 } })
-
-    const theme = getComputedTheme(Comp, {
-      state: 'primary',
-      size: 'large',
-    })
-    expect(theme.color).toBe('blue')
-    expect(theme.fontSize).toBe(18)
-  })
-
-  it('multiple modifier transforms compose sequentially', () => {
-    const Comp: any = rocketstyle()({
-      name: 'MultiModComp',
-      component: ThemeCapture,
-    })
-      .theme({ backgroundColor: 'blue', color: 'white' })
-      .modifiers({
-        outlined: (accTheme: any) => ({
-          color: accTheme.backgroundColor,
-          backgroundColor: 'transparent',
-        }),
-        rounded: () => ({ borderRadius: '999px' }),
-      })
-
-    const theme = getComputedTheme(Comp, {
-      modifier: ['outlined', 'rounded'],
-    })
-    expect(theme.color).toBe('blue')
-    expect(theme.backgroundColor).toBe('transparent')
-    expect(theme.borderRadius).toBe('999px')
-  })
-
-  it('later transform sees earlier transform results', () => {
-    const Comp: any = rocketstyle()({
-      name: 'ChainedModComp',
-      component: ThemeCapture,
-    })
-      .modifiers({
-        first: () => ({ step: 'one' }),
-        second: (accTheme: any) => ({ sawStep: accTheme.step }),
-      })
-
-    const theme = getComputedTheme(Comp, {
-      modifier: ['first', 'second'],
-    })
-    expect(theme.step).toBe('one')
-    expect(theme.sawStep).toBe('one')
-  })
-})
-
-// ── Reactive dimension props ──────────────────────────────────────────────────
-
-describe('reactive $rocketstyle accessor', () => {
-  it('$rocketstyleAccessor resolves different themes for different dimension props', () => {
-    const Comp: any = rocketstyle()({
-      name: 'ReactiveComp',
-      component: ThemeCapture,
-    })
-      .theme({ color: 'black', bg: 'white' })
-      .states({
-        primary: { color: 'blue' },
-        secondary: { color: 'green' },
-      })
-
-    // First call with state=primary
-    const theme1 = getComputedTheme(Comp, { state: 'primary' })
-    expect(theme1.color).toBe('blue')
-
-    // Second call with state=secondary — should produce different theme
-    const theme2 = getComputedTheme(Comp, { state: 'secondary' })
-    expect(theme2.color).toBe('green')
-  })
-
-  it('$rocketstyleAccessor is a function, not a plain object', () => {
-    const Comp: any = rocketstyle()({
-      name: 'AccessorComp',
-      component: ThemeCapture,
-    }).theme({ color: 'red' })
-
-    const vnode = withThemeContext(() => Comp({}))
-    // ThemeCapture resolves the accessor — result should be the theme object
-    expect(vnode.$rocketstyle).toBeDefined()
-    expect(vnode.$rocketstyle.color).toBe('red')
-  })
-
-  it('$rocketstateAccessor resolves active dimensions', () => {
-    const Comp: any = rocketstyle()({
-      name: 'StateAccessorComp',
-      component: ThemeCapture,
-    }).states({
-      primary: { color: 'blue' },
-    })
-
-    const vnode = withThemeContext(() => Comp({ state: 'primary' }))
-    expect(vnode.$rocketstate).toBeDefined()
-    expect(vnode.$rocketstate.state).toBe('primary')
-  })
-
-  it('mode change produces different theme via accessor', () => {
-    const Comp: any = rocketstyle()({
-      name: 'ModeReactiveComp',
-      component: ThemeCapture,
-    }).theme((t: any, m: any) => ({
-      color: m('light-color', 'dark-color'),
-    }))
-
-    const lightTheme = getComputedTheme(Comp, {}, { mode: 'light' })
-    expect(lightTheme.color).toBe('light-color')
-
-    const darkTheme = getComputedTheme(Comp, {}, { mode: 'dark' })
-    expect(darkTheme.color).toBe('dark-color')
-  })
-})

package/src/__tests__/hooks.test.ts

@@ -1,178 +0,0 @@
-import { popContext, pushContext } from '@pyreon/core'
-import { buildThemeContextMap } from '@pyreon/test-utils'
-import { localContext, useLocalContext } from '../context/localContext'
-import usePseudoState from '../hooks/usePseudoState'
-import useThemeAttrs from '../hooks/useTheme'
-
-describe('usePseudoState', () => {
-  it('returns initial state with all false', () => {
-    const { state } = usePseudoState({})
-    expect(state.hover).toBe(false)
-    expect(state.focus).toBe(false)
-    expect(state.pressed).toBe(false)
-  })
-
-  it('returns event handlers', () => {
-    const { events } = usePseudoState({})
-    expect(typeof events.onMouseEnter).toBe('function')
-    expect(typeof events.onMouseLeave).toBe('function')
-    expect(typeof events.onMouseDown).toBe('function')
-    expect(typeof events.onMouseUp).toBe('function')
-    expect(typeof events.onFocus).toBe('function')
-    expect(typeof events.onBlur).toBe('function')
-  })
-
-  it('sets hover on mouseEnter', () => {
-    const { state, events } = usePseudoState({})
-    events.onMouseEnter({} as any)
-    expect(state.hover).toBe(true)
-  })
-
-  it('clears hover and pressed on mouseLeave', () => {
-    const { state, events } = usePseudoState({})
-    events.onMouseEnter({} as any)
-    events.onMouseDown({} as any)
-    expect(state.hover).toBe(true)
-    expect(state.pressed).toBe(true)
-
-    events.onMouseLeave({} as any)
-    expect(state.hover).toBe(false)
-    expect(state.pressed).toBe(false)
-  })
-
-  it('sets pressed on mouseDown, clears on mouseUp', () => {
-    const { state, events } = usePseudoState({})
-    events.onMouseDown({} as any)
-    expect(state.pressed).toBe(true)
-
-    events.onMouseUp({} as any)
-    expect(state.pressed).toBe(false)
-  })
-
-  it('sets focus on focus, clears on blur', () => {
-    const { state, events } = usePseudoState({})
-    events.onFocus({} as any)
-    expect(state.focus).toBe(true)
-
-    events.onBlur({} as any)
-    expect(state.focus).toBe(false)
-  })
-
-  it('calls user-provided event handlers', () => {
-    const onMouseEnter = vi.fn()
-    const onMouseLeave = vi.fn()
-    const onMouseDown = vi.fn()
-    const onMouseUp = vi.fn()
-    const onFocus = vi.fn()
-    const onBlur = vi.fn()
-
-    const { events } = usePseudoState({
-      onMouseEnter,
-      onMouseLeave,
-      onMouseDown,
-      onMouseUp,
-      onFocus,
-      onBlur,
-    })
-
-    const mockEvent = {} as any
-    events.onMouseEnter(mockEvent)
-    events.onMouseLeave(mockEvent)
-    events.onMouseDown(mockEvent)
-    events.onMouseUp(mockEvent)
-    events.onFocus(mockEvent)
-    events.onBlur(mockEvent)
-
-    expect(onMouseEnter).toHaveBeenCalledWith(mockEvent)
-    expect(onMouseLeave).toHaveBeenCalledWith(mockEvent)
-    expect(onMouseDown).toHaveBeenCalledWith(mockEvent)
-    expect(onMouseUp).toHaveBeenCalledWith(mockEvent)
-    expect(onFocus).toHaveBeenCalledWith(mockEvent)
-    expect(onBlur).toHaveBeenCalledWith(mockEvent)
-  })
-})
-
-describe('useThemeAttrs', () => {
-  let pushed = false
-
-  afterEach(() => {
-    if (pushed) {
-      popContext()
-      pushed = false
-    }
-  })
-
-  it('returns default values when no context', () => {
-    const result = useThemeAttrs({ inversed: false })
-    expect(result.theme).toEqual({})
-    expect(result.mode).toBe('light')
-    expect(result.isLight).toBe(true)
-  })
-
-  it('reads theme from context', () => {
-    pushContext(buildThemeContextMap())
-    pushed = true
-
-    const result = useThemeAttrs({ inversed: false })
-    expect(result.theme).toEqual({ rootSize: 16 })
-    expect(result.mode).toBe('light')
-  })
-
-  it('inverts mode when inversed is true', () => {
-    pushContext(buildThemeContextMap())
-    pushed = true
-
-    const result = useThemeAttrs({ inversed: true })
-    expect(result.mode).toBe('dark')
-    expect(result.isDark).toBe(true)
-    expect(result.isLight).toBe(false)
-  })
-
-  it('inverts dark to light', () => {
-    pushContext(
-      buildThemeContextMap({
-        theme: {},
-        mode: 'dark',
-        isDark: true,
-        isLight: false,
-      }),
-    )
-    pushed = true
-
-    const result = useThemeAttrs({ inversed: true })
-    expect(result.mode).toBe('light')
-    expect(result.isDark).toBe(false)
-    expect(result.isLight).toBe(true)
-  })
-})
-
-describe('useLocalContext', () => {
-  let pushed = false
-
-  afterEach(() => {
-    if (pushed) {
-      popContext()
-      pushed = false
-    }
-  })
-
-  it('returns default pseudo when no consumer', () => {
-    const result = useLocalContext(null)
-    expect(result).toEqual({ pseudo: {} })
-  })
-
-  it('returns default pseudo when consumer is undefined', () => {
-    const result = useLocalContext(undefined)
-    expect(result).toEqual({ pseudo: {} })
-  })
-
-  it('calls consumer with getter function', () => {
-    pushContext(new Map([[localContext.id, { pseudo: { hover: true } }]]))
-    pushed = true
-
-    const consumer = (getter: any) => getter((ctx: any) => ({ myPseudo: ctx.pseudo }))
-
-    const result = useLocalContext(consumer)
-    expect(result.myPseudo).toEqual({ hover: true })
-  })
-})

package/src/__tests__/isRocketComponent.test.ts

@@ -1,48 +0,0 @@
-import isRocketComponent from '../isRocketComponent'
-
-describe('isRocketComponent', () => {
-  it('returns true for object with IS_ROCKETSTYLE property', () => {
-    const component = { IS_ROCKETSTYLE: true }
-    expect(isRocketComponent(component)).toBe(true)
-  })
-
-  it('returns false for plain object without IS_ROCKETSTYLE', () => {
-    expect(isRocketComponent({})).toBe(false)
-  })
-
-  it('returns false for null', () => {
-    expect(isRocketComponent(null)).toBe(false)
-  })
-
-  it('returns false for undefined', () => {
-    expect(isRocketComponent(undefined)).toBe(false)
-  })
-
-  it('returns false for primitives', () => {
-    expect(isRocketComponent('string')).toBe(false)
-    expect(isRocketComponent(42)).toBe(false)
-    expect(isRocketComponent(true)).toBe(false)
-  })
-
-  it('returns false for plain functions without IS_ROCKETSTYLE', () => {
-    expect(
-      isRocketComponent(() => {
-        /* no-op */
-      }),
-    ).toBe(false)
-  })
-
-  it('returns true for functions with IS_ROCKETSTYLE', () => {
-    const fn = () => {
-      /* no-op */
-    }
-    ;(fn as any).IS_ROCKETSTYLE = true
-    expect(isRocketComponent(fn)).toBe(true)
-  })
-
-  it('returns true even if IS_ROCKETSTYLE is falsy', () => {
-    // hasOwnProperty check only, doesn't check truthiness
-    const component = { IS_ROCKETSTYLE: false }
-    expect(isRocketComponent(component)).toBe(true)
-  })
-})

package/src/__tests__/memo-cap.test.ts

@@ -1,174 +0,0 @@
-/**
- * Regression: `_rsMemo` LRU cap was 32, which thrashed on real-world
- * high-cardinality workloads (data tables with state derived from row
- * data, design systems with many tokens × axes, dashboards rendering many
- * small interactive components). The rs-precompute spike (closed PR #761,
- * branch `spike/rocketstyle-precompute`) bisect-verified that a 60-unique-
- * tuple Button mount loop had 45% cache-miss rate at cap=32 (888 out of
- * 2000 lookups were cold resolves) and 46% wall-clock regression vs the
- * cap-fits-workload case.
- *
- * Fix: raise `RS_MEMO_CAP` from 32 to 128. Memory cost ~12KB per
- * definition per theme (128 × ~100 bytes) — negligible vs the wall-clock
- * win.
- *
- * This test locks the cap behavior via the counter contract: with N=64
- * unique state variants (above the OLD cap of 32, below the NEW cap of
- * 128), a two-pass cold-then-warm render loop must have ZERO cold
- * resolves on the warm pass. Pre-fix (cap=32): the warm pass would
- * re-cold-resolve any tuples the first pass had evicted (the oldest 32
- * of the 64). Post-fix (cap=128): all 64 fit, second pass is fully
- * cached.
- *
- * Bisect verification (run manually before merging):
- *   1. Revert `RS_MEMO_CAP` to 32 in rocketstyle.ts
- *   2. Run this test — both warm-pass assertions fail with "expected N to be 0"
- *   3. Restore cap to 128
- *   4. Run test — both pass
- */
-
-import { initTestConfig, withThemeContext } from '@pyreon/test-utils'
-import rocketstyle from '../init'
-
-let cleanup: () => void
-beforeAll(() => {
-  cleanup = initTestConfig()
-})
-afterAll(() => cleanup())
-
-// Lightweight counter sink — rocketstyle emits via `globalThis.__pyreon_count__`
-// without an import dep on @pyreon/perf-harness. We install our own sink to
-// observe the cold-resolve count.
-interface CounterGlobal {
-  __pyreon_count__?: ((name: string) => void) | undefined
-}
-function installCounter(): { snapshot: () => Record<string, number>; reset: () => void; uninstall: () => void } {
-  const counts: Record<string, number> = {}
-  const prev = (globalThis as CounterGlobal).__pyreon_count__
-  ;(globalThis as CounterGlobal).__pyreon_count__ = (name: string) => {
-    counts[name] = (counts[name] ?? 0) + 1
-  }
-  return {
-    snapshot: () => ({ ...counts }),
-    reset: () => {
-      for (const k of Object.keys(counts)) delete counts[k]
-    },
-    uninstall: () => {
-      ;(globalThis as CounterGlobal).__pyreon_count__ = prev
-    },
-  }
-}
-
-// Capture the rocketstyle theme accessor's resolved value so a render
-// actually invokes `_resolveRsEntry` (the function that emits the
-// `rocketstyle.getTheme` counter on cache miss and
-// `rocketstyle.dimensionMemo.hit` on cache hit).
-const ThemeCapture: any = ({ $rocketstyle, $rocketstate, ...rest }: any) => ({
-  type: 'div',
-  props: rest,
-  $rocketstyle: typeof $rocketstyle === 'function' ? $rocketstyle() : $rocketstyle,
-  $rocketstate: typeof $rocketstate === 'function' ? $rocketstate() : $rocketstate,
-})
-ThemeCapture.displayName = 'ThemeCapture'
-
-// Build N state variants in a single rocketstyle component. Each render
-// with a different `state` prop produces a different memo key.
-function makeHighCardinalityComponent(N: number): any {
-  const states: Record<string, { color: string }> = {}
-  for (let i = 0; i < N; i++) {
-    states[`s${i}`] = { color: `rgb(${i % 256}, 0, 0)` }
-  }
-  return rocketstyle()({
-    name: `HighCard${N}`,
-    component: ThemeCapture,
-  }).states(() => states)
-}
-
-describe('rocketstyle — _rsMemo LRU cap (regression PR #762)', () => {
-  it('warm pass over 64 unique tuples has ZERO cold resolves (cap >= 64)', () => {
-    const N = 64
-    const Comp: any = makeHighCardinalityComponent(N)
-    const counter = installCounter()
-
-    try {
-      // Cold pass — fills the memo with N entries.
-      for (let i = 0; i < N; i++) {
-        withThemeContext(() => Comp({ state: `s${i}` }))
-      }
-      const afterCold = counter.snapshot()
-      const coldGetTheme = afterCold['rocketstyle.getTheme'] ?? 0
-      // Sanity: cold pass must have ~N resolves (one per unique state).
-      expect(coldGetTheme).toBeGreaterThanOrEqual(N)
-
-      // Warm pass — same N tuples, in same order. With cap >= N, every
-      // lookup hits cache. Pre-fix (cap=32, N=64): the cold pass filled
-      // the memo and evicted the oldest 32 entries (entries 0..31),
-      // leaving entries 32..63 cached. The warm pass would re-cold-
-      // resolve entries 0..31 → 32 cold resolves. Post-fix (cap=128):
-      // 0 cold resolves on the warm pass.
-      counter.reset()
-      for (let i = 0; i < N; i++) {
-        withThemeContext(() => Comp({ state: `s${i}` }))
-      }
-      const afterWarm = counter.snapshot()
-      const warmColdGetTheme = afterWarm['rocketstyle.getTheme'] ?? 0
-      expect(warmColdGetTheme).toBe(0)
-    } finally {
-      counter.uninstall()
-    }
-  })
-
-  it('warm pass over 100 unique tuples has ZERO cold resolves (cap = 128)', () => {
-    // Second probe at the cap's effective boundary: 100 tuples is comfortably
-    // within the cap=128 limit. If the cap were anything less than 100,
-    // this would fail. The 64-vs-100 split lets a future bump (e.g. to 256)
-    // be detected at the boundary without rewriting tests.
-    const N = 100
-    const Comp: any = makeHighCardinalityComponent(N)
-    const counter = installCounter()
-
-    try {
-      for (let i = 0; i < N; i++) {
-        withThemeContext(() => Comp({ state: `s${i}` }))
-      }
-      const afterCold = counter.snapshot()
-      expect(afterCold['rocketstyle.getTheme'] ?? 0).toBeGreaterThanOrEqual(N)
-
-      counter.reset()
-      for (let i = 0; i < N; i++) {
-        withThemeContext(() => Comp({ state: `s${i}` }))
-      }
-      const afterWarm = counter.snapshot()
-      expect(afterWarm['rocketstyle.getTheme'] ?? 0).toBe(0)
-    } finally {
-      counter.uninstall()
-    }
-  })
-
-  it('cap still bounds growth — workload of 200 tuples DOES evict (cap < 200)', () => {
-    // Control: at workload > cap, the LRU SHOULD evict. This guards against
-    // an accidental "remove the cap entirely" change that would let the
-    // memo grow unbounded.
-    const N = 200
-    const Comp: any = makeHighCardinalityComponent(N)
-    const counter = installCounter()
-
-    try {
-      for (let i = 0; i < N; i++) {
-        withThemeContext(() => Comp({ state: `s${i}` }))
-      }
-      counter.reset()
-      // Re-render in same order: with cap=128, the cold pass kept entries
-      // 72..199 (last 128 of the 200), so the warm pass will re-resolve
-      // entries 0..71 → 72 cold resolves. Some non-zero number must
-      // appear; the exact value depends on insertion order.
-      for (let i = 0; i < N; i++) {
-        withThemeContext(() => Comp({ state: `s${i}` }))
-      }
-      const afterWarm = counter.snapshot()
-      expect(afterWarm['rocketstyle.getTheme'] ?? 0).toBeGreaterThan(0)
-    } finally {
-      counter.uninstall()
-    }
-  })
-})