@pyreon/rocketstyle 0.24.4 → 0.24.6

package/src/__tests__/minimal-theme.test.ts

@@ -1,62 +0,0 @@
-// Locks in the "one-size app" contract for the rocketstyle Provider's
-// Theme type. Pre-fix, `rootSize: number` was REQUIRED in the type at
-// `rocketstyle/src/context/context.ts` — passing a minimal theme without
-// rootSize was a TypeScript error even though it works fine at runtime
-// (enrichTheme defaults rootSize to 16, value() defaults rootSize to 16,
-// makeItResponsive short-circuits when breakpoints are empty).
-//
-// User report: "[breakpoints/rootSize] are used too directly". Even in
-// places where runtime tolerates undefined, an over-constrained TYPE
-// forces downstream consumers to either lie (`as any`) or pass dummy
-// values they don't actually need.
-//
-// This spec is a TYPE-LEVEL assertion via `// @ts-expect-error` flips.
-// The flip-positive case (minimal theme) is the regression contract; if
-// someone re-adds the required `rootSize: number` constraint, this file
-// FAILS to compile because the @ts-expect-error directives become dead.
-import type { TProvider } from '../context/context'
-
-describe('rocketstyle Provider — minimal theme typing', () => {
-  it('TYPE: theme with only colors (no rootSize, no breakpoints) is accepted', () => {
-    // Should NOT be a type error — this is the "one-size app" shape.
-    const props: TProvider = {
-      theme: { colors: { primary: '#228be6' } },
-      children: null,
-    }
-    expect(props.theme).toEqual({ colors: { primary: '#228be6' } })
-  })
-
-  it('TYPE: theme with breakpoints but no rootSize is accepted', () => {
-    const props: TProvider = {
-      theme: { breakpoints: { xs: 0, sm: 576 }, colors: { primary: '#228be6' } },
-      children: null,
-    }
-    expect(props.theme?.breakpoints).toEqual({ xs: 0, sm: 576 })
-  })
-
-  it('TYPE: theme with rootSize but no breakpoints is accepted', () => {
-    const props: TProvider = {
-      theme: { rootSize: 16, colors: { primary: '#228be6' } },
-      children: null,
-    }
-    expect(props.theme?.rootSize).toBe(16)
-  })
-
-  it('TYPE: full theme (rootSize + breakpoints) still accepted (backward compat)', () => {
-    const props: TProvider = {
-      theme: {
-        rootSize: 16,
-        breakpoints: { xs: 0, sm: 576, md: 768 },
-        colors: { primary: '#228be6' },
-      },
-      children: null,
-    }
-    expect(props.theme?.rootSize).toBe(16)
-    expect(props.theme?.breakpoints).toEqual({ xs: 0, sm: 576, md: 768 })
-  })
-
-  it('TYPE: omitting theme entirely is still accepted (was already optional)', () => {
-    const props: TProvider = { children: null }
-    expect(props.theme).toBeUndefined()
-  })
-})

package/src/__tests__/misc.test.ts

