@pyreon/rocketstyle 0.16.0 → 0.18.0

package/lib/index.js

@@ -239,7 +239,31 @@ const useThemeAttrs = ({ inversed }) => {
 //#region src/utils/attrs.ts
 const removeUndefinedProps = (props) => {
 	const result = {};
-	for (const key in props) if (props[key] !== void 0) result[key] = props[key];
+	const descriptors = Object.getOwnPropertyDescriptors(props);
+	for (const key of Object.keys(descriptors)) {
+		const d = descriptors[key];
+		if (d.get || d.value !== void 0) Object.defineProperty(result, key, d);
+	}
+	return result;
+};
+/**
+* Like `Object.assign(target, ...sources)` but copies own property
+* DESCRIPTORS instead of reading + writing values. Later sources
+* override earlier ones (same semantics as spread / Object.assign).
+*
+* Required for reactive-prop preservation through the rocketstyle
+* pipeline: a plain `{ ...A, ...B }` spread fires every getter on A
+* and B and stores the resolved value, breaking the reactive
+* subscription. This helper copies descriptors so getters survive
+* the merge.
+*/
+const mergeDescriptors = (...sources) => {
+	const result = {};
+	for (const source of sources) {
+		if (!source) continue;
+		const descriptors = Object.getOwnPropertyDescriptors(source);
+		for (const key of Object.keys(descriptors)) Object.defineProperty(result, key, descriptors[key]);
+	}
 	return result;
 };
 /** Picks only the props whose keys exist in the dimension keywords lookup and have truthy values. */
@@ -301,15 +325,7 @@ const rocketStyleHOC = ({ inversed, attrs, priorityAttrs }) => {
 				isLight: themeAttrs.isLight
 			}];
 			const prioritizedAttrs = calculatePriorityAttrs([filteredProps, ...callbackParams]);
-			const finalAttrs = calculateAttrs([{
-				...prioritizedAttrs,
-				...filteredProps
-			}, ...callbackParams]);
-			return WrappedComponent({
-				...prioritizedAttrs,
-				...finalAttrs,
-				...filteredProps
-			});
+			return WrappedComponent(mergeDescriptors(prioritizedAttrs, calculateAttrs([mergeDescriptors(prioritizedAttrs, filteredProps), ...callbackParams]), filteredProps));
 		};
 		return HOCComponent;
 	};
@@ -647,20 +663,34 @@ const rocketComponent = (options) => {
 			omitSet = new Set([...RESERVED_STYLING_PROPS_KEYS, ...STATIC_OMIT_KEYS]);
 			_omitSetCache.set(RESERVED_STYLING_PROPS_KEYS, omitSet);
 		}
-		const mergeProps = localCtx ? {
-			...localCtx,
-			...props
-		} : props;
+		const mergeProps = localCtx ? mergeDescriptors(localCtx, props) : props;
 		const finalProps = omit(mergeProps, omitSet);
 		if (options.passProps) {
 			const passed = pick(mergeProps, options.passProps);
-			for (const k in passed) finalProps[k] = passed[k];
+			const passedDescriptors = Object.getOwnPropertyDescriptors(passed);
+			for (const k of Object.keys(passedDescriptors)) Object.defineProperty(finalProps, k, passedDescriptors[k]);
 		}
