Add propsAreStyleOverrides to TypeScript definitions

[atticoos]

Copied from https://github.com/robinpowered/glamorous-native/pull/67#issuecomment-335768096:

---

How about usage of propsAreStyleOverrides? At least at first glance it seems to be fundamentally incompatible with static typing as it changes the type by runtime mutation.

I'm trying make an animated image

const Character = g(Animated.Image)({
    height: 270,
    resizeMode: "contain",
    width: "100%",
});
Character.propsAreStyleOverrides = true; // type error

Property 'propsAreStyleOverrides' does not exist on type 'GlamorousComponent<object & {}, object>'.

<Character
  source={imageSource}
  top={animatedValue} // type error

Type '{ source: any; top: Value; }' has no properties in common with type 'IntrinsicAttributes & IntrinsicClassAttributes<Component<ExtraGlamorousProps & object, ComponentS...'.

I think this is workaroundable with some clever type assertion but I didn't figure out that yet.

But in the end I'd like to see some other API for this which would be better fit for typed languages (ts&flow).

[atticoos]

cc @kaoDev if you're interested in this one

[luke-john]

The glamorous typings actually already support this using the following style by taking advantage of interface overloading

glamorous('div', {propsAreCssOverrides: true})({
    height: 270,
    resizeMode: "contain",
    width: "100%",
});

I'd hoped to find some time to rework the glamorous types to make it easy to share parts with glamorous-native but am still unlikely to get time to do that in the near future. For anyone looking into adding this the current glamorous typings should demonstrate how to add this.

[esamattis]

I tried that but I got:

Type 'true' is not assignable to type 'false | undefined'

Fixed it with follow patch:

diff --git a/declarations/glamorous-native/glamorous.d.ts b/declarations/glamorous-native/glamorous.d.ts
index e9e9595..00dc144 100644
--- a/declarations/glamorous-native/glamorous.d.ts
+++ b/declarations/glamorous-native/glamorous.d.ts
@@ -53,7 +53,7 @@ export interface GlamorousOptions<Props, Context, DefaultProps> {
     context: Context,
     prevContext: Context
   ) => boolean
-  propsAreCssOverrides?: false
+  propsAreCssOverrides?: boolean
   withProps: DefaultProps
 }

@@ -71,7 +71,7 @@ export interface PropsAreCssOverridesGlamorousOptions<
     context: Context,
     prevContext: Context
   ) => boolean
-  propsAreCssOverrides: true
+  propsAreCssOverrides: boolean
   withProps?: DefaultProps
 }

But the created component does not seems to recognize the style props

Type '{ source: any; top: Value; }' has no properties in common with type 'IntrinsicAttributes & IntrinsicClassAttributes<Component<ExtraGlamorousProps & object, ComponentS...'.

[luke-john]

hey @epeli, apologies I wasn't clear there. it's the glamorous typings that support this, not glamorous-native.

I also replied on the issue you initially raised this on with a workaround https://github.com/robinpowered/glamorous-native/pull/67#issuecomment-335824891

we seem to be playing github comment tag :)

[atticoos]

We're also behind on a few of the glamorous API changes -- passing propsArestyleOverrides as part of the config does not get consumed at the moment