@pyreon/rocketstyle 0.11.6 → 0.11.8

package/lib/index.js

@@ -175,10 +175,11 @@ const createLocalProvider = (WrappedComponent) => {
 				if (onBlur) onBlur(e);
 			}
 		};
+		const resolvedState = typeof $rocketstate === "function" ? $rocketstate() : $rocketstate;
 		const updatedState = {
-			...$rocketstate,
+			...resolvedState,
 			pseudo: {
-				...$rocketstate?.pseudo,
+				...resolvedState?.pseudo,
 				get hover() {
 					return hover();
 				},
@@ -497,14 +498,6 @@ const rocketComponent = (options) => {
 	const EnhancedComponent = (props) => {
 		const localCtx = useLocalContext(options.consumer);
 		const themeAttrs = useThemeAttrs(options);
-		const { pseudo, ...mergeProps } = {
-			...localCtx,
-			...props
-		};
-		const pseudoRocketstate = {
-			...pseudo,
-			...pick(props, [...PSEUDO_KEYS, ...PSEUDO_META_KEYS])
-		};
 		const theme = themeAttrs.theme;
 		const baseThemeHelper = ThemeManager$1.baseTheme;
 		if (!baseThemeHelper.has(theme)) baseThemeHelper.set(theme, getThemeFromChain(options.theme, theme));
@@ -517,16 +510,12 @@ const rocketComponent = (options) => {
 			useBooleans: options.useBooleans
 		});
 		const RESERVED_STYLING_PROPS_KEYS = Object.keys(reservedPropNames);
-		const rocketstate = _calculateStylingAttrs({
-			props: pickStyledAttrs(mergeProps, reservedPropNames),
-			dimensions
-		});
-		const finalRocketstate = {
-			...rocketstate,
-			pseudo: pseudoRocketstate
-		};
 		const $rocketstyleAccessor = () => {
 			const mode = themeAttrs.mode;
+			const rocketstate = _calculateStylingAttrs({
+				props: pickStyledAttrs(props, reservedPropNames),
+				dimensions
+			});
 			const modeBaseHelper = ThemeManager$1.modeBaseTheme[mode];
 			if (!modeBaseHelper.has(baseTheme)) modeBaseHelper.set(baseTheme, getThemeByMode(baseTheme, mode));
 			const currentModeBaseTheme = modeBaseHelper.get(baseTheme);
@@ -540,6 +529,24 @@ const rocketComponent = (options) => {
 				appTheme: theme
 			});
 		};
+		const localPseudo = localCtx?.pseudo;
+		const propPseudo = pick(props, [...PSEUDO_KEYS, ...PSEUDO_META_KEYS]);
+		const $rocketstateAccessor = () => {
+			return {
+				..._calculateStylingAttrs({
+					props: pickStyledAttrs(props, reservedPropNames),
+					dimensions
+				}),
+				pseudo: {
+					...localPseudo,
+					...propPseudo
+				}
+			};
+		};
+		const { pseudo: _pseudo, ...mergeProps } = {
+			...localCtx,
+			...props
+		};
 		const finalProps = {
 			...omit(mergeProps, [
 				...RESERVED_STYLING_PROPS_KEYS,
@@ -549,14 +556,14 @@ const rocketComponent = (options) => {
 			...options.passProps ? pick(mergeProps, options.passProps) : {},
 			ref: props.ref,
 			$rocketstyle: $rocketstyleAccessor,
-			$rocketstate: finalRocketstate
+			$rocketstate: $rocketstateAccessor
 		};
 		if (process.env.NODE_ENV !== "production") {
 			finalProps["data-rocketstyle"] = componentName;
 			if (options.DEBUG) {
 				const debugPayload = {
 					component: componentName,
-					rocketstate: finalRocketstate,
+					rocketstate: $rocketstateAccessor(),
 					rocketstyle: $rocketstyleAccessor(),
 					dimensions,
 					mode: themeAttrs.mode,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pyreon/rocketstyle",
-  "version": "0.11.6",
+  "version": "0.11.8",
   "description": "Multi-dimensional style composition for Pyreon components",
   "license": "MIT",
   "repository": {
@@ -41,15 +41,15 @@
     "typecheck": "tsc --noEmit"
   },
   "devDependencies": {
-    "@pyreon/test-utils": "^0.11.6",
-    "@pyreon/typescript": "^0.11.6",
+    "@pyreon/test-utils": "^0.11.8",
+    "@pyreon/typescript": "^0.11.8",
     "@vitus-labs/tools-rolldown": "^1.15.3"
   },
   "peerDependencies": {
-    "@pyreon/core": "^0.11.6",
-    "@pyreon/reactivity": "^0.11.6",
-    "@pyreon/styler": "^0.11.6",
-    "@pyreon/ui-core": "^0.11.6"
+    "@pyreon/core": "^0.11.8",
+    "@pyreon/reactivity": "^0.11.8",
+    "@pyreon/styler": "^0.11.8",
+    "@pyreon/ui-core": "^0.11.8"
   },
   "engines": {
     "node": ">= 22"

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

@@ -7,7 +7,7 @@
  * Unlike the React version which tested CSS injection in the DOM,
  * this Pyreon version tests the computed $rocketstyle output directly.
  */
-import { ThemeCapture, getComputedTheme, initTestConfig } from '@pyreon/test-utils'
+import { ThemeCapture, getComputedTheme, initTestConfig, withThemeContext } from '@pyreon/test-utils'
 import rocketstyle from '../init'
 
 let cleanup: () => void
@@ -234,3 +234,67 @@ describe('e2e: rocketstyle theme computation', () => {
     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__/rocketstyleIntegration.test.ts

@@ -23,8 +23,8 @@ const BaseComponent: any = ({ children, $rocketstyle, $rocketstate, ...rest }: a
   props: rest,
   children,
   key: null,
-  $rocketstyle,
-  $rocketstate,
+  $rocketstyle: typeof $rocketstyle === 'function' ? $rocketstyle() : $rocketstyle,
+  $rocketstate: typeof $rocketstate === 'function' ? $rocketstate() : $rocketstate,
 })
 BaseComponent.displayName = 'BaseComponent'
 

package/src/context/createLocalProvider.ts

@@ -62,10 +62,13 @@ const createLocalProvider = (WrappedComponent: ComponentFn<any>) => {
     // Without getters, hover()/focus()/pressed() reads here would register
     // as dependencies of any parent effect, causing cascading re-renders
     // on every mouse event.
+    // Resolve $rocketstate if it's a function accessor (from EnhancedComponent)
+    const resolvedState =
+      typeof $rocketstate === 'function' ? $rocketstate() : $rocketstate
     const updatedState = {
-      ...$rocketstate,
+      ...resolvedState,
       pseudo: {
-        ...$rocketstate?.pseudo,
+        ...resolvedState?.pseudo,
         get hover() {
           return hover()
         },

package/src/rocketstyle.ts

@@ -110,41 +110,24 @@ const rocketComponent: RocketComponent = (options) => {
     const themeAttrs = useTheme(options)
 
     // --------------------------------------------------
-    // Static setup — runs once at component mount
-    // --------------------------------------------------
-    const { pseudo, ...mergeProps } = {
-      ...localCtx,
-      ...props,
-    }
-
-    const pseudoRocketstate = {
-      ...pseudo,
-      ...pick(props, [...PSEUDO_KEYS, ...PSEUDO_META_KEYS]),
-    }
-
-    // --------------------------------------------------
-    // Static theme structure — computed once at mount, doesn't change with mode.
-    // Only the mode-dependent resolution is reactive (via $rocketstyle accessor).
+    // Theme structure — cached by theme object identity.
+    // Theme object itself doesn't change (enrichTheme produces a stable ref),
+    // only mode switches change which mode-variant is resolved.
     // --------------------------------------------------
     const theme = themeAttrs.theme
 
-    // BASE / DEFAULT THEME Object (cached by theme identity)
     const baseThemeHelper = ThemeManager.baseTheme
     if (!baseThemeHelper.has(theme)) {
       baseThemeHelper.set(theme, getThemeFromChain(options.theme, theme))
     }
     const baseTheme = baseThemeHelper.get(theme)
 
-    // DIMENSION(S) THEMES Object (cached by theme identity)
     const dimHelper = ThemeManager.dimensionsThemes
     if (!dimHelper.has(theme)) {
       dimHelper.set(theme, getDimensionThemes(theme, options))
     }
     const themes = dimHelper.get(theme)
 
-    // --------------------------------------------------
-    // dimension map & reserved prop names
-    // --------------------------------------------------
     const { keysMap: dimensions, keywords: reservedPropNames } = getDimensionsMap({
       themes,
       useBooleans: options.useBooleans,
@@ -153,23 +136,26 @@ const rocketComponent: RocketComponent = (options) => {
     const RESERVED_STYLING_PROPS_KEYS = Object.keys(reservedPropNames)
 
     // --------------------------------------------------
-    // rocketstate — active dimension values
-    // --------------------------------------------------
-    const rocketstate = _calculateStylingAttrs({
-      props: pickStyledAttrs(mergeProps, reservedPropNames),
-      dimensions,
-    })
-
-    const finalRocketstate = { ...rocketstate, pseudo: pseudoRocketstate }
-
-    // --------------------------------------------------
-    // $rocketstyle as a FUNCTION ACCESSOR — reactive on mode changes.
-    // The styled component calls this inside its own effect() to track
-    // the mode dependency. Only the CSS class swaps — no VNode remount.
+    // $rocketstyle as a FUNCTION ACCESSOR — fully reactive.
+    // Re-evaluates when mode OR dimension props change.
+    // Props are resolved fresh each call so reactive prop accessors
+    // (signals, getters) produce updated dimension values.
     // --------------------------------------------------
     const $rocketstyleAccessor = () => {
-      const mode = themeAttrs.mode // reactive read via getter
+      // Only read mode and dimension props — NOT pseudo state.
+      // Pseudo state (hover, focus, pressed) is read by .styles()
+      // via $rocketstate inside runUntracked(). Reading pseudo signals
+      // here would subscribe this accessor to hover/focus/pressed,
+      // causing CSS recomputation on every mouse event.
+      const mode = themeAttrs.mode // reactive: tracks mode signal
+
+      // Resolve active dimensions from props (not localCtx which has pseudo getters)
+      const rocketstate = _calculateStylingAttrs({
+        props: pickStyledAttrs(props as Record<string, unknown>, reservedPropNames),
+        dimensions,
+      })
 
+      // Resolve mode-specific theme
       const modeBaseHelper = ThemeManager.modeBaseTheme[mode]
       if (!modeBaseHelper.has(baseTheme)) {
         modeBaseHelper.set(baseTheme, getThemeByMode(baseTheme, mode))
@@ -191,6 +177,38 @@ const rocketComponent: RocketComponent = (options) => {
       })
     }
 
+    // --------------------------------------------------
+    // $rocketstate as a FUNCTION ACCESSOR — reactive on prop changes.
+    // Re-evaluates active dimensions + pseudo state from current props.
+    // --------------------------------------------------
+    // Capture pseudo from localCtx once at setup — pseudo properties are
+    // getters (from createLocalProvider) that read signals lazily.
+    // Passing them through preserves reactivity without subscribing here.
+    const localPseudo = localCtx?.pseudo
+    const propPseudo = pick(props, [...PSEUDO_KEYS, ...PSEUDO_META_KEYS])
+
+    const $rocketstateAccessor = () => {
+      const rocketstate = _calculateStylingAttrs({
+        props: pickStyledAttrs(props as Record<string, unknown>, reservedPropNames),
+        dimensions,
+      })
+
+      // Pseudo state uses getter properties — they're evaluated lazily
+      // by .styles() inside runUntracked(), not here.
+      return {
+        ...rocketstate,
+        pseudo: { ...localPseudo, ...propPseudo },
+      }
+    }
+
+    // --------------------------------------------------
+    // Static mergeProps for final prop filtering (non-dimension props)
+    // --------------------------------------------------
+    const { pseudo: _pseudo, ...mergeProps } = {
+      ...localCtx,
+      ...props,
+    }
+
     // --------------------------------------------------
     // final props passed to WrappedComponent
     // --------------------------------------------------
@@ -202,9 +220,9 @@ const rocketComponent: RocketComponent = (options) => {
       ]),
       ...(options.passProps ? pick(mergeProps, options.passProps) : {}),
       ref: props.ref,
-      // FUNCTION accessor — styled component resolves it reactively
+      // FUNCTION accessors — styled component resolves them reactively
       $rocketstyle: $rocketstyleAccessor,
-      $rocketstate: finalRocketstate,
+      $rocketstate: $rocketstateAccessor,
     }
 
     // development debugging
@@ -214,7 +232,7 @@ const rocketComponent: RocketComponent = (options) => {
       if (options.DEBUG) {
         const debugPayload = {
           component: componentName,
-          rocketstate: finalRocketstate,
+          rocketstate: $rocketstateAccessor(),
           rocketstyle: $rocketstyleAccessor(),
           dimensions,
           mode: themeAttrs.mode,