-		finalProps.ref = props.ref;
-		finalProps.$rocketstyle = $rocketstyleAccessor;
-		finalProps.$rocketstate = $rocketstateAccessor;
+		const refDescriptor = Object.getOwnPropertyDescriptor(props, "ref");
+		if (refDescriptor) Object.defineProperty(finalProps, "ref", refDescriptor);
+		Object.defineProperty(finalProps, "$rocketstyle", {
+			value: $rocketstyleAccessor,
+			writable: true,
+			enumerable: true,
+			configurable: true
+		});
+		Object.defineProperty(finalProps, "$rocketstate", {
+			value: $rocketstateAccessor,
+			writable: true,
+			enumerable: true,
+			configurable: true
+		});
 		if (__DEV__) {
-			finalProps["data-rocketstyle"] = componentName;
+			Object.defineProperty(finalProps, "data-rocketstyle", {
+				value: componentName,
+				writable: true,
+				enumerable: true,
+				configurable: true
+			});
 			if (options.DEBUG) {
 				const debugPayload = {
 					component: componentName,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pyreon/rocketstyle",
-  "version": "0.16.0",
+  "version": "0.18.0",
   "description": "Multi-dimensional style composition for Pyreon components",
   "license": "MIT",
   "repository": {
@@ -42,9 +42,9 @@
     "typecheck": "tsc --noEmit"
   },
   "devDependencies": {
-    "@pyreon/test-utils": "^0.13.3",
-    "@pyreon/typescript": "^0.16.0",
-    "@pyreon/ui-core": "^0.16.0",
+    "@pyreon/test-utils": "^0.13.5",
+    "@pyreon/typescript": "^0.18.0",
+    "@pyreon/ui-core": "^0.18.0",
     "@vitest/browser-playwright": "^4.1.4",
     "@vitus-labs/tools-rolldown": "^2.3.0"
   },
@@ -52,9 +52,9 @@
     "node": ">= 22"
   },
   "dependencies": {
-    "@pyreon/core": "^0.16.0",
-    "@pyreon/reactivity": "^0.16.0",
-    "@pyreon/styler": "^0.16.0",
-    "@pyreon/ui-core": "^0.16.0"
+    "@pyreon/core": "^0.18.0",
+    "@pyreon/reactivity": "^0.18.0",
+    "@pyreon/styler": "^0.18.0",
+    "@pyreon/ui-core": "^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

@@ -424,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/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)
     }

package/src/rocketstyle.ts

@@ -9,7 +9,12 @@ import type { Configuration, ExtendedConfiguration } from './types/configuration
 import type { RocketComponent } from './types/rocketComponent'
 import type { InnerComponentProps, RocketStyleComponent } from './types/rocketstyle'
 import type { ComponentFn } from './types/utils'
-import { calculateChainOptions, calculateStylingAttrs, pickStyledAttrs } from './utils/attrs'
+import {
+  calculateChainOptions,
+  calculateStylingAttrs,
+  mergeDescriptors,
+  pickStyledAttrs,
+} from './utils/attrs'
 import { chainOptions, chainOrOptions, chainReservedKeyOptions } from './utils/chaining'
 import { calculateHocsFuncs } from './utils/compose'
 import { getDimensionsMap } from './utils/dimensions'
@@ -416,30 +421,68 @@ const rocketComponent: RocketComponent = (options) => {
       _omitSetCache.set(RESERVED_STYLING_PROPS_KEYS, omitSet)
     }
 
-    // Merge localCtx + props without an intermediate spread object.
-    // omit() handles 'pseudo' removal (included in STATIC_OMIT_KEYS).
-    const mergeProps = localCtx ? { ...localCtx, ...props } : props
+    // Merge localCtx + props via descriptor-copy so reactive getter
+    // props on `props` (compiler-emitted `_rp(() => signal())` wrappers
+    // converted to getters by `makeReactiveProps`) survive the merge.
+    // A plain `{ ...localCtx, ...props }` spread would fire every getter
+    // and collapse to static values, defeating reactivity for any
+    // downstream JSX accessor reading `props.x`.
+    const mergeProps = localCtx ? mergeDescriptors(localCtx, props) : props
 
-    // omit() already returns a fresh object — assign directly onto it
-    // instead of spreading into another {} (saves one object allocation).
+    // omit() preserves descriptors (since ui-core's omit was updated to
+    // copy descriptors), so reactive getters carry through to finalProps.
     const finalProps = omit(mergeProps as Record<string, unknown>, omitSet) as Record<string, any>
 
     if (options.passProps) {
       const passed = pick(mergeProps, options.passProps)
-      for (const k in passed) finalProps[k] = passed[k]
+      // Copy descriptors so any reactive getters in passProps survive.
+      // Plain `finalProps[k] = passed[k]` would fire getters at setup time
+      // AND silently fail when finalProps[k] is already a getter-only
+      // descriptor (assignment to a getter-only property is a no-op in
+      // non-strict mode, throws in strict mode).
+      const passedDescriptors = Object.getOwnPropertyDescriptors(passed)
+      for (const k of Object.keys(passedDescriptors)) {
+        Object.defineProperty(finalProps, k, passedDescriptors[k]!)
+      }
     }
 
-    finalProps.ref = props.ref
+    // Use defineProperty for these last writes too — if props.ref or
+    // an existing finalProps slot happened to carry a getter-only
+    // descriptor, plain assignment would silently fail. defineProperty
+    // explicitly replaces the descriptor regardless of shape.
+    const refDescriptor = Object.getOwnPropertyDescriptor(props, 'ref')
+    if (refDescriptor) {
+      Object.defineProperty(finalProps, 'ref', refDescriptor)
+    }
     // Function accessors — DynamicStyled wraps them in a computed() so
     // mode/dimension changes produce a new CSS class reactively. The
     // computed tracks only these two accessors; the resolve itself runs
     // untracked to prevent exponential cascade from theme deep-reads.
-    finalProps.$rocketstyle = $rocketstyleAccessor
-    finalProps.$rocketstate = $rocketstateAccessor
+    Object.defineProperty(finalProps, '$rocketstyle', {
+      value: $rocketstyleAccessor,
+      writable: true,
+      enumerable: true,
+      configurable: true,
+    })
+    Object.defineProperty(finalProps, '$rocketstate', {
+      value: $rocketstateAccessor,
+      writable: true,
+      enumerable: true,
+      configurable: true,
+    })
 
     // development debugging — tree-shaken in production via import.meta.env.DEV
     if (__DEV__) {
-      finalProps['data-rocketstyle'] = componentName
+      // defineProperty rather than `=` to be safe against any preserved
+      // descriptor in this slot (defense-in-depth — `data-rocketstyle`
+      // is unlikely to be passed as a user prop, but the writes above
+      // use defineProperty for the same reason).
+      Object.defineProperty(finalProps, 'data-rocketstyle', {
+        value: componentName,
+        writable: true,
+        enumerable: true,
+        configurable: true,
+      })
 
       if (options.DEBUG) {
         const debugPayload = {

package/src/utils/attrs.ts

@@ -3,13 +3,60 @@ import type { MultiKeys } from '../types/dimensions'
 // --------------------------------------------------------
 // remove undefined props
 // --------------------------------------------------------
-/** Strips keys with `undefined` values so they don't shadow default props during merging. */
+/**
+ * Strips keys with `undefined` values so they don't shadow default props during merging.
+ *
+ * Copies own property DESCRIPTORS rather than values so that reactive
+ * getter-shaped props (compiler-emitted `_rp(() => signal())` converted
+ * to getters by `makeReactiveProps`) survive the pipeline with their
+ * subscription intact. Reading `props[key]` here would fire the getter
+ * at HOC setup time (outside any tracking scope) and collapse the prop
+ * to a static value — every downstream JSX accessor that reads
+ * `props.x` would see the captured-once value, not the live signal.
+ *
+ * For getter descriptors we keep the descriptor as-is (the
+ * undefined-filter doesn't apply — we can't peek into the getter
+ * without firing it). For data descriptors we drop entries whose
+ * value is `undefined` to preserve the original merge semantics.
+ */
 type RemoveUndefinedProps = <T extends Record<string, any>>(props: T) => Partial<T>
 
 export const removeUndefinedProps: RemoveUndefinedProps = (props) => {
   const result: Partial<typeof props> = {}
-  for (const key in props) {
-    if (props[key] !== undefined) result[key] = props[key]
+  const descriptors = Object.getOwnPropertyDescriptors(props)
+  for (const key of Object.keys(descriptors)) {
+    const d = descriptors[key]!
+    if (d.get || d.value !== undefined) {
+      Object.defineProperty(result, key, d)
+    }
+  }
+  return result
+}
+
+// --------------------------------------------------------
+// merge descriptors
+// --------------------------------------------------------
+/**
+ * Like `Object.assign(target, ...sources)` but copies own property
+ * DESCRIPTORS instead of reading + writing values. Later sources
+ * override earlier ones (same semantics as spread / Object.assign).
+ *
+ * Required for reactive-prop preservation through the rocketstyle
+ * pipeline: a plain `{ ...A, ...B }` spread fires every getter on A
+ * and B and stores the resolved value, breaking the reactive
+ * subscription. This helper copies descriptors so getters survive
+ * the merge.
+ */
+export const mergeDescriptors = (
+  ...sources: ReadonlyArray<Record<string, any> | null | undefined>
+): Record<string, any> => {
+  const result: Record<string, any> = {}
+  for (const source of sources) {
+    if (!source) continue
+    const descriptors = Object.getOwnPropertyDescriptors(source)
+    for (const key of Object.keys(descriptors)) {
+      Object.defineProperty(result, key, descriptors[key]!)
+    }
   }
   return result
 }