fable-compiler
react-google-maps isn't properly generated.
Version: 0.6.1 Steps to reproduce:
Try and generate from react-google-maps/types/index.d.ts.
For ex:
declare module 'react-google-maps/lib/components/GoogleMap' {
import { Component } from 'react'
export interface GoogleMapProps {
defaultCenter?: google.maps.LatLng | google.maps.LatLngLiteral
defaultClickableIcons?: boolean
defaultHeading?: number
defaultMapTypeId?: google.maps.MapTypeId | string
defaultOptions?: google.maps.MapOptions
defaultStreetView?: google.maps.StreetViewPanorama
defaultTilt?: number
defaultZoom?: number
center?: google.maps.LatLng | google.maps.LatLngLiteral
clickableIcons?: boolean
heading?: number
mapTypeId?: google.maps.MapTypeId | string
options?: google.maps.MapOptions
streetView?: google.maps.StreetViewPanorama
tilt?: number
zoom?: number
onBoundsChanged?(): void
onCenterChanged?(): void
onClick?(e: google.maps.MouseEvent | google.maps.IconMouseEvent): void
onDblClick?(e: google.maps.MouseEvent): void
onDrag?(): void
onDragEnd?(): void
onDragStart?(): void
onHeadingChanged?(): void
onIdle?(): void
onMapTypeIdChanged?(): void
onMouseMove?(e: google.maps.MouseEvent): void
onMouseOut?(e: google.maps.MouseEvent): void
onMouseOver?(e: google.maps.MouseEvent): void
onProjectionChanged?(): void
onResize?(): void
onRightClick?(e: google.maps.MouseEvent): void
onTilesLoaded?(): void
onTiltChanged?(): void
onZoomChanged?(): void
}
export default class GoogleMap extends Component<GoogleMapProps> {
fitBounds(bounds: google.maps.LatLngBounds | google.maps.LatLngBoundsLiteral): void
panBy(x: number, y: number): void
panTo(latLng: google.maps.LatLng | google.maps.LatLngLiteral): void
panToBounds(latLngBounds: google.maps.LatLngBounds | google.maps.LatLngBoundsLiteral): void
getBounds(): google.maps.LatLngBounds
getCenter(): google.maps.LatLng
getClickableIcons(): boolean
getDiv(): Element
getHeading(): number
getMapTypeId(): google.maps.MapTypeId | string
getProjection(): google.maps.Projection
getStreetView(): google.maps.StreetViewPanorama
getTilt(): number
getZoom(): number
}
}
module React_google_maps_lib_components_GoogleMap =
type Component = React.Component
type [<AllowNullLiteral>] IExports =
abstract GoogleMap: GoogleMapStatic
type [<AllowNullLiteral>] GoogleMapProps =
abstract defaultCenter: U2<Google.Maps.LatLng, Google.Maps.LatLngLiteral> option with get, set
abstract defaultClickableIcons: bool option with get, set
abstract defaultHeading: float option with get, set
abstract defaultMapTypeId: U2<Google.Maps.MapTypeId, string> option with get, set
abstract defaultOptions: Google.Maps.MapOptions option with get, set
abstract defaultStreetView: Google.Maps.StreetViewPanorama option with get, set
abstract defaultTilt: float option with get, set
abstract defaultZoom: float option with get, set
abstract center: U2<Google.Maps.LatLng, Google.Maps.LatLngLiteral> option with get, set
abstract clickableIcons: bool option with get, set
abstract heading: float option with get, set
abstract mapTypeId: U2<Google.Maps.MapTypeId, string> option with get, set
abstract options: Google.Maps.MapOptions option with get, set
abstract streetView: Google.Maps.StreetViewPanorama option with get, set
abstract tilt: float option with get, set
abstract zoom: float option with get, set
abstract onBoundsChanged: unit -> unit
abstract onCenterChanged: unit -> unit
abstract onClick: e: U2<Google.Maps.MouseEvent, Google.Maps.IconMouseEvent> -> unit
abstract onDblClick: e: Google.Maps.MouseEvent -> unit
abstract onDrag: unit -> unit
abstract onDragEnd: unit -> unit
abstract onDragStart: unit -> unit
abstract onHeadingChanged: unit -> unit
abstract onIdle: unit -> unit
abstract onMapTypeIdChanged: unit -> unit
abstract onMouseMove: e: Google.Maps.MouseEvent -> unit
abstract onMouseOut: e: Google.Maps.MouseEvent -> unit
abstract onMouseOver: e: Google.Maps.MouseEvent -> unit
abstract onProjectionChanged: unit -> unit
abstract onResize: unit -> unit
abstract onRightClick: e: Google.Maps.MouseEvent -> unit
abstract onTilesLoaded: unit -> unit
abstract onTiltChanged: unit -> unit
abstract onZoomChanged: unit -> unit
type [<AllowNullLiteral>] GoogleMap =
inherit Component<GoogleMapProps>
abstract fitBounds: bounds: U2<Google.Maps.LatLngBounds, Google.Maps.LatLngBoundsLiteral> -> unit
abstract panBy: x: float * y: float -> unit
abstract panTo: latLng: U2<Google.Maps.LatLng, Google.Maps.LatLngLiteral> -> unit
abstract panToBounds: latLngBounds: U2<Google.Maps.LatLngBounds, Google.Maps.LatLngBoundsLiteral> -> unit
abstract getBounds: unit -> Google.Maps.LatLngBounds
abstract getCenter: unit -> Google.Maps.LatLng
abstract getClickableIcons: unit -> bool
abstract getDiv: unit -> Element
abstract getHeading: unit -> float
abstract getMapTypeId: unit -> U2<Google.Maps.MapTypeId, string>
abstract getProjection: unit -> Google.Maps.Projection
abstract getStreetView: unit -> Google.Maps.StreetViewPanorama
abstract getTilt: unit -> float
abstract getZoom: unit -> float
type [<AllowNullLiteral>] GoogleMapStatic =
[<Emit "new $0($1...)">] abstract Create: unit -> GoogleMap
import { Component } from 'react' should open the React namespace.
Changing React.Component to Fable.Import.React.Component causes
The type 'Fable.Import.React.Component<_,_>' expects 2 type argument(s) but is given 0
Google.Maps.InfoWindowOptions, Google is not known. Should it not parse @types/googlemaps as well?
For @types/googlemaps, you need to pass it the file manually at the same time as react-google-maps
Please note, that ts2fable will generate only strongly typed React components not the DSL used in your view in general which is much more usable from Elmish and F#/Fable POV
Passing @types/googlemaps indeed works. What about the React stuff?
Given the following TypeScript:
declare module 'react-google-maps/lib/withGoogleMap' {
import { ComponentClass, ReactElement, StatelessComponent } from 'react'
export interface WithGoogleMapProps {
containerElement: ReactElement<any>
mapElement: ReactElement<any>
}
export default function withGoogleMap<P>(wrappedComponent: string | ComponentClass<P> | StatelessComponent<P>): ComponentClass<P & WithGoogleMapProps>
}
Gets translated to
Knowing that ReactElement looks like
interface ReactElement<P> {
type: string | ComponentClass<P> | SFC<P>;
props: P;
key: Key | null;
}
But the Fable ReactElement interface is not generic.
type ComponentClass = React.ComponentClass
Could be solved by making
type ComponentClass<'a> = React.ComponentClass<'a>
Which makes sense given
interface ComponentClass<P = {}> extends StaticLifecycle<P, any> {
new (props: P, context?: any): Component<P, ComponentState>;
propTypes?: ValidationMap<P>;
contextTypes?: ValidationMap<any>;
childContextTypes?: ValidationMap<any>;
defaultProps?: Partial<P>;
displayName?: string;
}
There is another version of React.fs which is fully generated by ts2fable. I believe you can get more info by comparing these two versions
Hmm everything else in the Fable landscape uses Fable.Import.React bindings. Should these not be fully compatible with the generated React.fs by ts2fable? /cc @alfonsogarciacaro
@nojaf In general, when working with react binding we use the DUs list with keyValueList style not class style. At least, when targetting Elmish because like that we have a consistant DSL for the views.
Edit: Even if ts2fable is doing a pretty good job, it's not yet ready to parse any d.ts files so for some libraries we don't use it by default yet. At least, it's my POV
I generated the first Fable.Import.React bindings with one of the very first versions of ts2fable and then we did manual tweaking. But yes, it could be a good idea to update it to match the bindings generated with latest ts2fable to make sure we get the updates. We're about to release a new major Fable.React version for Fable 2 so it could be a good opportunity. We will still need some manual tweaking, specially for React.Component which currently has lots of documentation, some custom members, and default dummy implementations for abstract members users don't necessarily need to implement.
