@vitus-labs/rocketstyle 2.6.1 → 2.7.0

package/lib/index.js

@@ -1,5 +1,5 @@
 import { Provider as Provider$1, compose, config, context, get, hoistNonReactStatics, isEmpty, merge, omit, pick, render, set, useStableValue } from "@vitus-labs/core";
-import { createContext, useCallback, useContext, useImperativeHandle, useMemo, useRef, useState } from "react";
+import { createContext, memo, useContext, useImperativeHandle, useMemo, useRef, useState } from "react";
 import { jsx } from "react/jsx-runtime";
 
 //#region src/constants/index.ts
@@ -14,6 +14,12 @@ 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.tsx`'s render
+* body so the `pick(props, [...PSEUDO_KEYS, ...PSEUDO_META_KEYS])` call no
+* longer allocates a fresh 6-element array on every render.
+*/
+const PSEUDO_AND_META_KEYS = [...PSEUDO_KEYS, ...PSEUDO_META_KEYS];
 /** Supported theme mode flags. */
 const THEME_MODES = {
 	light: true,
@@ -119,36 +125,59 @@ var ThemeManager = class {
 * Tracks hover, focus, and pressed pseudo-states via mouse and focus
 * event handlers. Returns the current state flags and wrapped event
 * callbacks that preserve any user-provided handlers.
+*
+* Consumer handlers are captured in a ref so the wrapped event callbacks
+* keep stable identity across re-renders — otherwise inline arrow
+* handlers (`onClick={() => …}`) would re-create the wrappers every
+* render and defeat downstream memoization.
 */
 const usePseudoState = ({ onBlur, onFocus, onMouseDown, onMouseEnter, onMouseLeave, onMouseUp }) => {
 	const [hover, setHover] = useState(false);
 	const [focus, setFocus] = useState(false);
 	const [pressed, setPressed] = useState(false);
-	const handleOnMouseEnter = useCallback((e) => {
-		setHover(true);
-		if (onMouseEnter) onMouseEnter(e);
-	}, [onMouseEnter]);
-	const handleOnMouseLeave = useCallback((e) => {
-		setHover(false);
-		setPressed(false);
-		if (onMouseLeave) onMouseLeave(e);
-	}, [onMouseLeave]);
-	const handleOnMouseDown = useCallback((e) => {
-		setPressed(true);
-		if (onMouseDown) onMouseDown(e);
-	}, [onMouseDown]);
-	const handleOnMouseUp = useCallback((e) => {
-		setPressed(false);
-		if (onMouseUp) onMouseUp(e);
-	}, [onMouseUp]);
-	const handleOnFocus = useCallback((e) => {
-		setFocus(true);
-		if (onFocus) onFocus(e);
-	}, [onFocus]);
-	const handleOnBlur = useCallback((e) => {
-		setFocus(false);
-		if (onBlur) onBlur(e);
-	}, [onBlur]);
+	const latest = useRef({
+		onBlur,
+		onFocus,
+		onMouseDown,
+		onMouseEnter,
+		onMouseLeave,
+		onMouseUp
+	});
+	latest.current = {
+		onBlur,
+		onFocus,
+		onMouseDown,
+		onMouseEnter,
+		onMouseLeave,
+		onMouseUp
+	};
+	const events = useMemo(() => ({
+		onMouseEnter: (e) => {
+			setHover(true);
+			latest.current.onMouseEnter?.(e);
+		},
+		onMouseLeave: (e) => {
+			setHover(false);
+			setPressed(false);
+			latest.current.onMouseLeave?.(e);
+		},
+		onMouseDown: (e) => {
+			setPressed(true);
+			latest.current.onMouseDown?.(e);
+		},
+		onMouseUp: (e) => {
+			setPressed(false);
+			latest.current.onMouseUp?.(e);
+		},
+		onFocus: (e) => {
+			setFocus(true);
+			latest.current.onFocus?.(e);
+		},
+		onBlur: (e) => {
+			setFocus(false);
+			latest.current.onBlur?.(e);
+		}
+	}), []);
 	return {
 		state: useMemo(() => ({
 			hover,
@@ -159,21 +188,7 @@ const usePseudoState = ({ onBlur, onFocus, onMouseDown, onMouseEnter, onMouseLea
 			focus,
 			pressed
 		]),
-		events: useMemo(() => ({
-			onMouseEnter: handleOnMouseEnter,
-			onMouseLeave: handleOnMouseLeave,
-			onMouseDown: handleOnMouseDown,
-			onMouseUp: handleOnMouseUp,
-			onFocus: handleOnFocus,
-			onBlur: handleOnBlur
-		}), [
-			handleOnMouseEnter,
-			handleOnMouseLeave,
-			handleOnMouseDown,
-			handleOnMouseUp,
-			handleOnFocus,
-			handleOnBlur
-		])
+		events
 	};
 };
 
@@ -186,8 +201,8 @@ const usePseudoState = ({ onBlur, onFocus, onMouseDown, onMouseEnter, onMouseLea
 */
 const useRocketstyleRef = ({ $rocketstyleRef, ref }) => {
 	const internalRef = useRef(null);
-	useImperativeHandle($rocketstyleRef, () => internalRef.current);
-	useImperativeHandle(ref, () => internalRef.current);
+	useImperativeHandle($rocketstyleRef, () => internalRef.current, []);
+	useImperativeHandle(ref, () => internalRef.current, []);
 	return internalRef;
 };
 
@@ -202,18 +217,12 @@ const useThemeAttrs = ({ inversed }) => {
 	const { theme = {}, mode: ctxMode = "light", isDark: ctxDark } = useContext(context) || {};
 	const mode = inversed ? THEME_MODES_INVERSED[ctxMode] : ctxMode;
 	const isDark = inversed ? !ctxDark : ctxDark;
-	const isLight = !isDark;
-	return useMemo(() => ({
-		theme,
-		mode,
-		isDark,
-		isLight
-	}), [
+	return {
 		theme,
 		mode,
 		isDark,
-		isLight
-	]);
+		isLight: !isDark
+	};
 };
 
 //#endregion
@@ -281,42 +290,40 @@ const removeUndefinedProps = (props) => {
 	for (const key in props) if (props[key] !== void 0) result[key] = props[key];
 	return result;
 };
-const pickStyledAttrs = (props, keywords) => Object.keys(props).reduce((acc, key) => {
-	if (keywords[key] && props[key]) acc[key] = props[key];
-	return acc;
-}, {});
-const calculateChainOptions = (options) => (args) => {
+const pickStyledAttrs = (props, keywords) => {
 	const result = {};
-	if (isEmpty(options)) return result;
+	for (const key in props) if (keywords[key] && props[key]) result[key] = props[key];
+	return result;
+};
+const calculateChainOptions = (options) => (args) => {
+	if (isEmpty(options)) return {};
 	return options.reduce((acc, item) => Object.assign(acc, item(...args)), {});
 };
 const calculateStylingAttrs = ({ useBooleans, multiKeys }) => ({ props, dimensions }) => {
 	const result = {};
-	Object.keys(dimensions).forEach((item) => {
+	for (const item in dimensions) {
 		const pickedProp = props[item];
 		const t = typeof pickedProp;
 		if (multiKeys?.[item] && Array.isArray(pickedProp)) result[item] = pickedProp;
 		else if (t === "string" || t === "number") result[item] = pickedProp;
 		else result[item] = void 0;
-	});
+	}
 	if (useBooleans) {
 		const propsKeys = Object.keys(props);
-		Object.entries(result).forEach(([key, value]) => {
-			const isMultiKey = multiKeys[key];
-			if (!value) {
-				let newDimensionValue;
-				const keywordSet = new Set(Object.keys(dimensions[key]));
-				if (isMultiKey) newDimensionValue = propsKeys.filter((key) => keywordSet.has(key));
-				else for (let i = propsKeys.length - 1; i >= 0; i--) {
-					const k = propsKeys[i];
-					if (keywordSet.has(k) && props[k]) {
-						newDimensionValue = k;
-						break;
-					}
+		for (const key in result) if (!result[key]) {
+			const isMultiKey = multiKeys?.[key];
+			let newDimensionValue;
+			const dimObj = dimensions[key];
+			if (isMultiKey) newDimensionValue = propsKeys.filter((k) => Object.hasOwn(dimObj, k));
+			else for (let i = propsKeys.length - 1; i >= 0; i--) {
+				const k = propsKeys[i];
+				if (Object.hasOwn(dimObj, k) && props[k]) {
+					newDimensionValue = k;
+					break;
 				}
-				result[key] = newDimensionValue;
 			}
-		});
+			result[key] = newDimensionValue;
+		}
 	}
 	return result;
 };
@@ -326,33 +333,66 @@ const calculateStylingAttrs = ({ useBooleans, multiKeys }) => ({ props, dimensio
 /**
 * HOC that resolves the `.attrs()` chain before the inner component renders.
 * Evaluates both regular and priority attrs callbacks with the current theme
-* and mode, then merges the results with explicit props (priority attrs
-* are applied first, regular attrs can be overridden by direct props).
+* and mode, then merges the results with explicit props (priority attrs are
+* applied first, regular attrs can be overridden by direct props).
+*
+* Fast path: when no chain is configured (the common case for rocketstyle
+* components built with .theme()/dimensions only), skip the deep-equal
+* stabilization + memo dance and forward props directly. Mirrors the
+* pattern in @vitus-labs/attrs' attrsHoc.
 */
 const rocketStyleHOC = ({ inversed, attrs, priorityAttrs }) => {
 	const calculateAttrs = calculateChainOptions(attrs);
 	const calculatePriorityAttrs = calculateChainOptions(priorityAttrs);
+	const hasAttrs = (attrs?.length ?? 0) > 0;
+	const hasPriorityAttrs = (priorityAttrs?.length ?? 0) > 0;
+	if (!(hasAttrs || hasPriorityAttrs)) {
+		const Enhanced = (WrappedComponent) => {
+			const HOC = ({ ref, ...props }) => {
+				useThemeAttrs({ inversed });
+				return /* @__PURE__ */ jsx(WrappedComponent, {
+					$rocketstyleRef: ref,
+					...props
+				});
+			};
+			return HOC;
+		};
+		return Enhanced;
+	}
 	const Enhanced = (WrappedComponent) => {
 		const HOC = ({ ref, ...props }) => {
 			const { theme, mode, isDark, isLight } = useThemeAttrs({ inversed });
-			const callbackParams = [theme, {
+			const stableProps = useStableValue(props);
+			const filteredProps = useMemo(() => removeUndefinedProps(stableProps), [stableProps]);
+			const themeBag = useMemo(() => ({
 				render,
 				mode,
 				isDark,
 				isLight
-			}];
-			const filteredProps = removeUndefinedProps(props);
-			const prioritizedAttrs = calculatePriorityAttrs([filteredProps, ...callbackParams]);
-			const finalAttrs = calculateAttrs([{
-				...prioritizedAttrs,
-				...filteredProps
-			}, ...callbackParams]);
-			return /* @__PURE__ */ jsx(WrappedComponent, {
-				$rocketstyleRef: ref,
-				...prioritizedAttrs,
-				...finalAttrs,
-				...filteredProps
-			});
+			}), [
+				mode,
+				isDark,
+				isLight
+			]);
+			return /* @__PURE__ */ jsx(WrappedComponent, { ...useMemo(() => {
+				const callbackParams = [theme, themeBag];
+				const prioritizedAttrs = hasPriorityAttrs ? calculatePriorityAttrs([filteredProps, ...callbackParams]) : null;
+				const finalAttrs = hasAttrs ? calculateAttrs([prioritizedAttrs ? {
+					...prioritizedAttrs,
+					...filteredProps
+				} : filteredProps, ...callbackParams]) : null;
+				return {
+					$rocketstyleRef: ref,
+					...prioritizedAttrs,
+					...finalAttrs,
+					...filteredProps
+				};
+			}, [
+				filteredProps,
+				ref,
+				theme,
+				themeBag
+			]) });
 		};
 		return HOC;
 	};
@@ -367,14 +407,22 @@ const chainOptions = (opts, defaultOpts = []) => {
 	else if (typeof opts === "object") result.push(() => opts);
 	return result;
 };
-const chainOrOptions = (keys, opts, defaultOpts) => keys.reduce((acc, item) => ({
-	...acc,
-	[item]: opts[item] || defaultOpts[item]
-}), {});
-const chainReservedKeyOptions = (keys, opts, defaultOpts) => keys.reduce((acc, item) => ({
-	...acc,
-	[item]: chainOptions(opts[item], defaultOpts[item])
-}), {});
+const chainOrOptions = (keys, opts, defaultOpts) => {
+	const result = {};
+	for (let i = 0; i < keys.length; i++) {
+		const item = keys[i];
+		result[item] = opts[item] || defaultOpts[item];
+	}
+	return result;
+};
+const chainReservedKeyOptions = (keys, opts, defaultOpts) => {
+	const result = {};
+	for (let i = 0; i < keys.length; i++) {
+		const item = keys[i];
+		result[item] = chainOptions(opts[item], defaultOpts[item]);
+	}
+	return result;
+};
 
 //#endregion
 //#region src/utils/compose.ts
@@ -443,10 +491,11 @@ const calculateStyles = (styles) => {
 
 //#endregion
 //#region src/utils/collection.ts
-const removeNullableValues = (obj) => Object.entries(obj).filter(([, v]) => v != null && v !== false).reduce((acc, [k, v]) => ({
-	...acc,
-	[k]: v
-}), {});
+const removeNullableValues = (obj) => {
+	const result = {};
+	for (const [k, v] of Object.entries(obj)) if (v != null && v !== false) result[k] = v;
+	return result;
+};
 
 //#endregion
 //#region src/utils/theme.ts
@@ -494,13 +543,16 @@ const getTheme = ({ rocketstate, themes, baseTheme, transformKeys, appTheme }) =
 	for (const transform of deferredTransforms) merge(finalTheme, transform(finalTheme, appTheme ?? {}, themeModeCallback, config.css));
 	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.tsx
@@ -519,16 +571,18 @@ const arraysEqual = (a, b) => {
 const isShallowEqualRocketstate = (a, b) => {
 	if (a === b) return true;
 	if (!a || !b) return false;
-	const aKeys = Object.keys(a);
-	if (aKeys.length !== Object.keys(b).length) return false;
-	for (const k of aKeys) {
+	let aCount = 0;
+	for (const k in a) {
+		aCount++;
 		const av = a[k];
 		const bv = b[k];
 		if (av === bv) continue;
 		if (Array.isArray(av) && Array.isArray(bv) && arraysEqual(av, bv)) continue;
 		return false;
 	}
-	return true;
+	let bCount = 0;
+	for (const _ in b) bCount++;
+	return aCount === bCount;
 };
 /**
 * Clones the current configuration and merges new options, returning a fresh
@@ -613,13 +667,18 @@ const rocketComponent = (options) => {
 			useBooleans: options.useBooleans
 		}), [themes]);
 		const RESERVED_STYLING_PROPS_KEYS = useMemo(() => Object.keys(reservedPropNames), [reservedPropNames]);
+		const omitKeysSet = useMemo(() => new Set([
+			...RESERVED_STYLING_PROPS_KEYS,
+			...PSEUDO_KEYS,
+			...options.filterAttrs
+		]), [RESERVED_STYLING_PROPS_KEYS]);
 		const { pseudo, ...mergeProps } = {
 			...localCtx,
 			...props
 		};
 		const pseudoRocketstate = {
 			...pseudo,
-			...pick(props, [...PSEUDO_KEYS, ...PSEUDO_META_KEYS])
+			...pick(props, PSEUDO_AND_META_KEYS)
 		};
 		const rocketstate = _calculateStylingAttrs({
 			props: pickStyledAttrs(mergeProps, reservedPropNames),
@@ -645,11 +704,7 @@ const rocketComponent = (options) => {
 			theme
 		]);
 		const finalProps = {
-			...omit(mergeProps, [
-				...RESERVED_STYLING_PROPS_KEYS,
-				...PSEUDO_KEYS,
-				...options.filterAttrs
-			]),
+			...omit(mergeProps, omitKeysSet),
 			...options.passProps ? pick(mergeProps, options.passProps) : {},
 			ref: ref ?? $rocketstyleRef ? internalRef : void 0,
 			$rocketstyle: rocketstyle,
@@ -672,7 +727,7 @@ const rocketComponent = (options) => {
 		}
 		return /* @__PURE__ */ jsx(RenderComponent, { ...finalProps });
 	};
-	const RocketComponent = compose(...hocsFuncs)(EnhancedComponent);
+	const RocketComponent = compose(...hocsFuncs)(memo(EnhancedComponent));
 	RocketComponent.IS_ROCKETSTYLE = true;
 	RocketComponent.displayName = componentName;
 	hoistNonReactStatics(RocketComponent, options.component);
@@ -682,8 +737,6 @@ const rocketComponent = (options) => {
 		func: cloneAndEnhance,
 		options
 	});
-	RocketComponent.IS_ROCKETSTYLE = true;
-	RocketComponent.displayName = componentName;
 	RocketComponent.meta = {};
 	createStaticsEnhancers({
 		context: RocketComponent.meta,
@@ -732,16 +785,14 @@ const rocketComponent = (options) => {
 
 //#endregion
 //#region src/init.ts
+const RESERVED_KEYS_SET = new Set(ALL_RESERVED_KEYS);
 const validateInit = (name, component, dimensions) => {
 	const errors = {};
 	if (!component) errors.component = "Parameter `component` is missing in params!";
 	if (!name) errors.name = "Parameter `name` is missing in params!";
 	if (isEmpty(dimensions)) errors.dimensions = "Parameter `dimensions` is missing in params!";
-	else {
-		const definedDimensions = getKeys(dimensions);
-		if (ALL_RESERVED_KEYS.some((item) => definedDimensions.some((d) => d === item))) errors.invalidDimensions = `Some of your \`dimensions\` is invalid and uses reserved static keys which are
+	else if (getKeys(dimensions).some((d) => RESERVED_KEYS_SET.has(d))) errors.invalidDimensions = `Some of your \`dimensions\` is invalid and uses reserved static keys which are
           ${DEFAULT_DIMENSIONS.toString()}`;