@@ -1,204 +0,0 @@
-import ThemeManager from '../cache/LocalThemeManager'
-import {
-  ALL_RESERVED_KEYS,
-  CONFIG_KEYS,
-  MODE_DEFAULT,
-  PSEUDO_KEYS,
-  PSEUDO_META_KEYS,
-  STATIC_KEYS,
-  STYLING_KEYS,
-  THEME_MODES,
-  THEME_MODES_INVERSED,
-} from '../constants'
-import BOOLEAN_TAGS from '../constants/booleanTags'
-import DEFAULT_DIMENSIONS from '../constants/defaultDimensions'
-import { createStaticsChainingEnhancers, createStaticsEnhancers } from '../utils/statics'
-import { calculateStyles } from '../utils/styles'
-
-describe('createStaticsChainingEnhancers', () => {
-  it('attaches chaining methods for dimension keys + static keys', () => {
-    const context: Record<string, any> = {}
-    const func = vi.fn()
-
-    createStaticsChainingEnhancers({
-      context,
-      dimensionKeys: ['states', 'sizes'],
-      func,
-      options: {} as any,
-    })
-
-    expect(typeof context.states).toBe('function')
-    expect(typeof context.sizes).toBe('function')
-    expect(typeof context.theme).toBe('function')
-    expect(typeof context.styles).toBe('function')
-    expect(typeof context.compose).toBe('function')
-  })
-
-  it('calls func with options and key-value pair', () => {
-    const context: Record<string, any> = {}
-    const func = vi.fn()
-    const options = { some: 'option' } as any
-
-    createStaticsChainingEnhancers({
-      context,
-      dimensionKeys: ['states'],
-      func,
-      options,
-    })
-
-    context.states({ primary: { color: 'red' } })
-    expect(func).toHaveBeenCalledWith(options, {
-      states: { primary: { color: 'red' } },
-    })
-  })
-})
-
-describe('createStaticsEnhancers', () => {
-  it('copies options to context', () => {
-    const context: Record<string, any> = {}
-    createStaticsEnhancers({ context, options: { foo: 'bar', baz: 42 } })
-    expect(context.foo).toBe('bar')
-    expect(context.baz).toBe(42)
-  })
-
-  it('does nothing when options is empty', () => {
-    const context: Record<string, any> = { existing: true }
-    createStaticsEnhancers({ context, options: {} })
-    expect(context).toEqual({ existing: true })
-  })
-
-  it('does nothing when options is undefined', () => {
-    const context: Record<string, any> = { existing: true }
-    createStaticsEnhancers({ context, options: undefined as any })
-    expect(context).toEqual({ existing: true })
-  })
-})
-
-describe('calculateStyles', () => {
-  it('returns empty array when styles is undefined', () => {
-    expect(calculateStyles(undefined)).toEqual([])
-  })
-
-  it('evaluates each style callback', () => {
-    const styleFn1 = () => 'style1'
-    const styleFn2 = () => 'style2'
-    const result = calculateStyles([styleFn1, styleFn2] as any)
-    expect(result).toHaveLength(2)
-    expect(result[0]).toBe('style1')
-    expect(result[1]).toBe('style2')
-  })
-
-  it('returns empty array for empty styles array', () => {
-    const result = calculateStyles([])
-    expect(result).toEqual([])
-  })
-})
-
-describe('ThemeManager', () => {
-  it('creates instance with WeakMap caches', () => {
-    const tm = new ThemeManager()
-    expect(tm.baseTheme).toBeInstanceOf(WeakMap)
-    expect(tm.dimensionsThemes).toBeInstanceOf(WeakMap)
-    expect(tm.modeBaseTheme.light).toBeInstanceOf(WeakMap)
-    expect(tm.modeBaseTheme.dark).toBeInstanceOf(WeakMap)
-    expect(tm.modeDimensionTheme.light).toBeInstanceOf(WeakMap)
-    expect(tm.modeDimensionTheme.dark).toBeInstanceOf(WeakMap)
-  })
-
-  it('caches and retrieves values', () => {
-    const tm = new ThemeManager()
-    const key = {}
-    tm.baseTheme.set(key, { color: 'red' })
-    expect(tm.baseTheme.get(key)).toEqual({ color: 'red' })
-  })
-
-  it('mode caches are independent', () => {
-    const tm = new ThemeManager()
-    const key = {}
-    tm.modeBaseTheme.light.set(key, 'light-theme')
-    tm.modeBaseTheme.dark.set(key, 'dark-theme')
-    expect(tm.modeBaseTheme.light.get(key)).toBe('light-theme')
-    expect(tm.modeBaseTheme.dark.get(key)).toBe('dark-theme')
-  })
-})
-
-describe('constants', () => {
-  it('MODE_DEFAULT is light', () => {
-    expect(MODE_DEFAULT).toBe('light')
-  })
-
-  it('PSEUDO_KEYS', () => {
-    expect(PSEUDO_KEYS).toEqual(['hover', 'active', 'focus', 'pressed'])
-  })
-
-  it('PSEUDO_META_KEYS', () => {
-    expect(PSEUDO_META_KEYS).toEqual(['disabled', 'readOnly'])
-  })
-
-  it('THEME_MODES', () => {
-    expect(THEME_MODES.light).toBe(true)
-    expect(THEME_MODES.dark).toBe(true)
-  })
-
-  it('THEME_MODES_INVERSED', () => {
-    expect(THEME_MODES_INVERSED.light).toBe('dark')
-    expect(THEME_MODES_INVERSED.dark).toBe('light')
-  })
-
-  it('CONFIG_KEYS includes expected keys', () => {
-    expect(CONFIG_KEYS).toContain('provider')
-    expect(CONFIG_KEYS).toContain('consumer')
-    expect(CONFIG_KEYS).toContain('name')
-    expect(CONFIG_KEYS).toContain('component')
-    expect(CONFIG_KEYS).toContain('inversed')
-    expect(CONFIG_KEYS).toContain('passProps')
-    expect(CONFIG_KEYS).toContain('styled')
-    expect(CONFIG_KEYS).toContain('DEBUG')
-  })
-
-  it('STYLING_KEYS', () => {
-    expect(STYLING_KEYS).toEqual(['theme', 'styles'])
-  })
-
-  it('STATIC_KEYS includes styling keys and compose', () => {
-    expect(STATIC_KEYS).toContain('theme')
-    expect(STATIC_KEYS).toContain('styles')
-    expect(STATIC_KEYS).toContain('compose')
-  })
-
-  it('ALL_RESERVED_KEYS includes mode keys and others', () => {
-    expect(ALL_RESERVED_KEYS).toContain('light')
-    expect(ALL_RESERVED_KEYS).toContain('dark')
-    expect(ALL_RESERVED_KEYS).toContain('attrs')
-    expect(ALL_RESERVED_KEYS).toContain('theme')
-    expect(ALL_RESERVED_KEYS).toContain('compose')
-  })
-})
-
-describe('DEFAULT_DIMENSIONS', () => {
-  it('has states, sizes, variants, multiple', () => {
-    expect(DEFAULT_DIMENSIONS.states).toBe('state')
-    expect(DEFAULT_DIMENSIONS.sizes).toBe('size')
-    expect(DEFAULT_DIMENSIONS.variants).toBe('variant')
-    expect(DEFAULT_DIMENSIONS.multiple).toEqual({
-      propName: 'multiple',
-      multi: true,
-    })
-  })
-})
-
-describe('BOOLEAN_TAGS', () => {
-  it('is an array of HTML boolean attributes', () => {
-    expect(Array.isArray(BOOLEAN_TAGS)).toBe(true)
-    expect(BOOLEAN_TAGS).toContain('disabled')
-    expect(BOOLEAN_TAGS).toContain('checked')
-    expect(BOOLEAN_TAGS).toContain('readOnly')
-    expect(BOOLEAN_TAGS).toContain('required')
-    expect(BOOLEAN_TAGS).toContain('hidden')
-    expect(BOOLEAN_TAGS).toContain('autoFocus')
-  })
-
-  it('has more than 20 entries', () => {
-    expect(BOOLEAN_TAGS.length).toBeGreaterThan(20)
-  })
-})

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

