@pyreon/rocketstyle 0.23.0 → 0.24.1

package/lib/index.js

@@ -16,6 +16,13 @@ const PSEUDO_KEYS = [
 ];
 /** Meta pseudo-state keys representing non-interactive states (disabled, readOnly). */
 const PSEUDO_META_KEYS = ["disabled", "readOnly"];
+/**
+* Pre-merged interaction + meta keys. Hoisted from `rocketstyle.ts`'s
+* `rocketComponent` definition scope to module scope so the merged
+* 6-element array is allocated ONCE per process, not once per
+* rocketstyle definition. Ported from vitus-labs `00fdadc2`.
+*/
+const PSEUDO_AND_META_KEYS = [...PSEUDO_KEYS, ...PSEUDO_META_KEYS];
 /** Supported theme mode flags. */
 const THEME_MODES = {
 	light: true,
@@ -269,7 +276,7 @@ const mergeDescriptors = (...sources) => {
 /** Picks only the props whose keys exist in the dimension keywords lookup and have truthy values. */
 const pickStyledAttrs = (props, keywords) => {
 	const result = {};
-	for (const key of Object.keys(props)) if (keywords[key] && props[key]) result[key] = props[key];
+	for (const key in props) if (keywords[key] && props[key]) result[key] = props[key];
 	return result;
 };
 const calculateChainOptions = (options) => (args) => {
@@ -477,13 +484,16 @@ const getTheme = ({ rocketstate, themes, baseTheme, transformKeys, appTheme }) =
 	finalTheme.readOnly ??= EMPTY_PSEUDO;
 	return finalTheme;
 };
-const getThemeByMode = (object, mode) => Object.keys(object).reduce((acc, key) => {
-	const value = object[key];
-	if (typeof value === "object" && value !== null) acc[key] = getThemeByMode(value, mode);
-	else if (isModeCallback(value)) acc[key] = value(mode);
-	else acc[key] = value;
+const getThemeByMode = (object, mode) => {
+	const acc = {};
+	for (const key in object) {
+		const value = object[key];
+		if (typeof value === "object" && value !== null) acc[key] = getThemeByMode(value, mode);
+		else if (isModeCallback(value)) acc[key] = value(mode);
+		else acc[key] = value;
+	}
 	return acc;
-}, {});
+};
 
 //#endregion
 //#region src/rocketstyle.ts
@@ -535,7 +545,7 @@ const rocketComponent = (options) => {
 	const ThemeManager$1 = new ThemeManager();
 	const _dimensionsCache = /* @__PURE__ */ new WeakMap();
 	const _reservedKeysCache = /* @__PURE__ */ new WeakMap();
-	const ALL_PSEUDO_KEYS = [...PSEUDO_KEYS, ...PSEUDO_META_KEYS];
+	const ALL_PSEUDO_KEYS = PSEUDO_AND_META_KEYS;
 	const STATIC_OMIT_KEYS = [
 		"pseudo",
 		...PSEUDO_KEYS,
@@ -543,7 +553,7 @@ const rocketComponent = (options) => {
 	];
 	const _omitSetCache = /* @__PURE__ */ new WeakMap();
 	const _rsMemo = /* @__PURE__ */ new WeakMap();
-	const RS_MEMO_CAP = 32;
+	const RS_MEMO_CAP = 128;
 	const hocsFuncs = [rocketStyleHOC(options), ...calculateHocsFuncs(options.compose)];
 	const EnhancedComponent = (props) => {
 		const localCtx = useLocalContext(options.consumer);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pyreon/rocketstyle",
-  "version": "0.23.0",
+  "version": "0.24.1",
   "description": "Multi-dimensional style composition for Pyreon components",
   "license": "MIT",
   "repository": {
@@ -42,9 +42,9 @@
     "typecheck": "tsc --noEmit"
   },
   "devDependencies": {
-    "@pyreon/test-utils": "^0.13.10",
-    "@pyreon/typescript": "^0.23.0",
-    "@pyreon/ui-core": "^0.23.0",
+    "@pyreon/test-utils": "^0.13.11",
+    "@pyreon/typescript": "^0.24.1",
+    "@pyreon/ui-core": "^0.24.1",
     "@vitest/browser-playwright": "^4.1.4",
     "@vitus-labs/tools-rolldown": "^2.4.0"
   },
@@ -52,9 +52,9 @@
     "node": ">= 22"
   },
   "dependencies": {
-    "@pyreon/core": "^0.23.0",
-    "@pyreon/reactivity": "^0.23.0",
-    "@pyreon/styler": "^0.23.0",
-    "@pyreon/ui-core": "^0.23.0"
+    "@pyreon/core": "^0.24.1",
+    "@pyreon/reactivity": "^0.24.1",
+    "@pyreon/styler": "^0.24.1",
+    "@pyreon/ui-core": "^0.24.1"
   }
 }

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

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

package/src/constants/index.ts

@@ -14,6 +14,14 @@ export const PSEUDO_KEYS = ['hover', 'active', 'focus', 'pressed'] as const
 /** Meta pseudo-state keys representing non-interactive states (disabled, readOnly). */
 export const PSEUDO_META_KEYS = ['disabled', 'readOnly'] as const
 
+/**
+ * Pre-merged interaction + meta keys. Hoisted from `rocketstyle.ts`'s
+ * `rocketComponent` definition scope to module scope so the merged
+ * 6-element array is allocated ONCE per process, not once per
+ * rocketstyle definition. Ported from vitus-labs `00fdadc2`.
+ */
+export const PSEUDO_AND_META_KEYS = [...PSEUDO_KEYS, ...PSEUDO_META_KEYS] as const
+
 /** Supported theme mode flags. */
 export const THEME_MODES = {
   light: true,

package/src/rocketstyle.ts

@@ -1,6 +1,6 @@
 import { compose, config, hoistNonReactStatics, omit, pick, render } from '@pyreon/ui-core'
 import { LocalThemeManager } from './cache'
-import { CONFIG_KEYS, PSEUDO_KEYS, PSEUDO_META_KEYS, STYLING_KEYS, __DEV__ } from './constants'
+import { CONFIG_KEYS, PSEUDO_AND_META_KEYS, PSEUDO_KEYS, STYLING_KEYS, __DEV__ } from './constants'
 import createLocalProvider from './context/createLocalProvider'
 import { useLocalContext } from './context/localContext'
 import { rocketstyleAttrsHoc } from './hoc'
@@ -130,8 +130,11 @@ const rocketComponent: RocketComponent = (options) => {
   >()
   const _reservedKeysCache = new WeakMap<object, string[]>()
 
-  // Pre-compute merged key arrays once per definition (not per mount)
-  const ALL_PSEUDO_KEYS = [...PSEUDO_KEYS, ...PSEUDO_META_KEYS]
+  // Reuse the module-scope pre-merged constant. Cast away `readonly` for
+  // the downstream consumers that take a plain `string[]`. Saves the
+  // 6-element array allocation that fired once per `rocketstyle()`
+  // definition. Ported from vitus-labs `00fdadc2`.
+  const ALL_PSEUDO_KEYS = PSEUDO_AND_META_KEYS as unknown as string[]
   // Static portion of omit keys — PSEUDO_KEYS + filterAttrs + 'pseudo' are definition-scoped.
   // RESERVED_STYLING_PROPS_KEYS is dimension-dependent but also cached per definition.
   // 'pseudo' is included here so we can skip the destructuring spread of mergeProps.
@@ -156,11 +159,23 @@ const rocketComponent: RocketComponent = (options) => {
   // mean the styler's classCache hits earlier and the resolves don't run.
   //
   // LRU bound prevents unbounded growth from prop-tuple churn (e.g. a
-  // table where every cell has a unique state). 32 entries per theme
-  // covers ~99% of unique combos in real apps.
+  // table where every cell has a unique state). 128 entries per theme
+  // covers the E2 perf-dashboard reference workload AND high-cardinality
+  // surfaces (data tables, design systems with many tokens crossed with
+  // size/variant axes, dashboards rendering many small interactive
+  // components). The previous cap of 32 was sized for the reference
+  // workload only and thrashed at higher cardinalities — measured 45%
+  // cache-miss rate (888/2000 lookups) on a 60-unique-tuple Button
+  // mount loop, 46% wall-clock regression vs the cap-fits-workload
+  // case. The rs-precompute spike (closed PR #761, results live on
+  // `spike/rocketstyle-precompute`) bisect-verified that raising the cap
+  // 32 → 128 zeroes the cold-resolves counter for that 60-tuple
+  // workload at zero implementation cost. Memory: ~12KB per definition
+  // per theme at 128 entries × ~100 bytes per entry — negligible vs
+  // the 46% runtime win.
   type RsMemoEntry = { readonly rocketstyle: object; readonly rocketstate: object }
   const _rsMemo = new WeakMap<object, Map<string, RsMemoEntry>>()
-  const RS_MEMO_CAP = 32
+  const RS_MEMO_CAP = 128
 
   // --------------------------------------------------------
   // COMPOSE - high-order components

package/src/utils/attrs.ts

@@ -72,8 +72,13 @@ export const pickStyledAttrs = <
   props: T,
   keywords: K,
 ): { [I in keyof K & keyof T]: T[I] } => {
+  // Direct `for...in` avoids the `Object.keys(props)` array allocation
+  // that `for (const key of Object.keys(props))` paid on every render.
+  // The hot path is rocketstyle's `EnhancedComponent` body — fires once
+  // per render of every rocketstyle-wrapped component. Ported from
+  // vitus-labs `00fdadc2`.
   const result: Record<string, unknown> = {}
-  for (const key of Object.keys(props)) {
+  for (const key in props) {
     if (keywords[key] && props[key]) result[key] = props[key]
   }
   return result as { [I in keyof K & keyof T]: T[I] }

package/src/utils/theme.ts

@@ -189,20 +189,23 @@ export type GetThemeByMode = (
   themes: Record<string, unknown>
 }>
 
-export const getThemeByMode: GetThemeByMode = (object, mode) =>
-  Object.keys(object).reduce(
-    (acc, key) => {
-      const value = object[key]
-
-      if (typeof value === 'object' && value !== null) {
-        acc[key] = getThemeByMode(value, mode)
-      } else if (isModeCallback(value)) {
-        acc[key] = value(mode)
-      } else {
-        acc[key] = value
-      }
-
-      return acc
-    },
-    {} as Record<string, any>,
-  )
+export const getThemeByMode: GetThemeByMode = (object, mode) => {
+  // Recursive theme walker — `for...in` avoids the per-node
+  // `Object.keys` array allocation that the prior reduce paid. Called
+  // from inside cached `LocalThemeManager` WeakMap tiers (one per
+  // theme/mode transition), so the win is smaller than per-render
+  // helpers but the pattern is consistent. Ported from vitus-labs
+  // `00fdadc2`.
+  const acc: Record<string, any> = {}
+  for (const key in object) {
+    const value = object[key]
+    if (typeof value === 'object' && value !== null) {
+      acc[key] = getThemeByMode(value, mode)
+    } else if (isModeCallback(value)) {
+      acc[key] = value(mode)
+    } else {
+      acc[key] = value
+    }
+  }
+  return acc
+}