-	}
 	if (!isEmpty(errors)) throw Error(JSON.stringify(errors));
 };
 /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vitus-labs/rocketstyle",
-  "version": "2.6.1",
+  "version": "2.7.0",
   "license": "MIT",
   "author": "Vit Bokisch <vit@bokisch.cz>",
   "maintainers": [
@@ -56,6 +56,7 @@
     "prepublish": "bun run build",
     "build": "bun run vl_rolldown_build",
     "build:watch": "bun run vl_rolldown_build-watch",
+    "bench": "bun benchmarks/render-bench.tsx",
     "lint": "biome check src/",
     "test": "vitest run",
     "test:coverage": "vitest run --coverage",
@@ -64,15 +65,19 @@
     "typecheck": "tsc --noEmit"
   },
   "peerDependencies": {
-    "@vitus-labs/core": "^2.6.1",
+    "@vitus-labs/core": "^2.7.0",
     "react": ">= 19"
   },
   "devDependencies": {
+    "@vitus-labs/connector-styler": "workspace:*",
     "@vitus-labs/core": "workspace:*",
     "@vitus-labs/elements": "workspace:*",
-    "@vitus-labs/tools-rolldown": "2.3.1",
-    "@vitus-labs/tools-storybook": "2.3.1",
-    "@vitus-labs/tools-typescript": "2.3.1",
-    "@vitus-labs/unistyle": "workspace:*"
+    "@vitus-labs/styler": "workspace:*",
+    "@vitus-labs/tools-rolldown": "2.5.0",
+    "@vitus-labs/tools-storybook": "2.5.0",
+    "@vitus-labs/tools-typescript": "2.5.0",
+    "@vitus-labs/unistyle": "workspace:*",
+    "jsdom": "^29.1.1",
+    "tinybench": "^6.0.1"
   }
 }