@@ -1,9 +0,0 @@
-import { isNativeCompat } from '@pyreon/core'
-import { describe, expect, it } from 'vitest'
-import RocketstyleProvider from '../context/context'
-
-describe('native-compat marker — @pyreon/rocketstyle', () => {
-  it('Provider is marked native', () => {
-    expect(isNativeCompat(RocketstyleProvider)).toBe(true)
-  })
-})

package/src/__tests__/providerConsumer.test.ts

@@ -1,183 +0,0 @@
-import { popContext, pushContext } from '@pyreon/core'
-import {
-  BaseComponent,
-  buildThemeContextMap,
-  initTestConfig,
-  withThemeContext,
-} from '@pyreon/test-utils'
-import rocketstyle from '../init'
-
-let cleanup: () => void
-beforeAll(() => {
-  cleanup = initTestConfig()
-})
-afterAll(() => cleanup())
-
-/** Child component that reads consumer context */
-const ChildComponent: any = ({
-  children,
-  $rocketstyle,
-  $rocketstate,
-  parentHover,
-  ...rest
-}: any) => ({
-  type: 'div',
-  props: { ...rest, 'data-parent-hover': parentHover ?? 'none' },
-  children,
-})
-ChildComponent.displayName = 'ChildComponent'
-
-// --------------------------------------------------------
-// Provider/Consumer integration
-// --------------------------------------------------------
-describe('Provider/Consumer integration', () => {
-  describe('provider component', () => {
-    it('renders with provider: true', () => {
-      const ParentButton: any = rocketstyle()({
-        name: 'ProviderButton',
-        component: BaseComponent,
-      }).config({ provider: true })
-
-      const result = withThemeContext(() => ParentButton({ children: 'Child' }))
-      expect(result).toBeDefined()
-    })
-
-    it('detects pseudo-state via $rocketstate on provider', () => {
-      const ParentButton: any = rocketstyle()({
-        name: 'HoverProvider',
-        component: BaseComponent,
-      }).config({ provider: true })
-
-      const result = withThemeContext(() => ParentButton({ children: 'Child' }))
-      // Provider wraps with createLocalProvider which injects pseudo state
-      // Initial state should be false
-      expect(result.props['data-hover']).toBe('false')
-      expect(result.props['data-focus']).toBe('false')
-      expect(result.props['data-pressed']).toBe('false')
-    })
-  })
-
-  describe('consumer component', () => {
-    it('consumer receives pseudo-state from provider context', () => {
-      const Parent: any = rocketstyle()({
-        name: 'ParentProvider',
-        component: BaseComponent,
-      }).config({ provider: true })
-
-      const Child: any = rocketstyle()({
-        name: 'ChildConsumer',
-        component: ChildComponent,
-      }).config({
-        consumer: (ctx: any) =>
-          ctx((rawCtx: any) => ({
-            parentHover: rawCtx?.pseudo?.hover ? 'yes' : 'no',
-          })),
-      })
-
-      // Render parent, then render child within the same context
-      withThemeContext(() => {
-        const _parentResult = Parent({ children: null })
-        // The parent pushes local context — child should see it
-        const childResult = Child({})
-        expect(childResult).toBeDefined()
-        const childProps = childResult?.props ?? childResult
-        expect(childProps['data-parent-hover']).toBe('no')
-      })
-    })
-
-    it('consumer without provider returns default pseudo', () => {
-      const Child: any = rocketstyle()({
-        name: 'OrphanConsumer',
-        component: ChildComponent,
-      }).config({
-        consumer: (ctx: any) =>
-          ctx((rawCtx: any) => ({
-            parentHover: rawCtx?.pseudo?.hover ? 'yes' : 'no',
-          })),
-      })
-
-      const result = withThemeContext(() => Child({}))
-      const props = result?.props ?? result
-      expect(props['data-parent-hover']).toBe('no')
-    })
-
-    it('component without consumer ignores provider context', () => {
-      const Parent: any = rocketstyle()({
-        name: 'IgnoredProvider',
-        component: BaseComponent,
-      }).config({ provider: true })
-
-      const Child: any = rocketstyle()({
-        name: 'NoConsumer',
-        component: BaseComponent,
-      }).config({})
-
-      withThemeContext(() => {
-        Parent({ children: null })
-        const childResult = Child({})
-        expect(childResult).toBeDefined()
-      })
-    })
-  })
-
-  describe('theme mode', () => {
-    it('light mode is default', () => {
-      const Button: any = rocketstyle()({
-        name: 'LightButton',
-        component: BaseComponent,
-      }).config({})
-
-      const result = withThemeContext(() => Button({}))
-      expect(result).toBeDefined()
-    })
-
-    it('dark mode is passed through Provider', () => {
-      const Button: any = rocketstyle()({
-        name: 'DarkButton',
-        component: BaseComponent,
-      }).config({})
-
-      pushContext(
-        buildThemeContextMap({ mode: 'dark', isDark: true, isLight: false }),
-      )
-      try {
-        const result = Button({})
-        expect(result).toBeDefined()
-      } finally {
-        popContext()
-      }
-    })
-
-    it('inversed config flips the mode', () => {
-      const Button: any = rocketstyle()({
-        name: 'InversedButton',
-        component: BaseComponent,
-      }).config({ inversed: true })
-
-      const result = withThemeContext(() => Button({}))
-      expect(result).toBeDefined()
-    })
-  })
-
-  describe('nested providers', () => {
-    it('supports nested provider components', () => {
-      const Outer: any = rocketstyle()({
-        name: 'OuterProvider',
-        component: BaseComponent,
-      }).config({ provider: true })
-
-      const Inner: any = rocketstyle()({
-        name: 'InnerProvider',
-        component: BaseComponent,
-      }).config({ provider: true })
-
-      withThemeContext(() => {
-        const outerResult = Outer({ children: null })
-        expect(outerResult).toBeDefined()
-
-        const innerResult = Inner({ children: null })
-        expect(innerResult).toBeDefined()
-      })
-    })
-  })
-})

