@vitus-labs/rocketstyle 2.0.0-alpha.27 → 2.0.0-alpha.29
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +4 -4
- package/lib/index.d.ts +10 -13
- package/lib/index.js +157 -98
- package/package.json +10 -10
- package/LICENSE +0 -21
package/README.md
CHANGED
|
@@ -5,7 +5,7 @@ Multi-dimensional styling system for React.
|
|
|
5
5
|
[](https://www.npmjs.com/package/@vitus-labs/rocketstyle)
|
|
6
6
|
[](https://github.com/vitus-labs/ui-system/blob/main/LICENSE)
|
|
7
7
|
|
|
8
|
-
Organize component styles by dimensions — states, sizes, variants — instead of flat props. Chain theme values, attach
|
|
8
|
+
Organize component styles by dimensions — states, sizes, variants — instead of flat props. Chain theme values, attach CSS via the active connector, and get full TypeScript inference. Built-in pseudo-state handling, light/dark mode, and provider/consumer patterns for parent-child state propagation.
|
|
9
9
|
|
|
10
10
|
## Features
|
|
11
11
|
|
|
@@ -21,7 +21,7 @@ Organize component styles by dimensions — states, sizes, variants — instead
|
|
|
21
21
|
## Installation
|
|
22
22
|
|
|
23
23
|
```bash
|
|
24
|
-
npm install @vitus-labs/rocketstyle @vitus-labs/core
|
|
24
|
+
npm install @vitus-labs/rocketstyle @vitus-labs/core
|
|
25
25
|
```
|
|
26
26
|
|
|
27
27
|
## Quick Start
|
|
@@ -110,7 +110,7 @@ Pseudo-state keys nest directly in the theme object:
|
|
|
110
110
|
|
|
111
111
|
### Styles Function
|
|
112
112
|
|
|
113
|
-
The `.styles()` method defines the
|
|
113
|
+
The `.styles()` method defines the CSS template that receives the computed theme:
|
|
114
114
|
|
|
115
115
|
```tsx
|
|
116
116
|
.styles((css) => css`
|
|
@@ -200,7 +200,7 @@ Button.states((theme, mode, css) => ({
|
|
|
200
200
|
|
|
201
201
|
### .styles(callback)
|
|
202
202
|
|
|
203
|
-
Define the
|
|
203
|
+
Define the CSS template using the active connector's `css` tagged template.
|
|
204
204
|
|
|
205
205
|
```tsx
|
|
206
206
|
Button.styles((css) => css`
|
package/lib/index.d.ts
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { config, context, render } from "@vitus-labs/core";
|
|
2
|
-
import { ComponentType, FC, FocusEventHandler,
|
|
2
|
+
import { ComponentType, FC, FocusEventHandler, MouseEventHandler, ReactNode } from "react";
|
|
3
3
|
|
|
4
4
|
//#region src/context/context.d.ts
|
|
5
5
|
type Theme$1 = {
|
|
@@ -66,11 +66,9 @@ type PseudoProps = Partial<PseudoState & PseudoActions>;
|
|
|
66
66
|
type TObj = Record<string, unknown>;
|
|
67
67
|
type TFn = (...args: any) => any;
|
|
68
68
|
type CallBackParam = TObj | TFn;
|
|
69
|
-
type ElementType<T extends TObj | unknown = any> =
|
|
69
|
+
type ElementType<T extends TObj | unknown = any> = ComponentType<T> & Partial<{
|
|
70
70
|
[key: string]: any;
|
|
71
|
-
}
|
|
72
|
-
[key: string]: any;
|
|
73
|
-
});
|
|
71
|
+
}>;
|
|
74
72
|
type ValueOf<T> = T[keyof T];
|
|
75
73
|
type ArrayOfValues<T> = T[keyof T][];
|
|
76
74
|
type ArrayOfKeys<T> = Array<keyof T>;
|
|
@@ -83,7 +81,7 @@ type ExtractNullableKeys<T> = { [P in keyof T as IsAny<T[P]> extends true ? P :
|
|
|
83
81
|
type SpreadTwo<L, R> = Id<Pick<L, Exclude<keyof L, keyof R>> & R>;
|
|
84
82
|
type Spread<A extends readonly [...any]> = A extends [infer L, ...infer R] ? SpreadTwo<L, Spread<R>> : unknown;
|
|
85
83
|
type MergeTypes<A extends readonly [...any]> = ExtractNullableKeys<Spread<A>>;
|
|
86
|
-
type ExtractProps<TComponentOrTProps> = TComponentOrTProps extends ComponentType<infer TProps> ? TProps : TComponentOrTProps
|
|
84
|
+
type ExtractProps<TComponentOrTProps> = TComponentOrTProps extends ComponentType<infer TProps> ? TProps : TComponentOrTProps;
|
|
87
85
|
//#endregion
|
|
88
86
|
//#region src/types/styles.d.ts
|
|
89
87
|
interface StylesDefault {}
|
|
@@ -219,10 +217,6 @@ type GenericHoc = (component: ElementType) => ElementType;
|
|
|
219
217
|
type ComposeParam = Record<string, GenericHoc | null | undefined | false>;
|
|
220
218
|
//#endregion
|
|
221
219
|
//#region src/types/rocketstyle.d.ts
|
|
222
|
-
interface ExoticComponent<P = {}> {
|
|
223
|
-
(props: P): ReactNode;
|
|
224
|
-
readonly $$typeof: symbol;
|
|
225
|
-
}
|
|
226
220
|
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> };
|
|
227
221
|
/**
|
|
228
222
|
* @param OA Origin component props params.
|
|
@@ -235,7 +229,10 @@ type RocketStyleComponent<OA extends TObj = {}, EA extends TObj = {}, T extends
|
|
|
235
229
|
* @param DKP Dimensions key props.
|
|
236
230
|
* @param DFP Calculated final component props
|
|
237
231
|
*/
|
|
238
|
-
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>]>>
|
|
232
|
+
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>]>> {
|
|
233
|
+
(props: DFP & {
|
|
234
|
+
ref?: any;
|
|
235
|
+
}): ReactNode;
|
|
239
236
|
/**
|
|
240
237
|
* A chaining method to define default component theme
|
|
241
238
|
* @param param _object_
|
|
@@ -575,11 +572,11 @@ type Rocketstyle = <D extends Dimensions = DefaultDimensions, UB extends boolean
|
|
|
575
572
|
name: string;
|
|
576
573
|
component: C;
|
|
577
574
|
}) => ReturnType<RocketComponent<C, {}, {}, D, UB>>;
|
|
578
|
-
declare const
|
|
575
|
+
declare const typedRocketstyle: Rocketstyle;
|
|
579
576
|
//#endregion
|
|
580
577
|
//#region src/isRocketComponent.d.ts
|
|
581
578
|
type IsRocketComponent = <T>(component: T) => boolean;
|
|
582
579
|
declare const isRocketComponent: IsRocketComponent;
|
|
583
580
|
//#endregion
|
|
584
|
-
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,
|
|
581
|
+
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 };
|
|
585
582
|
//# sourceMappingURL=index2.d.ts.map
|
package/lib/index.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { Provider as Provider$1, compose, config, context, get, hoistNonReactStatics, isEmpty, merge, omit, pick, render, set, useStableValue } from "@vitus-labs/core";
|
|
2
|
-
import { createContext,
|
|
2
|
+
import { createContext, useCallback, useContext, useImperativeHandle, useMemo, useRef, useState } from "react";
|
|
3
3
|
import { jsx } from "react/jsx-runtime";
|
|
4
4
|
|
|
5
5
|
//#region src/constants/index.ts
|
|
@@ -202,12 +202,18 @@ const useThemeAttrs = ({ inversed }) => {
|
|
|
202
202
|
const { theme = {}, mode: ctxMode = "light", isDark: ctxDark } = useContext(context) || {};
|
|
203
203
|
const mode = inversed ? THEME_MODES_INVERSED[ctxMode] : ctxMode;
|
|
204
204
|
const isDark = inversed ? !ctxDark : ctxDark;
|
|
205
|
-
|
|
205
|
+
const isLight = !isDark;
|
|
206
|
+
return useMemo(() => ({
|
|
206
207
|
theme,
|
|
207
208
|
mode,
|
|
208
209
|
isDark,
|
|
209
|
-
isLight
|
|
210
|
-
}
|
|
210
|
+
isLight
|
|
211
|
+
}), [
|
|
212
|
+
theme,
|
|
213
|
+
mode,
|
|
214
|
+
isDark,
|
|
215
|
+
isLight
|
|
216
|
+
]);
|
|
211
217
|
};
|
|
212
218
|
|
|
213
219
|
//#endregion
|
|
@@ -218,13 +224,16 @@ const useThemeAttrs = ({ inversed }) => {
|
|
|
218
224
|
* to its rocketstyle children.
|
|
219
225
|
*/
|
|
220
226
|
const context$1 = createContext({});
|
|
227
|
+
const EMPTY_CTX = { pseudo: {} };
|
|
221
228
|
const useLocalContext = (consumer) => {
|
|
222
229
|
const ctx = useContext(context$1);
|
|
223
|
-
|
|
224
|
-
|
|
225
|
-
|
|
226
|
-
|
|
227
|
-
|
|
230
|
+
return useMemo(() => {
|
|
231
|
+
if (!consumer) return EMPTY_CTX;
|
|
232
|
+
return {
|
|
233
|
+
pseudo: {},
|
|
234
|
+
...consumer((callback) => callback(ctx))
|
|
235
|
+
};
|
|
236
|
+
}, [consumer, ctx]);
|
|
228
237
|
};
|
|
229
238
|
const LocalProvider = context$1.Provider;
|
|
230
239
|
|
|
@@ -235,32 +244,35 @@ const LocalProvider = context$1.Provider;
|
|
|
235
244
|
* detecting pseudo-states (hover, focus, pressed) via mouse/focus events
|
|
236
245
|
* and broadcasting them through local context to child rocketstyle components.
|
|
237
246
|
*/
|
|
238
|
-
const RocketStyleProviderComponent = (WrappedComponent) =>
|
|
239
|
-
const {
|
|
240
|
-
|
|
241
|
-
|
|
242
|
-
|
|
243
|
-
|
|
244
|
-
|
|
245
|
-
|
|
246
|
-
|
|
247
|
-
|
|
248
|
-
|
|
249
|
-
|
|
250
|
-
|
|
251
|
-
|
|
252
|
-
|
|
253
|
-
|
|
254
|
-
|
|
255
|
-
|
|
256
|
-
|
|
257
|
-
|
|
258
|
-
|
|
259
|
-
|
|
260
|
-
|
|
261
|
-
|
|
262
|
-
|
|
263
|
-
});
|
|
247
|
+
const RocketStyleProviderComponent = (WrappedComponent) => {
|
|
248
|
+
const HOC = ({ onMouseEnter, onMouseLeave, onMouseUp, onMouseDown, onFocus, onBlur, $rocketstate, ref, ...props }) => {
|
|
249
|
+
const { state: pseudoState, events: pseudoEvents } = usePseudoState({
|
|
250
|
+
onMouseEnter,
|
|
251
|
+
onMouseLeave,
|
|
252
|
+
onMouseUp,
|
|
253
|
+
onMouseDown,
|
|
254
|
+
onFocus,
|
|
255
|
+
onBlur
|
|
256
|
+
});
|
|
257
|
+
const updatedState = useStableValue({
|
|
258
|
+
...$rocketstate,
|
|
259
|
+
pseudo: {
|
|
260
|
+
...$rocketstate.pseudo,
|
|
261
|
+
...pseudoState
|
|
262
|
+
}
|
|
263
|
+
});
|
|
264
|
+
return /* @__PURE__ */ jsx(LocalProvider, {
|
|
265
|
+
value: updatedState,
|
|
266
|
+
children: /* @__PURE__ */ jsx(WrappedComponent, {
|
|
267
|
+
...props,
|
|
268
|
+
...pseudoEvents,
|
|
269
|
+
ref,
|
|
270
|
+
$rocketstate: updatedState
|
|
271
|
+
})
|
|
272
|
+
});
|
|
273
|
+
};
|
|
274
|
+
return HOC;
|
|
275
|
+
};
|
|
264
276
|
|
|
265
277
|
//#endregion
|
|
266
278
|
//#region src/utils/attrs.ts
|
|
@@ -288,17 +300,20 @@ const calculateStylingAttrs = ({ useBooleans, multiKeys }) => ({ props, dimensio
|
|
|
288
300
|
else result[item] = void 0;
|
|
289
301
|
});
|
|
290
302
|
if (useBooleans) {
|
|
291
|
-
const propsKeys = Object.keys(props)
|
|
303
|
+
const propsKeys = Object.keys(props);
|
|
292
304
|
Object.entries(result).forEach(([key, value]) => {
|
|
293
305
|
const isMultiKey = multiKeys[key];
|
|
294
306
|
if (!value) {
|
|
295
307
|
let newDimensionValue;
|
|
296
|
-
const
|
|
297
|
-
if (isMultiKey) newDimensionValue = propsKeys.filter((key) =>
|
|
298
|
-
else
|
|
299
|
-
|
|
300
|
-
|
|
301
|
-
|
|
308
|
+
const keywordSet = new Set(Object.keys(dimensions[key]));
|
|
309
|
+
if (isMultiKey) newDimensionValue = propsKeys.filter((key) => keywordSet.has(key));
|
|
310
|
+
else for (let i = propsKeys.length - 1; i >= 0; i--) {
|
|
311
|
+
const k = propsKeys[i];
|
|
312
|
+
if (keywordSet.has(k) && props[k]) {
|
|
313
|
+
newDimensionValue = k;
|
|
314
|
+
break;
|
|
315
|
+
}
|
|
316
|
+
}
|
|
302
317
|
result[key] = newDimensionValue;
|
|
303
318
|
}
|
|
304
319
|
});
|
|
@@ -317,27 +332,30 @@ const calculateStylingAttrs = ({ useBooleans, multiKeys }) => ({ props, dimensio
|
|
|
317
332
|
const rocketStyleHOC = ({ inversed, attrs, priorityAttrs }) => {
|
|
318
333
|
const calculateAttrs = calculateChainOptions(attrs);
|
|
319
334
|
const calculatePriorityAttrs = calculateChainOptions(priorityAttrs);
|
|
320
|
-
const Enhanced = (WrappedComponent) =>
|
|
321
|
-
const
|
|
322
|
-
|
|
323
|
-
|
|
324
|
-
|
|
325
|
-
|
|
326
|
-
|
|
327
|
-
|
|
328
|
-
|
|
329
|
-
|
|
330
|
-
|
|
331
|
-
|
|
332
|
-
|
|
333
|
-
|
|
334
|
-
|
|
335
|
-
|
|
336
|
-
|
|
337
|
-
|
|
338
|
-
|
|
339
|
-
|
|
340
|
-
|
|
335
|
+
const Enhanced = (WrappedComponent) => {
|
|
336
|
+
const HOC = ({ ref, ...props }) => {
|
|
337
|
+
const { theme, mode, isDark, isLight } = useThemeAttrs({ inversed });
|
|
338
|
+
const callbackParams = [theme, {
|
|
339
|
+
render,
|
|
340
|
+
mode,
|
|
341
|
+
isDark,
|
|
342
|
+
isLight
|
|
343
|
+
}];
|
|
344
|
+
const filteredProps = removeUndefinedProps(props);
|
|
345
|
+
const prioritizedAttrs = calculatePriorityAttrs([filteredProps, ...callbackParams]);
|
|
346
|
+
const finalAttrs = calculateAttrs([{
|
|
347
|
+
...prioritizedAttrs,
|
|
348
|
+
...filteredProps
|
|
349
|
+
}, ...callbackParams]);
|
|
350
|
+
return /* @__PURE__ */ jsx(WrappedComponent, {
|
|
351
|
+
$rocketstyleRef: ref,
|
|
352
|
+
...prioritizedAttrs,
|
|
353
|
+
...finalAttrs,
|
|
354
|
+
...filteredProps
|
|
355
|
+
});
|
|
356
|
+
};
|
|
357
|
+
return HOC;
|
|
358
|
+
};
|
|
341
359
|
return Enhanced;
|
|
342
360
|
};
|
|
343
361
|
|
|
@@ -432,12 +450,17 @@ const removeNullableValues = (obj) => Object.entries(obj).filter(([, v]) => v !=
|
|
|
432
450
|
|
|
433
451
|
//#endregion
|
|
434
452
|
//#region src/utils/theme.ts
|
|
453
|
+
const MODE_CALLBACK_BRAND = Symbol.for("vl.themeModeCallback");
|
|
435
454
|
/** Creates a mode-switching function that returns the light or dark value based on the active mode. */
|
|
436
|
-
const themeModeCallback = (light, dark) =>
|
|
437
|
-
|
|
438
|
-
|
|
455
|
+
const themeModeCallback = (light, dark) => {
|
|
456
|
+
const fn = (mode) => {
|
|
457
|
+
if (!mode || mode === "light") return light;
|
|
458
|
+
return dark;
|
|
459
|
+
};
|
|
460
|
+
fn.__brand = MODE_CALLBACK_BRAND;
|
|
461
|
+
return fn;
|
|
439
462
|
};
|
|
440
|
-
const isModeCallback = (value) => typeof value === "function" && value.
|
|
463
|
+
const isModeCallback = (value) => typeof value === "function" && value.__brand === MODE_CALLBACK_BRAND;
|
|
441
464
|
const getThemeFromChain = (options, theme) => {
|
|
442
465
|
const result = {};
|
|
443
466
|
if (!options || isEmpty(options)) return result;
|
|
@@ -454,20 +477,21 @@ const getDimensionThemes = (theme, options) => {
|
|
|
454
477
|
}, result);
|
|
455
478
|
};
|
|
456
479
|
const getTheme = ({ rocketstate, themes, baseTheme, transformKeys, appTheme }) => {
|
|
457
|
-
|
|
480
|
+
const finalTheme = { ...baseTheme };
|
|
458
481
|
const deferredTransforms = [];
|
|
459
482
|
Object.entries(rocketstate).forEach(([key, value]) => {
|
|
460
483
|
const keyTheme = themes[key];
|
|
461
484
|
const isTransform = transformKeys?.[key];
|
|
462
485
|
const mergeValue = (item) => {
|
|
463
486
|
const val = keyTheme[item];
|
|
487
|
+
if (val == null) return;
|
|
464
488
|
if (isTransform && typeof val === "function") deferredTransforms.push(val);
|
|
465
|
-
else
|
|
489
|
+
else merge(finalTheme, val);
|
|
466
490
|
};
|
|
467
491
|
if (Array.isArray(value)) value.forEach(mergeValue);
|
|
468
492
|
else mergeValue(value);
|
|
469
493
|
});
|
|
470
|
-
for (const transform of deferredTransforms)
|
|
494
|
+
for (const transform of deferredTransforms) merge(finalTheme, transform(finalTheme, appTheme ?? {}, themeModeCallback, config.css));
|
|
471
495
|
return finalTheme;
|
|
472
496
|
};
|
|
473
497
|
const getThemeByMode = (object, mode) => Object.keys(object).reduce((acc, key) => {
|
|
@@ -480,6 +504,32 @@ const getThemeByMode = (object, mode) => Object.keys(object).reduce((acc, key) =
|
|
|
480
504
|
|
|
481
505
|
//#endregion
|
|
482
506
|
//#region src/rocketstyle.tsx
|
|
507
|
+
/**
|
|
508
|
+
* Core rocketstyle component factory. Creates a fully-featured React component
|
|
509
|
+
* that integrates theme management (with light/dark mode support), multi-tier
|
|
510
|
+
* WeakMap caching, dimension-based styling props, pseudo-state detection, and
|
|
511
|
+
* chainable static methods (`.attrs()`, `.theme()`, `.styles()`, `.config()`, etc.).
|
|
512
|
+
* @module rocketstyle
|
|
513
|
+
*/
|
|
514
|
+
const arraysEqual = (a, b) => {
|
|
515
|
+
if (a.length !== b.length) return false;
|
|
516
|
+
for (let i = 0; i < a.length; i++) if (a[i] !== b[i]) return false;
|
|
517
|
+
return true;
|
|
518
|
+
};
|
|
519
|
+
const isShallowEqualRocketstate = (a, b) => {
|
|
520
|
+
if (a === b) return true;
|
|
521
|
+
if (!a || !b) return false;
|
|
522
|
+
const aKeys = Object.keys(a);
|
|
523
|
+
if (aKeys.length !== Object.keys(b).length) return false;
|
|
524
|
+
for (const k of aKeys) {
|
|
525
|
+
const av = a[k];
|
|
526
|
+
const bv = b[k];
|
|
527
|
+
if (av === bv) continue;
|
|
528
|
+
if (Array.isArray(av) && Array.isArray(bv) && arraysEqual(av, bv)) continue;
|
|
529
|
+
return false;
|
|
530
|
+
}
|
|
531
|
+
return true;
|
|
532
|
+
};
|
|
483
533
|
/** Clones the current configuration and merges new options, returning a fresh rocketComponent. */
|
|
484
534
|
const cloneAndEnhance = (defaultOpts, opts) => rocketComponent({
|
|
485
535
|
...defaultOpts,
|
|
@@ -503,7 +553,7 @@ const cloneAndEnhance = (defaultOpts, opts) => rocketComponent({
|
|
|
503
553
|
* chainable static enhancers attached to the returned component.
|
|
504
554
|
*/
|
|
505
555
|
const rocketComponent = (options) => {
|
|
506
|
-
const { component, styles } = options;
|
|
556
|
+
const { component, styles, transformKeys } = options;
|
|
507
557
|
const { styled } = config;
|
|
508
558
|
const _calculateStylingAttrs = calculateStylingAttrs({
|
|
509
559
|
multiKeys: options.multiKeys,
|
|
@@ -516,7 +566,7 @@ const rocketComponent = (options) => {
|
|
|
516
566
|
const RenderComponent = options.provider ? RocketStyleProviderComponent(STYLED_COMPONENT) : STYLED_COMPONENT;
|
|
517
567
|
const ThemeManager$1 = new ThemeManager();
|
|
518
568
|
const hocsFuncs = [rocketStyleHOC(options), ...calculateHocsFuncs(options.compose)];
|
|
519
|
-
const EnhancedComponent =
|
|
569
|
+
const EnhancedComponent = ({ $rocketstyleRef, ref, ...props }) => {
|
|
520
570
|
const internalRef = useRocketstyleRef({
|
|
521
571
|
$rocketstyleRef,
|
|
522
572
|
ref
|
|
@@ -564,20 +614,17 @@ const rocketComponent = (options) => {
|
|
|
564
614
|
...rocketstate,
|
|
565
615
|
pseudo: pseudoRocketstate
|
|
566
616
|
};
|
|
567
|
-
|
|
568
|
-
|
|
569
|
-
|
|
570
|
-
rsKey += k;
|
|
571
|
-
rsKey += Array.isArray(v) ? v.join(",") : v;
|
|
572
|
-
}
|
|
617
|
+
const rocketstateRef = useRef(rocketstate);
|
|
618
|
+
if (!isShallowEqualRocketstate(rocketstateRef.current, rocketstate)) rocketstateRef.current = rocketstate;
|
|
619
|
+
const stableRocketstate = rocketstateRef.current;
|
|
573
620
|
const rocketstyle = useMemo(() => getTheme({
|
|
574
|
-
rocketstate,
|
|
621
|
+
rocketstate: stableRocketstate,
|
|
575
622
|
themes: currentModeThemes,
|
|
576
623
|
baseTheme: currentModeBaseTheme,
|
|
577
|
-
transformKeys
|
|
624
|
+
transformKeys,
|
|
578
625
|
appTheme: theme
|
|
579
626
|
}), [
|
|
580
|
-
|
|
627
|
+
stableRocketstate,
|
|
581
628
|
currentModeThemes,
|
|
582
629
|
currentModeBaseTheme,
|
|
583
630
|
theme
|
|
@@ -609,7 +656,7 @@ const rocketComponent = (options) => {
|
|
|
609
656
|
}
|
|
610
657
|
}
|
|
611
658
|
return /* @__PURE__ */ jsx(RenderComponent, { ...finalProps });
|
|
612
|
-
}
|
|
659
|
+
};
|
|
613
660
|
const RocketComponent = compose(...hocsFuncs)(EnhancedComponent);
|
|
614
661
|
RocketComponent.IS_ROCKETSTYLE = true;
|
|
615
662
|
RocketComponent.displayName = componentName;
|
|
@@ -682,32 +729,44 @@ const validateInit = (name, component, dimensions) => {
|
|
|
682
729
|
}
|
|
683
730
|
if (!isEmpty(errors)) throw Error(JSON.stringify(errors));
|
|
684
731
|
};
|
|
685
|
-
|
|
686
|
-
|
|
687
|
-
|
|
688
|
-
|
|
689
|
-
|
|
690
|
-
|
|
691
|
-
|
|
692
|
-
|
|
693
|
-
|
|
694
|
-
|
|
695
|
-
|
|
696
|
-
|
|
697
|
-
|
|
732
|
+
/**
|
|
733
|
+
* Generic implementation. The `D | DefaultDimensions` runtime fallback is
|
|
734
|
+
* narrowed to `D` via a single cast — semantically correct because when no
|
|
735
|
+
* user dimensions are supplied, `D` *is* the default (its type-parameter
|
|
736
|
+
* default is `DefaultDimensions`). This single boundary cast replaces the
|
|
737
|
+
* file-wide `@ts-nocheck` previously used here.
|
|
738
|
+
*/
|
|
739
|
+
const rocketstyle = (params) => {
|
|
740
|
+
const dimensions = params?.dimensions ?? DEFAULT_DIMENSIONS;
|
|
741
|
+
const useBooleans = params?.useBooleans ?? true;
|
|
742
|
+
return ({ name, component }) => {
|
|
743
|
+
if (process.env.NODE_ENV !== "production") validateInit(name, component, dimensions);
|
|
744
|
+
return rocketComponent({
|
|
745
|
+
name,
|
|
746
|
+
component,
|
|
747
|
+
useBooleans,
|
|
748
|
+
dimensions,
|
|
749
|
+
dimensionKeys: getKeys(dimensions),
|
|
750
|
+
dimensionValues: getDimensionsValues(dimensions),
|
|
751
|
+
multiKeys: getMultipleDimensions(dimensions),
|
|
752
|
+
transformKeys: getTransformDimensions(dimensions),
|
|
753
|
+
styled: true
|
|
754
|
+
});
|
|
755
|
+
};
|
|
698
756
|
};
|
|
757
|
+
const typedRocketstyle = rocketstyle;
|
|
699
758
|
|
|
700
759
|
//#endregion
|
|
701
760
|
//#region src/isRocketComponent.tsx
|
|
702
761
|
const isRocketComponent = (component) => {
|
|
703
|
-
if (component && typeof component === "object"
|
|
762
|
+
if (component && (typeof component === "object" || typeof component === "function") && Object.hasOwn(component, "IS_ROCKETSTYLE")) return true;
|
|
704
763
|
return false;
|
|
705
764
|
};
|
|
706
765
|
|
|
707
766
|
//#endregion
|
|
708
767
|
//#region src/index.ts
|
|
709
|
-
var src_default =
|
|
768
|
+
var src_default = typedRocketstyle;
|
|
710
769
|
|
|
711
770
|
//#endregion
|
|
712
|
-
export { Provider, context, src_default as default, isRocketComponent, rocketstyle };
|
|
771
|
+
export { Provider, context, src_default as default, isRocketComponent, typedRocketstyle as rocketstyle };
|
|
713
772
|
//# sourceMappingURL=index.js.map
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@vitus-labs/rocketstyle",
|
|
3
|
-
"version": "2.0.0-alpha.
|
|
3
|
+
"version": "2.0.0-alpha.29",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"author": "Vit Bokisch <vit@bokisch.cz>",
|
|
6
6
|
"maintainers": [
|
|
@@ -14,6 +14,7 @@
|
|
|
14
14
|
"types": "./lib/index.d.ts"
|
|
15
15
|
},
|
|
16
16
|
"types": "./lib/index.d.ts",
|
|
17
|
+
"main": "./lib/index.js",
|
|
17
18
|
"files": [
|
|
18
19
|
"lib",
|
|
19
20
|
"!lib/**/*.map",
|
|
@@ -64,16 +65,15 @@
|
|
|
64
65
|
"version": "node ../../scripts/sync-peer-deps.mjs"
|
|
65
66
|
},
|
|
66
67
|
"peerDependencies": {
|
|
67
|
-
"@vitus-labs/core": "2.0.0-alpha.
|
|
68
|
+
"@vitus-labs/core": "2.0.0-alpha.29",
|
|
68
69
|
"react": ">= 19"
|
|
69
70
|
},
|
|
70
71
|
"devDependencies": {
|
|
71
|
-
"@vitus-labs/core": "
|
|
72
|
-
"@vitus-labs/elements": "
|
|
73
|
-
"@vitus-labs/tools-rolldown": "
|
|
74
|
-
"@vitus-labs/tools-storybook": "
|
|
75
|
-
"@vitus-labs/tools-typescript": "
|
|
76
|
-
"@vitus-labs/unistyle": "
|
|
77
|
-
}
|
|
78
|
-
"gitHead": "6230c7b4eb1f8fe52bd47275cf72cdcab706cb45"
|
|
72
|
+
"@vitus-labs/core": "workspace:*",
|
|
73
|
+
"@vitus-labs/elements": "workspace:*",
|
|
74
|
+
"@vitus-labs/tools-rolldown": "2.0.0",
|
|
75
|
+
"@vitus-labs/tools-storybook": "2.0.0",
|
|
76
|
+
"@vitus-labs/tools-typescript": "2.0.0",
|
|
77
|
+
"@vitus-labs/unistyle": "workspace:*"
|
|
78
|
+
}
|
|
79
79
|
}
|
package/LICENSE
DELETED
|
@@ -1,21 +0,0 @@
|
|
|
1
|
-
MIT License
|
|
2
|
-
|
|
3
|
-
Copyright (c) 2023-present Vit Bokisch
|
|
4
|
-
|
|
5
|
-
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
6
|
-
of this software and associated documentation files (the "Software"), to deal
|
|
7
|
-
in the Software without restriction, including without limitation the rights
|
|
8
|
-
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
9
|
-
copies of the Software, and to permit persons to whom the Software is
|
|
10
|
-
furnished to do so, subject to the following conditions:
|
|
11
|
-
|
|
12
|
-
The above copyright notice and this permission notice shall be included in all
|
|
13
|
-
copies or substantial portions of the Software.
|
|
14
|
-
|
|
15
|
-
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
16
|
-
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
17
|
-
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
18
|
-
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
19
|
-
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
20
|
-
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
21
|
-
SOFTWARE.
|