expo-dev-client-components 2.0.0 → 2.0.2
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/CHANGELOG.md
CHANGED
|
@@ -10,6 +10,16 @@
|
|
|
10
10
|
|
|
11
11
|
### 💡 Others
|
|
12
12
|
|
|
13
|
+
## 2.0.2 — 2024-10-29
|
|
14
|
+
|
|
15
|
+
_This version does not introduce any user-facing changes._
|
|
16
|
+
|
|
17
|
+
## 2.0.1 — 2024-10-22
|
|
18
|
+
|
|
19
|
+
### 💡 Others
|
|
20
|
+
|
|
21
|
+
- Fixed check-package test errors. ([#32232](https://github.com/expo/expo/pull/32232) by [@kudo](https://github.com/kudo))
|
|
22
|
+
|
|
13
23
|
## 2.0.0 — 2024-10-22
|
|
14
24
|
|
|
15
25
|
### 🐛 Bug fixes
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import
|
|
2
|
-
import { type
|
|
1
|
+
import { ComponentType } from 'react';
|
|
2
|
+
import { type ImageStyle, type TextStyle, type ViewStyle } from 'react-native';
|
|
3
3
|
type StyleType = ViewStyle | TextStyle | ImageStyle;
|
|
4
4
|
type Options = {
|
|
5
5
|
base?: StyleType;
|
|
@@ -26,16 +26,16 @@ type SelectorProps = {
|
|
|
26
26
|
light?: StyleType;
|
|
27
27
|
dark?: StyleType;
|
|
28
28
|
};
|
|
29
|
-
export declare function create<T extends object, O extends Options>(component:
|
|
29
|
+
export declare function create<T extends object, O extends Options>(component: ComponentType<T>, config: O & {
|
|
30
30
|
selectors?: Selectors<O['variants']>;
|
|
31
31
|
props?: T;
|
|
32
|
-
}):
|
|
33
|
-
children?:
|
|
32
|
+
}): import("react").ForwardRefExoticComponent<import("react").PropsWithoutRef<T & {
|
|
33
|
+
children?: import("react").ReactNode;
|
|
34
34
|
} & Nested<(O & {
|
|
35
35
|
selectors?: Selectors<O["variants"]> | undefined;
|
|
36
36
|
props?: T | undefined;
|
|
37
37
|
})["variants"]> & {
|
|
38
38
|
selectors?: SelectorProps | undefined;
|
|
39
|
-
}> &
|
|
39
|
+
}> & import("react").RefAttributes<T>>;
|
|
40
40
|
export {};
|
|
41
41
|
//# sourceMappingURL=create-primitive.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"create-primitive.d.ts","sourceRoot":"","sources":["../src/create-primitive.tsx"],"names":[],"mappings":"AAAA,OAAO,
|
|
1
|
+
{"version":3,"file":"create-primitive.d.ts","sourceRoot":"","sources":["../src/create-primitive.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAgD,MAAM,OAAO,CAAC;AACpF,OAAO,EAAE,KAAK,UAAU,EAAc,KAAK,SAAS,EAAE,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAI3F,KAAK,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,UAAU,CAAC;AAEpD,KAAK,OAAO,GAAG;IACb,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,QAAQ,CAAC,EAAE,UAAU,CAAC,SAAS,CAAC,CAAC;CAClC,CAAC;AAEF,KAAK,UAAU,CAAC,CAAC,IAAI;IAAE,CAAC,GAAG,EAAE,MAAM,GAAG;QAAE,CAAC,GAAG,EAAE,MAAM,GAAG,CAAC,CAAA;KAAE,CAAA;CAAE,CAAC;AAE7D,KAAK,MAAM,CAAC,IAAI,IAAI;KACjB,QAAQ,IAAI,MAAM,IAAI,CAAC,CAAC,EAAE,MAAM,IAAI,CAAC,QAAQ,CAAC;CAChD,CAAC;AAEF,KAAK,WAAW,CAAC,QAAQ,IAAI,OAAO,CAAC;KAClC,CAAC,IAAI,MAAM,QAAQ,CAAC,CAAC,EAAE;SACrB,CAAC,IAAI,MAAM,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,SAAS;KACrC;CACF,CAAC,CAAC;AAEH,KAAK,SAAS,CAAC,QAAQ,IAAI;IACzB,KAAK,CAAC,EAAE,WAAW,CAAC,QAAQ,CAAC,CAAC;IAC9B,IAAI,CAAC,EAAE,WAAW,CAAC,QAAQ,CAAC,CAAC;CAC9B,CAAC;AAEF,KAAK,aAAa,GAAG;IACnB,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,IAAI,CAAC,EAAE,SAAS,CAAC;CAClB,CAAC;AAEF,wBAAgB,MAAM,CAAC,CAAC,SAAS,MAAM,EAAE,CAAC,SAAS,OAAO,EACxD,SAAS,EAAE,aAAa,CAAC,CAAC,CAAC,EAC3B,MAAM,EAAE,CAAC,GAAG;IAAE,SAAS,CAAC,EAAE,SAAS,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC;IAAC,KAAK,CAAC,EAAE,CAAC,CAAA;CAAE;;;;;;;uCAsChE"}
|
|
@@ -1,15 +1,15 @@
|
|
|
1
|
-
import
|
|
1
|
+
import { createElement, forwardRef } from 'react';
|
|
2
2
|
import { StyleSheet } from 'react-native';
|
|
3
3
|
import { useTheme } from './useExpoTheme';
|
|
4
4
|
export function create(component, config) {
|
|
5
5
|
config.selectors = config.selectors ?? {};
|
|
6
6
|
config.variants = config.variants ?? {};
|
|
7
|
-
|
|
7
|
+
return forwardRef((props, ref) => {
|
|
8
8
|
const theme = useTheme();
|
|
9
|
+
const variantFreeProps = { ...props };
|
|
9
10
|
const variantStyles = stylesForVariants(props, config.variants);
|
|
10
11
|
const selectorStyles = stylesForSelectors(props, config.selectors, { theme });
|
|
11
|
-
const selectorPropsStyles = stylesForSelectorProps(
|
|
12
|
-
const variantFreeProps = { ...props };
|
|
12
|
+
const selectorPropsStyles = stylesForSelectorProps(variantFreeProps.selectors, { theme });
|
|
13
13
|
// @ts-ignore
|
|
14
14
|
// there could be a conflict between the primitive prop and the variant name
|
|
15
15
|
// for example - variant name "width" and prop "width"
|
|
@@ -17,7 +17,7 @@ export function create(component, config) {
|
|
|
17
17
|
Object.keys(config.variants).forEach((variant) => {
|
|
18
18
|
delete variantFreeProps[variant];
|
|
19
19
|
});
|
|
20
|
-
return
|
|
20
|
+
return createElement(component, {
|
|
21
21
|
...config.props,
|
|
22
22
|
...variantFreeProps,
|
|
23
23
|
style: StyleSheet.flatten([
|
|
@@ -25,13 +25,11 @@ export function create(component, config) {
|
|
|
25
25
|
variantStyles,
|
|
26
26
|
selectorStyles,
|
|
27
27
|
selectorPropsStyles,
|
|
28
|
-
|
|
29
|
-
props.style || {},
|
|
28
|
+
variantFreeProps.style ?? {},
|
|
30
29
|
]),
|
|
31
30
|
ref,
|
|
32
31
|
});
|
|
33
32
|
});
|
|
34
|
-
return Component;
|
|
35
33
|
}
|
|
36
34
|
function stylesForVariants(props, variants = {}) {
|
|
37
35
|
let styles = {};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"create-primitive.js","sourceRoot":"","sources":["../src/create-primitive.tsx"],"names":[],"mappings":"AAAA,OAAO,
|
|
1
|
+
{"version":3,"file":"create-primitive.js","sourceRoot":"","sources":["../src/create-primitive.tsx"],"names":[],"mappings":"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","sourcesContent":["import { ComponentType, PropsWithChildren, createElement, forwardRef } from 'react';\nimport { type ImageStyle, StyleSheet, type TextStyle, type ViewStyle } from 'react-native';\n\nimport { useTheme } from './useExpoTheme';\n\ntype StyleType = ViewStyle | TextStyle | ImageStyle;\n\ntype Options = {\n base?: StyleType;\n variants?: VariantMap<StyleType>;\n};\n\ntype VariantMap<T> = { [key: string]: { [key: string]: T } };\n\ntype Nested<Type> = {\n [Property in keyof Type]?: keyof Type[Property];\n};\n\ntype SelectorMap<Variants> = Partial<{\n [K in keyof Variants]?: {\n [T in keyof Variants[K]]?: StyleType;\n };\n}>;\n\ntype Selectors<Variants> = {\n light?: SelectorMap<Variants>;\n dark?: SelectorMap<Variants>;\n};\n\ntype SelectorProps = {\n light?: StyleType;\n dark?: StyleType;\n};\n\nexport function create<T extends object, O extends Options>(\n component: ComponentType<T>,\n config: O & { selectors?: Selectors<O['variants']>; props?: T }\n) {\n config.selectors = config.selectors ?? {};\n config.variants = config.variants ?? {};\n\n return forwardRef<\n T,\n PropsWithChildren<T> & Nested<(typeof config)['variants']> & { selectors?: SelectorProps }\n >((props, ref) => {\n const theme = useTheme();\n\n const variantFreeProps: any = { ...props };\n\n const variantStyles = stylesForVariants(props, config.variants);\n const selectorStyles = stylesForSelectors(props, config.selectors, { theme });\n const selectorPropsStyles = stylesForSelectorProps(variantFreeProps.selectors, { theme });\n\n // @ts-ignore\n // there could be a conflict between the primitive prop and the variant name\n // for example - variant name \"width\" and prop \"width\"\n // in these cases, favor the variant because it is under the users control (e.g they can update the conflicting name)\n Object.keys(config.variants).forEach((variant) => {\n delete variantFreeProps[variant];\n });\n\n return createElement(component, {\n ...config.props,\n ...variantFreeProps,\n style: StyleSheet.flatten([\n config.base,\n variantStyles,\n selectorStyles,\n selectorPropsStyles,\n variantFreeProps.style ?? {},\n ]),\n ref,\n });\n });\n}\n\nfunction stylesForVariants(props: any, variants: any = {}) {\n let styles = {};\n\n for (const key in props) {\n if (variants[key]) {\n const value = props[key];\n\n const styleValue = variants[key][value];\n if (styleValue) {\n styles = StyleSheet.flatten(StyleSheet.compose(styles, styleValue));\n }\n }\n }\n\n return styles;\n}\n\nfunction stylesForSelectors(props: any, selectors: any = {}, state: any = {}) {\n const styles: any[] = [];\n\n if (state.theme != null) {\n if (selectors[state.theme] != null) {\n const variants = selectors[state.theme];\n const variantStyles = stylesForVariants(props, variants);\n\n if (variants.base != null) {\n styles.push(variants.base);\n }\n\n styles.push(variantStyles);\n }\n }\n\n return StyleSheet.flatten(styles);\n}\n\nfunction stylesForSelectorProps(selectors: any = {}, state: any = {}) {\n const styles: any[] = [];\n\n if (state.theme != null) {\n if (selectors[state.theme] != null) {\n const selectorStyles = selectors[state.theme];\n styles.push(selectorStyles);\n }\n }\n\n return StyleSheet.flatten(styles);\n}\n"]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "expo-dev-client-components",
|
|
3
|
-
"version": "2.0.
|
|
3
|
+
"version": "2.0.2",
|
|
4
4
|
"description": "Shared JS components and configuration for expo-dev-client",
|
|
5
5
|
"main": "src/index.ts",
|
|
6
6
|
"scripts": {
|
|
@@ -44,5 +44,5 @@
|
|
|
44
44
|
"./setupTests.js"
|
|
45
45
|
]
|
|
46
46
|
},
|
|
47
|
-
"gitHead": "
|
|
47
|
+
"gitHead": "8b9f5addf49cb5ef7598ca27ff60c0accff6a1c3"
|
|
48
48
|
}
|
package/setupTests.js
CHANGED
package/src/create-primitive.tsx
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import
|
|
2
|
-
import {
|
|
1
|
+
import { ComponentType, PropsWithChildren, createElement, forwardRef } from 'react';
|
|
2
|
+
import { type ImageStyle, StyleSheet, type TextStyle, type ViewStyle } from 'react-native';
|
|
3
3
|
|
|
4
4
|
import { useTheme } from './useExpoTheme';
|
|
5
5
|
|
|
@@ -33,34 +33,33 @@ type SelectorProps = {
|
|
|
33
33
|
};
|
|
34
34
|
|
|
35
35
|
export function create<T extends object, O extends Options>(
|
|
36
|
-
component:
|
|
36
|
+
component: ComponentType<T>,
|
|
37
37
|
config: O & { selectors?: Selectors<O['variants']>; props?: T }
|
|
38
38
|
) {
|
|
39
39
|
config.selectors = config.selectors ?? {};
|
|
40
40
|
config.variants = config.variants ?? {};
|
|
41
41
|
|
|
42
|
-
|
|
42
|
+
return forwardRef<
|
|
43
43
|
T,
|
|
44
|
-
|
|
44
|
+
PropsWithChildren<T> & Nested<(typeof config)['variants']> & { selectors?: SelectorProps }
|
|
45
45
|
>((props, ref) => {
|
|
46
46
|
const theme = useTheme();
|
|
47
47
|
|
|
48
|
+
const variantFreeProps: any = { ...props };
|
|
49
|
+
|
|
48
50
|
const variantStyles = stylesForVariants(props, config.variants);
|
|
49
51
|
const selectorStyles = stylesForSelectors(props, config.selectors, { theme });
|
|
50
|
-
const selectorPropsStyles = stylesForSelectorProps(
|
|
51
|
-
|
|
52
|
-
const variantFreeProps: any = { ...props };
|
|
52
|
+
const selectorPropsStyles = stylesForSelectorProps(variantFreeProps.selectors, { theme });
|
|
53
53
|
|
|
54
54
|
// @ts-ignore
|
|
55
55
|
// there could be a conflict between the primitive prop and the variant name
|
|
56
56
|
// for example - variant name "width" and prop "width"
|
|
57
57
|
// in these cases, favor the variant because it is under the users control (e.g they can update the conflicting name)
|
|
58
|
-
|
|
59
58
|
Object.keys(config.variants).forEach((variant) => {
|
|
60
59
|
delete variantFreeProps[variant];
|
|
61
60
|
});
|
|
62
61
|
|
|
63
|
-
return
|
|
62
|
+
return createElement(component, {
|
|
64
63
|
...config.props,
|
|
65
64
|
...variantFreeProps,
|
|
66
65
|
style: StyleSheet.flatten([
|
|
@@ -68,14 +67,11 @@ export function create<T extends object, O extends Options>(
|
|
|
68
67
|
variantStyles,
|
|
69
68
|
selectorStyles,
|
|
70
69
|
selectorPropsStyles,
|
|
71
|
-
|
|
72
|
-
props.style || {},
|
|
70
|
+
variantFreeProps.style ?? {},
|
|
73
71
|
]),
|
|
74
72
|
ref,
|
|
75
73
|
});
|
|
76
74
|
});
|
|
77
|
-
|
|
78
|
-
return Component;
|
|
79
75
|
}
|
|
80
76
|
|
|
81
77
|
function stylesForVariants(props: any, variants: any = {}) {
|