@vitus-labs/rocketstyle 2.0.0-beta.0 → 2.0.0-beta.1

package/lib/index.d.ts

@@ -1,5 +1,5 @@
 import { config, context, render } from "@vitus-labs/core";
-import { ComponentType, FC, FocusEventHandler, ForwardRefExoticComponent, MouseEventHandler, ReactNode } from "react";
+import { ComponentType, FC, FocusEventHandler, MouseEventHandler, ReactNode } from "react";
 
 //#region src/context/context.d.ts
 type Theme$1 = {
@@ -66,11 +66,9 @@ type PseudoProps = Partial<PseudoState & PseudoActions>;
 type TObj = Record<string, unknown>;
 type TFn = (...args: any) => any;
 type CallBackParam = TObj | TFn;
-type ElementType<T extends TObj | unknown = any> = (ComponentType<T> & Partial<{
+type ElementType<T extends TObj | unknown = any> = ComponentType<T> & Partial<{
   [key: string]: any;
-}>) | (ForwardRefExoticComponent<T> & {
-  [key: string]: any;
-});
+}>;
 type ValueOf<T> = T[keyof T];
 type ArrayOfValues<T> = T[keyof T][];
 type ArrayOfKeys<T> = Array<keyof T>;
@@ -83,7 +81,7 @@ type ExtractNullableKeys<T> = { [P in keyof T as IsAny<T[P]> extends true ? P :
 type SpreadTwo<L, R> = Id<Pick<L, Exclude<keyof L, keyof R>> & R>;
 type Spread<A extends readonly [...any]> = A extends [infer L, ...infer R] ? SpreadTwo<L, Spread<R>> : unknown;
 type MergeTypes<A extends readonly [...any]> = ExtractNullableKeys<Spread<A>>;
-type ExtractProps<TComponentOrTProps> = TComponentOrTProps extends ComponentType<infer TProps> ? TProps : TComponentOrTProps extends ForwardRefExoticComponent<infer TProps> ? TProps : TComponentOrTProps;
+type ExtractProps<TComponentOrTProps> = TComponentOrTProps extends ComponentType<infer TProps> ? TProps : TComponentOrTProps;
 //#endregion
 //#region src/types/styles.d.ts
 interface StylesDefault {}
@@ -219,10 +217,6 @@ type GenericHoc = (component: ElementType) => ElementType;
 type ComposeParam = Record<string, GenericHoc | null | undefined | false>;
 //#endregion
 //#region src/types/rocketstyle.d.ts
-interface ExoticComponent<P = {}> {
-  (props: P): ReactNode;
-  readonly $$typeof: symbol;
-}
 type RocketStyleComponent<OA extends TObj = {}, EA extends TObj = {}, T extends TObj = {}, CSS extends TObj = {}, S extends TObj = {}, HOC extends TObj = {}, D extends Dimensions = Dimensions, UB extends boolean = boolean, DKP extends TDKP = TDKP> = IRocketStyleComponent<OA, EA, T, CSS, S, HOC, D, UB, DKP> & { [I in keyof D]: <K extends DimensionValue = D[I], P extends DimensionCallbackParam<Theme<T>, Styles<CSS>> = DimensionCallbackParam<Theme<T>, Styles<CSS>>>(param: P) => P extends DimensionCallbackParam<Theme<T>, Styles<CSS>> ? RocketStyleComponent<OA, EA, T, CSS, S, HOC, D, UB, DimensionProps<K, D, P, DKP>> : RocketStyleComponent<OA, EA, T, CSS, S, HOC, D, UB, DKP> };
 /**
  * @param OA   Origin component props params.
@@ -235,7 +229,10 @@ type RocketStyleComponent<OA extends TObj = {}, EA extends TObj = {}, T extends
  * @param DKP  Dimensions key props.
  * @param DFP  Calculated final component props
  */
-interface IRocketStyleComponent<OA extends TObj = {}, EA extends TObj = {}, T extends TObj = {}, CSS extends TObj = {}, S extends TObj = {}, HOC extends TObj = {}, D extends Dimensions = Dimensions, UB extends boolean = boolean, DKP extends TDKP = TDKP, DFP = MergeTypes<[OA, EA, DefaultProps, ExtractDimensionProps<D, DKP, UB>]>> extends ExoticComponent<DFP> {
+interface IRocketStyleComponent<OA extends TObj = {}, EA extends TObj = {}, T extends TObj = {}, CSS extends TObj = {}, S extends TObj = {}, HOC extends TObj = {}, D extends Dimensions = Dimensions, UB extends boolean = boolean, DKP extends TDKP = TDKP, DFP = MergeTypes<[OA, EA, DefaultProps, ExtractDimensionProps<D, DKP, UB>]>> {
+  (props: DFP & {
+    ref?: any;
+  }): ReactNode;
   /**
    * A chaining method to define default component theme
    * @param param  _object_
@@ -575,11 +572,11 @@ type Rocketstyle = <D extends Dimensions = DefaultDimensions, UB extends boolean
   name: string;
   component: C;
 }) => ReturnType<RocketComponent<C, {}, {}, D, UB>>;
-declare const rocketstyle: Rocketstyle;
+declare const typedRocketstyle: Rocketstyle;
 //#endregion
 //#region src/isRocketComponent.d.ts
 type IsRocketComponent = <T>(component: T) => boolean;
 declare const isRocketComponent: IsRocketComponent;
 //#endregion
-export { type AttrsCb, type ComposeParam, type ConfigAttrs, type ConsumerCb, type ConsumerCtxCBValue, type ConsumerCtxCb, type DefaultProps, type DimensionCallbackParam, type DimensionProps, type DimensionValue, type Dimensions, type ElementType, type ExtractDimensionProps, type ExtractDimensions, type ExtractProps, type GenericHoc, type IRocketStyleComponent, type IsRocketComponent, type MergeTypes, Provider, type RocketComponentType, type RocketProviderState, type RocketStyleComponent, type RocketStyleInterpolationProps, type Rocketstyle, type StylesCb, type StylesDefault, type TDKP, type TObj, type TProvider, type ThemeCb, type ThemeDefault, type ThemeMode, type ThemeModeCallback, type ThemeModeKeys, context, rocketstyle as default, rocketstyle, isRocketComponent };
+export { type AttrsCb, type ComposeParam, type ConfigAttrs, type ConsumerCb, type ConsumerCtxCBValue, type ConsumerCtxCb, type DefaultProps, type DimensionCallbackParam, type DimensionProps, type DimensionValue, type Dimensions, type ElementType, type ExtractDimensionProps, type ExtractDimensions, type ExtractProps, type GenericHoc, type IRocketStyleComponent, type IsRocketComponent, type MergeTypes, Provider, type RocketComponentType, type RocketProviderState, type RocketStyleComponent, type RocketStyleInterpolationProps, type Rocketstyle, type StylesCb, type StylesDefault, type TDKP, type TObj, type TProvider, type ThemeCb, type ThemeDefault, type ThemeMode, type ThemeModeCallback, type ThemeModeKeys, context, typedRocketstyle as default, typedRocketstyle as rocketstyle, isRocketComponent };
 //# sourceMappingURL=index2.d.ts.map

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, forwardRef, useCallback, useContext, useImperativeHandle, useMemo, useRef, useState } from "react";
+import { createContext, useCallback, useContext, useImperativeHandle, useMemo, useRef, useState } from "react";
 import { jsx } from "react/jsx-runtime";
 
 //#region src/constants/index.ts
@@ -244,32 +244,35 @@ const LocalProvider = context$1.Provider;
 * detecting pseudo-states (hover, focus, pressed) via mouse/focus events
 * and broadcasting them through local context to child rocketstyle components.
 */
-const RocketStyleProviderComponent = (WrappedComponent) => forwardRef(({ onMouseEnter, onMouseLeave, onMouseUp, onMouseDown, onFocus, onBlur, $rocketstate, ...props }, ref) => {
-	const { state: pseudoState, events: pseudoEvents } = usePseudoState({
-		onMouseEnter,
-		onMouseLeave,
-		onMouseUp,
-		onMouseDown,
-		onFocus,
-		onBlur
-	});
-	const updatedState = useStableValue({
-		...$rocketstate,
-		pseudo: {
-			...$rocketstate.pseudo,
-			...pseudoState
-		}
-	});
-	return /* @__PURE__ */ jsx(LocalProvider, {
-		value: updatedState,
-		children: /* @__PURE__ */ jsx(WrappedComponent, {
-			...props,
-			...pseudoEvents,
-			ref,
-			$rocketstate: updatedState
-		})
-	});
-});
+const RocketStyleProviderComponent = (WrappedComponent) => {
+	const HOC = ({ onMouseEnter, onMouseLeave, onMouseUp, onMouseDown, onFocus, onBlur, $rocketstate, ref, ...props }) => {
+		const { state: pseudoState, events: pseudoEvents } = usePseudoState({
+			onMouseEnter,
+			onMouseLeave,
+			onMouseUp,
+			onMouseDown,
+			onFocus,
+			onBlur
+		});
+		const updatedState = useStableValue({
+			...$rocketstate,
+			pseudo: {
+				...$rocketstate.pseudo,
+				...pseudoState
+			}
+		});
+		return /* @__PURE__ */ jsx(LocalProvider, {
+			value: updatedState,
+			children: /* @__PURE__ */ jsx(WrappedComponent, {
+				...props,
+				...pseudoEvents,
+				ref,
+				$rocketstate: updatedState
+			})
+		});
+	};
+	return HOC;
+};
 
 //#endregion
 //#region src/utils/attrs.ts
@@ -329,27 +332,30 @@ const calculateStylingAttrs = ({ useBooleans, multiKeys }) => ({ props, dimensio
 const rocketStyleHOC = ({ inversed, attrs, priorityAttrs }) => {
 	const calculateAttrs = calculateChainOptions(attrs);
 	const calculatePriorityAttrs = calculateChainOptions(priorityAttrs);
-	const Enhanced = (WrappedComponent) => forwardRef((props, ref) => {
-		const { theme, mode, isDark, isLight } = useThemeAttrs({ inversed });
-		const callbackParams = [theme, {
-			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
-		});
-	});
+	const Enhanced = (WrappedComponent) => {
+		const HOC = ({ ref, ...props }) => {
+			const { theme, mode, isDark, isLight } = useThemeAttrs({ inversed });
+			const callbackParams = [theme, {
+				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
+			});
+		};
+		return HOC;
+	};
 	return Enhanced;
 };
 
@@ -471,20 +477,21 @@ const getDimensionThemes = (theme, options) => {
 	}, result);
 };
 const getTheme = ({ rocketstate, themes, baseTheme, transformKeys, appTheme }) => {
-	let finalTheme = { ...baseTheme };
+	const finalTheme = { ...baseTheme };
 	const deferredTransforms = [];
 	Object.entries(rocketstate).forEach(([key, value]) => {
 		const keyTheme = themes[key];
 		const isTransform = transformKeys?.[key];
 		const mergeValue = (item) => {
 			const val = keyTheme[item];
+			if (val == null) return;
 			if (isTransform && typeof val === "function") deferredTransforms.push(val);
-			else finalTheme = merge({}, finalTheme, val);
+			else merge(finalTheme, val);
 		};
 		if (Array.isArray(value)) value.forEach(mergeValue);
 		else mergeValue(value);
 	});
-	for (const transform of deferredTransforms) finalTheme = merge({}, finalTheme, transform(finalTheme, appTheme ?? {}, themeModeCallback, config.css));
+	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) => {
@@ -497,6 +504,32 @@ const getThemeByMode = (object, mode) => Object.keys(object).reduce((acc, key) =
 
 //#endregion
 //#region src/rocketstyle.tsx
+/**
+* Core rocketstyle component factory. Creates a fully-featured React component
+* that integrates theme management (with light/dark mode support), multi-tier
+* WeakMap caching, dimension-based styling props, pseudo-state detection, and
+* chainable static methods (`.attrs()`, `.theme()`, `.styles()`, `.config()`, etc.).
+* @module rocketstyle
+*/
+const arraysEqual = (a, b) => {
+	if (a.length !== b.length) return false;
+	for (let i = 0; i < a.length; i++) if (a[i] !== b[i]) return false;
+	return true;
+};
+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) {
+		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;
+};
 /** Clones the current configuration and merges new options, returning a fresh rocketComponent. */
 const cloneAndEnhance = (defaultOpts, opts) => rocketComponent({
 	...defaultOpts,
@@ -520,7 +553,7 @@ const cloneAndEnhance = (defaultOpts, opts) => rocketComponent({
 * chainable static enhancers attached to the returned component.
 */
 const rocketComponent = (options) => {
-	const { component, styles } = options;
+	const { component, styles, transformKeys } = options;
 	const { styled } = config;
 	const _calculateStylingAttrs = calculateStylingAttrs({
 		multiKeys: options.multiKeys,
@@ -533,7 +566,7 @@ const rocketComponent = (options) => {
 	const RenderComponent = options.provider ? RocketStyleProviderComponent(STYLED_COMPONENT) : STYLED_COMPONENT;
 	const ThemeManager$1 = new ThemeManager();
 	const hocsFuncs = [rocketStyleHOC(options), ...calculateHocsFuncs(options.compose)];
-	const EnhancedComponent = forwardRef(({ $rocketstyleRef, ...props }, ref) => {
+	const EnhancedComponent = ({ $rocketstyleRef, ref, ...props }) => {
 		const internalRef = useRocketstyleRef({
 			$rocketstyleRef,
 			ref
@@ -581,20 +614,17 @@ const rocketComponent = (options) => {
 			...rocketstate,
 			pseudo: pseudoRocketstate
 		};
-		let rsKey = "";
-		for (const k in rocketstate) {
-			const v = rocketstate[k];
-			rsKey += `${k}=`;
-			rsKey += `${Array.isArray(v) ? v.join(",") : v}|`;
-		}
+		const rocketstateRef = useRef(rocketstate);
+		if (!isShallowEqualRocketstate(rocketstateRef.current, rocketstate)) rocketstateRef.current = rocketstate;
+		const stableRocketstate = rocketstateRef.current;
 		const rocketstyle = useMemo(() => getTheme({
-			rocketstate,
+			rocketstate: stableRocketstate,
 			themes: currentModeThemes,
 			baseTheme: currentModeBaseTheme,
-			transformKeys: options.transformKeys,
+			transformKeys,
 			appTheme: theme
 		}), [
-			rsKey,
+			stableRocketstate,
 			currentModeThemes,
 			currentModeBaseTheme,
 			theme
@@ -626,7 +656,7 @@ const rocketComponent = (options) => {
 			}
 		}
 		return /* @__PURE__ */ jsx(RenderComponent, { ...finalProps });
-	});
+	};
 	const RocketComponent = compose(...hocsFuncs)(EnhancedComponent);
 	RocketComponent.IS_ROCKETSTYLE = true;
 	RocketComponent.displayName = componentName;
@@ -699,32 +729,44 @@ const validateInit = (name, component, dimensions) => {
 	}
 	if (!isEmpty(errors)) throw Error(JSON.stringify(errors));
 };
-const rocketstyle = ({ dimensions = DEFAULT_DIMENSIONS, useBooleans = true } = {}) => ({ name, component }) => {
-	if (process.env.NODE_ENV !== "production") validateInit(name, component, dimensions);
-	return rocketComponent({
-		name,
-		component,
-		useBooleans,
-		dimensions,
-		dimensionKeys: getKeys(dimensions),
-		dimensionValues: getDimensionsValues(dimensions),
-		multiKeys: getMultipleDimensions(dimensions),
-		transformKeys: getTransformDimensions(dimensions),
-		styled: true
-	});
+/**
+* Generic implementation. The `D | DefaultDimensions` runtime fallback is
+* narrowed to `D` via a single cast — semantically correct because when no
+* user dimensions are supplied, `D` *is* the default (its type-parameter
+* default is `DefaultDimensions`). This single boundary cast replaces the
+* file-wide `@ts-nocheck` previously used here.
+*/
+const rocketstyle = (params) => {
+	const dimensions = params?.dimensions ?? DEFAULT_DIMENSIONS;
+	const useBooleans = params?.useBooleans ?? true;
+	return ({ name, component }) => {
+		if (process.env.NODE_ENV !== "production") validateInit(name, component, dimensions);
+		return rocketComponent({
+			name,
+			component,
+			useBooleans,
+			dimensions,
+			dimensionKeys: getKeys(dimensions),
+			dimensionValues: getDimensionsValues(dimensions),
+			multiKeys: getMultipleDimensions(dimensions),
+			transformKeys: getTransformDimensions(dimensions),
+			styled: true
+		});
+	};
 };
+const typedRocketstyle = rocketstyle;
 
 //#endregion
 //#region src/isRocketComponent.tsx
 const isRocketComponent = (component) => {
-	if (component && typeof component === "object" && component !== null && Object.hasOwn(component, "IS_ROCKETSTYLE")) return true;
+	if (component && (typeof component === "object" || typeof component === "function") && Object.hasOwn(component, "IS_ROCKETSTYLE")) return true;
 	return false;
 };
 
 //#endregion
 //#region src/index.ts
-var src_default = rocketstyle;
+var src_default = typedRocketstyle;
 
 //#endregion
-export { Provider, context, src_default as default, isRocketComponent, rocketstyle };
+export { Provider, context, src_default as default, isRocketComponent, typedRocketstyle as rocketstyle };
 //# sourceMappingURL=index.js.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vitus-labs/rocketstyle",
-  "version": "2.0.0-beta.0",
+  "version": "2.0.0-beta.1",
   "license": "MIT",
   "author": "Vit Bokisch <vit@bokisch.cz>",
   "maintainers": [
@@ -65,16 +65,15 @@
     "version": "node ../../scripts/sync-peer-deps.mjs"
   },
   "peerDependencies": {
-    "@vitus-labs/core": "2.0.0-alpha.27",
+    "@vitus-labs/core": "2.0.0-beta.1",
     "react": ">= 19"
   },
   "devDependencies": {
-    "@vitus-labs/core": "2.0.0-beta.0",
-    "@vitus-labs/elements": "2.0.0-beta.0",
-    "@vitus-labs/tools-rolldown": "1.10.0",
-    "@vitus-labs/tools-storybook": "1.10.0",
-    "@vitus-labs/tools-typescript": "1.10.0",
-    "@vitus-labs/unistyle": "2.0.0-beta.0"
-  },
-  "gitHead": "dd8b9f356086ecd8bfb69c87fcad1e8bfa9ab1f4"
+    "@vitus-labs/core": "workspace:*",
+    "@vitus-labs/elements": "workspace:*",
+    "@vitus-labs/tools-rolldown": "2.2.0",
+    "@vitus-labs/tools-storybook": "2.2.0",
+    "@vitus-labs/tools-typescript": "2.1.0",
+    "@vitus-labs/unistyle": "workspace:*"
+  }
 }

package/LICENSE

@@ -1,21 +0,0 @@
-MIT License
-
-Copyright (c) 2023-present Vit Bokisch
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.