@pyreon/rocketstyle 0.15.0 → 0.18.0

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

@@ -0,0 +1,195 @@
+/**
+ * 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')
+  })
+})

package/src/__tests__/rocketstyle.browser.test.tsx

@@ -95,6 +95,152 @@ describe('@pyreon/rocketstyle in real browser', () => {
     unmount()
   })
 
+  // Bug 3 audit: derivation chain matching the real bokisch.com bug shape.
+  //
+  // Library defines a base `Text` component with `.styles(({css}) => css\`color:
+  // ${$rocketstyle.color}\`)` — the .styles() callback reads $rocketstyle.color.
+  // Library also defines `.theme({color: 'black'})` as the default.
+  //
+  // Consumer derives a sub-component: `Text.theme((t, m) => ({color: m('red',
+  // 'blue')}))` — adds NEW .theme() but does NOT call .styles() again. The
+  // derivation should INHERIT the base's .styles() and have it consume the
+  // new .theme() values, with mode toggling re-rendering correctly.
+  //
+  // The user's report: components in this chain keep stale colors on
+  // theme toggle. Test verifies whether the derivation chain actually
+  // wires up reactively.
+  it('Bug 3 repro: rocketstyle derivation chain — inherited .styles() + new .theme() reacts to mode', async () => {
+    const modeSig = signal<'light' | 'dark'>('light')
+
+    // Library base — has .styles() that reads $rocketstyle.color.
+    const TextBase: any = rocketstyle()({
+      name: 'TextBase',
+      component: Base,
+    })
+      .styles(
+        (css: any) => css`
+          color: ${({ $rocketstyle }: any) => $rocketstyle.color};
+        `,
+      )
+      .theme({ color: 'rgb(0, 128, 0)' }) // green default
+
+    // Consumer derivation — only adds .theme(), no .styles() override.
+    const Text: any = TextBase
+      .theme((_t: any, m: any) => ({
+        color: m('rgb(255, 0, 0)', 'rgb(0, 0, 255)'),
+      }))
+
+    const { container, unmount } = mountInBrowser(
+      h(PyreonUI, { theme: {}, mode: modeSig }, h(Text, { id: 'derive' })),
+    )
+
+    const el = container.querySelector<HTMLElement>('#derive')!
+    const initialColor = getComputedStyle(el).color
+
+    modeSig.set('dark')
+    await new Promise((r) => setTimeout(r, 0))
+    await new Promise((r) => requestAnimationFrame(() => r(undefined)))
+
+    const darkColor = getComputedStyle(el).color
+
+    // Diagnostic: log both colors for clarity, regardless of pass/fail
+    // (helps triage whether the bug is "no .theme() applied at all" vs
+    // "applied but doesn't react to mode toggle").
+    if (initialColor === 'rgb(255, 0, 0)' && darkColor === 'rgb(0, 0, 255)') {
+      // Works correctly — derivation chain wires up reactively
+      expect(darkColor).toBe('rgb(0, 0, 255)')
+    } else {
+      throw new Error(
+        `[bug-3-repro] derivation chain failed. initial=${initialColor}, dark=${darkColor}. ` +
+          `Expected initial=rgb(255, 0, 0), dark=rgb(0, 0, 255). ` +
+          `Possible causes: (a) .theme() override silently dropped, ` +
+          `(b) .styles() not inherited from base, ` +
+          `(c) mode toggle doesn't propagate.`,
+      )
+    }
+    unmount()
+  })
+
+  // Bug 3 audit (continued): derivation chain WITH dimension props.
+  // Real consumer pattern: `<Text base paragraph centered>` uses
+  // dimension-prop values from .sizes()/.variants(). Tests that mode
+  // toggle still propagates when dimension props are active.
+  it('Bug 3 repro: derivation + dimension props + mode toggle', async () => {
+    const modeSig = signal<'light' | 'dark'>('light')
+
+    const TextBase: any = rocketstyle()({ name: 'TextBaseDim', component: Base })
+      .styles(
+        (css: any) => css`
+          color: ${({ $rocketstyle }: any) => $rocketstyle.color};
+          font-size: ${({ $rocketstyle }: any) => $rocketstyle.fontSize};
+        `,
+      )
+      .theme({ color: 'rgb(0, 0, 0)', fontSize: '14px' })
+      .sizes({
+        small: { fontSize: '12px' },
+        large: { fontSize: '20px' },
+      })
+
+    // Consumer derivation: theme override that depends on mode
+    const Text: any = TextBase.theme((_t: any, m: any) => ({
+      color: m('rgb(255, 0, 0)', 'rgb(0, 0, 255)'),
+    }))
+
+    const { container, unmount } = mountInBrowser(
+      h(PyreonUI, { theme: {}, mode: modeSig },
+        h(Text, { id: 'dim', size: 'large' }),
+      ),
+    )
+    const el = container.querySelector<HTMLElement>('#dim')!
+    expect(getComputedStyle(el).color).toBe('rgb(255, 0, 0)')
+    expect(getComputedStyle(el).fontSize).toBe('20px')
+
+    modeSig.set('dark')
+    await new Promise((r) => setTimeout(r, 0))
+    await new Promise((r) => requestAnimationFrame(() => r(undefined)))
+
+    expect(getComputedStyle(el).color).toBe('rgb(0, 0, 255)')
+    expect(getComputedStyle(el).fontSize).toBe('20px') // dimension unchanged
+    unmount()
+  })
+
+  // Bug 3 audit (continued): DOUBLE derivation — Text → TextStyled → consumer.
+  // Tests whether mode reactivity survives a multi-level chain.
+  it('Bug 3 repro: double-derivation chain still reacts to mode', async () => {
+    const modeSig = signal<'light' | 'dark'>('light')
+
+    const TextBase: any = rocketstyle()({ name: 'DoubleTextBase', component: Base })
+      .styles(
+        (css: any) => css`
+          color: ${({ $rocketstyle }: any) => $rocketstyle.color};
+        `,
+      )
+      .theme({ color: 'rgb(0, 0, 0)' })
+
+    // First derivation — adds states (no theme override yet)
+    const TextStyled: any = TextBase.states({
+      muted: { color: 'rgb(128, 128, 128)' },
+    })
+
+    // Second derivation — mode-aware theme
+    const Text: any = TextStyled.theme((_t: any, m: any) => ({
+      color: m('rgb(255, 0, 0)', 'rgb(0, 0, 255)'),
+    }))
+
+    const { container, unmount } = mountInBrowser(
+      h(PyreonUI, { theme: {}, mode: modeSig }, h(Text, { id: 'dbl' })),
+    )
+    const el = container.querySelector<HTMLElement>('#dbl')!
+    expect(getComputedStyle(el).color).toBe('rgb(255, 0, 0)')
+
+    modeSig.set('dark')
+    await new Promise((r) => setTimeout(r, 0))
+    await new Promise((r) => requestAnimationFrame(() => r(undefined)))
+
+    expect(getComputedStyle(el).color).toBe('rgb(0, 0, 255)')
+    unmount()
+  })
+
   it('the `variant` prop layers on top of state', () => {
     const Box: any = rocketstyle()({ name: 'VariantBox', component: Base })
       .styles(
@@ -168,6 +314,81 @@ describe('@pyreon/rocketstyle in real browser', () => {
     dark.unmount()
   })
 
+  // Bug 5 repro: cache-key collision under `useBooleans: true`.
+  //
+  // The user-facing bug shape: `<Btn primary />` and `<Btn secondary />`
+  // both render with the FIRST cached variant's resolved styles. Pre-fix
+  // the dimension-prop memo built its key from raw `propsRec[dimName]`
+  // BEFORE _calculateStylingAttrs resolved the boolean shorthand, so all
+  // boolean variants on the same dimension had `propsRec.state === undefined`
+  // and collided. Real-app symptom: a button group where primary, secondary,
+  // and danger variants all render in the FIRST color the user clicked.
+  //
+  // Real-Chromium proof: mounts both variants in parallel and asserts
+  // `getComputedStyle().color` is different. happy-dom's class-based
+  // assertions wouldn't catch this — only real CSS resolution proves
+  // the styler classCache served different cached styles for each variant.
+  it('Bug 5 repro: useBooleans:true with multiple boolean variants render with distinct computed styles', () => {
+    const Btn: any = rocketstyle({ useBooleans: true })({
+      name: 'BoolBtn',
+      component: Base,
+    })
+      .styles(
+        (css: any) => css`
+          color: ${({ $rocketstyle }: any) => $rocketstyle.color};
+        `,
+      )
+      .theme({ color: 'rgb(0, 0, 0)' })
+      .states({
+        primary: { color: 'rgb(255, 0, 0)' },
+        secondary: { color: 'rgb(0, 255, 0)' },
+        danger: { color: 'rgb(0, 0, 255)' },
+      })
+
+    const primaryMount = mountInBrowser(h(Btn, { id: 'p', primary: true }))
+    const secondaryMount = mountInBrowser(h(Btn, { id: 's', secondary: true }))
+    const dangerMount = mountInBrowser(h(Btn, { id: 'd', danger: true }))
+
+    const primaryEl = primaryMount.container.querySelector<HTMLElement>('#p')!
+    const secondaryEl = secondaryMount.container.querySelector<HTMLElement>('#s')!
+    const dangerEl = dangerMount.container.querySelector<HTMLElement>('#d')!
+
+    // Without the fix: all three resolve to whichever variant was cached
+    // first under the colliding key (mode|undefined|...). With the fix:
+    // each gets its own cache entry keyed off the resolved state value.
+    expect(getComputedStyle(primaryEl).color).toBe('rgb(255, 0, 0)')
+    expect(getComputedStyle(secondaryEl).color).toBe('rgb(0, 255, 0)')
+    expect(getComputedStyle(dangerEl).color).toBe('rgb(0, 0, 255)')
+
+    // Sibling mount under the SAME PyreonUI provider — exercises the
+    // cross-instance shared memo (per-theme WeakMap entry). Pre-fix this
+    // was the actual real-app shape: button group children mounted under
+    // a single provider, all hitting the same colliding key.
+    const groupMount = mountInBrowser(
+      h(PyreonUI, { theme: {}, mode: 'light' },
+        h('div', { id: 'group' },
+          h(Btn, { id: 'g-primary', primary: true }),
+          h(Btn, { id: 'g-secondary', secondary: true }),
+          h(Btn, { id: 'g-danger', danger: true }),
+        ),
+      ),
+    )
+    expect(
+      getComputedStyle(groupMount.container.querySelector<HTMLElement>('#g-primary')!).color,
+    ).toBe('rgb(255, 0, 0)')
+    expect(
+      getComputedStyle(groupMount.container.querySelector<HTMLElement>('#g-secondary')!).color,
+    ).toBe('rgb(0, 255, 0)')
+    expect(
+      getComputedStyle(groupMount.container.querySelector<HTMLElement>('#g-danger')!).color,
+    ).toBe('rgb(0, 0, 255)')
+
+    primaryMount.unmount()
+    secondaryMount.unmount()
+    dangerMount.unmount()
+    groupMount.unmount()
+  })
+
   it('multiple instances share definition-scoped caches (no per-mount rebuild)', () => {
     // Verifies the perf optimization: getDimensionsMap, reservedPropNames keys,
     // and omit Sets are cached at definition time (WeakMap), not rebuilt per mount.
@@ -203,4 +424,58 @@ describe('@pyreon/rocketstyle in real browser', () => {
 
     for (const inst of instances) inst.unmount()
   })
+
+  it('reactive prop flips reach the rendered DOM through the rocketstyle pipeline', async () => {
+    // The bug class this catches: rocketstyle's HOC + EnhancedComponent
+    // used to value-copy props (via spread + omit/pick + the
+    // value-iteration removeUndefinedProps), collapsing getter-shaped
+    // reactive props to a static value before the wrapped component
+    // saw them. Downstream JSX accessors then read the captured-once
+    // value, breaking signal-driven updates on every prop on every
+    // rocketstyle-wrapped component (the whole of @pyreon/ui-components,
+    // plus user-defined ones).
+    //
+    // Test mirrors the real-app shape: a signal feeds an `id` prop on a
+    // rocketstyle-wrapped Base; the wrapped component renders a child
+    // that reads `props.id` reactively. Flipping the signal must patch
+    // the DOM.
+    //
+    // We can't drive this through the user-side compiler in tests, so
+    // we manually `_rp`-brand the function + run `makeReactiveProps` —
+    // exactly what the compiler + mount pipeline do for a real consumer.
+    const { _rp } = await import('@pyreon/core')
+    const labelSig = signal('initial')
+
+    // Base renders the label prop as DOM text so we can assert reactivity
+    // observably in the rendered tree.
+    const ReactiveBase: ComponentFn<{ label?: string; children?: VNodeChild }> = (
+      props,
+    ) => h('div', { 'data-testid': 'reactive' }, () => props.label)
+    ;(ReactiveBase as ComponentFn & { displayName?: string }).displayName = 'ReactiveBase'
+
+    const Box: any = rocketstyle()({ name: 'ReactivePropBox', component: ReactiveBase })
+
+    // Brand the prop like the compiler does (`_rp(() => signal())`) —
+    // mount.ts's `makeReactiveProps` then converts the brand to a getter
+    // property. If the rocketstyle pipeline preserves the descriptor, the
+    // inner component sees a getter; if it value-copies (the broken
+    // shape this test catches), it sees the resolved-once string 'initial'
+    // and the DOM never updates on signal flip.
+    const rawProps = { label: _rp(() => labelSig()) }
+
+    const { container, unmount } = mountInBrowser(h(Box, rawProps))
+    const el = container.querySelector<HTMLElement>('[data-testid="reactive"]')!
+    expect(el.textContent).toBe('initial')
+
+    labelSig.set('updated')
+    // Microtask flush — Pyreon's renderEffect commits synchronously after batch.
+    await Promise.resolve()
+    expect(el.textContent).toBe('updated')
+
+    labelSig.set('third')
+    await Promise.resolve()
+    expect(el.textContent).toBe('third')
+
+    unmount()
+  })
 })

package/src/__tests__/rocketstyleIntegration.test.ts

@@ -214,6 +214,36 @@ describe('chaining methods', () => {
     const result = WithAttrs.getDefaultAttrs({}, {}, 'light')
     expect(result.label).toBe('default')
   })
+
+  it('.getDefaultAttrs() passes isDark/isLight helpers matching the requested mode', () => {
+    // Regression: pre-fix the helpers were inverted in `getDefaultAttrs`
+    // (isDark: mode === 'light', isLight: mode === 'dark') so introspection
+    // callers (rocketstories-style story generators, devtools) saw the
+    // OPPOSITE of what the runtime renders. Runtime via `useTheme` derives
+    // helpers correctly from context (and handles `inversed` by flipping
+    // the mode at the Provider level — see context.test.ts), so the bug
+    // only surfaced for callers that read the helpers via `getDefaultAttrs`.
+    //
+    // Contract: `mode` is the EFFECTIVE mode (post-`inversed` resolution).
+    // Callers wanting "inversed light" pass `'dark'`; this function takes
+    // the resolved value, so testing both light/dark covers both the
+    // un-inversed and inversed cases.
+    const captured: Array<{ mode: any; isDark: any; isLight: any }> = []
+    const Probe = Button.attrs((_props: any, _theme: any, helpers: any) => {
+      captured.push({
+        mode: helpers.mode,
+        isDark: helpers.isDark,
+        isLight: helpers.isLight,
+      })
+      return {}
+    })
+
+    Probe.getDefaultAttrs({}, {}, 'light')
+    Probe.getDefaultAttrs({}, {}, 'dark')
+
+    expect(captured[0]).toEqual({ mode: 'light', isDark: false, isLight: true })
+    expect(captured[1]).toEqual({ mode: 'dark', isDark: true, isLight: false })
+  })
 })
 
 // --------------------------------------------------------
@@ -575,3 +605,107 @@ describe('theme and state injection', () => {
     expect(vnode.$rocketstate.state).toBe('primary')
   })
 })
+
+// --------------------------------------------------------
+// component-swap reset (cloneAndEnhance)
+// --------------------------------------------------------
+// `.config({ component: NewBase })` swaps the underlying renderable. The prior
+// .attrs() / .priorityAttrs() / .filterAttrs() / .compose() chains were
+// tailored to the previous component's prop shape — applying them to a
+// different component silently leaks invalid props through to the DOM (e.g.
+// `disabled` on an `<a>`). vitus-labs's rocketstyle drops those chains on
+// component swap; this regression test locks in matching behavior here.
+describe('component-swap reset', () => {
+  it('drops .attrs() chain when component changes', () => {
+    const ButtonBase: any = ({ children, $rocketstyle, $rocketstate, ...rest }: any) => ({
+      type: 'button',
+      props: rest,
+      children,
+    })
+    ButtonBase.displayName = 'ButtonBase'
+
+    const AnchorBase: any = ({ children, $rocketstyle, $rocketstate, ...rest }: any) => ({
+      type: 'a',
+      props: rest,
+      children,
+    })
+    AnchorBase.displayName = 'AnchorBase'
+
+    const Button: any = rocketstyle()({
+      name: 'Button',
+      component: ButtonBase,
+    }).attrs((() => ({ 'data-button-attr': 'leaked' })) as any)
+
+    const Link: any = Button.config({ component: AnchorBase })
+
+    const result = renderProps(Link)
+    expect(result['data-button-attr']).toBeUndefined()
+  })
+
+  it('preserves .attrs() chain when component is not changed', () => {
+    const Base: any = ({ children, $rocketstyle, $rocketstate, ...rest }: any) => ({
+      type: 'div',
+      props: rest,
+      children,
+    })
+    Base.displayName = 'Base'
+
+    const Button: any = rocketstyle()({
+      name: 'Button',
+      component: Base,
+    }).attrs((() => ({ 'data-keep': 'yes' })) as any)
+
+    const Same: any = Button.config({ DEBUG: false })
+
+    const result = renderProps(Same)
+    expect(result['data-keep']).toBe('yes')
+  })
+
+  it('preserves .attrs() chain when same component is re-passed via config', () => {
+    const Base: any = ({ children, $rocketstyle, $rocketstate, ...rest }: any) => ({
+      type: 'div',
+      props: rest,
+      children,
+    })
+    Base.displayName = 'Base'
+
+    const Button: any = rocketstyle()({
+      name: 'Button',
+      component: Base,
+    }).attrs((() => ({ 'data-keep': 'yes' })) as any)
+
+    const Same: any = Button.config({ component: Base })
+
+    const result = renderProps(Same)
+    expect(result['data-keep']).toBe('yes')
+  })
+
+  it('lets fresh attrs after component swap apply to the new component', () => {
+    const ButtonBase: any = ({ children, $rocketstyle, $rocketstate, ...rest }: any) => ({
+      type: 'button',
+      props: rest,
+      children,
+    })
+    ButtonBase.displayName = 'ButtonBase'
+
+    const AnchorBase: any = ({ children, $rocketstyle, $rocketstate, ...rest }: any) => ({
+      type: 'a',
+      props: rest,
+      children,
+    })
+    AnchorBase.displayName = 'AnchorBase'
+
+    const Button: any = rocketstyle()({
+      name: 'Button',
+      component: ButtonBase,
+    }).attrs((() => ({ 'data-from-button': 'original' })) as any)
+
+    const Link: any = Button.config({ component: AnchorBase }).attrs(
+      (() => ({ 'data-from-link': 'fresh' })) as any,
+    )
+
+    const result = renderProps(Link)
+    expect(result['data-from-button']).toBeUndefined()
+    expect(result['data-from-link']).toBe('fresh')
+  })
+})

package/src/hoc/rocketstyleAttrsHoc.ts

@@ -2,7 +2,11 @@ import { render } from '@pyreon/ui-core'
 import { useTheme } from '../hooks'
 import type { Configuration } from '../types/configuration'
 import type { ComponentFn } from '../types/utils'
-import { calculateChainOptions, removeUndefinedProps } from '../utils/attrs'
+import {
+  calculateChainOptions,
+  mergeDescriptors,
+  removeUndefinedProps,
+} from '../utils/attrs'
 
 export type RocketStyleHOC = ({
   inversed,
@@ -45,19 +49,21 @@ const rocketStyleHOC: RocketStyleHOC = ({ inversed, attrs, priorityAttrs }) => {
 
       const prioritizedAttrs = calculatePriorityAttrs([filteredProps, ...callbackParams])
 
+      // Merge via descriptor-copy so reactive getter props on
+      // filteredProps survive the chain. A `{...A, ...B}` spread
+      // would fire every getter on A and B and store the resolved
+      // value, breaking the reactive subscription downstream.
+      // Attrs callbacks legitimately read prop VALUES (e.g.
+      // `({ href }) => ({ tag: href ? 'a' : 'button' })`) — that's
+      // a one-shot read at setup time by design. The pipeline only
+      // needs to preserve reactivity for props the callbacks DON'T
+      // consume, which the descriptor-merge does.
       const finalAttrs = calculateAttrs([
-        {
-          ...prioritizedAttrs,
-          ...filteredProps,
-        },
+        mergeDescriptors(prioritizedAttrs, filteredProps),
         ...callbackParams,
       ])
 
-      const finalProps = {
-        ...prioritizedAttrs,
-        ...finalAttrs,
-        ...filteredProps,
-      }
+      const finalProps = mergeDescriptors(prioritizedAttrs, finalAttrs, filteredProps)
 
       return WrappedComponent(finalProps)
     }