Improve Styling API

[alexbchr]

Improve Styling API to move styles outside of component definition.

Styles are wrapped in a generator function called createStyles. This function is then passed to useStylesBuilder which uses the active theme to build the styles. This is in fact the exact same API as before, but enforces the "mentality" of not using Component's props in the styles definition.

This way, style object stays the same for the lifetime of the component (as long as theme doesn't change). However, this makes style objects larger than if using props directly in style definition. Memory usage is larger but overally performance and CPU usage should be lower. If using props, we would need to invalidate style objects on each prop change, which could be performance intensive on certain components.

A great thing would be to use React Native StyleSheet API, as this optimizes performance by sending each style to the native layer only once, but since theme is dynamic, I don't think this is really possible with current React Native API.

[alexbchr]

Just thought of something...

If we want to use props in styles, why not use a similar, but a bit different API?

E.g.

const MyComponent: React.FC<MyComponentProps> = ({ primary, disabled, onClick }) => {
  const styles = useStyles({ primary, disabled })
  // or
  const styles = useStyles(props)
}

// When defining styles
const useStyles = createStylesHook<MyComponent>(
  ['primary', 'disabled'], // Props on which styles are dependent
  (
    { colors, radius, elevation } // Theme, 
    { primary, disabled } // Dependent prop values
  ) => ({
    // Style definitions
    button: {
      backgroundColor: primary ? colors.fill.primary.default : colors.fill.accent.default
    }
    // ...
  })
)

Pros:

• Can use props in style definition
• Way less style objects and less/no composition of styles in component (style=[styles.button, primary && styles.buttonPrimary)
• Entirely Typescript compatible and build-safe (for props selection + value types)

Cons:

• Either receive props as an object in Component arguments to pass them back to useStyles individually for each "style-defining" prop.
• A bit more boilerplate, but less style objects (which is a Pro).

[alexbchr]

See Styled Components API