package/src/__tests__/reactive-props-preservation.test.ts

@@ -1,195 +0,0 @@
-/**
- * Reactive-prop preservation through the rocketstyle pipeline.
- *
- * Catches the bug class where rocketstyle's HOC + EnhancedComponent
- * COPIED getter-shaped reactive props via value-read + value-write,
- * collapsing the reactive subscription to a static value before the
- * inner component ever saw it. Every downstream JSX accessor reading
- * `props.x` would then see the captured-once value, not the live signal.
- *
- * The contract: `_rp`-branded thunks converted to getter properties by
- * `makeReactiveProps` MUST flow through the rocketstyle pipeline with
- * their getter descriptor intact. Two preservation points:
- *
- *   1. `removeUndefinedProps` — first call site in the attrs HOC
- *   2. `mergeDescriptors` — replaces the `{ ...A, ...B }` spreads in
- *      the attrs HOC + EnhancedComponent's mergeProps
- *
- * If either is reverted to value-copying, these tests fail with the
- * specific failure-mode the production bug exhibits: the consumer
- * reads `props.href` and gets the resolved-once value rather than a
- * getter that fires the underlying signal on every read.
- *
- * Bisect-verified per layer in the PR — see PR description.
- */
-
-import { mergeDescriptors, removeUndefinedProps } from '../utils/attrs'
-
-describe('removeUndefinedProps — getter preservation', () => {
-  it('preserves a getter descriptor through the filter (live read)', () => {
-    let calls = 0
-    const source = {} as Record<string, unknown>
-    Object.defineProperty(source, 'href', {
-      get() {
-        calls++
-        return `https://example.com/page-${calls}`
-      },
-      enumerable: true,
-      configurable: true,
-    })
-
-    const filtered = removeUndefinedProps(source)
-
-    // Filter must NOT have fired the getter during the copy step —
-    // the live reactive read should happen at downstream consumption.
-    expect(calls).toBe(0)
-
-    // Each read fires the getter again, proving the descriptor flowed through.
-    expect(filtered.href).toBe('https://example.com/page-1')
-    expect(filtered.href).toBe('https://example.com/page-2')
-    expect(filtered.href).toBe('https://example.com/page-3')
-  })
-
-  it('still strips data properties with undefined values', () => {
-    const result = removeUndefinedProps({ a: 1, b: undefined, c: 'x' })
-    expect(result).toEqual({ a: 1, c: 'x' })
-    expect('b' in result).toBe(false)
-  })
-
-  it('preserves null / falsy non-undefined data values (existing contract)', () => {
-    const result = removeUndefinedProps({ a: null, b: 0, c: '', d: false })
-    expect(result).toEqual({ a: null, b: 0, c: '', d: false })
-  })
-
-  it('keeps a getter even though we cannot peek into it (undefined-filter inapplicable)', () => {
-    // A getter whose initial fire would return undefined still survives —
-    // we can't safely peek without firing the subscription. If the
-    // downstream consumer fires it and gets undefined, that's their
-    // semantic; rocketstyle stays out of the way.
-    let val: unknown = undefined
-    const source = {} as Record<string, unknown>
-    Object.defineProperty(source, 'href', {
-      get: () => val,
-      enumerable: true,
-      configurable: true,
-    })
-
-    const filtered = removeUndefinedProps(source)
-    expect('href' in filtered).toBe(true)
-    expect(filtered.href).toBeUndefined()
-
-    val = 'http://example.com'
-    expect(filtered.href).toBe('http://example.com')
-  })
-})
-
-describe('mergeDescriptors — getter preservation through merge', () => {
-  it('preserves getter descriptors from any source position (later wins)', () => {
-    const a = { plain: 'A.plain' } as Record<string, unknown>
-    let bCalls = 0
-    Object.defineProperty(a, 'shared', {
-      value: 'A.shared',
-      enumerable: true,
-      configurable: true,
-      writable: true,
-    })
-
-    const b = {} as Record<string, unknown>
-    Object.defineProperty(b, 'href', {
-      get: () => {
-        bCalls++
-        return `b-${bCalls}`
-      },
-      enumerable: true,
-      configurable: true,
-    })
-    Object.defineProperty(b, 'shared', {
-      get: () => 'B.shared',
-      enumerable: true,
-      configurable: true,
-    })
-
-    const merged = mergeDescriptors(a, b)
-
-    // Plain value from A survives.
-    expect(merged.plain).toBe('A.plain')
-
-    // Getter from B survives and is live (no fire at merge time).
-    expect(bCalls).toBe(0)
-    expect(merged.href).toBe('b-1')
-    expect(merged.href).toBe('b-2')
-
-    // Later source wins — B's getter for 'shared' replaced A's data value.
-    expect(merged.shared).toBe('B.shared')
-  })
-
-  it('skips null/undefined sources without breaking the chain', () => {
-    const a = { x: 1 }
-    const b = { y: 2 }
-    expect(mergeDescriptors(a, null, b, undefined)).toEqual({ x: 1, y: 2 })
-  })
-
-  it('returns empty object for no sources', () => {
-    expect(mergeDescriptors()).toEqual({})
-  })
-
-  it('a plain spread WOULD fire getters — descriptor merge does not (regression catcher)', () => {
-    // This test specifically catches the value-spread regression. If
-    // mergeDescriptors is replaced with `Object.assign(target, ...sources)`
-    // or `{ ...A, ...B }`, getter calls happen at merge time and this
-    // test fails with `expect(calls).toBe(0)` -> got >= 1.
-    let calls = 0
-    const source = {} as Record<string, unknown>
-    Object.defineProperty(source, 'href', {
-      get: () => {
-        calls++
-        return 'value'
-      },
-      enumerable: true,
-      configurable: true,
-    })
-
-    const merged = mergeDescriptors({}, source)
-    expect(calls).toBe(0)
-
-    // Sanity — descriptor IS there and works on read.
-    expect(merged.href).toBe('value')
-    expect(calls).toBe(1)
-  })
-})
-
-describe('end-to-end pipeline — getter survives the rocketstyle hop chain', () => {
-  it('reactive prop flows through removeUndefinedProps + mergeDescriptors without firing the getter', () => {
-    // Synthesises the exact pipeline shape in rocketstyleAttrsHoc.ts
-    // (removeUndefinedProps + mergeDescriptors twice). Confirms the
-    // combined transformation preserves reactivity end-to-end.
-    let calls = 0
-    const inputProps = {} as Record<string, unknown>
-    Object.defineProperty(inputProps, 'href', {
-      get: () => {
-        calls++
-        return `live-${calls}`
-      },
-      enumerable: true,
-      configurable: true,
-    })
-    inputProps.size = 'large' // plain value
-
-    // Step 1 (HOC): filter undefined, preserve getter.
-    const filtered = removeUndefinedProps(inputProps)
-    expect(calls).toBe(0)
-
-    // Step 2 (HOC): inner merge for attrs callback input.
-    const innerMerge = mergeDescriptors({ tag: 'a' }, filtered)
-    expect(calls).toBe(0)
-
-    // Step 3 (HOC): final merge before wrapped-component handoff.
-    const finalProps = mergeDescriptors({}, { tag: 'a' }, filtered)
-    expect(calls).toBe(0)
-
-    // Now the wrapped-component consumer reads — getter fires once per read.
-    expect(finalProps.href).toBe('live-1')
-    expect(finalProps.size).toBe('large')
-    expect(innerMerge.href).toBe('live-2')
-  })
-})