expo-dev-client-components 1.5.3 → 1.6.1

package/CHANGELOG.md

@@ -10,6 +10,14 @@
 
 ### 💡 Others
 
+## 1.6.1 — 2023-09-04
+
+_This version does not introduce any user-facing changes._
+
+## 1.6.0 — 2023-08-02
+
+_This version does not introduce any user-facing changes._
+
 ## 1.5.3 — 2023-07-26
 
 _This version does not introduce any user-facing changes._

package/build/create-primitive.js.map

@@ -1 +1 @@
-{"version":3,"file":"create-primitive.js","sourceRoot":"","sources":["../src/create-primitive.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { StyleSheet, ViewStyle, ImageStyle, TextStyle } 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: React.ComponentType<T>,\n  config: O & { selectors?: Selectors<O['variants']>; props?: T }\n) {\n  config.selectors = config.selectors ?? {};\n  config.variants = config.variants ?? {};\n\n  const Component = React.forwardRef<\n    T,\n    React.PropsWithChildren<T> & Nested<typeof config['variants']> & { selectors?: SelectorProps }\n  >((props, ref) => {\n    const theme = useTheme();\n\n    const variantStyles = stylesForVariants(props, config.variants);\n    const selectorStyles = stylesForSelectors(props, config.selectors, { theme });\n    const selectorPropsStyles = stylesForSelectorProps(props.selectors, { theme });\n\n    const variantFreeProps: any = { ...props };\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\n    Object.keys(config.variants).forEach((variant) => {\n      delete variantFreeProps[variant];\n    });\n\n    return React.createElement(component, {\n      ...config.props,\n      ...variantFreeProps,\n      style: StyleSheet.flatten([\n        config.base,\n        variantStyles,\n        selectorStyles,\n        selectorPropsStyles,\n        // @ts-ignore\n        props.style || {},\n      ]),\n      ref,\n    });\n  });\n\n  return Component;\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"]}
+{"version":3,"file":"create-primitive.js","sourceRoot":"","sources":["../src/create-primitive.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { StyleSheet, ViewStyle, ImageStyle, TextStyle } 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: React.ComponentType<T>,\n  config: O & { selectors?: Selectors<O['variants']>; props?: T }\n) {\n  config.selectors = config.selectors ?? {};\n  config.variants = config.variants ?? {};\n\n  const Component = React.forwardRef<\n    T,\n    React.PropsWithChildren<T> & Nested<(typeof config)['variants']> & { selectors?: SelectorProps }\n  >((props, ref) => {\n    const theme = useTheme();\n\n    const variantStyles = stylesForVariants(props, config.variants);\n    const selectorStyles = stylesForSelectors(props, config.selectors, { theme });\n    const selectorPropsStyles = stylesForSelectorProps(props.selectors, { theme });\n\n    const variantFreeProps: any = { ...props };\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\n    Object.keys(config.variants).forEach((variant) => {\n      delete variantFreeProps[variant];\n    });\n\n    return React.createElement(component, {\n      ...config.props,\n      ...variantFreeProps,\n      style: StyleSheet.flatten([\n        config.base,\n        variantStyles,\n        selectorStyles,\n        selectorPropsStyles,\n        // @ts-ignore\n        props.style || {},\n      ]),\n      ref,\n    });\n  });\n\n  return Component;\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

@@ -1,6 +1,6 @@
 {
   "name": "expo-dev-client-components",
-  "version": "1.5.3",
+  "version": "1.6.1",
   "description": "Shared JS components and configuration for expo-dev-client",
   "main": "src/index.ts",
   "scripts": {
@@ -42,5 +42,5 @@
       "./setupTests.js"
     ]
   },
-  "gitHead": "3d3b8e6d49cd68caea30fd9ab633ace0bbefb3fb"
+  "gitHead": "79607a7325f47aa17c36d266100d09a4ff2cc544"
 }

package/src/create-primitive.tsx

@@ -41,7 +41,7 @@ export function create<T extends object, O extends Options>(
 
   const Component = React.forwardRef<
     T,
-    React.PropsWithChildren<T> & Nested<typeof config['variants']> & { selectors?: SelectorProps }
+    React.PropsWithChildren<T> & Nested<(typeof config)['variants']> & { selectors?: SelectorProps }
   >((props, ref) => {
     const theme = useTheme();
 

package/tsconfig.json

@@ -5,5 +5,5 @@
     "outDir": "./build"
   },
   "include": ["./src"],
-  "exclude": ["**/__mocks__/*", "**/__tests__/*", "**/__stories__/*"]
+  "exclude": ["**/__mocks__/*", "**/__tests__/*"]
 }