react-native-unistyles 2.0.0-alpha.3 → 2.0.0-alpha.5
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/ios/UnistylesHelpers.h +4 -0
- package/ios/UnistylesHelpers.mm +20 -0
- package/ios/UnistylesModule.h +1 -3
- package/ios/UnistylesModule.mm +62 -67
- package/lib/commonjs/UnistyleRegistry.js +12 -1
- package/lib/commonjs/UnistyleRegistry.js.map +1 -1
- package/lib/commonjs/UnistylesRuntime.js +5 -2
- package/lib/commonjs/UnistylesRuntime.js.map +1 -1
- package/lib/commonjs/hooks/useDimensions.web.js +7 -5
- package/lib/commonjs/hooks/useDimensions.web.js.map +1 -1
- package/lib/commonjs/index.js +2 -1
- package/lib/commonjs/index.js.map +1 -1
- package/lib/commonjs/types/cxx.js +5 -2
- package/lib/commonjs/types/cxx.js.map +1 -1
- package/lib/commonjs/useInitialTheme.js +1 -1
- package/lib/commonjs/useInitialTheme.js.map +1 -1
- package/lib/commonjs/useStyles.js.map +1 -1
- package/lib/commonjs/useUnistyles.js +9 -15
- package/lib/commonjs/useUnistyles.js.map +1 -1
- package/lib/commonjs/utils/breakpoints.js +12 -2
- package/lib/commonjs/utils/breakpoints.js.map +1 -1
- package/lib/commonjs/utils/common.js +6 -1
- package/lib/commonjs/utils/common.js.map +1 -1
- package/lib/commonjs/utils/index.js +7 -0
- package/lib/commonjs/utils/index.js.map +1 -1
- package/lib/commonjs/utils/mediaQueries.js +9 -2
- package/lib/commonjs/utils/mediaQueries.js.map +1 -1
- package/lib/module/UnistyleRegistry.js +12 -1
- package/lib/module/UnistyleRegistry.js.map +1 -1
- package/lib/module/UnistylesRuntime.js +5 -2
- package/lib/module/UnistylesRuntime.js.map +1 -1
- package/lib/module/hooks/useDimensions.web.js +8 -6
- package/lib/module/hooks/useDimensions.web.js.map +1 -1
- package/lib/module/index.js +1 -0
- package/lib/module/index.js.map +1 -1
- package/lib/module/types/cxx.js +5 -2
- package/lib/module/types/cxx.js.map +1 -1
- package/lib/module/useInitialTheme.js +2 -2
- package/lib/module/useInitialTheme.js.map +1 -1
- package/lib/module/useStyles.js.map +1 -1
- package/lib/module/useUnistyles.js +9 -15
- package/lib/module/useUnistyles.js.map +1 -1
- package/lib/module/utils/breakpoints.js +13 -3
- package/lib/module/utils/breakpoints.js.map +1 -1
- package/lib/module/utils/common.js +5 -0
- package/lib/module/utils/common.js.map +1 -1
- package/lib/module/utils/index.js +1 -1
- package/lib/module/utils/index.js.map +1 -1
- package/lib/module/utils/mediaQueries.js +9 -2
- package/lib/module/utils/mediaQueries.js.map +1 -1
- package/lib/typescript/src/UnistyleRegistry.d.ts +2 -0
- package/lib/typescript/src/UnistyleRegistry.d.ts.map +1 -1
- package/lib/typescript/src/UnistylesRuntime.d.ts +3 -39
- package/lib/typescript/src/UnistylesRuntime.d.ts.map +1 -1
- package/lib/typescript/src/global.d.ts +2 -0
- package/lib/typescript/src/global.d.ts.map +1 -1
- package/lib/typescript/src/hooks/useDimensions.web.d.ts.map +1 -1
- package/lib/typescript/src/index.d.ts +1 -0
- package/lib/typescript/src/index.d.ts.map +1 -1
- package/lib/typescript/src/types/cxx.d.ts +15 -15
- package/lib/typescript/src/types/cxx.d.ts.map +1 -1
- package/lib/typescript/src/useStyles.d.ts +3 -39
- package/lib/typescript/src/useStyles.d.ts.map +1 -1
- package/lib/typescript/src/useUnistyles.d.ts +4 -38
- package/lib/typescript/src/useUnistyles.d.ts.map +1 -1
- package/lib/typescript/src/utils/breakpoints.d.ts.map +1 -1
- package/lib/typescript/src/utils/common.d.ts +5 -0
- package/lib/typescript/src/utils/common.d.ts.map +1 -1
- package/lib/typescript/src/utils/index.d.ts +1 -1
- package/lib/typescript/src/utils/index.d.ts.map +1 -1
- package/lib/typescript/src/utils/mediaQueries.d.ts.map +1 -1
- package/package.json +12 -13
- package/react-native-unistyles.podspec +2 -1
- package/src/UnistyleRegistry.ts +16 -1
- package/src/UnistylesRuntime.ts +6 -2
- package/src/global.ts +4 -1
- package/src/hooks/useDimensions.web.ts +9 -6
- package/src/index.ts +2 -0
- package/src/types/cxx.ts +18 -17
- package/src/useInitialTheme.ts +2 -2
- package/src/useStyles.ts +2 -2
- package/src/useUnistyles.ts +12 -24
- package/src/utils/breakpoints.ts +18 -4
- package/src/utils/common.ts +6 -0
- package/src/utils/index.ts +1 -1
- package/src/utils/mediaQueries.ts +18 -6
- package/ios/UnistylesRuntime.h +0 -48
- package/ios/UnistylesRuntime.mm +0 -228
- package/lib/typescript/examples/expo/src/App.d.ts +0 -3
- package/lib/typescript/examples/expo/src/App.d.ts.map +0 -1
- package/lib/typescript/examples/expo/src/examples/Cxx.d.ts +0 -3
- package/lib/typescript/examples/expo/src/examples/Cxx.d.ts.map +0 -1
- package/lib/typescript/examples/expo/src/examples/index.d.ts +0 -2
- package/lib/typescript/examples/expo/src/examples/index.d.ts.map +0 -1
- package/lib/typescript/examples/expo/src/index.d.ts +0 -2
- package/lib/typescript/examples/expo/src/index.d.ts.map +0 -1
- package/lib/typescript/examples/expo/src/styles/breakpoints.d.ts +0 -8
- package/lib/typescript/examples/expo/src/styles/breakpoints.d.ts.map +0 -1
- package/lib/typescript/examples/expo/src/styles/index.d.ts +0 -16
- package/lib/typescript/examples/expo/src/styles/index.d.ts.map +0 -1
- package/lib/typescript/examples/expo/src/styles/theme.d.ts +0 -40
- package/lib/typescript/examples/expo/src/styles/theme.d.ts.map +0 -1
@@ -1,4 +1,5 @@
|
|
1
1
|
import type { UnistylesThemes, UnistylesBreakpoints } from '../global';
|
2
|
+
import type { ScreenSize } from './breakpoints';
|
2
3
|
export type Nullable<T> = T | null;
|
3
4
|
export type ColorSchemeName = 'light' | 'dark' | undefined;
|
4
5
|
export type UnistylesConfig = {
|
@@ -12,7 +13,7 @@ export type UnistylesBridge = {
|
|
12
13
|
screenWidth: number;
|
13
14
|
screenHeight: number;
|
14
15
|
hasAdaptiveThemes: boolean;
|
15
|
-
|
16
|
+
themeName: keyof UnistylesThemes;
|
16
17
|
breakpoint: keyof UnistylesBreakpoints;
|
17
18
|
colorScheme: ColorSchemeName;
|
18
19
|
sortedBreakpointPairs: Array<[keyof UnistylesBreakpoints, UnistylesBreakpoints[keyof UnistylesBreakpoints]]>;
|
@@ -20,34 +21,33 @@ export type UnistylesBridge = {
|
|
20
21
|
useBreakpoints(breakpoints: UnistylesBreakpoints): void;
|
21
22
|
useTheme(name: keyof UnistylesThemes): void;
|
22
23
|
useAdaptiveThemes(enable: boolean): void;
|
24
|
+
unregister(): void;
|
23
25
|
};
|
24
26
|
export declare enum CxxUnistylesEventTypes {
|
25
27
|
Theme = "theme",
|
26
|
-
|
27
|
-
Breakpoint = "breakpoint"
|
28
|
+
Layout = "layout"
|
28
29
|
}
|
29
|
-
export type
|
30
|
+
export type UnistylesThemeEvent = {
|
30
31
|
type: CxxUnistylesEventTypes.Theme;
|
31
32
|
payload: {
|
32
33
|
themeName: keyof UnistylesThemes;
|
33
34
|
};
|
34
35
|
};
|
35
|
-
export type
|
36
|
-
type: CxxUnistylesEventTypes.
|
37
|
-
payload: {
|
38
|
-
width: number;
|
39
|
-
height: number;
|
40
|
-
};
|
41
|
-
};
|
42
|
-
export type CxxUnistylesBreakpointEvent = {
|
43
|
-
type: CxxUnistylesEventTypes.Breakpoint;
|
36
|
+
export type UnistylesMobileLayoutEvent = {
|
37
|
+
type: CxxUnistylesEventTypes.Layout;
|
44
38
|
payload: {
|
39
|
+
screen: ScreenSize;
|
45
40
|
breakpoint: keyof UnistylesBreakpoints;
|
41
|
+
orientation: ScreenOrientation;
|
46
42
|
};
|
47
43
|
};
|
48
|
-
export type UnistylesEvents =
|
44
|
+
export type UnistylesEvents = UnistylesThemeEvent | UnistylesMobileLayoutEvent;
|
49
45
|
export declare enum UnistylesError {
|
50
46
|
RuntimeUnavailable = "UNISTYLES_ERROR_RUNTIME_UNAVAILABLE",
|
51
|
-
ThemeNotFound = "UNISTYLES_ERROR_THEME_NOT_FOUND"
|
47
|
+
ThemeNotFound = "UNISTYLES_ERROR_THEME_NOT_FOUND",
|
48
|
+
ThemeNotRegistered = "UNISTYLES_ERROR_THEME_NOT_REGISTERED",
|
49
|
+
ThemesCannotBeEmpty = "UNISTYLES_ERROR_THEMES_CANNOT_BE_EMPTY",
|
50
|
+
BreakpointsCannotBeEmpty = "UNISTYLES_ERROR_BREAKPOINTS_CANNOT_BE_EMPTY",
|
51
|
+
BreakpointsMustStartFromZero = "UNISTYLES_ERROR_BREAKPOINTS_MUST_START_FROM_ZERO"
|
52
52
|
}
|
53
53
|
//# sourceMappingURL=cxx.d.ts.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"cxx.d.ts","sourceRoot":"","sources":["../../../../src/types/cxx.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,eAAe,EAAE,oBAAoB,EAAE,MAAM,WAAW,CAAA;
|
1
|
+
{"version":3,"file":"cxx.d.ts","sourceRoot":"","sources":["../../../../src/types/cxx.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,eAAe,EAAE,oBAAoB,EAAE,MAAM,WAAW,CAAA;AACtE,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,eAAe,CAAA;AAE/C,MAAM,MAAM,QAAQ,CAAC,CAAC,IAAI,CAAC,GAAG,IAAI,CAAA;AAClC,MAAM,MAAM,eAAe,GAAG,OAAO,GAAG,MAAM,GAAG,SAAS,CAAA;AAE1D,MAAM,MAAM,eAAe,GAAG;IAC1B,cAAc,CAAC,EAAE,OAAO,CAAA;CAC3B,CAAA;AAED,oBAAY,iBAAiB;IACzB,QAAQ,IAAI;IACZ,SAAS,IAAI;CAChB;AAED,MAAM,MAAM,eAAe,GAAG;IAE1B,WAAW,EAAE,MAAM,CAAC;IACpB,YAAY,EAAE,MAAM,CAAC;IACrB,iBAAiB,EAAE,OAAO,CAAC;IAC3B,SAAS,EAAE,MAAM,eAAe,CAAC;IACjC,UAAU,EAAE,MAAM,oBAAoB,CAAC;IACvC,WAAW,EAAE,eAAe,CAAC;IAC7B,qBAAqB,EAAE,KAAK,CAAC,CAAC,MAAM,oBAAoB,EAAE,oBAAoB,CAAC,MAAM,oBAAoB,CAAC,CAAC,CAAC,CAAC;IAG7G,MAAM,EAAE,KAAK,CAAC,MAAM,eAAe,CAAC,CAAC;IACrC,cAAc,CAAC,WAAW,EAAE,oBAAoB,GAAG,IAAI,CAAC;IACxD,QAAQ,CAAC,IAAI,EAAE,MAAM,eAAe,GAAG,IAAI,CAAC;IAC5C,iBAAiB,CAAC,MAAM,EAAE,OAAO,GAAG,IAAI,CAAC;IAGzC,UAAU,IAAI,IAAI,CAAA;CACrB,CAAA;AAED,oBAAY,sBAAsB;IAC9B,KAAK,UAAU;IACf,MAAM,WAAW;CACpB;AAED,MAAM,MAAM,mBAAmB,GAAG;IAC9B,IAAI,EAAE,sBAAsB,CAAC,KAAK,CAAC;IACnC,OAAO,EAAE;QACL,SAAS,EAAE,MAAM,eAAe,CAAA;KACnC,CAAA;CACJ,CAAA;AAED,MAAM,MAAM,0BAA0B,GAAG;IACrC,IAAI,EAAE,sBAAsB,CAAC,MAAM,CAAC;IACpC,OAAO,EAAE;QACL,MAAM,EAAE,UAAU,CAAC;QACnB,UAAU,EAAE,MAAM,oBAAoB,CAAC;QACvC,WAAW,EAAE,iBAAiB,CAAA;KACjC,CAAA;CACJ,CAAA;AAED,MAAM,MAAM,eAAe,GAAG,mBAAmB,GAAG,0BAA0B,CAAA;AAE9E,oBAAY,cAAc;IACtB,kBAAkB,wCAAwC;IAC1D,aAAa,oCAAoC;IACjD,kBAAkB,yCAAyC;IAC3D,mBAAmB,2CAA2C;IAC9D,wBAAwB,gDAAgD;IACxE,4BAA4B,qDAAqD;CACpF"}
|
@@ -1,45 +1,9 @@
|
|
1
1
|
import type { CreateStylesFactory, CustomNamedStyles, ExtractBreakpoints, RemoveKeysWithPrefix } from './types';
|
2
2
|
import type { UnistylesThemes } from './global';
|
3
3
|
type T = UnistylesThemes[keyof UnistylesThemes];
|
4
|
-
export declare const useStyles: <ST extends CustomNamedStyles<ST>>(stylesheet?: ST | CreateStylesFactory<ST,
|
5
|
-
theme:
|
6
|
-
|
7
|
-
backgroundColor: string;
|
8
|
-
typography: string;
|
9
|
-
accent: string;
|
10
|
-
barbie: string;
|
11
|
-
oak: string;
|
12
|
-
sky: string;
|
13
|
-
fog: string;
|
14
|
-
aloes: string;
|
15
|
-
blood: string;
|
16
|
-
};
|
17
|
-
} | {
|
18
|
-
colors: {
|
19
|
-
backgroundColor: string;
|
20
|
-
typography: string;
|
21
|
-
accent: string;
|
22
|
-
barbie: string;
|
23
|
-
oak: string;
|
24
|
-
sky: string;
|
25
|
-
fog: string;
|
26
|
-
aloes: string;
|
27
|
-
blood: string;
|
28
|
-
};
|
29
|
-
} | {
|
30
|
-
colors: {
|
31
|
-
backgroundColor: string;
|
32
|
-
typography: string;
|
33
|
-
accent: string;
|
34
|
-
barbie: string;
|
35
|
-
oak: string;
|
36
|
-
sky: string;
|
37
|
-
fog: string;
|
38
|
-
aloes: string;
|
39
|
-
blood: string;
|
40
|
-
};
|
41
|
-
};
|
42
|
-
breakpoint: "xs" | "sm" | "md" | "lg" | "xl";
|
4
|
+
export declare const useStyles: <ST extends CustomNamedStyles<ST>>(stylesheet?: ST | CreateStylesFactory<ST, never> | undefined) => {
|
5
|
+
theme: never;
|
6
|
+
breakpoint: "landscape" | "portrait";
|
43
7
|
styles: ExtractBreakpoints<RemoveKeysWithPrefix<ST>>;
|
44
8
|
};
|
45
9
|
export {};
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"useStyles.d.ts","sourceRoot":"","sources":["../../../src/useStyles.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,mBAAmB,EAAE,iBAAiB,EAAE,kBAAkB,EAAE,oBAAoB,EAAE,MAAM,SAAS,CAAA;AAE/G,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,UAAU,CAAA;AAG/C,KAAK,CAAC,GAAG,eAAe,CAAC,MAAM,eAAe,CAAC,CAAA;AAE/C,eAAO,MAAM,SAAS
|
1
|
+
{"version":3,"file":"useStyles.d.ts","sourceRoot":"","sources":["../../../src/useStyles.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,mBAAmB,EAAE,iBAAiB,EAAE,kBAAkB,EAAE,oBAAoB,EAAE,MAAM,SAAS,CAAA;AAE/G,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,UAAU,CAAA;AAG/C,KAAK,CAAC,GAAG,eAAe,CAAC,MAAM,eAAe,CAAC,CAAA;AAE/C,eAAO,MAAM,SAAS;;;;CAsCrB,CAAA"}
|
@@ -1,42 +1,8 @@
|
|
1
|
+
import { ScreenOrientation } from './types';
|
1
2
|
export declare const useUnistyles: () => {
|
2
|
-
theme:
|
3
|
-
|
4
|
-
|
5
|
-
typography: string;
|
6
|
-
accent: string;
|
7
|
-
barbie: string;
|
8
|
-
oak: string;
|
9
|
-
sky: string;
|
10
|
-
fog: string;
|
11
|
-
aloes: string;
|
12
|
-
blood: string;
|
13
|
-
};
|
14
|
-
} | {
|
15
|
-
colors: {
|
16
|
-
backgroundColor: string;
|
17
|
-
typography: string;
|
18
|
-
accent: string;
|
19
|
-
barbie: string;
|
20
|
-
oak: string;
|
21
|
-
sky: string;
|
22
|
-
fog: string;
|
23
|
-
aloes: string;
|
24
|
-
blood: string;
|
25
|
-
};
|
26
|
-
} | {
|
27
|
-
colors: {
|
28
|
-
backgroundColor: string;
|
29
|
-
typography: string;
|
30
|
-
accent: string;
|
31
|
-
barbie: string;
|
32
|
-
oak: string;
|
33
|
-
sky: string;
|
34
|
-
fog: string;
|
35
|
-
aloes: string;
|
36
|
-
blood: string;
|
37
|
-
};
|
38
|
-
};
|
39
|
-
breakpoint: "xs" | "sm" | "md" | "lg" | "xl";
|
3
|
+
theme: never;
|
4
|
+
orientation: ScreenOrientation;
|
5
|
+
breakpoint: "landscape" | "portrait";
|
40
6
|
screenSize: {
|
41
7
|
width: number;
|
42
8
|
height: number;
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"useUnistyles.d.ts","sourceRoot":"","sources":["../../../src/useUnistyles.ts"],"names":[],"mappings":"
|
1
|
+
{"version":3,"file":"useUnistyles.d.ts","sourceRoot":"","sources":["../../../src/useUnistyles.ts"],"names":[],"mappings":"AAGA,OAAO,EAA0B,iBAAiB,EAAE,MAAM,SAAS,CAAA;AAKnE,eAAO,MAAM,YAAY;;;;;;;;CA6CxB,CAAA"}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"breakpoints.d.ts","sourceRoot":"","sources":["../../../../src/utils/breakpoints.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,UAAU,EAAE,YAAY,EAAE,MAAM,UAAU,CAAA;
|
1
|
+
{"version":3,"file":"breakpoints.d.ts","sourceRoot":"","sources":["../../../../src/utils/breakpoints.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,UAAU,EAAE,YAAY,EAAE,MAAM,UAAU,CAAA;AAGxD,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,WAAW,CAAA;AAErD;;;;;;;;;;;;;;;;;;GAkBG;AACH,eAAO,MAAM,0BAA0B,gBAAiB,oBAAoB,KAAG,oBAuB9E,CAAA;AAED;;;;;;;;;;;;;;GAcG;AACH,eAAO,MAAM,4BAA4B,UAAW,MAAM,qBAAqB,MAAM,CAAC,MAAM,oBAAoB,EAAE,oBAAoB,CAAC,MAAM,oBAAoB,CAAC,CAAC,CAAC,KAAG,MAAM,oBAAoB,GAAG,MAcnM,CAAA;AAED;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,eAAO,MAAM,qBAAqB,UACvB,OAAO,MAAM,oBAAoB,GAAG,YAAY,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS,CAAC,cACzE,MAAM,oBAAoB,cAC1B,UAAU,KACvB,MAAM,GAAG,MAAM,GAAG,SA6CpB,CAAA"}
|
@@ -1,5 +1,10 @@
|
|
1
1
|
export declare const throwError: (message: string) => never;
|
2
2
|
export declare const warn: (message: string) => void;
|
3
|
+
export declare const isMobile: boolean;
|
3
4
|
export declare const isWeb: boolean;
|
4
5
|
export declare const isServer: boolean;
|
6
|
+
export declare const Orientation: {
|
7
|
+
readonly Landscape: "landscape";
|
8
|
+
readonly Portrait: "portrait";
|
9
|
+
};
|
5
10
|
//# sourceMappingURL=common.d.ts.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"common.d.ts","sourceRoot":"","sources":["../../../../src/utils/common.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,UAAU,YAAa,MAAM,UAEzC,CAAA;AAED,eAAO,MAAM,IAAI,YAAa,MAAM,SAEnC,CAAA;AAED,eAAO,MAAM,KAAK,SAAwB,CAAA;AAC1C,eAAO,MAAM,QAAQ,SAAgC,CAAA"}
|
1
|
+
{"version":3,"file":"common.d.ts","sourceRoot":"","sources":["../../../../src/utils/common.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,UAAU,YAAa,MAAM,UAEzC,CAAA;AAED,eAAO,MAAM,IAAI,YAAa,MAAM,SAEnC,CAAA;AAED,eAAO,MAAM,QAAQ,SAAqD,CAAA;AAC1E,eAAO,MAAM,KAAK,SAAwB,CAAA;AAC1C,eAAO,MAAM,QAAQ,SAAgC,CAAA;AAErD,eAAO,MAAM,WAAW;;;CAGd,CAAA"}
|
@@ -2,6 +2,6 @@ export { normalizeStyles } from './normalizeStyles';
|
|
2
2
|
export * from './normalizer';
|
3
3
|
export { getBreakpointFromScreenWidth, sortAndValidateBreakpoints, getValueForBreakpoint } from './breakpoints';
|
4
4
|
export { proxifyFunction, parseStyle } from './styles';
|
5
|
-
export { isServer } from './common';
|
5
|
+
export { isServer, Orientation } from './common';
|
6
6
|
export { extractValues, getKeyForCustomMediaQuery, isMediaQuery, isWithinTheHeight, isWithinTheWidth, isWithinTheWidthAndHeight } from './mediaQueries';
|
7
7
|
//# sourceMappingURL=index.d.ts.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/utils/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAA;AACnD,cAAc,cAAc,CAAA;AAC5B,OAAO,EAAE,4BAA4B,EAAE,0BAA0B,EAAE,qBAAqB,EAAE,MAAM,eAAe,CAAA;AAC/G,OAAO,EAAE,eAAe,EAAE,UAAU,EAAE,MAAM,UAAU,CAAA;AACtD,OAAO,EAAE,QAAQ,EAAE,MAAM,UAAU,CAAA;
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/utils/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAA;AACnD,cAAc,cAAc,CAAA;AAC5B,OAAO,EAAE,4BAA4B,EAAE,0BAA0B,EAAE,qBAAqB,EAAE,MAAM,eAAe,CAAA;AAC/G,OAAO,EAAE,eAAe,EAAE,UAAU,EAAE,MAAM,UAAU,CAAA;AACtD,OAAO,EAAE,QAAQ,EAAE,WAAW,EAAE,MAAM,UAAU,CAAA;AAChD,OAAO,EACH,aAAa,EACb,yBAAyB,EACzB,YAAY,EACZ,iBAAiB,EACjB,gBAAgB,EAChB,yBAAyB,EAC5B,MAAM,gBAAgB,CAAA"}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"mediaQueries.d.ts","sourceRoot":"","sources":["../../../../src/utils/mediaQueries.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,UAAU,CAAA;AAE1C;;;;;;;;;;;;;;GAcG;AACH,eAAO,MAAM,aAAa,eAAgB,MAAM,KAAG,MAAM,MAAM,
|
1
|
+
{"version":3,"file":"mediaQueries.d.ts","sourceRoot":"","sources":["../../../../src/utils/mediaQueries.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,UAAU,CAAA;AAE1C;;;;;;;;;;;;;;GAcG;AACH,eAAO,MAAM,aAAa,eAAgB,MAAM,KAAG,MAAM,MAAM,CAoB9D,CAAA;AAED;;;;;;;;;;;;;;;GAeG;AACH,eAAO,MAAM,kBAAkB,UAAW,MAAM,cAAc,UAAU,KAAG,OAc1E,CAAA;AAED;;;;;;;;;;;;;;;GAeG;AACH,eAAO,MAAM,gBAAgB,UAAW,MAAM,SAAS,MAAM,KAAG,OAQ/D,CAAA;AAED;;;;;;;;;;;;;;;GAeG;AACH,eAAO,MAAM,iBAAiB,UAAW,MAAM,UAAU,MAAM,KAAG,OAQjE,CAAA;AAED;;;;;;;;;;;;;;GAcG;AACH,eAAO,MAAM,yBAAyB,UAAW,MAAM,cAAc,UAAU,KAAG,OAQjF,CAAA;AAED;;;;;;;;;;;;;;;;;;;GAmBG;AACH,eAAO,MAAM,YAAY,UAAW,MAAM,KAAG,OAI5C,CAAA;AAED;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,eAAO,MAAM,yBAAyB,iBAAkB,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS,CAAC,CAAC,cAAc,UAAU,KAAG,MAAM,GAAG,SAevI,CAAA"}
|
package/package.json
CHANGED
@@ -1,6 +1,6 @@
|
|
1
1
|
{
|
2
2
|
"name": "react-native-unistyles",
|
3
|
-
"version": "2.0.0-alpha.
|
3
|
+
"version": "2.0.0-alpha.5",
|
4
4
|
"description": "Level up your React Native StyleSheet",
|
5
5
|
"scripts": {
|
6
6
|
"test": "jest",
|
@@ -41,25 +41,24 @@
|
|
41
41
|
"registry": "https://registry.npmjs.org/"
|
42
42
|
},
|
43
43
|
"devDependencies": {
|
44
|
-
"@commitlint/config-conventional": "
|
44
|
+
"@commitlint/config-conventional": "18.1.0",
|
45
45
|
"@react-native/eslint-config": "0.74.0",
|
46
46
|
"@react-native/normalize-colors": "0.74.1",
|
47
47
|
"@release-it/conventional-changelog": "7.0.2",
|
48
48
|
"@testing-library/react-hooks": "8.0.1",
|
49
|
-
"@types/jest": "29.5.
|
50
|
-
"@types/react": "18.2.
|
51
|
-
"@
|
52
|
-
"@typescript-eslint/eslint-plugin": "6.
|
53
|
-
"@typescript-eslint/
|
54
|
-
"
|
55
|
-
"
|
56
|
-
"
|
57
|
-
"eslint": "8.51.0",
|
49
|
+
"@types/jest": "29.5.7",
|
50
|
+
"@types/react": "18.2.34",
|
51
|
+
"@typescript-eslint/eslint-plugin": "6.9.1",
|
52
|
+
"@typescript-eslint/eslint-plugin-tslint": "6.9.1",
|
53
|
+
"@typescript-eslint/parser": "6.9.1",
|
54
|
+
"commitlint": "18.2.0",
|
55
|
+
"concurrently": "8.2.2",
|
56
|
+
"eslint": "8.53.0",
|
58
57
|
"eslint-config-codemask": "1.1.7",
|
59
58
|
"eslint-plugin-functional": "6.0.0",
|
60
|
-
"eslint-plugin-import": "2.
|
59
|
+
"eslint-plugin-import": "2.29.0",
|
61
60
|
"eslint-plugin-jsdoc": "46.8.2",
|
62
|
-
"eslint-plugin-jsx-a11y": "6.
|
61
|
+
"eslint-plugin-jsx-a11y": "6.8.0",
|
63
62
|
"eslint-plugin-nested-if": "1.0.0",
|
64
63
|
"eslint-plugin-no-else": "0.2.2",
|
65
64
|
"eslint-plugin-no-loops": "0.3.0",
|
package/src/UnistyleRegistry.ts
CHANGED
@@ -3,6 +3,7 @@ import type { UnistylesThemes, UnistylesBreakpoints } from './global'
|
|
3
3
|
|
4
4
|
export class UnistyleRegistry {
|
5
5
|
public config: UnistylesConfig = {}
|
6
|
+
public themeNames: Array<keyof UnistylesThemes> = []
|
6
7
|
public themes: UnistylesThemes = {} as UnistylesThemes
|
7
8
|
public breakpoints: UnistylesBreakpoints = {} as UnistylesBreakpoints
|
8
9
|
public sortedBreakpointPairs: Array<[keyof UnistylesBreakpoints, UnistylesBreakpoints[keyof UnistylesBreakpoints]]> = []
|
@@ -11,7 +12,11 @@ export class UnistyleRegistry {
|
|
11
12
|
|
12
13
|
public addThemes = (themes: UnistylesThemes) => {
|
13
14
|
this.themes = themes
|
14
|
-
|
15
|
+
|
16
|
+
const keys = Object.keys(themes) as Array<keyof UnistylesThemes>
|
17
|
+
|
18
|
+
this.unistylesBridge.themes = keys
|
19
|
+
this.themeNames = keys
|
15
20
|
|
16
21
|
return this
|
17
22
|
}
|
@@ -32,4 +37,14 @@ export class UnistyleRegistry {
|
|
32
37
|
|
33
38
|
return this
|
34
39
|
}
|
40
|
+
|
41
|
+
public dangerouslyUnregister = () => {
|
42
|
+
this.config = {}
|
43
|
+
this.themeNames = []
|
44
|
+
this.themes = {} as UnistylesThemes
|
45
|
+
this.breakpoints = {} as UnistylesBreakpoints
|
46
|
+
this.sortedBreakpointPairs = []
|
47
|
+
|
48
|
+
this.unistylesBridge.unregister()
|
49
|
+
}
|
35
50
|
}
|
package/src/UnistylesRuntime.ts
CHANGED
@@ -19,7 +19,7 @@ export class UnistylesRuntime {
|
|
19
19
|
}
|
20
20
|
|
21
21
|
public get themeName() {
|
22
|
-
return this.unistylesBridge.
|
22
|
+
return this.unistylesBridge.themeName
|
23
23
|
}
|
24
24
|
|
25
25
|
public get breakpoint() {
|
@@ -50,10 +50,14 @@ export class UnistylesRuntime {
|
|
50
50
|
return true
|
51
51
|
}
|
52
52
|
|
53
|
-
|
53
|
+
throw new Error(UnistylesError.ThemeNotRegistered)
|
54
54
|
}
|
55
55
|
|
56
56
|
public getTheme = (forName: keyof UnistylesThemes) => {
|
57
|
+
if (this.registry.themeNames.length === 0) {
|
58
|
+
return {} as UnistylesThemes[keyof UnistylesThemes]
|
59
|
+
}
|
60
|
+
|
57
61
|
if (!this.hasTheme(forName)) {
|
58
62
|
throw new Error(UnistylesError.ThemeNotFound)
|
59
63
|
}
|
package/src/global.ts
CHANGED
@@ -1,13 +1,16 @@
|
|
1
|
-
import { useEffect, useRef, useState } from 'react'
|
1
|
+
import { useEffect, useLayoutEffect, useRef, useState } from 'react'
|
2
2
|
import type { ScreenSize } from '../types'
|
3
|
-
import { isServer } from '../utils'
|
4
3
|
|
5
4
|
export const useDimensions = (): ScreenSize => {
|
6
5
|
const timerRef = useRef<ReturnType<typeof setTimeout>>()
|
7
|
-
const [screenSize, setScreenSize] = useState<ScreenSize>({
|
8
|
-
|
9
|
-
|
10
|
-
|
6
|
+
const [screenSize, setScreenSize] = useState<ScreenSize>({} as ScreenSize)
|
7
|
+
|
8
|
+
useLayoutEffect(() => {
|
9
|
+
setScreenSize({
|
10
|
+
width: window.innerWidth,
|
11
|
+
height: window.innerHeight
|
12
|
+
})
|
13
|
+
}, [])
|
11
14
|
|
12
15
|
useEffect(() => {
|
13
16
|
const handleResize = () => {
|
package/src/index.ts
CHANGED
package/src/types/cxx.ts
CHANGED
@@ -1,4 +1,5 @@
|
|
1
1
|
import type { UnistylesThemes, UnistylesBreakpoints } from '../global'
|
2
|
+
import type { ScreenSize } from './breakpoints'
|
2
3
|
|
3
4
|
export type Nullable<T> = T | null
|
4
5
|
export type ColorSchemeName = 'light' | 'dark' | undefined
|
@@ -17,7 +18,7 @@ export type UnistylesBridge = {
|
|
17
18
|
screenWidth: number,
|
18
19
|
screenHeight: number,
|
19
20
|
hasAdaptiveThemes: boolean,
|
20
|
-
|
21
|
+
themeName: keyof UnistylesThemes,
|
21
22
|
breakpoint: keyof UnistylesBreakpoints,
|
22
23
|
colorScheme: ColorSchemeName,
|
23
24
|
sortedBreakpointPairs: Array<[keyof UnistylesBreakpoints, UnistylesBreakpoints[keyof UnistylesBreakpoints]]>,
|
@@ -27,39 +28,39 @@ export type UnistylesBridge = {
|
|
27
28
|
useBreakpoints(breakpoints: UnistylesBreakpoints): void,
|
28
29
|
useTheme(name: keyof UnistylesThemes): void,
|
29
30
|
useAdaptiveThemes(enable: boolean): void,
|
31
|
+
|
32
|
+
// other
|
33
|
+
unregister(): void
|
30
34
|
}
|
31
35
|
|
32
36
|
export enum CxxUnistylesEventTypes {
|
33
37
|
Theme = 'theme',
|
34
|
-
|
35
|
-
Breakpoint = 'breakpoint'
|
38
|
+
Layout = 'layout'
|
36
39
|
}
|
37
40
|
|
38
|
-
export type
|
41
|
+
export type UnistylesThemeEvent = {
|
39
42
|
type: CxxUnistylesEventTypes.Theme,
|
40
43
|
payload: {
|
41
44
|
themeName: keyof UnistylesThemes
|
42
45
|
}
|
43
46
|
}
|
44
47
|
|
45
|
-
export type
|
46
|
-
type: CxxUnistylesEventTypes.
|
47
|
-
payload: {
|
48
|
-
width: number,
|
49
|
-
height: number
|
50
|
-
}
|
51
|
-
}
|
52
|
-
|
53
|
-
export type CxxUnistylesBreakpointEvent = {
|
54
|
-
type: CxxUnistylesEventTypes.Breakpoint,
|
48
|
+
export type UnistylesMobileLayoutEvent = {
|
49
|
+
type: CxxUnistylesEventTypes.Layout,
|
55
50
|
payload: {
|
56
|
-
|
51
|
+
screen: ScreenSize,
|
52
|
+
breakpoint: keyof UnistylesBreakpoints,
|
53
|
+
orientation: ScreenOrientation
|
57
54
|
}
|
58
55
|
}
|
59
56
|
|
60
|
-
export type UnistylesEvents =
|
57
|
+
export type UnistylesEvents = UnistylesThemeEvent | UnistylesMobileLayoutEvent
|
61
58
|
|
62
59
|
export enum UnistylesError {
|
63
60
|
RuntimeUnavailable = 'UNISTYLES_ERROR_RUNTIME_UNAVAILABLE',
|
64
|
-
ThemeNotFound = 'UNISTYLES_ERROR_THEME_NOT_FOUND'
|
61
|
+
ThemeNotFound = 'UNISTYLES_ERROR_THEME_NOT_FOUND',
|
62
|
+
ThemeNotRegistered = 'UNISTYLES_ERROR_THEME_NOT_REGISTERED',
|
63
|
+
ThemesCannotBeEmpty = 'UNISTYLES_ERROR_THEMES_CANNOT_BE_EMPTY',
|
64
|
+
BreakpointsCannotBeEmpty = 'UNISTYLES_ERROR_BREAKPOINTS_CANNOT_BE_EMPTY',
|
65
|
+
BreakpointsMustStartFromZero = 'UNISTYLES_ERROR_BREAKPOINTS_MUST_START_FROM_ZERO',
|
65
66
|
}
|
package/src/useInitialTheme.ts
CHANGED
@@ -1,7 +1,7 @@
|
|
1
|
-
import {
|
1
|
+
import { useMemo } from 'react'
|
2
2
|
import { unistyles } from './Unistyles'
|
3
3
|
import type { UnistylesThemes } from './global'
|
4
4
|
|
5
5
|
export const useInitialTheme = (forName: keyof UnistylesThemes) => {
|
6
|
-
|
6
|
+
useMemo(() => unistyles.runtime.setTheme(forName), [])
|
7
7
|
}
|
package/src/useStyles.ts
CHANGED
@@ -31,13 +31,13 @@ export const useStyles = <ST extends CustomNamedStyles<ST>>(stylesheet?: ST | Cr
|
|
31
31
|
if (typeof value === 'function') {
|
32
32
|
return {
|
33
33
|
...acc,
|
34
|
-
[key]: proxifyFunction(value, breakpoint
|
34
|
+
[key]: proxifyFunction(value, breakpoint, screenSize)
|
35
35
|
}
|
36
36
|
}
|
37
37
|
|
38
38
|
return StyleSheet.create({
|
39
39
|
...acc,
|
40
|
-
[key]: parseStyle<ST>(style, breakpoint
|
40
|
+
[key]: parseStyle<ST>(style, breakpoint, screenSize)
|
41
41
|
})
|
42
42
|
}, {} as ST), [breakpoint, screenSize, parsedStyles])
|
43
43
|
|
package/src/useUnistyles.ts
CHANGED
@@ -1,22 +1,18 @@
|
|
1
1
|
import { NativeEventEmitter, NativeModules } from 'react-native'
|
2
2
|
import { useEffect, useState } from 'react'
|
3
|
-
import type {
|
4
|
-
|
5
|
-
CxxUnistylesSizeEvent,
|
6
|
-
CxxUnistylesThemeEvent,
|
7
|
-
UnistylesEvents
|
8
|
-
} from './types'
|
9
|
-
import { CxxUnistylesEventTypes } from './types'
|
3
|
+
import type { UnistylesThemeEvent, UnistylesMobileLayoutEvent, UnistylesEvents } from './types'
|
4
|
+
import { CxxUnistylesEventTypes, ScreenOrientation } from './types'
|
10
5
|
import { unistyles } from './Unistyles'
|
11
6
|
|
12
7
|
const unistylesEvents = new NativeEventEmitter(NativeModules.Unistyles)
|
13
8
|
|
14
9
|
export const useUnistyles = () => {
|
10
|
+
const [orientation, setOrientation] = useState<ScreenOrientation>(unistyles.runtime.orientation)
|
15
11
|
const [theme, setTheme] = useState(unistyles.runtime.getTheme(unistyles.runtime.themeName))
|
16
12
|
const [breakpoint, setBreakpoint] = useState(unistyles.runtime.breakpoint)
|
17
13
|
const [screenSize, setScreenSize] = useState({
|
18
|
-
width:
|
19
|
-
height:
|
14
|
+
width: unistyles.runtime.screen.width,
|
15
|
+
height: unistyles.runtime.screen.height
|
20
16
|
})
|
21
17
|
|
22
18
|
useEffect(() => {
|
@@ -25,27 +21,18 @@ export const useUnistyles = () => {
|
|
25
21
|
(event: UnistylesEvents) => {
|
26
22
|
switch (event.type) {
|
27
23
|
case CxxUnistylesEventTypes.Theme: {
|
28
|
-
const themeEvent = event as
|
24
|
+
const themeEvent = event as UnistylesThemeEvent
|
29
25
|
|
30
26
|
setTheme(unistyles.runtime.getTheme(themeEvent.payload.themeName))
|
31
27
|
|
32
28
|
return
|
33
29
|
}
|
34
|
-
|
35
|
-
|
36
|
-
const sizeEvent = event as CxxUnistylesSizeEvent
|
30
|
+
case CxxUnistylesEventTypes.Layout: {
|
31
|
+
const layoutEvent = event as UnistylesMobileLayoutEvent
|
37
32
|
|
38
|
-
|
39
|
-
|
40
|
-
|
41
|
-
})
|
42
|
-
|
43
|
-
return
|
44
|
-
}
|
45
|
-
case CxxUnistylesEventTypes.Breakpoint: {
|
46
|
-
const breakpointEvent = event as CxxUnistylesBreakpointEvent
|
47
|
-
|
48
|
-
setBreakpoint(breakpointEvent.payload.breakpoint)
|
33
|
+
setBreakpoint(layoutEvent.payload.breakpoint)
|
34
|
+
setOrientation(layoutEvent.payload.orientation)
|
35
|
+
setScreenSize(layoutEvent.payload.screen)
|
49
36
|
|
50
37
|
return
|
51
38
|
}
|
@@ -60,6 +47,7 @@ export const useUnistyles = () => {
|
|
60
47
|
|
61
48
|
return {
|
62
49
|
theme,
|
50
|
+
orientation,
|
63
51
|
breakpoint,
|
64
52
|
screenSize
|
65
53
|
}
|
package/src/utils/breakpoints.ts
CHANGED
@@ -1,6 +1,7 @@
|
|
1
1
|
import { unistyles } from '../Unistyles'
|
2
|
-
import { throwError } from './common'
|
2
|
+
import { isMobile, Orientation, throwError } from './common'
|
3
3
|
import type { ScreenSize, MediaQueries } from '../types'
|
4
|
+
import { ScreenOrientation } from '../types'
|
4
5
|
import { getKeyForCustomMediaQuery, isMediaQuery } from './mediaQueries'
|
5
6
|
import type { UnistylesBreakpoints } from '../global'
|
6
7
|
|
@@ -66,7 +67,7 @@ export const sortAndValidateBreakpoints = (breakpoints: UnistylesBreakpoints): U
|
|
66
67
|
export const getBreakpointFromScreenWidth = (width: number, breakpointEntries: Array<[keyof UnistylesBreakpoints, UnistylesBreakpoints[keyof UnistylesBreakpoints]]>): keyof UnistylesBreakpoints & string => {
|
67
68
|
const [key] = breakpointEntries
|
68
69
|
.find(([, value], index, otherBreakpoints) => {
|
69
|
-
const minVal = value
|
70
|
+
const minVal = value as number
|
70
71
|
const maxVal = otherBreakpoints[index + 1]?.[1]
|
71
72
|
|
72
73
|
if (!maxVal) {
|
@@ -118,7 +119,20 @@ export const getValueForBreakpoint = (
|
|
118
119
|
return value[customMediaQueryKey]
|
119
120
|
}
|
120
121
|
|
121
|
-
//
|
122
|
+
// at this point user didn't use custom media queries (:w, :h)
|
123
|
+
// check if user defined any breakpoints
|
124
|
+
const hasBreakpoints = unistyles.runtime.sortedBreakpoints.length > 0
|
125
|
+
|
126
|
+
// if not then we can fallback to horizontal and portrait (mobile only)
|
127
|
+
if (!hasBreakpoints && isMobile && (Orientation.Landscape in value || Orientation.Portrait in value)) {
|
128
|
+
return value[
|
129
|
+
unistyles.runtime.orientation === ScreenOrientation.Portrait
|
130
|
+
? Orientation.Portrait
|
131
|
+
: Orientation.Landscape
|
132
|
+
]
|
133
|
+
}
|
134
|
+
|
135
|
+
// if user defined breakpoints, then we look for the valid one
|
122
136
|
const unifiedKey = breakpoint?.toLowerCase() as keyof typeof value
|
123
137
|
const directBreakpoint = value[unifiedKey]
|
124
138
|
|
@@ -127,7 +141,7 @@ export const getValueForBreakpoint = (
|
|
127
141
|
return directBreakpoint
|
128
142
|
}
|
129
143
|
|
130
|
-
// there is no direct hit for breakpoint nor media-query,
|
144
|
+
// there is no direct hit for breakpoint nor media-query, let's simulate CSS cascading
|
131
145
|
const breakpointPairs = unistyles.runtime.sortedBreakpoints
|
132
146
|
const currentBreakpoint = breakpointPairs
|
133
147
|
.findIndex(([key]) => key === unifiedKey)
|
package/src/utils/common.ts
CHANGED
@@ -8,5 +8,11 @@ export const warn = (message: string) => {
|
|
8
8
|
console.warn(`🦄 [react-native-unistyles]: ${message}`)
|
9
9
|
}
|
10
10
|
|
11
|
+
export const isMobile = Platform.OS === 'android' || Platform.OS === 'ios'
|
11
12
|
export const isWeb = Platform.OS === 'web'
|
12
13
|
export const isServer = typeof window === 'undefined'
|
14
|
+
|
15
|
+
export const Orientation = {
|
16
|
+
Landscape: 'landscape',
|
17
|
+
Portrait: 'portrait'
|
18
|
+
} as const
|
package/src/utils/index.ts
CHANGED
@@ -2,7 +2,7 @@ export { normalizeStyles } from './normalizeStyles'
|
|
2
2
|
export * from './normalizer'
|
3
3
|
export { getBreakpointFromScreenWidth, sortAndValidateBreakpoints, getValueForBreakpoint } from './breakpoints'
|
4
4
|
export { proxifyFunction, parseStyle } from './styles'
|
5
|
-
export { isServer } from './common'
|
5
|
+
export { isServer, Orientation } from './common'
|
6
6
|
export {
|
7
7
|
extractValues,
|
8
8
|
getKeyForCustomMediaQuery,
|