Lelelo1 / rns-reactify

0 stars 0 forks source link

Covering all special cases #2

Closed Lelelo1 closed 5 years ago

Lelelo1 commented 5 years ago

Need to cover all special cases scattered around https://github.com/shirakaba/react-nativescript/tree/master/react-nativescript/src/components

Lelelo1 commented 5 years ago

I am considering making a file for each method on Reactify class - that contains: observableImpl, viewBaseIml,viewImpl` methods.

The method import names will clashes though - so I would have to cover it using dynamic imports or with decorators

Lelelo1 commented 5 years ago

Tested dynamic imports - it is not as performant: https://stackoverflow.com/questions/58181158/performance-when-using-dynamic-imports-in-typescript/58181965#58181965

Lelelo1 commented 5 years ago

I will turn each method on the Reactify method to a file. Each one of those files has an entry point that runs trough implementations - (in correct order). Reactify class only has declarations of the methods. For example - all components currently having an implementation on componentDidMount will have a non exported method inside a componentDidMountImpl.ts file - called buttonImpl, viewBaseImpl - invoked via exported componentDidMountImpl() method.

Lelelo1 commented 5 years ago

All impl methods needs some kind of check with instanceof so they don't always run. pageImpl should not run the creating a MyButton for instance.

And export type ExtraProps<T extends Observable> = ObservableProps<T> & ViewBaseProps & ViewProps & PageProps & ActionItemProps; does not work as a button then gets onNavigatedTo prop etc.

There might be a way to use a getter - to get correct interface. Use conditional types: https://mariusschulz.com/blog/conditional-types-in-typescript

Lelelo1 commented 5 years ago

The props problem is solved using conditional types just mentioned:

export type ExtraProps<T> = ObservableProps<T> & ViewBaseProps<T> & ViewProps<T> & PageProps<T> & ActionItemProps<T>;

... where each props are defined like so:

type PageProps<T> = T extends Page ? IPage : Empty
interface IPage {
    onNavigatingTo?: PageNavigationEventHandler;
    onNavigatedTo?: PageNavigationEventHandler;
    onNavigatingFrom?: PageNavigationEventHandler;
    onNavigatedFrom?: PageNavigationEventHandler;
}

... meaning a react-nativescript button will not get onNavigatingTo, onNavigatedTo and so on. Only if the NativeScript component is Page or sublass of Page.

https://github.com/Lelelo1/rns-reactify/blob/master/app/Reactified/ExtraProps.ts


The impl's still needs a solution though

Lelelo1 commented 5 years ago

All impl's will no longer take T extends Observable - but their specific generic type: viewImpl will take T extends View etc

Screenshot 2019-10-02 at 11 58 05

As mentioned - to access the View's extra props it then has to be a specific Reactify<View> (or subclass of it) and I will check for null/undefined instance and return immediately from all ´impl`methods like so...

Screenshot 2019-10-02 at 12 09 40

To be able to call the impls I will use tryCast helper method. Attempting downcast so that impl method calls looks like:

viewImpl(
        tryCast<Reactify<View>>(instance),
        tryCast(node), attach,
        tryCast<Props<View>>(nextProps)
    );

What special cases will look like can be found here: https://github.com/Lelelo1/rns-reactify/blob/master/app/Reactified/Implementation/updateListenersImpl.ts. Note that every method on the Reactify class will have i'ts own file:

The method calls will still have to be called in the correct tough.

Lelelo1 commented 5 years ago

tryCast does not appear to be working - or it is not possible type check against Reactify<T>. This means all impl methods will run so that actionItem impl will run even if it as a button and so on.

Lelelo1 commented 5 years ago

tryCast does not appear to be working - or it is not possible type check against Reactify. This means all impl methods will run so that actionItem impl will run even if it as a button and so on.

Tracked under #7


All method will be declared on Reactify - and each will have i'ts implementation file